:root {
  --main-color: #FF4038;;
  --point-color: #FF4038;   /* 빨간 CTA, 하트 */
  --mint: #DDF3E6;
  --mint-deep: #23996A;
  --cream: #FBF6E6;
  --ink: #0F1B3D;
}

.highlight {font-weight: 700; color: var(--point-color);}
header {margin-bottom: 100px; padding-top: 20px;}
header .inner {display: flex; justify-content: space-between; align-items: center;}
header .inner .logo {width: 140px;}
header .inner .logo a {}
header .inner .logo a img {width: 100%; height: auto;}
header .inner .time_wrap {background: #fff; border-radius: 100px; padding: 12px 18px; color: #111; font-size: 16px; font-weight: 500;}
header .inner .time_wrap span { background: var(--main-color); color: #fff; padding: 6px 12px; border-radius: 200px; margin-right: 4px;}

section {padding: 80px 0;}

/* ══════ 공통 — 섹션 제목 (section2 ~ section_qna) ══════ */
section .inner .title_wrap {margin-bottom: 50px; display: flex; flex-direction: column; align-items: center;}
section .inner .title_wrap .section_label {display: inline-block; width: fit-content; margin-bottom: 14px; padding: 7px 18px; border-radius: 100px; background: var(--mint); color: var(--mint-deep); font-size: 15px; font-weight: 700;}
section .inner .title_wrap h2 {text-align: center; font-size: 36px; font-weight: 800; line-height: 1.3; color: var(--ink); word-break: keep-all;}
section .inner .title_wrap h2 b {color: var(--point-color);}
section .inner .title_wrap p {margin-top: 16px; text-align: center; font-size: 19px; line-height: 1.7; color: #667; word-break: keep-all;}

@media (max-width: 1200px) {
  section .inner .title_wrap h2 {font-size: 31px;}
}

@media (max-width: 900px) {
  section .inner .title_wrap {margin-bottom: 40px;}
  section .inner .title_wrap h2 {font-size: 27px;}
  section .inner .title_wrap p {font-size: 17px;}
}

@media (max-width: 768px) {
  section {padding: 60px 0;}
  section .inner .title_wrap .section_label {padding: 6px 15px; font-size: 14px;}
}

@media (max-width: 550px) {
  section {padding: 50px 0;}
  section .inner .title_wrap {margin-bottom: 32px;}
  section .inner .title_wrap h2 {font-size: 23px;}
  section .inner .title_wrap p {font-size: 16px;}

  /* PC 기준으로 넣은 줄바꿈이 좁은 화면에서는 어색하게 끊긴다 */
  section .inner .title_wrap p br {display: none;}
}


/* ══════ section1 — 히어로 ══════ */
#section1 {
  --curve: 120px;  /* 하단 곡선 높이 */
  --paw: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23A6DABE'><ellipse cx='32' cy='42' rx='14' ry='11'/><ellipse cx='14' cy='27' rx='6' ry='8' transform='rotate(-20 14 27)'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='27' rx='6' ry='8' transform='rotate(20 50 27)'/></g></svg>");
  --paw-red: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23FF4038'><ellipse cx='32' cy='42' rx='14' ry='11'/><ellipse cx='14' cy='27' rx='6' ry='8' transform='rotate(-20 14 27)'/><ellipse cx='26' cy='16' rx='6' ry='8'/><ellipse cx='38' cy='16' rx='6' ry='8'/><ellipse cx='50' cy='27' rx='6' ry='8' transform='rotate(20 50 27)'/></g></svg>");
  --heart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='%23FF4038' d='M32 58C10 42 4 28 4 19a14 14 0 0 1 28-4 14 14 0 0 1 28 4c0 9-6 23-28 39z'/></svg>");
  --bone: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23F7ECCB' transform='rotate(-30 32 32)'><rect x='14' y='25' width='36' height='14' rx='6'/><circle cx='14' cy='24' r='8'/><circle cx='14' cy='40' r='8'/><circle cx='50' cy='24' r='8'/><circle cx='50' cy='40' r='8'/></g></svg>");

  position: relative; padding: 0 0 calc(var(--curve) + 80px); margin-bottom: 0; overflow: hidden;
  background:
    radial-gradient(circle at 68% 55%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #B8EBD0 0%, #D3EFCF 45%, #F4E9C8 100%);
}

/* 왼쪽 아래 — 흐린 발바닥 무늬 */
#section1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    var(--paw) no-repeat 5%  60% / 34px,
    var(--paw) no-repeat 12% 67% / 36px,
    var(--paw) no-repeat 22% 73% / 38px,
    var(--paw) no-repeat 31% 77% / 34px;
}

/* 아래쪽 곡선 (기존 유지) */
#section1::after {content: ''; position: absolute; left: -10%; bottom: -1px; width: 120%; height: var(--curve); background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0;}

/* 헤더와 본문은 배경 장식 위로 */
#section1 header {position: relative; z-index: 1;}
#section1 > .inner {position: relative; z-index: 1;}

/* 폼 카드 위 모서리에 걸쳐 떠 있는 하트 / 뼈다귀 / 발바닥 */
#section1 .inner .form_wrap {position: relative;}
#section1 .inner .form_wrap::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; pointer-events: none;
  background:
    var(--heart)   no-repeat 28% 45% / 32px,
    var(--bone)    no-repeat 58% 10% / 58px,
    var(--paw-red) no-repeat 90% 55% / 34px;
  animation: deco_float 5s ease-in-out infinite;
}

@keyframes deco_float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-10px);}}

