:root {
  --main-color: #0F9B8E;  
  --main-dark: #0B7F74;          /* 메인 hover / 눌림 */
  --main-ink: #fff;              /* 메인컬러 바탕 위 글씨색 (sub.css 도 사용) */
  --main-text: var(--main-color);/* 흰 바탕 위 메인컬러 강조 글씨색 (sub.css 도 사용) */
  --point-color: var(--main-color);
  --main-soft: color-mix(in srgb, var(--main-color) 9%, #fff);    /* 태그 · 선택된 칸 바탕 */
  --main-tint: color-mix(in srgb, var(--main-color) 18%, #fff);   /* 제목 강조 칩 */

  --ink: #191F28;                /* 제목 */
  --body: #4E5968;               /* 본문 */
  --muted: #8B95A1;              /* 보조 글씨 */
  --line: #E5E8EB;               /* 구분선 */
  --bg: #F2F4F6;                 /* 회색 바탕 · 입력칸 */
  --error: #F04452;

  --r-lg: 28px;                  /* 큰 카드 */
  --r-md: 20px;                  /* 보통 카드 */
  --r-sm: 14px;                  /* 입력칸 · 버튼 */

  --wrap: 1140px;
  --aside-w: 440px;
  --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(--point-color);}
/* 광고 심의 빨간 문구 — 순수 red 는 흰 바탕 대비가 부족해 조금 진하게 */
.c_red {color: #D7261E !important;}
/* 빨간 안내 문구 — 상자·배경 없이 글자만 (디자인을 해치지 않게). 섹션이 가운데 정렬이라 문구도 가운데 */
.red_notice {max-width: 880px; margin: 24px auto 0; text-align: center;}
.red_notice p {font-size: 14px; line-height: 1.6; word-break: keep-all;}
.red_notice p + p {margin-top: 2px;}
@media (max-width: 550px) {
  .red_notice p {font-size: 13px;}}

#section1 > .inner,
#section2 > .inner,
#section3 > .inner, #section_point > .inner, #section_simple > .inner,
#section_company > .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(회) → point(흰) → section4(회) → simple(연한 메인) → process(흰) → qna(회) → guide(흰) */
#section2, #section3, #section_point, #section_simple, #section_company, #section4, #section_process, #section_qna, #section_guide {padding: var(--sec-pad) 0;}
#section2, #section_point, #section_company, #section_process, #section_guide {background: #fff;}
#section3, #section4, #section_qna {background: var(--bg);}
#section_simple {background: var(--main-soft);}


/* ══════ #section1 ══════ */
#section1 {background: var(--bg);}

#section1 .content_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  align-items: center;
  gap: 48px 64px;
  padding: 80px 0 72px;
}


/* ── 히어로 ── */
#section1 .hero_main {position: relative; min-width: 0;}

/* 히어로 일러스트 */
#section1 .hero_imgs {position: absolute; right: -16px; bottom: -36px; width: 214px; height: 320px; pointer-events: none;}
#section1 .hero_img {position: absolute; right: 0; bottom: 0; width: auto; height: 100%; opacity: 0; transition: opacity 0.3s ease;}
#section1 .hero_img.active {opacity: 1; transition: opacity 0.45s ease 0.3s;}
#section1 .hero_slides, #section1 .hero_ctrl {position: relative; z-index: 1;}

/* 슬라이드는 같은 칸에 겹쳐 두고 active 만 보인다 */
#section1 .hero_slides {display: grid;}
#section1 .hero_slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
#section1 .hero_slide.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.3s, transform 0.45s ease 0.3s, visibility 0s linear 0.3s;
}

#section1 .hero_label {display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--main-color); font-size: 14px; font-weight: 700; line-height: 1.3;}
#section1 .hero_label::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;}

/* 제목 — <b> 메인컬러 / <em> 연한 메인컬러 칩 */
#section1 .hero_title {margin-top: 22px; font-size: 52px; font-weight: 800; line-height: 1.28; 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 {padding: 0 8px; border-radius: 12px; background: var(--main-tint); font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;}

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

/* 혜택 — 체크 칩 */
#section1 .hero_benefit {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 36px;}
#section1 .hero_benefit li {display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); word-break: keep-all;}
#section1 .hero_benefit li::before {content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--main-color) var(--ico-check) no-repeat center / 12px;}
#section1 .hero_benefit li small {font-size: 0.8em; color: var(--body);}

/* 슬라이드 표시 */
#section1 .hero_ctrl {display: flex; align-items: center; gap: 6px; margin-top: 40px;}
#section1 .hero_dot {width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #CDD3DA; cursor: pointer; transition: width 0.3s ease, background 0.3s ease;}
#section1 .hero_dot.active {width: 28px; background: var(--main-color);}
#section1 .hero_pause {position: relative; width: 28px; height: 28px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer;}
#section1 .hero_pause::before,
#section1 .hero_pause::after {content: ''; position: absolute; top: 9px; width: 3px; height: 10px; border-radius: 2px; background: var(--ink);}
#section1 .hero_pause::before {left: 10px;}
#section1 .hero_pause::after {right: 10px;}
#section1 .hero_pause.paused::before {left: 11px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5px 0 5px 8px; 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 {
  position: relative;
  min-width: 0;
  padding: 36px 32px 26px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 24px 60px rgba(25, 31, 40, 0.08);
}
#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 .form_list {display: flex; flex-direction: column; gap: 18px; margin-top: 26px;}

