@charset "UTF-8";
/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./res/css/result/scss/result_renew_backup.scss ***!
  \***********************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  src: local("Pretendard Regular"), local("Pretendard-Regular"), url(../../../../res/fonts/Pretendard-Regular.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Regular.woff) format("woff"), url(../../../../res/fonts/Pretendard-Regular.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  src: local("Pretendard Medium"), local("Pretendard-Medium"), url(../../../../res/fonts/Pretendard-Medium.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Medium.woff) format("woff"), url(../../../../res/fonts/Pretendard-Medium.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  src: local("Pretendard SemiBold"), local("Pretendard-SemiBold"), url(../../../../res/fonts/Pretendard-SemiBold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-SemiBold.woff) format("woff"), url(../../../../res/fonts/Pretendard-SemiBold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  src: local("Pretendard Bold"), local("Pretendard-Bold"), url(../../../../res/fonts/Pretendard-Bold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-Bold.woff) format("woff"), url(../../../../res/fonts/Pretendard-Bold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 800;
  src: local("Pretendard ExtraBold"), local("Pretendard-ExtraBold"), url(../../../../res/fonts/Pretendard-ExtraBold.woff2) format("woff2"), url(../../../../res/fonts/Pretendard-ExtraBold.woff) format("woff"), url(../../../../res/fonts/Pretendard-ExtraBold.otf) format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Cafe24 Ssurround";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: local("Cafe24 Ssurround"), local("Cafe24Ssurround"), url(../../../../res/fonts/Cafe24Ssurround.woff2) format("woff2"), url(../../../../res/fonts/Cafe24Ssurround.woff) format("woff"), url(../../../../res/fonts/Cafe24Ssurround.otf) format("opentype"), url(../../../../res/fonts/Cafe24Ssurround.ttf) format("truetype");
}
:root {
  --main-900: #FE6806;
  --main-800: #FE8903;
  --main-700: #FF9A00;
  --main-600: #FFAD00;
  --main-500: #FFBC00;
  --main-400: #FFC525;
  --main-300: #FFD04C;
  --main-200: #FFDD80;
  --main-100: #FFEAB2;
  --main-50: #FFF7E0;
  --main-25: #FDFAF1;
  --state-red: #DB2828;
  --state-red-light: #FFD5D5;
  --state-yellow: #E69600;
  --state-yellow-light: #FFEBB2;
  --state-green: #27A212;
  --state-green-light: #E1F9DD;
  --state-blue: #597AE7;
  --state-blue-light: #CAD6FF;
  --gray-900: #151719;
  --gray-800: #343739;
  --gray-700: #525558;
  --gray-600: #65686B;
  --gray-500: #8D9093;
  --gray-400: #ADB0B3;
  --gray-300: #D2D5D8;
  --gray-200: #E3E6E9;
  --gray-100: #EDF0F4;
  --gray-50: #F5F8FC;
  --white: #fff;
}

#header .header_wrap .page_title {
  padding: 0;
  text-align: center;
}

.result_section {
  padding: 20px 0 120px;
  min-height: 100vh;
  background: var(--white);
}

.result_intro {
  padding: 26px 20px 32px;
}
.result_intro .intro_title {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-800);
  margin: 0;
  line-height: 1.4;
}
.result_intro .intro_title em {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
}

.character_section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
  min-height: 300px;
  position: relative;
}
.character_section .character_container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.character_section .character_box {
  min-width: 120px;
  max-width: 165px;
  height: auto;
  z-index: 2;
  position: relative;
}
.character_section .character_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.character_section .character_icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.character_section .icon_item {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}
.character_section .icon_item.type_danger .icon_circle {
  border-color: #ff4f4f;
}
.character_section .icon_item.type_normal .icon_circle {
  border-color: #4a90e2;
}
.character_section .icon_item.type_warning .icon_circle {
  border-color: #ff8f0c;
}
.character_section .icon_item .icon_circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 3px solid #ff4f4f;
}
.character_section .icon_item .icon_beam {
  position: absolute;
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), transparent);
  border-radius: 2px;
  opacity: 0.7;
}
.character_section .icon_item.type_dying {
  top: 20px;
  left: 20px;
}
.character_section .icon_item.type_dying .icon_beam {
  width: 60px;
  height: 3px;
  top: 46px;
  left: 40px;
  transform: rotate(45deg);
}
.character_section .icon_item.icon_brain {
  top: 20px;
  right: 20px;
}
.character_section .icon_item.icon_brain .icon_circle img {
  width: 36px;
}
.character_section .icon_item.icon_brain .icon_beam {
  width: 60px;
  height: 3px;
  top: 46px;
  right: 40px;
  transform: rotate(-45deg);
}
.character_section .icon_item.icon_lung {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.character_section .icon_item.icon_lung .icon_circle img {
  width: 28px;
}
.character_section .icon_item.icon_lung .icon_beam {
  width: 50px;
  height: 3px;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) rotate(0deg);
}
.character_section .icon_item.icon_heart {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.character_section .icon_item.icon_heart .icon_circle img {
  width: 30px;
}
.character_section .icon_item.icon_heart .icon_beam {
  width: 50px;
  height: 3px;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) rotate(0deg);
}
.character_section .icon_item.icon_uterus {
  bottom: 20px;
  left: 20px;
}
.character_section .icon_item.icon_uterus .icon_beam {
  width: 50px;
  height: 3px;
  bottom: 20px;
  left: 40px;
  transform: rotate(-45deg);
}
.character_section .icon_item.icon_colon {
  bottom: 20px;
  right: 20px;
}
.character_section .icon_item.icon_colon .icon_circle img {
  width: 28px;
}
.character_section .icon_item.icon_colon .icon_beam {
  width: 50px;
  height: 3px;
  bottom: 20px;
  right: 40px;
  transform: rotate(45deg);
}