/* 제목 + 강아지 (왼쪽) / 폼 (오른쪽) */
#section1 .inner .content_wrap {display: flex; gap: 40px;}
/* 제목 쪽은 남는 폭을 모두 쓰고, 폼은 고정 비율 (58% + 48% + 간격이 100% 를 넘던 문제 수정) */
#section1 .inner .content_wrap .title_wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1; min-width: 0; margin-bottom: 0;}
#section1 .inner .content_wrap .title_wrap h1 {font-size: 46px; font-weight: 800; text-align: left; line-height: 1.3; color: #0F1B3D; word-break: keep-all;}
#section1 .inner .content_wrap .title_wrap h1 b {color: var(--point-color);}
#section1 .inner .content_wrap .title_wrap p { text-align: left; margin: 0;}
#section1 .inner .content_wrap .title_wrap img {align-self: flex-end; width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 18px 14px rgba(0, 60, 40, 0.14)); position: absolute; bottom: 0;}

/* 폼 카드 */

#section1 .inner .form_wrap {flex: 0 0 46%; max-width: 560px; background: #fff; padding: 40px 32px; border-radius: 32px; box-shadow: 0 24px 60px rgba(0, 60, 40, 0.14);}
#section1 .inner .form_wrap h2 {font-size: 26px; text-align: center; font-weight: 700; margin-bottom: 26px;}
#section1 .inner .form_wrap ul {display: flex; flex-direction: column; gap: 16px;}
#section1 .inner .form_wrap ul li {display: flex; flex-direction: column; gap: 8px;}
#section1 .inner .form_wrap ul li .input_box { display: flex; gap: 8px;}
#section1 .inner .form_wrap ul li .name_wrap {display: flex; align-items: center; width: 100%;}
#section1 .inner .form_wrap ul li .label,
#section1 .inner .form_wrap ul li label {font-size: 22px; font-weight: 500;}
#section1 .inner .form_wrap ul li input[type='text'] {background: #F1F1F4; border: 1px solid #E4E4EA; height: 54px; padding: 15px; font-size: 20px; border-radius: 14px; width: 100%; transition: border-color 0.2s, background 0.2s;}
#section1 .inner .form_wrap ul li input[type='text']:focus {outline: none; background: #fff; border-color: var(--point-color);}
#section1 .inner .form_wrap ul li input::placeholder {color: #aaa;}
#section1 .inner .form_wrap ul li .phone_input_wrap {display: flex; gap: 10px; width: 100%;}
#section1 .inner .form_wrap ul li .phone_select {width: 100px; background: #F1F1F4 url("../img/arrow_down.svg") no-repeat right 12px center; background-size: 24px; border: 1px solid #E4E4EA; height: 54px; padding: 0 40px 0 15px; font-size: 20px; border-radius: 14px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
#section1 .inner .form_wrap ul li .phone_input {flex: 1;}
#section1 .inner .form_wrap ul li .gender_wrap {display: flex; gap: 8px; align-items: center;}
#section1 .inner .form_wrap ul li .gender_wrap input[type="radio"] {display: none;}
#section1 .inner .form_wrap ul li .gender_wrap label {padding: 0; background: #F1F1F4; border: 1px solid #E4E4EA; border-radius: 14px; cursor: pointer; font-size: 20px; font-weight: 500; transition: all 0.3s; user-select: none; min-width: 0; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0;}
#section1 .inner .form_wrap ul li .gender_wrap input[type="radio"]:checked + label {background: var(--point-color); border-color: var(--point-color); color: #fff;}
#section1 .inner .form_wrap .submit_btn {width: 100%; background-color: var(--point-color); color: #fff; padding: 18px 20px; font-size: 19px; font-weight: 700; border-radius: 100px; cursor: pointer; margin-top: 22px; box-shadow: 0 10px 24px rgba(255, 64, 56, 0.3); transition: filter 0.2s;}
#section1 .inner .form_wrap .submit_btn:hover {filter: brightness(1.08);}

/* ── 펫보험 2단계 추가 ───────────────────────── */

/* 단계 전환 */
#section1 .inner .form_wrap .form_step {display: none;}
#section1 .inner .form_wrap .form_step.active {display: block;}

/* 1단계 안내 문구 (h2 바로 아래) */
#section1 .inner .form_wrap .form_desc {font-size: 16px; color: #888; text-align: center; margin: -16px 0 22px;}

/* 병원 방문 질문 — 문구가 길어서 위아래로 쌓는다 */
#section1 .inner .form_wrap ul li.question_item {flex-direction: column; align-items: stretch; gap: 10px;}
#section1 .inner .form_wrap ul li .label {font-size: 22px; font-weight: 500;}

