/* 
iPad
iPad Mini: 768px
iPad (일반): 810px
iPad Air: 820px
iPad Pro 11": 834px
iPad Pro 12.9": 1024px

Galaxy Tab
Galaxy Tab S7: 800px
Galaxy Tab S8: 800px
Galaxy Tab S7+/S8+: 800px (세로) / 1280px (가로)
Galaxy Tab S9 Ultra: 1848px (가로)

@media (any-pointer: coarse) and (max-width: 1848px){}
@media (any-pointer: coarse) and (max-width: 1280px){}
@media (max-width: 500px){}

모듈
VueUse api
nuxt-swiper
*/
/* 
해당 파일의 공통 클레스와, root는 pc기준으로 사용하십시오.
이외에 반응형 관련된 내용은 각 레이아웃 파일에 작성 바랍니다.
*/
:root {
  /* settings */
  --max-full: 100%;
  --indent-x : 99999px; /* overflow: hidden 내에 text-indent에만 사용하시오 */
  --content-width: 128rem; /* 최상위 section의 width값에만 쓰며, 각 프로젝트 별로 달라질 수정하여 사용 */
  
  /* 배경 색상 */
  --main-color: #333;
  --sub-color: #555;
  --extra-color: #999;
  --muted-color: #e2e2e2;
  --mainBlue-color: #0068b7;
  --skyBlue-color: #A4D8FF;
  --mainRed-color: #ff0000;
  --softRed-color: #ff4f4f;
  /* 폰트 사이즈 */
  --font-s-30: 3rem;
  --font-s-22: 2.2rem;
  --font-s-20: 2rem;
  --font-s-18: 1.8rem;
  --font-s-16: 1.6rem;
  --font-s-14: 1.4rem;
  --font-s-12: 1.2rem;
  --font-s-10: 1rem;

  /* 폰트 굵기 */
  --font-w-black: 900;
  --font-w-extraBold: 800;
  --font-w-bold: 700;
  --font-w-medium: 600;
  --font-w-light: 500;
  --font-w-thin: 400;

  /* svg 색상 */
  --filter-black: invert(12%) sepia(0%) saturate(111%) hue-rotate(142deg)
    brightness(93%) contrast(77%);
  --filter-gray: invert(61%) sepia(24%) saturate(0%) hue-rotate(172deg)
    brightness(95%) contrast(93%);
  --filter-blue: invert(26%) sepia(73%) saturate(1894%) hue-rotate(185deg)
    brightness(94%) contrast(105%);
  --filter-white: invert(100%) sepia(3%) saturate(6%) hue-rotate(45deg)
    brightness(102%) contrast(100%);

  /* border-radius */
  --r-3: 0.3rem;
  --r-5: 0.5rem;
  --r-7: 0.7rem;
  --r-10: 1rem;
  --r-15: 1.5rem;
  --r-max: 9999rem;

  /* 여백&간격 */
  --blank-5: 0.5rem;
  --blank-7: 0.7rem;
  --blank-10: 1rem;
  --blank-15: 1.5rem;
  --blank-20: 2rem;
  --blank-25: 2.5rem;
  --blank-30: 3rem;
  --blank-35: 3.5rem;
  --blank-40: 4rem;
  --blank-45: 4.5rem;
  --blank-50: 5rem;
  --blank-75: 7.5rem;
  --blank-100: 10rem;
  --blank-120: 12rem;
}

.display-none {
  display: none;
}
.display-block {
  display: block;
}
.display-inline-block {
  display: inline-block;
}

.border-box {
  box-sizing: border-box;
  border: 1px solid var(--muted-color);
}
.border-box.line-bold{
  border: 2px solid var(--muted-color);
}
.border-box.r-5 {
  border-radius: var(--r-5);
}
.border-box.r-7 {
  border-radius: var(--r-7);
}
.border-box.r-10 {
  border-radius: var(--r-10);
}
.border-box.r-15 {
  border-radius: var(--r-15);
}
.border-box.r-max {
  border-radius: var(--r-max);
}

/* flex */
.flex-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-item.direct-column {
  flex-direction: column;
}
.flex-item.flex-wrap {
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
}

