/* v6 인생네컷 가로 스트립 반응형 그리드: PC 4열 / 태블릿 2열 / 모바일 1열 */
@media (min-width: 1024px) {
  .grid:has(.collection-item-card-v6) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid:has(.collection-item-card-v6) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .grid:has(.collection-item-card-v6) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* Collection Item Card v6 - 4-Cut Life-Four-Cuts Polaroid Strip Style */
.collection-item-card-v6 {
  position: relative;
  background: #ffffff;
  padding: 14px 12px 16px;
  border-radius: 4px;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.15), 0 2px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  will-change: transform;
  align-self: start;
  height: fit-content;
  width: 100%;
}

.collection-item-card-v6:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.22);
  z-index: 10;
}

/* 헤더 상단 미니 라벨 */
.collection-item-card-v6 .strip-header-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  color: #78716c;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding: 0 2px;
}

/* 3컷 포토 슬롯 리스트 */
.collection-item-card-v6 .strip-cut-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 각 컷 아이템 & 절취선 구분 */
.collection-item-card-v6 .strip-cut-item {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e7e5e4;
  /* 컷과 컷 사이를 잇는 인생네컷 절취선 점선 */
}

.collection-item-card-v6 .strip-cut-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 컷 썸네일 프레임 */
.collection-item-card-v6 .video-thumbnail {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #1c1917;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}

.collection-item-card-v6 .video-thumbnail.is-normal,
.collection-item-card-v6 .video-thumbnail.is-shorts {
  aspect-ratio: 16 / 10;
}

/* 감성 그라데이션 프리셋 4종 (인생네컷 4컷 매칭) */
.collection-item-card-v6 .video-thumbnail.bg-preset-1 {
  background: linear-gradient(180deg, #d3a373 0%, #b27a4d 100%);
}

.collection-item-card-v6 .video-thumbnail.bg-preset-2 {
  background: linear-gradient(180deg, #bfe2db 0%, #8dbcae 100%);
}

.collection-item-card-v6 .video-thumbnail.bg-preset-3 {
  background: linear-gradient(180deg, #d1e2b6 0%, #90a976 100%);
}

.collection-item-card-v6 .video-thumbnail.bg-preset-4 {
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
}

.collection-item-card-v6 .video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.collection-item-card-v6 .play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.collection-item-card-v6 .strip-cut-item:hover .play-overlay {
  opacity: 1;
}

/* 컷 하단 캡션 타이틀 */
.collection-item-card-v6 .cut-caption {
  font-family: 'Noto Sans KR', 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #292524;
  text-align: center;
  margin-top: 6px;
  letter-spacing: -0.01em;
}

/* 컷 하단 코멘트 뱃지 */
.collection-item-card-v6 .cut-comment {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  color: #57534e;
  background: #f5f5f4;
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 4px;
  text-align: center;
}

/* 하단 브랜드 워터마크 푸터 */
.collection-item-card-v6 .strip-footer-brand {
  font-family: monospace;
  font-size: 9px;
  font-weight: 800;
  color: #a8a29e;
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.12em;
}

/* ==========================================================================
   v6.0 서브 스타일 1 (neon) - Midnight Black Film (미드나잇 암실 블랙 프레임)
   ========================================================================== */
.collection-item-card-v6.style-neon {
  background: #121214;
  border: 1px solid #27272a;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
}

.collection-item-card-v6.style-neon .strip-header-label {
  color: #a1a1aa;
}

.collection-item-card-v6.style-neon .strip-cut-item {
  border-bottom: 1px dashed #3f3f46;
}

.collection-item-card-v6.style-neon .cut-caption {
  color: #f4f4f5;
}

.collection-item-card-v6.style-neon .cut-comment {
  color: #d4d4d8;
  background: #27272a;
}

.collection-item-card-v6.style-neon .strip-footer-brand {
  color: #71717a;
}

/* ==========================================================================
   v6.0 서브 스타일 2 (beauty) - BeautyPlus Y2K Ribbon Frame (뷰티플러스 리본 포토부스)
   ========================================================================== */
.collection-item-card-v6.style-beauty {
  background: #fdf2f8;
  /* 은은한 뷰티플러스 소프트 크림 핑크 바탕 */
  border: 1px solid #fbcfe8;
  border-radius: 6px;
  box-shadow: 0 10px 28px -4px rgba(244, 114, 182, 0.22);
  padding: 20px 12px 14px;
}

.collection-item-card-v6.style-beauty .top-ribbon-deco {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  background: #ffffff;
  border: 1px solid #fbcfe8;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(244, 114, 182, 0.2);
  z-index: 10;
}

.collection-item-card-v6.style-beauty .strip-header-label {
  color: #db2777;
  font-family: 'Outfit', cursive, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.collection-item-card-v6.style-beauty .video-thumbnail {
  border-radius: 36px !important;
  /* 레퍼런스 시안 100% 매칭: 부드러운 캡슐 알약/오발 라운드 컷 프레임 */
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.2) !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
}

.collection-item-card-v6.style-beauty .strip-cut-item {
  border-bottom: 1px dashed #fbcfe8;
  padding-bottom: 10px;
}

.collection-item-card-v6.style-beauty .cut-caption {
  color: #9d174d;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 11px;
  margin-top: 8px;
}

.collection-item-card-v6.style-beauty .cut-comment {
  color: #be185d;
  background: #ffffff;
  border: 1px solid #fbcfe8;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(244, 114, 182, 0.08);
}

.collection-item-card-v6.style-beauty .strip-footer-brand {
  color: #f472b6;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-top: 10px;
}

/* ==========================================================================
   v6.0 서브 스타일 3 (vintage) - Noir Monochrome B&W Film Strip (클래식 흑백 포토부스 필름)
   ========================================================================== */
.collection-item-card-v6.style-vintage {
  background: #111113;
  /* 깊은 아날로그 흑백 포토부스 매트 블랙 프레임 */
  border: 1px solid #27272a;
  border-radius: 4px;
  box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 16px 12px;
}

.collection-item-card-v6.style-vintage .strip-header-label {
  color: #a1a1aa;
  font-family: monospace;
  letter-spacing: 0.12em;
}

.collection-item-card-v6.style-vintage .video-thumbnail {
  border-radius: 2px;
  border: 1px solid #27272a;
  background: #000000;
}

/* 흑백 사진 필터 효과 (고대비 아날로그 흑백 톤 - GPU 하드웨어 가속 최적화) */
.collection-item-card-v6.style-vintage .video-thumbnail img {
  filter: grayscale(100%) contrast(115%) brightness(95%);
  transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 호버 시 흑백에서 감성 서정적 컬러로 살짝 전환되는 디테일 (GPU 레이어 단독 처리) */
.collection-item-card-v6.style-vintage .strip-cut-item:hover .video-thumbnail img {
  filter: grayscale(0%) contrast(105%);
}

.collection-item-card-v6.style-vintage .strip-cut-item {
  border-bottom: 1px dashed #3f3f46;
}

.collection-item-card-v6.style-vintage .cut-caption {
  color: #f4f4f5;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 600;
}

.collection-item-card-v6.style-vintage .cut-comment {
  color: #e4e4e7;
  background: #27272a;
  border: 1px solid #3f3f46;
}

.collection-item-card-v6.style-vintage .strip-footer-brand {
  color: #71717a;
  font-family: monospace;
  letter-spacing: 0.15em;
}

/* ==========================================================================
   v6.0 4컷 스트립 상단 고정 + 하단 바람 흔들림 무빙 (transform-origin: top center)
   ========================================================================== */
@keyframes v6-sway-left {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-3.8deg);
  }

  100% {
    transform: rotate(3.2deg);
  }
}

@keyframes v6-sway-right {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(3.8deg);
  }

  100% {
    transform: rotate(-3.2deg);
  }
}

.collection-item-card-v6.sway-left {
  transform-origin: 50% 0% !important;
  animation: v6-sway-left var(--float-duration, 5.8s) ease-in-out infinite alternate !important;
  animation-delay: var(--float-delay, 0s) !important;
  will-change: transform;
}

.collection-item-card-v6.sway-right {
  transform-origin: 50% 0% !important;
  animation: v6-sway-right var(--float-duration, 6.2s) ease-in-out infinite alternate !important;
  animation-delay: var(--float-delay, 0s) !important;
  will-change: transform;
}

/* ==========================================================================
   v6.1 - Central Spine Timeline Tree (중앙 세로줄 브랜치 콜라주 카드)
   ========================================================================== */
.collection-item-card-v6_1 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 썸네일 모양 옵션 (hexagon, circle, rounded, square) */
.collection-item-card-v6_1[data-thumb-shape="hexagon"] .v6_1-polygon-thumb {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.collection-item-card-v6_1[data-thumb-shape="circle"] .v6_1-polygon-thumb {
  border-radius: 9999px;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="circle"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="circle"] .v6_1-thumb-wrapper {
  border: 3px solid var(--v6_1-stroke);
  border-radius: 9999px;
  box-shadow: 0 0 12px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="circle"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.05);
}

.collection-item-card-v6_1[data-thumb-shape="rounded"] .v6_1-polygon-thumb {
  border-radius: 1rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="rounded"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="rounded"] .v6_1-thumb-wrapper {
  border: 2px solid var(--v6_1-stroke);
  border-radius: 1rem;
  box-shadow: 0 0 12px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="rounded"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.05);
}

.collection-item-card-v6_1[data-thumb-shape="square"] .v6_1-polygon-thumb {
  border-radius: 0.375rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="square"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="square"] .v6_1-thumb-wrapper {
  border: 2px solid var(--v6_1-stroke);
  border-radius: 0.375rem;
  box-shadow: 0 0 12px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="square"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.05);
}