/* 예/아니오 — 성별 버튼과 같은 톤 */
#section1 .inner .form_wrap ul li .choice_wrap {display: flex; gap: 10px;}
#section1 .inner .form_wrap ul li .choice_btn {flex: 1; height: 54px; background: #F1F1F4; border: 1px solid #E4E4EA; border-radius: 14px; font-size: 20px; font-weight: 500; cursor: pointer; transition: all 0.3s;}
#section1 .inner .form_wrap ul li .choice_btn.active {background: var(--point-color); border-color: var(--point-color); color: #fff;}

/* 이전 + 신청 버튼 */
#section1 .inner .form_wrap .btn_wrap {display: flex; gap: 10px; margin-top: 22px;}
#section1 .inner .form_wrap .btn_wrap .submit_btn {flex: 1; margin-top: 0;}
#section1 .inner .form_wrap .btn_wrap .prev_btn {flex: 0 0 28%; background: #fff; color: #555; border: 1px solid #E4E4EA; padding: 18px 20px; font-size: 19px; font-weight: 700; border-radius: 100px; cursor: pointer; transition: background 0.2s;}
#section1 .inner .form_wrap .btn_wrap .prev_btn:hover {background: #F1F1F4;}



/* ── section1 반응형 ── */
@media (max-width: 1200px) {
  /* PC 헤더가 사라지고 모바일 헤더가 따로 붙으므로 위 여백을 확보한다 */
  #section1 {padding-top: 80px;}
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 40px;}
}

@media (max-width: 1150px) {
  #section1 {padding: 80px 0 calc(var(--curve) + 40px);}

  /* 좌우 배치를 위아래로 세운다 (폼 위 장식이 놓일 자리를 위해 간격을 준다) */
  #section1 .inner .content_wrap {flex-direction: column; gap: 70px;}
  #section1 .inner .content_wrap .title_wrap {width: 100%; align-items: center;}
  #section1 .inner .content_wrap .title_wrap h1 {text-align: center;}
  #section1 .inner .content_wrap .title_wrap p {text-align: center;}
  #section1 .inner .content_wrap .title_wrap img {display: none;}

  /* 세로 배치에서는 absolute 이미지가 폼 뒤로 깔리므로 흐름 안으로 돌려놓는다 */
  #section1 .inner .content_wrap .title_wrap img {position: static; align-self: center; max-width: 260px;}
  #section1 .inner .form_wrap {flex: none; width: 100%; max-width: 640px; margin: 0 auto;}
}

@media (max-width: 900px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 36px;}
  #section1 .inner .content_wrap .title_wrap p {font-size: 17px;}
}

@media (max-width: 768px) {
  #section1 {--curve: 70px; padding: 50px 0 calc(var(--curve) + 30px);}
  #section1::before {opacity: 0.6;}
  #section1 .inner .content_wrap .title_wrap {gap: 16px;}
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 32px;}
  #section1 .inner .form_wrap {padding: 34px 28px; border-radius: 26px;}
  #section1 .inner .form_wrap h2 {font-size: 24px; margin-bottom: 22px;}
  #section1 .inner .form_wrap ul li .label,
  #section1 .inner .form_wrap ul li label {font-size: 20px; min-width: 90px;}
}

@media (max-width: 550px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 28px;}
  #section1 .inner .content_wrap .title_wrap p {font-size: 16px;}
  #section1 .inner .content_wrap .title_wrap img {max-width: 220px;}
  #section1 .inner .form_wrap h2 {font-size: 22px;}
  #section1 .inner .form_wrap {padding: 30px 24px; border-radius: 22px;}
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select {height: 50px;}
  #section1 .inner .form_wrap ul li .gender_wrap label {width: 50px; height: 50px;}
  #section1 .inner .form_wrap .submit_btn {padding: 16px 20px; font-size: 18px;}
  #section1 .inner .form_wrap ul li .label,
  #section1 .inner .form_wrap ul li label,
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select,
  #section1 .inner .form_wrap ul li .gender_wrap label {font-size: 18px;}
  #section1 .inner .form_wrap ul li .label,
  #section1 .inner .form_wrap ul li label {min-width: 70px;}
  #section1 .inner .form_wrap ul li .choice_btn {height: 50px; font-size: 18px;}
  #section1 .inner .form_wrap .btn_wrap .prev_btn {padding: 16px 20px; font-size: 18px;}
}

