/* Swup 메인 컨텐츠 살짝 이동 */
html.is-changing .transition-main {
  transition: transform 400ms ease-in-out;
}
html.is-animating.is-leaving .transition-main {
  transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));
}
html.is-animating.is-rendering .transition-main {
  transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));
}

/* 오버레이 */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: oklch(21% 0.034 264.665);
  opacity: 0;
  transform: translate3d(0, calc(-1 * 100% * var(--overlay-direction, 1)), 0);
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.35);
}
html.is-changing .transition-overlay {
  transition: transform 400ms ease-in-out, opacity 200ms ease;
  opacity: 1;
}
html.is-animating .transition-overlay { transform: translate3d(0, 0, 0); }
html.is-rendering .transition-overlay { transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0); }
html.to-back { /* --overlay-direction: -1; */ }
/* ==================================
   CUSTOM CSS - 커스텀 스타일
   ================================== */

/* ==================================
   SCROLL PROGRESS BAR
   ================================== */

/* 스크롤 진행률 바 */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
  background-size: 200% 100%;
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  animation: progressGradient 3s ease-in-out infinite;
}

/* 그라데이션 애니메이션 */
@keyframes progressGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 스크롤 진행률 바 호버 효과 */
.scroll-progress-bar:hover {
  height: 6px;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
}

/* ==================================
   COMPREHENSIVE CSS RESET
   ================================== */

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* 3. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 4. Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* 5. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 6. Create a root stacking context */
#root,
#__next {
  isolation: isolate;
}

/* 7. Improve line heights */
html {
  background-color: #000000;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color:#fff;
  background-color: #000000;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}


/* 9. Remove all list styles completely */
ul,
ol {
  list-style: none;
  list-style-type: none;
  list-style-position: outside;
  list-style-image: none;
}

li {
  list-style: none;
}

/* Remove ::marker pseudo-element */
li::marker {
  content: none;
}

/* Alternative approach for older browsers */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

section{overflow:hidden;}

/* ==================================
   CUSTOM ANIMATIONS
   ================================== */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================================
   ANIMATION UTILITY CLASSES
   ================================== */

.animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-right {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ==================================
   JAVASCRIPT FUNCTIONALITY
   ================================== */

/* Mobile menu toggle */
.mobile-menu-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu-open body {
  overflow: hidden;
}

/* Perfect hamburger to X animation */
#mobile-menu-btn span {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  display: block;
}

/* ==================================
   GLASSMORPHISM EFFECTS
   ================================== */

/* 글래스 카드 기본 스타일 */
.glass-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: cardFloat 8s ease-in-out infinite;
}

/* 카드 3D 플로팅 애니메이션 */
@keyframes cardFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px);
  }
  25% {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateZ(5px);
  }
  50% {
    transform: perspective(1000px) rotateX(-0.5deg) rotateY(1deg) translateZ(3px);
  }
  75% {
    transform: perspective(1000px) rotateX(0.5deg) rotateY(-0.5deg) translateZ(7px);
  }
}

/* 애니메이션 그라데이션 배경 */
.glass-bg {
  background: linear-gradient(
    135deg,
    rgba(72, 137, 242, 0.94) 0%,
    rgb(149, 66, 227) 25%,
    rgba(6, 167, 212, 0.965) 50%,
    rgba(111, 16, 219, 0.886) 75%,
    rgba(246, 59, 196, 0.92) 100%
  );
  background-size: 400% 400%;
  animation: gradientMove 8s ease-in-out infinite;
}

/* 글래스 오버레이 */
.glass-overlay {
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 그라데이션 애니메이션 */
@keyframes gradientMove {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 50% 0%;
  }
}

/* 텍스트 그라데이션 */
.text-gradient {
  background: linear-gradient(135deg, #60a5fa, #ab9ade, #f020ae);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: textGradient 3s ease-in-out infinite;
}

@keyframes textGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}



/* ==================================
   HERO TITLE ANIMATIONS
   ================================== */