.info_cards {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  margin: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info_card {
  display: flex;
  align-items: flex-start;
}
.info_card + .info_card {
  margin-top: 16px;
}
.info_card .card_icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.info_card .card_icon img {
  width: 100%;
  height: 100%;
}
.info_card .card_content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.info_card .card_content .card_title {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-600);
  margin-top: 4px;
}
.info_card .card_content .card_details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.info_card .card_content .card_details .detail_item {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-800);
  text-align: right;
}
.info_card .card_content .card_details .detail_item strong {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
}
.info_card .card_content .card_details .detail_amount {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
}
.info_card .card_content .card_details .detail_amount strong {
  color: var(--main-800);
}

.health_risk_popup {
  position: relative;
  background: var(--white);
  padding: 24px 16px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 80vh;
  width: 400px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: all 0.3s ease;
}
.popup_overlay.show .health_risk_popup {
  transform: scale(1);
}
.health_risk_popup .modal_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 14px;
}
.health_risk_popup .modal_header .modal_title {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
  margin: 0;
}
.health_risk_popup .modal_header .modal_close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
}
.health_risk_popup .modal_header .modal_close img {
  width: 20px;
  height: 20px;
}
.health_risk_popup .modal_body {
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 0 7px 0 rgba(141, 144, 147, 0.25);
}
.health_risk_popup .risk_items .risk_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f5f8fc;
}
.health_risk_popup .risk_items .risk_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.health_risk_popup .risk_items .risk_item .risk_info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.health_risk_popup .risk_items .risk_item .risk_info .risk_name {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
}
.health_risk_popup .risk_items .risk_item .risk_info .risk_status {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  padding: 2px 6px;
  border-radius: 20px;
  display: inline-block;
}
.health_risk_popup .risk_items .risk_item .risk_info .risk_status.type_purple {
  color: #7c3dbc;
  background: #ebd7ff;
}
.health_risk_popup .risk_items .risk_item .risk_info .risk_status.type_red {
  color: #ff4f4f;
  background: #fee2e2;
}
.health_risk_popup .risk_items .risk_item .risk_info .risk_status.type_yellow {
  color: #ff8f0c;
  background: #ffe9cf;
}
.health_risk_popup .risk_items .risk_item .risk_arrow {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.health_risk_popup .risk_items .risk_item .risk_arrow:hover {
  background: #f5f5f5;
}
.health_risk_popup .risk_items .risk_item .risk_arrow img {
  width: 16px;
  height: 16px;
}
.health_risk_popup .additional_info {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
}
.health_risk_popup .additional_info .info_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.health_risk_popup .additional_info .info_item:not(:last-child) {
  border-bottom: 1px solid #e9ecef;
}
.health_risk_popup .additional_info .info_item .info_icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 6px;
  flex-shrink: 0;
}
.health_risk_popup .additional_info .info_item .info_icon img {
  width: 18px;
  height: 18px;
}
.health_risk_popup .additional_info .info_item .info_content {
  flex: 1;
}
.health_risk_popup .additional_info .info_item .info_content .info_label {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-600);
  display: block;
  margin-bottom: 4px;
}
.health_risk_popup .additional_info .info_item .info_content .info_details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.health_risk_popup .additional_info .info_item .info_content .info_details .detail_item {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-700);
}
.health_risk_popup .additional_info .info_item .info_content .info_details .detail_item strong {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
}
.health_risk_popup .additional_info .info_item .info_content .info_details .detail_amount {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0px;
  color: var(--gray-900);
}
.health_risk_popup .additional_info .info_item .info_content .info_details .detail_amount strong {
  color: var(--main-800);
}