/* 모든 디바이스 */
html, body {
  touch-action: manipulation; /* 스크롤은 허용, 확대/축소는 비활성화 */
  -ms-touch-action: manipulation; /* (구) Internet Explorer 호환 */
}


/* 상하 드레그 문제 해결
:root {
  --vh: 100%;
} */

height: calc(var(--vh, 1vh) * 100);

.full-height {
  height: calc(var(--vh, 1vh) * 100);
}

/* 📌 스크롤바 스타일 설정 */
/* ::-webkit-scrollbar {
  width: 5px;
} */

/* 📌 스크롤바 트랙 (배경) → 완전히 투명 */
/* ::-webkit-scrollbar-track {
  background: transparent;
} */

/* 📌 기본 스크롤바 색상을 CSS 변수로 설정 */
/* ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color, black);
  border-radius: px;
  transition: background 0.3s ease;
} */



/* 부드러운 스크롤 효과 */
html {
  scroll-behavior: smooth;
}
/* 부드러운 스크롤 세팅 */
/* html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
} */

/* Hide scrollbar for Chrome, Safari and Opera */
/* body::-webkit-scrollbar {
  display: none;
} */

body.m-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
.transition-cover, .transition-opacity {
  will-change: transform, opacity;
}
.loader {
  display: flex;
}
html.w-editor .loader {
  display: none;
}

.nav-menu-wrapper .menu-link.w--current {
  pointer-events: none;
  cursor: default;
}

/* textarea */
.textarea {
  overflow-y: auto; /* 세로 스크롤 자동 생성 */
}
textarea::-webkit-resizer {
  display: none; /* WebKit 기반 브라우저에서 리사이즈 핸들 숨기기 */
}
textarea::-webkit-scrollbar {
  width: 1px; /* 스크롤바의 너비 설정 */
}
textarea::-webkit-scrollbar-thumb {
  background-color: var(--white);
}
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #e1e1e1;
}

.contact-honeypot {
  position: absolute !important;
  left: -10000px !important;
}


.a-text4 {
  text-transform: none; /* 또는 필요에 따라 uppercase */
}
.a-text3 .word, 
.a-text3 .char {
  text-transform: inherit;
  text-transform: initial;
}

/* index social-link hever 스타일 */
.social-link-svg:hover path {
  fill: var(--white);
}

@media screen and (max-width: 767px) {
  img {
    touch-action: none;
    pointer-events: none;
  }
}