/* 이름 · 생년월일 */
.form_wrap .field_row {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.form_wrap .field_row > div {min-width: 0;}

.form_wrap li > label,
.form_wrap .field_row label,
.form_wrap .field_label {display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--body);}

.form_wrap input[type='text'],
.form_wrap .phone_select {
  width: 100%; height: 58px; padding: 0 18px;
  border: 0; border-radius: var(--r-sm); background: var(--bg);
  box-shadow: inset 0 0 0 2px transparent;
  font-size: 17px; font-weight: 600; color: var(--ink);
  transition: background 0.15s, box-shadow 0.15s;
}
.form_wrap input[type='text']::placeholder {font-weight: 500; color: #B0B8C1;}
.form_wrap input[type='text']:focus,
.form_wrap .phone_select:focus {outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--main-color);}

/* 성별 */
.form_wrap .gender_wrap {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.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; height: 58px; margin: 0; border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 2px transparent; font-size: 17px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s;}
.form_wrap .gender_wrap input[type='radio']:checked + label {background: var(--main-soft); box-shadow: inset 0 0 0 2px var(--main-color); color: var(--main-color); font-weight: 700;}
.form_wrap .gender_wrap input[type='radio']:focus-visible + label {outline: 2px solid var(--main-color); outline-offset: 2px;}

/* 성별 | 지역 한 줄 — 지역은 입력칸과 같은 모양, 화살표는 오른쪽 */
.form_wrap .select_wrap {position: relative;}
.form_wrap .region_select {
  width: 100%; height: 58px; padding: 0 44px 0 18px;
  border: 0; border-radius: var(--r-sm); background: var(--bg);
  box-shadow: inset 0 0 0 2px transparent;
  font-size: 17px; font-weight: 600; color: var(--ink);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.form_wrap .region_select:focus {outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--main-color);}
.form_wrap .region_select:has(option[value='']:checked) {font-weight: 500; color: #B0B8C1;}
.form_wrap .region_select option {font-weight: 500; color: var(--ink);}
.form_wrap .select_wrap::after {content: ""; position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; background: url("../img/arrow_down.svg") no-repeat center / 20px; transform: translateY(-50%); transition: transform .2s; pointer-events: none;}
.form_wrap .select_wrap:has(.region_select:focus)::after,
.form_wrap .select_wrap.open::after {transform: translateY(-50%) rotate(180deg);}

/* 지역 목록 — PC(마우스)에서만 index.php 스크립트가 .is_custom 을 붙이고 직접 만든 목록을 보여 준다.
   기본 select 의 펼침 목록은 높이를 정할 수 없어서다. 모바일은 기본 선택창 그대로. */
.form_wrap .select_wrap.is_custom .region_select {position: absolute; inset: 0; opacity: 0; pointer-events: none;}
.form_wrap .select_btn {
  display: block; width: 100%; height: 58px; padding: 0 44px 0 18px;
  border: 0; border-radius: var(--r-sm); background: var(--bg);
  box-shadow: inset 0 0 0 2px transparent;
  font-size: 17px; font-weight: 600; color: var(--ink); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.form_wrap .select_btn.is_placeholder {font-weight: 500; color: #B0B8C1;}
.form_wrap .select_btn:focus-visible,
.form_wrap .select_wrap.open .select_btn {outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--main-color);}
.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 44px rgba(25, 31, 40, 0.14), 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;}
.form_wrap .select_list li {padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--body); cursor: pointer;}
.form_wrap .select_list li.is_active {background: var(--bg); color: var(--ink);}
.form_wrap .select_list li[aria-selected='true'] {background: var(--main-soft); color: var(--main-color); font-weight: 700;}

