/* =====================================================================
   style-kids.css — bonniekids 어린이보험 섹션 콘텐츠 (레이어 스택 재구축)
   PSD: 어린이보험_pc.psd 기준. 텍스트=실HTML, 도형=CSS,
   실사진/일러스트/로고/아이콘만 부분 PNG(images/psd-extract).
   모든 클래스 bk- 네임스페이스. 768px 이하 반응형.
   ===================================================================== */
:root {
    --bk-navy: #183f80;
    --bk-navy-deep: #0c1f3f;
    --bk-navy-2: #0b2141;
    --bk-blue: #006ebd;
    --bk-blue-soft: #4a90d9;
    --bk-gold: #fbbf38;
    --bk-orange: #ff7200;
    --bk-orange-2: #ff6600;
    --bk-ink: #282828;
    --bk-gray: #b0b8c4;
    --bk-note: #8a8f98;
}

.bk-note {
    font-size: 14px;
    color: var(--bk-note);
    font-weight: 500;
    margin: 10px 0 0;
}

/* ===================== SECTION 01 : 성장단계 3카드 ===================== */
.bk-stage-row {
    max-width: 1000px;
    margin: 30px auto 0;
}
.bk-stage-col {
    padding: 0 12px 24px;
}
.bk-stage-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(24, 63, 128, .10);
    padding: 34px 22px 26px;
    height: 100%;
    text-align: center;
}
.bk-stage-pill {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 96px;
    padding: 7px 26px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.5px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}
.bk-stage-pill--infant { background: #6b7280; }
.bk-stage-pill--student { background: var(--bk-blue-soft); }
.bk-stage-pill--adult { background: #9aa4b2; }
.bk-stage-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    margin: 10px 0 18px;
    background: #eef4fb;
}
.bk-stage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.bk-stage-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--bk-blue);
    line-height: 1.35;
    letter-spacing: -1px;
    margin: 0 0 12px;
}
.bk-stage-title b { color: var(--bk-blue); }
.bk-stage-desc {
    font-size: 17px;
    color: #3a3f47;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 8px;
}
.bk-stage-note { font-size: 13px; color: var(--bk-note); margin: 0; font-weight: 500; }
/* 데스크탑 계단식 배치(유아 낮음 → 성인 높음) */
@media (min-width: 992px) {
    .bk-stage-col--infant { margin-top: 60px; }
    .bk-stage-col--student { margin-top: 30px; }
    .bk-stage-col--adult { margin-top: 0; }
}

/* ===================== SECTION 02 : 체크리스트 + 일러스트 ============= */
.bk-why-row { max-width: 1000px; margin: 0 auto; }
.bk-check-list { list-style: none; padding: 0; margin: 0; }
.bk-check-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 8px 18px rgba(24, 63, 128, .08);
    padding: 16px 26px;
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bk-ink);
    letter-spacing: -.5px;
}
.bk-check-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--bk-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
}
.bk-why-illust { text-align: center; }
.bk-why-illust img { max-width: 100%; height: auto; }
@media (max-width: 991px) {
    .bk-check-list li { font-size: 18px; padding: 14px 20px; }
    .bk-why-illust { margin-top: 24px; }
    .bk-why-illust img { max-width: 320px; }
}

/* ===================== SECTION 03 : 사망원인 3대질병 막대 ============= */
.bk-stat-box {
    max-width: 820px;
    margin: 0 auto;
    background: #eef7ff;
    border-radius: 20px;
    padding: 34px 40px;
    box-shadow: 0 10px 26px rgba(24, 63, 128, .08);
}
.bk-stat-head {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--bk-navy-deep);
    line-height: 1.35;
    margin-bottom: 24px;
}
.bk-stat-head b { color: var(--bk-navy); font-weight: 800; }
.bk-stat-body {
    display: flex;
    align-items: stretch;
    gap: 22px;
}
.bk-stat-bars { flex: 1 1 auto; min-width: 0; }
.bk-bar {
    height: 44px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.bk-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 3px;
    white-space: nowrap;
    letter-spacing: -.5px;
}
.bk-bar--1 .bk-bar-fill { width: 100%; background: var(--bk-navy-deep); }
.bk-bar--2 .bk-bar-fill { width: 66%; background: var(--bk-blue-soft); }
.bk-bar--3 .bk-bar-fill { width: 52%; background: var(--bk-gray); }
.bk-stat-src { font-size: 13px; color: var(--bk-note); margin: 4px 0 0; text-align: right; }
.bk-stat-badge {
    flex: 0 0 auto;
    width: 200px;
    background: var(--bk-navy);
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.bk-stat-badge-label { font-size: 24px; font-weight: 600; }
.bk-stat-badge-num { font-size: 54px; font-weight: 800; line-height: 1; margin-top: 6px; }
.bk-stat-foot {
    margin-top: 18px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--bk-navy-deep);
}
.bk-stat-foot b { color: var(--bk-blue); }
@media (max-width: 767px) {
    .bk-stat-box { padding: 26px 20px; }
    .bk-stat-head { font-size: 21px; }
    .bk-stat-body { flex-direction: column; gap: 16px; }
    .bk-stat-badge { width: 100%; flex-direction: row; gap: 14px; padding: 14px; }
    .bk-stat-badge-num { font-size: 40px; margin: 0; }
    .bk-bar-fill { font-size: 15px; padding: 0 12px; }
    .bk-stat-foot { font-size: 15px; }
}

