/* ==========================================================================
   bonniefire - style-custom.css
   화재보험(fire) 테마 본문 섹션 컴포넌트.
   PSD(화재보험_pc.psd)에서 통이미지로 굳어있던 섹션들을
   실제 HTML 텍스트 + CSS 도형/카드 + 부분 추출 일러스트로 재구성.
   구조는 bonnie 공통 패턴을 따르고, 컬러/카피/이미지만 화재보험용.
   ========================================================================== */

:root {
    --bf-red: #bb0000;
    --bf-red-deep: #982e25;
    --bf-ink: #282828;
    --bf-navy: #183f80;
    --bf-gold: #fbbf38;
    --bf-orange: #ff7200;
    --bf-paper: #ffffff;
    --bf-soft: #fff5f3;
    --bf-line: #efd9d6;
    --bf-muted: #6b6b6b;
}

.noto-serif { font-family: "Noto Serif KR", serif; }

/* 공통 카드 그리드 래퍼 */
.bf-grid { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Section 01 - 통계 차트 3종 (장소별 화재건수 / 계절별 화재 / 누수하자건수)
   -------------------------------------------------------------------------- */
.bf-stat-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    padding: 28px 24px 22px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(152, 46, 37, 0.08);
    text-align: left;
}
.bf-stat-title {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bf-paper);
    background: var(--bf-red);
    border-radius: 30px;
    padding: 7px 20px;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
}
.bf-bar-row { margin-bottom: 16px; }
.bf-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.bf-bar-label { font-size: 0.95rem; font-weight: 700; color: var(--bf-ink); }
.bf-bar-count { font-size: 0.85rem; font-weight: 700; color: var(--bf-red); }
.bf-bar-track {
    position: relative;
    height: 20px;
    background: #f3ecec;
    border-radius: 20px;
    overflow: hidden;
}
.bf-bar-fill {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--bf-red);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    min-width: 42px;
    transition: width .6s ease;
}
.bf-bar-fill.is-alt { background: var(--bf-red-deep); }
.bf-bar-fill.is-soft { background: #d98b84; }
.bf-bar-pct { font-size: 0.78rem; font-weight: 800; color: #fff; white-space: nowrap; }
.bf-bar-fill:empty { min-width: 6px; padding-right: 0; }

/* 계절 그리드 */
.bf-season-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}
.bf-season-item {
    background: var(--bf-soft);
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
}
.bf-season-name { display: block; font-size: 0.9rem; font-weight: 700; color: var(--bf-ink); margin-bottom: 4px; }
.bf-season-pct { display: block; font-size: 1.5rem; font-weight: 900; color: var(--bf-red); line-height: 1; }

.bf-stat-highlight {
    margin: 18px 0 10px;
    padding: 12px 16px;
    background: var(--bf-navy);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.4;
    text-align: center;
}
.bf-stat-highlight b { color: var(--bf-gold); }
.bf-stat-source {
    margin: 10px 0 0;
    font-size: 0.72rem;
    color: #9a9a9a;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Section 02 - Why 화재보험 (4가지 잠재 사고 카드)
   -------------------------------------------------------------------------- */
.bf-why-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    padding: 26px 18px 22px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(152, 46, 37, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-why-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(152, 46, 37, 0.16); }
.bf-why-icon {
    width: 96px; height: 96px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bf-soft);
    display: flex; align-items: center; justify-content: center;
}
.bf-why-icon img { max-width: 62px; max-height: 62px; }
.bf-why-title { font-size: 1.15rem; font-weight: 800; color: var(--bf-ink); margin: 0 0 6px; letter-spacing: -0.5px; }
.bf-why-title .bf-em { color: var(--bf-red); }
.bf-why-desc { font-size: 0.9rem; color: var(--bf-muted); line-height: 1.55; margin: 0; }

/* --------------------------------------------------------------------------
   Section 03/04/05 - 보장 카드 그리드 (아이콘 + 제목 + 설명 + *특약)
   -------------------------------------------------------------------------- */
.bf-cover-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    padding: 26px 20px 22px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(152, 46, 37, 0.08);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-cover-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(152, 46, 37, 0.16); }
.bf-cover-icon {
    width: 110px; height: 110px;
    margin: 0 auto 16px;
    border-radius: 24px;
    background: var(--bf-soft);
    display: flex; align-items: center; justify-content: center;
}
.bf-cover-icon img { max-width: 74px; max-height: 74px; }
.bf-cover-title {
    font-size: 1.3rem; font-weight: 800; color: var(--bf-red);
    margin: 0 0 10px; letter-spacing: -0.5px;
}
.bf-cover-desc { font-size: 0.94rem; color: var(--bf-ink); line-height: 1.6; margin: 0 0 12px; }
.bf-cover-scope {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700; color: #fff;
    background: var(--bf-red-deep); border-radius: 20px; padding: 4px 14px;
    margin-bottom: 12px;
}
.bf-cover-tag {
    display: inline-block;
    font-size: 0.74rem; font-weight: 600; color: var(--bf-muted);
    background: #f4efef; border-radius: 20px; padding: 4px 12px;
}

