/* ==========================================================================
   Variables & Global
   ========================================================================== */
:root {
  --head-size: clamp(52px, 8vw, 72px);
  --section-height: calc(100vh - var(--head-size));
  --padding: clamp(15px, 4vw, 50px);
  --paddingx2: clamp(30px, 8vw, 100px);
  --radius: 15px;
  --radius-lg: 20px;
  --ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --c-primary: #2c3e50;
  --c-accent: #3498db;
  --c-pink: #e74c3c;
  --c-white: #fff;
  --c-shadow: rgba(0, 0, 0, 0.15);
  --c-shadow-hover: rgba(0, 0, 0, 0.2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Cafe24Oneprettynight', sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-white);
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  & > div { text-align: center; }

  & img {
    max-width: min(300px, 80vw);
    width: 100%;
    border-radius: var(--radius);
    height: auto;
  }

  & h1, & h2 { margin: 10px 0; }
}

/* ==========================================================================
   Container & Smooth Scrollbar
   ========================================================================== */
#container {
  height: 100vh;
  visibility: hidden;
  overflow: hidden;
}

/* Smooth Scrollbar 내부 래퍼가 pin 콘텐츠를 자르지 않도록 */
.scroll-content {
  overflow: visible !important;
}

/* ==========================================================================
   Header
   ========================================================================== */
header {
  width: 100%;
  height: 100%;
  background: var(--c-white);
  padding: clamp(10px, 2vw, 20px) 0;
  z-index: 1000;
  position: relative;
  box-shadow: 0 2px 10px var(--c-shadow);

  .headerWrap {
    display: flex;
    padding: 0 var(--padding);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    box-sizing: border-box;
  }

  & > * { flex: 1; }

  & nav {
    align-items: center;

    & ul { 
      gap: clamp(12px, 2vw, 24px);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & li a {
      transition: var(--ease);
      padding: 8px;
      border-radius: 4px;
      display: inline-block;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
      }

      &:focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 2px;
      }
    }
  }

  .logo {
    position: relative;
    text-align: center;

    & h1 a {
      display: inline-block;
      transition: var(--ease);
      &:hover { transform: scale(1.02); }
    }

    .cursor {
      display: inline-block;
      height: 60%;
      width: 2px;
      position: absolute;
      top: 50%;
      right: -5px;
      transform: translateY(-50%);
      opacity: 0;
      background: var(--c-primary);
    }
  }

  .rightBox {
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    & p { word-break: break-all; }
  }
}

@media (max-width: 768px) {
  header {
    .headerWrap {
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }
    & > * { flex: none; }
    & nav ul { justify-content: center; }
    .rightBox p { font-size: clamp(14px, 3vw, 18px); }
  }
}

/* ==========================================================================
   Main Banner
   ========================================================================== */
.mainBanner {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.9) contrast(1.1);
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
  }

  .noScrollBox {
    position: absolute;
    inset: 0;
    z-index: 9999;
  }

  .scrollOn {
    display: block;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: url("../images/icon_scroll.png") no-repeat center / contain;
    width: 50px;
    height: 103px;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: var(--ease);

    &:hover {
      transform: translateX(-50%) scale(1.1);
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    }
  }
}

/* ==========================================================================
   Section Common
   ========================================================================== */
.section {
  overflow-x: hidden;
  position: relative;
}

/* ==========================================================================
   Section 01 — Gallery Slide
   ========================================================================== */