/* 2배 사이즈 둥근 네모 & 정사각 네모 기본 규격 */
.collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-thumb-wrapper,
.collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-thumb-wrapper {
  width: 9rem;
  height: 9rem;
}

@media (min-width: 640px) {

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-thumb-wrapper,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-thumb-wrapper {
    width: 15.5rem;
    height: 15.5rem;
  }
}

/* 1024px 미만(iPad 포함)에서는 2X 대형 썸네일일 때 자동으로 타이틀/댓글이 썸네일 아래로 스택 세로 배치됨 */
@media (max-width: 1023px) {

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-content,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-content {
    flex-direction: column !important;
  }

  /* 좌측 노드 (flex-row): 썸네일이 오른쪽(스파인 줄기 방향)으로 밀착되도록 items-end */
  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-item:not(.flex-row-reverse) .v6_1-node-content,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-item:not(.flex-row-reverse) .v6_1-node-content {
    align-items: flex-end !important;
  }

  /* 우측 노드 (flex-row-reverse): 썸네일이 왼쪽(스파인 줄기 방향)으로 밀착되도록 items-start */
  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-item.flex-row-reverse .v6_1-node-content,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-item.flex-row-reverse .v6_1-node-content {
    align-items: flex-start !important;
  }

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-item,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-item {
    align-items: flex-start !important;
  }

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-info,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-info {
    max-width: 280px !important;
    text-align: center !important;
  }
}