/* AI 텍스트 그라데이션 */
.hero-gradient-text {
  background: linear-gradient(135deg, #60fae5, #a78bfa, #f472b6, #34d399);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
  animation: heroGradient1 4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
}

/* IMMERSIVE 텍스트 그라데이션 */
.hero-gradient-text-alt {
  background: linear-gradient(135deg, #34d399, #06b6d4, #8b5cf6, #f59e0b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
  animation: heroGradient2 4s ease-in-out infinite reverse;
  text-shadow: 0 0 30px rgba(52, 211, 153, 0.5);
}

/* 반짝이는 효과 */
.hero-sparkle {
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%);
  animation: sparkle 3s linear infinite;
}

/* 그라데이션 애니메이션 */
@keyframes heroGradient1 {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

@keyframes heroGradient2 {
  0%, 100% {
    background-position: 100% 50%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  75% {
    background-position: 100% 0%;
  }
}

/* 반짝이는 애니메이션 */
@keyframes sparkle {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==================================
   FLOATING ORBS & PARTICLES
   ================================== */

/* 떠다니는 구체들 */
.floating-orb-1 {
  background: linear-gradient(135deg, 
    rgba(96, 165, 250, 0.4) 0%,
    rgba(167, 139, 250, 0.4) 50%,
    rgba(6, 182, 212, 0.4) 100%
  );
  animation: float1 6s ease-in-out infinite, colorShift1 8s linear infinite;
}

.floating-orb-2 {
  background: linear-gradient(135deg, 
    rgba(52, 211, 153, 0.3) 0%,
    rgba(139, 92, 246, 0.3) 50%,
    rgba(244, 114, 182, 0.3) 100%
  );
  animation: float2 8s ease-in-out infinite, colorShift2 10s linear infinite;
}

.floating-orb-3 {
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.2) 0%,
    rgba(239, 68, 68, 0.2) 50%,
    rgba(168, 85, 247, 0.2) 100%
  );
  animation: float3 7s ease-in-out infinite, colorShift3 9s linear infinite;
}

.floating-orb-4 {
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.3) 0%,
    rgba(34, 197, 94, 0.3) 50%,
    rgba(59, 130, 246, 0.3) 100%
  );
  animation: float4 5s ease-in-out infinite, colorShift4 7s linear infinite;
}

/* 파티클 효과 */
.particle-1 {
  background: linear-gradient(45deg, #60a5fa, #a78bfa);
  animation: particle1 4s linear infinite;
}

.particle-2 {
  background: linear-gradient(45deg, #34d399, #06b6d4);
  animation: particle2 5s linear infinite;
}

.particle-3 {
  background: linear-gradient(45deg, #f472b6, #8b5cf6);
  animation: particle3 6s linear infinite;
}

/* 떠다니는 애니메이션 */
@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(0px) translateX(20px); }
  75% { transform: translateY(15px) translateX(-10px); }
}

@keyframes float3 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

@keyframes float4 {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-25px) scale(1.1); }
}

/* 컬러 변화 애니메이션 */
@keyframes colorShift1 {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes colorShift2 {
  0% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(180deg) saturate(1.5); }
  100% { filter: hue-rotate(360deg) saturate(1); }
}

