/* ========== CTA 공통 ========== */
.sec-cta{position:relative;overflow:hidden}

.sec-cta .sec__inner{position:relative;z-index:2}

.sec-cta__bg{
  position:absolute;inset:0;z-index:0;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
}

.sec-cta__bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.55);
}

.sec-cta__box{display:flex;flex-direction:column;gap:var(--gap-sm)}

.sec-cta .sec__head{margin-bottom:0}

.sec-cta__actions{display:flex;gap:12px;flex-wrap:wrap}

.sec-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-width:150px;padding:14px 28px;
  border:1px solid transparent;border-radius:var(--btn-radius);
  font-size:var(--fs-sm);font-weight:var(--fw-head);
  text-decoration:none;transition:var(--tr);
}

.sec-cta__btn--primary{
  background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}
.sec-cta__btn--primary:hover{background:var(--c-primary-d);border-color:var(--c-primary-d)}

.sec-cta__btn--outline{
  background:transparent;border-color:var(--c-line);color:var(--c-text);
}
.sec-cta__btn--outline:hover{border-color:var(--c-primary);color:var(--c-primary)}

/* ========== A — 배경 이미지 + 중앙 ========== */
.sec-cta--a{padding:calc(var(--sec-py) * 1.2) 0}
.sec-cta--a .sec-cta__box{align-items:center;text-align:center}
.sec-cta--a .sec__desc{max-width:640px}

.sec-cta--a.has-bg .sec__eyebrow{color:color-mix(in srgb, var(--c-point) 70%, #fff)}
.sec-cta--a.has-bg .sec__title,
.sec-cta--a.has-bg .sec__desc{color:#fff}
.sec-cta--a.has-bg .sec-cta__btn--outline{border-color:rgba(255,255,255,.6);color:#fff}
.sec-cta--a.has-bg .sec-cta__btn--outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* 배경 없을 때는 컬러 배경으로 폴백 */
.sec-cta--a:not(.has-bg){background:var(--c-primary)}
.sec-cta--a:not(.has-bg) .sec__eyebrow,
.sec-cta--a:not(.has-bg) .sec__title,
.sec-cta--a:not(.has-bg) .sec__desc{color:#fff}
.sec-cta--a:not(.has-bg) .sec-cta__btn--primary{background:#fff;border-color:#fff;color:var(--c-primary)}
.sec-cta--a:not(.has-bg) .sec-cta__btn--outline{border-color:rgba(255,255,255,.6);color:#fff}

/* ========== B — 컬러 띠 (좌우 분할) ========== */
.sec-cta--b{
  padding:56px 0;
  background:linear-gradient(100deg, var(--c-primary-d), var(--c-primary) 55%, var(--c-primary-d));
}
.sec-cta--b .sec-cta__bg{display:none}
.sec-cta--b .sec-cta__box{
  flex-direction:row;align-items:center;justify-content:space-between;gap:var(--gap);
}
.sec-cta--b .sec__eyebrow,
.sec-cta--b .sec__title,
.sec-cta--b .sec__desc{color:#fff}
.sec-cta--b .sec__title{font-size:var(--fs-h3)}
.sec-cta--b .sec-cta__actions{flex-shrink:0}
.sec-cta--b .sec-cta__btn--primary{background:#fff;border-color:#fff;color:var(--c-primary)}
.sec-cta--b .sec-cta__btn--primary:hover{background:var(--c-primary-l)}
.sec-cta--b .sec-cta__btn--outline{border-color:rgba(255,255,255,.6);color:#fff}
.sec-cta--b .sec-cta__btn--outline:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ========== C — 연한 배경 + 중앙 ========== */
.sec-cta--c{background:var(--c-primary-l)}
.sec-cta--c .sec-cta__bg{display:none}
.sec-cta--c .sec-cta__box{align-items:center;text-align:center}
.sec-cta--c .sec__desc{max-width:640px}

/* ========== 반응형 ========== */
@media (max-width:1024px){
  .sec-cta--a{padding:var(--sec-py-m) 0}
  .sec-cta--b .sec-cta__box{flex-direction:column;text-align:center;gap:var(--gap-sm)}
  .sec-cta--b .sec-cta__actions{justify-content:center}
}

@media (max-width:768px){
  .sec-cta__actions{width:100%;flex-direction:column}
  .sec-cta__btn{width:100%}
}