@media (min-width: 1420px) {
  html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
  }
}

@media (max-width: 1419px) {
  html {
  scroll-padding-top: 70px;
  scroll-behavior: smooth;
  }
}



/* ===============================
   Accordion
================================ */
.accordion-content {
  display: none;
}

.accordion-item.active+.accordion-content {
  display: block;
}


/* ===============================
   Grid Containers (Base)
   - container1 / container2 동일 베이스
   - container3 별도
================================ */
.container1,
.container2 {
  grid-template-areas:
    'a b'
    'c b';
}

.container3 {
  grid-template-areas:
    'a b'
    'c b';
}


/* ===============================
   Items: container1
================================ */
.title1 {
  grid-area: a;
  align-self: end;
}

.subtext1 {
  grid-area: c;
  align-self: start;
}

.thumb1 {
  grid-area: b;
}


/* ===============================
   Items: container2 (Base)
   - 데스크톱(801px+)에서 레이아웃 재정의됨
================================ */
.title2 {
  grid-area: a;
  align-self: end;
}

.subtext2 {
  grid-area: c;
  align-self: start;
}

.thumb2 {
  grid-area: b;
}


/* ===============================
   Items: container3
================================ */
.title3 {
  grid-area: b;
  align-self: end;
}

.subtext3 {
  grid-area: d;
  align-self: start;
}

.thumb3 {
  grid-area: c;
  justify-content: start;
}

.frontline {
  grid-area: a;
}

.backline {
  grid-area: f;
  align-self: end;
}


/* ===============================
   Mobile (≤800px)
================================ */
@media (max-width: 1023px) {

  .container1,
  .container2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c';
  }

  .container3 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c'
      'd'
      'f';
  }
}


/* ===============================
   Desktop (≥801px)
   - container2: 레이아웃/영역 재지정
   - container3: 세로 스택 + 좌측 고정 썸네일
================================ */
@media (min-width: 1024px) {

  /* container2: 
     a | b
     a | c
  */
  .container2 {
    grid-template-areas:
      'a b'
      'a c';
  }

  .title2 {
    grid-area: b;
    align-self: end;
  }

  .subtext2 {
    grid-area: c;
    align-self: start;
  }

  .thumb2 {
    grid-area: a;
    justify-content: start;
  }

  /* container3:
     c | a
     c | b
     c | d
     c | f
  */
  .container3 {
    grid-template-areas:
      'c a'
      'c b'
      'c d'
      'c f';
  }
}



@layer utilities {
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  .animate-marquee {
    animation: marquee 80s linear infinite;
  }

  @media (max-width: 1023px) {
    .animate-marquee {
      animation: marquee 60s linear infinite;
    }
  }
}