/* ══════════════════════════════════════════════════════════
   보험 랜딩 — 각진 핀테크 스타일
   · 모서리 없음(radius 0) · 카드 대신 선으로 칸을 나눈다 · 흰 바탕 + 파랑 하나 + 코랄 포인트
   · 섹션 번호(01, 02 …)는 CSS 가 자동으로 붙인다 (.title_wrap .section_label)
   랜딩마다 --main-color / --main-dark 두 개만 바꾸면 전체 톤이 바뀐다.
   ══════════════════════════════════════════════════════════ */
:root {
  /* 뇌·심혈관 — 원색 파랑보다 한 단계 깊은 블루로 차분함·신뢰감을 준다 */
  --main-color: #1A44BF;
  --main-dark: #11318F;          /* 메인 hover / 눌림 */
  --point-color: var(--main-color);
  --main-soft: color-mix(in srgb, var(--main-color) 7%, #fff);

  /* 노랑 대신 코랄 — 심장·혈관을 떠올리게 하는 색. 어두운 띠 위 숫자와 중간 CTA 띠에 쓴다 */
  --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);}


/* ══════ PC 헤더 ══════ */
header {background: #fff; border-bottom: 1px solid var(--line);}
header .inner {display: flex; justify-content: space-between; align-items: center; height: 76px;}
header .inner nav {display: flex; align-items: center; gap: 20px;}
header .inner .logo {width: 168px;}
header .inner .logo a {display: block;}
header .inner .logo a img {width: 100%; height: auto;}
header .inner .time_wrap {color: var(--body); font-size: 15px; font-weight: 500;}
header .inner .time_wrap span {margin-right: 8px; padding: 5px 10px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700;}


/* ══════ 전체 틀 ══════
   섹션은 흰 바탕을 그대로 쓰고, 사이를 얇은 선으로 나눈다.
   #section4 만 어두운 띠로 흐름을 끊는다. */
body {counter-reset: sec;}

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

#section2, #section3, #section4, #section5, #section_qna {padding: var(--sec-pad) 0; background: #fff;}
#section3, #section5, #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;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center; gap: 24px;
  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_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; 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 {display: flex; justify-content: center;}
#section1 .hero_visual img {display: block; width: 100%; max-width: 500px; 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 .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;}

/* 2단계 폼을 쓰는 랜딩용 (지금 폼에는 없음) */
.form_wrap .form_step {display: none;}
.form_wrap .form_step.active {display: block;}
.form_wrap .choice_wrap {display: flex;}
.form_wrap .choice_btn {flex: 1; height: 56px; border: 1px solid var(--field); background: #fff; font-size: 17px; font-weight: 600; color: var(--body); cursor: pointer;}
.form_wrap .choice_btn + .choice_btn {border-left: 0;}
.form_wrap .choice_btn.active {background: var(--ink); border-color: var(--ink); color: #fff;}

/* 버튼 — 꽉 찬 메인컬러 직사각형, 오른쪽에 화살표 */
.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;}


/* ── 신뢰 지표 줄 — 히어로·폼 아래를 가로지른다 ── */
#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 : 왜 필요한가 — 굵은 선 아래 3칸, 칸 사이는 세로선 ── */
#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;}


/* ── 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 .info_block + .info_block {margin-top: 88px;}
#section5 .info_title {display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-size: 24px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink);}
#section5 .info_title::before {content: ''; width: 12px; height: 12px; background: var(--main-color);}

/* 자주 찾는 진료 — 2칸 명세표 */
#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 h4 {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;}

/* 보험금 청구 — 가로 진행선 위에 네모 표시가 올라간 4단계 */
#section5 .claim_flow {display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--line);}
#section5 .claim_flow li {position: relative; padding: 36px 28px 0 0;}
#section5 .claim_flow li::before {content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; background: var(--main-color);}
#section5 .claim_flow .step {display: block; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--main-color);}
#section5 .claim_flow .icon {display: block; margin: 18px 0 14px; font-size: 32px; line-height: 1;}
#section5 .claim_flow h4 {margin-bottom: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink);}
#section5 .claim_flow p {font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}


/* ── 자주 묻는 질문 (여러 개를 동시에 펼칠 수 있다) ── */
#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;}
/* "+" 를 네모 칸에 넣고, 열리면 45도 돌려 × 로 만든다 */
#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);}}


/* ── 스크롤 등장 효과 — 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);}
  #section5 .claim_flow {grid-template-columns: repeat(2, 1fr); row-gap: 48px;}
}

/* 한 줄로 세운다 — 히어로 → 폼 → 지표 → 본문 */
@media (max-width: 1150px) {
  :root {--sec-pad: 88px;}
  #section1 > .inner,
  #section2 > .inner,
  #section3 > .inner,
  #section4 > .inner,
  #section5 > .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;}
}

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

  #section1 .hero_main {padding: 32px 22px 24px;}
  #section1 .hero_label {font-size: 13px;}
  #section1 .hero_title {font-size: 29px; letter-spacing: -1px;}
  #section1 .hero_visual img {max-width: 150px;}
  #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;}
  /* 입력창 글자는 16px 아래로 내리지 않는다 — iOS 가 화면을 확대해 버린다 */
  .form_wrap input[type='text'], .form_wrap .phone_select {height: 52px; font-size: 16px;}
  .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;}

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

  #section5 .info_block + .info_block {margin-top: 64px;}
  #section5 .info_title {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 .claim_flow {grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 0; border-left: 2px solid var(--line); margin-left: 6px;}
  #section5 .claim_flow li {padding: 0 0 36px 28px;}
  #section5 .claim_flow li:last-child {padding-bottom: 0;}
  #section5 .claim_flow li::before {top: 2px; left: -8px;}
  #section5 .claim_flow .icon {margin: 12px 0 10px; font-size: 28px;}
  #section5 .claim_flow h4 {font-size: 17px;}

  #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;}
}

