/* ==========================================================================
   RUDIX Landing v2 — 기초 레이아웃 / 리셋 / 반응형 뼈대
   tokens.css 다음에 로드할 것.

   기존 대비 핵심 변경:
     1) body{min-width:860px} + transform:scale() 제거
        -> 진짜 반응형. 모바일에서 글자가 축소되지 않음.
     2) script.js 의 --page-scale / body.height 강제 계산 로직 불필요해짐
        -> 이미지 지연로딩으로 높이가 변해도 레이아웃이 깨지지 않음.
     3) 가로 스크롤 차단을 body 가 아니라 개별 overflow 컨테이너로 처리
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;  /* iOS 가로모드에서 글자 멋대로 커지는 것 방지 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--rdx-ink-2);
  color: var(--rdx-paper);
  font-family: var(--rdx-font-body);
  font-size: var(--rdx-fs-body);
  font-weight: 400;
  line-height: var(--rdx-lh-body);
  letter-spacing: var(--rdx-ls-normal);
  word-break: keep-all;       /* 한글 단어 중간에서 안 끊기게 */
  overflow-wrap: break-word;  /* 긴 URL 등은 그래도 넘치지 않게 */
  -webkit-font-smoothing: antialiased;
}

img, video, svg, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 키보드 사용자에게만 포커스 링 (마우스 클릭 시엔 안 뜸) */
:focus-visible {
  outline: 3px solid var(--rdx-accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 스크린리더 전용 — 시각적으로 숨기되 접근성 트리에는 남김 */
.rdx-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   레이아웃 프리미티브
   ========================================================================== */

/* 본문 컬럼. 좌우 거터는 여기서 한 번만 준다 (이중 패딩 방지) */
.rdx-wrap {
  width: 100%;
  max-width: calc(var(--rdx-col) + var(--rdx-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--rdx-gutter);
}

/* 긴 본문용 좁은 컬럼 */
.rdx-wrap--text { max-width: calc(var(--rdx-col-text) + var(--rdx-gutter) * 2); }

/* 가장자리까지 꽉 채우는 블록 (풀블리드 이미지 섹션) */
.rdx-wrap--bleed { max-width: none; padding-inline: 0; }

/* 섹션 상하 리듬 */
.rdx-section { padding-block: var(--rdx-section); }
.rdx-section--tight { padding-block: calc(var(--rdx-section) * 0.55); }
.rdx-section--flush { padding-block: 0; }

/* 배경 톤 변주 */
.rdx-section--ink     { background: var(--rdx-ink); }
.rdx-section--raised  { background: var(--rdx-ink-3); }
.rdx-section--glow    { background: radial-gradient(130% 85% at 50% 0%, var(--rdx-ink-3) 0%, var(--rdx-ink) 58%); }

/* 가로로 넘칠 수 있는 것(표/코드/캐러셀)만 개별 스크롤 */
.rdx-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 자동 줄바꿈 그리드 — 미디어쿼리 없이 폭에 따라 열 수가 변함 */
.rdx-grid {
  display: grid;
  gap: var(--rdx-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.rdx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rdx-grid--tight { gap: var(--rdx-gap-sm); }

/* ==========================================================================
   타이포그래피
   ========================================================================== */

.rdx-eyebrow {
  font-family: var(--rdx-font-bold);
  font-size: var(--rdx-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rdx-ls-wide);
  text-transform: uppercase;
  color: var(--rdx-accent-bright);
  margin-bottom: var(--rdx-gap-sm);
}

.rdx-hero-title {
  font-family: var(--rdx-font-display);
  font-size: var(--rdx-fs-hero);
  font-weight: 700;
  line-height: var(--rdx-lh-tight);
  letter-spacing: var(--rdx-ls-tight);
}

.rdx-h1 { font-family: var(--rdx-font-display); font-size: var(--rdx-fs-h1); font-weight: 700; line-height: var(--rdx-lh-tight); letter-spacing: var(--rdx-ls-tight); }
.rdx-h2 { font-family: var(--rdx-font-display); font-size: var(--rdx-fs-h2); font-weight: 700; line-height: var(--rdx-lh-tight); letter-spacing: var(--rdx-ls-tight); }
.rdx-h3 { font-family: var(--rdx-font-bold);    font-size: var(--rdx-fs-h3); font-weight: 700; line-height: var(--rdx-lh-snug); letter-spacing: var(--rdx-ls-tight); }

.rdx-lead { font-size: var(--rdx-fs-lead); line-height: var(--rdx-lh-snug); color: var(--rdx-paper-dim); }
.rdx-body { font-size: var(--rdx-fs-body); line-height: var(--rdx-lh-body); }
.rdx-caption { font-size: var(--rdx-fs-sm); line-height: var(--rdx-lh-snug); color: var(--rdx-paper-mute); }

.rdx-accent { color: var(--rdx-accent-bright); }

/* ==========================================================================
   등장 애니메이션 (IntersectionObserver 가 .is-visible 을 붙임)
   ========================================================================== */

.rdx-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--rdx-dur) var(--rdx-ease) var(--rdx-reveal-delay, 0s),
    transform var(--rdx-dur) var(--rdx-ease) var(--rdx-reveal-delay, 0s);
}
.rdx-reveal.is-visible { opacity: 1; transform: none; }

/* JS 없이 열렸을 때 콘텐츠가 영영 안 보이는 사고 방지 */
.no-js .rdx-reveal { opacity: 1; transform: none; }

/* 모션 민감 사용자 존중 — 등장 효과/부드러운 스크롤 모두 끔 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rdx-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}