/* BASIC css start */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  .LITTLEFORESTER {
    background: #cbbba5; /* BK.png 배경톤과 어울리는 여백 색 */
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* 최하단 배경 */
  .layer-bg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
  }

  /* 최상위 텍스트 */
  .layer-text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  /* 퍼즐 조각 공통 */
  .puzzle {
    position: absolute;
    z-index: 2;
    display: block;
    height: auto;
    pointer-events: none;
    will-change: transform;
  }

  .puzzle-1 {
    left: -1%;
    top: 4.64%;
    width: 22.4%;
    animation: float1 4.2s ease-in-out infinite;
  }

  .puzzle-2 {
    left: 80.35%;
    top: 21.02%;
    width: 20.65%;
    animation: float2 3.6s ease-in-out infinite;
    animation-delay: -1.1s;
  }

  .puzzle-3 {
    left: 0%;
    top: 50%;
    width: 38.43%;
    animation: float3 5s ease-in-out infinite;
    animation-delay: -2.4s;
  }

  @keyframes float1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10%) rotate(-1.5deg); }
  }

  @keyframes float2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12%) rotate(1.5deg); }
  }

  @keyframes float3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-15%) rotate(1deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .puzzle { animation: none; }
  }

  /* ===== 탭 섹션 ===== */
  .tab-section {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    background: #fbf5de; /* 시안 하단 배경톤 */
  }

  .tab-bar {
    position: relative;
    width: 100%;
  }

  .tab-bar img {
    display: block;
    width: 100%;
    height: auto;
  }

  .tab-hit {
    position: absolute;
    top: 0;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
  }

  .slider-track img {
    display: block;
    width: 100%;
    flex: 0 0 100%;
    height: auto;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }

  .slider-wrap {
    cursor: grab;
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 6%;
    max-width: 32px;
    padding: 0;
    z-index: 5;
  }

  .arrow img { width: 100%; height: auto; display: block; pointer-events: none; }

  .arrow-left  { left: 4%; }
  .arrow-right { right: 4%; }

  .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 6;
  }

  .dots button {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #f1dc8b;
    transition: background 0.2s ease;
  }

  .dots button.active {
    background: #222222;
  }

  /* ===== 순차 노출 이미지 섹션 ===== */
  .linear-section {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
  }

  .linear-section img,
  .linear-section a {
    display: block;
    width: 100%;
    height: auto;
  }

  .linear-section a {
    line-height: 0;
  }
  
  
  
  
  /* 영상 */
  .video-container {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* 하단 미세한 공백 제거 */
}

video {
    display: block;
    width: 100%;
    height: auto;
}
/* BASIC css end */