/* 연락처 */
.form_wrap .phone_input_wrap {position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px;}
.form_wrap .phone_input_wrap::after {content: ""; position: absolute; top: 50%; left: 78px; width: 20px; height: 20px; background: url("../img/arrow_down.svg") no-repeat center / 20px; transform: translateY(-50%); transition: transform .2s; pointer-events: none;}
.form_wrap .phone_input_wrap:has(.phone_select:focus)::after {transform: translateY(-50%) rotate(180deg);}

/* 신청 버튼 */
.form_wrap .submit_btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 62px; margin-top: 26px;
  border: 0; border-radius: 16px; background: var(--main-color); color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.form_wrap .submit_btn:hover {background: var(--main-dark);}
.form_wrap .submit_btn:active {transform: scale(0.98);}

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

/* 신청부터 가입까지 — 폼 카드 아래쪽에 작게 (폼보다 눈에 띄지 않게) */
#section1 .hero_steps {margin-top: 20px; padding-top: 18px; border-top: 1px dashed #D1D6DB;}
#section1 .hero_steps_label {font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center;}
#section1 .hero_steps ol {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px;}
#section1 .hero_steps li {position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink); text-align: center; word-break: keep-all;}
#section1 .hero_steps li:not(:first-child)::before {content: ''; position: absolute; top: 12px; right: calc(50% + 15px); width: calc(100% - 30px); border-top: 2px dotted color-mix(in srgb, var(--main-color) 35%, #fff);}
#section1 .hero_steps .num {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--main-soft); font-size: 12px; font-weight: 800; color: var(--main-color);}
#section1 .hero_steps li:last-child .num {background: var(--main-color); color: #fff;}


/* ── 지표 카드 ── */
#section1 .hero_stats {grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;}
#section1 .hero_stats li {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 30px; border-radius: var(--r-md); background: #fff;}
#section1 .hero_stats strong {order: 2; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--main-color);}
#section1 .hero_stats strong small {margin-left: 2px; font-size: 17px; font-weight: 700; letter-spacing: 0;}
#section1 .hero_stats span {font-size: 16px; font-weight: 600; color: var(--body);}


/* ══════ 섹션 머리 (가운데 정렬) ══════ */
.title_wrap {max-width: 760px; margin: 0 auto 56px; text-align: center;}
.title_wrap .section_label {display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--main-soft); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--main-color);}
#section3 .title_wrap .section_label,
#section_simple .title_wrap .section_label,
#section4 .title_wrap .section_label,
#section_qna .title_wrap .section_label {background: #fff;}
.title_wrap h2 {margin-top: 18px; font-size: 40px; font-weight: 800; line-height: 1.32; letter-spacing: -1.5px; color: var(--ink); word-break: keep-all;}
.title_wrap h2 b {color: var(--main-color);}
.title_wrap p {margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--body); word-break: keep-all;}

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


/* ── section2 ── */
#section2 .why_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#section2 .why_list li {padding: 36px 32px 40px; border-radius: var(--r-lg); background: var(--bg);}
#section2 .icon {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: var(--r-md); background: #fff; font-size: 32px; line-height: 1;}
#section2 .icon img {width: 40px; height: 40px; object-fit: contain;}
#section2 h3 {margin-bottom: 10px; font-size: 21px; 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 {font-weight: 700; color: var(--ink);}
#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); gap: 16px;}
#section3 .coverage_list li {padding: 32px 30px 36px; border-radius: var(--r-lg); background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease;}
#section3 .coverage_list li:hover {transform: translateY(-4px); box-shadow: 0 16px 40px rgba(25, 31, 40, 0.07);}
#section3 .coverage_list li:first-child {grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; background: var(--main-color);}
#section3 .tag {display: inline-block; margin-bottom: 18px; padding: 5px 11px; border-radius: 999px; background: var(--main-soft); font-size: 12px; font-weight: 700; color: var(--main-color);}
#section3 .tag.option {background: var(--bg); color: var(--body);}
#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;}
#section3 .coverage_list li:first-child .tag {align-self: flex-start; background: rgba(255, 255, 255, 0.2); color: #fff;}
#section3 .coverage_list li:first-child h3 {font-size: 30px; color: #fff;}
#section3 .coverage_list li:first-child p {max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, 0.85);}
/* 대표 보장 일러스트 — 카드 오른쪽 아래에 붙인다. 글은 그림 폭만큼 비켜 둔다 */
#section3 .coverage_list li:first-child {position: relative; overflow: hidden; padding-right: 330px;}
#section3 .coverage_img {position: absolute; right: 16px; bottom: 0; width: 300px; height: auto; pointer-events: none;}