@media (max-width: 450px) {
  #section1 .inner .form_wrap {padding: 30px 20px;}
  #section1 .inner .form_wrap ul li .label,
  #section1 .inner .form_wrap ul li label,
  #section1 .inner .form_wrap ul li input[type='text'],
  #section1 .inner .form_wrap ul li .phone_select,
  #section1 .inner .form_wrap ul li .gender_wrap label,
  #section1 .inner .form_wrap .submit_btn {font-size: 16px;}
  #section1 .inner .form_wrap ul li .label,
  #section1 .inner .form_wrap ul li label {min-width: 65px;}
  #section1 .inner .form_wrap ul li .phone_input_wrap {gap: 8px;}
  #section1 .inner .form_wrap ul li .phone_select {width: 86px; padding: 0 30px 0 12px; background-position: right 8px center; background-size: 20px;}
  #section1 .inner .form_wrap ul li .choice_btn {font-size: 16px;}
  #section1 .inner .form_wrap .btn_wrap {gap: 8px;}
  #section1 .inner .form_wrap .btn_wrap .prev_btn {flex-basis: 26%; padding: 16px 10px; font-size: 16px;}
  #section1 .inner .form_wrap .btn_wrap .submit_btn {padding: 16px 12px; word-break: keep-all;}
}

@media (max-width: 400px) {
  #section1 .inner .content_wrap .title_wrap h1 {font-size: 25px;}
  /* 이름 + 성별은 한 줄로 유지하고 성별 버튼만 조금 줄인다 */
  #section1 .inner .form_wrap ul li .input_box {gap: 6px;}
  #section1 .inner .form_wrap ul li .gender_wrap {gap: 6px;}
  #section1 .inner .form_wrap ul li .gender_wrap label {width: 46px; height: 50px;}

}

@media (max-width: 340px) {
  /* 정말 좁을 때만 성별을 아래 줄로 내린다 */
  #section1 .inner .form_wrap ul li .input_box {flex-wrap: wrap;}
  #section1 .inner .form_wrap ul li .gender_wrap {width: 100%;}
  #section1 .inner .form_wrap ul li .gender_wrap label {flex: 1; width: auto;}
}


/* ══════ section2 — 펫보험이 필요한 순간 ══════ */
#section2 {background: #fff;}
#section2 .inner .why_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
#section2 .inner .why_list li {padding: 40px 32px; border-radius: 28px; background: var(--mint); transition: transform 0.3s, box-shadow 0.3s;}
#section2 .inner .why_list li:nth-child(2) {background: #F8EFCF;}
#section2 .inner .why_list li:nth-child(3) {background: #FFE7E4;}
#section2 .inner .why_list li:hover {transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);}
#section2 .inner .why_list li .icon {display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 50%; background: #fff; font-size: 32px;}
#section2 .inner .why_list li h3 {margin-bottom: 12px; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--ink); word-break: keep-all;}
#section2 .inner .why_list li p {font-size: 18px; line-height: 1.65; color: #4E6157; word-break: keep-all;}
#section2 .inner .why_list li p b {color: var(--ink); font-weight: 700;}

@media (max-width: 1200px) {
  #section2 .inner .why_list li {padding: 34px 26px;}
}

@media (max-width: 900px) {
  #section2 .inner .why_list {grid-template-columns: 1fr; gap: 16px;}
}

@media (max-width: 768px) {
  #section2 .inner .why_list li {padding: 28px 24px; border-radius: 20px;}
}

/* 손가락 조작에는 hover 가 없어 떠오르는 효과를 끈다 (태블릿 가로 모드 포함) */
@media (hover: none) {
  #section2 .inner .why_list li:hover {transform: none; box-shadow: none;}
}

@media (max-width: 550px) {
  #section2 .inner .why_list li .icon {width: 58px; height: 58px; margin-bottom: 18px; font-size: 27px;}
  #section2 .inner .why_list li h3 {font-size: 21px;}
  #section2 .inner .why_list li p {font-size: 16px;}
}


/* ══════ section3 — 보장 구성 ══════ */
#section3 {background: var(--cream);}
#section3 .inner .coverage_list {display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px;}
#section3 .inner .coverage_list li {grid-column: span 2; padding: 36px 30px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(120, 100, 40, 0.08);}
/* #section3 .inner .coverage_list li:nth-child(4) {grid-column: 2 / span 2;}
#section3 .inner .coverage_list li:nth-child(5) {grid-column: 4 / span 2;} */
#section3 .inner .coverage_list li .tag {display: inline-block; margin-bottom: 16px; padding: 5px 14px; border-radius: 100px; background: var(--mint-deep); color: #fff; font-size: 14px; font-weight: 700;}
#section3 .inner .coverage_list li .tag.option {background: var(--point-color);}
#section3 .inner .coverage_list li h3 {margin-bottom: 12px; font-size: 23px; font-weight: 700; color: var(--ink);}
#section3 .inner .coverage_list li p {font-size: 18px; line-height: 1.65; color: #666; word-break: keep-all;}
#section3 .inner .notice {margin-top: 30px; text-align: center; font-size: 15px; line-height: 1.6; color: #8A8467; word-break: keep-all;}

@media (max-width: 1200px) {
  #section3 .inner .coverage_list {gap: 20px;}
  #section3 .inner .coverage_list li {padding: 30px 26px;}
}

@media (max-width: 900px) {
  /* 6칸 격자를 2칸으로. 다섯 번째는 가운데로 보낸다 */
  #section3 .inner .coverage_list {grid-template-columns: repeat(2, 1fr);}
  #section3 .inner .coverage_list li,
  #section3 .inner .coverage_list li:nth-child(4) {grid-column: auto;}
  #section3 .inner .coverage_list li:nth-child(5) {grid-column: 1 / -1; width: calc(50% - 10px); margin: 0 auto;}
}

