/* ==========================================================================
   [시안 3] 시안 1(파란 그라데이션 메인) + 시안 2의 입장권 (index_v3.html 전용)
   style.css 다음에 로드. 입장권 스타일은 main-v2.css에서 복사해 독립 관리
   (시안 2를 수정해도 시안 3에는 영향 없음)
   ========================================================================== */

/* ---------- 자리: 기존 원형 배너(.hero-apply-banner)의 위치·반응형만 쓰고 모양은 해제 ---------- */

.hero-apply-banner.v3-ticket-slot {
  display: block;
  width: auto;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left; /* 원형 배너의 가운데 정렬 해제 */
}

.hero-apply-banner.v3-ticket-slot::before,
.hero-apply-banner.v3-ticket-slot::after {
  display: none;
}

.hero-apply-banner.v3-ticket-slot:hover {
  translate: none;
  box-shadow: none;
}

/* ---------- 입장권 ---------- */

.v3-ticket-slot .v2-ticket {
  --ink: #0b1330;
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(260px, 20vw, 310px);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.45));
  transform: rotate(3deg);
  transition: transform 0.35s var(--ease-snap), filter 0.35s var(--ease-snap);
  cursor: pointer;
}

.v3-ticket-slot .v2-ticket:hover {
  transform: rotate(0deg) translateY(-6px);
  filter: drop-shadow(0 34px 36px rgba(0, 0, 0, 0.4));
}

/* 위 흰 티켓: 아래 양쪽 모서리를 반원으로 뚫음 (파란 배경이 비쳐 보이는 실제 구멍) */
.v3-ticket-slot .v2-ticket-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 26px 26px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  -webkit-mask:
    radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}

.v3-ticket-slot .v2-ticket-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-primary);
}

.v3-ticket-slot .v2-ticket-title {
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(26px, 3.8vh, 34px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.v3-ticket-slot .v2-ticket-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.v3-ticket-slot .v2-ticket-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.v3-ticket-slot .v2-ticket-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-snap);
}

.v3-ticket-slot .v2-ticket:hover .v2-ticket-cta svg {
  transform: translateX(4px);
}

/* 아래 노란 꼬리표: 위 양쪽 모서리 반원 구멍 + 절취선 */
.v3-ticket-slot .v2-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 26px 22px;
  border-radius: 0 0 10px 10px;
  background-color: #ffd100;
  background-image: linear-gradient(135deg, #ffe24a, #ffd100 55%, #f5c400);
  color: var(--ink);
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}

.v3-ticket-slot .v2-ticket-stub::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  border-top: 2px dashed rgba(11, 19, 48, 0.25);
}

.v3-ticket-slot .v2-ticket-dday {
  font-family: "BusanFont", var(--font-sans);
  font-size: clamp(34px, 5vh, 44px);
  font-weight: 600;
  line-height: 1;
}

.v3-ticket-slot .v2-ticket-date {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.v3-ticket-slot .v2-ticket-barcode {
  width: 100%;
  height: 22px;
  margin-top: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 4px,
    var(--ink) 4px 5px,
    transparent 5px 8px,
    var(--ink) 8px 11px,
    transparent 11px 13px
  );
  opacity: 0.85;
}

/* ---------- 반응형 ---------- */

/* 태블릿·모바일: 본문 아래 가운데 (기존 원형 배너 자리 규칙 사용) */
@media (max-width: 980px) {
  .hero-apply-banner.v3-ticket-slot {
    width: auto;
    margin-top: 36px;
  }

  .v3-ticket-slot .v2-ticket {
    width: 300px;
    transform: rotate(2deg);
  }
}

@media (max-width: 640px) {
  .hero-apply-banner.v3-ticket-slot {
    align-self: center;
    width: min(100%, 320px);
  }

  .v3-ticket-slot .v2-ticket {
    width: 100%;
    transform: none;
  }
}