:root {
  --main-color: #0C3FBC;
  --point-color: #0C3FBC;
  --main-dark: #082C86;      /* 진한 블루 띠 그라데이션 끝 */
  --sky: #EAF0FF;            /* 라벨 · 번호 배지 · 아이콘 배경 */
  --ice: #F5F8FF;            /* 교차 섹션 배경 */
  --line: #E1E8F7;           /* 카드 테두리 · 구분선 */
  --accent: #FFB547;         /* 블루 배경 위 강조 숫자 */
  --ink: #0F1B3D;
  --body: #5A6478;           /* 본문 회색 */
  --hero-dark: #06112A;   /* 히어로 왼쪽 아래 네이비에 맞춤 */
}

.highlight {font-weight: 700; color: var(--point-color);}
header {margin-bottom: 100px; padding-top: 20px;}
header .inner {display: flex; justify-content: space-between; align-items: center;}
header .inner .logo {width: 200px;}
header .inner .logo a {}
header .inner .logo a img {width: 100%; height: auto;}
header .inner .time_wrap { color: var(--ink); font-size: 16px; font-weight: 500;}
header .inner .time_wrap span { color: #fff; margin-right: 4px; background-color: var(--main-color); padding: 6px 12px; border-radius: 200px; font-weight: 700;}

section {padding: 80px 0;}

/* ══════ 공통 — 섹션 제목 ══════ */
section .inner .title_wrap {margin-bottom: 50px; display: flex; flex-direction: column; align-items: center;}
section .inner .title_wrap .section_label {display: inline-block; width: fit-content; margin-bottom: 14px; padding: 7px 18px; border-radius: 100px; background: var(--sky); color: var(--main-color); font-size: 15px; font-weight: 700; letter-spacing: 0.3px;}
section .inner .title_wrap h2 {text-align: center; font-size: 36px; font-weight: 800; line-height: 1.3; color: var(--ink); word-break: keep-all;}
section .inner .title_wrap h2 b {color: var(--point-color);}
section .inner .title_wrap p {margin-top: 16px; text-align: center; font-size: 19px; line-height: 1.7; color: #667; word-break: keep-all;}

/* 섹션 하단 안내 문구 (공통) */
section .inner .notice {margin-top: 28px; text-align: center; font-size: 15px; line-height: 1.6; color: #7A869C; word-break: keep-all;}
section .inner .notice1 {text-align: center; margin-top: 20px; font-size: 21px; color: rgb(255, 0, 0);}
section .inner .notice1 b {color: #000;}

@media (max-width: 1200px) {
  section .inner .title_wrap h2 {font-size: 31px;}}

@media (max-width: 900px) {
  section .inner .title_wrap {margin-bottom: 40px;}
  section .inner .title_wrap h2 {font-size: 27px;}
  section .inner .title_wrap p {font-size: 17px;}}

@media (max-width: 768px) {
  section {padding: 60px 0;}
  section .inner .title_wrap .section_label {padding: 6px 15px; font-size: 14px;}}

@media (max-width: 550px) {
  section {padding: 50px 0;}
  section .inner .title_wrap {margin-bottom: 32px;}
  section .inner .title_wrap h2 {font-size: 23px;}
  section .inner .title_wrap p {font-size: 16px;}
  section .inner .notice {font-size: 14px;}

  /* PC 기준으로 넣은 줄바꿈이 좁은 화면에서는 어색하게 끊긴다 */
  section .inner .title_wrap p br {display: none;}}


/* ══════ section1 — 히어로 ══════
   밝은 하늘색 그라데이션 + 오른쪽 위 은은한 원 장식.
   왼쪽: 제목 → 설명 → 키워드 칩 → 병원 일러스트 / 오른쪽: 폼 카드 */
#section1 {
  --curve: 0px;
  position: relative; padding: 0 0 80px; margin-bottom: 0; overflow: hidden;
  background: linear-gradient(160deg, #F7FAFF 0%, #EAF1FF 45%, #D9E6FF 100%);
}
/* 배경 장식 — 큰 원 두 개를 흐리게 깔아 단조로움을 덜어낸다 */
#section1::before,
#section1::after {content: ''; position: absolute; border-radius: 50%; pointer-events: none;}
#section1::before {top: -180px; right: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(46, 100, 232, 0.16) 0%, rgba(46, 100, 232, 0) 70%);}
#section1::after {bottom: -220px; left: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 181, 71, 0.14) 0%, rgba(255, 181, 71, 0) 70%);}

#section1 header {position: relative; z-index: 1;}
#section1 > .inner {position: relative; z-index: 1;}
#section1 .inner .content_wrap {display: flex; gap: 40px;}
#section1 .inner .content_wrap .title_wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; min-width: 0; margin-bottom: 0;}
#section1 .inner .content_wrap .title_wrap h1 {font-size: 60px; font-weight: 800; text-align: left; line-height: 1.3; color: var(--ink); word-break: keep-all;}
#section1 .inner .content_wrap .title_wrap h1 b {color: var(--main-color);}
#section1 .inner .content_wrap .title_wrap p { text-align: left; margin: 0; font-size: 24px; color: var(--body);}

/* 병원 일러스트 — 제목 칸과 폼 사이에 걸쳐 놓는다.
   폼이 건물 오른쪽을 살짝 덮어 '건물 앞에 놓인 카드' 같은 깊이감을 준다.
   left 는 화면 가운데(50%) 기준이라 화면 너비가 달라도 폼과의 위치 관계가 같다. */
#section1 .hero_img {
  position: absolute; bottom: 10px; left: calc(50% - 295px); z-index: 0;
  width: 620px; max-width: none; height: auto;
  opacity: 0.9; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 66% 74% at 50% 60%, #000 65%, transparent 100%);
          mask-image: radial-gradient(ellipse 66% 74% at 50% 60%, #000 65%, transparent 100%);
}

@media (max-width: 1300px) {
  /* .inner 가 93% 로 줄어들고 제목도 작아지는 구간 — 같은 자리에서 크기만 줄인다 */
  #section1 .hero_img {left: calc(50% - 250px); width: 540px;}}

/* 폼 카드 */

#section1 .inner .form_wrap {flex: 0 0 46%; max-width: 500px; background: #fff; padding: 40px 32px; border-radius: 20px; box-shadow: 0 24px 60px rgba(8, 44, 134, 0.18);}
#section1 .inner .form_wrap h2 {font-size: 26px; text-align: center; font-weight: 700; margin-bottom: 26px;}
#section1 .inner .form_wrap ul {display: flex; flex-direction: column; gap: 16px;}
#section1 .inner .form_wrap ul li {display: flex; background-color: #f1f1f4; border-radius: 14px; height: 60px; align-items: center;}
#section1 .inner .form_wrap ul li .input_box { display: flex; gap: 8px;}
#section1 .inner .form_wrap ul li .name_wrap { display: flex; align-items: center; width: 100%;}
#section1 .inner .form_wrap ul li label { font-size: 20px; font-weight: 500; width: 100px; text-align: center; position: relative; flex-shrink: 0;}
#section1 .inner .form_wrap ul li label:after { content: ''; position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); width: 1px; height: 80%; background-color: #e4e4ea;}
#section1 .inner .form_wrap ul li input[type='text'] {  padding: 15px; font-size: 20px; width: 100%; transition: border-color 0.2s, background 0.2s;}
#section1 .inner .form_wrap ul li input::placeholder {color: #aaa;}
#section1 .inner .form_wrap ul li .phone_input_wrap {display: flex; width: 100%;}
#section1 .inner .form_wrap ul li .phone_select {width: 92px; background: transparent url("../img/arrow_down.svg") no-repeat right 12px center; background-size: 24px; height: 54px; padding: 0 40px 0 15px; font-size: 20px; border-radius: 14px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
#section1 .inner .form_wrap ul li .phone_input {flex: 1;}
#section1 .inner .form_wrap ul li .gender_wrap {display: flex; align-items: center; padding: 0 15px; position: relative;}
#section1 .inner .form_wrap ul li .gender_wrap:after { content: ''; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 1px; height: 80%; background-color: #e4e4ea;}
#section1 .inner .form_wrap ul li .gender_wrap input[type="radio"] {display: none;}
#section1 .inner .form_wrap ul li .gender_wrap label {padding: 0; border-radius: 14px; cursor: pointer; font-size: 20px; font-weight: 500; transition: all 0.3s; user-select: none; min-width: 0; width: 40px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0;}
#section1 .inner .form_wrap ul li .gender_wrap label::after {display: none;}
#section1 .inner .form_wrap ul li .gender_wrap input[type="radio"]:checked + label {background: var(--point-color); border-color: var(--point-color); color: #fff;}
#section1 .inner .form_wrap .submit_btn {width: 100%; background-color: var(--point-color); color: #fff; padding: 18px 20px; font-size: 19px; font-weight: 700; border-radius: 14px; cursor: pointer; margin-top: 22px; box-shadow: 0 10px 24px rgba(12, 63, 188, 0.3); transition: filter 0.2s;}
#section1 .inner .form_wrap .submit_btn:hover {filter: brightness(1.08);}

/* ── 2단계 폼 (필요할 때 사용) ───────────────────────── */

/* 단계 전환 */
#section1 .inner .form_wrap .form_step {display: none;}
#section1 .inner .form_wrap .form_step.active {display: block;}

/* 1단계 안내 문구 (h2 바로 아래) */
#section1 .inner .form_wrap .form_desc {font-size: 16px; color: #888; text-align: center; margin: -16px 0 22px;}

/* 질문 — 문구가 길어서 위아래로 쌓는다 */
#section1 .inner .form_wrap ul li.question_item {flex-direction: column; align-items: stretch; gap: 10px;}
#section1 .inner .form_wrap ul li .label {font-size: 22px; font-weight: 500;}

/* 예/아니오 — 성별 버튼과 같은 톤 */
#section1 .inner .form_wrap ul li .choice_wrap {display: flex; gap: 10px;}
#section1 .inner .form_wrap ul li .choice_btn {flex: 1; height: 54px; background: #F1F1F4; border: 1px solid #E4E4EA; border-radius: 14px; font-size: 20px; font-weight: 500; cursor: pointer; transition: all 0.3s;}
#section1 .inner .form_wrap ul li .choice_btn.active {background: var(--point-color); border-color: var(--point-color); color: #fff;}

/* 이전 + 신청 버튼 */
#section1 .inner .form_wrap .btn_wrap {display: flex; gap: 10px; margin-top: 22px;}
#section1 .inner .form_wrap .btn_wrap .submit_btn {flex: 1; margin-top: 0;}
#section1 .inner .form_wrap .btn_wrap .prev_btn {flex: 0 0 28%; background: #fff; color: #555; border: 1px solid #E4E4EA; padding: 18px 20px; font-size: 19px; font-weight: 700; border-radius: 100px; cursor: pointer; transition: background 0.2s;}
#section1 .inner .form_wrap .btn_wrap .prev_btn:hover {background: #F1F1F4;}



/* ── section1 반응형 ── */
@media (max-width: 1200px) {
  /* PC 헤더가 사라지고 모바일 헤더가 따로 붙으므로 위 여백을 확보한다 */
  #section1 {padding-top: 80px;}
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 40px;}}

@media (max-width: 1150px) {
  #section1 {padding: 80px 0 calc(var(--curve) + 40px);}

  /* 좌우 배치를 위아래로 세운다 */
  #section1 .inner .content_wrap {flex-direction: column;}
  #section1 .inner .content_wrap .title_wrap {width: 100%; align-items: center;}
  #section1 .inner .content_wrap .title_wrap h1 {text-align: center;}
  #section1 .inner .content_wrap .title_wrap p {text-align: center;}
  /* 세로 배치에서는 일러스트가 폼을 아래로 밀어내므로 숨긴다 (폼이 먼저 보여야 한다) */
  #section1 .hero_img {display: none;}

  /* 원 장식은 좁은 화면에 맞게 줄인다 */
  #section1::before {top: -120px; right: -160px; width: 400px; height: 400px;}
  #section1::after {bottom: -160px; left: -140px; width: 360px; height: 360px;}
  #section1 .inner .form_wrap {flex: none; width: 100%; max-width: 640px; margin: 0 auto;}}

@media (max-width: 900px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 36px;}
  #section1 .inner .content_wrap .title_wrap p {font-size: 17px;}}

@media (max-width: 768px) {
  #section1 {--curve: 0px; padding: 50px 0 calc(var(--curve) + 30px);}
  #section1 .inner .content_wrap .title_wrap {gap: 16px;}
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 32px;}
  #section1 .inner .form_wrap {padding: 34px 28px; border-radius: 26px;}
  #section1 .inner .form_wrap h2 {font-size: 24px; margin-bottom: 22px;}
  #section1 .inner .form_wrap ul li label {font-size: 20px; width: 90px;}}

@media (max-width: 550px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 28px;}
  #section1 .inner .content_wrap .title_wrap p {font-size: 16px;}
  #section1 .inner .form_wrap h2 {font-size: 22px;}
  #section1 .inner .form_wrap {padding: 30px 24px; border-radius: 22px;}
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select {height: 50px;}
  #section1 .inner .form_wrap ul li .gender_wrap label {width: 50px;}
  #section1 .inner .form_wrap .submit_btn {padding: 16px 20px; font-size: 18px;}
  #section1 .inner .form_wrap ul li label,
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select,
  #section1 .inner .form_wrap ul li .gender_wrap label {font-size: 18px;}
  #section1 .inner .form_wrap ul li label {width: 70px;}
  #section1 .inner .form_wrap ul li .choice_btn {height: 50px; font-size: 18px;}
  #section1 .inner .form_wrap .btn_wrap .prev_btn {padding: 16px 20px; font-size: 18px;}}

@media (max-width: 450px) {
  #section1 .inner .form_wrap {padding: 30px 20px;}
  #section1 .inner .form_wrap ul li label,
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select,
  #section1 .inner .form_wrap ul li .gender_wrap label,
  #section1 .inner .form_wrap .submit_btn {font-size: 14px;}
  #section1 .inner .form_wrap ul li label {width: 65px;}
  #section1 .inner .form_wrap ul li .phone_select {width: 70px; padding: 0 30px 0 12px; background-position: right 8px center; background-size: 20px;}
  #section1 .inner .form_wrap ul li .choice_btn {font-size: 16px;}
  #section1 .inner .form_wrap .btn_wrap {gap: 8px;}
  #section1 .inner .form_wrap .btn_wrap .prev_btn {flex-basis: 26%; padding: 16px 10px; font-size: 16px;}
  #section1 .inner .form_wrap .btn_wrap .submit_btn {padding: 16px 12px; word-break: keep-all;}}

@media (max-width: 400px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 25px;}
  /* 이름 + 성별은 한 줄로 유지하고 성별 버튼만 조금 줄인다 */
  #section1 .inner .form_wrap ul li .input_box {gap: 6px;}
  #section1 .inner .form_wrap ul li .gender_wrap label {width: 44px;}}

@media (max-width: 340px) {
  /* 정말 좁을 때만 성별을 아래 줄로 내린다 */
  #section1 .inner .form_wrap ul li .input_box {flex-wrap: wrap;}
  #section1 .inner .form_wrap ul li .gender_wrap {width: 100%;}
  #section1 .inner .form_wrap ul li .gender_wrap label {flex: 1; width: auto;}}


/* ══════ 히어로 — 보장 키워드 칩 ══════ */
#section1 .inner .content_wrap .title_wrap .hero_tags {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;}
#section1 .inner .content_wrap .title_wrap .hero_tags li {padding: 8px 16px; border: 1px solid #CFDCF7; border-radius: 100px; background: rgba(255, 255, 255, 0.75); color: var(--main-color); font-size: 16px; font-weight: 600; white-space: nowrap;}

@media (max-width: 1150px) {
  #section1 .inner .content_wrap .title_wrap .hero_tags {justify-content: center;}}

@media (max-width: 550px) {
  #section1 .inner .content_wrap .title_wrap .hero_tags {gap: 6px;}
  #section1 .inner .content_wrap .title_wrap .hero_tags li {padding: 6px 12px; font-size: 14px;}}


/* ══════ section2 — 왜 암보험이 필요한가 (통계) ══════
   밝은 히어로 바로 아래라서 흰 배경으로 잇고, 카드 위쪽 블루 선 + 큰 블루 숫자로 시선을 모은다 */
#section2 {position: relative; background: #fff;}

#section2 .inner .stat_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
#section2 .inner .stat_list li {position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--ice); text-align: center; overflow: hidden;}
#section2 .inner .stat_list li::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--main-color) 0%, #2E64E8 100%);}
#section2 .inner .stat_list .stat_label {margin-bottom: 10px; font-size: 17px; font-weight: 600; color: var(--body);}
#section2 .inner .stat_list .stat_num {margin-bottom: 18px; font-size: 52px; font-weight: 800; line-height: 1.15; letter-spacing: -1px; color: var(--main-color);}
#section2 .inner .stat_list p {font-size: 17px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section2 .inner .stat_list p b {color: var(--ink); font-weight: 700;}
#section2 .inner .source {margin-top: 28px; text-align: center; font-size: 18px; color: #7A869C; word-break: keep-all; display: flex; justify-content: center;}

@media (max-width: 1200px) {
  #section2 .inner .stat_list li {padding: 34px 20px;}
  #section2 .inner .stat_list .stat_num {font-size: 44px;}}

@media (max-width: 900px) {
  #section2 .inner .stat_list {grid-template-columns: 1fr; gap: 16px;}
  #section2 .inner .stat_list li {padding: 30px 24px;}
  #section2 .inner .stat_list .stat_num {margin-bottom: 12px; font-size: 40px;}}

@media (max-width: 550px) {
  #section2 .inner .stat_list li {padding: 26px 20px; border-radius: 20px;}
  #section2 .inner .stat_list .stat_label {font-size: 15px;}
  #section2 .inner .stat_list .stat_num {font-size: 34px;}
  #section2 .inner .stat_list p {font-size: 15px;}
  #section2 .inner .source {font-size: 12.5px;}}


/* ══════ section_compare — 왜 비교해야 할까 ══════
   섹션2(흰) 바로 아래, 연블루 배경 */
#section_compare {background: var(--ice);}
#section_compare .inner .compare_grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;}
/* 카드 배경 없이 윗선 + 번호만 — 아래 보험사 카드가 돋보이도록 가볍게 */
#section_compare .inner .compare_grid li {display: flex; flex-direction: column; padding-top: 22px; border-top: 2px solid var(--line);}
#section_compare .inner .compare_grid li:hover {border-top-color: var(--main-color);}
#section_compare .inner .compare_grid .num {margin-bottom: 12px; font-size: 15px; font-weight: 800; letter-spacing: 0.5px; color: var(--main-color);}
#section_compare .inner .compare_grid h3 {margin-bottom: 10px; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--ink); word-break: keep-all;}
#section_compare .inner .compare_grid p {font-size: 16px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section_compare .inner .compare_grid p b {color: var(--main-color); font-weight: 700;}

@media (max-width: 1200px) {
  #section_compare .inner .compare_grid {gap: 28px;}
  #section_compare .inner .compare_grid h3 {font-size: 19px;}}

@media (max-width: 900px) {
  #section_compare .inner .compare_grid {grid-template-columns: repeat(2, 1fr); row-gap: 32px;}}

@media (max-width: 550px) {
  #section_compare .inner .compare_grid {grid-template-columns: 1fr; gap: 0;}
  /* 한 줄 목록 — 번호 왼쪽, 글 오른쪽 */
  #section_compare .inner .compare_grid li {display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; padding: 18px 0; border-top: 1px solid var(--line);}
  #section_compare .inner .compare_grid li:last-child {border-bottom: 1px solid var(--line);}
  #section_compare .inner .compare_grid .num {grid-row: 1 / span 2; margin: 3px 0 0; font-size: 14px;}
  #section_compare .inner .compare_grid h3 {margin-bottom: 4px; font-size: 17px;}
  #section_compare .inner .compare_grid p {font-size: 15px;}}

@media (hover: none) {
  #section_compare .inner .compare_grid li:hover {border-top-color: var(--line);}}

/* ── 보험사별 보험료 카드 — 비교 이유 아래에 이어 붙인다 ──
   7개라 4 + 3 으로 나뉘므로, 둘째 줄이 가운데로 모이도록 flex + center 를 쓴다 */
#section_compare .inner .bohum_wrap {margin-top: 86px; text-align: center;}
#section_compare .inner .bohum_title {font-size: 30px; font-weight: 800; line-height: 1.3; color: var(--ink); word-break: keep-all;}
#section_compare .inner .bohum_desc {margin-top: 10px; font-size: 17px; color: var(--body); word-break: keep-all;}

#section_compare .inner .bohum_list {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 36px;}
#section_compare .inner .bohum_list li {display: flex; flex-direction: column; align-items: center; width: calc((100% - 60px) / 4); padding: 30px 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s;}
#section_compare .inner .bohum_list li:hover {border-color: var(--main-color); box-shadow: 0 12px 28px rgba(12, 63, 188, 0.1);}
#section_compare .inner .bohum_list .img_wrap {display: flex; align-items: center; justify-content: center; height: 52px; margin-bottom: 18px;}
#section_compare .inner .bohum_list .img_wrap img {max-width: 150px; max-height: 52px; width: auto; height: auto; object-fit: contain;}
#section_compare .inner .bohum_list .price {margin-bottom: 20px; font-size: 20px; font-weight: 600; color: var(--ink);}
#section_compare .inner .bohum_list .price b {margin: 0 4px; font-weight: 800; letter-spacing: 1px; color: var(--main-color);}
#section_compare .inner .bohum_list button {width: 100%; padding: 13px 10px; border-radius: 10px; background: var(--main-color); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: filter 0.2s;}
#section_compare .inner .bohum_list button:hover {filter: brightness(1.1);}

@media (max-width: 1200px) {
  #section_compare .inner .bohum_list {gap: 16px;}
  #section_compare .inner .bohum_list li {width: calc((100% - 48px) / 4); padding: 26px 16px 18px;}
  #section_compare .inner .bohum_list .img_wrap img {max-width: 130px;}}

@media (max-width: 900px) {
  #section_compare .inner .bohum_wrap {margin-top: 56px;}
  #section_compare .inner .bohum_title {font-size: 26px;}
  /* 3칸 — 7개면 3 + 3 + 1, 마지막은 가운데 */
  #section_compare .inner .bohum_list li {width: calc((100% - 32px) / 3);}}

@media (max-width: 550px) {
  #section_compare .inner .bohum_wrap {margin-top: 44px;}
  #section_compare .inner .bohum_title {font-size: 22px;}
  #section_compare .inner .bohum_desc {font-size: 15px;}
  /* 2칸 — 7개면 마지막 1개가 가운데 */
  #section_compare .inner .bohum_list {gap: 10px; margin-top: 26px;}
  #section_compare .inner .bohum_list li {width: calc((100% - 10px) / 2); padding: 20px 12px 14px; border-radius: 14px;}
  #section_compare .inner .bohum_list .img_wrap {height: 40px; margin-bottom: 12px;}
  #section_compare .inner .bohum_list .img_wrap img {max-width: 110px; max-height: 36px;}
  #section_compare .inner .bohum_list .price {margin-bottom: 14px; font-size: 16px;}
  #section_compare .inner .bohum_list button {padding: 11px 8px; font-size: 14px;}}

@media (hover: none) {
  #section_compare .inner .bohum_list li:hover {border-color: var(--line); box-shadow: none;}}


/* ══════ section3 — 주요 보장 항목 6개 (3×2 카드) ══════ */
#section3 {background: #fff;}
#section3 .inner .cover_grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#section3 .inner .cover_grid li {padding: 30px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(12, 63, 188, 0.06);}
#section3 .inner .cover_grid .cover_cat {display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 100px; background: var(--sky); color: var(--main-color); font-size: 13px; font-weight: 700;}
#section3 .inner .cover_grid h3 {margin-bottom: 10px; font-size: 21px; font-weight: 800; line-height: 1.35; color: var(--ink); word-break: keep-all;}
#section3 .inner .cover_grid p {font-size: 16px; line-height: 1.65; color: var(--body); word-break: keep-all;}

@media (max-width: 1200px) {
  #section3 .inner .cover_grid {gap: 16px;}
  #section3 .inner .cover_grid li {padding: 26px 22px;}
  #section3 .inner .cover_grid h3 {font-size: 19px;}}

@media (max-width: 900px) {
  #section3 .inner .cover_grid {grid-template-columns: repeat(2, 1fr);}}

@media (max-width: 550px) {
  #section3 .inner .cover_grid {grid-template-columns: 1fr; gap: 12px;}
  #section3 .inner .cover_grid li {padding: 22px 20px; border-radius: 20px;}
  #section3 .inner .cover_grid .cover_cat {margin-bottom: 10px; font-size: 12px;}
  #section3 .inner .cover_grid h3 {font-size: 18px;}
  #section3 .inner .cover_grid p {font-size: 15px;}}


/* ══════ section4 — 일반암 vs 유사암 ══════
   배경 순서: hero(밝은 블루) → section2(흰) → compare(연블루) → section3(흰) → section4(연블루) → process(흰) → section6(연블루) → qna(흰)
   일반암 카드는 메인 블루 테두리, 유사암은 회색 톤으로 무게를 나눈다 */
#section4 {background: var(--ice);}
#section4 .inner .type_compare {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto;}
#section4 .inner .type_card {display: flex; flex-direction: column; padding: 40px 36px; border: 2px solid transparent; border-radius: 28px; background: #fff; box-shadow: 0 10px 30px rgba(12, 63, 188, 0.08);}
#section4 .inner .type_card.main {border-color: var(--main-color);}
#section4 .inner .type_head {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;}
#section4 .inner .type_head h3 {font-size: 28px; font-weight: 800; color: var(--ink);}
#section4 .inner .type_card.main .type_head h3 {color: var(--main-color);}
#section4 .inner .type_tag {flex-shrink: 0; padding: 6px 14px; border-radius: 100px; background: var(--main-color); color: #fff; font-size: 14px; font-weight: 700;}
#section4 .inner .type_card.sub .type_tag {background: #E6EAF3; color: #4A5670;}
#section4 .inner .type_rate {margin-bottom: 18px; padding: 18px 20px; border-radius: 16px; background: var(--sky); font-size: 18px; color: var(--ink); word-break: keep-all;}
#section4 .inner .type_rate b {font-size: 21px; font-weight: 800; color: var(--main-color);}
#section4 .inner .type_card.sub .type_rate {background: #F2F4F8;}
#section4 .inner .type_card.sub .type_rate b {color: #4A5670;}
#section4 .inner .type_desc {margin-bottom: 22px; font-size: 17px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section4 .inner .type_items {display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto;}
#section4 .inner .type_items span {padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--ice); font-size: 15px; font-weight: 600; color: #33405C;}

@media (max-width: 900px) {
  #section4 .inner .type_compare {grid-template-columns: 1fr; gap: 16px;}
  #section4 .inner .type_card {padding: 32px 26px;}}

@media (max-width: 550px) {
  #section4 .inner .type_card {padding: 26px 20px; border-radius: 22px;}
  #section4 .inner .type_head h3 {font-size: 24px;}
  #section4 .inner .type_tag {font-size: 13px;}
  #section4 .inner .type_rate {padding: 14px 16px; font-size: 16px;}
  #section4 .inner .type_rate b {font-size: 18px;}
  #section4 .inner .type_desc {font-size: 15px;}
  #section4 .inner .type_items span {padding: 7px 12px; font-size: 14px;}}


/* ══════ section_process — 상담 진행 순서 ══════
   section4(연블루) 와 section6(연블루) 사이라 흰 배경.
   PC 는 4칸 가로 + 카드 사이 화살표, 좁은 화면은 세로 목록 */
#section_process {background: #fff;}

#section_process .inner .process_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;}
#section_process .inner .process_list li {position: relative; display: flex; flex-direction: column; padding: 32px 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--ice);}

/* 카드 사이 화살표 (마지막 카드 제외) */
#section_process .inner .process_list li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: -21px; width: 10px; height: 10px; border-top: 2px solid #9DB4E8; border-right: 2px solid #9DB4E8; transform: translateY(-50%) rotate(45deg);}

#section_process .inner .process_list .step {display: inline-block; width: fit-content; margin-bottom: 16px; padding: 5px 12px; border-radius: 100px; background: var(--main-color); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.5px;}
#section_process .inner .process_list h3 {margin-bottom: 10px; font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--ink); word-break: keep-all;}
#section_process .inner .process_list p {font-size: 16px; line-height: 1.65; color: var(--body); word-break: keep-all;}

/* 마지막 단계(가입 결정)만 블루로 채워 '도착점' 느낌을 준다 */
#section_process .inner .process_list li:last-child {border-color: var(--main-color); background: var(--main-color);}
#section_process .inner .process_list li:last-child .step {background: #fff; color: var(--main-color);}
#section_process .inner .process_list li:last-child h3 {color: #fff;}
#section_process .inner .process_list li:last-child p {color: rgba(255, 255, 255, 0.82);}

@media (max-width: 1200px) {
  #section_process .inner .process_list {gap: 28px;}
  #section_process .inner .process_list li {padding: 28px 20px;}
  #section_process .inner .process_list li:not(:last-child)::after {right: -19px;}
  #section_process .inner .process_list h3 {font-size: 20px;}}

@media (max-width: 900px) {
  /* 세로 타임라인 — 왼쪽 STEP 배지, 오른쪽 글. 카드 사이 화살표는 아래 방향 */
  #section_process .inner .process_list {grid-template-columns: 1fr; gap: 26px; max-width: 640px; margin: 0 auto;}
  #section_process .inner .process_list li {display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; padding: 24px 22px;}
  #section_process .inner .process_list .step {grid-row: 1 / span 2; margin: 2px 0 0;}
  #section_process .inner .process_list h3 {margin-bottom: 6px;}
  #section_process .inner .process_list li:not(:last-child)::after {top: auto; right: auto; bottom: -19px; left: 50%; transform: translateX(-50%) rotate(135deg);}}

@media (max-width: 550px) {
  #section_process .inner .process_list {gap: 22px;}
  #section_process .inner .process_list li {grid-template-columns: 1fr; padding: 22px 20px; border-radius: 20px;}
  #section_process .inner .process_list .step {grid-row: auto; margin-bottom: 10px; font-size: 12px;}
  #section_process .inner .process_list h3 {font-size: 18px;}
  #section_process .inner .process_list p {font-size: 15px;}
  #section_process .inner .process_list li:not(:last-child)::after {bottom: -17px; width: 8px; height: 8px;}}


/* ══════ section6 — 가입 전 확인사항 + CTA ══════ */
#section6 {background: var(--ice);}
#section6 .inner .check_grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto;}
#section6 .inner .check_grid li {display: flex; align-items: flex-start; gap: 18px; padding: 28px 26px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(12, 63, 188, 0.06);}
#section6 .inner .check_grid .num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: var(--main-color); font-size: 16px; font-weight: 800;}
#section6 .inner .check_grid .txt h3 {margin-bottom: 8px; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--ink);}
#section6 .inner .check_grid .txt p {font-size: 16px; line-height: 1.65; color: var(--body); word-break: keep-all;}

#section6 .inner .cta_box {max-width: 1000px; margin: 50px auto 0; padding: 50px 30px; border-radius: 32px; text-align: center; background: linear-gradient(135deg, var(--main-color) 0%, #2E64E8 100%); box-shadow: 0 20px 40px rgba(12, 63, 188, 0.22);}
#section6 .inner .cta_box p {margin-bottom: 24px; font-size: 26px; font-weight: 800; line-height: 1.4; color: #fff; word-break: keep-all;}
#section6 .inner .cta_box button {padding: 18px 46px; border-radius: 100px; background: #fff; color: var(--main-color); font-size: 19px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); transition: transform 0.2s;}
#section6 .inner .cta_box button:hover {transform: translateY(-2px);}

@media (max-width: 1200px) {
  #section6 .inner .check_grid li {padding: 24px 22px;}
  #section6 .inner .check_grid .txt h3 {font-size: 19px;}}

@media (max-width: 900px) {
  #section6 .inner .check_grid {grid-template-columns: 1fr; gap: 14px; max-width: 700px;}
  #section6 .inner .cta_box p {font-size: 23px;}}

@media (max-width: 768px) {
  #section6 .inner .check_grid li {gap: 15px; padding: 22px 20px; border-radius: 20px;}
  #section6 .inner .check_grid .num {width: 40px; height: 40px; font-size: 15px;}
  #section6 .inner .check_grid .txt h3 {font-size: 18px;}
  #section6 .inner .check_grid .txt p {font-size: 15px;}
  #section6 .inner .cta_box {margin-top: 40px; padding: 36px 20px; border-radius: 24px;}
  #section6 .inner .cta_box p {font-size: 21px;}}

@media (max-width: 550px) {
  #section6 .inner .check_grid li {flex-direction: column; gap: 12px;}
  #section6 .inner .check_grid .num {width: 36px; height: 36px; font-size: 14px;}
  #section6 .inner .cta_box p br {display: none;}
  #section6 .inner .cta_box button {width: 100%; padding: 17px 20px;}}

@media (hover: none) {
  #section6 .inner .cta_box button:hover {transform: none;}}


/* ══════ section_qna — 자주 묻는 질문 ══════
   다른 섹션은 가운데 정렬 카드형이라, 여기는 왼쪽 제목 + 오른쪽 라인형 목록으로 결을 바꾼다.
   PC: [제목 | 목록] / [상담 카드 | 목록]  →  모바일: 제목 → 목록 → 상담 카드 */
#section_qna {background: #fff;}
#section_qna .inner .qna_layout {
  display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr; column-gap: 72px;
  grid-template-areas: "head list" "help list";
}

/* 왼쪽 제목 — 공통 title_wrap 의 가운데 정렬을 왼쪽으로 돌린다 */
#section_qna .inner .qna_head {grid-area: head; align-items: flex-start; margin-bottom: 0;}
#section_qna .inner .qna_head h2 {text-align: left; font-size: 40px;}
#section_qna .inner .qna_head p {text-align: left; font-size: 17px;}

/* 왼쪽 아래 상담 카드 */
#section_qna .inner .qna_help {grid-area: help; align-self: start; margin-top: 36px; padding: 30px 28px; border-radius: 24px; background: linear-gradient(150deg, var(--main-color) 0%, var(--main-dark) 100%); color: #fff;}
#section_qna .inner .qna_help_icon {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); font-size: 24px;}
#section_qna .inner .qna_help strong {display: block; margin-bottom: 8px; font-size: 20px; font-weight: 800;}
#section_qna .inner .qna_help p {margin-bottom: 20px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); word-break: keep-all;}
#section_qna .inner .qna_help button {width: 100%; padding: 15px 20px; border-radius: 100px; background: #fff; color: var(--main-color); font-size: 16px; font-weight: 700; cursor: pointer; transition: transform 0.2s;}
#section_qna .inner .qna_help button:hover {transform: translateY(-2px);}

/* 오른쪽 목록 — 카드 없이 위 굵은 선 + 질문 사이 가는 선 */
#section_qna .inner .qna_list {grid-area: list; border-top: 2px solid var(--ink);}
#section_qna .inner .qna_list .qna_item {border-bottom: 1px solid var(--line);}
#section_qna .inner .qna_list .qna_item .qna_question {display: flex; align-items: center; gap: 22px; width: 100%; padding: 28px 4px; text-align: left; cursor: pointer; background: none; border: none;}
#section_qna .inner .qna_list .qna_item .qna_num {flex-shrink: 0; width: 34px; font-size: 18px; font-weight: 800; letter-spacing: 0.5px; color: #B3BED4; font-variant-numeric: tabular-nums; transition: color 0.3s;}
#section_qna .inner .qna_list .qna_item .qna_text {flex: 1; font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--ink); word-break: keep-all; transition: color 0.3s;}

/* 화살표 — 아래를 향한 꺾쇠, 열리면 위로 뒤집힌다 */
#section_qna .inner .qna_list .qna_item .qna_arrow {position: relative; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; transition: background 0.3s, border-color 0.3s, transform 0.3s;}
#section_qna .inner .qna_list .qna_item .qna_arrow::before {content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translate(-50%, -70%) rotate(45deg); transition: border-color 0.3s;}

/* 답변 — 연한 블루 박스 안에 A 배지 */
#section_qna .inner .qna_list .qna_item .qna_answer {display: none; padding: 0 4px 28px 60px;}   /* 번호 34 + 간격 22 + 4 = 질문 글자 시작선 */
#section_qna .inner .qna_list .qna_item .qna_answer_box {display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-radius: 16px; background: var(--ice);}
#section_qna .inner .qna_list .qna_item .qna_a {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--main-color); color: #fff; font-size: 14px; font-weight: 800;}
#section_qna .inner .qna_list .qna_item .qna_answer p {flex: 1; padding-top: 1px; font-size: 17px; line-height: 1.75; color: var(--body); word-break: keep-all;}

/* 열린 상태 */
#section_qna .inner .qna_list .qna_item.active .qna_num,
#section_qna .inner .qna_list .qna_item.active .qna_text {color: var(--main-color);}
#section_qna .inner .qna_list .qna_item.active .qna_arrow {background: var(--main-color); border-color: var(--main-color); transform: rotate(180deg);}
#section_qna .inner .qna_list .qna_item.active .qna_arrow::before {border-color: #fff;}
#section_qna .inner .qna_list .qna_item.active .qna_answer {display: block; animation: qna_open 0.3s ease;}
@keyframes qna_open {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: translateY(0);}}

/* 마우스를 올리면 질문만 살짝 강조 */
#section_qna .inner .qna_list .qna_item .qna_question:hover .qna_text {color: var(--main-color);}

@media (max-width: 1200px) {
  #section_qna .inner .qna_layout {grid-template-columns: 290px 1fr; column-gap: 48px;}
  #section_qna .inner .qna_head h2 {font-size: 34px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 19px;}}

@media (max-width: 900px) {
  /* 한 줄로 세운다 — 제목 → 목록 → 상담 카드 */
  #section_qna .inner .qna_layout {grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "head" "list" "help";}
  #section_qna .inner .qna_head {margin-bottom: 32px;}
  #section_qna .inner .qna_head h2 {font-size: 27px;}
  #section_qna .inner .qna_head p br {display: none;}
  #section_qna .inner .qna_help {margin-top: 32px; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon title btn" "icon desc btn"; align-items: center; column-gap: 16px; padding: 24px;}
  #section_qna .inner .qna_help_icon {grid-area: icon; margin-bottom: 0;}
  #section_qna .inner .qna_help strong {grid-area: title; margin-bottom: 2px; font-size: 18px;}
  #section_qna .inner .qna_help p {grid-area: desc; margin-bottom: 0; font-size: 14px;}
  #section_qna .inner .qna_help p br {display: none;}
  #section_qna .inner .qna_help button {grid-area: btn; width: auto; padding: 13px 22px; white-space: nowrap;}
  #section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 16px;}}

@media (max-width: 768px) {
  #section_qna .inner .qna_list .qna_item .qna_question {gap: 14px; padding: 22px 2px;}
  #section_qna .inner .qna_list .qna_item .qna_num {width: 26px; font-size: 15px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 17px;}
  #section_qna .inner .qna_list .qna_item .qna_arrow {width: 34px; height: 34px;}
  #section_qna .inner .qna_list .qna_item .qna_answer {padding: 0 2px 22px 42px;}   /* 26 + 14 + 2 */
  #section_qna .inner .qna_list .qna_item .qna_answer_box {padding: 18px 18px; gap: 12px;}}

@media (max-width: 550px) {
  #section_qna .inner .qna_head {margin-bottom: 24px;}
  #section_qna .inner .qna_head h2 {font-size: 23px;}
  #section_qna .inner .qna_list .qna_item .qna_question {gap: 12px; padding: 18px 0;}
  #section_qna .inner .qna_list .qna_item .qna_num {width: 22px; font-size: 14px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 16px;}
  #section_qna .inner .qna_list .qna_item .qna_arrow {width: 30px; height: 30px;}
  #section_qna .inner .qna_list .qna_item .qna_arrow::before {width: 7px; height: 7px;}

  /* 좁은 화면에서는 답변 박스를 질문 번호 아래까지 넓게 쓴다 */
  #section_qna .inner .qna_list .qna_item .qna_answer {padding: 0 0 18px;}
  #section_qna .inner .qna_list .qna_item .qna_answer_box {padding: 16px; border-radius: 14px;}
  #section_qna .inner .qna_list .qna_item .qna_a {width: 24px; height: 24px; font-size: 12px; border-radius: 7px;}
  #section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 15px; line-height: 1.7;}

  /* 상담 카드는 다시 세로로 */
  #section_qna .inner .qna_help {grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon desc" "btn btn"; row-gap: 2px; padding: 22px 20px; border-radius: 20px;}
  #section_qna .inner .qna_help_icon {width: 42px; height: 42px; font-size: 21px;}
  #section_qna .inner .qna_help strong {font-size: 17px;}
  #section_qna .inner .qna_help button {width: 100%; margin-top: 16px;}}

@media (hover: none) {
  #section_qna .inner .qna_list .qna_item .qna_question:hover .qna_text {color: var(--ink);}
  #section_qna .inner .qna_list .qna_item.active .qna_question:hover .qna_text {color: var(--main-color);}
  #section_qna .inner .qna_help button:hover {transform: none;}}

/* ══════════════════════════════════════════════════
   모바일 헤더 — 1200px 이하에서만 보인다 (PC 헤더와 교대)
   ══════════════════════════════════════════════════ */

.m_header {display: none;}
.m_menu_dim {display: none;}

@media (max-width: 1300px) {
  .inner {width: 93%;}}

@media (max-width: 1200px) {
  header {display: none;}

  /* ── 상단 바 ── */
  .m_header {display: block; position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 2px 12px rgba(23, 59, 108, 0.1);}
  .m_header_bar {display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;}
  .m_header_bar .logo {width: 156px;}
  .m_header_bar .logo a {display: block;}
  .m_header_bar .logo a img {width: 100%; height: auto;}

  /* ── 햄버거 버튼 (열리면 X 로 변한다) ── */
  .m_menu_btn {display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;}
  .m_menu_btn span {display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--main-color); transition: transform 0.25s ease, opacity 0.2s ease;}
  .m_menu_btn.open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
  .m_menu_btn.open span:nth-child(2) {opacity: 0;}
  .m_menu_btn.open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

  /* ── 드롭다운 — 높이를 0 에서 펼쳐 슬라이드처럼 보이게 한다 ── */
  .m_menu {display: grid; grid-template-rows: 0fr; overflow: hidden; background: #fff; border-top: 1px solid #eef1f5; transition: grid-template-rows 0.28s ease;}
  .m_menu.open {grid-template-rows: 1fr;}
  .m_menu_inner {min-height: 0; overflow: hidden;}

  .m_menu_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px 18px 6px;}
  .m_menu_list li {border: 1px solid #dfe4ea; border-radius: 10px; background: #fff; transition: background 0.15s ease, border-color 0.15s ease;}
  .m_menu_list li a {display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: #333;}
  .m_menu_list li a img {width: 24px; height: 24px; object-fit: contain;}
  .m_menu_list li.active {background: var(--main-color); border-color: var(--main-color);}
  .m_menu_list li.active a {color: #fff;}
  .m_menu_list li.active a img {filter: brightness(0) invert(1);}

  .m_menu_date {padding: 10px 18px 18px; color: #8a94a2; font-size: 13px; text-align: center;}

  /* ── 열렸을 때 뒤를 살짝 덮는다 ── */
  .m_menu_dim {display: block; position: fixed; inset: 0; z-index: 50; background: rgba(23, 59, 108, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;}
  .m_menu_dim.open {opacity: 1; visibility: visible;}}

/* 애니메이션을 줄이도록 설정한 기기에서는 움직임을 끈다 */
@media (prefers-reduced-motion: reduce) {
  .m_menu, .m_menu_btn span, .m_menu_dim {transition: none;}
  #section_qna .inner .qna_list .qna_item.active .qna_answer {animation: none;}
  #section6 .inner .cta_box button {transition: none;}
  #section_qna .inner .qna_help button, #section_qna .inner .qna_list .qna_item .qna_arrow {transition: none;}}

/* ══════ 신청 유도 버튼 (폼이 화면 밖에 있을 때만 보인다) ══════
   PC 는 우측 하단 알약형, 모바일은 하단 전체 바 */

.to_top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--main-color);
  box-shadow: 0 10px 28px rgba(12, 63, 188, 0.35);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;

  /* 평소에는 숨어 있다가 폼이 화면 밖으로 나가면 떠오른다 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.to_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to_top:hover {
  filter: brightness(1.1);
}

/* 어두운 푸터 위에 올라오면 색이 묻히므로 반대로 뒤집는다 */
.to_top.on_dark {
  background: #fff;
  color: var(--main-color);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.to_top.on_dark svg {
  stroke: var(--main-color);
}

.to_top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 모바일 — 하단 전체를 덮는 바로 바꾼다 (엄지로 누르기 쉬운 자리) */
@media (max-width: 768px) {
  .m_header_bar .logo {width: 120px;}
  .m_header_bar .m_header_date {font-size: 14px;}

  .to_top {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    padding: 18px 20px;
    border-radius: 0;
    box-shadow: 0 -6px 20px rgba(12, 63, 188, 0.22);
    font-size: 18px;

    /* 바는 아래에서 밀려 올라온다 */
    transform: translateY(100%);
  }

  .to_top.show {
    transform: translateY(0);
  }}

@media (prefers-reduced-motion: reduce) {
  .to_top {
    transition: none;
  }}


/* ══════ 약관 문서 페이지 (개인정보처리방침 · 이용약관) ══════ */

.doc_page {padding: 70px 0 90px;}
.doc_page .inner {max-width: 860px;}

.doc_back {display: inline-block; margin-bottom: 20px; color: #888; font-size: 14px; transition: color 0.15s ease;}
.doc_back:hover {color: var(--main-color);}

.doc_page h1 {padding-bottom: 24px; border-bottom: 2px solid #222; font-size: 32px; font-weight: 800; letter-spacing: -0.5px;}

.doc_body {padding-top: 34px; color: #555; font-size: 16px; line-height: 1.8; word-break: keep-all;}
.doc_body h3 {margin: 40px 0 14px; color: #222; font-size: 19px; font-weight: 700;}
.doc_body h3:first-child {margin-top: 0;}
.doc_body p {margin-bottom: 14px;}
.doc_body a {color: var(--main-color); font-weight: 600; text-decoration: underline;}

.doc_body ul {margin: 0 0 14px; padding-left: 4px; list-style: none;}
.doc_body ul li {position: relative; padding-left: 15px; margin-bottom: 7px;}
.doc_body ul li::before {content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #bbb;}

.doc_body table {width: 100%; margin: 0 0 18px; border-top: 2px solid var(--main-color); border-collapse: collapse;}
.doc_body table th,
.doc_body table td {padding: 14px 16px; border-bottom: 1px solid #e8ecf1; font-size: 15px; line-height: 1.7; text-align: left; vertical-align: top;}
.doc_body table th {width: 150px; background: #f7f9fc; color: #333; font-weight: 700;}

.doc_body .note {padding: 16px 18px; border-radius: 10px; background: #f5f7fa; color: #666; font-size: 14.5px; line-height: 1.75;}

@media (max-width: 768px) {
  .doc_page {padding: 40px 0 70px;}
  .doc_page h1 {padding-bottom: 18px; font-size: 24px;}
  .doc_body {padding-top: 26px; font-size: 15px;}
  .doc_body h3 {margin: 32px 0 12px; font-size: 17px;}

  /* 좁은 화면에서는 표를 위아래로 푼다 — 라벨을 위, 값을 아래로 */
  .doc_body table,
  .doc_body table tbody,
  .doc_body table tr,
  .doc_body table th,
  .doc_body table td {display: block; width: 100%;}

  /* 머리글(구분·내용)은 칸이 사라지면 의미가 없다 */
  .doc_body table tr:first-child {display: none;}

  .doc_body table tr {padding: 13px 0; border-bottom: 1px solid #e8ecf1;}
  .doc_body table tr:last-child {border-bottom: 0;}

  /* 칸마다 있던 선과 여백을 없앤다 — 줄 사이 선은 tr 이 담당한다 */
  .doc_body table th,
  .doc_body table td {padding: 0; border: 0;}

  .doc_body table th {margin-bottom: 4px; background: none; color: #888; font-size: 13.5px; font-weight: 600;}
  .doc_body table td {font-size: 14.5px; color: #555;}

  .doc_body .note {font-size: 13.5px;}}