html {
  font-size: 62.5%; /* 1rem = 10px */
  /* 창 높이가 937px(--first-h) 보다 낮으면 전체를 높이에 맞춰 비율 축소 (가로로 긴 노트북 창에서 히어로-인트로가 붙지 않게)
     최소 8px 까지만 줄임 (너무 작아지면 글자가 안 읽힘) */
  font-size: min(62.5%, max(8px, calc(100vh / 93.7)));
}

:root {
  /* ===== 컬러 ===== */
  --blue: #043BDC;     
  --blue2: #007E9B;   
  --blue-light: #CEECF4;

  --sky: #a3dfef;           /* 하단 물결 배경 (background.png 추출) */
  --sky-card: #d3edf6;      /* 히어로 카드 (hero_background.png 추출) */
  --sky-soft: #CEECF4;      /* 짝수 Check 섹션 */
  --sky-line: #bde6f2;

  /* 물결 배경 (background.png : 7680 x 2245) */
  --wave-h: min(29.23vw, 56.12rem);      /* 화면 폭 기준 원본 비율 높이. 1920 에서의 높이(56.12rem)에서 멈춤 → 초고해상도에서 인트로가 끝없이 길어지지 않게 (넘치는 폭은 가로로만 늘어남) */
  --wave-up: calc(var(--wave-h) * 0.26); /* 좌측 경계선이 .intro 상단에 오도록 끌어올리는 값 (원본 7.6vw / 29.23vw 비율) */

  --navy: #14213d;          /* 진한 제목 */
  --ink: #1b1b1b;           /* 본문 진한 텍스트 */
  --text: #333a45;
  --text-sub: #6b7280;

  --gray-1: #f2f4f7;
  --gray-2: #e5e7eb;
  --gray-3: #9ca3af;
  --line: #d8dee8;
  --field-bg: #fff;

  /* ===== 레이아웃 ===== */
  --container-max: 120rem;
  --container-pad: 2rem;
  --header-h: 14rem;        /* 로고행 + 네비행 */
  --first-h: 93.7rem;       /* ★ 첫 화면 최대 높이 (1920 모니터 + 브라우저 창 937px 기준). 창이 이보다 높으면 남는 공간은 화살표 아래로 */
  --form-w: 42rem;          /* 우측 폼 폭 */
  --form-gap: 3rem;         /* 폼과 좌측 콘텐츠 사이 */
  --content-pad: calc(var(--form-w) + var(--form-gap)); /* 좌측 콘텐츠 우측 여백 */
  --check-w: 62rem;         /* ★ Check 섹션 콘텐츠 폭 (제목 밑줄/이미지/토글/약관 공통) */
  --check1-top: 22rem;      /* ★ 체크1 섹션 위 여백 (물결 배경이 흘러내리는 공간) */
  --mo-gutter: 2rem;
}

body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

.content_col { padding-right: calc(var(--content-pad) - 3rem); }

.blue { color: var(--blue); }
.mo { display: none !important; }
.pc { display: block !important; }

/* 모바일 전용 요소는 PC 에서 숨김 */
.btm_form { display: none; }   /* 모바일 전용 하단 고정 폼 */


/* =========================================================
   헤더
   ========================================================= */
#header {
  position: relative;
  z-index: 60;
  height: var(--header-h);
  background: #fff;
}
#header .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.logo_link { display: block; align-self: flex-start; }   /* 세로 flex 에서 가로로 늘어나 클릭영역이 헤더 전체가 되는 것 방지 */
.logo_link img {
  height: 2.8rem;
  width: auto;
  display: block;
}

.header_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav { min-width: 0; }
.nav_wrap {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav_item { flex-shrink: 0; }
.nav_link {
  display: block;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav_link:hover { color: var(--text); }
.nav_link.active { color: var(--blue); font-weight: 600; }

.header_date {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1rem;
  white-space: nowrap;
  padding: 0.9rem 2rem;
  border: 1px solid #EAEAEA;
  border-radius: 5rem;
  background: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
}
.header_date .dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #e22323;
  animation: dot_blink 1.4s ease-in-out infinite;
}
.header_date .ban { color: #c9d3e0; font-weight: 400; }
.header_date .date { color: var(--blue); font-weight: 700; }

@keyframes dot_blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}


/* =========================================================
   첫 화면 (히어로 + 인트로) = 100vh - 헤더
   ========================================================= */
.visual {
  min-height: min(calc(100vh - var(--header-h)), calc(var(--first-h) - var(--header-h)));   /* 화면 높이만큼 채우되, 내용이 축소될 때 히어로-인트로 사이가 벌어지지 않게 --first-h 로 제한 */
  display: flex;
  flex-direction: column;
}


/* =========================================================
   히어로
   ========================================================= */
.hero {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;   /* 카드 세로 위치는 index.html 스크립트가 '카드 아래끝 = 폼 아래끝' 으로 맞춤 */
  padding-top: 1.5rem;
}
.hero .container { padding-right: calc(var(--container-pad) + var(--content-pad)); }

.hero_card {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 2965 / 1881;   /* hero_background.png 원본 비율 */
  min-height: 42rem;
  padding: 3rem 4rem 8rem;
  background: url("../img/hero_background.webp") no-repeat center center / 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero_title {
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.18rem;
  margin-bottom: 2.5rem;
}
.hero_title .brand { display: block; color: var(--ink); }
.hero_title .product { display: block; color: var(--blue); }

.hero_lead {
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.1rem;
  color: var(--blue);
}
.hero_desc {
  margin-top: 0.4rem;
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.12rem;
  color: var(--ink);
}
.hero_note {
  margin-top: 0.6rem;
  font-size: 1.6rem;
  color: var(--text-sub);
}

.hero_link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin-top: 2.8rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.hero_link img { width: 1.4rem; height: auto; transform: rotate(-90deg); }

/* 카드 우하단 일러스트 */
.hero_img {
  position: absolute;
  right: 4rem;
  bottom: 5rem;
  width: 24rem;
  pointer-events: none;
}
.hero_img img { width: 100%; height: auto; display: block; }


/* =========================================================
   우측 신청 폼 (페이지 전체를 따라오는 sticky)
   ========================================================= */
.page { position: relative; }

.sticky_form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
}
.sticky_form > .container {
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.main_right {
  position: sticky;
  top: 14rem;          /* 스크롤 후 고정 위치 = 헤더 14rem + 여백 5rem */
  align-self: flex-start;
  width: var(--form-w);
  pointer-events: auto;
}

.form_title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.12rem;
  color: var(--navy);
  text-align: center;
}
.form_arrow {
  display: block;
  width: 4rem;
  margin: 1.2rem auto 1.8rem;
  animation: arrow_bounce 1.8s ease-in-out infinite;
}
.form_arrow img { width: 100%; height: auto; display: block; }

@keyframes arrow_bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.7rem); }
}

