/* 허브(A·B안 공통) — 안심경영(보험) 페이지로 가는 띠 배너. 색은 각 안의 --brand 를 따른다 */

/* 바로 위 꿈현시 배너와 붙여 보이도록 위 여백을 없앤다 */
.section.safe-sec {
  padding-top: 0;
}

.safe-banner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 0.6rem + 1.4vw, 28px);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) ease;
}

.safe-banner:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
}

.safe-banner img {
  flex: 0 0 auto;
  width: clamp(64px, 52px + 3vw, 104px);
  height: auto;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.safe-banner:hover img {
  transform: rotate(-6deg) scale(1.06);
}

.safe-banner .copy {
  flex: 1;
  min-width: 0;
}

.safe-banner .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
}

.safe-banner .title {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.35;
}

.safe-banner .sub {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--text-small);
}

.safe-banner .go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .safe-banner {
    flex-wrap: wrap;
  }

  .safe-banner .go {
    flex: 1 1 100%;
    justify-content: center;
  }
}