/* ---------- 휴대폰 프레임 후기 캐러셀 (atozweb handover/phone-carousel 기반, 2026-10-17)
   카드 = 후기 사진 + 후기 요약 글. phone-carousel.js 가 카드마다 transform·opacity 와 .is-active 를 넣는다.
   원본 대비 바뀐 점: 카드 위에 사진(.pc-card__img), 휴대폰 밖 카드 흰 배경, 강조색 = 사이트 CTA 주황 */
.phone-carousel {
  --pc-accent: #FF6B2C;
  --pc-accent-light: #FFB08A;
  --pc-glow: 255, 107, 44;
  --pc-ink: #131F35;
  --pc-mute: #8B99B3;
  --pc-card-bg: #FFFFFF;
  --pc-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --pc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pw: clamp(260px, min(24vw, 36vh), 310px);
  --ph: calc(var(--pw) * 1.92);
  --cw: calc(var(--pw) - 36px);

  position: relative;
  overflow: hidden; /* 아래 @supports 가 없는 옛 브라우저용 */
  font-family: var(--pc-font);
  color: var(--pc-ink);
  margin: 8px 0 0;
}
/* 가로만 자르고 세로는 열어 둔다 → 휴대폰 뒤 빛(.pc-glow)이 위아래에서 잘리지 않음 (2026-10-17) */
@supports (overflow: clip) { .phone-carousel { overflow-x: clip; overflow-y: visible; } }
.pc-stage { position: relative; min-height: calc(var(--ph) + 40px); touch-action: pan-y; cursor: grab; }
.pc-stage.is-drag { cursor: grabbing; }
.pc-glow {
  position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 2.6); height: calc(var(--pw) * 2.6);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--pc-glow), 0.30), rgba(var(--pc-glow), 0.10) 55%, rgba(255, 255, 255, 0));
  filter: blur(10px); pointer-events: none;
}
.pc-phone {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--pw); height: var(--ph);
  transform: translate(-50%, -50%);
  border-radius: calc(var(--pw) * 0.17);
  background: linear-gradient(170deg, #1a1b1f, #0b0b0c 60%);
  box-shadow: inset 0 0 0 7px #2a2b30, inset 0 0 0 9px #0b0b0c, 0 40px 80px -30px rgba(20, 10, 0, 0.55);
  pointer-events: none;
}
.pc-notch { position: absolute; left: 50%; top: 18px; width: 34%; height: 24px; transform: translateX(-50%); border-radius: 99px; background: #000; }
.pc-track { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }

.pc-card {
  position: absolute; left: calc(var(--cw) / -2); top: 0;
  width: var(--cw); padding: 14px 14px 18px;
  border-radius: 22px;
  background: var(--pc-card-bg); color: var(--pc-ink);
  box-shadow: 0 6px 24px rgba(19, 31, 53, 0.08), inset 0 0 0 1px rgba(19, 31, 53, 0.05);
  transform: translateY(-50%);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s;
  user-select: none; -webkit-user-select: none;
  will-change: transform, opacity;
}
.pc-card.is-active {
  background: rgba(255, 255, 255, 0.07); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 60px rgba(var(--pc-glow), 0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pc-card__img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; margin: 0 0 14px; pointer-events: none; -webkit-user-drag: none;
}
.pc-card__tag {
  display: inline-block; margin-left: 4px; padding: 6px 10px; border-radius: 99px;
  font: 700 12px/1 var(--pc-font); background: rgba(19, 31, 53, 0.06); color: #4a5670;
}
.pc-card.is-active .pc-card__tag { background: rgba(var(--pc-glow), 0.2); color: var(--pc-accent-light); }
.pc-card__text {
  position: relative; margin: 14px 4px 14px; padding-top: 18px;
  font-size: 14.5px; line-height: 1.6; font-weight: 500; letter-spacing: -0.01em;
}
.pc-card__text::before {
  content: "\201C"; position: absolute; left: -2px; top: -12px;
  font: 800 44px/1 Georgia, serif; color: var(--pc-accent);
}
.pc-card__who { display: flex; align-items: center; gap: 8px; margin: 0 4px; font: 600 12.5px/1 var(--pc-font); }
.pc-card__who i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 12px/1 var(--pc-font); font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 35%, #FFA06E, var(--pc-accent) 55%, #D2470F);
}
.pc-card__who span { margin-left: auto; font: 500 12px/1 var(--pc-font); color: var(--pc-mute); }
.pc-card.is-active .pc-card__who span { color: rgba(255, 255, 255, 0.55); }

.pc-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 10px; }
.pc-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(19, 31, 53, 0.16); background: #fff; cursor: pointer; color: var(--pc-ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pc-arrow:hover { background: var(--pc-ink); color: #fff; border-color: var(--pc-ink); }
.pc-dots { display: flex; gap: 6px; }
.pc-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: #d3d9e4; transition: width 0.4s var(--pc-ease-out), background 0.3s;
}
.pc-dots button[aria-selected="true"] { width: 28px; background: var(--pc-accent); }

@media (max-width: 640px) {
  .phone-carousel { --pw: clamp(240px, 70vw, 280px); }
  .pc-card { padding: 12px 12px 16px; }
  .pc-card__text { font-size: 14px; }
}