@import url('colors.css');
/* 프리텐다드 */
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('/web/base/fonts/Pretendard-Regular.subset.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* 나눔스퀘어 라운드 */
@font-face {
  font-family: 'NanumSquareRound';
  src: url('/web/base/fonts/NanumSquareRound.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* 고도체 */
@font-face {
  font-family: 'Godo';
  src: url('/web/base/fonts/GodoM.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* 여기어때 잘란체 */
@font-face {
  font-family: 'yg-jalnan';
  src: url('/web/base/fonts/JalnanOTF00.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*
  구글 다이나믹 아이콘 폰트
*/
.icon-fill {
  font-variation-settings: 'FILL' 1;
}
.icon-blink {
  animation: icon-blink-run 3s infinite;
}
@keyframes icon-blink-run {
  0% {
    font-variation-settings: 'FILL' 0;
  }
  50% {
    font-variation-settings: 'FILL' 1;
  }
  100% {
    font-variation-settings: 'FILL' 0;
  }
}

.section-title {
  position: relative;
}
.section-title::before {
  position: absolute;
  content: '';
  width: var(--section-title-width, 150px);
  height: 5px;
  left: 0;
  bottom: 0px;
  border-radius: 2px;
  background: var(--section-title-line, #000);
}
.section-title::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 5px;
  bottom: 0px;
  background: #ffffff;
  animation: section-title-run 5s infinite linear;
}
@keyframes section-title-run {
  0% {
    left: 0;
  }
  50% {
    left: calc(var(--section-title-width, 150px) - 5px);
  }
  100% {
    left: 0;
  }
}

@keyframes section-title-run-center {
  0% {
    left: 50%;
    margin-left: -75px;
  }
  50% {
    left: 50%;
    margin-left: 45px;
  }
  100% {
    left: 50%;
    margin-left: -75px;
  }
}

@keyframes section-title-run-sm {
  0% {
    left: 0;
  }
  50% {
    left: 85px;
  }
  100% {
    left: 0;
  }
}

/*
  커스텀 변수 설정
*/
:root {
  --bs-font-sans-serif: 'Pretendard-Regular', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue';
}

[data-bs-theme='light'] {
  --bs-blue-rgb: 13, 110, 253;
  --bs-blue-text-emphasis: #031633;
  --bs-blue-bg-subtle: #cfe2ff;
  --bs-blue-border-subtle: #9ec5fe;

  --bs-indigo-rgb: 102, 16, 242;
  --bs-indigo-text-emphasis: #140330;
  --bs-indigo-bg-subtle: #e0cffc;
  --bs-indigo-border-subtle: #c29ffa;

  --bs-purple-rgb: 111, 66, 193;
  --bs-purple-text-emphasis: #160d27;
  --bs-purple-bg-subtle: #e2d9f3;
  --bs-purple-border-subtle: #c5b3e6;

  --bs-pink-rgb: 221, 51, 132;
  --bs-pink-text-emphasis: #2b0a1a;
  --bs-pink-bg-subtle: #f7d6e6;
  --bs-pink-border-subtle: #efadce;

  --bs-red-rgb: 220, 53, 69;
  --bs-red-text-emphasis: #2c0b0e;
  --bs-red-bg-subtle: #f8d7da;
  --bs-red-border-subtle: #f1aeb5;

  --bs-orange-rgb: 253, 126, 20;
  --bs-orange-text-emphasis: #331904;
  --bs-orange-bg-subtle: #ffe5d0;
  --bs-orange-border-subtle: #fecba1;

  --bs-yellow-rgb: 255, 193, 7;
  --bs-yellow-text-emphasis: #332701;
  --bs-yellow-bg-subtle: #fff3cd;
  --bs-yellow-border-subtle: #ffe69c;

  --bs-green-rgb: 25, 135, 84;
  --bs-green-text-emphasis: #051b11;
  --bs-green-bg-subtle: #d1e7dd;
  --bs-green-border-subtle: #a3cfbb;

  --bs-teal-rgb: 32, 201, 151;
  --bs-teal-text-emphasis: #06281e;
  --bs-teal-bg-subtle: #d2f4ea;
  --bs-teal-border-subtle: #a6e9d5;

  --bs-cyan-rgb: 13, 202, 240;
  --bs-cyan-text-emphasis: #032830;
  --bs-cyan-bg-subtle: #cff4fc;
  --bs-cyan-border-subtle: #9eeaf9;

  --bs-gray-rgb: 173, 181, 189;
  --bs-gray-text-emphasis: #212529;
  --bs-gray-bg-subtle: #f8f9fa;
  --bs-gray-border-subtle: #e9ecef;
}
[data-bs-theme='dark'] {
  --bs-blue-rgb: 13, 110, 253;
  --bs-blue-text-emphasis: #3d8bfd;
  --bs-blue-bg-subtle: #031633;
  --bs-blue-border-subtle: #084298;

  --bs-indigo-rgb: 102, 16, 242;
  --bs-indigo-text-emphasis: #8540f5;
  --bs-indigo-bg-subtle: #140330;
  --bs-indigo-border-subtle: #3d0a91;

  --bs-purple-rgb: 111, 66, 193;
  --bs-purple-text-emphasis: #8c68cd;
  --bs-purple-bg-subtle: #160d27;
  --bs-purple-border-subtle: #432874;

  --bs-pink-rgb: 221, 51, 132;
  --bs-pink-text-emphasis: #de5c9d;
  --bs-pink-bg-subtle: #2b0a1a;
  --bs-pink-border-subtle: #801f4f;

  --bs-red-rgb: 220, 53, 69;
  --bs-red-text-emphasis: #e35d6a;
  --bs-red-bg-subtle: #2c0b0e;
  --bs-red-border-subtle: #842029;

  --bs-orange-rgb: 253, 126, 20;
  --bs-orange-text-emphasis: #fd9843;
  --bs-orange-bg-subtle: #331904;
  --bs-orange-border-subtle: #984c0c;

  --bs-yellow-rgb: 255, 193, 7;
  --bs-yellow-text-emphasis: #ffcd39;
  --bs-yellow-bg-subtle: #332701;
  --bs-yellow-border-subtle: #997404;

  --bs-green-rgb: 25, 135, 84;
  --bs-green-text-emphasis: #479f76;
  --bs-green-bg-subtle: #051b11;
  --bs-green-border-subtle: #0f5132;

  --bs-teal-rgb: 32, 201, 151;
  --bs-teal-text-emphasis: #4dd4ac;
  --bs-teal-bg-subtle: #06281e;
  --bs-teal-border-subtle: #13795b;

  --bs-cyan-rgb: 13, 202, 240;
  --bs-cyan-text-emphasis: #3dd5f3;
  --bs-cyan-bg-subtle: #032830;
  --bs-cyan-border-subtle: #087990;

  --bs-gray-rgb: 173, 181, 189;
  --bs-gray-text-emphasis: #ced4da;
  --bs-gray-bg-subtle: #212529;
  --bs-gray-border-subtle: #495057;
}

.api-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
}
.api-backdrop .spinner-border {
  width: 4rem;
  height: 4rem;
  /* animation: api-backdrop-spinner-run 3s infinite; */
  --bs-spinner-animation-speed: 1s;
  --bs-spinner-animation-name: api-backdrop-spinner-run;
}
@keyframes api-backdrop-spinner-run {
  from {
    color: #fff;
  }
  to {
    transform: rotate(360deg);
    color: #000;
  }
}

/*
  글래스모피즘 스타일
*/
.glassmorphism .modal-backdrop {
  --bs-backdrop-opacity: 1;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0);
}
.glassmorphism .modal {
  backdrop-filter: blur(5px);
}
.glassmorphism .modal-content {
  background-color: rgba(255, 255, 255, 0);
  text-shadow: var(--bs-modal-bg) 0 0 10px;
}
.glassmorphism .api-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}