.form_box {
  box-sizing: border-box;
  padding: 3.2rem 2.2rem;
  border: 1px solid var(--blue);
  border-radius: 1.6rem;
  background: #fff;
}
.form_sub { display: none; }

/* --- 한 줄 = 라벨 + 입력 --- */
.field {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.field > label,
.field > .field_label {
  flex: 0 0 6.4rem;
  text-align: right;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.15s;
}
.field label.active { color: var(--blue); }
.field_help { display: none; }

.field_ctrl {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.field input[type="text"],
.field input[type="tel"],
.field select {
  width: 100%;
  height: 4rem;
  box-sizing: border-box;
  padding: 0 1.2rem;
  border: 1px solid #999999;
  border-radius: 4px;
  background: var(--field-bg);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.field input::placeholder { color: #999999; font-weight: 400; }
.field input:focus,
.field select:focus { border-color: var(--blue); }

.field select {
  flex: 0 0 8rem;
  width: 8rem;
  padding-right: 2.6rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23333a45' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2rem auto;
}

/* --- 성별 (이름 줄 오른쪽) --- */
.sex_wrap {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
}
.sex_wrap input[type="radio"] { display: none; }
.sex_btn {
  width: 4.4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  border-radius: 4px;
  background: #fff;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s;
}
.sex_wrap input[type="radio"]:checked + .sex_btn {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

/* ── 어린이 : 라벨을 입력칸 위로 (시안) ── */
/* 라벨이 한 줄씩 늘어 폼이 101px 높아지므로 상하 여백을 줄여 히어로 카드 하단선에 맞춘다 */
.bojong_child .form_box { padding-top: 1.9rem; padding-bottom: 1.9rem; }
.bojong_child .field { margin-bottom: 1rem; }

.bojong_child .field { display: block; }
.bojong_child .field > label,
.bojong_child .field > .field_label {
  display: block;
  flex: none;
  margin-bottom: 0.2rem;
  text-align: left;
}
.bojong_child .field_ctrl { display: flex; }
.bojong_child .sex_btn { width: auto; padding: 0 1.4rem; white-space: nowrap; }

/* --- 하단 버튼 2개 --- */
.form_btns {
  display: flex;
  gap: 1rem;
  margin-top: 1.8rem;
}
.submit_btn {
  flex: 1 1 0;
  min-width: 0;
  height: 4.8rem;
  padding: 0;
  border: none;
  border-radius: 0.8rem;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  transition: background 0.15s;
}

.submit_btn .sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 0.85;
}


/* =========================================================
   인트로 (하늘색 곡선 영역)
   ========================================================= */
.intro {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 3.5rem;   /* 히어로 카드와 물결 사이 최소 간격 : 창이 낮아 첫 화면이 넘칠 때도 붙지 않게 (창이 충분히 높으면 남는 공간이 먼저 흡수해 차이 없음) */
  padding: 4rem 0 0;
}
/* 배경: background.png (상단 물결 → 하단 단색 → 아래쪽 페이드아웃) */
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--wave-up) * -1);   /* 물결 좌측 경계선을 .intro 상단에 맞춤 */
  height: var(--wave-h);
  z-index: 0;
  pointer-events: none;
  background: url("../img/background.webp") no-repeat top center / 100% 100%;
}
.intro .container { position: relative; z-index: 1; }

.intro_title {
  font-size: 4.7rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.18rem;
  color: var(--navy);
}
.intro_desc {
  margin-top: 1.6rem;
  font-size: 3.7rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.12rem;
  color: var(--navy);
}
.intro_desc .blue { font-weight: 600; }
.intro_arrow {
  display: block;
  width: 5rem;
  margin: 0 auto;
  animation: arrow_bounce 1.8s ease-in-out infinite;
  position: relative;
  bottom: 2rem;
}
.intro_arrow img { width: 100%; height: auto; display: block; }


/* =========================================================
   Check 섹션
   ========================================================= */
.section_wrap {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--gray-2);   /* 가입 시 유의사항 위 구분선 (화면 전폭) */
}

.point {
  min-height: 100vh;                /* 모든 Check 섹션이 한 화면을 채우도록 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;      /* 상단 고정 : 토글로 내용이 늘어나도 위 요소가 밀려 올라가지 않는다 */
  padding: 8rem 0;
  background: #fff;
  box-sizing: border-box;
}
/* 위 flex-start 는 '지급 조건 확인' 토글(.terms)이 펼쳐질 때 윗 요소가 밀려 올라가는 것을
   막기 위한 것이다. 토글이 없는 섹션은 높이가 변하지 않으므로 세로 가운데로 둔다. */
.point:not(:has(.terms)) { justify-content: center; }
.point:first-of-type {
  padding-top: var(--check1-top);                      /* 물결 배경이 흘러내리는 공간 */
  min-height: calc(100vh + var(--check1-top));         /* 물결 자리를 뺀 콘텐츠 영역이 한 화면을 채우도록 */
}
.point:nth-of-type(even) { background: var(--sky-soft); }

/* Check 섹션 콘텐츠 폭은 --check-w 한 곳에서 제어한다
   (제목 밑줄 · 이미지 · 지급조건 토글 · 약관 박스가 모두 이 폭을 공유) */
.point_inner > * { max-width: var(--check-w); }

.point_inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 calc(var(--container-pad) + var(--content-pad)) 0 var(--container-pad);
  box-sizing: border-box;
}

.point_badge {
  display: inline-block;
  margin-bottom: 1.8rem;
  padding: 0.2rem 2rem;
  border-radius: 5rem;
  background: var(--blue-light);
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.03rem;
}

.point_title {
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.14rem;
  color: var(--navy);
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #bbb;
  margin-bottom: 2.6rem;
}
.point_title .blue { color: var(--blue2); }