/* ── section_point ── */
#section_point .point_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}   /* 카드 3개 — 한 줄에 셋 */
#section_point .point_list li {position: relative; overflow: hidden; padding: 36px 34px 40px; border-radius: var(--r-lg); background: var(--bg);}
#section_point .point_list li::after {content: attr(data-num); position: absolute; right: 22px; bottom: -22px; font-size: 128px; font-weight: 800; line-height: 1; letter-spacing: -4px; color: var(--main-color); opacity: 0.07; pointer-events: none;}
#section_point .point_list li > * {position: relative; z-index: 1;}
#section_point .point_num {display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--main-color);}
#section_point .point_list h3 {margin: 18px 0 10px; font-size: 25px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
#section_point .point_list h3 b {color: var(--main-color);}
#section_point .point_list p {font-size: 16px; line-height: 1.7; color: var(--body); word-break: keep-all;}


/* ── section_simple ── */
#section_simple .simple_box {max-width: 880px; margin: 0 auto; padding: 40px 44px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 20px 50px color-mix(in srgb, var(--main-color) 12%, transparent);}
#section_simple .simple_list {display: flex; flex-direction: column; gap: 12px;}
#section_simple .simple_list li {display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-md); background: var(--bg);}
#section_simple .q_num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--main-color); font-size: 15px; font-weight: 800; color: #fff;}
#section_simple .simple_list p {font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--ink); word-break: keep-all;}
#section_simple .simple_list p small {display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--muted);}
#section_simple .simple_result {display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 1px dashed #D1D6DB;}
#section_simple .simple_result p {font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.4px; color: var(--ink); word-break: keep-all;}
#section_simple .simple_result p b {color: var(--main-color);}
#section_simple .simple_result button {flex-shrink: 0; height: 58px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--main-color); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s;}
#section_simple .simple_result button:hover {background: var(--main-dark);}
#section_simple .simple_result button:active {transform: scale(0.98);}


#section_simple .notice {margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; word-break: keep-all;}