.flex-item.center-start,
.flex-item.direct-column.center-start{
  justify-content: flex-start;
}
.flex-item.center-end,
.flex-item.direct-column.center-end {
  justify-content: flex-end;
}
.flex-item.center-between,
.flex-item.direct-column.center-between {
  justify-content: space-between;
}
.flex-item.start-center,
.flex-item.direct-column.start-center {
  align-items: flex-start;
}
.flex-item.start-start,
.flex-item.direct-column.start-start {
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-item.start-end,
.flex-item.direct-column.start-end {
  align-items: flex-end;
  justify-content: flex-end;
}
.flex-item.start-between,
.flex-item.direct-column.start-between {
  justify-content: space-between;
}
.flex-item.end-center,
.flex-item.direct-column.end-center {
  align-items: flex-end;
}
.flex-item.end-start,
.flex-item.direct-column.end-start {
  align-items: flex-end;
  justify-content: flex-start;
}
.flex-item.end-end,
.flex-item.direct-column.end-end {
  align-items: flex-end;
  justify-content: flex-end;
}
.flex-item.end-between,
.flex-item.direct-column.end-between {
  justify-content: space-between;
}

/* 너비 */
.width-full {
  width: var(--max-full)
}
.height-full {
  height: var(--max-full)
}

/* 간격 gap */
.gap-5 {
  gap: var(--blank-5);
}
.gap-7 {
  gap: var(--blank-7);
}
.gap-10 {
  gap: var(--blank-10);
}
.gap-15 {
  gap: var(--blank-15);
}
.gap-20 {
  gap: var(--blank-20);
}
.gap-25 {
  gap: var(--blank-25);
}
.gap-30 {
  gap: var(--blank-30);
}
.gap-35 {
  gap: var(--blank-35);
}

/* 상하 간격 margin */
.m-top-5 {
  margin-top: var(--blank-5);
}
.m-top-10 {
  margin-top: var(--blank-10);
}

.m-bot-5 {
  margin-bottom: var(--blank-5);
}
.m-bot-10 {
  margin-bottom: var(--blank-10);
}
.m-bot-15 {
  margin-bottom: var(--blank-15);
}
.m-bot-20 {
  margin-bottom: var(--blank-20);
}
.m-bot-30 {
  margin-bottom: var(--blank-30);
}
.m-bot-40 {
  margin-bottom: var(--blank-40);
}
.m-bot-50 {
  margin-bottom: var(--blank-50);
}
.m-bot-75 {
  margin-bottom: var(--blank-75);
}
.m-bot-100 {
  margin-bottom: var(--blank-100);
}
.m-bot-120 {
  margin-bottom: var(--blank-120);
}

/* 간격 margin */
.m-left-5 {
  margin-left: var(--blank-5);
}
.m-left-10 {
  margin-left: var(--blank-10);
}
.m-left-15 {
  margin-left: var(--blank-15);
}
.m-left-20 {
  margin-left: var(--blank-20);
}
.m-left-25 {
  margin-left: var(--blank-25);
}



/* 간격 padding */
.p-x-5 {
  padding-left: var(--blank-5);
  padding-right: var(--blank-5);
}
.p-x-10 {
  padding-left: var(--blank-10);
  padding-right: var(--blank-10);
}
.p-x-15 {
  padding-left: var(--blank-15);
  padding-right: var(--blank-15);
}
.p-x-20 {
  padding-left: var(--blank-20);
  padding-right: var(--blank-20);
}
.p-x-30 {
  padding-left: var(--blank-30);
  padding-right: var(--blank-30);
}
.p-y-5 {
  padding-top: var(--blank-5);
  padding-bottom: var(--blank-5);
}
.p-y-10 {
  padding-top: var(--blank-10);
  padding-bottom: var(--blank-10);
}
.p-y-15 {
  padding-top: var(--blank-15);
  padding-bottom: var(--blank-15);
}
.p-y-20 {
  padding-top: var(--blank-20);
  padding-bottom: var(--blank-20);
}
.p-y-30 {
  padding-top: var(--blank-30);
  padding-bottom: var(--blank-30);
}
.p-y-40 {
  padding-top: var(--blank-40);
  padding-bottom: var(--blank-40);
}
.p-y-50 {
  padding-top: var(--blank-50);
  padding-bottom: var(--blank-50);
}


.p-y-120 {
  /* 추가 상하값 필요하여 추가 */
  padding-top: var(--blank-120);
  padding-bottom: var(--blank-120);
}
.p-top-50{
  /* 추가 상하값 필요하여 추가 */
  padding-top: var(--blank-50);
}
.p-bot-50{
  /* 추가 상하값 필요하여 추가 */
  padding-bottom: var(--blank-50);
}

/* 폰트 사이즈 */
.font-s-22{
  font-size: var(--font-s-22);
}
.font-s-18{
  font-size: var(--font-s-18);
}
.font-s-16{
  font-size: var(--font-s-16);
}
.font-s-14{
  font-size: var(--font-s-14);
}

/* 폰트 굵기 */
.font-w-extraBold{
  font-weight: var(--font-w-extraBold);
}
.font-w-bold{
  font-weight: var(--font-w-bold);
}
.font-w-medium{
  font-weight: var(--font-w-medium);
}
.font-w-light{
  font-weight: var(--font-w-light);
}
.font-w-thin{
  font-weight: var(--font-w-thin);
}


/* color */
.color-sub{
  color: var(--sub-color);
}
.color-extra{
  color: var(--extra-color);
}
.color-main-blue{
  color: var(--mainBlue-color);
}
.color-main-red{
  color: var(--mainRed-color);
}
/* text ellipsis */
.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-ellipsis.line-clamp2 {
  -webkit-line-clamp: 2;
}
.text-ellipsis.line-clamp3 {
  -webkit-line-clamp: 3;
}