@media (max-width: 639px) {

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-stem-connector,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-stem-connector {
    height: 9rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-stem-connector,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-stem-connector {
    height: 15.5rem !important;
  }
}

@media (min-width: 1024px) {

  .collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-node-info,
  .collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-node-info {
    max-width: 520px;
    flex: 1 1 auto;
  }
}

.collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-polygon-thumb {
  border-radius: 1.5rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-thumb-wrapper {
  border: 3px solid var(--v6_1-stroke);
  border-radius: 1.5rem;
  box-shadow: 0 0 16px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="rounded-lg-size"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.04);
}

.collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-polygon-thumb {
  border-radius: 0.5rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-thumb-wrapper {
  border: 3px solid var(--v6_1-stroke);
  border-radius: 0.5rem;
  box-shadow: 0 0 16px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="square-lg-size"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.04);
}

/* 세로형 9:16 쇼츠 비율 타입 */
.collection-item-card-v6_1[data-thumb-shape="shorts"] .v6_1-thumb-wrapper,
.collection-item-card-v6_1[data-thumb-shape="shorts-rounded"] .v6_1-thumb-wrapper {
  height: auto;
  aspect-ratio: 9 / 16;
}

.collection-item-card-v6_1[data-thumb-shape="shorts"] .v6_1-polygon-thumb {
  border-radius: 0.375rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="shorts"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="shorts"] .v6_1-thumb-wrapper {
  border: 2px solid var(--v6_1-stroke);
  border-radius: 0.375rem;
  box-shadow: 0 0 12px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="shorts"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.05);
}

.collection-item-card-v6_1[data-thumb-shape="shorts-rounded"] .v6_1-polygon-thumb {
  border-radius: 1.25rem;
  clip-path: none;
}

.collection-item-card-v6_1[data-thumb-shape="shorts-rounded"] .v6_1-polygon-frame {
  display: none;
}

