/* ==========================================================================
   Common foundation
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

/*
 * WOFF2(웨이트별 TTF 6MB대를 ttf2woff2로 변환, 글자 서브셋은 안 함 —
 * 갤러리/일기 등 사용자 작성 한글 텍스트가 임의의 글자를 쓸 수 있어서
 * 글자를 추리면 깨질 위험이 있음). 변환만으로 웨이트당 2MB대로 줄어듦.
 * font-display: swap — 그래도 여전히 크므로, 다운로드 중엔 폴백 폰트로
 * 먼저 그리고 로드되는 대로 교체되게 한다(텍스트가 안 보이는 것 방지).
 */
@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-Thin.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansKR';
  src: url('../font/NotoSansKR-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  font-family:
          "NotoSansKR",
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Pretendard,
          sans-serif;
}
body {
  color: var(--text, #202020);
  opacity: 1;
  transform: scale(1);
  filter: blur(10);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms ease;
}

button,
input,
textarea,
select {
  color: inherit;
}

button {
  user-select: none;
  -webkit-user-drag: none;
}

img,
svg,
a,
[draggable] {
  -webkit-user-drag: none;
}

::selection {
  color: #fff;
  background: #aaa;
}

/* ==========================================================================
   Page transition
   ========================================================================== */

body.page-leaving {
  opacity: 0;
  transform: scale(0.985);
  filter: blur(4px);
  pointer-events: none;
}

body.page-entering {
  opacity: 0;
  transform: scale(1.015);
  filter: blur(4px);
}

.screen-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(20, 20, 20, 0.9) 0%,
      #000 100%
    );
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 380ms;
}

.screen-transition.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .screen-transition {
    transition-duration: 1ms !important;
  }

  body.page-leaving,
  body.page-entering {
    transform: none;
    filter: none;
  }
}

/* 스크롤바의 폭 너비 */
*::-webkit-scrollbar {
  width: 7px;
}

*::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: rgb(255 255 255 / 0);
}

/* ==========================================================================
   이미지 로드 실패 대체 표시 (common.js의 error 위임/data-fallback-bg 처리)
   ========================================================================== */

/* <img>: 유효한 이미지의 object-fit(cover 등)은 건드리지 않되, 대체 아이콘이
   붙었을 때만 늘어나지 않게 contain으로 제한하고 중립 배경을 깐다. transition
   은 명시적으로 끈다 — 전역 *{transition:.2s} 때문에 padding/배경색이 서서히
   퍼지면서 마치 확대된 상태에서 줄어드는 것처럼 보였다(대체 아이콘은 로드
   즉시 제자리에 있는 게 맞다). */
img.img-fallback {
  object-fit: contain !important;
  padding: 18%;
  background-color: rgba(128, 128, 128, .12);
  color: rgba(128, 128, 128, .7);
  transition: none !important;
}

/* CSS background-image로 그리는 요소(프로필 아바타, 설정 배경/음악 미리보기 등)의
   대체 아이콘은 원본처럼 cover로 늘리지 않고 작게 중앙에 고정한다. */
.img-fallback-bg {
  background-color: rgba(128, 128, 128, .12) !important;
  background-size: 20px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: none !important;
}