/* 종이명함 템플릿 메인 마키 — pct- 스코프 전용 (doc-showcase / feature-marquee 비침투) */
#paperCardTemplateSection.pct-section {
  /* 한 바퀴 시간(클수록 느림). JS data-pct-speed 와 맞춤 */
  --pct-track-gap: 1.75rem;
  --pct-speed: 96s;
  /* PC: 실물 명함(~90×50mm)에 가까운 체감 폭 */
  --pct-card-w: 340px;
  --pct-card-w-portrait: 190px;
  --pct-radius: 10px;
  --pct-shadow: 0 18px 40px rgba(16, 24, 40, 0.14);
  --pct-line: rgba(26, 35, 48, 0.08);
  --pct-edge-pad: 1.25rem;
  position: relative;
  /* pe-saas-section / tw-overflow-hidden 보다 우선 — 상하 그림자 보존 */
  overflow: visible !important;
}

/* /partner 전용: 라벤더·민트·피치 파스텔 워시 */
#paperCardTemplateSection.pct-section--partner-pastel {
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(167, 139, 250, 0.22), transparent 58%),
    radial-gradient(ellipse 65% 50% at 88% 72%, rgba(103, 232, 249, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 45% at 70% 12%, rgba(253, 186, 116, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 40% at 28% 88%, rgba(249, 168, 212, 0.12), transparent 52%),
    color-mix(in srgb, var(--pe-card, #ffffff) 58%, var(--pe-bg, #f4f6fa));
}

html.dark #paperCardTemplateSection.pct-section--partner-pastel,
[data-theme="dark"] #paperCardTemplateSection.pct-section--partner-pastel {
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(139, 92, 246, 0.20), transparent 58%),
    radial-gradient(ellipse 65% 50% at 88% 72%, rgba(34, 211, 238, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 70% 12%, rgba(251, 146, 60, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 40% at 28% 88%, rgba(244, 114, 182, 0.10), transparent 52%),
    color-mix(in srgb, var(--pe-card, #1a1d24) 70%, var(--pe-bg, #0f1115));
}

#paperCardTemplateSection .pct-marquee {
  --pct-shadow-room: 3.25rem;
  position: relative;
  width: 100%;
  margin-top: 0.75rem;
  /*
   * overflow-x:hidden 은 브라우저에서 overflow-y 도 clip 으로 바꿔
   * 하단 그림자를 잘라 낸다. 대신 overflow:visible + clip-path 로
   * 좌우는 자르고 상하 그림자 여유만 연다.
   */
  overflow: visible;
  padding: var(--pct-shadow-room) 0;
  /* 2값 inset = top/bottom | left/right. 상하는 확장, 좌우는 경계 */
  clip-path: inset(-3.25rem 0);
  -webkit-clip-path: inset(-3.25rem 0);
  /* 가장자리 페이드는 좁게 */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--pct-edge-pad),
    #000 calc(100% - var(--pct-edge-pad)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--pct-edge-pad),
    #000 calc(100% - var(--pct-edge-pad)),
    transparent 100%
  );
  /* mask 가 border-box 밖으로 나간 그림자를 지우지 않게 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

#paperCardTemplateSection .pct-marquee.is-dragging {
  cursor: grabbing;
}

#paperCardTemplateSection .pct-marquee.is-paused .pct-track {
  animation-play-state: paused;
}

#paperCardTemplateSection .pct-track {
  display: flex;
  width: max-content;
  gap: var(--pct-track-gap);
  will-change: transform;
  animation: pct-marquee-x var(--pct-speed) linear infinite;
}

@keyframes pct-marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #paperCardTemplateSection .pct-track {
    animation: none;
  }
  #paperCardTemplateSection .pct-face {
    animation: none;
  }
  #paperCardTemplateSection .pct-marquee {
    overflow-x: auto;
    overflow-y: visible;
    clip-path: none;
    -webkit-clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
    cursor: auto;
  }
}

#paperCardTemplateSection .pct-item {
  flex: 0 0 auto;
  width: var(--pct-card-w);
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--pct-radius);
  /* 그림자는 face가 아니라 item에 — face overflow:hidden 으로 잘리지 않음 */
  box-shadow: var(--pct-shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

#paperCardTemplateSection .pct-item:hover,
#paperCardTemplateSection .pct-item:focus-visible {
  transform: translateY(-4px);
  outline: none;
  box-shadow: 0 22px 44px rgba(16, 24, 40, 0.18);
}

#paperCardTemplateSection .pct-item:focus-visible {
  box-shadow: var(--pct-shadow), 0 0 0 2px rgba(15, 110, 86, 0.55);
}

#paperCardTemplateSection .pct-face {
  position: relative;
  width: 100%;
  aspect-ratio: 90 / 50;
  border-radius: var(--pct-radius);
  overflow: hidden;
  /* 썸네일 로드 전 스켈레톤 — CLS 없이 자리 유지 */
  background: linear-gradient(
    105deg,
    rgba(226, 232, 240, 0.95) 0%,
    rgba(241, 245, 249, 0.98) 42%,
    rgba(226, 232, 240, 0.95) 78%
  );
  background-size: 220% 100%;
  animation: pct-skel-shine 1.35s ease-in-out infinite;
  border: 0;
  outline: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#paperCardTemplateSection .pct-face.is-ready {
  animation: none;
  background: transparent;
}

@keyframes pct-skel-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

#paperCardTemplateSection .pct-item.is-portrait {
  width: var(--pct-card-w-portrait);
}

