/* 토큰, 리셋, 타이포그래피, 공통 유틸리티 */
:root {
  --bg: #F2EFE9;
  --bg-alt: #EAE6DE;
  --ink: #2A2724;
  --ink-soft: #6B6560;
  --sage: #7C8B7A;
  --brick: #B4553C;
  --line: #D6D0C6;

  /* 유도된 상태 */
  --sage-dark: #6B7A69;
  --on-sage: #FFFFFF;
  --bg-veil: rgba(242, 239, 233, 0.92);
  --field-bg: #FFFFFF; /* 관리자 입력란 배경 */
  --on-ink-dim: rgba(242, 239, 233, 0.4); /* 어두운 상단바 위의 흐린 테두리 */
  --overlay: rgba(42, 39, 36, 0.94); /* 라이트박스 배경 */
  --on-overlay: #F2EFE9; /* 라이트박스 위 밝은 텍스트 */
  --on-overlay-dim: rgba(242, 239, 233, 0.65); /* 라이트박스 위 흐린 텍스트 */
  --on-overlay-soft: rgba(242, 239, 233, 0.8); /* 라이트박스 위 보통 텍스트 */
  --label-veil: rgba(242, 239, 233, 0.82); /* 질감 위에 얹는 작품명 라벨 배경 */

  /* 히어로 사진 위에 덮는 막. 글자가 사진에 묻히지 않게 왼쪽을 진하게 깐다.
     가로형 화면은 왼쪽→오른쪽, 좁은 화면은 위→아래로 흐린다. */
  --hero-scrim: linear-gradient(90deg,
    rgba(242, 239, 233, 0.94) 0%,
    rgba(242, 239, 233, 0.86) 26%,
    rgba(242, 239, 233, 0.45) 50%,
    rgba(242, 239, 233, 0) 72%);
  --hero-scrim-narrow: linear-gradient(180deg,
    rgba(242, 239, 233, 0.95) 0%,
    rgba(242, 239, 233, 0.88) 38%,
    rgba(242, 239, 233, 0.35) 72%,
    rgba(242, 239, 233, 0) 100%);

  /* 사진이 아직 없는 자리에 쓰는 한지 느낌의 결. 외부 이미지 없이 CSS로만 만든다.
     실제 작품 사진이 들어오면 이 배경은 사진에 가려진다. */
  --paper:
    repeating-linear-gradient(92deg,
      rgba(42, 39, 36, 0.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(2deg,
      rgba(42, 39, 36, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(150deg, #EFEBE3 0%, #E7E2D8 55%, #EAE6DE 100%);

  --serif: 'Nanum Myeongjo', serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --pad-section: 120px;
  --pad-x: 56px;      /* 좌우 여백. .container 한 곳에서만 쓴다 */
  --max: 1280px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* 한글은 기본값(normal)이면 단어 중간에서 줄이 끊긴다. keep-all이 어절 단위로 끊어준다 */
  word-break: keep-all;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(26px, 3.2vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* 주의: .container와 같은 요소에 붙는 클래스(.hero, .page-head 등)는
   padding 축약형을 쓰면 안 된다. 좌우 여백이 0으로 덮어씌워진다.
   상하 여백은 padding-top / padding-bottom으로만 지정할 것. */

.section { padding: var(--pad-section) 0; }
.section-alt { background: var(--bg-alt); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.lead { color: var(--ink-soft); font-size: 17px; }

.rule {
  width: 44px;
  height: 1px;
  background: var(--brick);
  border: 0;
  margin: 0 0 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  font-size: 14px;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  transition: background-color .2s, color .2s, border-color .2s;
}

.btn-solid { background: var(--sage); color: var(--on-sage); }
.btn-solid:hover { background: var(--sage-dark); }

.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }

.btn .arrow { width: 34px; height: 1px; background: currentColor; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 스크롤 등장 ─────────────────────────
   .reveal 클래스는 JS가 직접 붙인다. JS가 꺼져 있으면
   아무것도 숨겨지지 않으므로 내용은 항상 보인다. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* 움직임을 줄여달라고 설정한 사용자에게는 애니메이션을 걸지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1; transform: none; transition: none;
  }
}

@media (max-width: 1023px) {
  :root { --pad-section: 88px; --pad-x: 40px; }
}

@media (max-width: 767px) {
  :root { --pad-section: 64px; --pad-x: 28px; }
  body { font-size: 15px; }
}