/* components styles */

/* =====================================================================
 * button
 ============================================================================*/
/* 모바일 브라우저 터치 자동으로 넣는 효과 없앰 */
a,
button,
input,
textarea,
select,
label {
  -webkit-tap-highlight-color: transparent;
}

/* button속성*/
button {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
  text-transform: none;

  display: inline-flex;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.6rem;
  height: 6.4rem;
  padding: 0 2.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 1.2rem;
  box-sizing: border-box;
}

/* ======  btn layout  ====== */
.btn-area {
  display: flex;
  justify-content: center;
}

/* 나란히 두개 배치 */
.multiple {
  gap: 0.8rem;
  max-width: 100rem;
  margin: 0 auto;
  width: 100%;
}

.btn-single,
.btn-multi {
  flex: 1 1 auto;
  width: 100%;
  height: 6.4rem;
  padding: 0 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
}
.btn-single {
  max-width: 58.5rem;
}

/* ======  btn colors  ====== */
/* == primary == */
.btn,
.btn.primary {
  background-color: var(--color-btn-primary, #150f96);
}

/* hover */
.btn:hover,
.btn.hover,
.btn.primary:hover,
.btn.primary.hover {
  background-color: var(--color-btn-primary-hover, #100b7e);
}

/* active, pressed */
.btn:active,
.btn.active,
.btn.primary:active,
.btn.primary.active {
  background-color: var(--color-btn-primary-active, #0a0755);
}

/* -- secondary -- */
.btn.secondary {
  background-color: #fff;
  color: var(--color-text-body, #1f2732);
  border: 1px solid var(--color-btn-secondary-border, #64748e);
}

.btn.secondary:hover,
.btn.secondary.hover {
  background-color: var(--color-btn-secondary-hover, #f8fafc);
}

.btn.secondary:active,
.btn.secondary.active {
  background-color: var(--color-btn-secondary-active, #f1f5f9);
}

/* disabled 공통 */
.btn:disabled,
.btn.disabled,
.btn.primary:disabled,
.btn.primary.disabled,
.btn.secondary:disabled,
.btn.secondary.disabled {
  background-color: var(--color-btn-disabled, #e2e8f0);
  color: var(--color-text-state-disabled, #9aa5b3);
  pointer-events: none;
}

/* focus 키보드 포커스일 때만 표시 */
button:focus {
  outline: none;
}
button:focus-visible {
  outline: 1px dotted #150f96;
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  /* ======  btn layout  ====== */
  .btn {
    min-width: 8rem;
    width: auto;
    height: 5.6rem;
    font-size: 1.6rem;
    padding: 0 1.6rem;
  }
  .btn-single {
    min-width: 10rem;
    width: 100%;
  }

  .btn-multi {
    width: 100%;
  }
}

/* =============================================================================
form group 신청하기 폼
 =====================================================================================*/
/* 
******* input *******
*/
input[type='text'],
input[type='number'],
input[type='tel'],
input[type='email'],
input[type='password'] {
  width: 100%;
  border: 1px solid var(--color-border-default, #e2e8f0);
  border-radius: 1.2rem;
  background: #fff;
  padding: 1.6rem;
  height: 5.9rem;
  font-family: var(--font-family-base);
  font-size: var(--body-medium-pc, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-body, #1f2732);
}

input[type='text']::placeholder,
input[type='number']::placeholder,
input[type='tel']::placeholder,
input[type='email']::placeholder,
input[type='password']::placeholder {
  color: var(--color-text-state-disabled, #9aa5b3);
  font-weight: 400;
}

input[type='text']:disabled,
input[type='number']:disabled,
input[type='tel']:disabled,
input[type='email']:disabled,
input[type='password']:disabled {
  background-color: var(--color-surface-form-disabled, #e2e8f0);
  color: var(--color-text-state-disabled, #9aa5b3);
}

input[type='text']:focus-visible,
input[type='number']:focus-visible,
input[type='tel']:focus-visible,
input[type='email']:focus-visible,
input[type='password']:focus-visible {
  border-color: var(--color-border-focus, #150f96);
  color: var(--color-text-body, #1f2732);
}

input[type='text']:read-only,
input[type='number']:read-only,
input[type='tel']:read-only,
input[type='email']:read-only,
input[type='password']:read-only,
input[type='text'].readonly,
input[type='number'].readonly,
input[type='tel'].readonly,
input[type='email'].readonly,
input[type='password'].readonly {
  background: var(--color-surface-form-disabled, #e2e8f0);
  color: var(--color-text-state-disabled, #9aa5b3);
}

input[type='text'].error,
input[type='number'].error,
input[type='tel'].error,
input[type='email'].error,
input[type='password'].error {
  border: 1px solid var(--color-border-error, #e41913);
}

/* form message */
.msg-box {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: left;
  padding-left: 2rem;
  color: var(--color-text-body, #1f2732);
}

.msg-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  background: url('/resources/front/images/common/icon_input_error.svg') no-repeat
    center / contain;
}
.msg-box.error {
  color: var(--color-text-danger, #e41913);
}

input.sm {
  max-width: 12rem;
}

/* form top */
.form-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.form-tit {
  font-size: var(--body-small-pc, 1.6rem);
  font-weight: 400;
  line-height: 1.5;
}
.form-tit .essential {
  display: inline-block;
  position: relative;
  vertical-align: middle;

  width: 0.8rem;
  height: 0.8rem;
}
.form-tit .essential::after {
  content: '';
  position: absolute;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Cpath d='M4.40722 8H3.09278L3.20876 4.95332L0.657217 6.58477L0 5.42506L2.66753 4.00983L0 2.57494L0.657217 1.41523L3.20876 3.04668L3.09278 0H4.40722L4.29124 3.04668L6.84278 1.41523L7.5 2.57494L4.8518 4.00983L7.5 5.42506L6.84278 6.58477L4.29124 4.95332L4.40722 8Z' fill='%23FF0198'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;

  width: 0.8rem;
  height: 0.8rem;

  top: 0;
  transform: translateY(-50%);
}

/* .form-input */
.form-input {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
}

.form-input.form-area,
.form-input.form-hp {
  width: 100%;
}
.form-input.form-area select,
.form-hp .form-input input {
  flex: 1;
}

.form-list + .form-list {
  margin-top: 2.4rem;
}

/* .form-clear 폼 입력시 삭제버튼  */
/* ===============================
focus → .is-focus 추가 → clear 버튼 보임
blur → .is-focus 제거 → clear 버튼 사라짐
clear 버튼 클릭 → input value 초기화 
=============================== */

.form-clear input {
  width: 100%;
  padding-right: 40px;
}
.form-clear .btn-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 12px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border: 0;
  background: url('/resources/front/images/common/icon_input_clear.svg') no-repeat
    center / 100% auto;
  cursor: pointer;
}

.form-clear.is-focus .btn-clear {
  display: block;
}

@media screen and (max-width: 767px) {
  input[type='text'],
  input[type='number'],
  input[type='tel'],
  input[type='email'],
  input[type='password'] {
    height: 5.6rem;
    font-size: var(--body-medium-mo, 1.6rem);
  }

  input[type='text']::placeholder,
  input[type='number']::placeholder,
  input[type='tel']::placeholder,
  input[type='email']::placeholder,
  input[type='password']::placeholder {
    font-size: var(--body-medium-mo, 1.6rem);
  }

  .form-tit {
    font-size: var(--body-small-mo, 1.4rem);
  }
}

/* =========================================================
   form.select .custom-select
========================================================= */
/* 커스텀 셀렉트 컨테이너 */
.custom-select {
  position: relative;
  width: 100%;
}

/* 지역 선택처럼 2개 이상 나란히 들어가는 경우 */
.form-area .custom-select {
  flex: 1;
}

.custom-select .select-label {
  width: 100%;
  height: 5.9rem;
  padding: 1.6rem;
  text-align: left;
  color: var(--color-text-state-disabled, #9aa5b3);
  border: 1px solid #e2e8f0;
  border-radius: 1.2rem;
  background-color: #fff;
  background-image: url('/resources/front/images/common/icon_select_arrow.svg');
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 2rem;
  font-weight: 400;
  cursor: pointer;
}

.custom-select .select-label.is-selected {
  color: var(--color-text-body, #1f2732);
  font-weight: var(--font-weight-extrabold, 700);
}

.custom-select.active .select-label {
  border-color: var(--color-border-focus, #150f96);
}

.custom-select .select-options {
  display: none;
  position: absolute;
  top: 6.5rem;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 0.8rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-select.active .select-options {
  display: block;
}

.custom-select .select-options li button {
  width: 100%;
  padding: 1.2rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
  cursor: pointer;
}
.custom-select .select-options li button:focus-visible {
  outline: 1px dotted #150f96;
  outline-offset: -0.5rem;
  border-radius: 0.1rem;
}
.custom-select .select-options li button:hover {
  background-color: #f8fafc;
  color: #150f96;
}

.custom-select.error .select-label {
  border-color: var(--color-border-error, #e41913);
}

@media screen and (max-width: 767px) {
  .custom-select .select-label {
    height: 5.6rem;
    font-size: var(--body-medium-mo, 1.6rem);
  }
}

/* =========================================================
   사각형 체크박스 
========================================================= */
/* group-check */
.group-check {
  position: relative;
}

.group-check input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.group-check label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.6rem;
  padding: 0 1.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  background: #fff;
  color: #1e2124;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.group-check label:hover {
  background-color: #f4f5f6;
}

.group-check {
  flex: 1;
}

.group-check label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 5.9rem;
  border-radius: 1.2rem;
  color: var(--color-text-body, #1f2732);
  font-size: var(--body-medium-pc, 1.8rem);
  font-weight: 400;
}

.group-check label::after {
  content: '';
  width: 2.4rem;
  height: 2.4rem;
  background: url('/resources/front/images/common/icon_radio_check_defalute.svg')
    no-repeat center / cover;
}

.group-check.error label {
  border-color: var(--color-border-error, #e41913);
}

/* checked */
.group-check input[type='radio']:checked + label {
  border-color: var(--color-border-focus, #150f96);
  background-color: #f0f5ff;
  color: var(--color-text-state-selected, #150f96);
  font-weight: var(--font-weight-extrabold, 700);
  box-shadow: 0 3px 3px 0 var(--color-shadow-selected, rgba(21, 15, 150, 0.2));
}

.group-check input[type='radio']:checked + label::after {
  background-image: url('/resources/front/images/common/icon_radio_check_checked.svg');
}

.group-check input[type='radio']:focus-visible + label {
  outline: 1px dotted var(--color-border-focus, #150f96);
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .group-check label {
    height: 5.6rem;
    font-size: var(--body-medium-mo, 1.6rem);
  }
}

/* =========================================================
Modal
이탈방지 모달 ==> .modal--default : 일반 모달 / 내부 스크롤 없음 / body 최소 높이 58.6rem 보장
성향 테스트 결과 모달창 ==> .modal--full : PC는 위아래 여백 있는 풀 타입 / 모바일은 완전 풀 / 내부 스크롤 없음 / body 최소 높이 58.6rem 보장
상담 신청 모달창 ==> .modal--full-scroll : 풀 타입 / 내부 스크롤 있음 / body 최소 높이 58.6rem 보장
성향 테스트 모달창 ==>.modal--compact : 추가 타입 / body가 58.6rem보다 작아도 되는 타입 / 모바일에서는 동일하게 풀 모달 


개인정보처리방침_모달 => modal--sm (단순 텍스트 + 버튼 레이아웃 형태)
========================================================= */

/* 바닥 페이지 스크롤 막기 */
html.modal-open,
body.modal-open {
  overflow: hidden;
  touch-action: none;
  height: 100%;
  -webkit-overflow-scrolling: none;
}
/* =========== 공통 =========== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.modal.is-open {
  display: block;
}

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-wrap {
  position: relative;
  z-index: 1;
}

.modal-dialog {
  height: 100%;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 2.4rem;
}

/* 모달 타이틀 포커스 검은 실선 삭제 */
.modal .modal-title[tabindex='-1']:focus,
.modal .modal-title[tabindex='-1']:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ---- modal header ---- */
.modal-header {
  flex: 0 0 auto;
  padding: 2.65rem 2.4rem 2.65rem 3.2rem;
}
.modal-header .modal-title {
  font-family: var(--font-family-point);
  font-size: var(--font-size-h4-pc, 2.6rem);
}

/* ---- modal footer ---- */
.modal-footer {
  flex: 0 0 auto;
  padding: 3.2rem 3.2rem 4rem 3.2rem;
}

/* ---- modal body ---- */
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  font-size: var(--body-medium-pc, 1.8rem);
  color: var(--color-text-bolder, #131416);
}
.modal-body .modal-body-wrap {
  width: 100%;
  height: 100%;
  padding: 0 3.2rem;
}

.modal--full .modal-body {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.modal .modal-close,
.modal-full .modal-close {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  right: 2.4rem;
  top: 2.65rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.modal-close::after {
  content: '';
  position: absolute;
  background-image: url('/resources/front/images/common/btn_modal_close.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 3.2rem;
  height: 3.2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---.modal--default--- */
.modal--default .modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.modal--default .modal-dialog {
  max-width: 60rem;
  width: 100%;
  height: auto;
}
.modal--default .modal-header {
  height: 6.4rem;
  padding: 1.45rem 2.4rem 1.45rem 3.2rem;
}

.modal--default .modal-body {
  overflow: hidden;
}

.modal--default .modal-close {
  top: 1.45rem;
  right: 2.4rem;
}

/* ---.modal--full / .modal--full-scroll --- */
.modal--full .modal-wrap,
.modal--full-scroll .modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.5rem 0;
  margin: 0;
}

.modal--full .modal-dialog,
.modal--full-scroll .modal-dialog {
  width: 100%;
  max-width: 60rem;
  height: calc(100dvh - 5rem);
}

.modal--full .modal-header,
.modal--full-scroll .modal-header,
.modal--compact .modal-header {
  height: 8.8rem;
}

/* 평소에는 스크롤 없음 넘치면 스크롤 */
.modal--full .modal-body {
  overflow: hidden;
}

.modal--full-scroll .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/*--- .modal--compact ---*/
.modal--compact .modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
}

.modal--compact .modal-dialog {
  height: auto;
  width: 100%;
  max-width: 60rem;
}
.modal--compact .modal-header {
  height: 8.8rem;
}

.modal--compact .modal-body {
  min-height: 0;
  overflow: hidden;
}

.modal--compact .modal-body-wrap {
  padding: 0 3.2rem 7.2rem 3.2rem;
}

/*--- .modal--sm : 개인정보처리방침 게이트 팝업 ---*/
.modal--sm .modal-dim {
  background: rgba(0, 0, 0, 0.74);
}

.modal--sm .modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  margin: 0;
}

.modal--sm .modal-dialog {
  max-width: 48rem;
  width: 100%;
  height: auto;
}

.modal--sm .modal-content {
  width: 100%;
  max-height: none;
  padding: 7.2rem 3.2rem 3.2rem;
  overflow: visible;
}

.modal--sm .modal-header {
  display: none;
  padding: 0;
}

.modal--sm .modal-body {
  flex: 0 0 auto;
}

.modal--sm .modal-body .modal-body-wrap {
  height: auto;
  padding: 0;
}

.modal--sm .modal-text {
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--color-text-body, #1f2937);
}

.modal--sm .modal-footer {
  padding: 0;
  margin-top: 3.2rem;
}

.modal--sm .btn-area {
  width: 100%;
}

.modal--sm .modal-close {
  top: 2rem;
  right: 1.6rem;
}

/* 이벤트 팝업 */
.event-modal-content {
  border-radius: 1.2rem;
  overflow: hidden;
}

/*---- 반응형 ----*/
@media screen and (max-width: 767px) {
  .modal-content {
    border-radius: 1.6rem;
  }

  .modal--default .modal-wrap {
    margin: 0;
    padding: 0 4%;
  }

  .modal--full .modal-dialog,
  .modal--full-scroll .modal-dialog,
  .modal--compact .modal-dialog {
    height: 100dvh;
    max-width: none;
  }

  /* 모달헤더 */
  .modal-header {
    padding: 2rem 2rem 1.6rem 2rem;
  }
  .modal-header .modal-title {
    font-size: var(--font-size-h4-mo, 1.8rem);
  }
  .modal-body {
    font-size: var(--body-medium-mo, 1.6rem);
  }

  .modal--full .modal-header,
  .modal--full-scroll .modal-header,
  .modal--compact .modal-header {
    height: 6.4rem;
  }
  .modal--default .modal-header {
    height: 4.8rem;
  }

  .modal--full .modal-content,
  .modal--full-scroll .modal-content,
  .modal--compact .modal-content {
    height: 100dvh;
    border-radius: 0;
  }

  .modal--full-scroll .modal-body,
  .modal--compact .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-body .modal-body-wrap,
  .modal--full-scroll .modal-body .modal-body-wrap,
  .modal--compact .modal-body .modal-body-wrap {
    padding: 0 2rem;
  }

  .modal--default .modal-body .modal-body-wrap {
    padding: 0 1.2rem;
  }
  .modal--compact .modal-content {
    margin: 0;
  }

  /* 닫기 버튼 */
  .modal .modal-close,
  .modal-full .modal-close {
    top: 2rem;
    right: 1.6rem;
    width: 3.2rem;
    height: 3.2rem;
  }
  .modal-close::after {
    width: 2.4rem;
    height: 2.4rem;
  }

  .modal--default .modal-close {
    top: 0.8rem;
    right: 0.8rem;
  }

  /* 푸터 */
  .modal-footer {
    padding: 2rem 2rem 3.2rem 2rem;
  }
  /* 푸터 */
  .modal--default .modal-footer {
    padding: 1.2rem;
  }

  /*--- .modal--sm : 개인정보처리방침 게이트 팝업 ---*/
  .modal--sm .modal-wrap {
    padding: 2rem;
  }

  .modal--sm .modal-content {
    padding: 4.8rem 2rem 2rem;
  }

  .modal--sm .modal-text {
    line-height: 1.55;
    padding: 0 0.4rem;
  }

  .modal--sm .modal-footer {
    margin-top: 1.2rem;
  }
  .modal--sm .modal-close {
    width: 2.4rem;
    height: 2.4rem;
    top: 1.2rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .modal--full .modal-dialog {
    width: 100%;
    max-width: 60rem;
    height: auto;
  }

  .modal--full .modal-content {
    height: auto;
    max-height: calc(100dvh - 5rem);
  }
}

/* 화면 높이가 부족할 때만 full도 내부 스크롤 허용 */
@media (max-height: 850px) {
  .modal--full .modal-body,
  .modal--full-scroll .modal-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .modal--default .modal-content {
    max-height: 90dvh;
  }

  .modal--default .modal-body {
    /* min-height: 0; */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
Modal 약관 동의, 성향 테스트 결과, 성향 테스트 content 관련 스타일
========================================================= */
/* ---- 약관 동의 ---- */
.terms-wrap {
  width: 100%;
  margin-top: 4rem;
}

.terms-wrap .chk input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

/* 전체 동의 */
.terms-check-all {
  padding: 2rem 1.6rem;
  border-radius: 1.2rem;
  background: #f1f5f9;
  margin-bottom: 1.6rem;
  position: relative;
}
.terms-check-all .chk label {
  padding-left: 4rem;
}
.terms-check-all .chk label > span {
  font-weight: 700;
  color: var(--color-text-state-disabled, #9aa5b3);
  font-size: var(--body-medium-pc, 1.8rem);
}

.terms-check-all .chk label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.8rem;
  height: 2.8rem;
  background-image: url('/resources/front/images/common/icon_chk-all_default.svg');
  background-repeat: no-repeat;
  background-position: 0% 50%;
  background-size: contain;
  transform: translateY(-50%);
}
.terms-check-all .chk input[type='checkbox']:checked + label::before {
  background-image: url('/resources/front/images/common/icon_chk-all_disChecked.svg');
}

.terms-check-all .chk input[type='checkbox']:checked + label > span {
  color: #150f96;
}

.chk input[type='checkbox']:focus-visible + label {
  outline: 1px dotted #150f96;
  outline-offset: 1px;
  border-radius: 0.1rem;
}

.terms-check-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 1.6rem;
}

.terms-check-head .chk {
  position: relative;
  min-width: 0;
  flex: 1;
}

.chk label {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  padding-left: 3.2rem;
  font-size: var(--body-small-pc, 1.6rem);
  line-height: 1.5;
  cursor: pointer;
  color: var(--color-text-body, #1f2732);
}
.chk label:focus-visible {
  outline: 1px dotted #150f96;
  outline-offset: 1px;
  border-radius: 0.1rem;
}

.chk label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  background-image: url('/resources/front/images/common/icon_chk_default.svg');
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: contain;
}

.chk input:checked + label::before {
  background-image: url('/resources/front/images/common/icon_chk_disChecked.svg');
}

.terms-toggle {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.terms-toggle .icon-arrow {
  display: block;
  width: 2rem;
  height: 2rem;
  background: url('/resources/front/images/common/icon_term-toggle.svg') no-repeat
    center / contain;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.terms-toggle[aria-expanded='true'] .icon-arrow {
  transform: rotate(0);
}

.terms-accordion-collapse[hidden] {
  display: none;
}

.terms-accordion-body {
  padding: 1.6rem;
  border-radius: 1.2rem;
  background-color: #f1f5f9;
  color: #45556c;
}
.terms-accordion-body:focus {
  outline: none;
}

.terms-accordion-body:focus-visible {
  outline: 1px dotted #474747;
  outline-offset: 1px;
}

.terms-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: var(--caption-pc, 1.4rem);
  line-height: 1.5;
  color: var(--color-text-caption, #45556c);
}

.terms-table caption {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}

.terms-table-col-title {
  width: 14rem;
}

.terms-table th,
.terms-table td {
  padding: 1.2rem;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
  line-height: 1.5;
}

.terms-table th {
  font-weight: 700;
  text-align: center;
}

.terms-table strong {
  color: #020618;
  font-weight: 700;
  text-decoration: underline;
  font-size: var(--body-small-pc, 1.6rem);
}

.terms-text {
  margin: 0;
}

.apply-btn {
  width: 100%;
  height: 5.6rem;
  margin-top: 2.4rem;
  border: 0;
  border-radius: 1.2rem;
  background: #2438d8;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
}

.apply-btn:disabled {
  background: #d8e1ec;
  color: #8a9bb0;
  cursor: not-allowed;
}
.terms-purpose-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.terms-purpose-list > li {
  position: relative;
  padding-left: 0.8rem;
}
.terms-purpose-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 50%;
  background-color: #45556c;
}

.terms-purpose-list > li + li {
  margin-top: 0.6rem;
}

/* 상담 성향 테스트 */
.test-progress__track {
  position: relative;
}
.test-progress__steps {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  height: 0.4rem;
}
.test-progress__step {
  position: relative;
  background-color: #e2e8f0;
  border-radius: 10rem;
  height: 0.4rem;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}
/* 완료되었거나 현재 단계인 경우 색상 채우기 */
.test-progress__step.is-complete,
.test-progress__step.is-current {
  background-color: #150f96; /* 진행 중인 색상 */
}

.test-progress__count {
  display: flex;
  justify-content: flex-end;
  color: var(--color-text-state-disabled, #9aa5b3);
  font-size: var(--body-small-pc, 1.6rem);
  margin-top: 0.8rem;
  font-family: var(--font-family-base);
}
.test-progress__current {
  font-weight: 700;
  color: var(--color-text-state-selected, #150f96);
  margin-right: 0.5rem;
}
.counselTest__title {
  margin-top: 2.4rem;
  padding: 0 0.4rem;
  font-family: var(--font-family-point);
  line-height: 1.36;
  letter-spacing: -0.3px;
  text-align: left;
}
.counselTest__title .num {
  color: var(--color-text-state-selected, #150f96);
  font-size: var(--font-size-h4-pc, 2.6rem);
  display: block;
}
.counselTest__title .question {
  margin-top: 0.8rem;
  color: var(--color-text-title, #020618);
  font-size: var(--font-size-h3-pc, 3rem);
}

.counselTest__option-ab {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 4rem;
}

/* 실제 라디오는 숨김 */
.radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.option-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  height: auto;
  padding: 2.4rem;
  border: 1px solid #d9e0e8;
  border-radius: 1.2rem;
  background-color: #fff;
  color: var(--color-text-body, #1f2732);
  transition: all 0.2s ease;
  gap: 1rem;
}

.option-text {
  font-size: var(--body-medium-pc, 1.8rem);
  line-height: 1.4;
  font-weight: 400;
  pointer-events: none;
  white-space: normal;
  text-align: left;
}
.icon-check {
  flex: 0 0 2.4rem;
}
.icon-check::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  background: url('/resources/front/images/common/icon_radio_check_defalute.svg')
    no-repeat center / contain;
}

/*  선택 상태  */
.radio-input:checked + .option-btn {
  border-color: #150f96;
  color: var(--color-text-state-selected, #150f96);
  background-color: #f0f5ff;
  box-shadow: 0 3px 3px 0 rgba(21, 15, 150, 0.16);
}
.radio-input:checked + .option-btn .option-text {
  font-weight: var(--font-weight-extrabold, 700);
}
.radio-input:checked + .option-btn .icon-check::after {
  background-image: url('/resources/front/images/common/icon_radio_check_checked.svg');
}

/* 포커스 */
/* .radio-input:focus-visible + .option-btn {
  outline: none;
  box-shadow:
    0 0 0 2px #150f96,
    0 3px 3px rgba(21, 15, 150, 0.16);
} */

/* Hover 효과 */
/* [수정] 20260710 : 선택 문항 버튼 호버 잔상 제거 */
.option-btn:hover {
  background-color: #f8fafc;
  border-color: #d9e0e8;
}
@media screen and (max-width: 767px) {
  .option-btn:hover {
    background-color: #ffff;
  }
}
/* //[수정] 20260710 : 선택 문항 버튼 호버 잔상 제거 */

/* 상담 성향 테스트 결과 내용 */
.test-result {
  position: relative;
  width: 100%;
  min-height: 100%;

  background-image: linear-gradient(
    180deg,
    rgba(21, 15, 150, 0.16) -0.07%,
    rgba(255, 255, 255, 0) 99.02%
  );

  /* 0511 */
  overflow: hidden;
  aspect-ratio: 530 / 583;
}
.test-result::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #1f2732;
}

/* ===== 프레임 래퍼 (3분할 이미지 조합) ===== */
.test-result__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  overflow: hidden;

  /* 배경 가운데 블러셔 */
  background-image: url('/resources/front/images/common/blur_white.png');
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100% auto;
}
.frame-result__top,
.frame-result__bottom {
  width: 100%;
  height: 6rem;
}

.frame-result__top {
  position: absolute;
  inset: 0;
  background-image:
    url('/resources/front/images/common/border_leftTop.svg'),
    url('/resources/front/images/common/border_rightTop.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position:
    0% 0%,
    100% 0%;
  pointer-events: none;
  user-select: none;
}

.frame-result__middle {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.frame-result__bottom {
  position: absolute;
  background-image:
    url('/resources/front/images/common/border_leftBottom.svg'),
    url('/resources/front/images/common/border_rightBottom.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position:
    0% 100%,
    100% 100%;
  pointer-events: none;
  user-select: none;
  bottom: 0;
  height: 6rem;
  width: 100%;
}

/* 내부 콘텐츠 배치 보정 */
.test-result__contents {
  position: relative;
  z-index: 2;
}

.test-result__title {
  font-family: var(--font-family-point);
  color: var(--color-text-strong, #020618);
  font-size: var(--font-size-h2-pc, 4rem);
  line-height: 1.36;
  letter-spacing: -0.3px;
  text-align: center;
  padding-top: 5.3rem;
}
.test-result__title span {
  display: block;
  margin-bottom: 0.8rem;
  font-size: var(--font-size-h3-pc, 3rem);
}
.test-result__title strong {
  color: var(--color-text-state-selected, #150f96);
}
.test-result__img {
  max-width: 18rem;
  width: 100%;
  height: 18rem;
  margin: 1.6rem auto;
  object-fit: contain; /* 비율을 유지하면서 영역에 맞춤 */
}
.test-result__desc {
  text-align: center;
  letter-spacing: -0.36px;
  padding: 0 2.9rem;
}
.test-result__desc p + p {
  margin-top: 0.8rem;
}

/* 
모바일 ~ 767px 
*/
@media screen and (max-width: 767px) {
  /* 약관 동의 */
  .terms-wrap {
    margin-top: 3.2rem;
  }

  /* 전체 동의 텍스트 */
  .terms-check-all {
    padding: 1.6rem 1.2rem;
    margin-bottom: 0.8rem;
  }
  .terms-check-all .chk label {
    padding-left: 2.8rem;
  }
  .terms-check-all .chk label > span {
    font-size: var(--body-medium-mo, 1.6rem);
  }
  .terms-check-all .chk label::before {
    width: 2rem;
    height: 2rem;
  }
  .terms-check-head {
    padding: 1.2rem;
    gap: 1.2rem;
  }
  .chk label {
    padding-left: 2.8rem;
  }
  .chk label::before {
    width: 2rem;
    height: 2rem;
    top: 0.2rem;
  }

  .terms-accordion-body {
    font-size: 1.3rem;
  }

  .terms-table {
    font-size: var(--caption-mo, 1.3rem);
  }

  .terms-table-col-title {
    width: 9.6rem;
  }

  .terms-table th,
  .terms-table td {
    padding: 1rem;
  }

  .terms-table strong {
    font-size: var(--body-small-mo, 1.4rem);
  }

  .apply-btn {
    height: 5.2rem;
    font-size: 1.5rem;
  }

  /* 상담 성향 테스트 */
  .counselTest__title .num {
    font-size: var(--font-size-h4-mo, 1.8rem);
  }
  .counselTest__title .question {
    font-size: var(--font-size-h3-mo, 2rem);
  }
  .counselTest__option-ab {
    margin-top: 3.2rem;
    gap: 0.8rem;
  }
  .option-btn {
    padding: 2rem;
    min-height: 6.4rem;
  }

  /* 테스트 결과 페이지 */
  .test-result__frame {
    background-position: 50% 10%;
  }
  .test-result {
    position: relative;
    width: 100%;

    /* 0512 */
    height: 100%;
    min-height: 49.7rem;
  }

  .test-result::before {
    border: 1px solid #1f2732;
  }
  .frame-result__top,
  .frame-result__bottom {
    width: 100%;
    height: 3.2rem;
  }
  .frame-result__middle {
    background-size: 100% 100%;
  }

  .test-result__contents {
    padding: 5.2rem 2rem 0 2rem;
    position: relative;
    z-index: 2;
  }
  .test-result__title {
    font-size: 2.4rem;
    padding-top: 0;
  }
  .test-result__title span {
    font-size: 2rem;
  }
  .test-result__title strong {
    color: var(--color-text-state-selected, #150f96);
    font-size: 2.4rem;
  }
  .test-result__img {
    max-width: 12.8rem;
    width: 100%;
    height: 12.8rem;
    margin: 2.4rem auto 2.4rem auto;
  }
  .test-result__desc {
    font-size: 1.6rem;
    padding: 0;
  }
}

/* =========================================================
Accordion
========================================================= */
.cust-accordion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.cust-accordion .accordion-item {
  max-width: 122rem;
  width: 100%;
  padding: 4.2rem 4rem;
  background: #fff;
  border-radius: 4rem;
  transition: height 0.3s ease;
}
/* 열렸을때, 답변 영역 높이 */
.cust-accordion .accordion-item.open .accordion-collapse {
  max-height: 500px;
}

/* 질문 영역 */
.cust-accordion .accordion-header-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 4rem;
}

.cust-accordion .accordion-header-text {
  font-family: var(--font-family-point);
  font-size: var(--font-size-h4-pc, 2.6rem);

  color: #000;
  text-align: left;
  line-height: 1.36;

  padding: 0;
  margin: 0;

  pointer-events: none;
  z-index: 2;

  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

.cust-accordion .question {
  margin-right: 1.2rem;
}

.cust-accordion .accordion-button {
  position: absolute;
  background: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  z-index: 1;
}

/* 아코디언 버튼 */
.cust-accordion .accordion-button::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 3.2rem;
  height: 3.2rem;
  transform: translateY(-50%);
  background: url('/resources/front/images/common/icon_plus--navy.svg') no-repeat
    center / contain;

  transition: transform 0.3s ease;
  z-index: 3;
}

/* 클릭 영역 넓게 잡기 */
.cust-accordion .accordion-button::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  max-width: 122rem;
  height: 10rem;
  transform: translateY(-50%);
  background: transparent;
}

/* 텍스트 위아래 맞추기 */
.cust-accordion .question-txt,
.cust-accordion .question {
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

/* 포커스 */
.cust-accordion .accordion-button:focus-visible {
  outline: 1px dotted #474747;
  border-radius: 0.1rem;
}

/* 질문 열렸을때랑, hover */
.accordion-header-wrap:hover .accordion-header-text,
.accordion-item.open .accordion-header-text {
  color: #150f96;
}

/* 답변 */
.cust-accordion .accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.cust-accordion .accordion-collapse .accordion-body {
  padding-top: 2rem;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-text-body, #1f2732);
  letter-spacing: -0.4px;
}

/* + 버튼 회전 */
.cust-accordion .accordion-item.open .accordion-button::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 
모바일 ~ 767px 
*/
@media screen and (max-width: 767px) {
  .cust-accordion {
    gap: 1.2rem;
    min-width: 23rem;
  }

  .cust-accordion .accordion-item {
    padding: 2.6rem 1.6rem 2.2rem 1.6rem;
    border-radius: 2.4rem;
  }

  .cust-accordion .accordion-header-text {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    font-size: var(--font-size-h4-mo, 1.8rem);
  }

  /* 클릭 영역 넓게 잡기*/
  .cust-accordion .accordion-button::before {
    height: 5.8rem;
  }

  .cust-accordion .question {
    margin-right: 0.8rem;
  }

  .cust-accordion .question-txt,
  .cust-accordion .question {
    text-box-trim: none;
  }

  .cust-accordion .accordion-collapse .accordion-body {
    padding-top: 1.2rem;
    font-size: 1.7rem;
  }

  .cust-accordion .accordion-button::after {
    width: 2rem;
    height: 2rem;
    top: 0;
    transform: translateY(0);
  }
  .cust-accordion .accordion-item.open .accordion-button::after {
    transform: translateY(0) rotate(45deg);
  }
}