/* =========================================================
== 사이트 색 변수(:root) 블루 오버라이드
== db_form.css 가 style_jm.css 뒤에 로드되므로, 여기서 :root 를
== 재정의하면 헤더·메뉴·버튼 등 변수 기반 색 전체가 블루로 바뀐다.
========================================================= */
:root{
  --ink:#16261c;--ink2:#27392e;
  --green:#4f86e8;--green-d:#3a70d8;--green-dd:#2d5ec0;--green-soft:#e6efff;--green-soft2:#cdddfb;
  --slate:#334155;--slate-d:#1e293b;--slate-dd:#0f172a;--slate-soft:#f1f5f9;--slate-soft2:#e2e8f0;
  --lime:#56b8f0;--lime-d:#2f9fe0;--lime-dd:#1c6fa8;--lime-soft:#e2f4fe;--lime-soft2:#bfe6fb;
  --amber:#f59e0b;--amber-d:#b45309;--amber-soft:#fef3c7;
  --soft:#5e6f64;--bg:#f2f7ff;--bg2:#e6efff;--paper:#ffffff;--line:#d8e4fb;--line2:#c6d7f6;
  --r:18px;--r-lg:24px;--shadow:0 12px 28px rgba(79,134,232,.09);--shadow-lg:0 24px 52px rgba(79,134,232,.15);
  --shadow-green:0 12px 26px rgba(79,134,232,.3);--shadow-slate:0 12px 26px rgba(30,41,59,.26);
}

/* 헤더 배경 : style_jm.css 의 그린틴트 rgba(240,253,244) 덮어쓰기 */
header{ background:rgba(242,247,255,.92); }


.header-text{
	text-align:center;
	padding-bottom: 50px;
}
.header-text p{
	color:#fff;
}
.db_area{
	width:100%;
	height:auto;
	border-radius:24px;
	padding:20px;
	background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경 */
}
.db_area .title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
	color:#44116f;
	padding-bottom:20px;
}

