:root {
  --main-color: #187A4E;        /* 회복 그린 — 이 값 하나로 전체 색이 바뀐다 */
  --main-dark: #0F5A38;         /* 메인 hover / 눌림 */
  --main-ink: #fff;             /* 메인컬러 바탕 위 글씨색 (서브페이지 sub.css 도 쓴다) */
  --main-text: var(--main-color); /* 흰 바탕 위 메인컬러 강조 글씨색 (서브페이지 sub.css 도 쓴다) */
  --main-soft: color-mix(in srgb, var(--main-color) 6%, #fff);    /* 선택된 칸 · 목록 hover */
  --main-tint: color-mix(in srgb, var(--main-color) 12%, #fff);   /* 태그 바탕 */
  --main-line: color-mix(in srgb, var(--main-color) 26%, #fff);   /* 포커스 링 · 연결선 */

  /* 카드 바탕 — 진한 메인컬러는 진행 순서 마지막 칸·버튼에만. 큰 면은 연한 색으로 둔다 */
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--main-color) 11%, #fff) 0%, color-mix(in srgb, var(--main-color) 6%, #fff) 55%, #EAF6EF 100%);
  --grad-strong: linear-gradient(135deg, color-mix(in srgb, var(--main-color) 86%, #fff) 0%, var(--main-color) 55%, var(--main-dark) 100%);
  --pastel-1: color-mix(in srgb, var(--main-color) 9%, #fff);     /* 연아쿠아 */
  --pastel-2: #E7F6F0;                                             /* 연민트 */
  --pastel-3: #FFF1EA;                                             /* 연살구 */

  --ink: #191F28;                /* 제목 */
  --body: #4E5968;               /* 본문 */
  --muted: #6B7684;              /* 보조 글씨 (흰 바탕 대비 4.6:1) */
  --line: #E5E8EB;               /* 구분선 */
  --bg: #F4F5F8;                 /* 회색 바탕 */
  --error: #F04452;

  --r-xl: 32px;                  /* 큰 카드 · 히어로 */
  --r-lg: 26px;                  /* 카드 */
  --r-md: 20px;                  /* 작은 카드 */
  --r-sm: 12px;                  /* 입력칸 */

  --wrap: 1280px;
  --narrow: 920px;               /* 가운데 좁은 목록 (질문) */
  --sec-pad: 120px;              /* 섹션 위아래 여백 */

  /* 체크 아이콘 (흰 선) */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.highlight {font-weight: 700; color: var(--main-color);}

/* 광고 심의 빨간 문구 — 원래 디자인에 없던 상자·배경 없이 작은 빨간 글자만 */
.c_red {color: #D7261E !important;}
.red_notice {margin-top: 20px; font-size: 13.5px; line-height: 1.6; word-break: keep-all;}
.red_notice p + p {margin-top: 2px;}


/* 화면에는 안 보이고 스크린리더만 읽는다 */
.sr_only {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}

/* 아이콘 묶음 SVG — 자리 차지 없이 숨긴다 */
.ico_sprite {position: absolute; width: 0; height: 0; overflow: hidden;}

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

/* 흰 섹션과 회색 섹션을 번갈아 둔다 */
#section2, #section3, #section_point, #section4, #section_process, #section_qna, #section_guide {padding: var(--sec-pad) 0;}
#section_company {padding: 8px 0 var(--sec-pad);}
#section1, #section_company, #section3, #section4, #section_qna {background: #fff;}
#section2, #section_point, #section_process, #section_guide {background: var(--bg);}

/* 일러스트 아이콘 (assets/img/ico_*.png, 투명 배경 정사각형) — 크기는 섹션마다 아래에서 바꾼다 */
.ico3d {display: block; flex-shrink: 0; width: 96px; height: 96px; object-fit: contain;}

/* ── 공통: 자세히 보기 링크 (글자 + 동그란 꺾쇠) ── */
.more_link {display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--main-text); word-break: keep-all;}
.more_link svg {flex-shrink: 0; width: 24px; height: 24px; padding: 6px; border-radius: 50%; background: var(--main-tint); color: var(--main-color); transition: transform 0.2s ease;}
.more_link:hover svg {transform: translateX(3px);}
.more_link:focus-visible {outline: 3px solid var(--main-line); outline-offset: 4px; border-radius: 6px;}


/* ══════ 그림 빈칸 — $use_img = false 이거나 파일이 없을 때 그림 자리 ══════ */
.img_slot {display: flex; align-items: center; justify-content: center; padding: 8px; border: 2px dashed #B9C1CC; border-radius: 16px; background: rgba(244, 245, 248, 0.7); text-align: center;}
.img_slot::after {content: attr(data-img); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--muted); word-break: break-all;}
.cta_visual.img_slot {aspect-ratio: 4 / 3;}


/* ══════ #section1 — 얇은 메인컬러 띠(그림이 띠 밖으로) + 띠에 걸친 폼 카드 ══════ */
#section1 {position: relative; overflow: hidden;}
#section1 .hero_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas:
    "band band"
    "info .";
  column-gap: 32px;
  padding: 72px 0 72px;
}
#section1 .hero_band {grid-area: band;}
#section1 .hero_info {grid-area: info;}
/* 폼은 띠 윗부분부터 띠 아래까지 걸친다 */
#section1 .form_wrap {grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 44px 28px 0 0;}

/* ── 띠 ── */
#section1 .hero_band {
  position: relative; z-index: 1;
  min-height: 360px; padding: 44px calc(400px + 32px + 340px) 36px 64px;
  border-radius: 40px;
  background: linear-gradient(115deg, var(--main-dark) 0%, var(--main-color) 58%, color-mix(in srgb, var(--main-color) 78%, #9FD9B5) 100%);
  color: #fff;
}
/* 그림 뒤 동심원 + 점 무늬 (띠 안에서만 보이게 잘라 둔다) */
#section1 .band_deco {position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;}
#section1 .band_deco::before,
#section1 .band_deco::after {content: ''; position: absolute; top: 50%; right: calc(400px + 32px + 170px); border-radius: 50%; transform: translate(50%, -50%);}
#section1 .band_deco::before {width: 560px; height: 560px; border: 1px solid rgba(255, 255, 255, 0.16); background: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);}
#section1 .band_deco::after {width: 400px; height: 400px; border: 1px solid rgba(255, 255, 255, 0.22);}

#section1 .hero_title {position: relative; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -0.3px; color: rgba(255, 255, 255, 0.86); word-break: keep-all;}
#section1 .hero_title b, #section1 .hero_title em {font-weight: 800; font-style: normal; color: #fff;}

/* ── 슬라이드 — 문구와 그림이 함께 바뀐다 ── */
#section1 .hero_slides {display: grid; margin-top: 14px;}
#section1 .hero_slide {grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s;}
#section1 .hero_slide.is_on {opacity: 1; visibility: visible;}
#section1 .slide_txt {position: relative; z-index: 2;}
#section1 .slide_label {display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 13.5px; font-weight: 700; color: #fff;}
#section1 .slide_title {margin-top: 12px; font-size: 40px; font-weight: 800; line-height: 1.26; letter-spacing: -1.6px; color: #fff; word-break: keep-all;}
#section1 .slide_title small {display: block; margin-top: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.8);}
#section1 .slide_chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;}
#section1 .slide_chips li {display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px 0 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap;}
#section1 .slide_chips li:first-child {border-color: #fff; background: #fff; color: var(--main-text);}
#section1 .slide_chips svg {width: 16px; height: 16px;}

/* 띠 밖으로 나오는 그림 — 위·아래로 띠를 벗어난다 */
#section1 .slide_visual {position: absolute; z-index: 1; right: calc(400px + 32px + 10px); bottom: -40px; width: 330px; height: auto; aspect-ratio: 660 / 920; object-fit: contain; object-position: center bottom; transform: translateY(16px); transition: transform 0.6s ease;}
#section1 .hero_slide.is_on .slide_visual {transform: none;}
#section1 .slide_visual.img_slot {border-color: color-mix(in srgb, var(--main-color) 45%, #fff); background: color-mix(in srgb, var(--main-color) 18%, transparent);}
#section1 .slide_visual.img_slot::after {color: #fff;}

/* ── 점 + 멈춤 — 켜진 점은 길어지고 5초 막대가 찬다 ── */
#section1 .hero_ctrl {position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; margin-top: 26px;}
#section1 .dot {display: flex; align-items: center; justify-content: center; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;}
#section1 .dot i {position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.45); transition: width 0.3s ease;}
#section1 .dot.is_on {width: 44px;}
#section1 .dot.is_on i {width: 36px; background: rgba(255, 255, 255, 0.35);}
#section1 .dot.is_on i::after {content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: #fff;}
#section1 .dot.is_on i.run::after {animation: dot_bar 5s linear forwards;}
#section1 .dot.is_on i.paused::after {animation-play-state: paused;}
#section1 .dot:focus-visible, #section1 .ctrl_pause:focus-visible {outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px;}
@keyframes dot_bar {to {width: 100%;}}
#section1 .ctrl_pause {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 8px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: none; cursor: pointer;}
#section1 .ctrl_pause span {width: 8px; height: 10px; border-left: 2.5px solid #fff; border-right: 2.5px solid #fff;}
#section1 .ctrl_pause.is_paused span {width: 0; height: 0; margin-left: 3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; border-right: 0;}

/* ── 폼 카드 ── */
#section1 .form_wrap {position: relative; z-index: 3; display: flex; flex-direction: column; padding: 28px 26px 22px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 28px 60px -24px rgba(17, 33, 77, 0.38), 0 0 0 1px rgba(25, 31, 40, 0.04); scroll-margin-top: 100px;}
.form_wrap .form_head {display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px;}
.form_wrap .form_badge {display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--main-soft); font-size: 13px; font-weight: 700; color: var(--main-text);}
.form_wrap .form_badge::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--main-color);}
.form_wrap .form_head h2 {margin-top: 10px; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
.form_wrap .form_head h2 b {color: var(--main-text);}
.form_wrap .form_ico {flex-shrink: 0; width: 64px; height: 64px; object-fit: contain;}

.form_wrap .form_fields {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px;}
.form_wrap .field {min-width: 0;}
.form_wrap .field.is_full {grid-column: 1 / -1;}
.form_wrap .field > label,
.form_wrap .field_label {display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--body);}

.form_wrap input[type='text'],
.form_wrap .phone_select,
.form_wrap .region_select,
.form_wrap .select_btn {display: block; width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s;}
.form_wrap input[type='text']::placeholder {font-weight: 500; color: #A9B0BA;}
.form_wrap input[type='text']:hover,
.form_wrap .phone_select:hover,
.form_wrap .select_btn:hover {border-color: #CDD2D8;}
.form_wrap input[type='text']:focus,
.form_wrap .phone_select:focus,
.form_wrap .region_select:focus,
.form_wrap .select_btn:focus-visible,
.form_wrap .select_wrap.open .select_btn {border-color: var(--main-color); box-shadow: 0 0 0 4px var(--main-tint);}

.form_wrap .phone_select,
.form_wrap .region_select,
.form_wrap .select_btn {padding-right: 36px; background: #fff url("../img/arrow_down.svg") no-repeat right 12px center / 16px; -webkit-appearance: none; appearance: none; cursor: pointer;}
.form_wrap .region_select:has(option[value='']:checked) {font-weight: 500; color: #A9B0BA;}
.form_wrap .region_select option {font-weight: 500; color: var(--ink);}

/* 성별 — 두 칸, 고르면 메인컬러로 채운다 */
.form_wrap .gender_wrap {display: grid; grid-template-columns: 1fr 1fr; height: 50px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); 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; margin: 0; font-size: 16px; font-weight: 700; 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(--line);}
.form_wrap .gender_wrap input[type='radio']:checked + label {background: var(--main-color); color: var(--main-ink);}
.form_wrap .gender_wrap input[type='radio']:focus-visible + label {outline: 3px solid var(--main-line); outline-offset: -3px;}

/* 지역 목록 */
.form_wrap .select_wrap {position: relative;}
.form_wrap .select_wrap.is_custom .region_select {position: absolute; inset: 0; opacity: 0; pointer-events: none;}
.form_wrap .select_btn {text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.form_wrap .select_btn.is_placeholder {font-weight: 500; color: #A9B0BA;}
.form_wrap .select_list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  display: none;
  max-height: 228px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: var(--r-sm); background: #fff;
  box-shadow: 0 18px 40px -16px rgba(20, 20, 50, 0.35), 0 0 0 1px var(--line);
  scrollbar-width: thin; scrollbar-color: #D1D6DB transparent;
}
.form_wrap .select_list::-webkit-scrollbar {width: 6px;}
.form_wrap .select_list::-webkit-scrollbar-thumb {border-radius: 6px; background: #D1D6DB;}
.form_wrap .select_wrap.up .select_list {top: auto; bottom: calc(100% + 6px);}
.form_wrap .select_wrap.open .select_list {display: block; animation: select_open 0.15s ease;}
@keyframes select_open {from {opacity: 0; transform: translateY(-4px);} to {opacity: 1; transform: none;}}
.form_wrap .select_list li {padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--body); cursor: pointer;}
.form_wrap .select_list li.is_active {background: var(--main-soft); color: var(--ink);}
.form_wrap .select_list li[aria-selected='true'] {color: var(--main-color); font-weight: 700;}

/* 연락처 — 국번 | 번호 */
.form_wrap .phone_input_wrap {display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px;}

.form_wrap .submit_btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 58px; margin-top: 18px; padding: 0 24px;
  border: 0; border-radius: 14px; background: var(--main-color); color: var(--main-ink);
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px; cursor: pointer;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--main-color) 85%, transparent);
  transition: background 0.15s, transform 0.1s;
}
.form_wrap .submit_btn svg {width: 18px; height: 18px; transition: transform 0.15s;}
.form_wrap .submit_btn:hover {background: var(--main-dark);}
.form_wrap .submit_btn:hover svg {transform: translateX(3px);}
.form_wrap .submit_btn:active {transform: scale(0.98);}
.form_wrap .submit_btn:focus-visible {outline: 3px solid var(--main-line); outline-offset: 3px;}

.form_wrap .form_privacy {margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; word-break: keep-all;}

/* ── 띠 아래: 신청부터 가입까지(숫자를 선으로 잇는 한 줄) + 신뢰 지표 ── */
#section1 .hero_info {display: grid; gap: 22px; padding: 34px 8px 0 64px;}
#section1 .hero_steps_label {margin-bottom: 14px; font-size: 14px; font-weight: 800; color: var(--main-text);}
#section1 .hero_steps {display: flex; align-items: center;}
#section1 .hero_steps li {display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
#section1 .hero_steps li:not(:last-child)::after {content: ''; width: 28px; height: 1px; margin: 0 12px 0 4px; background: #C9CFD8;}
#section1 .hero_steps .num {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); font-size: 12px; font-weight: 800; color: var(--muted);}
#section1 .hero_steps .txt {font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap;}
#section1 .hero_steps li:last-child .num {background: var(--main-color); color: var(--main-ink);}
#section1 .hero_steps li:last-child .txt {color: var(--main-text);}

#section1 .hero_stats {display: flex; align-items: stretch;}
#section1 .hero_stats li {display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 0 22px;}
#section1 .hero_stats li + li {border-left: 1px solid var(--line);}
#section1 .hero_stats li:first-child {padding-left: 0;}
#section1 .hero_stats strong {font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; color: var(--ink);}
#section1 .hero_stats strong small {margin-left: 1px; font-size: 15px; font-weight: 700;}
#section1 .hero_stats span {font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap;}

@media (max-width: 1300px) {
  #section1 .hero_band {padding-right: calc(400px + 32px + 290px);}
  #section1 .slide_visual {width: 280px;}
  #section1 .band_deco::before, #section1 .band_deco::after {right: calc(400px + 32px + 145px);}
  #section1 .hero_info {padding-left: 48px;}
  #section1 .hero_band {padding-left: 48px;}}

@media (max-width: 1200px) {
  #section1 .slide_title {font-size: 36px;}
  #section1 .hero_band {padding-right: calc(400px + 32px + 230px);}
  #section1 .slide_visual {width: 230px;}
  #section1 .band_deco::before, #section1 .band_deco::after {right: calc(400px + 32px + 115px);}}

@media (max-width: 1150px) {
  #section1 .hero_wrap {grid-template-columns: minmax(0, 1fr); grid-template-areas: "band" "form" "info"; padding: 88px 0 56px;}
  #section1 .form_wrap {grid-area: form; grid-column: auto; grid-row: auto; margin: -72px 24px 0; scroll-margin-top: 84px;}
  #section1 .hero_band {min-height: 0; padding: 44px 300px 112px 40px;}
  #section1 .slide_visual {right: 24px; bottom: 40px; width: 260px;}
  #section1 .band_deco::before, #section1 .band_deco::after {top: 40%; right: 150px;}
  #section1 .hero_info {gap: 20px; padding: 28px 24px 0;}
  #section1 .hero_steps_wrap {padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg);}
  #section1 .hero_steps {justify-content: space-between;}
  #section1 .hero_steps li:not(:last-child)::after {flex: 1; width: auto; min-width: 12px;}
  #section1 .hero_stats {justify-content: space-around;}
  #section1 .hero_stats li {align-items: center; flex: 1; text-align: center;}
  #section1 .hero_stats li:first-child {padding-left: 22px;}}

@media (max-width: 768px) {
  #section1 .hero_wrap {padding: 76px 0 40px;}
  #section1 .hero_band {padding: 30px 22px 96px; border-radius: 28px;}
  #section1 .hero_title {max-width: 62%; font-size: 14px;}
  #section1 .hero_slides {margin-top: 12px;}
  #section1 .slide_txt {max-width: 58%;}
  #section1 .slide_label {padding: 4px 10px; font-size: 12px;}
  #section1 .slide_title {margin-top: 10px; font-size: 25px; letter-spacing: -0.8px;}
  #section1 .slide_title small {margin-top: 4px; font-size: 13px;}
  #section1 .slide_chips {gap: 6px; margin-top: 16px;}
  #section1 .slide_chips li {height: 32px; padding: 0 12px 0 10px; font-size: 13px;}
  #section1 .slide_chips li + li {display: none;}
  #section1 .slide_visual {right: 4px; bottom: 30px; width: 190px;}
  #section1 .band_deco::before {width: 340px; height: 340px; right: 80px; top: 30%;}
  #section1 .band_deco::after {width: 230px; height: 230px; right: 80px; top: 30%;}
  #section1 .hero_ctrl {margin-top: 20px;}
  #section1 .form_wrap {margin: -64px 10px 0; padding: 24px 18px 20px; border-radius: 24px;}
  .form_wrap .form_head {margin-bottom: 16px;}
  .form_wrap .form_head h2 {font-size: 21px;}
  .form_wrap .form_ico {width: 52px; height: 52px;}
  #section1 .hero_info {padding: 20px 0 0;}
  #section1 .hero_steps_wrap {padding: 16px 14px;}
  #section1 .hero_steps_label {margin-bottom: 12px; font-size: 13px;}
  #section1 .hero_steps li, #section1 .hero_steps li:not(:last-child) {flex: 1; flex-direction: column; gap: 6px; position: relative;}
  #section1 .hero_steps li:not(:last-child)::after {position: absolute; top: 12px; left: calc(50% + 18px); right: calc(-50% + 18px); width: auto; margin: 0;}
  #section1 .hero_steps .txt {font-size: 12.5px;}
  #section1 .hero_stats li {padding: 0 8px !important;}
  #section1 .hero_stats strong {font-size: 20px;}
  #section1 .hero_stats span {font-size: 12px;}}

@media (max-width: 550px) {
  #section1 .slide_title {font-size: 22px;}
  #section1 .slide_txt {max-width: 60%;}
  #section1 .slide_visual {width: 140px;}}

@media (max-width: 360px) {
  #section1 .slide_title {font-size: 20px;}
  #section1 .hero_steps .txt {font-size: 11.5px;}
  #section1 .hero_stats strong {font-size: 18px;}
  #section1 .hero_stats span {font-size: 11.5px;}}

@media (prefers-reduced-motion: reduce) {
  #section1 .hero_slide, #section1 .slide_visual, #section1 .dot i {transition: none;}
  #section1 .dot.is_on i.run::after {animation: none; width: 100%;}}

/* ══════ 섹션 머리 — 알약 라벨 ══════ */
.title_wrap {max-width: 760px; margin: 0 0 56px;}
.title_wrap.is_center {margin: 0 auto 56px; text-align: center;}
.section_label {display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--main-soft); font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--main-text);}
#section2 .section_label, #section_point .section_label, #section_process .section_label, #section_guide .section_label {background: #fff;}
.title_wrap h2 {margin-top: 16px; font-size: 38px; font-weight: 800; line-height: 1.32; letter-spacing: -1.4px; color: var(--ink); word-break: keep-all;}
.title_wrap h2 b {color: var(--main-text);}
.title_wrap p {margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--body); word-break: keep-all;}


/* ── section_company: 한 줄 띠 + 겹친 보험사 원 ── */
#section_company .company_bar {display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 48px; border: 1px solid var(--line); border-radius: 40px;}
#section_company .company_txt h2 {margin-top: 12px; font-size: 26px; font-weight: 800; line-height: 1.4; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
#section_company .company_txt h2 b {color: var(--main-text);}
#section_company .company_txt p {margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--muted); word-break: keep-all;}
#section_company .company_grid {flex-shrink: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 10px;}
#section_company .company_grid li {display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border-radius: 999px; background: var(--bg);}
#section_company .co_logo {display: flex; align-items: baseline; gap: 1px; font-size: 18px; font-weight: 800; letter-spacing: -0.4px; line-height: 1; color: var(--ink); white-space: nowrap;}
#section_company .co_logo b {font-weight: 900; color: var(--co-color);}


/* ── section2: 그림이 위로 튀어나오는 카드 ── */
#section2 .why_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 48px;}
#section2 .why_card {position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 80px 32px 32px; border-radius: var(--r-xl); background: #fff;}
#section2 .why_ico {position: absolute; top: -52px; left: 26px; width: 116px; height: 116px;}
#section2 .why_num {position: absolute; top: 28px; right: 32px; font-size: 15px; font-weight: 800; color: #B0B8C1; font-variant-numeric: tabular-nums;}
#section2 h3 {font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -0.6px; color: var(--ink); word-break: keep-all;}
#section2 h3 b {color: var(--main-text);}
#section2 p {margin-top: 10px; font-size: 15.5px; line-height: 1.7; color: var(--body); word-break: keep-all;}
#section2 .more_link {margin-top: auto; padding-top: 22px;}


/* ── section3: 가운데 원을 둘러싼 보장 ── */
#section3 {overflow-x: clip;}
#section3 .cov_orbit {display: grid; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); align-items: center; gap: 0 64px;}
#section3 .cov_side {display: flex; flex-direction: column; gap: 18px;}
#section3 .cov_side li {--push: 0px; position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--bg);}
#section3 .cov_side li:nth-child(2) {--push: 36px;}
#section3 .cov_side.is_left li {flex-direction: row-reverse; text-align: right; transform: translateX(calc(var(--push) * -1));}
#section3 .cov_side.is_right li {transform: translateX(var(--push));}
/* 가운데 원으로 이어지는 점선 */
#section3 .cov_side li::after {content: ''; position: absolute; top: 50%; width: calc(64px + var(--push)); border-top: 1px dashed var(--main-line);}
#section3 .cov_side.is_left li::after {left: 100%;}
#section3 .cov_side.is_right li::after {right: 100%;}
#section3 .cov_ico {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; background: #fff;}
#section3 .cov_ico .ico3d {width: 52px; height: 52px;}
#section3 .cov_txt {min-width: 0;}
#section3 .tag {display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--main-tint); font-size: 12px; font-weight: 800; color: var(--main-text);}
#section3 .cov_side h3 {margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink);}
#section3 .cov_side p {margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--body); word-break: keep-all;}

#section3 .cov_center {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 1; padding-bottom: 56px; border-radius: 50%; background: var(--grad-strong); color: #fff; text-align: center; box-shadow: 0 0 0 16px var(--main-soft);}
#section3 .cov_center::before {content: ''; position: absolute; inset: -40px; border: 1px dashed var(--main-line); border-radius: 50%;}
#section3 .cov_center_img {position: absolute; top: -28px; left: 50%; width: 200px; height: 200px; object-fit: contain; transform: translateX(-50%);}
#section3 .cov_center_img.img_slot {border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12);}
#section3 .cov_center_img.img_slot::after {color: #fff;}
#section3 .cov_center strong {position: relative; font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -0.5px;}
#section3 .red_notice {margin-top: 48px; text-align: center;}


/* ── section_point: 띠 머리 카드 4장 + 가입 조건 ── */
#section_point .point_list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 20px;}
#section_point .point_list > li {display: flex; flex-direction: column; padding: 10px 10px 30px; border-radius: var(--r-xl); background: #fff;}
#section_point .point_head {position: relative; display: flex; align-items: center; height: 64px; margin-bottom: 22px; padding: 0 18px; border-radius: 999px; background: var(--main-soft);}
#section_point .point_no {font-size: 13px; font-weight: 800; letter-spacing: 0.8px; color: var(--main-text);}
#section_point .point_ico {position: absolute; right: 6px; bottom: 4px; width: 88px; height: 88px;}
#section_point .point_list h3 {padding: 0 18px; font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_point .point_list h3 b {color: var(--main-text);}
#section_point .point_list p {margin-top: 8px; padding: 0 18px; font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}

#section_point .join_wrap {margin-top: 56px; padding: 44px; border-radius: var(--r-xl); background: #fff;}
#section_point .join_head {display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px;}
#section_point .join_head h3 {font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
#section_point .join_head h3 b {color: var(--main-text);}
#section_point .join_head p {max-width: 480px; font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: right; word-break: keep-all;}

#section_point .join_band {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; border-radius: 28px; background: var(--main-soft);}
#section_point .join_band > div {padding: 18px 26px;}
#section_point .join_band > div + div {border-left: 1px solid var(--main-line);}
#section_point .join_band dt {font-size: 16px; font-weight: 800; color: var(--ink);}
#section_point .join_band dd {margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--body); word-break: keep-all;}

#section_point .join_band.is_question dt {color: var(--main-text);}
#section_point .join_note {margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--muted); word-break: keep-all;}
#section_point .join_sub {margin: 40px 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink);}
/* 두 칸이 붙은 캡슐 */
#section_point .join_capsule {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 32px;}
#section_point .join_capsule > li {padding: 30px 34px; background: var(--bg);}
#section_point .join_capsule > li:last-child {background: var(--main-color); color: var(--main-ink);}
#section_point .join_capsule strong {display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.4px;}
#section_point .join_lead {display: block; margin-top: 4px; font-size: 14px; font-weight: 600; opacity: 0.75;}
#section_point .join_capsule ul {margin-top: 16px;}
#section_point .join_capsule ul li {position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; word-break: keep-all;}
#section_point .join_capsule ul li + li {margin-top: 8px;}
#section_point .join_capsule ul li::before {content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--main-color) var(--ico-check) no-repeat center / 11px;}
#section_point .join_capsule > li:last-child ul li::before {background-color: rgba(255, 255, 255, 0.25);}
#section_point .join_wrap .red_notice {margin-top: 24px;}


/* ── section4: 세로선으로 나눈 체크 3칸 + 띠 CTA ── */
#section4 .check_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
#section4 .check_list li {display: flex; flex-direction: column; align-items: flex-start; padding: 4px 36px 8px;}
#section4 .check_list li:first-child {padding-left: 0;}
#section4 .check_list li + li {border-left: 1px solid var(--line);}
#section4 .check_mark {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--main-tint); color: var(--main-color);}
#section4 .check_mark svg {width: 22px; height: 22px;}
#section4 .check_no {margin-top: 18px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.8px; color: var(--muted);}
#section4 h3 {margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section4 .check_list p {margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}
#section4 .check_list .more_link {margin-top: 14px; font-size: 14.5px;}

#section4 .cta_band {position: relative; display: flex; align-items: center; gap: 32px; margin-top: 96px; min-height: 200px; padding: 40px 340px 40px 56px; border-radius: 40px; background: linear-gradient(115deg, var(--main-dark) 0%, var(--main-color) 58%, color-mix(in srgb, var(--main-color) 78%, #9FD9B5) 100%); color: #fff;}
#section4 .band_deco {position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;}
#section4 .band_deco::before {content: ''; position: absolute; top: 50%; right: 170px; width: 420px; height: 420px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; transform: translate(50%, -50%);}
#section4 .cta_txt {position: relative; z-index: 1; flex: 1; min-width: 0;}
#section4 .cta_title {font-size: 28px; font-weight: 800; line-height: 1.4; letter-spacing: -0.9px; word-break: keep-all;}
#section4 .cta_title b {color: color-mix(in srgb, var(--main-color) 25%, #fff);}
#section4 .cta_points {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;}
#section4 .cta_points li {display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;}
#section4 .cta_btn {position: relative; z-index: 2; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 60px; padding: 0 26px 0 30px; border: 0; border-radius: 999px; background: #fff; color: var(--main-text); font-size: 17px; font-weight: 800; letter-spacing: -0.3px; cursor: pointer; box-shadow: 0 14px 28px -14px rgba(10, 20, 60, 0.6); transition: transform 0.15s;}
#section4 .cta_btn svg {width: 18px; height: 18px; transition: transform 0.15s;}
#section4 .cta_btn:hover svg {transform: translateX(3px);}
#section4 .cta_btn:active {transform: scale(0.98);}
#section4 .cta_btn:focus-visible {outline: 3px solid #fff; outline-offset: 3px;}
/* 띠 위로 나오는 그림 */
#section4 .cta_visual {position: absolute; right: 48px; bottom: 0; z-index: 1; width: 260px; height: 290px; object-fit: contain; object-position: center bottom;}
#section4 .cta_visual.img_slot {aspect-ratio: auto; border-color: color-mix(in srgb, var(--main-color) 45%, #fff); background: color-mix(in srgb, var(--main-color) 18%, transparent);}
#section4 .cta_visual.img_slot::after {color: #fff;}


/* ── section_process: 진하기가 올라가는 진행 막대 ── */
#section_process .process_list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 76px;}
#section_process .process_list li {position: relative;}
#section_process .seg {display: block; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--main-color) 16%, #fff);}
#section_process li:nth-child(2) .seg {background: color-mix(in srgb, var(--main-color) 34%, #fff);}
#section_process li:nth-child(3) .seg {background: color-mix(in srgb, var(--main-color) 58%, #fff);}
#section_process li:last-child .seg {background: var(--main-color);}
#section_process .process_ico {position: absolute; top: -76px; right: 8px; width: 68px; height: 68px;}
#section_process .process_txt {padding: 24px 12px 0 4px;}
#section_process .step_no {font-size: 13px; font-weight: 800; letter-spacing: 0.8px; color: var(--main-text);}
#section_process h3 {margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_process p {margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section_process li:last-child h3 {color: var(--main-text);}


/* ── 자주 묻는 질문 — PC: 왼쪽 질문 / 오른쪽 답변 칸 ── */
#section_qna .qna_box {position: relative;}
#section_qna .qna_list {width: calc(46% - 20px);}
#section_qna .qna_item {border-bottom: 1px solid var(--line);}
#section_qna .qna_question {display: flex; align-items: center; gap: 14px; width: 100%; padding: 22px 8px; border: 0; background: none; text-align: left; cursor: pointer;}
#section_qna .qna_question:focus-visible {outline: 3px solid var(--main-line); outline-offset: -3px; border-radius: 12px;}
#section_qna .qna_num {flex-shrink: 0; width: 26px; font-size: 14px; font-weight: 800; color: #B0B8C1; font-variant-numeric: tabular-nums;}
#section_qna .qna_text {flex: 1; font-size: 17px; 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_icon {position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); transition: background 0.15s;}
#section_qna .qna_icon::before {content: ''; width: 7px; height: 7px; margin-left: -3px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.2s, border-color 0.15s;}
#section_qna .qna_question:hover .qna_text {color: var(--main-text);}
#section_qna .qna_item.active .qna_text {color: var(--main-text);}
#section_qna .qna_item.active .qna_num {color: var(--main-text);}
#section_qna .qna_item.active .qna_icon {background: var(--main-color);}
#section_qna .qna_item.active .qna_icon::before {border-color: #fff;}
#section_qna .qna_answer {display: none;}
#section_qna .qna_answer p {font-size: 16px; line-height: 1.75; color: var(--body); word-break: keep-all;}
#section_qna .qna_answer .more_link {margin-top: 16px; font-size: 14.5px;}

@media (min-width: 1151px) {
  #section_qna .qna_item.active .qna_answer {position: absolute; top: 0; right: 0; display: block; width: 54%; min-height: 100%; padding: 48px 52px; border-radius: var(--r-xl); background: var(--main-soft); animation: qna_open 0.3s ease;}
  #section_qna .qna_a_badge {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--main-color); font-size: 19px; font-weight: 800; color: var(--main-ink);}
  #section_qna .qna_answer .qna_a_q {margin: 20px 0 14px; font-size: 22px; font-weight: 800; line-height: 1.45; letter-spacing: -0.6px; color: var(--ink) !important; word-break: keep-all;}
  #section_qna .qna_answer p:not(.qna_a_q) {font-size: 16.5px; line-height: 1.8;}}
@keyframes qna_open {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: none;}}


/* ── section_guide: 그림이 위로 튀어나오는 타일 4칸 ── */
#section_guide .guide_list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 44px;}
#section_guide .guide_tile {position: relative; display: flex; flex-direction: column; height: 100%; padding: 72px 26px 26px; border-radius: var(--r-xl); background: #fff; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease;}
#section_guide .guide_ico {position: absolute; top: -44px; right: 18px; width: 104px; height: 104px;}
#section_guide .guide_tag {font-size: 13px; font-weight: 800; color: var(--main-text);}
#section_guide .guide_tile strong {margin-top: 8px; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_guide .guide_desc {margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); word-break: keep-all;}
#section_guide .guide_go {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: auto; border-radius: 50%; background: var(--main-soft); color: var(--main-color); transition: background 0.15s, color 0.15s;}
#section_guide .guide_desc + .guide_go {margin-top: 22px;}
#section_guide .guide_go svg {width: 18px; height: 18px;}
#section_guide .guide_tile:hover {transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(17, 33, 77, 0.35);}
#section_guide .guide_tile:hover .guide_go {background: var(--main-color); color: var(--main-ink);}
#section_guide .guide_tile:focus-visible {outline: 3px solid var(--main-line); outline-offset: 3px;}


/* ── 스크롤 등장 효과 — 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;}
#section3 .cov_side.is_left li.reveal.is_in {transform: translateX(calc(var(--push) * -1));}
#section3 .cov_side.is_right li.reveal.is_in {transform: translateX(var(--push));}


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

@media (max-width: 1300px) {
  .inner {width: 93%;}
  #section3 .cov_side li:nth-child(2) {--push: 20px;}}

@media (max-width: 1200px) {
  :root {--sec-pad: 104px;}
  #section3 .cov_orbit {grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); gap: 0 48px;}
  #section3 .cov_side li::after {width: calc(48px + var(--push));}
  #section3 .cov_side li:nth-child(2) {--push: 20px;}
  #section3 .cov_center_img {width: 160px; height: 160px;}
  #section3 .cov_center {padding-bottom: 44px;}
  #section3 .cov_center strong {font-size: 19px;}
  #section_point .point_list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px;}
  #section_guide .guide_list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 20px;}
  #section4 .cta_band {padding-right: 300px;}
  #section4 .cta_visual {width: 220px; height: 260px;}}

@media (max-width: 1150px) {
  :root {--sec-pad: 92px;}
  #section1 > .inner, #section_company > .inner,
  #section2 > .inner,
  #section3 > .inner, #section_point > .inner,
  #section4 > .inner,
  #section_process > .inner,
  #section_qna > .inner, #section_guide > .inner {width: min(720px, calc(100% - 32px));}

  #section_company .company_bar {flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px;}
  #section_company .company_grid {align-self: stretch; grid-template-columns: repeat(4, minmax(0, 1fr));}

  #section2 .why_list {grid-template-columns: minmax(0, 1fr); gap: 64px;}

  #section3 .cov_orbit {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
  #section3 .cov_center {grid-column: 1 / -1; order: -1; width: 240px; margin: 40px auto 64px;}
  #section3 .cov_center_img {top: -36px; width: 150px; height: 150px;}
  #section3 .cov_side li, #section3 .cov_side.is_left li {--push: 0px; flex-direction: row; text-align: left; transform: none;}
  #section3 .cov_side.is_left li.reveal.is_in, #section3 .cov_side.is_right li.reveal.is_in {transform: none;}
  #section3 .cov_side li::after {display: none;}
  #section3 .cov_orbit .cov_side li:nth-child(n) {--push: 0px;}
  #section3 .cov_side {gap: 16px;}
  #section3 .cov_side li {align-items: flex-start; padding: 20px;}
  #section3 .cov_ico {width: 56px; height: 56px;}
  #section3 .cov_ico .ico3d {width: 40px; height: 40px;}

  #section_point .join_head {display: block;}
  #section_point .join_head p {margin-top: 8px; text-align: left;}

  #section4 .check_list {grid-template-columns: minmax(0, 1fr);}
  #section4 .check_list li {display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding: 24px 0 !important;}
  #section4 .check_list li > :not(.check_mark) {grid-column: 2;}
  #section4 .check_mark {grid-row: 1 / span 4;}
  #section4 .check_no {margin-top: 0;}
  #section4 .check_list li + li {border-left: 0; border-top: 1px solid var(--line);}
  #section4 .cta_band {flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 88px; padding: 40px 240px 40px 40px;}
  #section4 .cta_visual {right: 24px; width: 200px; height: 250px;}

  #section_process .process_list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px 12px;}

  #section_qna .qna_list {width: 100%;}
  #section_qna .qna_a_badge, #section_qna .qna_a_q {display: none;}
  #section_qna .qna_icon::before {margin: -3px 0 0; transform: rotate(135deg);}
  #section_qna .qna_item.active .qna_icon::before {margin: 3px 0 0; transform: rotate(-45deg);}
  #section_qna .qna_item.active .qna_answer {display: block; padding: 0 8px 24px 48px; animation: qna_open 0.3s ease;}}

@media (max-width: 768px) {
  :root {--sec-pad: 80px;}
  .title_wrap {margin-bottom: 40px;}
  .title_wrap h2 {font-size: 29px; letter-spacing: -1px;}
  .title_wrap p {font-size: 16px;}

  #section_company .company_bar {padding: 26px 22px; border-radius: 28px;}
  #section_company .company_txt h2 {font-size: 21px;}
  #section_company .company_grid {gap: 8px;}
  #section_company .company_grid li {height: 46px; padding: 0 6px;}
  #section_company .co_logo {font-size: 15px;}

  #section2 .why_card {padding: 72px 24px 26px;}
  #section2 .why_ico {width: 100px; height: 100px; top: -46px;}

  #section3 .cov_orbit {grid-template-columns: minmax(0, 1fr);}
  #section3 .cov_center {width: 220px; padding-bottom: 40px;}
  #section3 .cov_center_img {top: -32px; width: 130px; height: 130px;}
  #section3 .cov_center strong {font-size: 18px;}

  #section_point .point_list {grid-template-columns: minmax(0, 1fr);}
  #section_point .join_wrap {padding: 30px 22px; border-radius: var(--r-lg);}
  #section_point .join_head h3 {font-size: 22px;}
  #section_point .join_band {grid-template-columns: minmax(0, 1fr); padding: 4px 8px; border-radius: 20px;}
  #section_point .join_band > div {padding: 16px 14px;}
  #section_point .join_band > div + div {border-left: 0; border-top: 1px solid var(--main-line);}
  #section_point .join_capsule {grid-template-columns: minmax(0, 1fr); border-radius: 24px;}
  #section_point .join_capsule > li {padding: 24px 22px;}

  #section4 .cta_band {padding: 34px 24px 30px; border-radius: 28px;}
  #section4 .cta_txt {max-width: 64%;}
  #section4 .cta_title {font-size: 22px;}
  #section4 .cta_btn {width: 100%; justify-content: center; height: 56px;}
  #section4 .cta_visual {top: -44px; right: 12px; bottom: auto; width: 140px; height: 180px;}

  #section_qna .qna_question {padding: 18px 4px;}
  #section_qna .qna_text {font-size: 16px;}
  #section_qna .qna_answer p {font-size: 15px;}
  #section_qna .qna_item.active .qna_answer {padding: 0 4px 22px 44px;}}

@media (max-width: 550px) {
  :root {--sec-pad: 64px;}
  #section1 > .inner, #section_company > .inner,
  #section2 > .inner,
  #section3 > .inner, #section_point > .inner,
  #section4 > .inner,
  #section_process > .inner,
  #section_qna > .inner, #section_guide > .inner {width: calc(100% - 28px);}

  .red_notice {margin-top: 16px; font-size: 13px;}

  .form_wrap .form_fields {gap: 12px 8px;}
  .form_wrap .field > label, .form_wrap .field_label {margin-bottom: 5px; font-size: 13.5px;}
  .form_wrap input[type='text'], .form_wrap .phone_select, .form_wrap .region_select, .form_wrap .select_btn {padding: 0 12px;}
  .form_wrap .phone_select, .form_wrap .region_select {padding-right: 30px; background-position: right 10px center;}
  .form_wrap .phone_input_wrap {grid-template-columns: 88px minmax(0, 1fr);}
  .form_wrap .submit_btn {height: 56px; margin-top: 16px; font-size: 17px;}
  .form_wrap .form_privacy {font-size: 12.5px;}

  .title_wrap {margin-bottom: 32px;}
  .section_label {font-size: 12px;}
  .title_wrap h2 {margin-top: 12px; font-size: 25px; letter-spacing: -0.8px;}
  .title_wrap p {margin-top: 12px; font-size: 15px;}

  #section_company .company_grid {gap: 6px;}
  #section_company .company_grid li {height: 42px; padding: 0 2px;}
  #section_company .co_logo {font-size: 13px; letter-spacing: -0.6px;}

  #section2 h3 {font-size: 20px;}
  #section2 p {font-size: 15px;}
  #section3 .cov_side h3 {font-size: 17px;}
  #section3 .cov_side p {font-size: 14px;}

  #section_point .point_list h3 {font-size: 18px;}
  #section_point .point_list p {font-size: 14.5px;}

  #section4 h3 {font-size: 18px;}
  #section4 .check_list li {grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px;}
  #section4 .check_mark {width: 40px; height: 40px;}
  #section4 .check_list p {font-size: 14.5px;}
  #section4 .cta_title {font-size: 20px;}
  #section4 .cta_txt {max-width: 66%;}
  #section4 .cta_visual {width: 110px; height: 150px; top: -32px;}

  #section_process .process_list {grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 0;}
  #section_process .process_list li {display: grid; grid-template-columns: 10px minmax(0, 1fr) 56px; column-gap: 16px; align-items: center; padding: 6px 0;}
  #section_process .seg {align-self: stretch; height: auto; min-height: 88px;}
  #section_process .process_ico {position: static; width: 56px; height: 56px;}
  #section_process .process_txt {padding: 6px 0;}
  #section_process h3 {margin-top: 4px; font-size: 18px;}
  #section_process p {font-size: 14.5px;}

  #section_qna .qna_text {font-size: 15.5px;}
  #section_qna .qna_item.active .qna_answer {padding-left: 4px;}

  #section_guide .guide_list {grid-template-columns: minmax(0, 1fr); gap: 52px;}
  #section_guide .guide_tile {padding: 30px 110px 24px 24px;}
  #section_guide .guide_ico {top: -30px; right: 14px; width: 88px; height: 88px;}
  #section_guide .guide_tile strong {font-size: 18px;}}

@media (max-width: 360px) {
  .form_wrap .form_fields {grid-template-columns: minmax(0, 1fr);}
  .form_wrap .phone_input_wrap {grid-template-columns: 82px minmax(0, 1fr);}
  #section4 .cta_txt {max-width: 100%;}
  #section4 .cta_visual {display: none;}}

@media (hover: none) {
  .more_link:hover svg {transform: none;}
  .form_wrap .submit_btn:hover {background: var(--main-color);}
  .form_wrap .submit_btn:hover svg {transform: none;}
  #section4 .cta_btn:hover svg {transform: none;}
  #section_qna .qna_question:hover .qna_text {color: var(--ink);}
  #section_qna .qna_item.active .qna_question:hover .qna_text {color: var(--main-text);}
  #section_guide .guide_tile:hover {transform: none; box-shadow: none;}
  #section_guide .guide_tile:hover .guide_go {background: var(--main-soft); color: var(--main-color);}}

@media (prefers-reduced-motion: reduce) {
  .more_link svg, #section4 .cta_btn, #section4 .cta_btn svg, #section_guide .guide_tile, #section_guide .guide_go,
  .form_wrap .submit_btn, .form_wrap .submit_btn svg, .form_wrap .gender_wrap label,
  .form_wrap input[type='text'], .form_wrap .phone_select, .form_wrap .region_select, .form_wrap .select_btn,
  #section_qna .qna_icon, #section_qna .qna_icon::before {transition: none;}
  .form_wrap .select_wrap.open .select_list, #section_qna .qna_item.active .qna_answer {animation: none;}
  .reveal {opacity: 1; transform: none; transition: none;}}


/* ── 신청 유도 플로팅 버튼 (모바일 전용) ── */
.to_top {
  position: fixed; left: 50%; bottom: 24px; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 30px;
  border: 0; border-radius: 999px;
  background: var(--main-color); color: var(--main-ink);
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--main-color) 35%, transparent);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 24px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s ease, background 0.15s;
}
.to_top.show {opacity: 1; visibility: visible; transform: translate(-50%, 0);}
.to_top:hover {background: var(--main-dark);}
.to_top svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}

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

/* 신청 유도 플로팅 버튼 — 모바일(768px 이하)에서만 보인다 */
@media (min-width: 769px) {
  .to_top {display: none;}}

@media (max-width: 550px) {
  .to_top {left: 16px; right: 16px; bottom: 12px; height: 56px; transform: translateY(24px);}
  .to_top.show {transform: translateY(0);}}
@media (hover: none) {
  .to_top:hover {background: var(--main-color);}
  .to_top.on_dark:hover {background: #fff;}}
@media (prefers-reduced-motion: reduce) {
  .to_top {transition: 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: 12px; 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;}}