/* =============================================================
   OneThera — Reset & Base Styles
   ============================================================= */


/* ── Box Sizing ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Root ─────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* 그라디언트만 body 배경 레이어에 유지 */
  background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #fafafa 60%, #f5f5f5 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* 텍스처 오버레이 (z-index 98로 설정하여 전체 섹션에 균일하게 한지 텍스처를 입힘) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 98;
  background-image: url('../assets/images/bg_hanji_texture.webp');
  background-repeat: repeat;
  background-size: 300px 300px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.18; /* 오버레이로서 자연스럽고 은은한 깊이감을 주도록 불투명도 조절 */
  transition: opacity 0.3s ease;
}

/* ── Typography Resets ────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

p { margin: 0; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

/* ── Media ────────────────────────────────────────────────── */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Form Resets ──────────────────────────────────────────── */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}

input[type="checkbox"], input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* ── Focus Visible ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--rounded-xs);
}

/* ── Scrollbar (subtle) ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-canvas); }
::-webkit-scrollbar-thumb { background: var(--color-hairline-strong); border-radius: var(--rounded-full); opacity: 0.3; }

/* ── Body Scroll Lock ─────────────────────────────────────── */
body.scroll-locked {
  overflow: hidden;
}

/* ── Section Fade-In Animation ────────────────────────────── */
section[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

section[data-animate].section--visible {
  opacity: 1;
  transform: translateY(0);
}