@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import "font/pretendard/dist/web/static/pretendard.css";
@import "tailwind/text.css";
@import "tailwind/layout.css";
@import "tailwind/button.css";
@import "tailwind/utill.css";
@import "web/home.css";
@import "web/technical.css";
@import "web/product.css";
@import "web/store.css";
@import "web/sidebar.css";
@import "web/header.css";

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

@layer base {
  html {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    height: 100%;
  }

  html[lang="en"] .en-hidden {
    display: none;
  }

  html[lang="en"] .en-mb2010 {
    @apply mb-[10px] lg:mb-[13px] xl:mb-[17px] 2xl:mb-[20px];
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.02em;
  }

  body {
    @apply text-default break-keep h-full;
  }

  ::-webkit-scrollbar {
    @apply w-1.5;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-md;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
}

/* 전체 스크롤바 숨기기 (모든 브라우저 대응) */
.scroll-hidden {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.input {
  @apply text1614;
  @apply px-5 py-4 w-full rounded bg-CF8 border border-CEE placeholder-C94;
}

.tab_menu {
  @apply grid grid-cols-2;
}

.tab_menu .item {
  @apply border-b border-[#E8E8E8];
  @apply text-[#DDDDDD] text2216 font-semibold text-center h-[58px] leading-[58px];
}

.tab_menu .on {
  @apply text-primary border-b-2 border-[#EB3A48];
}

.result-box {
  @apply rounded-full mx-auto bg-CF8 flex-center;
  @apply text1816 font-semibold;
  @apply w-[220px] sm:w-[276.4px] md:w-[332.8px] lg:w-[389.2px] xl:w-[445.6px] 2xl:w-[502px];
  @apply h-[56px] sm:h-[60.8px] md:h-[65.6px] lg:h-[70.4px] xl:h-[75.2px] 2xl:h-[80px];
}

.tab-menu-1 {
  @apply flex justify-center;
  @apply gap-x-[12px] sm:gap-x-[12.8px] md:gap-x-[13.6px] lg:gap-x-[14.4px] xl:gap-x-[15.2px] 2xl:gap-x-[16px];
}

.tab-menu-1 .item {
  @apply rounded1210 h6444 text2016;
  @apply flex-center w-full max-w-[200px];
  @apply bg-gray-200 text-gray-400;
  @apply border border-gray-300;
}

.tab-menu-1 .item.on {
  @apply bg-red-500 text-white border-red-500;
}

section {
  @apply bg-white;
}

.section-round-top {
  @apply overflow-hidden rounded-t-80 relative z-10 reverse-mt12040;
}

#compare_box.on {
  @apply top-0;
}

input.switch + .slider-v1 {
  @apply relative w-[7.5em] h-[3em] cursor-pointer rounded-full duration-300 bg-[#F4F4F4];
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12) inset;
}

input.switch:checked + .slider-v1::before {
  @apply bg-primary left-[3.25em] content-['ON'];
  background: linear-gradient(#e43929 20%, #e43929);
}

input.switch + .slider-v1::before {
  @apply flex-center absolute content-['OFF'] w-[4em] h-[2.5em] top-[0.25em] left-[0.25em] rounded-full shadow-sm text-white;
  transition: 250ms ease-in-out;
  background: linear-gradient(#505050 20%, #505050);
}

#faq_list .accordion.on {
  @apply border-b-0 bg-[#FEF3F4];
}

#faq_list .accordion .title {
  @apply w-full flex justify-between items-center cursor-pointer;
}

#faq_list .accordion.on .title .icon {
  transform: rotate(180deg);
}

#faq_list .accordion + .content {
  @apply hidden;
}

#faq_list .accordion.on + .content {
  @apply flex md:table-row;
}

pre {
  font-family: "Poppins", "Pretendard", "sans-serif";
}

.line-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.3;
  height: 3.9em;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.3;
  height: 2.6em;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html[lang="en"] .line-3,
html[lang="en"] .line-2 {
  height: auto;
  display: block;
}

#home_header font {
  text-transform: capitalize;
}

.swiper-button-next.type2,
.swiper-button-prev.type2 {
  @apply bg-white rounded-full w-7 h-9 sm:w-9 sm:h-9;
}

.swiper-button-next.type2:after,
.swiper-button-prev.type2:after {
  @apply text1614 font-extrabold text-default;
}

.ts-wrapper .ts-control {
  flex-direction: column;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

.ts-wrapper .ts-control .item {
  display: none;
}

.ts-wrapper .ts-control input {
  @apply text1614;
}

.ts-wrapper .ts-dropdown-content {
  @apply text1614;
}

.ts-wrapper .ts-control > input::placeholder {
  @apply text1614;
  color: #242424 !important;
}

.ts-wrapper .ts-dropdown {
  font-size: 1rem;
  color: #242424 !important;
  border-radius: 8px !important;
  padding: 8px 8px !important;
  margin: 16px 0px !important;
}

.ts-wrapper {
  padding: 0 12px !important;
}

#goog-gt-tt + div {
  display: none;
}