/* --------------------------------------------------------------------------
   Section 06 - 화재보험은 모두에게 필요합니다 (2가지 메시지 카드)
   -------------------------------------------------------------------------- */
.bf-msg-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-left: 6px solid var(--bf-red);
    border-radius: 16px;
    padding: 28px 30px;
    margin-bottom: 20px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(152, 46, 37, 0.08);
}
.bf-msg-badge {
    display: inline-block;
    font-size: 1.05rem; font-weight: 800; color: #fff;
    background: var(--bf-red); border-radius: 30px; padding: 8px 22px;
    margin-bottom: 14px; letter-spacing: -0.5px;
}
.bf-msg-desc { font-size: 1rem; color: var(--bf-ink); line-height: 1.7; margin: 0; }
.bf-msg-desc b { color: var(--bf-red-deep); }

/* --------------------------------------------------------------------------
   Section 08 - 제휴 보험사 로고월 + 안내 배너
   -------------------------------------------------------------------------- */
.bf-company-logos {
    text-align: center;
    margin: 8px auto 0;
    max-width: 1000px;
}
.bf-company-logos img {
    width: 100%; height: auto; display: block; margin: 0 auto;
}
.bf-company-banner {
    background: #eef6ff;
    border-radius: 20px;
    padding: 34px 24px;
    margin: 26px auto;
    max-width: 1000px;
    text-align: center;
}
.bf-company-pill {
    display: inline-block;
    font-size: 1.1rem; font-weight: 800; color: #fff;
    background: var(--bf-navy); border-radius: 30px; padding: 9px 26px;
    margin-bottom: 16px; letter-spacing: -0.5px;
}
.bf-company-lead {
    font-size: 1.7rem; font-weight: 800; color: var(--bf-navy);
    line-height: 1.4; margin: 0; letter-spacing: -1px;
}
.bf-company-lead .bf-em { color: var(--bf-red); }

/* --------------------------------------------------------------------------
   Section 09 - 보니하니팀 3대 강점 (투명한 비교 / 발빠른 대응 / 1:1 맞춤)
   -------------------------------------------------------------------------- */
.bf-benefit-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    padding: 32px 22px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-benefit-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); }
.bf-benefit-num {
    width: 54px; height: 54px; margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--bf-red); color: #fff;
    font-size: 1.4rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.bf-benefit-title { font-size: 1.35rem; font-weight: 800; color: var(--bf-ink); margin: 0 0 8px; letter-spacing: -0.5px; }