/* ===================== SECTION 04 : 수술비 4원 + ===================== */
.bk-surg-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
}
.bk-surg-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--bk-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    box-shadow: 0 10px 22px rgba(255, 114, 0, .28);
}
.bk-surg-plus {
    font-size: 40px;
    font-weight: 800;
    color: var(--bk-orange);
    padding: 0 4px;
}
@media (max-width: 767px) {
    .bk-surg-circle { width: 112px; height: 112px; font-size: 19px; }
    .bk-surg-plus { font-size: 28px; }
}

/* ===================== SECTION 05 : 납입면제 타임라인 ================= */
.bk-timeline-box {
    max-width: 820px;
    margin: 0 auto;
    background: #eef7ff;
    border-radius: 20px;
    /* 트랙 위 배지/아이콘, 아래 라벨이 모두 절대배치라 여백이 곧 박스 높이 */
    padding: 92px 50px 72px;
    box-shadow: 0 10px 26px rgba(24, 63, 128, .10);
}
.bk-timeline-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4px;
    background: #cfe0f2;
    margin: 0 10px;
}
.bk-timeline-track::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 14px solid var(--bk-navy);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}
.bk-timeline-track .bk-tl-active {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--bk-navy);
}
.bk-tl-node {
    position: relative;
    z-index: 2;
}
.bk-tl-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--bk-navy);
    margin: 0 auto;
}
.bk-tl-node--mid .bk-tl-dot { background: var(--bk-navy); }
.bk-tl-label {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}
.bk-tl-node--start .bk-tl-label { left: 0; transform: none; }
.bk-tl-node--end .bk-tl-label { left: auto; right: 0; transform: none; }
.bk-tl-icon {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bk-navy);
}
.bk-tl-badge {
    position: absolute;
    bottom: 30px;
    left: calc(50% + 40px);
    background: var(--bk-navy);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .bk-timeline-box { padding: 78px 22px 58px; }
    .bk-tl-label { font-size: 14px; }
    .bk-tl-badge { font-size: 15px; left: calc(50% + 24px); padding: 6px 12px; }
}

