/* ── STICKY PHONE SHOWCASE ── */
.showcase-section {
  display:flex;
  background:linear-gradient(to bottom, var(--c-surface) 0%, var(--c-bg) 100%);
}
.showcase-sticky-col {
  position:sticky; top:0;
  width:48%; height:100vh; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px; /* drop-shadow 여백 확보 */
}
.showcase-phone-wrap {
  position:relative;
  /* 세 조건 중 가장 좁은 값: 최대 460px / 뷰포트 폭 40% / 높이 제한을 너비로 환산 */
  width: min(460px, 40vw, calc((100vh - 80px) * 9 / 19.5));
  aspect-ratio: 9 / 19.5; /* iPhone 비율 고정 — 이미지가 달라도 프레임 크기 불변 */
  filter:
    drop-shadow(0 40px 80px rgba(0,0,0,0.75))
    drop-shadow(0 0 60px rgba(109,40,217,0.22));
}

/* ── CROSS-DISSOLVE 레이어 ── */
.showcase-phone-img {
  display:block;
  width:100%; height:100%;
  object-fit:contain; /* 비율 그대로 — 어떤 이미지도 잘리지 않음 */
  border-radius:40px;
  border:1px solid rgba(255,255,255,0.09);
}
/* A·B 모두 절대 위치로 wrap에 고정 → wrap 크기는 aspect-ratio만이 결정 */
.layer-a {
  position:absolute;
  inset:0;
}
.layer-b {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events:none;
}
.layer-b.visible { opacity:1; }

/* ── SHOWCASE TEXT ── */
.showcase-text-col { flex:1; }
.s-slide {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 72px 0 48px;
  opacity:0.1;
  transform:translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.s-slide.s-active { opacity:1; transform:translateY(0); }
.s-label {
  font-size:13px; font-weight:700; letter-spacing:5px;
  text-transform:uppercase; color:var(--c-violet); margin-bottom:22px;
}
.s-title {
  font-size:clamp(38px, 4vw, 62px);
  font-weight:800; letter-spacing:-3px; line-height:1.07;
  margin-bottom:22px;
}
.s-body {
  font-size:23px; line-height:1.85;
  color:rgba(255,255,255,0.18);
  font-weight:200; letter-spacing:0.015em; max-width:440px;
  /* 슬라이드가 비활성화될 때: 딜레이 없이 빠르게 어두워짐 */
  transition: color 0.35s ease, text-shadow 0.35s ease;
  text-shadow:none;
}
.s-slide.s-active .s-body {
  color:rgba(255,255,255,0.9);
  text-shadow:
    0 0 20px rgba(255,255,255,0.28),
    0 0 50px rgba(200,180,255,0.14);
  /* 슬라이드 진입 애니메이션(0.65s) 완료 후 밝아짐 시작 */
  transition: color 0.9s ease 0.7s, text-shadow 0.9s ease 0.7s;
}
.s-features {
  display:flex; flex-direction:column; gap:22px;
  margin-top:28px;
}
.s-feature {
  display:flex; flex-direction:column; gap:9px;
}
.s-tag {
  display:inline-block; align-self:flex-start;
  font-size:14px; font-weight:700;
  padding:5px 14px; border-radius:20px;
  background:rgba(139,92,246,0.12);
  border:1px solid rgba(139,92,246,0.28);
  color:rgba(192,132,252,0.9);
  letter-spacing:0.3px;
}
.s-feat-desc {
  font-size:18px; line-height:1.8;
  color:rgba(255,255,255,0.18); /* 기본: 어둡게 */
  font-weight:200; letter-spacing:0.015em; max-width:440px;
  transition: color 0.9s ease 0.7s, text-shadow 0.9s ease 0.7s;
  text-shadow:none;
}
.s-slide.s-active .s-feat-desc {
  color:rgba(255,255,255,0.72);
  transition: color 0.9s ease 0.7s, text-shadow 0.9s ease 0.7s;
}

@media (max-width:960px) {
  .showcase-section { flex-direction:column; }
  .showcase-sticky-col { position:relative; width:100%; height:auto; padding:60px 24px 0; }
  .showcase-phone-wrap { width:min(220px, 55vw); margin:0 auto; }
  .s-slide { min-height:auto; padding:48px 24px; opacity:1 !important; transform:none !important; }
}