/* ============ CTA ============ */
.cta-section { }
.cta-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100vh;
}
.cta-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr var(--cta-row2-h);
  gap: var(--cta-grid-gap);
  padding-top: var(--cta-grid-pad-top);
  padding-bottom: var(--cta-grid-pad-bottom);
}
.cta-header {
  grid-column: 1 / 8;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: var(--cta-header-gap);
}
.cta-heading { width: fit-content; }
.cta-heading .oh-cta { overflow: hidden; }
.cta-heading h2 {
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  font-weight: 600;
}
.cta-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cta-btn-gap);
  width: fit-content;
}
.cta-button .line { width: 100%; height: 1px; background-color: var(--cta-line-bg); position: relative; }
.cta-button .fill-line { position: absolute; left: 0; top: 0; height: 100%; width: 0; background-color: var(--c-ink); }
.cta-button-content { display: flex; align-items: center; gap: var(--cta-content-gap); }
.cta-button-content > div { font-size: var(--fs-regular); line-height: var(--lh-regular); }
.arrow-wrapper { position: relative; display: flex; overflow: hidden; }
.arrow-wrapper img.arrow { width: var(--cta-arrow-w); height: auto; }
.arrow-wrapper img.arrow + img.arrow { display: none; } /* hover 듀얼 화살표 phase-8 */
.cta-paragraph {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  align-self: end;
  max-width: var(--cta-para-maxw);
}
.cta-wrapper .background-content { position: absolute; inset: 0; z-index: 0; }
.cta-wrapper .background-content img.image-cta { width: 100%; height: 100%; object-fit: cover; }
.cta-wrapper .mobile { display: none; }
.cta-gradient { position: absolute; inset: 0; }
.cta-gradient.right { background-image: linear-gradient(45deg, rgba(16,16,17,0) 60%, rgb(16,16,17)); opacity: .7; }
.cta-gradient.left { background-image: linear-gradient(225deg, rgba(16,16,17,0), rgb(16,16,17)); }

@media screen and (max-width: 991px) {
  .cta-wrapper { height: auto; }
  .cta-grid { display: flex; flex-direction: column; justify-content: space-between; }
  .cta-header { gap: 3em; order: 1; }
  .cta-paragraph { max-width: none; }
  .cta-button-content { justify-content: space-between; width: 100%; }
  .image-cta { object-position: 70% 50%; }
}
@media screen and (max-width: 767px) {
  .cta-wrapper { height: 100svh; }
  .cta-grid { justify-content: flex-start; padding-top: 2em; color: var(--c-white); }
  .cta-header { gap: 2em; order: -1; }
  .cta-heading .oh-cta { display: inline; }
  .cta-heading h2 { display: inline; margin-right: 1rem; }
  .cta-button { color: var(--c-white); }
  .cta-button .fill-line { background-color: var(--c-white); }
  .image-cta.hide-mobile { display: none; }
  .cta-wrapper .mobile { display: flex; position: relative; width: 100%; height: 100%; }
  .image-cta.mobile { display: inline-block; width: 100%; height: 100%; object-fit: cover; }
}
@media screen and (max-width: 479px) {
  .cta-button { width: 100%; }
  .cta-button-content { gap: 0; }
  .cta-heading h2 { font-size: 9vw; line-height: 1.5; margin-right: .5rem; }
}