#section01 {
  height: var(--section-height);
  background: linear-gradient(135deg, #c3dae2 0%, #dcebf0 50%, #b8d4df 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--padding) var(--paddingx2);
  box-sizing: border-box;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 1px, transparent 1px),
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px;
    pointer-events: none;
  }

  .titleWrap {
    display: inline-block;
    overflow: hidden;
    margin-bottom: clamp(60px, 10vw, 100px);
    position: relative;
    z-index: 1;

    & h2 {
      display: inline-flex !important;
      padding: 15px 15px 0;
      box-sizing: content-box;
      font-size: clamp(28px, 6vw, 56px);
      line-height: 1.2;
      background: linear-gradient(135deg, #2c3e50, #34495e);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;

      /* splitText로 분리된 각 글자에도 그라데이션 적용
         (transform이 새 스태킹 컨텍스트를 만들어 부모의 background-clip: text가 깨지므로) */
      & .text {
        background: linear-gradient(135deg, #2c3e50, #34495e);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    & span {
      display: block;
      background: linear-gradient(45deg, #2c3e50, #34495e);
      height: 2px;
      width: 0;
      border-radius: 1px;
    }
  }

  & ul {
    gap: clamp(20px, 4vw, 35px);
    position: relative;
    z-index: 1;

    & li {
      flex-shrink: 0;
      width: clamp(300px, 45vw, 520px);
      position: relative;

      & img {
        width: 100%;
        height: auto;
        border-radius: var(--radius);
        transition: var(--ease);
        box-shadow: 0 10px 30px var(--c-shadow), 0 4px 15px rgba(0,0,0,0.1);

        &:hover {
          transform: scale(1.03) translateY(-5px);
          box-shadow: 0 20px 50px var(--c-shadow-hover), 0 8px 25px var(--c-shadow);
        }
      }

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(52,152,219,0.1), transparent 50%, rgba(155,89,182,0.1));
        border-radius: var(--radius);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      &:hover::after { opacity: 1; }
    }
  }
}

/* ==========================================================================
   Section Intro — Story Reveal
   ========================================================================== */
#sectionIntro {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 100px) var(--padding);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.15), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.1), transparent),
      radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.2), transparent),
      radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.12), transparent);
    background-size: 200px 200px, 300px 300px, 250px 250px, 150px 150px;
    animation: twinkle 5s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .introContent {
    max-width: 900px;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .introText {
    text-align: center;

    & h2 {
      color: var(--c-white);
      margin-bottom: 40px;
      text-shadow: 0 0 20px rgba(100, 200, 255, 0.3);
    }

    & p {
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 16px;
      line-height: 1.8;
    }
  }

  .floatingFish {
    position: absolute;
    inset: 0;
    pointer-events: none;

    .fish {
      position: absolute;
      font-size: clamp(24px, 5vw, 48px);
      filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.5));
    }

    .fish1 { top: 15%; left: 10%; }
    .fish2 { top: 30%; right: 8%; }
    .fish3 { bottom: 25%; left: -5%; }
    .fish4 { top: 60%; right: 15%; }
    .fish5 { bottom: 15%; right: 13%; }
  }
}

@keyframes twinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ==========================================================================
   Section Stats — Info Cards
   ========================================================================== */
#sectionStats {
  min-height: 80vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vw, 100px) var(--padding);
  box-sizing: border-box;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 2px, transparent 2px),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 60px, 40px 40px;
    pointer-events: none;
  }

  .statsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(20px, 4vw, 40px);
    max-width: 1100px;
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .statCard {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    padding: clamp(30px, 4vw, 50px);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: var(--ease);
    cursor: default;
    position: relative;
    overflow: hidden;
    will-change: transform;

    &::before {
      content: '';
      position: absolute;
      inset: -2px;
      background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 40%, transparent 60%, rgba(255,255,255,0.2));
      border-radius: inherit;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
      transform: rotate(0deg);
      animation: cardShimmer 6s linear infinite;
      pointer-events: none;
    }

    &:hover::before { opacity: 1; }

    & h3 {
      color: var(--c-white);
      margin: 15px 0 10px;
      position: relative;
    }

    .statIcon {
      font-size: clamp(36px, 6vw, 56px);
      line-height: 1;
      display: inline-block;
    }

    .statValue {
      color: rgba(255, 255, 255, 0.95);
      font-weight: 700;
      letter-spacing: 1px;
      position: relative;
    }
  }

  @keyframes cardShimmer {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

@media (max-width: 600px) {
  #sectionStats .statsGrid {
    grid-template-columns: 1fr;
    max-width: 350px;
  }
}

/* ==========================================================================
   Section 02 — Video
   ========================================================================== */
