@charset "utf-8";

/* =========================
   AI 자가진단 카드 전체 CSS
   ========================= */

/* ===== 우측 카드 ===== */
#kj_ai_diag .kj_ai_card{
  flex: 0 0 460px;
  max-width: 460px;
  width: 100%;
  color: #111;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* ===== 상단 진행 ===== */
#kj_ai_diag .kj_ai_top{
  padding: 14px 16px 10px;
  background: rgba(255,255,255,.95);
}

#kj_ai_diag .kj_ai_topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 14px;
  color:#666;
  margin-bottom: 8px;
}

#kj_ai_diag .kj_ai_step{
  color:#22c1d6;
  font-weight:800;
}

#kj_ai_diag .kj_ai_progress{
  height: 8px;
  background: #e7e7e7;
  border-radius: 999px;
  overflow:hidden;
}

#kj_ai_diag .kj_ai_bar{
  display:block;
  height: 100%;
  background: #22c1d6;
  width: 0%;
  transition: width .25s ease;
}

/* ===== 질문 헤더 ===== */
#kj_ai_diag .kj_ai_qhead{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 16px;
  background: #169fb6;
  color:#fff;
}

#kj_ai_diag .kj_ai_qno{
  font-size: 22px;
  font-weight: 900;
  min-width: 36px;
}

#kj_ai_diag .kj_ai_qtext{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

/* ===== 본문 ===== */
#kj_ai_diag .kj_ai_body{
  padding: 16px;
  background:#fff;
}

/* ===== 보기 영역 ===== */
#kj_ai_diag .kj_ai_options{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 14px;
}

/* ===== 옵션(라디오 커스텀) ===== */
#kj_ai_diag .kj_ai_opt{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding: 12px 12px;
  cursor:pointer;
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#kj_ai_diag .kj_ai_opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

#kj_ai_diag .kj_ai_opt_ui{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #bdbdbd;
  box-sizing:border-box;
  flex: 0 0 auto;
  position: relative;
}

#kj_ai_diag .kj_ai_opt_txt{
  font-size: 14px;
  color:#333;
}

#kj_ai_diag .kj_ai_opt:hover{
  border-color:#b8dfe6;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

#kj_ai_diag .kj_ai_opt input:checked + .kj_ai_opt_ui{
  border-color:#169fb6;
}

#kj_ai_diag .kj_ai_opt input:checked + .kj_ai_opt_ui::after{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 999px;
  background:#169fb6;
}

#kj_ai_diag .kj_ai_opt input:checked ~ .kj_ai_opt_txt{
  font-weight:800;
}



/* ===== 이전/다음 네비 ===== */
#kj_ai_nav { display:flex; gap:5px; }
#kj_ai_diag .kj_ai_prev,
#kj_ai_diag .kj_ai_next{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* 아이콘 공통 */
#kj_ai_diag .kj_ai_prev i,
#kj_ai_diag .kj_ai_next i{
  font-size:18px;
  line-height:1;
}

/* 이전 버튼 */
#kj_ai_diag .kj_ai_prev{
  flex: 0 0 140px;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  padding: 14px 10px;
  background:#fff;
  color:#333;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition: all .15s ease;
}

#kj_ai_diag .kj_ai_prev:hover{
  border-color:#169fb6;
  color:#169fb6;
}

/* 다음 버튼 */
#kj_ai_diag .kj_ai_next{
  flex:1;
  border:0;
  border-radius:6px;
  padding:14px 10px;
  background:#169fb6;
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  transition: filter .15s ease;
}

#kj_ai_diag .kj_ai_next:hover{
  filter:brightness(.95);
}



/* =========================
   6단계 결과/입력 영역
   ========================= */

/* 결과 안내 문구 */
#kj_ai_diag .kj_ai_resultmsg{
  margin-bottom: 12px;
  padding: 12px 12px;
  border-radius: 8px;
  background: #f3fbfd;
  border: 1px solid #cfeef4;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  color:#000;
}
#kj_ai_diag .kj_ai_resultmsg span { color:#18a3bb; font-weight: 700; }
/* 입력 필드 */
#kj_ai_diag .kj_ai_field{
  margin-bottom: 10px;
}

#kj_ai_diag .kj_ai_lbl{
  display:block;
  font-size: 13px;
  font-weight: 800;
  color:#333;
  margin-bottom: 6px;
}

#kj_ai_diag .kj_ai_inp{
  width:100%;
  box-sizing:border-box;
  border:1px solid #dcdcdc;
  border-radius: 8px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}

#kj_ai_diag .kj_ai_inp:focus{
  border-color:#169fb6;
  box-shadow: 0 0 0 3px rgba(22,159,182,.12);
}

/* 개인정보 동의 */
#kj_ai_diag .kj_ai_agree{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin: 10px 0 12px;
  font-size: 13px;
  color:#444;
  cursor:pointer;
}

#kj_ai_diag .kj_ai_agree input{
  margin-top: 2px;
}

/* 상담신청 / 확인 버튼 */
#kj_ai_diag .kj_ai_submit{
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 14px 14px;
  cursor:pointer;
  background: #169fb6;
  color:#fff;
  font-size: 15px;
  font-weight: 900;
  transition: filter .15s ease;
}

#kj_ai_diag .kj_ai_submit:hover{
  filter: brightness(.95);
}

/* ===== 케이스 C (확인만) ===== */
#kj_ai_diag .kj_ai_onlyok{
  text-align:center;
}

#kj_ai_diag .kj_ai_onlyok .kj_ai_submit{
  margin-top: 6px;
}



/* ===== 반응형 (모바일) ===== */
@media (max-width: 480px){
  #kj_ai_diag .kj_ai_card{
    max-width: 100%;
    border-radius: 0;
  }
  #kj_ai_diag .kj_ai_qtext{
    font-size: 15px;
  }
}