@media (max-width: 768px) {
  /* 한 칸으로 세운다 */
  #section3 .inner .coverage_list {grid-template-columns: 1fr; gap: 16px;}
  #section3 .inner .coverage_list li {padding: 26px 22px; border-radius: 20px;}
  #section3 .inner .coverage_list li:nth-child(5) {width: 100%;}
}

@media (max-width: 550px) {
  #section3 .inner .coverage_list li h3 {font-size: 20px;}
  #section3 .inner .coverage_list li p {font-size: 16px;}
  #section3 .inner .notice {font-size: 14px;}
}


/* ══════ section4 — 가입 전 확인사항 + CTA ══════ */
#section4 {background: #fff;}
#section4 .inner .checklist {display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto;}
#section4 .inner .checklist li {display: flex; align-items: flex-start; gap: 22px; padding: 28px 30px; border: 1px solid #DDF0E4; border-radius: 24px; background: #F7FBF8;}
#section4 .inner .checklist li .num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--mint-deep); color: #fff; font-size: 19px; font-weight: 800;}
#section4 .inner .checklist li .txt h3 {margin-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--ink);}
#section4 .inner .checklist li .txt p {font-size: 17px; line-height: 1.65; color: #667; word-break: keep-all;}
#section4 .inner .cta_box {max-width: 900px; margin: 50px auto 0; padding: 46px 30px; border-radius: 32px; text-align: center; background: linear-gradient(180deg, #B8EBD0 0%, #F4E9C8 100%);}
#section4 .inner .cta_box p {margin-bottom: 24px; font-size: 26px; font-weight: 800; line-height: 1.4; color: var(--ink); word-break: keep-all;}
#section4 .inner .cta_box button {padding: 18px 46px; border-radius: 100px; background: var(--point-color); color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 64, 56, 0.3); transition: filter 0.2s;}
#section4 .inner .cta_box button:hover {filter: brightness(1.08);}

@media (max-width: 1200px) {
  #section4 .inner .checklist li {padding: 24px;}
  #section4 .inner .checklist li .txt h3 {font-size: 20px;}
}

@media (max-width: 900px) {
  #section4 .inner .checklist {gap: 14px;}
  #section4 .inner .checklist li {gap: 18px;}
  #section4 .inner .checklist li .num {width: 42px; height: 42px; font-size: 17px;}
  #section4 .inner .cta_box p {font-size: 23px;}
}

@media (max-width: 768px) {
  #section4 .inner .checklist li {gap: 15px; padding: 22px 20px; border-radius: 20px;}
  #section4 .inner .checklist li .txt h3 {font-size: 19px;}
  #section4 .inner .checklist li .txt p {font-size: 16px;}
  #section4 .inner .cta_box {margin-top: 40px; padding: 36px 20px; border-radius: 24px;}
  #section4 .inner .cta_box p {font-size: 21px;}
}

@media (max-width: 550px) {
  /* 번호를 글 위로 올려 본문 폭을 확보한다 */
  #section4 .inner .checklist li {flex-direction: column; gap: 12px;}
  #section4 .inner .checklist li .num {width: 36px; height: 36px; font-size: 15px;}
  #section4 .inner .checklist li .txt h3 {margin-bottom: 8px; font-size: 18px;}
  #section4 .inner .cta_box p br {display: none;}
  #section4 .inner .cta_box button {width: 100%; padding: 17px 20px;}
}


/* ══════ section5 — 알아두면 좋은 펫보험 정보 ══════
   위(section4)는 흰색, 아래(section_qna)는 크림이라 그 사이를 옅은 민트로 나눈다 */
#section5 {background: #F2FAF5;}
#section5 .inner .info_block + .info_block {margin-top: 70px;}
#section5 .inner .info_title {display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; font-size: 26px; font-weight: 800; color: var(--ink); word-break: keep-all;}
#section5 .inner .info_title::before,
#section5 .inner .info_title::after {content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--mint-deep); opacity: 0.4;}

/* 자주 찾는 진료 — 반려견 / 반려묘 두 장 */
#section5 .inner .disease_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
#section5 .inner .disease_list > li {padding: 36px 32px; border-radius: 28px; background: #fff; box-shadow: 0 10px 30px rgba(0, 60, 40, 0.06);}
#section5 .inner .disease_list .card_head {display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed #D5E9DD;}
#section5 .inner .disease_list .card_head .icon {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 68px; height: 68px; border-radius: 50%; background: var(--mint); font-size: 32px;}
#section5 .inner .disease_list > li:nth-child(2) .card_head .icon {background: #FFE7E4;}
#section5 .inner .disease_list .card_head h4 {margin-bottom: 6px; font-size: 24px; font-weight: 800; color: var(--ink);}
#section5 .inner .disease_list .card_head p {font-size: 16px; line-height: 1.6; color: #667; word-break: keep-all;}
#section5 .inner .disease_items {display: flex; flex-direction: column; gap: 10px;}
#section5 .inner .disease_items li {display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #F7FBF8;}
#section5 .inner .disease_items li b {flex-shrink: 0; min-width: 130px; font-size: 18px; font-weight: 700; color: var(--ink);}
#section5 .inner .disease_items li span {font-size: 16px; line-height: 1.5; color: #667; word-break: keep-all;}
#section5 .inner .notice {margin-top: 24px; text-align: center; font-size: 15px; line-height: 1.6; color: #7A8C82; word-break: keep-all;}