.collection-item-card-v6_1[data-thumb-shape="shorts-rounded"] .v6_1-thumb-wrapper {
  border: 2px solid var(--v6_1-stroke);
  border-radius: 1.25rem;
  box-shadow: 0 0 12px var(--v6_1-glow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_1[data-thumb-shape="shorts-rounded"] .v6_1-thumb-wrapper:hover {
  border-color: var(--v6_1-accent);
  transform: scale(1.05);
}

/* 기본 육각형 SVG 프레임 */
.collection-item-card-v6_1 .v6_1-polygon-frame {
  transform: rotate(0deg) scale(1);
  transform-origin: center center;
}

.collection-item-card-v6_1 .v6_1-thumb-wrapper:hover .v6_1-polygon-frame {
  transform: scale(1.04);
}

.collection-item-card-v6_1 .v6_1-frame-stroke {
  transition: stroke 0.3s ease;
}

.collection-item-card-v6_1 .v6_1-thumb-wrapper:hover .v6_1-frame-stroke {
  stroke: var(--v6_1-accent);
}

/* v6.1 무중력 노드 개별 파도 유영 애니메이션 (isAnimated 트리거) */
@keyframes v6_1-node-wave {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-9px);
  }

  100% {
    transform: translateY(0px);
  }
}

.collection-item-card-v6_1 .v6_1-node-floating {
  animation: v6_1-node-wave var(--node-float-dur, 6s) ease-in-out infinite !important;
  animation-delay: var(--node-float-delay, 0s) !important;
  will-change: transform;
}