.bf-benefit-desc { font-size: 0.95rem; color: var(--bf-muted); line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   Section 10 - 화재보험 추천 상담 (상담사 모델 + 말풍선)
   -------------------------------------------------------------------------- */
.bf-consultant {
    position: relative;
    max-width: 720px;
    margin: 10px auto 0;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.bf-consultant-img { position: relative; z-index: 2; max-height: 420px; width: auto; }
.bf-bubble {
    position: absolute;
    z-index: 3;
    background: var(--bf-gold);
    color: var(--bf-ink);
    font-weight: 900;
    font-size: 1.5rem;
    border-radius: 40px;
    padding: 14px 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.bf-bubble::after {
    content: "";
    position: absolute; bottom: -14px; left: 40px;
    border-width: 16px 14px 0 0;
    border-style: solid;
    border-color: var(--bf-gold) transparent transparent transparent;
}
.bf-bubble-1 { top: 10px; left: 2%; }
.bf-bubble-2 { top: 90px; right: 2%; }
.bf-bubble-3 { top: 190px; left: 8%; }

/* --------------------------------------------------------------------------
   Section 12 - 맞춤형 플랜 3원칙 (과하지 않게 / 안전하게 / 딱 하나로)
   -------------------------------------------------------------------------- */
.bf-plan-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-top: 4px solid var(--bf-red);
    border-radius: 18px;
    padding: 30px 22px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(152, 46, 37, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-plan-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(152, 46, 37, 0.16); }
.bf-plan-icon {
    width: 66px; height: 66px; margin: 0 auto 14px;
    border-radius: 18px;
    background: var(--bf-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.bf-plan-title { font-size: 1.3rem; font-weight: 800; color: var(--bf-red); margin: 0 0 8px; letter-spacing: -0.5px; }
.bf-plan-desc { font-size: 0.95rem; color: var(--bf-muted); line-height: 1.6; margin: 0; }

/* ==========================================================================
   서브페이지 전용 컴포넌트
   /sub/*.php 에서 통이미지로 굳어있던 섹션을 실사진/아이콘 부분추출 +
   HTML 텍스트로 재구성. 홈(index.php) 클래스는 건드리지 않는다.
   ========================================================================== */

/* 비교가 필요한 이유 - 실사진 4종 카드 (화재/누수/도난/가전) */
.bf-photo-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    padding: 12px 12px 20px;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(152, 46, 37, 0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-photo-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(152, 46, 37, 0.18); }
.bf-photo-thumb {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    background: var(--bf-soft);
}
.bf-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-photo-cap {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bf-ink);
    line-height: 1.45;
    letter-spacing: -0.5px;
    margin: 0;
}
.bf-photo-cap .bf-em { display: block; color: var(--bf-red); font-weight: 900; }

/* 보장 구성 안내 - 실사진 + 안내문 카드 (세입자/집주인, 아파트단체보험) */
.bf-need-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bf-paper);
    border: 2px solid var(--bf-red-deep);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(152, 46, 37, 0.12);
}
.bf-need-photo {
    flex: 0 0 40%;
    max-width: 40%;
    background: var(--bf-soft);
}
.bf-need-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-need-body { flex: 1 1 auto; padding: 26px 30px; text-align: left; }
.bf-need-badge {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bf-gold);
    background: var(--bf-red-deep);
    border-radius: 30px;
    padding: 8px 22px;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.bf-need-desc { font-size: 1rem; color: var(--bf-ink); line-height: 1.75; margin: 0; }
.bf-need-desc b { color: var(--bf-red); background: #ffe9e9; padding: 1px 4px; }

/* 전문가 소개 - 아이콘 원형 + 오렌지 태그 카드 (투명한 비교/발빠른 대응/1:1 맞춤형) */
.bf-icon-card {
    background: var(--bf-paper);
    border: 1px solid var(--bf-line);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-icon-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.13); }
.bf-icon-top {
    background: #fff8c8;
    padding: 26px 20px 20px;
}
.bf-icon-circle {
    width: 130px; height: 130px; margin: 0 auto;
    border-radius: 50%;
    background: var(--bf-paper);
    display: flex; align-items: center; justify-content: center;
}
.bf-icon-circle img { max-width: 108px; max-height: 108px; }
.bf-icon-pill {
    display: inline-block;
    font-size: 1.2rem; font-weight: 800; color: #fff;
    background: var(--bf-orange);
    border-radius: 30px;
    padding: 8px 26px;
    margin: -20px 0 16px;
    position: relative; z-index: 2;
    letter-spacing: -0.5px;
}
.bf-icon-desc { font-size: 0.95rem; color: var(--bf-ink); line-height: 1.65; margin: 0; padding: 0 18px 26px; }

/* 맞춤 설계 안내 - POINT 01/02/03 오렌지 카드 */
.bf-point-card {
    background: var(--bf-paper);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(255, 114, 0, 0.16);
    transition: transform .25s ease, box-shadow .25s ease;
}
.bf-point-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(255, 114, 0, 0.28); }
.bf-point-tag {
    display: inline-block;
    font-size: 1.15rem; font-weight: 900; color: #fff;
    background: var(--bf-orange);
    border-radius: 30px;
    padding: 6px 24px;
    margin: 24px 0 18px;
    letter-spacing: 0.5px;
}
.bf-point-circle {
    width: 140px; height: 140px; margin: 0 auto 24px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex; align-items: center; justify-content: center;
}
.bf-point-circle img { max-width: 78px; max-height: 78px; }
.bf-point-body { background: var(--bf-orange); padding: 26px 20px 28px; }
.bf-point-title { font-size: 1.2rem; font-weight: 900; color: #fff; line-height: 1.45; margin: 0 0 14px; letter-spacing: -0.5px; }
.bf-point-desc { font-size: 0.95rem; color: #fff; line-height: 1.65; margin: 0; opacity: 0.95; }

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bf-company-lead { font-size: 1.35rem; }
    .bf-consultant { min-height: 340px; }
}
@media (max-width: 991px) {
    .bf-need-card { flex-direction: column; }
    .bf-need-photo { flex: 0 0 auto; max-width: 100%; }
    .bf-need-photo img { height: 200px; }
    .bf-need-body { padding: 22px 22px 26px; }
}
@media (max-width: 767px) {
    .bf-stat-card,
    .bf-why-card,
    .bf-cover-card,
    .bf-benefit-card,
    .bf-plan-card,
    .bf-photo-card,
    .bf-icon-card,
    .bf-point-card { margin-bottom: 16px; }
    .bf-photo-cap { font-size: 1.05rem; }
    .bf-need-badge { font-size: 0.95rem; padding: 7px 18px; }
    .bf-need-desc { font-size: 0.95rem; }
    .bf-icon-circle { width: 112px; height: 112px; }
    .bf-icon-circle img { max-width: 92px; max-height: 92px; }
    .bf-icon-pill { font-size: 1.1rem; padding: 7px 22px; }
    .bf-point-circle { width: 120px; height: 120px; }
    .bf-point-circle img { max-width: 66px; max-height: 66px; }
    .bf-msg-card { padding: 22px 20px; }
    .bf-company-banner { padding: 26px 18px; }
    .bf-company-lead { font-size: 1.15rem; }
    .bf-bubble { font-size: 1.1rem; padding: 10px 20px; }
    .bf-consultant { min-height: 300px; }
    .bf-consultant-img { max-height: 320px; }
    .bf-cover-title { font-size: 1.15rem; }
    .bf-cover-icon { width: 92px; height: 92px; }
    .bf-cover-icon img { max-width: 60px; max-height: 60px; }
}
@media (max-width: 480px) {
    .bf-season-pct { font-size: 1.25rem; }
    .bf-bubble-1 { top: 4px; }
    .bf-bubble-3 { top: 160px; }
}
.speech-bubble.lh-15 { line-height: 1.35; }
@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; }
}
.section11_bg { background-color: #0c1f3f; }