#paperCardTemplateSection .pct-item.is-portrait .pct-face {
  aspect-ratio: 50 / 90;
}

#paperCardTemplateSection .pct-face__img {
  position: absolute;
  /* 서브픽셀 틈(흰 실선) 가리기 */
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.22s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#paperCardTemplateSection .pct-face__img--front {
  opacity: 0;
  z-index: 1;
}

#paperCardTemplateSection .pct-face__img--front.is-loaded {
  opacity: 1;
}

#paperCardTemplateSection .pct-face__img--back {
  opacity: 0;
  z-index: 2;
}

@media (hover: hover) {
  #paperCardTemplateSection .pct-item:hover .pct-face:has(.pct-face__img--back.is-loaded) .pct-face__img--front.is-loaded,
  #paperCardTemplateSection .pct-item:focus-visible .pct-face:has(.pct-face__img--back.is-loaded) .pct-face__img--front.is-loaded,
  #paperCardTemplateSection .pct-face.is-showing-back:has(.pct-face__img--back.is-loaded) .pct-face__img--front.is-loaded {
    opacity: 0;
  }

  #paperCardTemplateSection .pct-item:hover .pct-face__img--back.is-loaded,
  #paperCardTemplateSection .pct-item:focus-visible .pct-face__img--back.is-loaded,
  #paperCardTemplateSection .pct-face.is-showing-back .pct-face__img--back.is-loaded {
    opacity: 1;
  }
}

#paperCardTemplateSection .pct-face.is-showing-back:has(.pct-face__img--back.is-loaded) .pct-face__img--front.is-loaded {
  opacity: 0;
}

#paperCardTemplateSection .pct-face.is-showing-back .pct-face__img--back.is-loaded {
  opacity: 1;
}

#paperCardTemplateSection .pct-cta-row {
  margin-top: 0.5rem;
  text-align: center;
}

html.dark #paperCardTemplateSection,
[data-theme="dark"] #paperCardTemplateSection {
  --pct-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  --pct-line: rgba(255, 255, 255, 0.12);
}

html.dark #paperCardTemplateSection .pct-item:hover,
html.dark #paperCardTemplateSection .pct-item:focus-visible,
[data-theme="dark"] #paperCardTemplateSection .pct-item:hover,
[data-theme="dark"] #paperCardTemplateSection .pct-item:focus-visible {
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55);
}

html.dark #paperCardTemplateSection .pct-face:not(.is-ready),
[data-theme="dark"] #paperCardTemplateSection .pct-face:not(.is-ready) {
  background: linear-gradient(
    105deg,
    rgba(51, 65, 85, 0.85) 0%,
    rgba(71, 85, 105, 0.9) 42%,
    rgba(51, 65, 85, 0.85) 78%
  );
  background-size: 220% 100%;
}

html.dark #paperCardTemplateSection .pct-face.is-ready,
[data-theme="dark"] #paperCardTemplateSection .pct-face.is-ready {
  background: transparent;
}

html.dark #paperCardTemplateSection .pct-face__img,
[data-theme="dark"] #paperCardTemplateSection .pct-face__img {
  background: transparent;
}

@media (max-width: 640px) {
  #paperCardTemplateSection.pct-section {
    --pct-card-w: 220px;
    --pct-card-w-portrait: 124px;
    --pct-track-gap: 1.15rem;
    --pct-edge-pad: 0.85rem;
  }

  #paperCardTemplateSection .pct-marquee {
    --pct-shadow-room: 2.5rem;
    clip-path: inset(-2.5rem 0);
    -webkit-clip-path: inset(-2.5rem 0);
  }
}