/* 보험금 청구 흐름 — 4단계, 사이에 화살표 */
#section5 .inner .claim_flow {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
#section5 .inner .claim_flow li {position: relative; padding: 32px 22px; border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(0, 60, 40, 0.06);}
#section5 .inner .claim_flow li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: -15px; z-index: 1; width: 10px; height: 10px; border-top: 3px solid var(--mint-deep); border-right: 3px solid var(--mint-deep); opacity: 0.6; transform: translateY(-50%) rotate(45deg);}
#section5 .inner .claim_flow .step {display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 100px; background: var(--mint-deep); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.5px;}
#section5 .inner .claim_flow .icon {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--mint); font-size: 30px;}
#section5 .inner .claim_flow h4 {margin-bottom: 10px; font-size: 21px; font-weight: 700; color: var(--ink);}
#section5 .inner .claim_flow p {font-size: 16px; line-height: 1.6; color: #667; word-break: keep-all;}

@media (max-width: 1200px) {
  #section5 .inner .disease_list {gap: 20px;}
  #section5 .inner .disease_list > li {padding: 30px 26px;}
  #section5 .inner .disease_items li b {min-width: 118px; font-size: 17px;}
  #section5 .inner .claim_flow {gap: 20px;}
  #section5 .inner .claim_flow li {padding: 28px 18px;}
  #section5 .inner .claim_flow li:not(:last-child)::after {right: -14px;}
}

@media (max-width: 900px) {
  #section5 .inner .info_block + .info_block {margin-top: 60px;}
  #section5 .inner .info_title {font-size: 23px;}
  #section5 .inner .disease_list {grid-template-columns: 1fr; gap: 16px;}

  /* 4칸 → 2칸. 줄 끝(2번째)의 화살표는 다음 줄로 이어지지 않으므로 숨긴다 */
  #section5 .inner .claim_flow {grid-template-columns: repeat(2, 1fr);}
  #section5 .inner .claim_flow li:nth-child(2)::after {display: none;}
}

@media (max-width: 768px) {
  #section5 .inner .info_block + .info_block {margin-top: 50px;}
  #section5 .inner .info_title {margin-bottom: 22px; font-size: 21px;}
  #section5 .inner .disease_list > li {padding: 26px 22px; border-radius: 20px;}
  #section5 .inner .disease_list .card_head {gap: 14px; margin-bottom: 18px; padding-bottom: 18px;}
  #section5 .inner .disease_list .card_head .icon {width: 56px; height: 56px; font-size: 27px;}
  #section5 .inner .disease_list .card_head h4 {font-size: 21px;}
  #section5 .inner .disease_list .card_head p {font-size: 15px;}
  #section5 .inner .disease_items li {padding: 12px 16px;}
  #section5 .inner .disease_items li b {min-width: 110px; font-size: 16px;}
  #section5 .inner .disease_items li span {font-size: 15px;}
  #section5 .inner .claim_flow {gap: 16px;}
  #section5 .inner .claim_flow li {padding: 24px 16px; border-radius: 20px;}
  #section5 .inner .claim_flow li:not(:last-child)::after {right: -11px;}
  #section5 .inner .claim_flow h4 {font-size: 19px;}
  #section5 .inner .claim_flow p {font-size: 15px;}
}

@media (max-width: 550px) {
  #section5 .inner .info_title::before,
  #section5 .inner .info_title::after {width: 18px;}

  /* 질환명과 설명을 위아래로 */
  #section5 .inner .disease_items li {flex-direction: column; align-items: flex-start; gap: 2px;}
  #section5 .inner .disease_items li b {min-width: 0;}
  #section5 .inner .notice {font-size: 14px;}

  /* 한 칸으로 세우고, 아이콘은 왼쪽 · 글은 오른쪽으로 눕힌다 */
  #section5 .inner .claim_flow {grid-template-columns: 1fr; gap: 24px;}
  #section5 .inner .claim_flow li {display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 20px 18px; text-align: left;}
  #section5 .inner .claim_flow .icon {grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; font-size: 25px;}
  #section5 .inner .claim_flow .step {grid-column: 2; justify-self: start; margin-bottom: 8px; font-size: 12px;}
  #section5 .inner .claim_flow h4 {grid-column: 2; margin-bottom: 6px; font-size: 18px;}
  #section5 .inner .claim_flow p {grid-column: 2;}

  /* 화살표는 카드 사이 아래 방향으로 */
  #section5 .inner .claim_flow li:not(:last-child)::after,
  #section5 .inner .claim_flow li:nth-child(2)::after {display: block; top: auto; right: auto; top: 103%; left: 50%; transform: rotate(135deg) translate(-50%,-50%);}
}


