:root {
  --main-color: #1A44BF;
  --main-dark: #11318F;          /* 메인 hover / 눌림 */
  --main-ink: #fff;              /* 메인컬러 바탕 위 글씨색 (sub.css 도 사용) */
  --main-text: var(--main-color);/* 흰 바탕 위 메인컬러 강조 글씨색 (sub.css 도 사용) */
  --point-color: var(--main-color);
  --main-soft: color-mix(in srgb, var(--main-color) 7%, #fff);

  --accent: #FF8A7E;             /* 형광펜 밑줄 · 어두운 띠 위 강조 */

  --ink: #0E1525;                /* 제목 · 굵은 선 */
  --body: #434D60;               /* 본문 */
  --muted: #8A93A6;              /* 보조 글씨 */
  --line: #E3E7EE;               /* 얇은 구분선 */
  --field: #CBD2DE;              /* 입력창 테두리 */
  --surface: #F4F6FA;            /* 옅은 바탕 */

  /* 히어로 — 옅은 파랑 바탕 위에 모눈 무늬 */
  --hero-bg: color-mix(in srgb, var(--main-color) 6%, #fff);
  --hero-grid: color-mix(in srgb, var(--main-color) 9%, transparent);

  --wrap: 1200px;
  --aside-w: 400px;
  --sec-pad: 120px;              /* 섹션 위아래 여백 */
}

.highlight {font-weight: 700; color: var(--point-color);}
/* 광고 심의 빨간 문구 — 순수 red 는 흰 바탕 대비가 부족해 조금 진하게. 기존 ※ 안내 안에 <span class="c_red"> 로 넣는다 */
.c_red, .red_text {color: #D7261E !important;}



body {counter-reset: sec;}

#section1 > .inner,
#section2 > .inner,
#section3 > .inner,
#section_company > .inner,
#section4 > .inner,
#section5 > .inner,
#section_process > .inner,
#section_qna > .inner {width: min(var(--wrap), calc(100% - 48px)); max-width: none; margin: 0 auto;}

#section2, #section3, #section_company, #section4, #section5, #section_process, #section_qna {padding: var(--sec-pad) 0; background: #fff;}
#section3, #section_company, #section5, #section_process, #section_qna {border-top: 1px solid var(--line);}


/* ══════ #section1 ══════ */
#section1 {background: #fff;}

#section1 .content_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  padding-top: 40px;
}


/* ── 히어로 ── */
#section1 .hero_main {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 600px;
  padding: 64px 64px 48px;
  border: 1px solid var(--line); border-right: 0;
  background:
    linear-gradient(var(--hero-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--hero-bg);
  color: var(--ink);
}

/* 슬라이드는 같은 칸에 겹쳐 두고 active 만 보인다 — 가장 긴 슬라이드 높이가 기준.
   이전 슬라이드가 다 사라진 뒤에 다음 슬라이드가 나타나서 글자가 겹쳐 보이지 않는다. */
#section1 .hero_slides {display: grid; flex: 1;}
#section1 .hero_slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#section1 .hero_slide.active {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s ease 0.3s, visibility 0s linear 0.3s;
}

#section1 .hero_slide .hero_txt {width: 70%;}

#section1 .hero_label {display: inline-flex; padding: 6px 12px; background: var(--main-color); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px;}

/* 제목 — 검정 / <b> 메인컬러 / <em> 노란 형광펜 밑줄 */
#section1 .hero_title {margin-top: 24px; font-size: 54px; font-weight: 800; line-height: 1.2; letter-spacing: -2px; color: var(--ink); word-break: keep-all;}
#section1 .hero_title b {font-weight: 800; color: var(--main-color);}
#section1 .hero_title em {font-style: normal; background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%);}

#section1 .hero_note {margin-top: 22px; font-size: 17px; line-height: 1.65; color: var(--body); word-break: keep-all;}


#section1 .hero_benefit {display: flex; flex-wrap: wrap; flex-direction: column; gap: 24px 56px; margin-top: 44px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);}
#section1 .hero_benefit dl {min-width: 0;}
#section1 .hero_benefit dt {margin-bottom: 12px; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; color: var(--main-color);}
#section1 .hero_benefit dd {position: relative; margin: 0; padding-left: 16px; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--ink); word-break: keep-all;}
#section1 .hero_benefit dd::before {content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--main-color);}
#section1 .hero_benefit dd + dd {margin-top: 6px;}
#section1 .hero_benefit dd small {margin-left: 2px; font-size: 0.75em; color: var(--body);}

#section1 .hero_visual {position: absolute; bottom: 50px; right: 0;}
#section1 .hero_visual img {display: block; width: 100%; max-width: 400px; height: auto;}

/* 슬라이드 표시 — 가로 막대 + 멈춤 */
#section1 .hero_ctrl {display: flex; align-items: center; gap: 6px; margin-top: 36px;}
#section1 .hero_dot {width: 24px; height: 3px; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 20%, transparent); cursor: pointer; transition: width 0.3s ease, background 0.3s ease;}
#section1 .hero_dot.active {width: 48px; background: var(--ink);}
#section1 .hero_pause {position: relative; width: 16px; height: 16px; margin-left: 10px; padding: 0; border: 0; background: none; cursor: pointer;}
#section1 .hero_pause::before,
#section1 .hero_pause::after {content: ''; position: absolute; top: 3px; width: 3px; height: 10px; background: var(--ink);}
#section1 .hero_pause::before {left: 4px;}
#section1 .hero_pause::after {right: 4px;}
#section1 .hero_pause.paused::before {width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--ink);}
#section1 .hero_pause.paused::after {display: none;}
#section1 .hero_dot:focus-visible, #section1 .hero_pause:focus-visible {outline: 2px solid var(--main-color); outline-offset: 3px;}


/* 신청 폼 (오른쪽) */
#section1 .form_wrap {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
  padding: 44px 36px 36px;
  border: 1px solid var(--line); border-top: 4px solid var(--main-color);
  background: #fff;
}
#section1 .form_wrap form {width: 100%;}