@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);}
}

@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 {transition: none;}
  .reveal {opacity: 1; transform: none; transition: none;}
}


/* ══════════════════════════════════════════════════
   아래는 기존과 같은 공용 영역 — 하단 고지, 푸터, 모바일 헤더, 신청 유도 버튼, 약관 페이지
   ══════════════════════════════════════════════════ */

.bottom_wrap { padding:40px 0; background:#f7f7f7; border-top:1px solid #e5e5e5; }
.bottom_wrap .inner { max-width:1200px; margin:0 auto; }
.bottom_wrap .inner h3 { margin:0 0 20px; font-size:20px; font-weight:700; color:#333; }
.bottom_wrap .inner ul { margin:0; padding:0; list-style:none; }
.bottom_wrap .inner ul li {font-size:15px; line-height:1.8; color:#555; word-break:keep-all; }
.bottom_wrap .inner ul li:last-child { margin-bottom:0; }
.bottom_wrap .inner .compliance_info { margin-top:25px; padding-top:20px; border-top:1px solid #ddd; }
.bottom_wrap .inner .compliance_info p { margin:6px 0; font-size:14px; line-height:1.7; color:#666; }
.bottom_wrap .inner .compliance_info p strong { font-weight:700; color:#444; }

/* ── 푸터 — 메인컬러를 따르지 않고 중립 다크를 쓴다 ── */
.footer {padding: 54px 0 44px; background: #252525; color: rgba(255, 255, 255, 0.68);}
.footer_main {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;}
.footer_info {display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; max-width: 760px; font-style: normal; font-size: 14px; line-height: 1.7;}
.footer_info strong {width: 100%; margin-bottom: 2px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.3px;}
.footer_info span {position: relative;}
.footer_info span + span::before {content: ''; position: absolute; left: -10px; top: 50%; width: 3px; height: 3px; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.35);}
.footer_info .addr {flex-basis: 100%;}
.footer_info .addr::before {display: none;}
.footer_links {display: flex; align-items: center; gap: 22px; flex-shrink: 0;}
.footer_links a {position: relative; font-size: 14px; font-weight: 600; color: #fff; transition: opacity 0.15s ease;}
.footer_links a:hover {opacity: 0.65;}
.footer_links a + a::before {content: ''; position: absolute; left: -11px; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.28);}
.footer .copyright {margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: rgba(255, 255, 255, 0.45);}

/* ── 모바일 헤더 — 1200px 이하에서만 보인다 ── */
.m_header {display: none;}
.m_menu_dim {display: none;}

@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;}

  .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: 0; 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);}

  .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: 0; 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;}
}

/* ── 하단 고정 폼 (PC 전용) — 상단 폼이 화면 밖으로 나가면 아래에서 올라온다 ──
      입력값은 상단 폼으로 복사되고 접수는 상단 폼이 한다 (index.php 스크립트 참고) */
.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_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);}

/* 좁은 PC 에서는 제목을 빼서 입력칸 자리를 확보한다 */
@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;}
}

/* 바가 푸터 마지막 내용을 가리지 않도록 */
@media (max-width: 1150px) {
  .footer {padding-bottom: 92px;}
}

/* PC — 하단 고정 폼이 신청 유도 버튼을 대신한다.
   ※ 위의 .to_top 기본 스타일(display: flex)보다 반드시 아래에 있어야 숨김이 적용된다. */
@media (min-width: 1151px) {
  .to_top {display: none;}
  .footer {padding-bottom: 130px;}
}

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

  .footer {padding: 38px 0 92px;}
  .footer_main {flex-direction: column; gap: 22px;}
  .footer_info {gap: 5px 16px; margin-top: 20px; font-size: 13.5px;}
  .footer .copyright {margin-top: 18px; font-size: 12.5px;}

  .bottom_wrap {padding: 32px 0;}
  .bottom_wrap .inner h3 {margin-bottom: 14px; font-size: 17px;}
  .bottom_wrap .inner ul li {font-size: 13.5px; line-height: 1.75;}
  .bottom_wrap .inner .compliance_info p {font-size: 13px;}
}


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