.db_area .inputs {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.db_area .input {
    width: 100%;
    height: 45px;
    display: flex;
}
.db_area .input>span {
    width: 60px;
    height: auto;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
}
.db_area .radio2 input[type=radio] {
    display: none;
}
.db_area .input input {
    width: calc(100% - 60px);
    height: auto;
    border: 1px solid #ccc;
    padding-left: 10px;
    border-radius: 8px;
}
.db_area .apply {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.db_area .info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 10px;
}
.db_area .phone{
    width: calc(100% - 60px);
    height: 100%;
    display: flex;
}
.db_area .radio2 {
    width: calc(100% - 60px);
    height: 100%;
    display: flex;
    gap: 10px;
}
.db_area .info label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.db_area .radio2 input[type=radio]:checked+label {
    font-size: 1rem;
    font-weight: 700;
    background-color: #7453fc;
    border: none;
    color: #fff;
}
.db_area .radio2 input[type=radio]+label {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
		background:#fff;
}
.db_area .sel {
    border: 1px solid #ccc;
    width: 80px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
}
.db_area .btn_submit {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7453fc;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.db_result {
	border: 1px solid #ccc;
	background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경 */
    margin-top: 30px;
    padding:20px 20px;
    border-radius: 24px;
}
.db_result_item{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px; /* 요소 간 간격 */
	margin-top: 10px;
}
.db_result_item .item {
	flex-direction: column;
	text-align: center;
  background-color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid #404245;
}
.db_result_item .item img {
  vertical-align: top;
}

.db_result_item .item p {
  margin-top: 0px;
  font-size: 14px;
  color:#ff0000;
  font-weight:700;
}
.db_result_title {
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  color:#44116f;
}
.db_result_update {
  font-size: 14px;
  color:#333;
}
.db_result_update .bhdate{
  color:#ff0000;
  font-weight:700;
}

.db_detail_item{
	display:grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px; /* 요소 간 간격 */
	margin-top: 10px;
}
.db_detail_item .item {
	flex-direction: column;
	text-align: center;
  background:#fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: rgba(48, 53, 50, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.db_detail_item .item .title {
  color:#000;
  font-weight:700;
  width:100%;
  display:inline-block;
  margin-top:10px;
}
.db_detail_item .item .red {
  color:red !important;
  font-weight:700;
  font-size: 14px;
}
.db_detail_item .item .result {
  color:#000;
  margin-top: 0px;
  font-size: 14px;
}
@media (max-width: 992px) {
	.db_result_title {
		width:100%;
	}
	.db_result_item{
		grid-template-columns: repeat(2, 1fr);
	}
	.db_detail_item{
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.db_area .title{
		font-size:24px;
	}
	.db_result_title{
		font-size:24px;
	}
	.db_result .db_result_update .bhide{
		display:none;
	}
	.db_detail_item{
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =========================================================
== 보험료 간편계산 3영역 분할 (네이버 / 직접 / 결과)
========================================================= */
.calc-headline{ width:100%; text-align:center; color:#19233f; font-size:30px; font-weight:800; line-height:1.3; margin:0 0 28px; word-break:keep-all; }
.calc2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:stretch; }
.calc3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.calc-col{ position:relative; border-radius:18px; padding:20px 18px; display:flex; flex-direction:column; }
.calc-naver{ background:#ffffff; }
.calc-direct{ background:#eef4ff; border:1px solid #d2e0fa; }
.calc-result{ background:#ffffff; }

.cc-badge{ display:inline-block; align-self:flex-start; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; margin-bottom:14px; }
.badge-green{ background:#d6f0df; color:#15924a; }
.badge-gray{ background:#eef1f6; color:#5b6b8c; }
.badge-blue{ background:#e6efff; color:#3a70d8; }
.cc-badge2{ display:inline-block; align-self:flex-start; padding:6px 13px; border-radius:999px; background:#15924a; color:#fff; font-size:12px; font-weight:700; margin-bottom:12px; }
.cc-title{ font-size:20px; font-weight:800; color:#1c1f27; margin:0 0 6px; }
.cc-desc{ font-size:13.5px; color:#6b7180; line-height:1.45; margin:0 0 12px; }

/* 네이버 영역 */
.naver-btn{ width:100%; height:50px; display:flex; align-items:center; justify-content:center; gap:9px; background:#03C75A; color:#fff; border:none; border-radius:12px; font-size:17px; font-weight:700; cursor:pointer; transition:background .15s ease; }
.naver-btn:hover{ background:#02a74c; }
.naver-btn,.naver-btn *{ color:#fff !important; }
.naver-btn .naver-ico{ color:#03C75A !important; background:#fff !important; }
.naver-ico{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:#fff; color:#03C75A; border-radius:6px; font-weight:800; font-size:16px; }
.naver-benefit{ list-style:none; padding:0; margin:14px 0 0; }
.naver-benefit li{ display:flex; align-items:center; gap:9px; padding:5px 2px; font-size:14px; color:#3a3f4a; font-weight:500; border-bottom:1px solid #dbece1; }
.naver-benefit li:last-child{ border-bottom:none; }
.naver-benefit .nb-ico{ font-size:16px; }
.naver-note{ margin-top:auto; padding-top:18px; font-size:12px; color:#6b7280; line-height:1.55; }

/* 직접 계산 폼 */
.cf-row{ display:flex; gap:8px; margin-bottom:8px; }
.cf-input{ flex:1; min-width:0; width:100%; height:46px; border:1px solid #d7dbe3; border-radius:10px; padding:0 14px; font-size:15px; color:#222; background:#f8f9fb; box-sizing:border-box; }
.cf-input::placeholder{ color:#9aa1ad; }
.cf-input:focus{ outline:none; border-color:#4f86e8; background:#fff; }

.cf-sexrow .cf-sex{ display:flex; gap:8px; width:100%; }
.cf-sex input[type=radio]{ display:none; }
.cf-sex label{ flex:1; height:50px; display:flex; align-items:center; justify-content:center; border:1px solid #d7dbe3; border-radius:10px; font-size:15px; font-weight:700; color:#9aa1ad; background:#f8f9fb; cursor:pointer; }
.cf-sex input[type=radio]:checked+label{ background:#4f86e8; border-color:#4f86e8; color:#fff; }
#female:checked+label{ background:#8b94a6; border-color:#8b94a6; color:#fff; }

.cf-phone .cf-sel{ flex:0 0 auto; width:74px; height:46px; border:1px solid #d7dbe3; border-radius:10px; text-align:center; background:#f8f9fb; color:#222; cursor:pointer; }

.cf-agree{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 14px; }
.cf-agree-l{ display:flex; align-items:center; gap:6px; font-size:13px; color:#5b6270; cursor:pointer; }
.cf-agree-l input{ width:16px; height:16px; }
.cf-terms{ font-size:13px; color:#4f86e8; text-decoration:underline; text-underline-offset:2px; }
.cf-submit{ width:100%; height:50px; background:#4f86e8; color:#fff; border:none; border-radius:12px; font-size:17px; font-weight:700; cursor:pointer; transition:background .15s ease; margin-top:auto; }
.cf-submit:hover{ background:#3a70d8; }

/* 결과 영역 (compact) */
.result-list{ display:flex; flex-direction:column; gap:6px; }
.result-row{ display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e2e7f5; border-radius:10px; padding:5px 14px; }
.result-row img{ max-height:28px; width:auto; vertical-align:middle; }
.result-row .CQBohumGcd_price{ margin:0; font-size:15px; font-weight:800; color:#ff3b30; }
.result-update{ margin:0 0 12px; font-size:12.5px; color:#5b6270; }
.result-update .bhdate{ color:#3a70d8; font-weight:700; }

/* =========================================================
== 폼 검증 에러 박스
========================================================= */
.err{ display:none; background:#fdecec; border:1.5px solid #f3bdbd; border-radius:10px; color:#cf3b3b; font-size:13.5px; font-weight:700; padding:10px 14px; margin:0 0 12px; text-align:center; }

/* =========================================================
== 휴대폰 인증 모달 (60개 사이트 공통 스타일 · 최상위 z-index)
========================================================= */
.modal{ display:none; position:fixed; inset:0; z-index:2147483647; background:rgba(20,12,38,.55); padding:20px; }
.modal.open{ display:flex; align-items:center; justify-content:center; }
.mbox{ background:#fff; width:100%; max-width:480px; border-radius:18px; box-shadow:0 30px 70px rgba(0,0,0,.4); animation:rise .25s ease; overflow:hidden; }
@keyframes rise{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }
.mtop{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:#4f86e8; }
.mtop h3{ font-size:18px; font-weight:800; color:#fff; margin:0; }
.mclose{ background:rgba(255,255,255,.22); border:0; width:32px; height:32px; border-radius:50%; font-size:18px; font-weight:900; cursor:pointer; line-height:1; color:#fff; }
.mclose:hover{ background:#fff; color:#4f86e8; }
.mbody{ padding:10px; }
.smsinfo{ font-size:15px; text-align:center; margin:0 0 16px; color:#7b8190; line-height:1.6; }
.smsinfo b{ color:#4f86e8; font-weight:700; }
.mbtn{ background:#4f86e8; color:#fff; border:0; border-radius:11px; padding:13px 24px; font-weight:800; font-size:15px; cursor:pointer; transition:background .15s; box-shadow:0 12px 26px rgba(79,134,232,.32); }
.mbtn:hover{ background:#3a70d8; }
.mbtn.full{ width:100%; }
/* ===== modal footer buttons (terms/agree) ===== */
.mfoot{ display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:15px 24px 18px; border-top:1px solid #eef1f6; background:#fff; }
.mfoot .mbtn{ min-width:120px; text-align:center; }
.mbtn.ghost{ background:#fff; color:#5b6270; border:1.6px solid #d7dbe3; box-shadow:none; }
.mbtn.ghost:hover{ background:#f4f6fa; color:#3a70d8; border-color:#b9c2d4; }
/* terms modals wider for iframe */
#termsModal .mbox, #footTermsModal .mbox{ max-width:760px; }
@media (max-width:767px){ #termsModal .mbox, #footTermsModal .mbox{ max-width:100%; } .mfoot{ padding:13px 16px 16px; } .mfoot .mbtn{ min-width:0; flex:1; } }
.field.mfield{ margin-top:18px; }
.mfield label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:#1c1f27; }
.txt{ width:100%; border:1.5px solid #d7dbe3; background:#f7f9fc; border-radius:11px; padding:14px; font-size:18px; font-family:inherit; color:#1c1f27; text-align:center; letter-spacing:8px; font-weight:800; box-sizing:border-box; transition:border .15s,box-shadow .15s,background .15s; }
.txt:focus{ outline:none; border-color:#4f86e8; background:#fff; box-shadow:0 0 0 4px rgba(79,134,232,.15); }
.txt::placeholder{ color:#aab0bd; letter-spacing:normal; font-weight:500; font-size:15px; }
.resend{ display:block; margin:14px auto 0; background:none; border:0; font-size:13.5px; font-weight:600; color:#7b8190; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.resend:hover{ color:#4f86e8; }
.demohint{ display:none; }

/* =========================================================
== 반응형 : 모바일 세로 스택
========================================================= */
@media (max-width: 992px){
	.calc2{ grid-template-columns:1fr; gap:16px; }
	.calc3{ grid-template-columns:1fr; gap:16px; }
	.calc-headline{ font-size:24px; margin-bottom:22px; }
	.naver-note{ margin-top:18px; }
	.cf-submit{ margin-top:14px; }
}
@media (max-width: 767px){
	.calc-headline{ font-size:21px; }
	.calc-col{ padding:22px 18px; }
	.cc-title{ font-size:20px; }
	.mbox{ max-width:100%; }
	.result-update .bhide{ display:none; }

	/* 모바일 : 네이버 간편계산 영역 높이 축소 */
	.calc-naver{ padding:18px 18px 20px; }
	.calc-naver .cc-desc,
	.calc-naver .cc-badge2,
	.calc-naver .naver-note{ display:none; }
	.calc-naver .cc-title{ margin-bottom:14px; }
	.calc-naver .naver-benefit{ margin-top:6px; }
	.calc-naver .naver-benefit li{ font-size:12px; line-height:1.3; padding:3px 2px; gap:7px; }

	/* 모바일 : 이름 옆에 성별 (한 줄) */
	.cf-namesex{ flex-direction:row; align-items:stretch; gap:8px; }
	.cf-namesex .cf-input{ flex:1 1 56%; min-width:0; }
	.cf-namesex .seg{ flex:0 0 42%; }
}


/* =========================================================
== 상품 상세 페이지 : 헤더 + 산출결과(라벨:값)
========================================================= */
.detail-head{ margin:0 0 26px; }
.detail-logo{ height:42px; width:auto; display:block; margin:0 0 14px; }
.detail-title{ font-size:clamp(20px,2.6vw,28px); font-weight:800; color:#fff; line-height:1.32; letter-spacing:-.5px; word-break:keep-all; margin:0; }
.detail-certi{ font-size:12.5px; color:rgba(255,255,255,.82); margin:9px 0 0; word-break:keep-all; }

.detail-list{ display:flex; flex-direction:column; }
.drow{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:12px 2px; border-bottom:1px solid #dfe3f2; font-size:14px; line-height:1.5; }
.drow:last-child{ border-bottom:none; }
.drow span{ color:#6b7180; font-weight:500; flex:0 0 auto; }
.drow b{ color:#1c1f27; font-weight:700; text-align:right; word-break:keep-all; }
.drow b.red{ color:#ff3b30; }

@media (max-width: 767px){
	.detail-title{ font-size:19px; }
}


/* =========================================================
== 상품 상세 : 상품 안내 아코디언 카드
========================================================= */
.goods-info{ padding:50px 0; background:#f4f7fc; }
.goods-info .container{ max-width:980px; }

.gi-summary{ background:#4f86e8; color:#fff; border-radius:16px; padding:22px 26px; margin-bottom:24px; box-shadow:0 14px 30px rgba(79,134,232,.28); }
.gi-summary-badge{ display:inline-block; background:rgba(255,255,255,.22); border-radius:999px; padding:5px 13px; font-size:12px; font-weight:800; margin-bottom:10px; }
.gi-summary-body{ font-size:15px; line-height:1.7; }
.gi-summary-body *{ color:#fff !important; background:transparent !important; }

.gi-block{ background:#fff; border:1px solid #e7eaf1; border-radius:16px; margin-bottom:14px; overflow:hidden; box-shadow:0 10px 26px rgba(30,40,80,.06); transition:box-shadow .2s; }
.gi-block.open{ box-shadow:0 16px 36px rgba(30,40,80,.1); }
.gi-head{ width:100%; display:flex; align-items:center; gap:11px; padding:18px 22px; background:none; border:0; border-bottom:1px solid transparent; cursor:pointer; text-align:left; font-family:inherit; transition:background .15s,border-color .2s; }
.gi-head:hover{ background:#f8fafd; }
.gi-block.open .gi-head{ border-bottom-color:#eef0f4; }
.gi-head h3{ font-size:18px; font-weight:800; color:#1c1f27; margin:0; letter-spacing:-.4px; }
.gi-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; }
.gi-ic.ic-feat{ background:#4f86e8; }
.gi-ic.ic-cover{ background:#0fb5a0; }
.gi-ic.ic-ex{ background:#f0604a; }
.gi-ic.ic-note{ background:#f3a712; }
.gi-arrow{ margin-left:auto; flex:0 0 auto; color:#aab0bd; display:flex; align-items:center; transition:transform .3s,color .2s; }
.gi-block.open .gi-arrow{ transform:rotate(180deg); color:#4f86e8; }

.gi-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.gi-body-in{ padding:22px 24px; font-size:14.5px; line-height:1.78; color:#41474f; overflow-x:auto; }
.gi-body-in img{ max-width:100%; height:auto; }
.gi-body-in table{ max-width:100%; border-collapse:collapse; }
.gi-body-in p{ margin:0 0 10px; }
.gi-body-in > *:last-child{ margin-bottom:0; }


@media (max-width:767px){
	.goods-info{ padding:36px 0; }
	.gi-head{ padding:15px 18px; }
	.gi-head h3{ font-size:16px; }
	.gi-body-in{ padding:18px 16px; font-size:14px; }
	.gi-body-in table{ font-size:13px; }
}


/* =========================================================
== 보험료 산출 결과 레이어 (proc 결과에서 parent.bpcShowDone 호출)
========================================================= */
#bpcDoneLayer{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(16,22,40,.55);padding:16px;box-sizing:border-box;font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;}
#bpcDoneLayer *{box-sizing:border-box;}
#bpcDoneLayer .bpc-done-box{position:relative;width:100%;max-width:560px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 36px 70px -20px rgba(16,22,40,.6);animation:bpcDonePop .22s ease-out;}
@keyframes bpcDonePop{from{transform:translateY(10px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
#bpcDoneLayer .bpc-done-head{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;background:linear-gradient(135deg,#22B07A 0%,#149E68 100%);}
#bpcDoneLayer .bpc-done-htit{color:#fff;font-size:17px;font-weight:800;}
#bpcDoneLayer .bpc-done-x{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;}
#bpcDoneLayer .bpc-done-x:hover{background:rgba(255,255,255,.20);}
#bpcDoneLayer .bpc-done-stage{display:flex;align-items:flex-end;background:#fff;}
#bpcDoneLayer .bpc-done-photo{flex:0 0 auto;align-self:flex-end;display:block;width:210px;max-width:44vw;height:auto;}
#bpcDoneLayer .bpc-done-content{flex:1 1 auto;padding:30px 28px 26px;text-align:center;}
#bpcDoneLayer .bpc-done-content h4{margin:0;font-size:26px;font-weight:800;color:#2C333F;letter-spacing:-1px;line-height:1.25;}
#bpcDoneLayer .bpc-done-content h4 span{color:#149E68;}
#bpcDoneLayer .bpc-done-div{height:1px;margin:18px 0;background:#E9EEF4;}
#bpcDoneLayer .bpc-done-lead{margin:0;font-size:19px;color:#3D4554;font-weight:700;}
#bpcDoneLayer .bpc-done-lead b{color:#16203A;font-weight:800;}
#bpcDoneLayer .bpc-done-money{margin:8px 0 14px;color:#F2660A;font-weight:800;line-height:1;}
#bpcDoneLayer .bpc-done-money small{font-size:18px;color:#16203A;font-weight:800;}
#bpcDoneLayer .bpc-done-money span{font-size:42px;margin:0 2px;}
#bpcDoneLayer .bpc-done-money em{font-size:18px;font-style:normal;}
#bpcDoneLayer .bpc-done-money i{font-size:18px;font-style:normal;color:#16203A;margin-left:5px;}
#bpcDoneLayer .bpc-done-guide{margin:12px 0 14px;font-size:21px;font-weight:800;color:#16203A;}
#bpcDoneLayer .bpc-done-guide b{color:#F2660A;}
#bpcDoneLayer .bpc-done-note{margin:0 0 18px;font-size:12px;color:#97A0B2;line-height:1.55;}
#bpcDoneLayer .bpc-done-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border:0;border-radius:12px;background:linear-gradient(135deg,#FF8A2B,#F2660A);color:#fff;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;}
@media (max-width:560px){
  #bpcDoneLayer .bpc-done-photo{display:none;}
  #bpcDoneLayer .bpc-done-content{padding:26px 22px;}
  #bpcDoneLayer .bpc-done-content h4{font-size:22px;}
  #bpcDoneLayer .bpc-done-money span{font-size:36px;}
}


/* =========================================================
== driverinsu 3분할 보강 : 영역 배경 구분 + 성별 버튼(.seg)
========================================================= */
/* 섹션을 연그린으로 깔아 흰 칼럼이 떠 보이게 */
.fcalc{ background:#e4edfd; padding:34px 0 46px; }
main{ margin-top:0 !important; }
.fcalc .wrap{ position:relative; z-index:1; }

/* 칼럼 카드 : 테두리 + 그림자로 또렷하게 */
.calc-col{ box-shadow:0 10px 26px rgba(79,134,232,.10); border:1px solid #d8e4fb; }
.calc-naver{ background:#ffffff; }
.calc-direct{ background:#ffffff; border-color:#c6d7f6; }
.calc-result{ background:#ffffff; }

/* 성별 버튼 (직접 계산 칼럼) */
.calc-direct .cf-sexrow{ width:100%; }
.calc-direct .seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.calc-direct .seg button{ -webkit-appearance:none; appearance:none; border:1.5px solid #d2e0fa; background:#f5f9ff; border-radius:12px; padding:13px 0; font-size:15px; font-weight:700; cursor:pointer; color:#5e6f64; transition:all .15s; font-family:inherit; }
.calc-direct .seg button:hover{ border-color:#4f86e8; color:#2d5ec0; }
.calc-direct .seg button.on{ background:#4f86e8; border-color:#4f86e8; color:#fff; }

/* 이름+성별 묶음 : PC 세로(기존처럼), 모바일 가로(위 미디어쿼리) */
.cf-namesex{ display:flex; flex-direction:column; gap:8px; }
.cf-namesex .cf-input{ flex:0 0 auto; }
.cf-namesex .seg{ width:100%; }
.cf-namesex .seg{ width:100%; }

/* PC : 히어로 "3대 특약으로 똑똑하게 비교" 영역 상하 패딩 축소 */
@media (min-width:768px){ .hero{ padding:26px 0; } }

/* 결과 영역 : 이름(블루)·보험나이(빨강) 강조 */
.bhname{ color:#0080ff; font-weight:bold; }
.bhage{ color:red; font-weight:bold; }

/* ===== style.css form/modal common (vars substituted) ===== */
.fcalc *,.modal *,#bpcDoneLayer *,.bpc-done-box *{box-sizing:border-box}
.fcalc .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.fcalc button,.modal button,#bpcDoneLayer button{font-family:inherit;cursor:pointer}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.seg button{border:1.5px solid #c6d7f6;background:#f5f9ff;border-radius:12px;padding:11px 0;font-size:14px;font-weight:700;cursor:pointer;color:#5e6f64;transition:all .15s}
.seg button:hover{border-color:#4f86e8;color:#2d5ec0}
.seg button.on{background:#4f86e8;border-color:#4f86e8;color:#fff}
.privacy_wrap{display:flex;align-items:center;gap:7px;font-size:12.5px}
.privacy_wrap input[type=checkbox]{width:16px;height:16px;accent-color:#4f86e8}
.privacy_label{font-weight:600;color:#16261c}
.privacy_view{font-weight:700;color:#2d5ec0;text-decoration:underline;text-underline-offset:3px}
.privacy_view:hover{color:#334155}
.err{display:none;background:#fdecec;border:1.5px solid #f6caca;border-radius:12px;color:#c0392b;font-size:13.5px;font-weight:700;padding:10px 14px;margin:0 0 13px;text-align:center}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* ---------- 모달 ---------- */
.modal{display:none;position:fixed;inset:0;z-index:120;background:rgba(22,38,28,.55);padding:20px}
.modal.open{display:flex;align-items:center;justify-content:center}
.mbox{background:#ffffff;width:100%;max-width:480px;border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:rise .25s ease;overflow:hidden}
#termsModal .mbox{max-width:760px}
.terms-frame{width:100%;height:65vh;border:0;display:block;background:#fff}
.smsinfo{font-size:15px;text-align:center;margin-bottom:16px;color:#5e6f64}
.smsinfo b{color:#2d5ec0}
.resend{display:block;margin:13px auto 0;background:none;border:0;font-size:13.5px;font-weight:600;color:#5e6f64;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.resend:hover{color:#2d5ec0}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.qform-h .seg button{height:46px;padding:0}
@media (max-width:880px){
.qform-h .seg button{height:auto;padding:11px 0}
}
/* ===== 네이버 간편 로그인 ===== */
.naver-or{display:flex;align-items:center;gap:12px;margin:14px 0 12px}
.naver-or::before,.naver-or::after{content:"";flex:1;height:1px;background:#c6d7f6}
.naver-or span{color:#5e6f64;font-size:12.5px;font-weight:700;white-space:nowrap}
.naver-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#03C75A;color:#fff;border:0;border-radius:13px;padding:14px;font-size:15.5px;font-weight:800;letter-spacing:-.3px;cursor:pointer;transition:filter .15s,transform .12s;font-family:inherit}
.naver-btn:hover{filter:brightness(.96)}
.naver-btn:active{transform:translateY(1px)}
.naver-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#fff;color:#03C75A;font-size:15px;font-weight:900;line-height:1}


/* ===== header concept B : blue solid bar + white text ===== */
.header{ background:#4f86e8 !important; position:relative !important; height:auto !important; padding:0 !important; }
.header .container-fluid{ max-width:1180px; margin:0 auto; padding:13px 24px; box-sizing:border-box; }
.header .row.d_flex{ display:flex; align-items:center; justify-content:space-between; margin:0; flex-wrap:nowrap; gap:14px; }
.header .logo_section{ flex:0 0 auto; width:auto; max-width:none; padding:0; }
.header .col-md-8,.header .col-md-4{ width:auto; padding:0; }
.header .navigation.navbar{ float:none !important; justify-content:flex-end; }
.header .logo h1{ color:#fff !important; font-size:21px; font-weight:800; letter-spacing:-1px; margin:0; line-height:1.2; }
.header .logo a{ text-decoration:none; }
.header .navigation.navbar{ padding:0; }
.header .navbar-nav{ align-items:center; }
.header .nav-item h2{ margin:0; font-size:inherit; font-weight:inherit; }
.header .nav-link{ color:#fff !important; font-weight:500; font-size:14.5px; padding:14px 12px !important; white-space:nowrap; transition:opacity .15s; }
.header .nav-link:hover{ color:#fff !important; opacity:.78; }
.sbh-cta{ display:inline-block; background:#fff; color:#3a70d8 !important; padding:9px 17px; border-radius:9px; font-weight:700; font-size:14px; white-space:nowrap; margin-left:10px; text-decoration:none; transition:background .15s; }
.sbh-cta:hover{ background:#eaf1ff; color:#3a70d8 !important; }
.header .navbar-toggler{ border:none; padding:4px 6px; }
.header .navbar-toggler-icon{ filter:brightness(0) invert(1); }
@media (max-width:991px){ .header .nav-link{ font-size:13.5px; padding:14px 9px !important; } }
@media (max-width:767px){
  .header .navbar-collapse{ background:#3a70d8; border-radius:10px; margin-top:8px; padding:8px 12px; }
  .header .nav-link{ padding:11px 6px !important; border-bottom:1px solid rgba(255,255,255,.12); }
  .header .nav-item:last-child .nav-link{ border-bottom:none; }
  .sbh-cta{ display:block; margin:10px 0 4px; text-align:center; }
}

/* ===== header active (concept B) + responsive + menu spacing ===== */
.header .navigation.navbar-dark .navbar-nav .nav-link.active,
.header .navigation.navbar-dark .navbar-nav .active>.nav-link{ background:transparent !important; color:#fff !important; font-weight:700; }
.header .nav-link.active{ position:relative; }
.header .nav-link.active::after{ content:""; position:absolute; left:12px; right:12px; bottom:7px; height:2.5px; background:#fff; border-radius:2px; }
@media (min-width:992px) and (max-width:1199px){
  .header .nav-link{ font-size:13px !important; padding:14px 7px !important; }
  .sbh-cta{ padding:8px 12px; font-size:13px; margin-left:6px; }
  .header .nav-link.active::after{ left:7px; right:7px; }
}
@media (max-width:991px){
  .header .navbar-collapse{ background:#3a70d8; border-radius:10px; margin-top:8px; padding:8px 12px; }
  .header .nav-link{ padding:11px 6px !important; border-bottom:1px solid rgba(255,255,255,.12); }
  .header .nav-item:last-child .nav-link{ border-bottom:none; }
  .header .nav-link.active::after{ display:none; }
  .header .nav-link.active{ background:rgba(255,255,255,.14) !important; border-radius:6px; }
  .sbh-cta{ display:block; margin:10px 0 4px; text-align:center; }
}
main .menu_list{ margin-top:48px; }

/* ===== board list (concept B card style) ===== */
.board,.content{ padding:10px 0 60px; }
.board .container,.content .container{ max-width:1180px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.bd-head{ text-align:center; font-size:26px; font-weight:800; color:#19233f; letter-spacing:-1px; margin:0 0 26px; }
.bd-list{ display:flex; flex-direction:column; gap:10px; }
.bd-list > div{ display:contents; }
.bd-row{ display:flex; align-items:center; gap:16px; padding:16px 20px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.bd-row:hover{ border-color:#4f86e8; box-shadow:0 8px 22px rgba(79,134,232,.13); transform:translateY(-2px); }
.bd-num{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:#e6efff; color:#3a70d8; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; }
.bd-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.bd-title{ color:#1c2740; font-weight:600; font-size:15.5px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bd-title img{ vertical-align:middle; margin-left:4px; }
.bd-meta{ display:flex; align-items:center; gap:9px; color:#9aa6bb; font-size:12.5px; }
.bd-dot{ color:#d4dcec; }
.bd-arrow{ flex:0 0 auto; color:#b7c4dd; font-size:24px; font-weight:700; line-height:1; }
.bd-row:hover .bd-arrow{ color:#4f86e8; }
.bd-empty{ text-align:center; padding:60px 0; color:#9aa6bb; font-size:15px; }
@media (max-width:600px){
  .bd-row{ padding:13px 15px; gap:12px; }
  .bd-num{ width:32px; height:32px; font-size:13px; }
  .bd-title{ font-size:14px; }
  .bd-arrow{ display:none; }
}

/* ===== about menu_box links (look clickable) ===== */
.sc_menu .good_boxi .menu_box li{ height:auto; }
.sc_menu .good_boxi .menu_box a{ display:inline-flex; align-items:center; gap:5px; color:#3a70d8 !important; text-decoration:none; font-weight:500; padding:2px 0; transition:color .15s; }
.sc_menu .good_boxi .menu_box a::before{ content:"\203A"; color:#9bb8ef; font-weight:800; }
.sc_menu .good_boxi .menu_box a:hover{ color:#2d5ec0 !important; text-decoration:underline; font-weight:600; }

/* ===== mobile header (toggler align + full-width dropdown) ===== */
@media (max-width:991px){
  .header .row.d_flex{ flex-wrap:nowrap; align-items:center; }
  .header .col-md-8{ flex:0 0 auto; align-self:center; }
  .header .navigation.navbar{ width:auto; align-items:center; padding:0; }
  .header .navbar-toggler{ margin:0; align-self:center; }
  .header .navbar-collapse{ position:absolute; top:100%; left:0; right:0; width:100%; background:#3a70d8; padding:12px 18px; box-sizing:border-box; z-index:1000; border-radius:0 0 14px 14px; box-shadow:0 12px 26px rgba(0,0,0,.18); margin-top:0; }
  .header .navbar-collapse .navbar-nav{ align-items:stretch; }
  .header .sbh-cta{ display:block; margin:10px 0 2px; text-align:center; }
}

/* ===== about good_boxi card (prettier + smaller text) ===== */
.sc_menu.sc_goods_list .good_boxi{ background:#fff; border:1px solid #e4ebf7; border-radius:16px; padding:24px 22px; box-shadow:0 8px 22px rgba(79,134,232,.07); transition:border-color .15s, box-shadow .15s, transform .15s; }
.sc_menu.sc_goods_list .good_boxi:hover{ background:#fff !important; border-color:#4f86e8; box-shadow:0 14px 30px rgba(79,134,232,.14); transform:translateY(-3px); }
.sc_menu .good_boxi .img_box{ margin-bottom:14px; }
.sc_menu .good_boxi .title{ font-size:17px !important; color:#1c2740 !important; font-weight:800 !important; margin-bottom:12px !important; padding-bottom:12px; border-bottom:1px solid #eef2fa; letter-spacing:-.3px; }
.sc_menu .good_boxi .menu_box{ font-size:14px !important; line-height:1.6 !important; text-align:left !important; margin:0 !important; }
.sc_menu .good_boxi .menu_box li{ height:auto !important; margin-bottom:3px; }
.sc_menu .good_boxi:hover .title{ color:#3a70d8 !important; }

/* ===== board view title (concept B) ===== */
.board .bv-title{ background:linear-gradient(135deg,#4f86e8,#3a70d8); color:#fff; padding:20px 24px; border-radius:14px; font-size:19px; font-weight:700; border:none; margin:0 0 18px; line-height:1.45; box-shadow:0 8px 22px rgba(79,134,232,.18); letter-spacing:-.3px; }

/* ===== mobile header unified (overrides all earlier media blocks) ===== */
@media (max-width:991px){
  main{ margin-top:0 !important; }
  .fcalc{ margin-top:0 !important; }
  .header{ height:auto !important; }
  .header .row.d_flex{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; }
  .header .logo_section{ flex:1 1 auto; align-self:center; }
  .header .col-md-8{ flex:0 0 auto; align-self:center; width:auto !important; }
  .header .navigation.navbar{ width:auto; flex-direction:row; align-items:center; padding:0; position:static !important; }
  .header .navbar-toggler{ margin:0 !important; align-self:center; display:block; }
  .header .navbar-collapse{ position:absolute !important; top:100% !important; left:0; right:0; width:100% !important; max-height:calc(100vh - 90px); overflow-y:auto; background:#3a70d8; padding:12px 18px !important; box-sizing:border-box; z-index:1000; border-radius:0 0 14px 14px; margin-top:0 !important; box-shadow:0 12px 26px rgba(0,0,0,.18); }
  .header .navbar-collapse .navbar-nav{ align-items:stretch; }
}

/* ===== mobile menu: neutralize col positioning (collapse spans header) ===== */
@media (max-width:991px){
  .header .col-md-8,.header .col-md-4,.header [class*="col-"]{ position:static !important; }
}

/* ===== insurer marquee (auto-slide, JS fallback in include_main) ===== */
.insurers{ padding:34px 0 8px; overflow:hidden; }
.insurers .cap{ text-align:center; font-size:11.5px; font-weight:800; color:#8a93a6; letter-spacing:3px; margin-bottom:15px; }
.insurers .marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.insurers .track{ display:flex; gap:12px; list-style:none; width:max-content; margin:0; padding:4px 0; animation:insroll 30s linear infinite; }
.insurers .marquee:hover .track{ animation-play-state:paused; }
.insurers .track li{ position:relative; background:#fff; border:1.5px solid #d9e3f5; border-radius:999px; padding:10px 22px 10px 34px; font-weight:800; font-size:14.5px; color:#1f2a44; white-space:nowrap; box-shadow:0 4px 12px rgba(79,134,232,.12); }
.insurers .track li::before{ content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:#4f86e8; }
.insurers .track li:nth-child(3n)::before{ background:#3a70d8; }
.insurers .track li:nth-child(3n+1)::before{ background:#84b6ff; }
@keyframes insroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:767px){ .insurers{ padding:24px 0 6px; } .insurers .track li{ padding:8px 18px 8px 30px; font-size:13px; } }