.form_wrap h2 {font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
.form_wrap .form_desc {margin-top: 6px; font-size: 15px; color: var(--muted); word-break: keep-all;}

.form_wrap ul {display: flex; flex-direction: column; gap: 18px; margin-top: 28px;}
.form_wrap li > label,
.form_wrap .name_wrap > label,
.form_wrap .field_label,
.form_wrap .label {display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink);}

.form_wrap input[type='text'],
.form_wrap .phone_select {
  width: 100%; height: 56px; padding: 0 16px;
  border: 1px solid var(--field); border-radius: 0; background: #fff;
  font-size: 17px; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form_wrap input[type='text']::placeholder {color: #A9B1C0;}
.form_wrap input[type='text']:focus,
.form_wrap .phone_select:focus {outline: none; border-color: var(--main-color); box-shadow: inset 0 0 0 1px var(--main-color);}

/* 이름 + 성별 한 줄 — 성별은 이름 입력창 높이에 맞춰 아래쪽에 붙인다 */
.form_wrap .basic_info_item {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end;}
.form_wrap .name_wrap {min-width: 0;}
.form_wrap .gender_field {flex-shrink: 0;}

/* 성별 — 테두리 상자 안의 두 칸, 고른 쪽만 검정으로 채운다 */
.form_wrap .gender_wrap {display: flex; height: 56px; border: 1px solid var(--field); background: #fff;}
.form_wrap .gender_wrap input[type='radio'] {position: absolute; opacity: 0; pointer-events: none;}
.form_wrap .gender_wrap label {display: flex; align-items: center; justify-content: center; width: 54px; margin: 0; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s;}
.form_wrap .gender_wrap label + input + label {border-left: 1px solid var(--field);}
.form_wrap .gender_wrap input[type='radio']:checked + label {background: var(--ink); color: #fff; font-weight: 700;}
.form_wrap .gender_wrap input[type='radio']:focus-visible + label {outline: 2px solid var(--main-color); outline-offset: -2px;}

/* 생년월일 | 지역 한 줄 */
.form_wrap .birth_region_item {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;}
.form_wrap .birth_region_item > div {min-width: 0;}
.form_wrap .birth_region_item label {display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink);}

/* 지역 — 입력칸과 같은 각진 테두리, 화살표는 오른쪽 */
.form_wrap .select_wrap {position: relative;}
.form_wrap .region_select,
.form_wrap .select_btn {
  display: block; width: 100%; height: 56px; padding: 0 40px 0 16px;
  border: 1px solid var(--field); border-radius: 0;
  background: #fff url("../img/arrow_down.svg") no-repeat right 12px center / 20px;
  font-size: 17px; color: var(--ink); text-align: left;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form_wrap .region_select:has(option[value='']:checked) {color: #A9B1C0;}
.form_wrap .region_select option {color: var(--ink);}
.form_wrap .region_select:focus,
.form_wrap .select_btn:focus-visible,
.form_wrap .select_wrap.open .select_btn {outline: none; border-color: var(--main-color); box-shadow: inset 0 0 0 1px var(--main-color);}

/* 지역 목록 — PC(마우스)에서만 index.php 스크립트가 .is_custom 을 붙이고 직접 만든 목록을 보여 준다.
   기본 select 의 펼침 목록은 높이를 정할 수 없어서다. 모바일은 기본 선택창 그대로. */
.form_wrap .select_wrap.is_custom .region_select {position: absolute; inset: 0; opacity: 0; pointer-events: none;}
.form_wrap .select_btn {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.form_wrap .select_btn.is_placeholder {color: #A9B1C0;}
.form_wrap .select_list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  display: none; flex-direction: column; gap: 0; margin: 0;
  max-height: 228px;              /* 목록 최대 높이 — 넘치면 안에서 스크롤 */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; border: 1px solid var(--field); background: #fff;
  box-shadow: 0 16px 36px rgba(14, 21, 37, 0.12);
}
.form_wrap .select_wrap.up .select_list {top: auto; bottom: calc(100% + 4px);}   /* 아래 공간이 모자라면 위로 연다 */
.form_wrap .select_wrap.open .select_list {display: block;}
.form_wrap .select_list li {padding: 10px 12px; font-size: 15px; font-weight: 600; color: var(--body); cursor: pointer;}
.form_wrap .select_list li.is_active {background: var(--surface); color: var(--ink);}
.form_wrap .select_list li[aria-selected='true'] {background: var(--main-soft); color: var(--main-color); font-weight: 800;}

/* 연락처 — 국번 + 번호 */
.form_wrap .phone_input_wrap {display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px;}
.form_wrap .phone_select {padding: 0 34px 0 14px; background: #fff url("../img/arrow_down.svg") no-repeat right 10px center / 20px; cursor: pointer; appearance: none; -webkit-appearance: none;}


/* 버튼*/
.form_wrap .submit_btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 64px; margin-top: 28px;
  border: 0; border-radius: 0; background: var(--main-color); color: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px; cursor: pointer;
  transition: background 0.15s;
}
.form_wrap .submit_btn::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
.form_wrap .submit_btn:hover {background: var(--main-dark);}
.form_wrap .submit_btn:hover::after {transform: translateX(4px);}
.form_wrap .btn_wrap {display: flex; gap: 8px; margin-top: 28px;}
.form_wrap .btn_wrap .submit_btn {flex: 1; margin-top: 0;}
.form_wrap .btn_wrap .prev_btn {flex: 0 0 30%; height: 64px; border: 1px solid var(--field); background: #fff; font-size: 17px; font-weight: 700; color: var(--body); cursor: pointer;}

/* 안심 문구 — 버튼 바로 아래 */
.form_wrap .form_privacy {margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; word-break: keep-all;}

/* 신청부터 가입까지 — 폼 아래 작게 (폼보다 눈에 띄지 않게), 각진 번호 칸을 가는 선으로 잇는다 */
#section1 .hero_steps {margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);}
#section1 .hero_steps_label {font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: var(--muted);}
#section1 .hero_steps ol {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px;}
#section1 .hero_steps li {position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink); text-align: center; word-break: keep-all;}
#section1 .hero_steps li:not(:first-child)::before {content: ''; position: absolute; top: 12px; right: calc(50% + 14px); width: calc(100% - 28px); border-top: 1px solid var(--field);}
#section1 .hero_steps .num {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--ink); background: #fff; font-size: 12px; font-weight: 800; color: var(--ink);}
#section1 .hero_steps li:last-child .num {border-color: var(--main-color); background: var(--main-color); color: #fff;}


#section1 .hero_stats {grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line);}
#section1 .hero_stats li {padding: 28px 32px; border-left: 1px solid var(--line);}
#section1 .hero_stats li:first-child {border-left: 0; padding-left: 0;}
#section1 .hero_stats strong {display: block; font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: var(--ink);}
#section1 .hero_stats strong small {margin-left: 2px; font-size: 18px; font-weight: 700; letter-spacing: 0;}
#section1 .hero_stats span {display: block; margin-top: 8px; font-size: 15px; color: var(--body);}


.title_wrap {display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; margin-bottom: 64px;}
.title_wrap .section_label {grid-row: 1 / span 2; display: block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);}
/* 섹션 번호 — 나오는 순서대로 01, 02 … 자동으로 매긴다 */
.title_wrap .section_label::before {counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -3px; color: var(--main-color);}
.title_wrap h2 {font-size: 42px; font-weight: 800; line-height: 1.28; letter-spacing: -1.5px; color: var(--ink); word-break: keep-all;}
.title_wrap h2 b {color: var(--main-color);}
.title_wrap p {grid-column: 2; margin-top: 18px; font-size: 17px; line-height: 1.7; color: var(--body); word-break: keep-all;}

/* 섹션 하단 ※ 안내 */
#section3 .notice,
#section5 .notice {margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); word-break: keep-all;}


/* ── section2 ── */
#section2 .why_list {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink);}
#section2 .why_list li {padding: 40px 36px 8px; border-left: 1px solid var(--line);}
#section2 .why_list li:first-child {padding-left: 0; border-left: 0;}
#section2 .icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 28px; background: var(--surface); font-size: 30px;}
#section2 h3 {margin-bottom: 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); word-break: keep-all;}
#section2 p {font-size: 16px; line-height: 1.7; color: var(--body); word-break: keep-all;}
#section2 p b {color: var(--ink); font-weight: 700;}
#section2 p small {display: block; margin-top: 6px; font-size: 13px; color: var(--muted);}   /* 통계 출처 */


/* ── section3 ── */
#section3 .coverage_list {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--line);}
#section3 .coverage_list li {padding: 36px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.2s;}
#section3 .coverage_list li:hover {background: var(--main-soft);}
#section3 .tag {display: inline-block; margin-bottom: 20px; padding: 4px 9px; border: 1px solid var(--main-color); background: var(--main-color); font-size: 12px; font-weight: 700; color: #fff;}
#section3 .tag.option {background: transparent; border-color: var(--ink); color: var(--ink);}
#section3 h3 {margin-bottom: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section3 p {font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}

/* ── section_company ── */
#section_company .company_list {display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--line);}
#section_company .company_list li {display: flex; align-items: center; justify-content: center; height: 120px; padding: 0 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.2s;}
#section_company .company_list li:hover {background: var(--main-soft);}
#section_company .company_list img {display: block; max-width: 150px; max-height: 44px; width: auto; height: auto; object-fit: contain;}

/* 보험사 텍스트 로고 — 심의 기준 ⑥: 이니셜(A·B…)만 칸마다 다른 장식 색(index.php 의 --co-init), '보험사' 글자는 모두 진한 색 */
#section_company .co_logo {display: flex; align-items: center; gap: 2px; color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -1px; line-height: 1; white-space: nowrap;}
#section_company .co_logo b {color: var(--co-init, var(--main-color)); font-size: 1.3em; font-weight: 900; letter-spacing: 0;}

/* 안내 + 상담 버튼 */
#section_company .company_foot {display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px;}
#section_company .company_foot p {font-size: 14px; line-height: 1.6; color: var(--muted); word-break: keep-all;}
#section_company .company_foot button {display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 60px; padding: 0 32px; border: 0; background: var(--ink); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; transition: background 0.15s;}
#section_company .company_foot button::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
#section_company .company_foot button:hover {background: var(--main-color);}
#section_company .company_foot button:hover::after {transform: translateX(4px);}


/* ── section4 ── */
#section4 {background: var(--ink);}
#section4 .title_wrap .section_label {color: rgba(255, 255, 255, 0.5);}
#section4 .title_wrap .section_label::before {color: var(--accent);}
#section4 .title_wrap h2 {color: #fff;}
#section4 .title_wrap h2 b {color: var(--accent);}
#section4 .title_wrap p {color: rgba(255, 255, 255, 0.65);}

/* 목록은 제목 오른쪽 칸에 맞춰 들여 시작한다 */
#section4 .checklist {margin-left: calc(280px + 48px); border-top: 2px solid #fff;}
#section4 .checklist li {display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);}
#section4 .num {font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--accent);}
#section4 h3 {margin-bottom: 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.5px; color: #fff; word-break: keep-all;}
#section4 .txt p {font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.65); word-break: keep-all;}

/* 중간 CTA —*/
#section4 .cta_box {display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 72px; padding: 44px 48px; background: var(--accent);}
#section4 .cta_box p {font-size: 28px; font-weight: 800; line-height: 1.35; letter-spacing: -1px; color: var(--ink); word-break: keep-all;}
#section4 .cta_box button {display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 64px; padding: 0 40px; border: 0; background: var(--ink); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; transition: background 0.15s;}
#section4 .cta_box button::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
#section4 .cta_box button:hover {background: var(--main-color);}
#section4 .cta_box button:hover::after {transform: translateX(4px);}


/* ── section5 ── */
#section5 .disease_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
#section5 .disease_list > li {border: 1px solid var(--line); border-top: 2px solid var(--ink);}
#section5 .card_head {display: flex; align-items: center; gap: 16px; padding: 24px 28px; background: var(--surface);}
#section5 .card_head .icon {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; background: #fff; font-size: 28px;}
#section5 .card_head h3 {font-size: 20px; font-weight: 800; color: var(--ink);}
#section5 .card_head p {margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--body); word-break: keep-all;}
#section5 .disease_items {padding: 4px 28px 8px;}
#section5 .disease_items li {display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5;}
#section5 .disease_items li:last-child {border-bottom: 0;}
#section5 .disease_items b {flex-shrink: 0; font-weight: 700; color: var(--ink);}
#section5 .disease_items span {color: var(--body); text-align: right; word-break: keep-all;}


/* ── section_process ── */
#section_process .process_list {display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); border-left: 1px solid var(--line);}
#section_process .process_list li {position: relative; padding: 36px 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
/* 칸 사이 화살표 */
#section_process .process_list li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: -9px; z-index: 1; width: 16px; height: 16px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; transform: translateY(-50%) rotate(45deg);}
#section_process .step {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 28px; background: var(--ink); font-size: 18px; font-weight: 800; color: #fff;}
#section_process h3 {margin-bottom: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_process p {font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}
/* 마지막 단계(가입 결정) */
#section_process .process_list li:last-child {background: var(--main-color);}
#section_process .process_list li:last-child .step {background: #fff; color: var(--main-color);}
#section_process .process_list li:last-child h3 {color: #fff;}
#section_process .process_list li:last-child p {color: rgba(255, 255, 255, 0.8);}


/* ── 자주 묻는 질문 ── */
#section_qna .qna_list {border-top: 2px solid var(--ink);}
#section_qna .qna_item {border-bottom: 1px solid var(--line);}
#section_qna .qna_question {display: flex; align-items: center; gap: 20px; width: 100%; padding: 28px 0; border: 0; background: none; text-align: left; cursor: pointer;}
#section_qna .qna_num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; background: var(--ink); font-size: 14px; font-weight: 800; color: #fff;}
#section_qna .qna_text {flex: 1; font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; color: var(--ink); word-break: keep-all; transition: color 0.15s;}

#section_qna .qna_arrow {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--field); font-size: 24px; font-weight: 300; line-height: 1; color: var(--ink); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.25s;}
#section_qna .qna_question:hover .qna_text {color: var(--main-color);}

#section_qna .qna_answer {display: none; padding: 0 60px 32px 64px;}
#section_qna .qna_answer p {padding-left: 20px; border-left: 3px solid var(--main-color); font-size: 16px; line-height: 1.8; color: var(--body); word-break: keep-all;}

#section_qna .qna_item.active .qna_num {background: var(--main-color);}
#section_qna .qna_item.active .qna_text {color: var(--main-color);}
#section_qna .qna_item.active .qna_arrow {background: var(--main-color); border-color: var(--main-color); color: #fff; transform: rotate(45deg);}
#section_qna .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);}}


/* ── 서브페이지로 가는 '자세히 보기' 링크 ── */
/* 섹션 하단 — 메인컬러 글씨 + 오른쪽 화살표 */
.more_link {display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-bottom: 4px; border-bottom: 2px solid var(--main-color); font-size: 16px; font-weight: 800; color: var(--main-color); word-break: keep-all;}
.more_link::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
.more_link:hover::after {transform: translateX(4px);}

/* 체크리스트(어두운 띠) — 코랄 글씨 */
#section4 .check_link {display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--accent); word-break: keep-all;}
#section4 .check_link::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
#section4 .check_link:hover {text-decoration: underline; text-underline-offset: 3px;}
#section4 .check_link:hover::after {transform: translateX(4px);}

/* 자주 묻는 질문 — 답변 왼쪽 선에 맞춰 들여 쓴다 */
#section_qna .qna_more {display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0 23px; font-size: 15px; font-weight: 700; color: var(--main-color);}
#section_qna .qna_more::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
#section_qna .qna_more:hover {text-decoration: underline; text-underline-offset: 3px;}
#section_qna .qna_more:hover::after {transform: translateX(4px);}


/* ── 스크롤 등장 효과 — index.php 스크립트가 .reveal 을 붙이고, 화면에 들어오면 .is_in ── */
.reveal {opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease;}
.reveal.is_in {opacity: 1; transform: none;}


/* ══════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════ */

@media (max-width: 1300px) {
  .inner {width: 93%;}
  #section1 .content_wrap {--aside-w: 370px;}
  #section1 .hero_main {padding: 56px 48px 44px;}
  #section1 .hero_title {font-size: 48px;}
  .title_wrap {grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px;}
  #section4 .checklist {margin-left: calc(220px + 40px);}}

@media (max-width: 1200px) {
  :root {--sec-pad: 100px;}
  #section1 .hero_slide {grid-template-columns: minmax(0, 1fr) minmax(0, 38%);}
  #section1 .hero_title {font-size: 42px;}
  #section3 .coverage_list {grid-template-columns: repeat(2, 1fr);}
  #section_process .process_list {grid-template-columns: repeat(2, 1fr);}
  #section_process .process_list li:nth-child(2)::after {display: none;}   /* 줄 끝 칸은 화살표를 뺀다 */
}

/* 한 줄로 세운다 — 히어로 → 폼 → 지표 → 본문 */
@media (max-width: 1150px) {
  :root {--sec-pad: 88px;}
  #section1 > .inner,
  #section2 > .inner,
  #section3 > .inner,
  #section_company > .inner,
  #section4 > .inner,
  #section5 > .inner,
  #section_process > .inner,
  #section_qna > .inner {width: min(720px, calc(100% - 32px));}

  #section1 .content_wrap {grid-template-columns: minmax(0, 1fr); padding-top: 20px;}
  #section1 .hero_main {min-height: 0; border-right: 1px solid var(--line); border-bottom: 0;}
  /* 하단 버튼으로 폼에 올 때 모바일 고정 헤더에 가리지 않게 */
  #section1 .form_wrap {scroll-margin-top: 84px;}

  /* 섹션 머리 */
  .title_wrap {grid-template-columns: minmax(0, 1fr); margin-bottom: 44px;}
  .title_wrap .section_label {grid-row: auto; margin-bottom: 18px;}
  .title_wrap .section_label::before {font-size: 48px; margin-bottom: 10px;}
  .title_wrap p {grid-column: 1;}
  #section4 .checklist {margin-left: 0;}

  #section2 .why_list {grid-template-columns: minmax(0, 1fr);}
  #section2 .why_list li {display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 20px; padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line);}
  #section2 .icon {grid-row: span 2; margin: 0;}
  #section5 .disease_list {grid-template-columns: minmax(0, 1fr);}}

@media (max-width: 768px) {
  :root {--sec-pad: 72px;}
  #section1 .hero_main {padding: 44px 28px 32px;}
  #section1 .hero_slide {grid-template-columns: minmax(0, 1fr);}
  #section1 .hero_visual {order: -1; justify-content: flex-end; margin-bottom: -16px;}
  #section1 .hero_visual img {max-width: 200px;}
  #section1 .hero_title {margin-top: 16px; font-size: 34px; letter-spacing: -1.2px;}
  #section1 .hero_note {font-size: 15px;}
  #section1 .hero_benefit {gap: 20px 32px; margin-top: 32px; padding-top: 22px;}
  #section1 .hero_benefit dd {font-size: 17px;}
  #section1 .hero_ctrl {margin-top: 28px;}
  #section1 .hero_stats li {padding: 22px 18px;}
  #section1 .hero_stats strong {font-size: 28px;}
  #section1 .hero_stats span {font-size: 14px;}

  .title_wrap h2 {font-size: 32px; letter-spacing: -1px;}
  .title_wrap p {font-size: 16px;}

  #section4 .checklist li {grid-template-columns: 52px minmax(0, 1fr); padding: 24px 0;}
  #section4 .num {font-size: 22px;}
  #section4 h3 {font-size: 18px;}
  #section4 .cta_box {flex-direction: column; align-items: stretch; margin-top: 56px; padding: 32px 28px;}
  #section4 .cta_box p {font-size: 23px;}
  #section4 .cta_box button {justify-content: center;}

  #section_qna .qna_answer {padding: 0 0 28px 64px;}

  #section_company .company_list li {height: 96px; padding: 0 16px;}
  #section_company .company_list img {max-width: 120px; max-height: 36px;}
  #section_company .company_foot {flex-direction: column; align-items: stretch; gap: 16px;}
  #section_company .company_foot button {justify-content: center;}}

@media (max-width: 550px) {
  :root {--sec-pad: 56px;}
  #section1 > .inner,
  #section2 > .inner,
  #section3 > .inner,
  #section_company > .inner,
  #section4 > .inner,
  #section5 > .inner,
  #section_process > .inner,
  #section_qna > .inner {width: calc(100% - 32px);}
  #section1 .content_wrap {padding-top: 12px;}

  #section1 .hero_main {padding: 32px 22px 24px;}
  #section1 .hero_slide .hero_txt {width: 100%;}
  #section1 .hero_label {font-size: 13px;}
  #section1 .hero_title {font-size: 29px; letter-spacing: -1px;}
  #section1 .hero_visual img {display: none;}
  #section1 .hero_note {font-size: 14px;}
  #section1 .hero_note br {display: none;}
  #section1 .hero_benefit {gap: 16px 24px; margin-top: 26px;}
  #section1 .hero_benefit dt {font-size: 13px;}
  #section1 .hero_benefit dd {font-size: 15px;}

  #section1 .form_wrap {padding: 30px 20px 22px;}
  .form_wrap h2 {font-size: 22px;}
  .form_wrap input[type='text'], .form_wrap .phone_select, .form_wrap .region_select, .form_wrap .select_btn {height: 52px; font-size: 16px;}
  #section1 .hero_steps li {font-size: 11.5px;}
  #section_company .co_logo {font-size: 17px;}
  .form_wrap .gender_wrap, .form_wrap .choice_btn {height: 52px;}
  .form_wrap .gender_wrap label {width: 48px;}
  .form_wrap .phone_input_wrap {grid-template-columns: 90px minmax(0, 1fr);}
  .form_wrap .submit_btn, .form_wrap .btn_wrap .prev_btn {height: 58px; font-size: 17px;}

  /* 지표 */
  #section1 .hero_stats {grid-auto-flow: row;}
  #section1 .hero_stats li {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding: 16px 0; border-left: 0; border-top: 1px solid var(--line);}
  #section1 .hero_stats li:first-child {border-top: 0;}
  #section1 .hero_stats strong {font-size: 24px;}
  #section1 .hero_stats span {margin-top: 0;}

  .title_wrap {margin-bottom: 32px;}
  .title_wrap .section_label {font-size: 12px; letter-spacing: 1.5px;}
  .title_wrap .section_label::before {font-size: 40px;}
  .title_wrap h2 {font-size: 26px; letter-spacing: -0.8px;}
  .title_wrap p {margin-top: 14px; font-size: 15px;}
  .title_wrap p br {display: none;}

  #section2 .why_list li {grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 22px 0;}
  #section2 .icon {width: 48px; height: 48px; font-size: 24px;}
  #section2 h3 {font-size: 18px;}
  #section2 p {font-size: 15px;}

  #section3 .coverage_list {grid-template-columns: minmax(0, 1fr);}
  #section3 .coverage_list li {padding: 24px 20px;}
  #section3 .tag {margin-bottom: 14px;}
  #section3 h3 {font-size: 18px;}

  #section_company .company_list {grid-template-columns: repeat(2, 1fr);}
  #section_company .company_list li {height: 80px;}
  #section_company .company_list img {max-width: 110px; max-height: 32px;}
  #section_company .company_foot p {font-size: 13px;}
  #section_company .company_foot button {height: 56px; font-size: 16px;}

  #section4 .cta_box {padding: 28px 20px;}
  #section4 .cta_box p {font-size: 20px;}

  #section5 .card_head {padding: 20px;}
  #section5 .disease_items {padding: 4px 20px 8px;}
  #section5 .disease_items li {flex-direction: column; gap: 2px;}
  #section5 .disease_items span {text-align: left; font-size: 14px;}
  #section5 .card_head h3 {font-size: 18px;}

  #section_process .process_list {grid-template-columns: minmax(0, 1fr);}
  #section_process .process_list li {display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px;}
  #section_process .process_list li::after {display: none;}
  #section_process .step {width: 40px; height: 40px; margin-bottom: 0; font-size: 16px;}
  #section_process h3 {margin-bottom: 6px; font-size: 18px;}
  #section_process p {font-size: 14.5px;}

  #section_qna .qna_question {gap: 14px; padding: 20px 0;}
  #section_qna .qna_num {width: 36px; height: 36px; font-size: 12px;}
  #section_qna .qna_text {font-size: 16px;}
  #section_qna .qna_arrow {width: 32px; height: 32px; font-size: 20px;}
  #section_qna .qna_answer {padding: 0 0 22px;}
  #section_qna .qna_answer p {padding-left: 14px; font-size: 15px;}
  #section_qna .qna_more {margin-left: 17px; font-size: 14px;}
  .more_link {font-size: 15px;}}

@media (max-width: 360px) {
  /* 정말 좁을 때만 성별을 이름 아래로 내린다 */
  .form_wrap .basic_info_item {grid-template-columns: 1fr;}
  .form_wrap .gender_wrap label {flex: 1; width: auto;}}

@media (hover: none) {
  .form_wrap .submit_btn:hover {background: var(--main-color);}
  .form_wrap .submit_btn:hover::after, #section4 .cta_box button:hover::after {transform: none;}
  #section3 .coverage_list li:hover {background: none;}
  #section_qna .qna_question:hover .qna_text {color: var(--ink);}
  #section_qna .qna_item.active .qna_question:hover .qna_text {color: var(--main-color);}
  #section4 .cta_box button:hover {background: var(--ink);}
  #section_company .company_list li:hover {background: none;}
  #section_company .company_foot button:hover {background: var(--ink);}
  #section_company .company_foot button:hover::after {transform: none;}
  .more_link:hover::after, #section4 .check_link:hover::after, #section_qna .qna_more:hover::after {transform: none;}}

@media (prefers-reduced-motion: reduce) {
  #section1 .hero_slide, #section1 .hero_dot {transition: none;}
  #section_qna .qna_item.active .qna_answer {animation: none;}
  .form_wrap .submit_btn, .form_wrap .submit_btn::after, #section4 .cta_box button, #section_qna .qna_arrow, .form_wrap .region_select, .form_wrap .select_btn {transition: none;}
  #section_company .company_foot button, #section_company .company_foot button::after {transition: none;}
  .reveal {opacity: 1; transform: none; transition: none;}}





/* ─ 하단 고정 폼 (PC 전용) —*/
.bottom_form {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  border-top: 2px solid var(--ink);
  background: #fff;
  box-shadow: 0 -12px 30px rgba(14, 21, 37, 0.08);
  opacity: 0; visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s ease;
}
.bottom_form.show {opacity: 1; visibility: visible; transform: translateY(0);}

.bottom_form_inner {display: flex; align-items: center; gap: 28px; width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; padding: 14px 0;}

.bottom_form_title {flex-shrink: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--body); word-break: keep-all;}
.bottom_form_title b {display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink);}

.bottom_form_fields {display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0;}

/* 입력칸 */
.bf_field {
  display: flex; flex-direction: column; justify-content: center;
  height: 60px; padding: 0 16px; min-width: 0;
  border: 1px solid var(--field); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bf_field:focus-within {border-color: var(--main-color); box-shadow: inset 0 0 0 1px var(--main-color);}
.bf_field label {font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--muted);}
.bf_field input,
.bf_field select {height: 26px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 16px; color: var(--ink); outline: none;}
.bf_field input {width: 100%;}
.bf_field input::placeholder {color: #A9B1C0;}

.bf_name {flex: 1.1;}
.bf_birth {flex: 1;}
.bf_phone {flex: 1.6;}
/* 지역 — 하단 폼 */
.bf_region {flex: 0.9;}
.bf_region select {width: 100%; padding-right: 18px; background: url("../img/arrow_down.svg") no-repeat right center / 16px; cursor: pointer; appearance: none; -webkit-appearance: none;}
.bf_region select:has(option[value='']:checked) {color: #A9B1C0;}
.bf_region select option {color: var(--ink);}
.bf_phone_row {display: flex; align-items: center; gap: 10px;}
.bf_phone_row select {flex-shrink: 0; padding-right: 18px; background: url("../img/arrow_down.svg") no-repeat right center / 16px; cursor: pointer; appearance: none; -webkit-appearance: none;}

/* 성별  */
.bf_gender {display: flex; flex-shrink: 0; height: 60px; border: 1px solid var(--field); background: #fff;}
.bf_gender input[type='radio'] {position: absolute; opacity: 0; pointer-events: none;}
.bf_gender label {display: flex; align-items: center; justify-content: center; width: 50px; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s;}
.bf_gender label + input + label {border-left: 1px solid var(--field);}
.bf_gender input[type='radio']:checked + label {background: var(--ink); color: #fff; font-weight: 700;}
.bf_gender input[type='radio']:focus-visible + label {outline: 2px solid var(--main-color); outline-offset: -2px;}

.bottom_form_submit {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; height: 60px; padding: 0 32px;
  border: 0; border-radius: 0; background: var(--main-color); color: #fff;
  font-size: 17px; font-weight: 800; cursor: pointer;
  transition: background 0.15s;
}
.bottom_form_submit::after {content: '→'; font-weight: 400; transition: transform 0.15s;}
.bottom_form_submit:hover {background: var(--main-dark);}
.bottom_form_submit:hover::after {transform: translateX(4px);}


@media (max-width: 1300px) {
  .bottom_form_title {display: none;}}
/* 모바일·태블릿은 하단 폼 대신 아래 신청 유도 버튼을 쓴다 */
@media (max-width: 1150px) {
  .bottom_form {display: none;}}
@media (prefers-reduced-motion: reduce) {
  .bottom_form, .bf_field, .bf_gender label, .bottom_form_submit, .bottom_form_submit::after {transition: none;}}

/* ── 신청 유도 버튼 (모바일 전용) ── */
.to_top {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px 20px;
  border: 0; border-radius: 0;
  background: var(--main-color); color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
  box-shadow: 0 -6px 20px rgba(14, 21, 37, 0.12);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(100%);
  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 svg {width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter;}

/* 어두운 푸터 위에 올라오면 색을 뒤집는다 */
.to_top.on_dark {background: #fff; color: var(--main-color); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.3);}
.to_top.on_dark svg {stroke: var(--main-color);}

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

/* PC — 하단 고정 폼이 신청 유도 버튼을 대신한다.*/
@media (min-width: 1151px) {
  .to_top {display: none;}}

@media (max-width: 768px) {
  .m_header_bar .logo {width: 120px;}
  .m_header_bar .m_header_date {font-size: 14px;}}


/* ══════ 약관 문서 페이지 (개인정보처리방침 · 이용약관) ══════ */
.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: 0; 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;}
  .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;}}