/* 안심경영(보험) B안 (/b/insurance/) — ins.css 위에 B안 옷을 입힌다.
   첫 화면은 B 메인과 같은 연블루 + 3D 원형(b-hero.css), 그 아래는 흰 카드·알약 버튼·영문 라벨 */

/* ---------- 첫 화면 ---------- */
.b-hero.i-hero {
  padding: 72px 0 0; /* ins.css 의 액자 여백을 걷어낸다 */
}

.i-b-title {
  font-size: clamp(2.75rem, 1.3rem + 4.4vw, 4.75rem);
}

.i-b-card {
  position: relative;
}

.i-b-card-icon {
  position: absolute;
  right: 22px;
  top: -70px;
  width: 124px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(28, 40, 96, 0.24));
  animation: i-b-float 6s ease-in-out 1.2s infinite;
}

@keyframes i-b-float {
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

.i-b-pillars {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 네 칸이 비좁으면(b-fit.js) 2×2 로 */
.i-b-pillars.is-stacked {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0;
}

.i-b-pillars.is-stacked li:nth-child(odd) {
  border-left: 0;
}

.i-b-pillars.is-stacked li:nth-child(even) {
  border-left: 1px solid rgba(122, 131, 153, 0.25);
}

.i-b-pillars.is-stacked li:nth-child(n + 3) {
  border-top: 1px solid rgba(122, 131, 153, 0.25);
}

/* 넓은 화면에서 두 버튼(신청·전화)이 한 줄에 나란히 들어가도록 */
@media (min-width: 1100px) {
  .i-hero .b-hero-actions .btn-xl {
    padding: 0 28px;
    font-size: 1.125rem;
  }
}

@media (max-width: 1099px) {
  .i-b-card {
    margin-top: 84px;
  }
}

@media (max-width: 720px) {
  .i-b-card-icon {
    right: 14px;
    top: -52px;
    width: 92px;
  }

  .i-b-card {
    margin-top: 64px;
  }

  /* 네 칸은 폰에서 2×2 로 */
  .i-b-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .i-b-pillars li:nth-child(odd) {
    border-left: 0;
  }

  .i-b-pillars li:nth-child(even) {
    border-left: 1px solid rgba(122, 131, 153, 0.25);
  }

  .i-b-pillars li:nth-child(n + 3) {
    border-top: 1px solid rgba(122, 131, 153, 0.25);
  }

  .i-b-pillars a {
    padding-block: 12px;
  }
}

/* ---------- 버튼 ---------- */
.btn-outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- 나에게 맞는 보장 찾기 ---------- */
[data-theme='blue'] .pick {
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: none;
}

[data-theme='blue'] .pick:hover {
  border-color: rgba(42, 73, 184, 0.22);
  box-shadow: 0 22px 48px rgba(28, 40, 96, 0.12);
}

[data-theme='blue'] .pick img,
[data-theme='blue'] .tile img,
[data-theme='blue'] .row img {
  filter: drop-shadow(0 10px 14px rgba(28, 40, 96, 0.16));
}

[data-theme='blue'] .pick small {
  letter-spacing: 0.04em;
}

/* ---------- 구역 바로가기 ---------- */
[data-theme='blue'] .i-subnav {
  top: 72px;
  background: rgba(246, 247, 249, 0.78);
}

[data-theme='blue'] .i-subnav a:hover {
  background: rgba(42, 73, 184, 0.07);
}

[data-theme='blue'] .i-subnav a.is-active {
  background: linear-gradient(100deg, #3a5bc7, #2a49b8);
  color: var(--white);
  box-shadow: 0 6px 14px rgba(42, 73, 184, 0.26);
}

/* ---------- 구역 공통 ---------- */
[data-theme='blue'] .i-sec {
  scroll-margin-top: 136px;
}

[data-theme='blue'] .i-sec-head .num {
  border-radius: 22px;
  background: linear-gradient(150deg, #3a5bc7 0%, #2a49b8 45%, #162257 100%);
  color: var(--white);
  font-weight: 300;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-blue);
}

[data-theme='blue'] .i-sec-head .label-en {
  margin-bottom: 4px;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.26em;
}

[data-theme='blue'] .i-sec-head h2 {
  font-weight: 800;
  letter-spacing: -0.05em;
}

[data-theme='blue'] .tile,
[data-theme='blue'] .row {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--white);
  box-shadow: none;
}

/* 흰 구역 안의 카드는 아주 옅은 블루로 바닥과 구분 */
[data-theme='blue'] .i-sec:not(.is-gray) .tile,
[data-theme='blue'] .i-sec:not(.is-gray) .row {
  background: linear-gradient(160deg, #f3f5f9 0%, #f9fafc 100%);
  border-color: #e6e9f1;
}

[data-theme='blue'] .tile h3,
[data-theme='blue'] .row h3 {
  letter-spacing: -0.04em;
}

[data-theme='blue'] .row-note {
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-deep);
}

/* ---------- 마지막 행동 유도 · 담당자 · 유의사항 ---------- */
[data-theme='blue'] .i-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(28px, 1.2rem + 1.6vw, 40px);
  background:
    radial-gradient(circle at 100% 0%, rgba(140, 156, 214, 0.55) 0%, rgba(140, 156, 214, 0) 45%),
    linear-gradient(120deg, #3a5bc7 0%, #2a49b8 40%, #1f3484 75%, #162257 100%);
}

.i-b-rings {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.i-b-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.i-b-rings i:nth-child(1) {
  width: 420px;
}

.i-b-rings i:nth-child(2) {
  width: 640px;
}

.i-b-rings i:nth-child(3) {
  width: 860px;
}

[data-theme='blue'] .i-cta .label-en {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
}

[data-theme='blue'] .i-cta h2 {
  font-weight: 800;
  letter-spacing: -0.05em;
}

[data-theme='blue'] .i-cta h2 em {
  background: linear-gradient(100deg, #ffffff 0%, #c7cee6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme='blue'] .i-badges li {
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme='blue'] .i-badges li::before {
  border-color: var(--periwinkle);
}

[data-theme='blue'] .i-agent {
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: none;
}

[data-theme='blue'] .i-notice {
  border-radius: 22px;
  background: #eceff7;
}

/* ---------- 아래 고정 바 · 신청서 ---------- */
[data-theme='blue'] .i-bar .in {
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--line), 0 16px 44px rgba(28, 40, 96, 0.2);
}

[data-theme='blue'] .i-bar .call {
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
}

[data-theme='blue'] .consent dl {
  background: #f1f4fa;
}