/* Layout Utility Classes */
@layer components {
  /* 표준형 */
  .section-standard {
    @apply relative h-[640px] md:h-[1000px];
  }
  .content-standard {
    @apply relative h-full flex flex-col items-center justify-center text-center px-[20px] sm:px-[40px];
  }

  /* 고정형 */
  .section-container.static {
    @apply overflow-hidden relative pt-[32px] pb-[80px] px-[20px] sm:px-[40px] md:pt-[64px] md:pb-[200px] bg-[#F0F0F0];
  }
  .section-static {
    @apply mx-auto lg:max-w-[1300px];
  }
  .section-static + .section-static {
    @apply mt-[80px] md:mt-[100px];
  }

  .border-line {
    @apply overflow-hidden relative rounded-[4px] md:rounded-lg
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
    after:border after:border-white/10 after:rounded-[4px] after:md:rounded-lg;
  }

  /* 표준형 Title Classes */
  .title-xlg {
    @apply line-clamp-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
  }
  .title-lg {
    @apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[42px] md:leading-[56px];
  }
  .title-md {
    @apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
  }
  .title-sm {
    @apply text-[15px] font-[500] leading-[24px] tracking-[-0.45px] md:text-[20px] md:leading-[30px] md:tracking-[-0.6px];
  }
  .title-xs {
    @apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
  }
}