/* ══════ section_qna — 자주 묻는 질문 ══════
   배경은 section3 과 같은 크림, 질문 하나하나는 흰 카드.
   번호 배지 · 열림 표시는 section4 체크리스트와 같은 민트 계열 */
#section_qna {background: var(--cream);}
#section_qna .inner .qna_list {display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 900px; margin: 0 auto;}
#section_qna .inner .qna_list .qna_item {border: 1px solid transparent; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(120, 100, 40, 0.08); transition: border-color 0.3s;}
#section_qna .inner .qna_list .qna_item.active {border-color: var(--mint-deep);}
#section_qna .inner .qna_list .qna_item .qna_question {display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 28px; text-align: left; cursor: pointer; background: none; border: none;}
#section_qna .inner .qna_list .qna_item .qna_num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--mint-deep); font-size: 16px; font-weight: 800; transition: background 0.3s, color 0.3s;}
#section_qna .inner .qna_list .qna_item .qna_text {flex: 1; font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--ink); word-break: keep-all;}
#section_qna .inner .qna_list .qna_item .qna_arrow {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--mint-deep); font-size: 24px; font-weight: 400; line-height: 1; transition: transform 0.3s, background 0.3s, color 0.3s;}
#section_qna .inner .qna_list .qna_item .qna_answer {display: none; padding: 0 28px 28px 90px;}   /* 배지 44 + 간격 18 + 좌우 여백 28 = 질문 글자와 같은 줄에 맞춘다 */
#section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 18px; line-height: 1.8; color: #666; word-break: keep-all;}
#section_qna .inner .qna_list .qna_item.active .qna_num {background: var(--mint-deep); color: #fff;}
#section_qna .inner .qna_list .qna_item.active .qna_arrow {transform: rotate(45deg); background: var(--mint-deep); color: #fff;}
#section_qna .inner .qna_list .qna_item.active .qna_answer {display: block; animation: qna_open 0.3s ease;}
@keyframes qna_open {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: translateY(0);}}

@media (max-width: 1200px) {
  #section_qna .inner .qna_list .qna_item .qna_question {padding: 22px 24px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 20px;}
  #section_qna .inner .qna_list .qna_item .qna_answer {padding: 0 24px 26px 86px;}
}

@media (max-width: 900px) {
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 19px;}
  #section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 17px;}
}

@media (max-width: 768px) {
  #section_qna .inner .qna_list {gap: 12px;}
  #section_qna .inner .qna_list .qna_item {border-radius: 20px;}
  #section_qna .inner .qna_list .qna_item .qna_question {gap: 14px; padding: 18px;}
  #section_qna .inner .qna_list .qna_item .qna_num {width: 36px; height: 36px; font-size: 14px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 17px;}
  #section_qna .inner .qna_list .qna_item .qna_arrow {width: 30px; height: 30px; font-size: 22px;}
  #section_qna .inner .qna_list .qna_item .qna_answer {padding: 0 18px 22px 68px;}   /* 18 + 배지 36 + 간격 14 */
  #section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 16px; line-height: 1.7;}
}

@media (max-width: 550px) {
  #section_qna .inner .qna_list .qna_item .qna_question {gap: 12px; padding: 16px;}
  #section_qna .inner .qna_list .qna_item .qna_num {width: 32px; height: 32px; font-size: 13px;}
  #section_qna .inner .qna_list .qna_item .qna_text {font-size: 16px;}
  #section_qna .inner .qna_list .qna_item .qna_answer {padding: 0 16px 20px 60px;}   /* 16 + 배지 32 + 간격 12 */
  #section_qna .inner .qna_list .qna_item .qna_answer p {font-size: 15px;}
}


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

/* ── 푸터 — 사업자 정보는 왼쪽, 약관은 오른쪽. 저작권만 선 아래로 ──
   메인컬러를 따르지 않고 중립 다크를 쓴다.
   랜딩마다 메인컬러가 달라서, 밝은 색이 오면 흰 글씨가 묻히기 때문이다. */
.footer {padding: 54px 0 44px; background: #252525; color: rgba(255, 255, 255, 0.68);}

.footer_main {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;}

.footer_info {display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; max-width: 760px; font-style: normal; font-size: 14px; line-height: 1.7;}
.footer_info strong {width: 100%; margin-bottom: 2px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.3px;}
.footer_info span {position: relative;}
.footer_info span + span::before {content: ''; position: absolute; left: -10px; top: 50%; width: 3px; height: 3px; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.35);}
.footer_info .addr {flex-basis: 100%;}
.footer_info .addr::before {display: none;}

.footer_links {display: flex; align-items: center; gap: 22px; flex-shrink: 0;}
.footer_links a {position: relative; font-size: 14px; font-weight: 600; color: #fff; transition: opacity 0.15s ease;}
.footer_links a:hover {opacity: 0.65;}
.footer_links a + a::before {content: ''; position: absolute; left: -11px; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.28);}

