:root {
  /* main-color에서 채도(S)/명도(L)만 조정해 파생 */
  --border-color: hsl(var(--main-h), calc(var(--main-s) - 15%), calc(var(--main-l) + 14%));
  --gray-text:    hsl(var(--main-h), calc(var(--main-s) - 47%), calc(var(--main-l) + 13%));
  --navy:         hsl(var(--main-h), var(--main-s),             max(calc(var(--main-l) - 38%), 18%));
  --navy-line:    hsl(var(--main-h), calc(var(--main-s) - 13%), max(calc(var(--main-l) - 20%), 30%));
  --underline:    hsl(calc(var(--main-h) - 18), calc(var(--main-s) - 16%), calc(var(--main-l) + 21%));
  --bg-answer:    hsl(var(--main-h), calc(var(--main-s) - 11%), max(calc(var(--main-l) + 37%), 95%));
}

body {min-width: 1320px;}
.inner {width: 1280px; margin: 0 auto; position: relative;}

/* HEADER / SEC1 / FORM / NAV : hero_pc.css */
/* BANNER_WRAP */
.banner_wrap {background: var(--navy); padding: 42px 0; text-align: center; overflow: hidden; position: relative;}
.banner_wrap.thin {height: 170px; padding: 0;}
.banner_wrap h2 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.35; letter-spacing: -0.03em;}
.banner_wrap h2 b {position: relative; z-index: 1; font-weight: 700;}
.banner_wrap h2 b::after {content: ""; width: 100%; height: 12px; background: var(--navy-line); position: absolute; bottom: 2px; left: 0; z-index: -1;}
.banner_wrap .inner > p {font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #fff; margin-top: 10px;}
.banner_wrap .text_wrap {position: absolute; left: 50%; top: -35px; transform: translateX(-50%);}
.banner_wrap .text_wrap p {font-family: 'A2z'; font-size: 55px; font-weight: 800; color: transparent; line-height: 80px; white-space: nowrap; -webkit-text-stroke: 1px #ffffff20; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.banner_wrap .text_wrap p b {color: #fff; -webkit-text-stroke: 0;}

.banner_wrap.thin.banner_compare {height: 96px; display: flex; align-items: center; justify-content: center;}
.banner_wrap.banner_compare .inner {display: flex; align-items: center; justify-content: center; height: 100%;}
.banner_wrap.banner_compare .inner > p {display: flex; align-items: center; justify-content: center; gap: 12px; font-family: 'A2z', 'Pretendard', sans-serif; font-size: 32px; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: -0.03em; margin: 0; -webkit-text-stroke: 0;}
.banner_compare .spark {width: 18px; height: 18px; color: rgba(255, 255, 255, 0.82); display: flex; flex-shrink: 0;}
.banner_compare .spark svg {width: 100%; height: 100%; display: block;}

/* SECTION 공통 요소 */
section .inner > .title_wrap {text-align: center; margin-bottom: 80px;}
section .inner > .title_wrap h2 {font-family: 'A2z'; font-size: 55px; font-weight: 800; line-height: 80px; margin-bottom: 34px; position: relative;}
section .inner > .title_wrap h2 b {position: relative; z-index: 2;}
section .inner > .title_wrap h2 b::after {content: ""; width: 100%; height: 30px; position: absolute; bottom: 0; left: 0; background: var(--underline); z-index: -1;}
section .inner > .title_wrap p {font-family: 'A2z'; font-size: 25px; line-height: 40px;}
section .more_btn {display: block; width: fit-content; border: 2px solid var(--main-color); color: var(--main-color); font-size: 20px; font-weight: 300; border-radius: 26px; padding: 10px 18px; margin: 70px auto 0;}

/* SECTION 4 */
.sec4 {padding: 100px 0; background: #f8fafc;}
.sec4 .list_wrap > ul {display: flex; flex-direction: column; gap: 18px; counter-reset: qna;}
.sec4 .list_wrap > ul > li {width: 100%; max-width: none; margin: 0; padding: 36px 40px; background: #fff; border-radius: 24px; position: relative; filter: none; box-shadow: 0 10px 28px rgba(22, 58, 122, 0.07);}
.sec4 .list_wrap > ul > li::after {display: none;}
.sec4 .list_wrap > ul > li:nth-child(2n) {margin-left: 0;}
.sec4 .list_wrap > ul > li h3 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 12px; color: #1f2937;}
.sec4 .list_wrap > ul > li h3::before {counter-increment: qna; content: counter(qna, decimal-leading-zero); font-size: 18px; font-weight: 800; color: var(--main-color); letter-spacing: 0; line-height: 1;}
.sec4 .list_wrap > ul > li p {font-family: 'Pretendard', sans-serif; font-size: 17px; font-weight: 400; line-height: 1.7; color: #4b5563; word-break: keep-all;}
.sec4 .list_wrap .info_box ul {display: flex; flex-direction: column; gap: 14px;}
.sec4 .list_wrap .info_box ul li {display: flex; align-items: flex-start; gap: 12px;}
.sec4 .list_wrap .info_box ul li span {display: inline-block; background: var(--main-color); font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 600; color: #fff; padding: 6px 12px; border-radius: 999px; flex-shrink: 0; line-height: 1.4; margin-top: 2px;}
.sec4 .list_wrap .info_box ul li p {margin: 0; flex: 1;}
.sec4 .list_wrap > ul > li h3 .info_note {display: inline; margin-left: 8px; font-size: 14px; font-weight: 400; color: #9ca3af; letter-spacing: 0; line-height: 1.4; white-space: nowrap; vertical-align: middle;}


/* SECTION 5 */
.sec5 {background: #f8fafc; padding: 80px 0 100px;}
.sec5 .inner > .title_wrap {margin-bottom: 36px;}
.sec5 .inner > .title_wrap h2 {font-size: 36px; font-weight: 800; line-height: 1.3; margin-bottom: 12px;}
.sec5 .inner > .title_wrap h2 b::after {height: 12px;}
.sec5 .inner > .title_wrap p {font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.6; color: #6b7280;}
.sec5 ul {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; counter-reset: point;}
.sec5 ul li {display: flex; flex-direction: column; gap: 0; background: #fff; border-radius: 20px; padding: 26px 28px; box-shadow: 0 10px 28px rgba(22, 58, 122, 0.07);}
.sec5 ul li .q_wrap {padding: 0; border-radius: 0; background: transparent; display: flex; align-items: flex-start; gap: 10px; cursor: default; margin-bottom: 10px;}
.sec5 ul li .q_wrap h3 {font-family: 'A2z', 'Pretendard', sans-serif; font-size: 18px; font-weight: 700; color: #1f2937; letter-spacing: -0.03em; line-height: 1.4; display: flex; align-items: flex-start; gap: 10px; word-break: keep-all;}
.sec5 ul li .q_wrap h3::before {counter-increment: point; content: counter(point, decimal-leading-zero); font-size: 15px; font-weight: 800; color: var(--main-color); letter-spacing: 0; line-height: 1.4; flex-shrink: 0;}
.sec5 ul li .q_wrap img {display: none;}
.sec5 ul li .a_wrap {padding: 0; background: transparent; display: block; border-radius: 0;}
.sec5 ul li .a_wrap p {font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.7; color: #4b5563; word-break: keep-all;}
.sec5 ul li .a_wrap img {display: none;}
.sec5 .sec_note {margin: 18px 0 0; font-family: 'Pretendard', sans-serif; font-size: 14px; line-height: 1.6; color: #9ca3af; word-break: keep-all;}

/* CANCER THEME */
#wrap.cancer {
  --bg-answer: #fff5f5;
  --navy: #9f1239;
  --navy-line: #be123c;
  --underline: #fecaca;
}
#wrap.cancer .sec4,
#wrap.cancer .sec5 {background: #fef2f2;}
#wrap.cancer .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.cancer .sec4 .list_wrap .info_box ul li span {background: #ef4444; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.cancer .sec5 ul li {background: #fff;}

/* TOTAL (건강/종합) THEME */
#wrap.total {
  --bg-answer: #ffedd5;
  --navy: #9a3412;
  --navy-line: #c2410c;
  --underline: #fed7aa;
}
#wrap.total .sec4,
#wrap.total .sec5 {background: #fff7ed;}
#wrap.total .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.total .sec4 .list_wrap .info_box ul li span {background: #f97316; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.total .sec5 ul li {background: #fff;}

/* SILBI (실비) THEME */
#wrap.silbi {
  --bg-answer: #dcfce7;
  --navy: #14532d;
  --navy-line: #166534;
  --underline: #bbf7d0;
}
#wrap.silbi .sec4,
#wrap.silbi .sec5 {background: #f0fdf4;}
#wrap.silbi .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.silbi .sec4 .list_wrap .info_box ul li span {background: #16a34a; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.silbi .sec5 ul li {background: #fff;}

/* DRIVER (운전자) THEME */
#wrap.driver {
  --bg-answer: #ede9fe;
  --navy: #4c1d95;
  --navy-line: #6d28d9;
  --underline: #ddd6fe;
}
#wrap.driver .sec4,
#wrap.driver .sec5 {background: #f5f3ff;}
#wrap.driver .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.driver .sec4 .list_wrap .info_box ul li span {background: #7c3aed; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.driver .sec5 ul li {background: #fff;}

/* DENTAL (치아) THEME */
#wrap.dental {
  --bg-answer: #e8f8fb;
  --navy: #0b5f6d;
  --navy-line: #0e7490;
  --underline: #b7e6ee;
}
#wrap.dental .sec4,
#wrap.dental .sec5 {background: #e8f8fb;}
#wrap.dental .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.dental .sec4 .list_wrap .info_box ul li span {background: #0e8ea3; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.dental .sec5 ul li {background: #fff;}

/* CARE (치매/간병) THEME */
#wrap.care {
  --bg-answer: #f7f2ee;
  --navy: #7c3f2a;
  --navy-line: #9a4f35;
  --underline: #e8d5c8;
}
#wrap.care .sec4,
#wrap.care .sec5 {background: #f7f2ee;}
#wrap.care .sec4 .list_wrap > ul > li {background: #fff;}
#wrap.care .sec4 .list_wrap .info_box ul li span {background: #b56545; color: #fff; border-radius: 999px; font-weight: 600;}
#wrap.care .sec5 ul li {background: #fff;}

.bottom_wrap {width: 100%; padding: 48px 0 42px; background: #3d3d3d;}
.bottom_wrap h2 {display: flex; align-items: center; gap: 12px; font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 18px; color: #fff; letter-spacing: -0.02em;}
.bottom_wrap h2::before {content: ""; width: 4px; height: 18px; background: #ffd800; flex-shrink: 0;}
.bottom_wrap ul {padding: 0;}
.bottom_wrap ul li {color: #fff; font-family: 'Pretendard', sans-serif; font-size: 15px; line-height: 1.8; word-break: keep-all;}
footer {width: 100%; position: relative; z-index: 11; background: #282a29; padding: 22px 0; color: #999;}
footer p {font-family: 'Pretendard', sans-serif; font-size: 14px; line-height: 1.6; color: #999;}
footer .footer_privacy {display: inline; padding: 0; border: 0; background: none; color: #999; font-size: inherit; font-family: inherit; cursor: pointer; vertical-align: baseline;}
footer .footer_privacy:hover {color: #fff; text-decoration: underline;}