/* ===================== SECTION 06 : 형제 할인 막대 =================== */
.bk-sib-box {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 40px 40px 26px;
    box-shadow: 0 10px 26px rgba(24, 63, 128, .10);
}
.bk-sib-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    border-bottom: 3px solid #d5dde8;
    padding-bottom: 0;
}
.bk-sib-item {
    position: relative;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bk-sib-bar {
    width: 100%;
    border-radius: 8px 8px 0 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 18px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.5px;
    gap: 8px;
}
.bk-sib-bar--std { height: 180px; background: var(--bk-orange); }
.bk-sib-bar--blue { height: 140px; background: #5b9bd5; }
.bk-sib-item:last-child .bk-sib-bar { height: 130px; }
.bk-sib-face { display: inline-flex; gap: 2px; margin-top: 6px; }
.bk-sib-badge {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px dashed #9fbde0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 18px;
    font-weight: 800;
    color: #2f6cb5;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bk-sib-badge i { font-style: normal; font-size: 15px; }
.bk-sib-label { text-align: center; font-size: 18px; font-weight: 700; color: #333; margin: 14px 0 0; }
@media (max-width: 767px) {
    .bk-sib-box { padding: 34px 16px 20px; }
    .bk-sib-bars { gap: 14px; }
    .bk-sib-item { width: 33%; }
    .bk-sib-bar { font-size: 15px; }
    .bk-sib-badge { font-size: 14px; padding: 4px 8px; top: -40px; }
}

/* ===================== SECTION 08 : 로고 월 + 중앙박스 =============== */
.bk-logos { max-width: 1000px; margin: 0 auto; text-align: center; }
.bk-logos-strip { margin: 10px 0; }
.bk-logos-strip img { max-width: 100%; height: auto; }
.bk-logos-center {
    background: #eef7ff;
    border-radius: 18px;
    padding: 26px 30px;
    margin: 22px auto;
    max-width: 860px;
}
.bk-logos-badge {
    display: inline-block;
    background: var(--bk-navy);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 8px 26px;
    border-radius: 30px;
    letter-spacing: -.5px;
}
.bk-logos-copy {
    margin: 16px 0 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--bk-navy);
    line-height: 1.35;
    letter-spacing: -1px;
}
.bk-logos-copy b { color: var(--bk-navy); font-weight: 800; }
@media (max-width: 767px) {
    .bk-logos-badge { font-size: 15px; padding: 7px 16px; }
    .bk-logos-copy { font-size: 21px; }
    .bk-logos-center { padding: 20px 16px; }
}

/* ===================== SECTION 09 : 3 포인트 카드(노랑) ============== */
.bk-fcard {
    background: #fffdf2;
    border: 1px solid #f4e7b8;
    border-radius: 18px;
    padding: 30px 24px 26px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
}
.bk-fcard-ico {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
}
.bk-fcard-ico img { width: 56px; height: 56px; object-fit: contain; }
.bk-fcard-pill {
    display: inline-block;
    background: var(--bk-orange);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    padding: 7px 26px;
    border-radius: 30px;
    letter-spacing: -.5px;
}
.bk-fcard-desc {
    margin: 16px 0 0;
    font-size: 17px;
    color: var(--bk-navy-deep);
    font-weight: 500;
    line-height: 1.55;
}
@media (max-width: 767px) {
    .bk-fcard { margin-bottom: 16px; }
}

/* ===================== SECTION 10 : 모델 + 말풍선 =================== */
.bk-model {
    position: relative;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 40px;
}
.bk-model-circle {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    border-radius: 50%;
    background: #e3f1fb;
    overflow: hidden;
    z-index: 1;
}
.bk-model-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.bk-bubble {
    position: absolute;
    z-index: 3;
    background: var(--bk-navy);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 30px;
    white-space: nowrap;
}
.bk-bubble::after {
    content: "";
    position: absolute;
    border: 10px solid transparent;
}
.bk-bubble--top { top: 0; left: 50%; transform: translateX(-30%); }
.bk-bubble--top::after { bottom: -14px; left: 30px; border-top-color: var(--bk-navy); border-bottom: 0; }
.bk-bubble--left { top: 90px; left: -10px; }
.bk-bubble--left::after { bottom: -14px; right: 24px; border-top-color: var(--bk-navy); border-bottom: 0; }
.bk-bubble--right { top: 110px; right: -6px; }
.bk-bubble--right::after { bottom: -14px; left: 24px; border-top-color: var(--bk-navy); border-bottom: 0; }
.bk-qmark {
    position: absolute;
    z-index: 2;
    color: #9cc4e6;
    font-size: 40px;
    font-weight: 900;
}
.bk-qmark--1 { top: 30px; left: 60px; }
.bk-qmark--2 { top: 40px; right: 70px; }
@media (max-width: 767px) {
    .bk-model { width: 320px; }
    .bk-model-circle { width: 220px; height: 220px; }
    .bk-bubble { font-size: 17px; padding: 8px 16px; }
}

/* ===================== SECTION 20 : 3 POINT 카드 ==================== */
.bk-point {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
.bk-point-top {
    position: relative;
    padding: 26px 20px 24px;
    text-align: center;
    background: #fff;
}
.bk-point-pill {
    display: inline-block;
    background: var(--bk-orange);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 6px 22px;
    border-radius: 30px;
    letter-spacing: .5px;
}
.bk-point-ico {
    width: 96px;
    height: 96px;
    margin: 18px auto 0;
    border-radius: 50%;
    background: #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bk-point-ico img { width: 70px; height: 70px; object-fit: contain; }
.bk-point-body {
    background: var(--bk-orange);
    color: #fff;
    text-align: center;
    padding: 22px 20px 26px;
}
.bk-point-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.5px;
    margin: 0 0 12px;
}
.bk-point-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
    opacity: .96;
}
@media (max-width: 767px) {
    .bk-point { margin-bottom: 16px; }
}
.speech-bubble.lh-15 { line-height: 1.35; }
/* barit.css의 .speech-bubble은 흰색 고정 — 네이비 변형이 없어 흰 글자가 안 보였음 */
.speech-bubble-blue { background-color: var(--bk-navy); }
.speech-bubble-blue::after { border-top-color: var(--bk-navy); }
.speech-bubble-white { background-color: #fff; }
.speech-bubble-white::after { border-top-color: #fff; }
@media (max-width: 575px) {
  .fs-45.xs-fs-32 { font-size: 2rem; }
  .fs-38.xs-fs-28 { font-size: 1.75rem; }
  .fs-45.xs-fs-32.lh-30 { line-height: 1.4; }
}