#section02 {
  min-height: 100vh;
  background: linear-gradient(135deg, #facbd2 0%, #ffdce1 50%, #f5b8c4 100%);
  box-sizing: border-box;
  padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 1px, transparent 1px),
      radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: -1;
  }

  .contentBox {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(30px, 6vw, 80px);
    position: relative;
    z-index: 2;

    .videoBox {
      flex: 1.2;
      max-width: 65%;
      aspect-ratio: 16 / 9;
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 60px var(--c-shadow), 0 8px 25px rgba(0,0,0,0.1);
      transition: var(--ease);
      will-change: transform;
      
      & p {
        text-align: center;
        padding: 5px 0;
        color: var(--c-primary);
      }

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent 50%, rgba(255,255,255,0.05));
        pointer-events: none;
        z-index: 1;
      }

      & iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        border-radius: var(--radius-lg);
      }
    }

    .titleWrap {
      flex: 0.8;
      max-width: 35%;
      min-width: 320px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: var(--radius-lg);
      padding: clamp(25px, 4vw, 40px);
      box-shadow: 0 15px 40px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);

      & h3 {
        margin-bottom: 25px;
        color: var(--c-primary);
        border-bottom: 2px solid rgba(0,0,0,0.1);
        padding-bottom: 10px;
      }

      & ul { list-style: none; padding: 0; margin: 0; }

      & li {
        margin: clamp(15px, 2.5vw, 25px) 0;
        line-height: 1.7;
        position: relative;

        &:not([class*="_"]) {
          font-size: clamp(14px, 2vw, 18px);
        }

        &:not(:last-child)::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.05), transparent);
        }

        & em {
          font-weight: 700;
          color: var(--c-primary);
          display: inline-block;
          margin-right: 8px;
        }

        & a {
          display: inline-block;
          color: var(--c-pink);
          text-decoration: none;
          transition: var(--ease);
          font-weight: 600;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(45deg, var(--c-pink), #c0392b);
            transition: width 0.3s ease;
          }

          &:hover {
            color: #c0392b;
            transform: translateY(-1px);
            &::before { width: 100%; }
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  #section02 .contentBox {
    flex-direction: column;
    text-align: center;
    gap: 40px;

    .videoBox {
      max-width: 100%;
      width: 100%;
      &:hover { transform: none; }
    }

    .titleWrap {
      max-width: 100%;
      min-width: auto;
      & ul { text-align: left; }
    }
  }
}

@media (max-width: 768px) {
  #section02 {
    padding: 30px 15px;

    .contentBox {
      gap: 25px;

      .videoBox {
        border-radius: var(--radius);
        &::before, & iframe { border-radius: var(--radius); }
      }

      .titleWrap {
        padding: 20px;
        border-radius: var(--radius);
        & li { font-size: 14px; margin: 12px 0; }
      }
    }
  }
}

/* ==========================================================================
   Section Parallax — Closing
   ========================================================================== */
#sectionParallax {
  min-height: 80vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .parallaxContent {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .parallaxLayer {
    position: absolute;
    left: 0;
    right: 0;
    top: -120px;
    bottom: -120px;
  }

  .parallaxBg {
    background: linear-gradient(180deg, #0a0a2e 0%, #1a1a4e 40%, #0d3b66 70%, #1a6985 100%);

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 30% 45%, rgba(255,255,255,0.3), transparent),
        radial-gradient(2px 2px at 50% 25%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,0.5), transparent);
      background-size: 200px 200px;
      animation: twinkle 4s ease-in-out infinite alternate;
    }
  }

  .parallaxMid {
    background:
      radial-gradient(ellipse 600px 300px at 30% 80%, rgba(100, 180, 255, 0.08), transparent),
      radial-gradient(ellipse 400px 200px at 70% 60%, rgba(150, 100, 255, 0.06), transparent);
  }

  .parallaxText {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;

    & h2 {
      color: var(--c-white);
      font-size: clamp(32px, 7vw, 72px);
      text-shadow: 0 0 30px rgba(100, 200, 255, 0.5);
      margin-bottom: 20px;
      letter-spacing: 2px;
    }

    & p {
      color: rgba(255, 255, 255, 0.7);
      font-size: clamp(16px, 3vw, 28px);
      letter-spacing: 4px;
    }
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  min-height: 20vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 2px, transparent 2px),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px, 40px 40px;
    animation: float 20s linear infinite;
    pointer-events: none;
  }

  .footerContent {
    flex-direction: column;
    gap: clamp(15px, 3vw, 30px);
    position: relative;
    z-index: 1;
  }

  .footerQuote {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: center;
    letter-spacing: 2px;
  }

  .footerLink {
    color: var(--c-white);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    transition: var(--ease);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    &:active {
      transform: translateY(-1px) scale(1.02);
    }
  }

  .footerInfo {
    display: flex;
    gap: 30px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@keyframes float {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   Utilities & Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root { --c-shadow: rgba(0, 0, 0, 0.8); }
  header { border-bottom: 2px solid var(--c-primary); }
}