.footer .copyright {margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: rgba(255, 255, 255, 0.45);}

/* ══════════════════════════════════════════════════
   모바일 헤더 — 1200px 이하에서만 보인다 (PC 헤더와 교대)
   ══════════════════════════════════════════════════ */

.m_header {display: none;}
.m_menu_dim {display: none;}

@media (max-width: 1300px) {
  .inner {width: 93%;}
}

@media (max-width: 1200px) {
  header {display: none;}

  /* ── 상단 바 ── */
  .m_header {display: block; position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 2px 12px rgba(23, 59, 108, 0.1);}
  .m_header_bar {display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;}
  .m_header_bar .logo {width: 92px;}
  .m_header_bar .logo a {display: block;}
  .m_header_bar .logo a img {width: 100%; height: auto;}

  /* ── 햄버거 버튼 (열리면 X 로 변한다) ── */
  .m_menu_btn {display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;}
  .m_menu_btn span {display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--main-color); transition: transform 0.25s ease, opacity 0.2s ease;}
  .m_menu_btn.open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
  .m_menu_btn.open span:nth-child(2) {opacity: 0;}
  .m_menu_btn.open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

  /* ── 드롭다운 — 높이를 0 에서 펼쳐 슬라이드처럼 보이게 한다 ── */
  .m_menu {display: grid; grid-template-rows: 0fr; overflow: hidden; background: #fff; border-top: 1px solid #eef1f5; transition: grid-template-rows 0.28s ease;}
  .m_menu.open {grid-template-rows: 1fr;}
  .m_menu_inner {min-height: 0; overflow: hidden;}

  .m_menu_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px 18px 6px;}
  .m_menu_list li {border: 1px solid #dfe4ea; border-radius: 10px; background: #fff; transition: background 0.15s ease, border-color 0.15s ease;}
  .m_menu_list li a {display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: #333;}
  .m_menu_list li a img {width: 24px; height: 24px; object-fit: contain;}
  .m_menu_list li.active {background: var(--main-color); border-color: var(--main-color);}
  .m_menu_list li.active a {color: #fff;}
  .m_menu_list li.active a img {filter: brightness(0) invert(1);}

  .m_menu_date {padding: 10px 18px 18px; color: #8a94a2; font-size: 13px; text-align: center;}

  /* ── 열렸을 때 뒤를 살짝 덮는다 ── */
  .m_menu_dim {display: block; position: fixed; inset: 0; z-index: 50; background: rgba(23, 59, 108, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;}
  .m_menu_dim.open {opacity: 1; visibility: visible;}
}

/* 애니메이션을 줄이도록 설정한 기기에서는 움직임을 끈다 */
@media (prefers-reduced-motion: reduce) {
  .m_menu, .m_menu_btn span, .m_menu_dim {transition: none;}
  #section1 .inner .form_wrap::before {animation: none;}
  #section_qna .inner .qna_list .qna_item.active .qna_answer {animation: none;}
}

/* ══════ 신청 유도 버튼 (폼이 화면 밖에 있을 때만 보인다) ══════
   PC 는 우측 하단 알약형, 모바일은 하단 전체 바 */

.to_top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--main-color);
  box-shadow: 0 10px 28px rgba(23, 59, 108, 0.35);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;

  /* 평소에는 숨어 있다가 폼이 화면 밖으로 나가면 떠오른다 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.to_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to_top:hover {
  filter: brightness(1.1);
}

/* 어두운 푸터 위에 올라오면 색이 묻히므로 반대로 뒤집는다 */
.to_top.on_dark {
  background: #fff;
  color: var(--main-color);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.to_top.on_dark svg {
  stroke: var(--main-color);
}

.to_top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 모바일 — 하단 전체를 덮는 바로 바꾼다 (엄지로 누르기 쉬운 자리) */
@media (max-width: 768px) {
  .to_top {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    width: 100%;
    padding: 18px 20px;
    border-radius: 0;
    box-shadow: 0 -6px 20px rgba(23, 59, 108, 0.22);
    font-size: 18px;

    /* 바는 아래에서 밀려 올라온다 */
    transform: translateY(100%);
  }

  .to_top.show {
    transform: translateY(0);
  }

  /* 바가 페이지 마지막 내용을 가리지 않도록 아래 여백을 준다 */
  .footer {
    padding: 38px 0 92px;
  }

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

  /* 좁은 화면에서는 위아래로 쌓는다 */
  .footer_main {
    flex-direction: column;
    gap: 22px;
  }

  .footer_info {
    gap: 5px 16px;
    margin-top: 20px;
    font-size: 13.5px;
  }

  .footer .copyright {
    margin-top: 18px;
    font-size: 12.5px;
  }
}

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


/* ══════ 약관 문서 페이지 (개인정보처리방침 · 이용약관) ══════ */

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

  /* 칸마다 있던 선과 여백을 없앤다 — 줄 사이 선은 tr 이 담당한다 */
  .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;}
}