/* ==========================================================================
   Turink 메인 기본 스타일
   Tailwind 로 되지 않는 것만 둔다. 이 파일은 index.html 만 읽는다.
   ========================================================================== */

/* Remix Icon 기본값 */
:where([class^="ri-"])::before {
  content: "\f3c2";
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  overflow-x: hidden;
}

/* 메뉴의 구간 이동을 부드럽게 한다. 움직임을 줄이는 설정이면 하지 않는다. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 날짜와 갱신 시점처럼 자리를 맞춰 읽는 짧은 값에 쓴다 */
.mono {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 첫 화면의 옅은 배경과 격자 */
.hero-atmosphere {
  position: relative;
  background: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0) 70%),
              radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.04) 0%, rgba(255, 255, 255, 0) 50%);
}

.hero-grid-pattern {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}

.card-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 가로 스크롤 목록. 항목은 등록소에 적은 순서이고 아래로 길어지지 않는다.
   가려진 쪽에는 가장자리를 흐리게 해서 더 있다는 것을 알린다. 흐림 폭은
   스크립트가 스크롤 위치에 따라 --fade-l, --fade-r 로 넣는다(양 끝에서는 0). */
.h-scroll {
  --fade-l: 0px;
  --fade-r: 0px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.h-scroll::-webkit-scrollbar {
  display: none;
}

.h-scroll > * {
  scroll-snap-align: start;
}