/* ==========================================================================
   SHL 기본 골격 — 리셋, 타이포, 레이아웃 그릇
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--shl-font);
  font-size: var(--shl-fs-body);
  line-height: var(--shl-lh-body);
  color: var(--shl-ink);
  background: var(--shl-ground);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;          /* 한글은 단어 단위로 끊는다 */
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--shl-teal); outline-offset: 2px; }

/* 페이지 본체 — 바깥은 회색, 안쪽은 흰 종이 */
.shl-page {
  max-width: 1200px;
  margin-inline: auto;
  background: var(--shl-paper);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, .08);
}

/* 글이 들어가는 구역의 좌우 여백. 상세 이미지는 이걸 안 쓴다 */
.shl-wrap {
  max-width: calc(var(--shl-col) + var(--shl-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--shl-gutter);
}
.shl-wrap--text { max-width: calc(var(--shl-col-text) + var(--shl-gutter) * 2); }

.shl-section { padding-block: var(--shl-section); }
.shl-section--tight { padding-block: var(--shl-gap-lg); }

/* ---- 글자 ---- */
.shl-h1 { font-size: var(--shl-fs-h1); font-weight: 800; line-height: var(--shl-lh-snug); letter-spacing: var(--shl-ls-tight); text-wrap: balance; }
.shl-h2 { font-size: var(--shl-fs-h2); font-weight: 800; line-height: var(--shl-lh-snug); letter-spacing: var(--shl-ls-tight); text-wrap: balance; }
.shl-h3 { font-size: var(--shl-fs-h3); font-weight: 700; line-height: var(--shl-lh-snug); letter-spacing: var(--shl-ls-tight); }
.shl-lead { font-size: var(--shl-fs-lead); color: var(--shl-ink-mute); }
.shl-caption { font-size: var(--shl-fs-sm); color: var(--shl-ink-dim); }
.shl-teal { color: var(--shl-teal); }

/* ---- 나타나기 ---- */
.shl-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--shl-dur) var(--shl-ease), transform var(--shl-dur) var(--shl-ease);
}
.shl-reveal.is-visible { opacity: 1; transform: none; }
.no-js .shl-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shl-reveal { opacity: 1; transform: none; transition: none; }
}