/* 새로 넣은 섹션들 반응형 */
@media (max-width: 1150px) {
  #section_point .point_list {grid-template-columns: minmax(0, 1fr); gap: 12px;}}
@media (max-width: 768px) {
  #section_simple .simple_result {flex-direction: column; align-items: stretch; text-align: center;}}
@media (max-width: 550px) {
  #section_point .point_list li {padding: 24px 20px 28px; border-radius: var(--r-md);}
  #section_point .point_list li::after {right: 14px; bottom: -14px; font-size: 88px;}
  #section_point .point_list h3 {margin-top: 14px; font-size: 21px;}
  #section_point .point_list p {font-size: 15px;}

  #section_simple .simple_box {padding: 22px 16px; border-radius: 24px;}
  #section_simple .simple_list li {align-items: flex-start; gap: 12px; padding: 16px;}
  #section_simple .q_num {width: 34px; height: 34px; font-size: 13px;}
  #section_simple .simple_list p {font-size: 15px;}
  #section_simple .simple_list p small {font-size: 13px;}
  #section_simple .simple_result {gap: 16px; margin-top: 22px; padding-top: 22px;}
  #section_simple .simple_result p {font-size: 17px;}
  #section_simple .simple_result button {height: 54px;}

  #section_simple .notice {font-size: 13px;}}
@media (hover: none) {
  #section_simple .simple_result button:hover {background: var(--main-color);}}


/* ── section_company ── */
#section_company .company_marquee {display: flex; flex-direction: column; gap: 12px;}
#section_company .marquee_row {overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
#section_company .marquee_track {display: flex; width: max-content; animation: marquee 36s linear infinite;}
#section_company .marquee_row.reverse .marquee_track {animation-direction: reverse;}
/* hover시 멈춤 */
/* #section_company .company_marquee:hover .marquee_track {animation-play-state: paused;} */
@keyframes marquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}

#section_company .company_list {display: flex; gap: 12px; padding-right: 12px;}
#section_company .company_list li {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 200px; height: 88px; padding: 0 24px; border-radius: var(--r-md); background: var(--bg);}
#section_company .company_list img {display: block; max-width: 140px; max-height: 40px; width: auto; height: auto; object-fit: contain;}

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

/* 안내 + 상담 버튼 */
#section_company .company_foot {display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; text-align: center;}
#section_company .company_foot p {font-size: 14px; line-height: 1.6; color: var(--muted); word-break: keep-all;}
#section_company .company_foot button {display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 36px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s;}
#section_company .company_foot button:hover {background: var(--main-color);}
#section_company .company_foot button:active {transform: scale(0.98);}


/* ── section4 ── */
#section4 .checklist {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}   /* 확인사항 3개 — 한 줄에 셋 */
#section4 .checklist li {display: flex; gap: 18px; padding: 30px 30px 32px; border-radius: var(--r-lg); background: #fff;}
#section4 .num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--main-soft); font-size: 15px; font-weight: 800; color: var(--main-color);}
#section4 h3 {margin: 9px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section4 .txt p {font-size: 15.5px; line-height: 1.7; color: var(--body); word-break: keep-all;}

/* 중간 CTA */
#section4 .cta_box {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 96px; padding: 44px 52px 44px 330px; border-radius: var(--r-lg); background: var(--main-color);}
/* 간병 일러스트 */
#section4 .cta_img {position: absolute; left: 36px; bottom: 0; width: 270px; height: auto; pointer-events: none;}
#section4 .cta_box p {font-size: 27px; font-weight: 800; line-height: 1.4; letter-spacing: -1px; color: #fff; word-break: keep-all;}
#section4 .cta_box button {flex-shrink: 0; height: 62px; padding: 0 40px; border: 0; border-radius: 999px; background: #fff; color: var(--main-color); font-size: 17px; font-weight: 800; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;}
#section4 .cta_box button:hover {transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);}


/* ── section_process ── */
#section_process .process_list {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
#section_process .process_list::before,
#section_process .process_list::after {content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 999px;}
#section_process .process_list::before {background: var(--line);}
#section_process .process_list::after {background: var(--main-color); transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease 0.3s;}
#section_process .process_list.is_in::after {transform: scaleX(1);}

#section_process .process_list li {position: relative; z-index: 1; text-align: center;}
#section_process .step {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto; border: 4px solid var(--line); border-radius: 50%; background: #fff; font-size: 22px; font-weight: 800; color: var(--muted); transition: border-color 0.3s, color 0.3s, background 0.3s;}
#section_process .process_list.is_in li .step {border-color: var(--main-color); color: var(--main-color);}
#section_process .process_list.is_in li:nth-child(1) .step {transition-delay: 0.3s;}
#section_process .process_list.is_in li:nth-child(2) .step {transition-delay: 0.75s;}
#section_process .process_list.is_in li:nth-child(3) .step {transition-delay: 1.2s;}
#section_process .process_list.is_in li:nth-child(4) .step {transition-delay: 1.65s;}
#section_process .process_list.is_in li:last-child .step {background: var(--main-color); color: #fff;}

#section_process .txt {margin-top: 24px; padding: 26px 22px 28px; border-radius: var(--r-md); background: var(--bg);}
#section_process h3 {margin-bottom: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_process p {font-size: 15px; line-height: 1.65; color: var(--body); word-break: keep-all;}


/* ── 자주 묻는 질문 ── */
#section_qna .qna_list {display: flex; flex-direction: column; gap: 12px; max-width: 880px; margin: 0 auto;}
#section_qna .qna_item {border-radius: var(--r-md); background: #fff;}
#section_qna .qna_question {display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 28px; 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: 36px; height: 36px; border-radius: 50%; background: var(--bg); font-size: 15px; font-weight: 800; color: var(--muted); transition: background 0.15s, color 0.15s;}
#section_qna .qna_text {flex: 1; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; color: var(--ink); word-break: keep-all;}
#section_qna .qna_arrow {position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); transition: background 0.15s, transform 0.25s;}
#section_qna .qna_arrow::before {content: ''; position: absolute; top: 10px; left: 11px; width: 8px; height: 8px; border-right: 2px solid var(--body); border-bottom: 2px solid var(--body); transform: rotate(45deg);}
#section_qna .qna_question:hover .qna_num {background: var(--main-soft); color: var(--main-color);}

#section_qna .qna_answer {display: none; gap: 12px; padding: 0 28px 28px;}
#section_qna .qna_a {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--main-color); font-size: 15px; font-weight: 800; color: #fff;}
#section_qna .qna_bubble {flex: 1; min-width: 0; padding: 18px 22px; border-radius: 4px 20px 20px 20px; background: var(--main-soft);}
#section_qna .qna_bubble p {font-size: 16px; line-height: 1.75; color: var(--ink); word-break: keep-all;}

#section_qna .qna_item.active .qna_num {background: var(--ink); color: #fff;}
#section_qna .qna_item.active .qna_arrow {background: var(--ink); transform: rotate(180deg);}
#section_qna .qna_item.active .qna_arrow::before {border-color: #fff;}
#section_qna .qna_item.active .qna_answer {display: flex; animation: qna_open 0.3s ease;}
@keyframes qna_open {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: translateY(0);}}


/* ── 서브페이지로 가는 '자세히 보기' 링크 ── */
.more_link {display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--main-color); word-break: keep-all;}
.more_link::after,
#section4 .check_link::after,
#section_qna .qna_more::after {content: '›'; font-size: 1.3em; line-height: 1; transition: transform 0.15s;}
.more_link:hover::after,
#section4 .check_link:hover::after,
#section_qna .qna_more:hover::after {transform: translateX(3px);}
#section4 .check_link {display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--bg); font-size: 14px; font-weight: 700; color: var(--body); word-break: keep-all;}
#section_qna .qna_more {display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--main-color);}


/* 섹션 아래 가운데 '자세히 보기' 링크 */
.sec_more {margin-top: 28px; text-align: center;}
.sec_more .more_link {margin-top: 0;}


/* ── section_guide ── */
#section_guide .guide_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
#section_guide .guide_card {display: flex; color: inherit; text-decoration: none; flex-direction: column; height: 100%; padding: 28px 26px 26px; border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 2px transparent; transition: background 0.15s, box-shadow 0.15s, transform 0.2s;}
#section_guide .guide_card:hover {background: #fff; box-shadow: inset 0 0 0 2px var(--main-color); transform: translateY(-4px);}
#section_guide .guide_card:focus-visible {outline: 2px solid var(--main-color); outline-offset: 3px;}
#section_guide .guide_tag {align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--main-color);}
#section_guide .guide_card strong {display: block; margin: 16px 0 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_card p {flex: 1; font-size: 15px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section_guide .guide_go {display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--main-color);}
#section_guide .guide_go::after {content: '→'; transition: transform 0.15s;}
#section_guide .guide_card:hover .guide_go::after {transform: translateX(4px);}

@media (max-width: 1150px) {
  #section_guide .guide_list {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 550px) {
  #section_guide .guide_list {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  #section_guide .guide_card {padding: 22px 20px; border-radius: var(--r-md);}
  #section_guide .guide_card strong {margin-top: 12px; font-size: 17px;}
  #section_guide .guide_card p {font-size: 14.5px;}
  #section_guide .guide_go {margin-top: 14px; font-size: 14px;}}
@media (hover: none) {
  #section_guide .guide_card:hover {background: var(--bg); box-shadow: inset 0 0 0 2px transparent; transform: none;}
  #section_guide .guide_card:hover .guide_go::after {transform: none;}}
@media (prefers-reduced-motion: reduce) {
  #section_guide .guide_card {transition: none;}}


/* ── 스크롤 등장 효과 — 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%;}}

@media (max-width: 1200px) {
  :root {--sec-pad: 104px; --aside-w: 400px;}
  #section1 .content_wrap {gap: 40px;}
  #section1 .hero_title {font-size: 44px;}
  #section1 .form_wrap {padding: 32px 28px 24px;}}

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

  #section1 .content_wrap {grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 56px;}
  #section1 .hero_imgs {right: 0; bottom: -8px; width: 200px; height: 300px;}
  /* 버튼으로 폼에 올 때 모바일 고정 헤더에 가리지 않게 */
  #section1 .form_wrap {scroll-margin-top: 84px;}

  #section2 .why_list {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  #section2 .why_list li {display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; padding: 28px;}
  #section2 .icon {grid-row: span 2; margin: 0;}

  #section3 .coverage_list {grid-template-columns: repeat(2, 1fr);}
  #section3 .coverage_list li:first-child {padding-right: 250px;}
  #section3 .coverage_img {width: 230px;}

  #section4 .checklist {grid-template-columns: minmax(0, 1fr);}

  /* CTA 띠 */
  #section4 .cta_box {flex-direction: column; align-items: stretch; margin-top: 120px; padding: 0 28px 36px;}
  #section4 .cta_img {position: static; align-self: center; width: 220px; margin: -110px 0 -8px;}
  #section4 .cta_box p {text-align: center;}}

@media (max-width: 768px) {
  :root {--sec-pad: 80px;}
  #section1 .hero_title {font-size: 36px; letter-spacing: -1.4px;}
  #section1 .hero_note {font-size: 16px;}
  #section1 .hero_benefit {margin-top: 28px;}
  #section1 .hero_benefit li {font-size: 15px;}
  #section1 .hero_ctrl {margin-top: 28px;}
  #section1 .hero_stats li {flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding: 20px;}
  #section1 .hero_stats strong {font-size: 28px;}
  #section1 .hero_stats span {font-size: 14px;}

  .title_wrap {margin-bottom: 40px;}
  .title_wrap h2 {font-size: 30px; letter-spacing: -1px;}
  .title_wrap p {font-size: 16px;}

  #section4 .cta_box p {font-size: 23px;}

  /* 진행 순서 — 세로 타임라인 */
  #section_process .process_list {grid-template-columns: minmax(0, 1fr); gap: 16px;}
  #section_process .process_list::before,
  #section_process .process_list::after {top: 32px; bottom: 32px; left: 30px; right: auto; width: 4px; height: auto;}
  #section_process .process_list::after {transform: scaleY(0); transform-origin: top;}
  #section_process .process_list.is_in::after {transform: scaleY(1);}
  #section_process .process_list li {display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 16px; text-align: left;}
  #section_process .step {margin: 0;}
  #section_process .txt {margin-top: 0; padding: 20px 22px;}
  #section_process h3 {font-size: 18px;}

  #section_company .company_list li {width: 160px; height: 76px; padding: 0 18px;}
  #section_company .company_list img {max-width: 116px; max-height: 34px;}
  #section_company .co_logo {font-size: 19px;}}

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

  #section1 .content_wrap {gap: 24px; padding: 32px 0 40px;}
  #section1 .hero_label {font-size: 13px;}
  #section1 .hero_title {margin-top: 16px; font-size: 30px; letter-spacing: -1px;}
  #section1 .hero_title em {padding: 0 5px; border-radius: 8px;}
  #section1 .hero_note {font-size: 15px;}
  #section1 .hero_benefit {gap: 8px;}
  #section1 .hero_benefit li {padding: 10px 14px 10px 10px; font-size: 14px;}
  #section1 .hero_benefit li::before {width: 20px; height: 20px; background-size: 11px;}
  #section1 .hero_imgs {right: -6px; bottom: 0; width: 120px; height: 180px;}

  #section1 .form_wrap {padding: 26px 20px 20px; border-radius: 24px;}
  .form_wrap h2 {font-size: 22px;}
  .form_wrap .form_list {gap: 16px; margin-top: 22px;}
  .form_wrap input[type='text'], .form_wrap .phone_select, .form_wrap .gender_wrap label, .form_wrap .region_select, .form_wrap .select_btn {height: 54px; font-size: 16px;}
  .form_wrap .region_select {padding: 0 38px 0 16px;}
  #section1 .hero_steps li {font-size: 11.5px;}
  #section_company .co_logo {font-size: 16px;}
  .form_wrap .phone_input_wrap {grid-template-columns: 96px minmax(0, 1fr);}
  .form_wrap .submit_btn {height: 56px; margin-top: 22px; font-size: 17px;}

  #section1 .hero_stats {gap: 8px;}
  #section1 .hero_stats li {align-items: center; padding: 16px 8px; border-radius: 16px; text-align: center;}
  #section1 .hero_stats strong {font-size: 22px;}
  #section1 .hero_stats strong small {font-size: 14px;}
  #section1 .hero_stats span {font-size: 12.5px; word-break: keep-all;}

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

  #section2 .why_list li {grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; border-radius: var(--r-md);}
  #section2 .icon {width: 52px; height: 52px; border-radius: 16px; font-size: 26px;}
  #section2 h3 {font-size: 18px;}
  #section2 p {font-size: 15px;}

  #section3 .coverage_list {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  #section3 .coverage_list li {padding: 24px 22px; border-radius: var(--r-md);}
  #section3 .coverage_list li:first-child {grid-column: auto; min-height: 0; padding-right: 22px;}
  #section3 .coverage_img {position: static; display: block; width: 180px; margin: -6px auto 10px;}
  #section3 .coverage_list li:first-child h3 {font-size: 24px;}
  #section3 .tag {margin-bottom: 12px;}
  #section3 h3 {font-size: 18px;}

  #section_company .company_list {gap: 8px; padding-right: 8px;}
  #section_company .company_marquee {gap: 8px;}
  #section_company .company_list li {width: 132px; height: 64px; padding: 0 14px; border-radius: 16px;}
  #section_company .company_list img {max-width: 100px; max-height: 28px;}
  #section_company .company_foot {margin-top: 28px;}
  #section_company .company_foot p {font-size: 13px;}
  #section_company .company_foot button {width: 100%; justify-content: center; height: 56px; font-size: 16px;}

  #section4 .checklist {gap: 10px;}
  #section4 .checklist li {gap: 14px; padding: 22px 20px; border-radius: var(--r-md);}
  #section4 .num {width: 36px; height: 36px; font-size: 13px;}
  #section4 h3 {margin-top: 6px; font-size: 18px;}
  #section4 .txt p {font-size: 14.5px;}
  #section4 .cta_box {margin-top: 100px; padding: 0 20px 30px; border-radius: 24px;}
  #section4 .cta_img {width: 190px; margin-top: -92px;}
  #section4 .cta_box p {font-size: 20px;}
  #section4 .cta_box button {height: 56px;}

  #section_process .process_list::before,
  #section_process .process_list::after {left: 24px;}
  #section_process .process_list li {grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px;}
  #section_process .step {width: 52px; height: 52px; border-width: 3px; font-size: 18px;}
  #section_process .txt {padding: 18px;}
  #section_process p {font-size: 14.5px;}

  #section_qna .qna_question {gap: 12px; padding: 20px 18px;}
  #section_qna .qna_num, #section_qna .qna_a {width: 30px; height: 30px; font-size: 13px;}
  #section_qna .qna_text {font-size: 16px;}
  #section_qna .qna_arrow {width: 28px; height: 28px;}
  #section_qna .qna_arrow::before {top: 8px; left: 9px; width: 7px; height: 7px;}
  #section_qna .qna_answer {gap: 10px; padding: 0 18px 20px;}
  #section_qna .qna_bubble {padding: 14px 16px;}
  #section_qna .qna_bubble p {font-size: 15px;}
  .more_link {font-size: 15px;}}

@media (max-width: 360px) {
  .form_wrap .field_row {grid-template-columns: minmax(0, 1fr); gap: 16px;}}

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

@media (prefers-reduced-motion: reduce) {
  #section1 .hero_slide, #section1 .hero_slide.active, #section1 .hero_dot, #section1 .hero_img, #section1 .hero_img.active {transition: none; transform: none;}
  #section_qna .qna_item.active .qna_answer {animation: none;}
  .form_wrap .submit_btn, .form_wrap .region_select, .form_wrap .select_btn {transition: none;}
  #section3 .coverage_list li {transition: none;}

  /* 로고는 흐르지 않고 한 번만 나란히 보인다 */
  #section_company .marquee_track {width: auto; animation: none;}
  #section_company .marquee_row {-webkit-mask-image: none; mask-image: none;}
  #section_company .marquee_row.reverse,
  #section_company .company_list[aria-hidden="true"] {display: none;}
  #section_company .company_list {flex-wrap: wrap; justify-content: center; padding-right: 0;}

  /* 진행 순서는 처음부터 채워진 상태로 */
  #section_process .process_list::after {transform: none; transition: none;}
  #section_process .step {border-color: var(--main-color); color: var(--main-color); transition: none;}
  #section_process .process_list li:last-child .step {background: var(--main-color); color: #fff;}

  .reveal {opacity: 1; transform: none; transition: none;}}


/* ── 신청 유도 플로팅 버튼 (PC·모바일 공통) ── */
.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: #fff;
  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);}

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