.point_desc {
  font-size: 1.7rem;
  line-height: 1.7;
  color: var(--text-sub);
  margin-bottom: 2.4rem;
}

/* 보장 내용 블록 : h3 → 설명 → 이미지 순으로 표시 */
.feature_box {
  display: flex;
  flex-direction: column;
}
.feature_box h3 {
  order: 1;
  position: relative;
  padding-left: 1.7rem;
  font-size: 3.3rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.08rem;
  color: var(--ink);
}
.feature_box h3::before {
  content: "-";
  position: absolute;
  left: -0.5rem;
  width: 0.7rem;
  height: 0.7rem;
}
.feature_box p {
  order: 2;
  margin-top: 1rem;
  padding-left: 1.7rem;
  font-size: 2rem;
  line-height: 1.7;
  color: var(--text-sub);
}
.feature_box h3.single { margin-bottom: 0; }

.feature_box figure {
  order: 3;
  padding: 2.4rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature_box figure img { width: var(--w, auto); max-width: 100%; height: auto; display: block; }   /* 폭은 마크업의 style="--w:XXrem" (모바일은 --mw 또는 비율 축소) */

/* ── 히어로 안내 아이콘 + 팝오버 ── */
.hero_info {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  top: -0.2rem;
}
.hero_info_btn {
  display: block;
  width:3rem;
  height:3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero_info_btn img { width: 100%; height: auto; display: block; }

.hero_info_pop {
  position: absolute;
  top:3.5rem;
  left: -0.5rem;
  z-index: 30;
  width: 32rem;
  box-sizing: border-box;
  padding: 1.6rem 3rem 1.6rem 1.8rem;
  border-radius: 2.4rem;
  background: #fff;
  box-shadow: 0 0rem 1rem rgba(12, 44, 96, 0.3);
  text-align: left;
}
.hero_info_pop .line {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.hero_info_pop .line.sub {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
}
.hero_info_close {
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero_info_close img { width: 100%; height: 100%; display: block; }

/* ── 보종별 히어로 일러스트 크기/위치 (기본값은 .hero_img) ── */
.bojong_health .hero_img { width: 24rem; right: 5rem; bottom: 9rem; }
.bojong_yb .hero_img     { width: 21rem; right: 7rem; bottom: 8rem; }
.bojong_dental .hero_img { width: 22rem; right: 9rem; bottom: 8rem; }
.bojong_child .hero_img  { width: 22rem; right: 8rem; bottom: 8rem; }
.bojong_driver .hero_img { width: 21rem; right: 4rem; bottom: 5rem; }
.bojong_home .hero_img   { width: 24rem; right: 4rem; bottom: 5rem; }
.bojong_bojang .hero_img { width: 24rem; right: 2rem; bottom: 5rem; }

/* ── 유병자 전용 : 히어로 안내문구 바로 아래 링크 ── */
.bojong_yb .hero_link { margin-top: 0; }

/* ── 유병자 Check 1 : 간편심사 3가지 질문 카드 ── */
.yb_card {
  padding: 3.4rem 3rem;
  border: 1px solid #007E9B;
  border-radius: 2rem;
  background: #F8FEFF;
}
.yb_card_top {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.yb_card_top figure { flex-shrink: 0; width: 18rem; }
.yb_card_top figure img { width: 100%; height: auto; display: block; }

.yb_qlist {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-left: 2.4rem;
  list-style: decimal outside;
}
.yb_qlist li { margin-bottom: 1.8rem; font-size: 2.2rem;color: var(--ink); }
.yb_qlist li:last-child { margin-bottom: 0; }
.yb_qlist .q {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.yb_qlist .sub {
  display: block;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-sub);
}

.yb_card_note { margin-top: 3rem; }
.yb_card_note p {
  padding-left: 1.1rem;
  text-indent: -1.1rem;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--text-sub);
}
.yb_card_note p:last-child { margin-bottom: 0; }

/* ── 보장분석 전용 : 가운데 정렬 섹션 ── */
.bj_center { text-align: center; }
/* .point_inner > * 의 --check-w(62rem) 제한을 풀어 모든 요소가
   왼쪽 콘텐츠 칼럼(폼 거터 제외)의 같은 중심축에 오게 한다.
   이걸 풀지 않으면 제목만 62rem 블록 안에서 중앙 정렬돼
   Check! 뱃지·화살표(콘텐츠 폭 기준 중앙)와 45px 어긋난다. */
.bj_center > * { max-width: 100%; }
.bj_center .point_badge { display: inline-block; max-width: none; }
.bj_center .point_title { margin-bottom: 4rem; }

/* ── 보장분석 : 섹션 상하 여백 (위쪽을 더 크게) ── */
.bojong_bojang .point { padding: 12rem 0; }
/* 내 보험 점수 : 풀페이지(100vh) 대신 콘텐츠 높이만 차지하고, 남는 공간이 생기면 세로 가운데.
   min-height 를 풀지 않으면 justify-content 만 바꿔도 100vh 안에서만 가운데로 모인다. */
.bojong_bojang .point:first-of-type {
  padding-top: 18rem;
  min-height: 0;   /* 세로 가운데 정렬은 위의 .point:not(:has(.terms)) 가 담당한다 */
}
/* 보장 점검 서비스 : .tall 의 min-height:100vh 를 풀어야 실제로 짧아진다.
   (100vh 가 걸려 있으면 padding 을 줄여도 flex 가운데 정렬이 그만큼 되돌려준다) */
.bojong_bojang .point.tall { min-height: 0; padding: 9rem 0; }

/* ── 간병 전용 : 긴 상품명/제목이 두 줄로 넘어가지 않게 글자만 줄인다 ──
   상품명 'THE FIT 내돈내삼 1640/4170' 과 제목 '건강보험 간병플랜은 ~' 이
   기본 크기(5.5rem / 4.7rem)에서는 한 줄 폭을 넘긴다. 간병에만 적용한다.

   min-width 로 감싼 이유 : 모바일(<=900px)의 .hero_title / .intro_title 은
   --hr 기반 규칙인데, .bojong_care 가 붙은 이 선택자가 특정성이 더 높아
   미디어쿼리 밖에 두면 모바일까지 5.1rem 이 먹어 오히려 3줄이 된다.
   모바일은 기본값(2.8/2.6 * --hr)을 그대로 쓴다. */
@media (min-width: 901px) {
  .bojong_care .hero_title .product { font-size: 5.1rem; }
  .bojong_care .intro_title { font-size: 4.4rem; }
}

/* 제목 끝의 작은 '(특약)' 표기 */
.point_title .sm { font-size: 0.62em; font-weight: 600; letter-spacing: -0.05rem; }

/* 제목 아래 출처 주석 + 구분선.
   .point_title.no_line 으로 제목 밑줄을 뗀 자리에, 주석 아래로 같은 선을 내려 긋는다.
   (값은 .point_title 의 padding-bottom / margin-bottom 과 동일) */
.point_desc.with_line {
  padding-bottom: 2.4rem;
  border-bottom: 1px solid #bbb;
  margin-bottom: 2.6rem;
}
.point_desc .src { display: block; padding-left: 1.2rem; }

/* 내 보험 점수 도넛 */
.bj_score { display: flex; flex-direction: column; align-items: center; }
.bj_donut {
  position: relative;
  width: 26rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bj_donut > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bj_score_num {
  position: relative;
  z-index: 1;
  font-size: 5.6rem;
  font-weight: 800;
  letter-spacing: -0.2rem;
  color: var(--blue2);
}
.bj_score_num em { font-style: normal; font-size: 3.2rem; font-weight: 700; color: var(--ink);}

/* 월 보험료 / 가입 보험 요약 */
.bj_stat {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-top: 3.4rem;
  padding: 0;
  list-style: none;
}
.bj_stat li { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bj_stat .k {
  padding: 0.6rem 1.8rem;
  border-radius: 5rem;
  background: var(--blue-light);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy);
}
.bj_stat .v { font-size: 2.4rem; font-weight: 600; color: var(--navy); }

/* 보장 점검 서비스 말풍선
   시안처럼 좌·우로 어긋나게 배치한다. 아래 3개 값만 만지면 위치 조정 끝.
   (transform 이라 폭·줄바꿈에는 영향을 주지 않는다) */
.bj_bubbles {
  --bubble1-x: -4rem;   /* 1번 : 왼쪽으로 */
  --bubble2-x: 3rem;    /* 2번 : 오른쪽으로 */
  --bubble3-x: 0rem;    /* 3번 : 가운데 */
  --bubble-gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bj_bubbles li {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--bubble-gap);
  padding: 1.8rem 3.4rem;
  border-radius: 1.5rem;
  background: var(--blue);
  color: #fff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  min-width: 29rem;
}
.bj_bubbles li:nth-child(1) { transform: translateX(var(--bubble1-x)); }
.bj_bubbles li:nth-child(2) { transform: translateX(var(--bubble2-x)); background: #4881FF; }
.bj_bubbles li:nth-child(3) { transform: translateX(var(--bubble1-x)); }
.bj_bubbles li.dim { background: #A1C3FF; }

.bj_arrow {
  display: block;
  width: 4.6rem;
  margin: 2.4rem auto 0;
}
.bj_arrow img { display: block; width: 100%; height: auto; }

.bj_cs { margin-top: 2.4rem; }
.bj_cs img { width: 26rem; height: auto; margin: 0 auto; }

.bj_cta {
  margin-top: 2.4rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.1rem;
}

/* 꼭 확인하세요 : 보장분석만 ul>li 가 아니라 p 구조라
   .always_wrap ul li 규칙을 못 받는다. 타이포를 동일하게 맞춰준다. */
.always_body > p:not(.notice_title):not(.sim_date) {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 2rem;
  line-height: 1.65;
  color: var(--text-sub);
}
.always_body > p:not(.notice_title):not(.sim_date)::before {
  content: "·";
  position: absolute;
  left: 0;
}

/* 상황 리스트 (일부 보종) */
.situation { margin-top: 3rem; }
.situation_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 1.2rem;
}
.situation ol { list-style: none; padding: 0; margin: 0; }
.situation li {
  position: relative;
  margin-bottom: 0.8rem;
  padding: 1.5rem 1.8rem 1.5rem 5rem;
  border-radius: 1.4rem;
  background: var(--sky-soft);
  font-size: 1.6rem;
  font-weight: 500;
}
.point:nth-of-type(even) .situation li { background: #fff; }
.point:nth-of-type(even) .point_badge { background: #fff; }
.point:nth-of-type(even) .btn_terms_toggle { background: transparent; }

/* ── 섹션별 조정용 modifier ── */
/* .tall : 이제 모든 .point 가 100vh + 세로 가운데 정렬이라 기본값과 동일 (마크업 호환용으로 클래스만 유지) */
/* 제목 밑줄 제거 */
.point_title.no_line { border-bottom: none; padding-bottom: 0; margin-bottom: 2.6rem; }

.situation .num {
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  line-height: 2.2rem;
  border-radius: 0.7rem;
  background: var(--sky);
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

/* 지급 조건 토글 */
.terms { margin-top: 3.2rem; }
.btn_terms_toggle,
.btn_notice_toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: auto;
  margin: 0 auto;
  padding: 1.1rem 2.4rem;
  border: 1px solid #345A60;
  border-radius: 5rem;
  background: #fff;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 600;
  color: #345A60;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn_terms_toggle .arrow,
.btn_notice_toggle .arrow { width: 1.5rem; transition: transform 0.3s; }
.btn_terms_toggle.active .arrow,
.btn_notice_toggle.active .arrow { transform: rotate(180deg); }

.terms_content { display: none; padding-top: 2.4rem; }
.terms_content p,
.terms_content2,
.terms_content2 p {
  font-size: 2rem;
  line-height: 1.5;
  color: var(--text-sub);
  padding-left: 1rem;
  text-indent: -1rem;
}

/* 약관 본문 안 원문자(①②③) : 옆 글자보다 크게 쓰되 줄 높이를 밀지 않고 중앙 정렬 */
.terms_content p span,
.terms_content2 p span {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  vertical-align: middle;
}

/* =========================================================
   가입 시 유의사항 / 꼭 확인하세요
   ========================================================= */
.notice_wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 4rem var(--container-pad) 7rem;
  padding-right: calc(var(--container-pad) + var(--content-pad));
  box-sizing: border-box;
}


.notice_content { display: none; padding: 2.8rem 0.4rem 0; }
.notice_content.active { display: block; }

.notice_wrap ul { list-style: none; padding: 0; margin: 0; }
.notice_wrap ul li { margin-bottom: 1.8rem; }
.notice_wrap ul li.sim { margin-bottom: 0; margin-top: 3rem; }
.notice_wrap strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 2rem;
  color: var(--text-sub);
}
.notice_wrap p {
  font-size: 2rem;
  line-height: 1.75;
  color: var(--text-sub);
}

/* 예금보험공사 보호금융상품 로고 */
.dep_logo {
  width: 12rem;
  height: auto;
  display: block;
}

/* [예금자보호 안내] 로고 자리만 밀어내고, 이후 줄은 로고 아래로 흐른다 */
.dep_item { display: block; }
.dep_item::after { content: ""; display: block; clear: both; }
.dep_item .dep_logo {
  float: left;
  margin: 1rem 1.8rem 0 0;
}

.always_wrap {
  position: relative;
  margin-top: 3rem;
  padding: 2.4rem 0;
}
/* 로고는 컨테이너 바깥(좌측)에 걸치게 */
.always_wrap > .dep_logo {
  position: absolute;
  top: 2.4rem;
  right: 100%;
  margin-right: 2rem;
}
/* 좌측 여백이 부족하면 로고를 흐름 안으로 되돌린다 (화면 밖 잘림 방지) */
@media (max-width: 1500px) {
  .always_wrap > .dep_logo { position: static; margin: 0 0 1.2rem; }
}
.always_wrap .notice_title {
  margin-bottom: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}
.always_wrap ul li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 2rem;
  line-height: 1.65;
  color: var(--text-sub);
}
.always_wrap ul li::before { content: "·"; position: absolute; left: 0; }
.sim_date {
  margin-top: 1.4rem;
  font-size: 1.2rem;
  color: var(--gray-3);
}


/* ── .blue 유틸리티 보강 ──
   .terms_content p / .notice_wrap p 등 (요소+클래스) 규칙에 밀리지 않도록
   같은 특정성으로 올리고 뒤쪽에 배치한다. */
p.blue,
span.blue,
strong.blue,
li.blue { color: var(--blue); }
/* 단, Check 제목 안의 강조는 blue2 유지 */
.point_title span.blue { color: var(--blue2); }
/* 단, 운전자·주택 보험은 제목 강조를 #003CDC 로 */
.bojong_driver .point_title .blue,
.bojong_driver .point_title span.blue,
.bojong_home .point_title .blue,
.bojong_home .point_title span.blue { color: #003CDC; }


/* =========================================================
   푸터
   ========================================================= */
.footer .inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}
.footer_wrap { text-align: left; }


/* =========================================================
   완료 모달 / 커스텀 alert
   ========================================================= */
#complete_modal_bg {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
#complete_modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40rem;
  max-width: calc(100% - 4rem);
  box-sizing: border-box;
  padding: 2rem 3rem;
  border-radius: 1rem;
  background: #fff;
  text-align: center;
  z-index: 10000;
}
#complete_modal_msg {
  margin-bottom: 3.2rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.04rem;
  color: #111;
  word-break: keep-all;
}
#complete_modal_confirm {
  display: block;
  min-width: 11rem;
  height: 4.5rem;
  margin: 0 auto;
  padding: 0 3rem;
  border: none;
  border-radius: 0.8rem;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.custom_alert_bg {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100000;
}
.custom_alert {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40rem;
  max-width: calc(100% - 4rem);
  box-sizing: border-box;
  padding: 3rem 3rem 3rem;
  border-radius: 1.5rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.15);
  z-index: 100001;
}
.custom_alert_msg {
  margin-bottom: 3.2rem;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: -0.04rem;
  color: #111;
  word-break: keep-all;
}
.custom_alert_confirm {
  display: block;
  min-width: 11rem;
  height: 4.5rem;
  margin: 0 auto;
  padding: 0 3rem;
  border: none;
  border-radius: 0.8rem;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}


/* =========================================================
   반응형
   ========================================================= */
/* 1260px 이하 PC : 1920 기준 모양 그대로 화면 너비에 맞춰 비율 축소
   (컨테이너 120rem + 좌우 여백이 126rem 안에 들어가도록 루트 글자 크기를 줄임) */
@media (max-width: 1260px) {
  html { font-size: calc(100vw / 126); }
  /* 폭 기준과 높이 기준 중 더 작은 쪽 (높이 기준만 최소 8px) */
  html { font-size: min(calc(100vw / 126), max(8px, calc(100vh / 93.7))); }
}

/* =========================================================
   모바일 (≤ 900px)
   흐름 : 헤더 → 히어로 → 신청 폼 → 인트로(물결) → Check → 유의사항 → 푸터
   ========================================================= */
@media (max-width: 900px) {
  html { font-size: 62.5%; }
  :root {
    --container-pad: 2rem;
    --content-pad: 0rem;
    --header-h: auto;
    --mo-gutter: 2rem;
    --mo-pop: min(calc(100vw / 39), 14px);   /* ★ 모바일 팝업 단위 (개인정보·SMS·결과창) : 390px 폰에서 10px(=1rem), 넓은 화면에선 비례해서 커지고 14px(팝업 폭 약 500px)에서 멈춤 */
    --hr: calc((100vw - 2 * var(--mo-gutter)) / 35);  /* ★ 히어로·인트로 전용 단위 : 389px 이하는 1rem 과 같음, 390px 이상은 화면 폭에 비례 */
    --mo-img-scale: 0.7;     /* ★ Check 이미지 = PC 폭(--w) × 이 값  (PC 칼럼 62rem → 모바일 35rem) */
    --mo-hero-img-space: calc(7 * var(--hr)); /* ★ 히어로 문구 오른쪽에 일러스트 자리로 비워두는 폭 */
    --mo-hero-pad-top: calc(2 * var(--hr));   /* ★ 히어로 카드 위쪽 여백 (줄이면 문구가 위로) */
    --mo-form-title-y: calc(-2 * var(--hr));  /* ★ '내 보험료 1분 확인하기' 제목만 위(-)/아래(+)로 이동 */
    --mo-wave-up: calc(3 * var(--hr));        /* ★ 물결 배경을 인트로 위로 끌어올리는 값 */
    --mo-wave-down: calc(6 * var(--hr));      /* ★ 물결 배경이 Check 1 쪽으로 흘러내리는 값 (첫 섹션 padding-top 보다 작게) */
  }

  .pc { display: none !important; }
  .mo { display: block !important; }


  /* ---------- 헤더 ---------- */
  #header { height: auto; }
  #header .container { height: auto; padding: 2.5rem var(--mo-gutter) 0; gap: 1.5rem; }
  .logo_link img { height: 2.2rem; }

  .header_row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .header_date {
    order: 1;
    align-self: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    font-size: 1.2rem;
  }
  .header_date .dot { width: 0.6rem; height: 0.6rem; }

  /* 네비 : 시안은 2줄이지만 한 줄 가로 스크롤 (스크롤 영역은 화면 끝까지) */
  .nav {
    order: 2;
    margin: 0 calc(var(--mo-gutter) * -1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav_wrap { min-width: max-content; gap: 2.2rem; padding: 0 var(--mo-gutter); }
  .nav_link { position: relative; padding: 1.2rem 0 1rem; font-size: 1.6rem; }


  /* ---------- 흐름 재배치 ----------
     PC 는 폼이 페이지 전체 sticky 오버레이라 DOM 맨 앞에 있다.
     .visual 을 풀어(display: contents) 히어로·인트로 사이에 폼을 order 로 끼워 넣는다. */
  .page { display: flex; flex-direction: column; }
  .page > * { order: 4; }
  .visual { display: contents; }
  .hero { order: 1; }
  .sticky_form { order: 2; }
  .intro { order: 3; }


  /* ---------- 히어로 ---------- */
  .hero { flex: none; display: block; padding: calc(1.6 * var(--hr)) 0 0; }
  .hero .container { padding: 0 var(--mo-gutter); }

  .hero_card {
    aspect-ratio: 2601 / 1651;       /* hero_background2.webp 원본 비율 (이미지 안 찌그러짐) */
    min-height: auto;                /* 문구가 길면 비율보다 늘어날 수 있게 */
    justify-content: flex-start;     /* 문구를 카드 위쪽부터 (PC 는 세로 가운데) */
    padding: var(--mo-hero-pad-top) calc(2 * var(--hr)) calc(2.4 * var(--hr));
    background-image: url("../img/hero_background2.webp");   /* 모바일 전용 카드 배경 */
  }

  .hero_title { margin-bottom: calc(0.5 * var(--hr)); font-size: calc(2.8 * var(--hr)); letter-spacing: calc(-0.1 * var(--hr)); word-break: keep-all; }
  .hero_lead,
  .hero_desc { font-size: calc(1.6 * var(--hr)); letter-spacing: calc(-0.04 * var(--hr)); word-break: keep-all; }
  .hero_desc { position: relative; margin-top: calc(0.2 * var(--hr)); }
  .hero_lead,
  .hero_desc,
  .hero_note { max-width: calc(100% - var(--mo-hero-img-space)); }
  .hero_note { margin-top: calc(0.4 * var(--hr)); font-size: calc(1.2 * var(--hr)); }
  .hero_link { margin-top: calc(0.5 * var(--hr)); gap: calc(0.4 * var(--hr)); font-size: calc(1.4 * var(--hr)); }
  .hero_link img { width: calc(1 * var(--hr)); }

  /* 히어로 일러스트 : PC 의 .bojong_* .hero_img 를 보종별로 덮어쓴다 (여기서 조절) */
  .hero_img { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_cancer .hero_img { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_health .hero_img { width: calc(12 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(3.6 * var(--hr)); }
  .bojong_yb .hero_img     { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_dental .hero_img { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_child .hero_img  { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_driver .hero_img { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_home .hero_img   { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }
  .bojong_bojang .hero_img { width: calc(10 * var(--hr)); right: calc(1.6 * var(--hr)); bottom: calc(1.6 * var(--hr)); }

  /* 안내 아이콘 팝오버 : 문구 바로 아래, 왼쪽 정렬 (화면 밖으로 안 나가게) */
  .hero_info { position: static; }
  .hero_info_btn { width: calc(2 * var(--hr)); height: calc(2 * var(--hr)); }
  .hero_info_pop {
    top: calc(100% + calc(0.6 * var(--hr)));
    left: calc(7.8 * var(--hr));
    width: min(calc(25 * var(--hr)), calc(100vw - calc(8 * var(--hr))));
    padding: calc(1.2 * var(--hr)) calc(2.8 * var(--hr)) calc(1.2 * var(--hr)) calc(1.4 * var(--hr));
    border-radius: calc(1.4 * var(--hr));
  }
  .hero_info_pop .line,
  .hero_info_pop .line.sub { font-size: calc(1.3 * var(--hr)); }
  .hero_info_close { top: calc(1 * var(--hr)); right: calc(1.2 * var(--hr)); width: calc(1.2 * var(--hr)); height: calc(1.2 * var(--hr)); }


  /* ---------- 신청 폼 (히어로 아래 인라인) ---------- */
  .sticky_form { position: static; z-index: auto; pointer-events: auto; }
  .sticky_form > .container { height: auto; display: block; padding: 0 var(--mo-gutter); }

  /* 제목 왼쪽 + 화살표 오른쪽, 폼 박스는 아래 한 줄 */
  .main_right {
    position: static;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .form_title { flex: 1 1 0; min-width: 0; font-size: calc(2.2 * var(--hr)); letter-spacing: calc(-0.08 * var(--hr)); text-align: left; margin-left: calc(2 * var(--hr));
                position: relative; top: var(--mo-form-title-y); }   /* 제목만 위아래 이동 (화살표·폼 박스 위치는 그대로) */
  .form_arrow { flex: none; width: calc(3.2 * var(--hr)); margin: 0 calc(5 * var(--hr)) 0 calc(1.2 * var(--hr)); }   /* 오른쪽 여백 = 화살표를 왼쪽으로 미는 값 */
  /* 운전자 : 제목 첫 줄이 길어 폴더 홈 곡선에 3px 닿음 → 왼쪽 여백만 줄여 비켜간다 */
  .bojong_driver .form_title { margin-left: calc(0.5 * var(--hr)); }
  .form_box { flex: 1 1 100%; margin-top: 0.5rem; padding: 2rem 1.6rem; }

  .field { gap: 0.8rem; margin-bottom: 1.4rem; }
  .field > label,
  .field > .field_label { flex-basis: 5.6rem; font-size: 1.6rem; }
  .field input[type="text"],
  .field input[type="tel"],
  .field select { height: 4.2rem; padding: 0 1rem; font-size: 1.4rem; }
  .field select { flex-basis: 7.4rem; width: 7.4rem; padding-right: 2.4rem; background-position: right 0.9rem center; }
  .sex_btn { width: 4.2rem; height: 4.2rem; font-size: 1.5rem; }
  .form_btns { gap: 0.8rem; margin-top: 1.8rem; }
  .submit_btn { height: 5rem; font-size: 1.6rem; }
  .submit_btn .sub { font-size: 1.3rem; }

  .bojong_child .form_box { padding-top: 2rem; padding-bottom: 2rem; }
  .bojong_child .field { margin-bottom: 1.4rem; }
  .bojong_child .field > label { margin-bottom: 0.6rem; font-size: 1.4rem; }
  .bojong_child .sex_btn { padding: 0 1rem; font-size: 1.4rem; }


  /* ---------- 인트로 (물결) ---------- */
  .intro { flex: none; margin-top: calc(3.2 * var(--hr)); padding: calc(3.6 * var(--hr)) 0 0; }
  .intro::before {
    top: calc(var(--mo-wave-up) * -1);
    bottom: calc(var(--mo-wave-down) * -1);
    height: auto;
    background-image: url("../img/background2.webp");        /* 모바일 전용 물결 배경 */
    background-size: 100% auto;                               /* 원본 비율 유지, 위쪽 기준 */
  }
  .intro .container { padding: 0 var(--mo-gutter); }
  .content_col { padding-right: 0; }
  .intro_title { font-size: calc(2.6 * var(--hr)); line-height: 1.4; letter-spacing: calc(-0.08 * var(--hr)); word-break: keep-all; }
  .bojong_bojang .intro_title { font-size: calc(2.4 * var(--hr)); }   /* 보장분석만 인트로 제목 2.4 (389px 이하 = 2.4rem) */
  .intro_desc { margin-top: calc(1.5 * var(--hr)); font-size: calc(1.8 * var(--hr)); line-height: 1.6; letter-spacing: calc(-0.04 * var(--hr)); word-break: keep-all; }
  .intro_arrow { width: calc(3.6 * var(--hr)); margin:calc(1.5 * var(--hr)) auto 0; bottom: 0; }


  /* ---------- Check 섹션 ---------- */
  .point { padding: 5rem 0; }
  .point:first-of-type { padding-top: 10rem; }
  .point,
  .point:first-of-type { min-height: 0; }
  .point_inner { padding: 0 var(--mo-gutter); }
  .point_inner > * { max-width: 100%; }

  .point_badge { margin-bottom: 1.2rem; padding: 0.2rem 1.4rem; font-size: 1.5rem; }
  .point_title {
    padding-bottom: 1.6rem;
    margin-bottom: 1.8rem;
    font-size: 2.7rem;
    letter-spacing: -0.08rem;
    word-break: keep-all;
    font-weight: 700;
  }
  .point_title.no_line { padding-bottom: 0; margin-bottom: 1.8rem; }

  .feature_box h3 { padding-left: 1.2rem; font-size: 2rem; letter-spacing: -0.04rem; word-break: keep-all; }
  .feature_box h3::before { left: 0; }
  .feature_box p { margin-top: 0.6rem; padding-left: 1.2rem; font-size: 1.5rem; line-height: 1.6; word-break: keep-all; }
  .feature_box figure { padding: 2rem 0; }
  .feature_box figure[style] { left: 0 !important; }   /* PC 전용 인라인 좌우 보정 해제 */
  /* 모바일 이미지 폭 : 마크업에 --mw 가 있으면 그 값, 없으면 PC 폭(--w) × --mo-img-scale
     예) style="--w:45rem; --mw:26rem;"  → PC 45rem / 모바일 26rem */
  .feature_box figure img[style*="--w"] { width: var(--mw, calc(var(--w) * var(--mo-img-scale))); }

  .terms { margin-top: 2.2rem; }
  .btn_terms_toggle,
  .btn_notice_toggle { gap: 0.6rem; padding: 0.9rem 1.8rem; font-size: 1.5rem; }
  .btn_terms_toggle .arrow,
  .btn_notice_toggle .arrow { width: 1.1rem; }
  .terms_content { padding-top: 1.8rem; }
  .terms_content p,
  .terms_content2,
  .terms_content2 p { font-size: 1.5rem; line-height: 1.6; }
  .terms_content p span,
  .terms_content2 p span { font-size: 2rem; }

  /* 유병자 : 3가지 질문 카드 → 세로 쌓기 */
  .yb_card { padding: 2.2rem 1.6rem; border-radius: 1.6rem; }
  /* 의사 이미지 왼쪽 + 질문 1·2·3 오른쪽 (가로) */
  .yb_card_top { flex-direction: row; align-items: center; gap: 1.2rem; }
  .yb_card_top figure { flex: 0 0 13rem; width: 9rem; }
  .yb_qlist { flex: 1 1 auto; min-width: 0; padding-left: 1.8rem; }
  .yb_qlist li,
  .yb_qlist .q { font-size: 1.5rem; }
  .yb_qlist li { margin-bottom: 1rem; }
  .yb_qlist .sub { font-size: 1.3rem; word-break: keep-all; }
  .yb_card_note { margin-top: 1.8rem; }
  .yb_card_note p { font-size: 1.3rem; }

  /* 보장분석 */
  .bojong_bojang .point { padding: 6rem 0; }
  .bojong_bojang .point:first-of-type { padding-top: 10rem; }
  .bojong_bojang .point.tall { padding: 5rem 0; }
  .bj_center .point_title { margin-bottom: 2.4rem; }
  .bj_donut { width: 20rem; }
  .bj_score_num { font-size: 4.4rem; }
  .bj_score_num em { font-size: 2.4rem; }
  .bj_stat { gap: 7.6rem; margin-top: 2.4rem; }
  .bj_stat .k { padding: 0.5rem 1.4rem; font-size: 1.4rem; }
  .bj_stat .v { font-size: 1.9rem; }
  .bj_bubbles { --bubble1-x: -2rem; --bubble2-x: 2rem; --bubble3-x: 0rem; --bubble-gap: 1.2rem; }
  .bj_bubbles li { min-width: 23rem; padding: 1.3rem 2rem; border-radius: 1.2rem; font-size: 1.5rem; }
  .bj_arrow { width: 3.6rem; margin-top: 2rem; }
  .bj_cs { margin-top: 2rem; }
  .bj_cs img { width: 18rem; }
  .bj_cta { margin-top: 1.6rem; font-size: 2rem; letter-spacing: -0.06rem; }


  /* ---------- 가입 시 유의사항 / 꼭 확인하세요 ---------- */
  .notice_wrap { padding: 3.2rem var(--mo-gutter) 4rem; }
  .notice_content { padding: 2rem 0 0; }
  .notice_wrap ul li { margin-bottom: 0rem; }
  .notice_wrap strong { font-size: 1.5rem; }
  .notice_wrap p { font-size: 1.5rem; line-height: 1.7; }

  .dep_logo { width: 9rem; }
  .dep_item .dep_logo { margin: 0.4rem 1.2rem 0 0; }

  .always_wrap { margin-top: 2.4rem; padding: 2rem 0 0; }
  .always_wrap > .dep_logo { display: none; }   /* 모바일 : 꼭 확인하세요 옆 예금보험공사 로고 숨김 (유의사항 안 로고는 유지) */
  .always_wrap .notice_title { margin-bottom: 0.8rem; font-size: 1.5rem; }
  .always_wrap ul li,
  .always_body > p:not(.notice_title):not(.sim_date) { font-size: 1.5rem; }


  /* ---------- 푸터 ---------- */
  .footer .inner { padding: 0; }


  /* ---------- 알림창 / 완료 모달 : 좁은 화면에서 문구가 2줄 안에 들어가게 ---------- */
  .custom_alert, #complete_modal { padding-left: 2rem; padding-right: 2rem; }
  .custom_alert { width: 33rem; }   /* 커스텀 알림창 : PC 40rem / 모바일 33rem */
  .custom_alert_msg, #complete_modal_msg { font-size: 1.9rem; }


  /* ---------- 하단 고정 폼 (노출/숨김은 index.html 스크립트, .show 클래스) ---------- */
  .btm_form {
    --btm-point: var(--blue2);   /* ★ 강조 글자 · 선택된 성별 · 신청 버튼 색 */
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 1.4rem 2.6rem calc(2rem + env(safe-area-inset-bottom));
    border-radius: 2.6rem 2.6rem 0 0;
    background: #fff;
    box-shadow: 0 -0.4rem 2rem #15748c59;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .btm_form.show {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  .btm_form_title {
    margin-bottom: 1.4rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.06rem;
    color: var(--ink);
    text-align: center;
    word-break: keep-all;
  }
  .btm_form_title .hl { color: var(--btm-point); }

  /* 왼쪽 입력 3줄 + 오른쪽 세로로 긴 신청 버튼 */
  .btm_form_body { display: flex; gap: 0.8rem; }
  .btm_form_fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .btm_row { display: flex; gap: 0.5rem; }
  /* 어린이 : 입력칸 위 레이블 */
  .btm_label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-align: left;
  }
  .bojong_child .btm_form_fields { gap: 1rem; }

  /* 오른쪽 버튼 칸 : 버튼이 1개면 전체 높이, 2개면 반씩 */
  .btm_form_btns { flex: 0 0 8.8rem; display: flex; flex-direction: column; gap: 0.8rem; }

  .btm_form input[type="text"],
  .btm_form input[type="tel"],
  .btm_form select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 3.8rem;
    box-sizing: border-box;
    padding: 0 1rem;
    border: 1px solid #c8ccd2;
    border-radius: 0.4rem;
    background-color: #fff;
    font-family: inherit;
    font-size: 1.4rem;
    color: var(--ink);
    outline: none;
  }
  .btm_form input::placeholder { color: #9a9a9a; }
  .btm_form input:focus,
  .btm_form select:focus { border-color: var(--btm-point); }

  .btm_form select {
    flex: 0 0 6rem;
    width: 6rem;
    padding: 0 1.8rem 0 0.9rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231b1b1b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.9rem auto;
  }

  .btm_sex { flex: none; display: flex; gap: 0.5rem; }
  .btm_sex input { display: none; }
  .btm_sex label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.8rem;
    box-sizing: border-box;
    border: 1px solid #c8ccd2;
    border-radius: 0.4rem;
    background: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
  }
  .btm_sex input:checked + label { border-color: var(--btm-point); background: var(--btm-point); color: #fff; }
  .bojong_child .btm_sex label { width: 5.2rem; font-size: 1.3rem; }   /* '남자 아이' / '여자 아이' */

  .btm_form_submit {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.4rem;
    background: var(--btm-point);
    color: #fff;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: keep-all;
    cursor: pointer;
  }
  .btm_form_submit .sub { margin-top: 0.2rem; font-size: 1.1rem; font-weight: 500; opacity: 0.85; }

  /* 푸터 아래 여백 : 하단 폼이 떠 있을 때만 폼 높이만큼 확보
     (폼 높이는 JS 가 --btm-form-h 로, 노출 여부는 <html class="btm_form_on"> 으로 넣어줌) */
  footer.footer { padding-bottom: 3rem; transition: padding-bottom 0.3s ease; }   /* 하단 폼(transform 0.3s ease)과 같은 속도로 늘고 줄어듦 */
  .btm_form_on footer.footer { padding-bottom: calc(var(--btm-form-h, 22rem) + 2rem); }
}


/* =========================================================
   작은 폰 (≤ 389px) : 390 시안을 화면 폭에 비례해 축소
   rem 기준(1rem)을 화면 폭에 맞춰 줄여서 모든 크기가 같은 비율로 작아진다.
   → 히어로 카드 문구가 줄바꿈으로 늘어나 폴더 배경(고정 비율)과 어긋나는 문제 방지
   (390px 에서 정확히 10px, 360px → 9.23px, 320px → 8.2px)
   ========================================================= */
@media (max-width: 389px) {
  html { font-size: calc(100vw / 39); }
}