/* v6.1 제목 및 코멘트 2줄 말줄임 (line-clamp-2) */
.collection-item-card-v6_1 .v6_1-title,
.collection-item-card-v6_1 .v6_1-subtext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* v6.1 테마별 변수 및 요소별 테마 색상 적용 */
.collection-item-card-v6_1,
.collection-item-card-v6_1[data-spine-theme="amber-prism"] {
  --v6_1-accent: #fbbf24;
  --v6_1-spine: linear-gradient(to bottom, #fbbf24, #f43f5e, #9333ea);
  --v6_1-glow: rgba(245, 158, 11, 0.6);
  --v6_1-stroke: rgba(245, 158, 11, 0.7);
}

.collection-item-card-v6_1[data-spine-theme="cyber-cyan"] {
  --v6_1-accent: #22d3ee;
  --v6_1-spine: linear-gradient(to bottom, #22d3ee, #3b82f6, #4f46e5);
  --v6_1-glow: rgba(6, 182, 212, 0.6);
  --v6_1-stroke: rgba(6, 182, 212, 0.7);
}

.collection-item-card-v6_1[data-spine-theme="neon-magenta"] {
  --v6_1-accent: #e879f9;
  --v6_1-spine: linear-gradient(to bottom, #d946ef, #ec4899, #f43f5e);
  --v6_1-glow: rgba(217, 70, 239, 0.6);
  --v6_1-stroke: rgba(217, 70, 239, 0.7);
}

.collection-item-card-v6_1[data-spine-theme="emerald-aurora"] {
  --v6_1-accent: #34d399;
  --v6_1-spine: linear-gradient(to bottom, #34d399, #14b8a6, #06b6d4);
  --v6_1-glow: rgba(16, 185, 129, 0.6);
  --v6_1-stroke: rgba(16, 185, 129, 0.7);
}

.collection-item-card-v6_1[data-spine-theme="rainbow-spectrum"] {
  --v6_1-accent: #fbbf24;
  --v6_1-spine: linear-gradient(to bottom, #fbbf24, #34d399, #22d3ee, #a855f7, #f43f5e);
  --v6_1-glow: rgba(245, 158, 11, 0.6);
  --v6_1-stroke: rgba(245, 158, 11, 0.7);
}

.collection-item-card-v6_1[data-spine-theme="pure-white"] {
  --v6_1-accent: #ffffff;
  --v6_1-spine: linear-gradient(to bottom, #ffffff, #e4e4e7, #a1a1aa);
  --v6_1-glow: rgba(255, 255, 255, 0.7);
  --v6_1-stroke: rgba(255, 255, 255, 0.8);
}

.collection-item-card-v6_1[data-spine-theme="obsidian-black"] {
  --v6_1-accent: #a1a1aa;
  --v6_1-spine: linear-gradient(to bottom, #52525b, #27272a, #09090b);
  --v6_1-glow: rgba(0, 0, 0, 0.8);
  --v6_1-stroke: rgba(113, 113, 122, 0.8);
}

/* 요소별 테마 변수 바인딩 */
.collection-item-card-v6_1 .v6_1-center-spine {
  background: var(--v6_1-spine);
  box-shadow: 0 0 15px var(--v6_1-glow);
}

.collection-item-card-v6_1 .v6_1-header-dot {
  background-color: var(--v6_1-accent);
  box-shadow: 0 0 12px var(--v6_1-glow);
}

.collection-item-card-v6_1 .v6_1-index {
  color: var(--v6_1-accent);
}

.collection-item-card-v6_1 .v6_1-frame-stroke {
  stroke: var(--v6_1-stroke);
}

.collection-item-card-v6_1 .v6_1-stem-line {
  background: linear-gradient(to right, var(--v6_1-stroke), #3f3f46);
}

.collection-item-card-v6_1 .v6_1-dot {
  border-color: var(--v6_1-accent);
  box-shadow: 0 0 12px var(--v6_1-glow);
}

.collection-item-card-v6_1 .group\/item:hover .v6_1-dot {
  background-color: var(--v6_1-accent);
}

.collection-item-card-v6_1 .group\/item:hover .v6_1-title {
  color: var(--v6_1-accent);
}

/* ==========================================================================
   v6.2 - Image Mask Hover Effect (4등분 갈라진 썸네일 호버 뭉침 이펙트)
   ========================================================================== */

/* v6.2 반응형 그리드 */
@media (min-width: 1024px) {
  .grid:has(.collection-item-card-v6_2) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .grid:has(.collection-item-card-v6_2) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
}

@media (max-width: 639px) {
  .grid:has(.collection-item-card-v6_2) {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    align-items: start !important;
  }
}

.collection-item-card-v6_2 {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: linear-gradient(145deg, #1e1e24 0%, #121216 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}

.collection-item-card-v6_2:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
}

/* 4등분 마스크 프레임 (파묻힌 음각 깊이감 윈도우) */
.collection-item-card-v6_2 .v6_2-mask-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #09090b;
  overflow: hidden;
  /* 창문 테두리 안쪽으로 파묻히게 깎아냄 */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 조각들 위로 덮여 깊이감을 만들어주는 안쪽 쉐도우 프레임 */
.collection-item-card-v6_2 .v6_2-mask-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.95), inset 0 0 8px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}

/* 분할 피스 공통 (안쪽에 묻혀있는 느낌을 내기 위해 안쪽 깊이 그림자 적용) */
.collection-item-card-v6_2 .v6_2-piece {
  position: absolute;
  width: 50%;
  height: 50%;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  filter: grayscale(100%) brightness(0.9);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease, box-shadow 0.6s ease;
  will-change: transform, filter;
  z-index: 1;
}

/* 필터 타입 1: 표준 흑백 (Grayscale) */
.collection-item-card-v6_2.filter-grayscale .v6_2-piece {
  filter: grayscale(100%) brightness(0.9);
}

/* 필터 타입 2: 네추럴 컬러 (Color) */
.collection-item-card-v6_2.filter-color .v6_2-piece {
  filter: grayscale(0%) contrast(105%) brightness(0.95);
}

/* 필터 타입 3: 아날로그 브라운 (Sepia) */
.collection-item-card-v6_2.filter-sepia .v6_2-piece {
  filter: sepia(85%) contrast(110%) brightness(0.92);
}

/* 필터 타입 4: 하이콘트라스트 스릴러 (Noir) */
.collection-item-card-v6_2.filter-noir .v6_2-piece {
  filter: grayscale(100%) contrast(165%) brightness(0.78);
}

/* 필터 타입 5: 쿨 블루 미스틱 (Cool) */
.collection-item-card-v6_2.filter-cool .v6_2-piece {
  filter: grayscale(70%) sepia(30%) hue-rotate(185deg) contrast(120%) brightness(0.9);
}

/* 필터 타입 6: 빈티지 웜 필름 (Vintage) */
.collection-item-card-v6_2.filter-vintage .v6_2-piece {
  filter: sepia(40%) contrast(120%) brightness(0.92) saturate(110%);
}

.collection-item-card-v6_2 .v6_2-float-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.collection-item-card-v6_2 .v6_2-piece img {
  position: absolute;
  width: 200%;
  height: 200%;
  max-width: none;
  object-fit: cover;
}

/* 조각 1: 좌상단 */
.collection-item-card-v6_2 .v6_2-piece-1 {
  top: 0;
  left: 0;
  transform: translate(var(--p1-x, -12px), var(--p1-y, -14px)) rotate(var(--p1-r, -6deg));
}

.collection-item-card-v6_2 .v6_2-piece-1 img {
  top: 0;
  left: 0;
}

/* 조각 2: 우상단 */
.collection-item-card-v6_2 .v6_2-piece-2 {
  top: 0;
  right: 0;
  transform: translate(var(--p2-x, 16px), var(--p2-y, -10px)) rotate(var(--p2-r, 5deg));
}

.collection-item-card-v6_2 .v6_2-piece-2 img {
  top: 0;
  right: 0;
}

/* 조각 3: 좌하단 */
.collection-item-card-v6_2 .v6_2-piece-3 {
  bottom: 0;
  left: 0;
  transform: translate(var(--p3-x, -14px), var(--p3-y, 14px)) rotate(var(--p3-r, -4deg));
}

.collection-item-card-v6_2 .v6_2-piece-3 img {
  bottom: 0;
  left: 0;
}

/* 조각 4: 우하단 */
.collection-item-card-v6_2 .v6_2-piece-4 {
  bottom: 0;
  right: 0;
  transform: translate(var(--p4-x, 14px), var(--p4-y, 12px)) rotate(var(--p4-r, 6deg));
}

.collection-item-card-v6_2 .v6_2-piece-4 img {
  bottom: 0;
  right: 0;
}

/* v4 / v3.1 참고: GPU 무중력 부유(Balloon Float) 메커니즘 - 튐 없는 부드러운 유영 */
.collection-item-card-v6_2.is-animated {
  animation: v6_2CardFloat var(--float-duration, 5.5s) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  animation-delay: var(--float-delay, 0s);
  animation-fill-mode: both;
}

@keyframes v6_2CardFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(-1.2deg);
  }

  100% {
    transform: translateY(-18px) rotate(1.5deg);
  }
}

/* 호버 시 카드 전체 부유 정지 및 위로 들림 */
.collection-item-card-v6_2:hover {
  animation-play-state: paused;
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
}

/* 호버 시 4개 조각 (0,0, 0deg) 경계선(갭/이음새) 없는 완벽한 단일 썸네일 사진으로 일체화 결합 (고유 필터 유지) */
.collection-item-card-v6_2:hover .v6_2-piece {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
}

/* 1px 이하 subpixel 렌더링 미세 갭을 없애는 0.5px 미세 중첩 오버랩 오프셋 */
.collection-item-card-v6_2:hover .v6_2-piece-1 {
  transform: translate(0.5px, 0.5px) scale(1.008) rotate(0deg) !important;
}

.collection-item-card-v6_2:hover .v6_2-piece-2 {
  transform: translate(-0.5px, 0.5px) scale(1.008) rotate(0deg) !important;
}

.collection-item-card-v6_2:hover .v6_2-piece-3 {
  transform: translate(0.5px, -0.5px) scale(1.008) rotate(0deg) !important;
}

.collection-item-card-v6_2:hover .v6_2-piece-4 {
  transform: translate(-0.5px, -0.5px) scale(1.008) rotate(0deg) !important;
}

/* 하단 캡션 타이틀 & 설명 (독립 카드 패널로 분리) */
.collection-item-card-v6_2 .v6_2-caption-box {
  margin-top: 16px;
  padding: 12px 14px;
  text-align: left;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.collection-item-card-v6_2:hover .v6_2-caption-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-color: rgba(244, 114, 182, 0.3);
}

.collection-item-card-v6_2 .v6_2-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.collection-item-card-v6_2 .v6_2-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  color: #f472b6;
  background: rgba(244, 114, 182, 0.15);
  border: 1px solid rgba(244, 114, 182, 0.3);
  border-radius: 4px;
  flex-shrink: 0;
}

.collection-item-card-v6_2 .v6_2-title {
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #f4f4f5;
  line-height: 1.35;
  letter-spacing: -0.01em;
  flex: 1;
}

.collection-item-card-v6_2 .v6_2-comment {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 6px;
}

/* ==========================================================================
   v6.3 - SVG Filter Morphing Continuous Loop Showcase
   (1개 와이드 카드 단독 중앙 배치 & 디스플레이스먼트 노이즈 녹아내림 루프)
   ========================================================================== */

.collection-item-card-v6_3-container {
  width: 100%;
  margin: 0 auto;
}

.collection-item-card-v6_3 {
  background: #09090b;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(217, 70, 239, 0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.collection-item-card-v6_3:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.9), 0 0 45px rgba(217, 70, 239, 0.25);
}

#v6_3-active-img,
#v6_3-next-img,
.v6_3-hero-img {
  will-change: filter, transform, opacity;
  transform-origin: center center;
  object-position: center 10% !important;
}

.v6_3-progress-bar {
  transition: width 0.05s linear;
}