/* =====================================================
   verti-kav.css  —  새로 올라온 시리즈물 섹션
   네임스페이스 : .verti-kav-*  (기존 CSS 충돌 없음)
   경로 : /assets/css/verti-kav.css
===================================================== */

/* ── CSS 변수 (래퍼에 스코핑) ── */
.verti-kav-section {
  --vk-text:        #e5e5e5;
  --vk-text-muted:  #aaa;
  --vk-surface:     #2a2a2a;
  --vk-border:      rgba(255,255,255,0.08);
  --vk-accent:      #eb1436;
  --vk-radius:      6px;
  --vk-gap:         8px;
  --vk-card-w:      160px;
  --vk-card-w-md:   136px;
  --vk-card-w-sm:   108px;
}

/* box-sizing 격리 */
.verti-kav-section *,
.verti-kav-section *::before,
.verti-kav-section *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* ── 섹션 래퍼 ── */
.verti-kav-section {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: var(--vk-text);
}

/* ── 헤더 ── */
.verti-kav-header {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 8px;
}

/* 기존 사이트 섹션 타이틀과 동일 스타일 */
.verti-kav-title {
  font-size: 2.0rem;
  font-weight: 400;
  color: var(--vk-text);
  line-height: 1.2;
}

.verti-kav-more {
  font-size: 0.8rem;       /* 2.0rem × 0.4em = 0.8rem */
  margin-left: 30px;
  cursor: pointer;
  color: var(--vk-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.verti-kav-more:hover {
  color: #fff;
  text-decoration: none;
}

/* ── 캐러셀 ── */
.verti-kav-wrap {
  position: relative;
  margin-top: 5px;
}

.verti-kav-outer {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 1.5%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 1.5%, #000 97%, transparent 100%);
}

.verti-kav-track {
  display: flex;
  gap: var(--vk-gap);
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  cursor: grab;
  user-select: none;
}
.verti-kav-track.verti-kav-dragging {
  cursor: grabbing;
  transition: none;
}

/* ── 카드 ── */
.verti-kav-card {
  flex: 0 0 var(--vk-card-w);
  position: relative;
  border-radius: var(--vk-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--vk-surface);
  border: 1px solid var(--vk-border);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.verti-kav-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 14px 36px rgba(0,0,0,0.75);
  z-index: 10;
}

.verti-kav-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.28s;
}
.verti-kav-card:hover .verti-kav-img {
  filter: brightness(1.12);
}

/* ── 오버레이 ── */
.verti-kav-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 38%,
    rgba(0,0,0,0.12) 58%,
    rgba(0,0,0,0.88) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 7px 7px;
}

.verti-kav-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.verti-kav-card-sub {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.62);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 뱃지 ── */
.verti-kav-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: var(--vk-accent);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(235,20,54,0.55);
}

/* ── 화살표 버튼 ── */
.verti-kav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 36px;
  height: 64px;
  background: rgba(20,20,20,0.88);
  border: 1px solid var(--vk-border);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  transition: background 0.18s, opacity 0.18s;
  outline: none;
}
.verti-kav-btn:hover {
  background: rgba(40,40,40,0.96);
}
.verti-kav-btn.verti-kav-hidden {
  opacity: 0;
  pointer-events: none;
}

.verti-kav-btn-prev { left:  0px; }
.verti-kav-btn-next { right: 0px; }

.verti-kav-btn svg  { width: 16px; height: 16px; }

/* ── Shimmer placeholder ── */
@keyframes verti-kav-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.verti-kav-placeholder {
  background: linear-gradient(
    90deg,
    var(--vk-surface) 25%,
    rgba(255,255,255,0.05) 50%,
    var(--vk-surface) 75%
  );
  background-size: 200% 100%;
  animation: verti-kav-shimmer 1.4s infinite;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .verti-kav-section { --vk-card-w: var(--vk-card-w-md); }
}
@media (max-width: 640px) {
  .verti-kav-section {
    --vk-card-w: var(--vk-card-w-sm);
    --vk-gap: 6px;
  }
  .verti-kav-btn { display: none; }
  .verti-kav-outer {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%);
  }
  .verti-kav-outer::-webkit-scrollbar { display: none; }
  .verti-kav-track { transition: none; }
}