@media screen and (min-width: 992px) {
  /* cursor 스타일 */
  .mf-cursor {
    position: fixed; /* 화면 상에 고정 위치 */
    top: 0;
    left: 0;
    z-index: 210; /* 다른 요소들 위에 위치하도록 z-index 설정 */
    direction: ltr; /* 왼쪽에서 오른쪽으로 텍스트 방향 */
    contain: layout style size; /* 레이아웃, 스타일 및 크기를 구성하는 컨텍스트로 제한 */
    pointer-events: none; /* 커서 자체에 포인터 이벤트가 발생하지 않도록 설정 */
    transition: opacity 0.3s, color 0.4s; /* 투명도와 색상 변경에 대한 트랜지션 설정 */
    mix-blend-mode: difference; /* 반전 효과 기본 적용 */
  }
  /* 커서 앞에 추가되는 기본 원형 요소 */
  .mf-cursor:before {
    content: ""; /* 빈 콘텐츠 설정 */
    position: absolute; /* 부모 요소 기준 절대 위치 */
    display: block;
    color: var(--white);
    top: -33px;
    left: -33px;
    width: 66px;
    height: 66px;
    transform: scale(0.2);
    background: currentColor; /* 현재 커서의 색상을 배경으로 설정 */
    border-radius: 50%; /* 원형으로 모양 설정 */
    transition: transform 0.25s ease-in-out, opacity 0.1s; /* 크기 및 투명도에 대한 전환 설정 */
  }

  /* 커서 내 텍스트 요소 스타일 */
  .mf-cursor-text {
    position: absolute; /* 부모 요소 기준 절대 위치 */
    top: -18px;
    left: -18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center; /* 텍스트를 중앙에 정렬 */
    transform: scale(1) rotate(10deg); /* 크기를 0으로 줄이고 약간 회전 */
    opacity: 0; /* 초기 투명도 0 */
    color: var(--black);
    font-size: 13px;
    /* font-family: var(--en_sans); */
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    transition: opacity 0.4s, transform 0.3s; /* 투명도와 크기 변화에 대한 트랜지션 설정 */
  }

  /* 반전 효과 제거 클래스 */
  /* .mf-cursor.no-invert-index,
  .mf-cursor.no-invert-about,
  .mf-cursor.no-invert-work,
  .mf-cursor.no-invert-archive {
    mix-blend-mode: normal;
  }
  .mf-cursor.no-invert-contact {
    mix-blend-mode: normal;
    mix-blend-mode: difference;
    transform: scale(0);
    color: var(--black);
  } */

  .archive-page .mf-cursor.-text:before {
    color: var(--white);
    opacity: 1;
    transform: scale(1.25);
  }
  .cms-archives-page .mf-cursor.-text:before {
    color: var(--white);
    opacity: 1;
    transform: scale(1.25);
  }
  .mf-cursor.-pointer:before {
    opacity: 1;
    transform: scale(0);
  }
  .mf-cursor.-text:before {
    color: var(--white);
    opacity: 1;
    transform: scale(2);
  }
  /* 텍스트 모양 커서가 활성화되었을 때 */
  .mf-cursor.-text.-active:before {
    transform: scale(0.1); /* 크기를 1.6배로 약간 줄임 */
    transition-duration: 0.2s; /* 전환 시간을 짧게 설정 */
  }

  /* 미디어 요소 스타일 (이미지, 비디오 등) */
  .mf-cursor-media {
    position: absolute; /* 부모 요소 기준 절대 위치 */
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px; /* 중앙 위치를 맞추기 위한 마진 설정 */
    border-radius: 50%; /* 원형으로 설정 */
    transition: transform 0.5s ease-in-out;
    z-index: 210; /* 다른 요소들 위에 위치하도록 z-index 설정 */
    direction: ltr; /* 왼쪽에서 오른쪽으로 텍스트 방향 */
    contain: layout style size; /* 레이아웃, 스타일 및 크기를 구성하는 컨텍스트로 제한 */ㄴ
  }
  }

  .mf-cursor-media img,
  .mf-cursor-media video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 요소를 중앙에 맞춤 */
    border-radius: 50%; /* 원형으로 설정 */
  }

  /* 반전된 커서 색상을 위한 클래스 */
  .mf-cursor.-inverse {
    color: #fff; /* 색상을 흰색으로 설정 */
  }

  /* mix-blend-mode: exclusion을 지원할 경우 적용되는 스타일 */
  @supports (mix-blend-mode: exclusion) {
    .mf-cursor.-exclusion {
      mix-blend-mode: exclusion; /* 배경과 색상을 혼합하여 제외 모드 적용 */
    }
    .mf-cursor.-exclusion:before {
      background: #fff; /* 배경을 흰색으로 설정 */
    }
  }
  /* 텍스트 모양 커서를 위한 스타일 */
  .mf-cursor.-text.archive-item-content-link:before {
    opacity: 1;
    transform: scale(1.5);
  }

  /* 아이콘 모양 커서가 활성화되었을 때 */
  .mf-cursor.-icon.-active:before {
    transform: scale(1.4); /* 크기를 1.4배로 줄임 */
  }

  /* 커서가 숨겨졌을 때 */
  .mf-cursor.-hidden:before {
    transform: scale(0); /* 크기를 0으로 축소 */
  }

  /* 텍스트 또는 아이콘 모드에서 커서 텍스트 표시 */
  .mf-cursor.-text .mf-cursor-text,
  .mf-cursor.-icon .mf-cursor-text {
    opacity: 1; /* 투명도를 1로 설정하여 텍스트 표시 */
    transform: scale(1); /* 크기를 원래 크기로 복원 */
  }

  /* object-fit: cover을 지원할 경우 이미지/비디오 설정 */
  @supports (object-fit: cover) {
    .mf-cursor-media img,
    .mf-cursor-media video {
      position: static; /* 정적 위치 설정 */
      width: 100%; /* 가로 100% 설정 */
      height: 100%; /* 세로 100% 설정 */
      object-fit: cover; /* 이미지 비율을 유지하며 잘라냄 */
      transform: translateZ(0); /* 3D 효과 적용 */
    }
  }

  /* 미디어 박스 스타일 */
  .mf-cursor-media-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 오버플로우 숨김 */
    transform: scale(0) translateZ(0); /* 크기를 0으로 축소하고 3D 효과 적용 */
    padding: 1px; /* 패딩 설정 */
    opacity: 0; /* 초기 투명도 0 설정 */
    border-radius: 50%; /* 원형으로 설정 */
    transition: transform 0.35s, opacity 0.2s 0.2s; /* 크기와 투명도 변화에 대한 트랜지션 설정 */
  }

  /* 미디어 모드에서 미디어 박스가 활성화될 때 */
  .mf-cursor.-media .mf-cursor-media-box {
    opacity: 1; /* 투명도를 1로 설정하여 박스 표시 */
    transform: scale(0.696); /* 크기를 약간 줄임 */
    transition-duration: 0.4s, 0.4s; /* 전환 시간을 설정 */
    transition-delay: 0s, 0s; /* 전환 지연 시간 없음 */
  }

  /* 링크 호버 스타일 */

  .archive-item-content-link img {
    transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out; /* 트랜지션 효과 */
    filter: grayscale(0%) brightness(100%) blur(0px); /* 기본 상태에서 그레이스케일과 어둡게 설정 */
    transform: translateY(0) scale(1); /* 기본 상태: 원래 위치와 크기 */
  }

  .archive-item-content-link:hover img {
    filter: grayscale(100%) brightness(90%) blur(2px); /* 호버 시 원래 색상과 밝기로 복원 */
    transform: translateY(0px) scale(1); /* 호버 시 위로 10px 이동하며 스케일 1.03배 확대 */
  }

  /* nav 호버 인터렉션 스타일 */

  .nav-menu .char {
    display: inline-block;
  }
  .nav-menu .word {
    float: left;
    height: 0.92em;
    line-height: 0.92em;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding-right: 0.04em;
    margin-right: 0.25em; /* 단어 사이 공백 추가 */
  }
  .nav-menu .char {
    pointer-events: none;
    float: left;
    padding-top: 0em;
    line-height: 0.92em;
  }
  .nav-menu .char:nth-of-type(odd) {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-menu .menu-link .menu-link-text .char:before {
    pointer-events: none;
    display: block;
    content: attr(data-char); /* Setting this attribute using custom JS */
    position: absolute;
    transform: translateY(-1em);
    transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .nav-menu .menu-link-text .char:after {
    pointer-events: none;
    display: block;
    content: attr(data-char); /* Setting this attribute using custom JS */
    position: absolute;
    transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .nav-menu .char:nth-of-type(odd) {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-menu .menu-link-text:hover .char:nth-of-type(odd) {
    transform: translate3d(0, 1em, 0);
    opacity: 1;
  }
  .nav-menu .menu-link-text:hover .char:nth-of-type(2n) {
    transform: translate3d(0, -0.92em, 0);
    opacity: 1;
  }
  .nav-menu .char:nth-of-type(2n) {
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /*** 이미지 그리드 스크롤 ***/

  .swiper.is-swiper-scroll {
    width: 92vw;
    height: 100svh;
    background-color: transparent !important; /* Swiper 배경 투명 */
    pointer-events: auto; /* Swiper 컨테이너의 이벤트 활성화 */
    z-index: 1000; /* Swiper의 z-index를 높여서 커서가 보이도록 설정 */
    overflow: visible !important; /* 스크롤 후에도 커서가 잘 보이도록 설정 */
  }
  .swiper-slide {
    height: auto; /* 슬라이드 높이를 자동으로 설정 */
  }
  .swiper.is-swiper-scroll .swiper-slide {
    pointer-events: auto; /* Swiper 슬라이드에만 이벤트 활성화 */
    cursor: pointer; /* 필요시 커서 모양 설정 */
  }

  /* 바탕화면 드레그 칼라 */
  ::selection {
    background: #ff4d00;
    color: #ffffff;
  }

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .your-class {
    /* 태블릿 전용 스타일 */
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .your-class {
    /* 모바일 전용 스타일 */
  }
}

/* The legacy Awwwards Honors label is intentionally removed site-wide. */
#awwwards {
  display: none !important;
}