@keyframes colorShift3 {
  0% { filter: hue-rotate(0deg) brightness(1); }
  33% { filter: hue-rotate(120deg) brightness(1.3); }
  66% { filter: hue-rotate(240deg) brightness(0.8); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}

@keyframes colorShift4 {
  0% { filter: hue-rotate(0deg) contrast(1); }
  25% { filter: hue-rotate(90deg) contrast(1.2); }
  50% { filter: hue-rotate(180deg) contrast(0.9); }
  75% { filter: hue-rotate(270deg) contrast(1.1); }
  100% { filter: hue-rotate(360deg) contrast(1); }
}

/* 파티클 애니메이션 */
@keyframes particle1 {
  0% { transform: translateY(0px) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

@keyframes particle2 {
  0% { transform: translateX(0px) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(-80px) scale(1.2); opacity: 0; }
}

@keyframes particle3 {
  0% { transform: rotate(0deg) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: rotate(360deg) scale(1.5); opacity: 0; }
}

/* ==================================
   3D POSTER EFFECTS
   ================================== */

/* 3D 포스터 컨테이너 */
.poster-3d-container {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  display: inline-block;
}

/* 3D 포스터 스타일 */
.poster-3d {
  transform-style: preserve-3d;
  position: relative;
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.3),
    0 5px 10px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  /* CSS 애니메이션 제거 - GSAP가 대신 처리 */
}

/* CSS 애니메이션 제거 - GSAP가 처리 */


/* 3D 글로우 효과 */
.poster-3d::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.3),
    rgba(167, 139, 250, 0.3),
    rgba(52, 211, 153, 0.3),
    rgba(244, 114, 182, 0.3)
  );
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}


/* 반사 효과 */
.poster-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* 움직이는 빛 오버레이 */
.poster-light-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%; /* 카드 크기와 동일 */
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.poster-light-overlay::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.08) 90deg,
    rgba(96, 165, 250, 0.06) 120deg,
    rgba(255, 255, 255, 0.1) 150deg,
    transparent 180deg,
    transparent 300deg,
    rgba(167, 139, 250, 0.05) 330deg,
    transparent 360deg
  );
  border-radius: inherit;
  animation: lightRotate 15s ease-in-out infinite;
  transform-origin: center center;
  filter: blur(1px);
}

.poster-light-overlay::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background: radial-gradient(
    ellipse 80% 60% at 45% 40%,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.02) 20%,
    rgba(96, 165, 250, 0.03) 40%,
    transparent 70%
  );
  border-radius: inherit;
  animation: lightPulse 12s ease-in-out infinite;
  filter: blur(2px);
}

/* 빛 회전 애니메이션 */
@keyframes lightRotate {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0.2;
  }
  20% {
    transform: rotate(72deg) scale(1.02);
    opacity: 0.4;
  }
  40% {
    transform: rotate(144deg) scale(0.98);
    opacity: 0.15;
  }
  60% {
    transform: rotate(216deg) scale(1.03);
    opacity: 0.35;
  }
  80% {
    transform: rotate(288deg) scale(0.99);
    opacity: 0.2;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 0.2;
  }
}

/* 빛 펄스 애니메이션 */
@keyframes lightPulse {
  0%, 100% {
    transform: scale(1) translateX(0px) translateY(0px);
    opacity: 0.1;
  }
  30% {
    transform: scale(1.02) translateX(2px) translateY(-1px);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.04) translateX(-1px) translateY(1px);
    opacity: 0.15;
  }
  70% {
    transform: scale(1.01) translateX(1px) translateY(-2px);
    opacity: 0.2;
  }
}

/* ==================================
   UNIVERSAL BUTTON HOVER EFFECTS
   ================================== */

/* 범용 버튼 호버 효과 클래스 */
.btn-hover {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0); /* GPU 가속 */
}

.btn-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
  z-index: 1;
}

.btn-hover::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

/* 호버 시 효과 */
.btn-hover:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-hover:hover::before {
  left: 100%;
}

.btn-hover:hover::after {
  width: 200px;
  height: 200px;
}

/* 클릭 시 효과 */
.btn-hover:active {
  transform: translateY(0) scale(0.98);
  transition: all 0.1s ease;
}

/* 텍스트가 위로 오도록 */
.btn-hover > * {
  position: relative;
  z-index: 2;
}

/* 다크 버튼용 변형 */
.btn-hover.btn-dark::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
}

.btn-hover.btn-dark:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 라이트 버튼용 변형 */
.btn-hover.btn-light::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.1),
    transparent
  );
}

.btn-hover.btn-light::after {
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.05) 0%,
    transparent 70%
  );
}

