/* ══════════════════════════════════════════
   NONÜR · base — 토큰 · 리셋 · 타이포
   ══════════════════════════════════════════ */
:root{
  --ivory:#f2efe7;
  --white:#faf8f3;
  --stone:#a8a29a;
  --charcoal:#1c1b18;
  --charcoal-soft:#2a2823;
  --moss:#3a4a3b;
  --burgundy:#5c2e2e;
  --oxblood:#4a2328;
  --navy:#1e2733;
  --orange:#d97a45;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --serif:Georgia,'Times New Roman','Apple Myungjo',serif; /* 세계관 B · 클래식 문법 전용 */
  --mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.61,.21,1);

  /* 타이포 스케일 — 딱 5단. 이 밖의 크기는 쓰지 않는다.
     영문이 주인공, 국문은 한 단 아래로 받친다. */
  --fs-cap:14px;                                /* 캡션 · 라벨 · 번호 */
  --fs-body:18px;                               /* 기본 · 국문 보조 */
  --fs-lead:clamp(22px,2.4vw,30px);             /* 리드 */
  --fs-title:clamp(34px,4.2vw,58px);            /* 부주제 */
  --fs-display:clamp(48px,7vw,104px);           /* 주제 */
}

/* ── 종이 질감 ──
   순수 크림 면은 화면에서 '빈 종이'가 아니라 '빈 곳'으로 읽힌다.
   고운 그레인 + 아주 옅은 얼룩을 얹어 종이의 결을 만든다. 색은 --ivory 그대로. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
}
/* 크림 배경에는 이 클래스를 쓴다. 배경색을 덮어쓰지 않고 결만 얹는다. */
.paper{position:relative;background-color:var(--ivory)}
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--grain),var(--fiber);
  background-size:220px 220px,760px 760px;
  opacity:.5;mix-blend-mode:multiply;
}
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(72% 54% at 14% 6%,rgba(255,255,255,.62) 0%,transparent 58%),
    radial-gradient(64% 52% at 88% 96%,rgba(150,142,122,.13) 0%,transparent 62%);
}
.paper>*{position:relative;z-index:1}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* iOS가 가로↔세로 전환 때 글자를 제멋대로 키우는 것을 막는다 */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  background:var(--ivory);
  color:var(--charcoal);
  -webkit-font-smoothing:antialiased;
  /* clip(hidden 아님) — hidden이면 body가 스크롤 컨테이너가 되어 sticky가 깨짐 */
  overflow-x:clip;
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,video{max-width:100%;display:block}
strong{font-weight:600}

/* 웨이트 규칙: 200(디스플레이) · 400(본문) · 600(강조) 세 단만 사용 */
.thin{font-weight:200}
/* mono는 좌표처럼 '기계가 읽는 값'에만. 라벨·번호는 sans로 통일한다. */
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.08em;font-size:var(--fs-cap)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.06em}
/* ── 타이포 역할 — 이 다섯 가지 밖으로 나가지 않는다 ──
   .label  섹션 머리표 (mono · 대문자 · 트래킹 .18em)
   .t-lg   페이지 제목        200
   .t-md   섹션 제목          200
   .t-sm   카드·항목 제목     400
   .t-meta 보조 정보          stone */
.label{
  font-family:var(--mono);font-size:var(--fs-cap);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  display:inline-block;
}
.t-lg{font-weight:200;font-size:var(--fs-display);letter-spacing:-.04em;line-height:1.06}
.t-md{font-weight:200;font-size:var(--fs-title);letter-spacing:-.035em;line-height:1.1}
.t-sm{font-weight:400;font-size:var(--fs-lead);letter-spacing:-.02em;line-height:1.22}
.t-meta{font-size:var(--fs-cap);color:var(--stone);letter-spacing:.04em}
.kr{display:block;font-weight:400;letter-spacing:0}

/* ── 글로벌 그리드 ──
   레퍼런스 실측: 사이트 전체가 12칼럼 · gap 1.25em 위에 얹혀 있고
   767px 이하에서 5칼럼으로 접힌다. 페이지마다 따로 잡지 말고 이 뼈대를 쓴다. */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25em;width:100%}
@media (max-width:767px){.g12{grid-template-columns:repeat(5,1fr)}}

/* 접근성 */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--moss);color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 모션 축소 — 모든 스크롤 애니메이션 비활성 경로(JS도 html.rm에서 엔진 미가동) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;transition-duration:.01s!important}
  html{scroll-behavior:auto}
}