@tailwind base;
@tailwind components;
@tailwind utilities;

@import '~slick-carousel/slick/slick.css';
@import '~slick-carousel/slick/slick-theme.css';

@layer base {
  /* 스크롤바 커스텀 */
  ::-webkit-scrollbar {
    width: 16px; /* 스크롤바의 너비 */
    height: 16px;
  }
  ::-webkit-scrollbar-track {
    background: none;
  }
  ::-webkit-scrollbar-thumb {
    /* height: 30%; 스크롤바의 길이 */
    background: #6f6f6f; /* 스크롤바의 색상 */
    border-radius: 10px;
    background-clip: padding-box;
    border: 6px solid transparent;
  }
}

@layer components {
  .body-h-screen {
    /* equivalent to 100dvh in major browsers */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  .main-h-screen {
    height: 100vh;
  }

  /* TODO: 추후에 필요하면 --vh 정의해서 사용하기  */
  .mobile-safe-h-screen {
    /* equivalent to 100dvh in major browsers */
    height: calc(var(--vh, 1vh) * 100 - 54px);
  }

  .mobile-safe-min-h-screen {
    /* equivalent to 100dvh in major browsers */
    min-height: calc(var(--vh, 1vh) * 100 - 54px);
  }

  @supports (-webkit-touch-callout: none) {
    .mobile-safe-h-screen {
      /* for ios safari 15, safe-area-inset-bottom is 0, so a special fix apply here */
      height: calc(var(--vh, 1vh) * 100 - 54px);
      height: -webkit-fill-available;
      height: stretch;
    }
  }

  @supports (-webkit-touch-callout: none) {
    .mobile-safe-min-h-screen {
      /* for ios safari 15, safe-area-inset-bottom is 0, so a special fix apply here */
      min-height: calc(var(--vh, 1vh) * 100 - 54px);
      min-height: -webkit-fill-available;
    }
  }
  @supports (-webkit-touch-callout: none) {
    .main-h-screen {
      height: 100vh;
      height: -webkit-fill-available;
    }
  }
}