.btn-hover.btn-light:hover {
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 글로우 효과 버튼 */
.btn-hover.btn-glow {
  box-shadow: 0 0 0 rgba(59, 130, 246, 0);
}

.btn-hover.btn-glow:hover {
  box-shadow: 
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(59, 130, 246, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 그라데이션 보더 효과 */
.btn-hover.btn-gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.btn-hover.btn-gradient-border::before {
  background: linear-gradient(
    45deg,
    #60a5fa,
    #a78bfa,
    #34d399,
    #f472b6,
    #60a5fa
  );
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 모바일 최적화는 GSAP에서 처리 */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Header scroll effect */
header {
  transition: transform 0.3s ease-in-out;
}

.header-hidden {
  transform: translateY(-100%);
}

/* Language toggle active state */
.lang-btn.active {
  background: oklch(51.1% 0.262 276.966) !important;
}

/* Tab functionality */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Scroll animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================
   COMPONENT SPECIFIC STYLES
   ================================== */

/* Ticket booking hover effects */
.ticket-card {
  transition: all 0.3s ease;
}

.ticket-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Speaker card effects */
.speaker-card {
  transition: all 0.3s ease;
}

.speaker-card:hover {
  transform: translateY(-2px);
}

/* Company logo hover effects */
.company-logo {
  transition: all 0.3s ease;
  filter: grayscale(100%);
}

.company-logo:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ==================================
   UTILITY CLASSES
   ================================== */

/* Glassmorphism effect */
.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================================
   CUSTOM SCROLLBAR - 다크 테마
   ================================== */

/* 전체 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 12px;
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 6px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 스크롤바 썸 (드래그 부분) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    #374151 0%, 
    #4b5563 25%, 
    #6b7280 50%, 
    #4b5563 75%, 
    #374151 100%
  );
  border-radius: 6px;
  border: 2px solid #1e293b;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* 스크롤바 썸 호버 효과 */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    #4b5563 0%, 
    #6b7280 25%, 
    #9ca3af 50%, 
    #6b7280 75%, 
    #4b5563 100%
  );
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* 스크롤바 썸 활성화 상태 */
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, 
    #6b7280 0%, 
    #9ca3af 25%, 
    #d1d5db 50%, 
    #9ca3af 75%, 
    #6b7280 100%
  );
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 스크롤바 코너 */
::-webkit-scrollbar-corner {
  background: #000000;
}

/* Firefox용 스크롤바 스타일 */
* {
  scrollbar-width: thin;
  scrollbar-color: #6b7280 #000000;
}

/* 스크롤바 애니메이션 효과 */
::-webkit-scrollbar-thumb {
  position: relative;
}

::-webkit-scrollbar-thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 70%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}

::-webkit-scrollbar-thumb:hover::before {
  opacity: 1;
  animation: scrollbarShine 1.5s ease-in-out infinite;
}

@keyframes scrollbarShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ==================================
   LOADING STATES
   ================================== */

.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ==================================
   RESPONSIVE UTILITIES
   ================================== */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
@media (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* Show only on desktop */
@media (min-width: 768px) {
  .show-desktop {
    display: block !important;
  }
}

/* 개선된 타임테이블 스타일 */
.timetable-tab-btn {
    color: #94a3b8;
    background: transparent;
}

.timetable-tab-btn.active {
    color: white;
}

.timetable-tab-btn:not(.active) {
    color: #64748b;
}

.timetable-tab-btn:not(.active):hover {
    color: #cbd5e1;
}

.timetable-tab-btn:not(.active) .w-3 {
    opacity: 0.5;
}

.tab-indicator {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timetable-tab-btn[data-tab="day2"].active ~ .tab-indicator,
.timetable-tab-btn[data-tab="day2"]:hover ~ .tab-indicator {
    transform: translateX(100%);
    background: linear-gradient(to right, #8b5cf6, #a855f7);
}

.timetable-tab-content {
    display: none;
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.timetable-tab-content.active {
    display: block;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 타임라인 이벤트 애니메이션 */
.timeline-event {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInFromLeft 0.8s ease-out forwards;
}

.timeline-event:nth-child(even) {
    transform: translateX(20px);
    animation: slideInFromRight 0.8s ease-out forwards;
}

@keyframes slideInFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 타임라인 이벤트 호버 효과 */
.timeline-event > div > div > div {
    transition: all 0.3s ease;
}

.timeline-event:hover > div > div > div {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 개선된 캘린더 스타일 */
.calendar-container {
    min-height: 600px;
    overflow: hidden;
}

.calendar-header {
    backdrop-filter: blur(10px);
}

.calendar-body {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.3), rgba(30, 41, 59, 0.3));
    min-height: 500px;
}

.time-column {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(5px);
    min-height: 500px;
}

.event-column {
    min-height: 500px;
    background: rgba(15, 23, 42, 0.2);
}

.time-slot {
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
}


/*
*-------------------------------------------------------------------*
           타임테이블         
*-------------------------------------------------------------------*
*/

.time_table{
  width: 100%;
  margin: 0 auto;
  font-size:14px;
}

.time_table table{
  border-collapse: separate;
  border-spacing: 0;
}

.time_table table thead th{
  border-right:0;
  background:none;
  color:#fff;
  border-bottom: 1px solid #dbe9f70f;
  border-right: 1px solid #dbe9f70f;
}

.time_table table thead th:first-child{
  background:#1e293b;
  /* border:none; */
}

.time_table table th{
  background-color: #be185d;
  height: 30px;
  border-right: 1px solid #dbe9f70f;
  border-bottom: 1px solid #dbe9f70f;
}

.time_table table th:last-child{
  border-right: 0;
}

/*sticky 적용*/

.time_table table th:first-child{
  position: sticky;
  left: 0;
}

.time_table table td{
  border-right: 1px solid #dbe9f70f;
  border-bottom: 1px solid #dbe9f70f;
  padding: 5px;
  text-align: center;
  height: 30px;
  color:#1e293b;
}

/*sticky 적용*/

.time_table table td:first-child{
  background-color: #1e293b;
  color:#fff;
  border-right:0;
  border-bottom: 1px solid #323f4c;
  position: sticky;
  left: 0;
}


.line_height{
  line-height:1.5em!important;
}

/* ==================================
   타임테이블 탭 스타일 
   ================================== */

/* 타임테이블 탭 스타일 */
.timetable-tabs {
    display: flex;
    position: relative;
}

.timetable-tab-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-weight: 500;
    border-radius: 24px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    gap: 2px;
    cursor: pointer;
    flex: 1;
}

.timetable-tab-btn.active {
    color: white;
}

.timetable-tab-btn:hover {
    color: #e2e8f0;
}

.tab-indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    width: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 99px;
    transition: all 0.3s ease;
    z-index: 1;
}

.timetable-tab-content {
    display: none;
    animation: fadeInUp 0.6s ease-out;
}

.timetable-tab-content.active {
    display: block !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* speakers_section */
.bg_boximg {
  background: linear-gradient(4deg, rgba(1, 1, 20, 1) 0%, rgba(1, 1, 17, 0.1) 100%);
}

/* ==================================
   공통 모달 시스템
   ================================== */

/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 모달 컨테이너 */
.modal-container {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

/* 모달 헤더 */
.modal-header {
  padding: 20px 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

/* 모달 닫기 버튼 */
.modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: rotate(90deg);
}

/* 모달 바디 */
.modal-body {
  padding: 30px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* 모달 푸터 */
.modal-footer {
  padding: 20px 30px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

/* 모달 버튼들 */
.modal-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
}

.modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

.modal-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* 반응형 */
@media (max-width: 768px) {
  .modal-overlay{
    padding:0;
  }
  .modal-container {
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0px;
  }
  
  .modal-header, .modal-body, .modal-footer {
    padding: 20px;
  }
  
  .modal-title {
    font-size: 20px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-btn {
    width: 100%;
  }
}

/* 스크롤바 커스터마이징 */
.modal-container::-webkit-scrollbar {
  width: 6px;
}

.modal-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.modal-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}