/* ============================================================
   로그캐빈펜션 — 디자인 토큰 (2단계 확정본)
   근거: docs/reference/shilla/tokens.json (팔레트·여백)
         docs/reference/lescape/tokens.json (폰트 위계·모션)
   규칙: 배경은 항상 흰색 — 고급 모던. 어둠은 사진 안에만.
   ============================================================ */

/* ---------- 웹폰트 ----------
   제목(한글 세리프): 마루부리 — 네이버 무료 배포
   제목(영문 세리프): Cormorant Garamond — 한 스택 안에서 라틴만 담당
   본문/UI(산세리프): Pretendard Variable
   → 레스케이프의 "영문=세리프 / 한글=세리프 헤드라인 / UI=산세리프"
     3단 위계를 폰트 스택 2개로 구현 */
@import url("https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ---------- 색 · 브랜드 2 + 웜 중립 ----------
     계열은 신라(골드-타우프/다크브라운) 구조를 따르되,
     값은 자체 에셋(texture-wood 도미넌트)에서 도출 — 레퍼런스 hex 복사 금지 */
  --c-wood:      #8F6B45;  /* 브랜드1 오크 — 헤어라인·호버·다크면 위 워드마크, 면적 5% 미만. 흰 배경 위 텍스트 금지 */
  --c-espresso:  #2E2420;  /* 브랜드2 다크 월넛 — CTA 배경·푸터 */

  --c-paper:     #FFFFFF;  /* 바탕 */
  --c-linen:     #F8F6F2;  /* 교대 섹션 배경 (신라 #f9f6f3 계열) */
  --c-sand:      #EFEAE2;  /* 면·카드 */
  --c-line:      #E4DDD2;  /* 경계 (보더는 항상 1px, 컬러 보더 금지) */
  --c-mist:      #9A9184;  /* 캡션·비활성 — 대비 2.9:1, 18px 미만 본문 금지 */
  --c-stone:     #6E6459;  /* 보조 텍스트 — 흰 배경 대비 5.9:1 */
  --c-bark:      #4A4038;  /* 서브헤딩·강조 본문 */
  --c-ink:       #221B16;  /* 제목·본문 잉크 (웜 블랙) */

  --c-on-image:  #FFFFFF;  /* 사진 위 텍스트 */
  --shadow-on-image: 0 2px 32px rgba(0,0,0,.35);    /* 대형 타이포용 */
  --shadow-on-image-sm: 0 1px 6px rgba(0,0,0,.55);  /* 소형 텍스트·캡션용 */

  /* ---------- 폰트 · 스택 2개 ---------- */
  --font-display: "Cormorant Garamond", "MaruBuri", "Nanum Myeongjo", serif;
      /* 라틴 → Cormorant, 한글 → 마루부리 자동 폴백 */
  --font-body: "Pretendard Variable", Pretendard, -apple-system,
      "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* ---------- 타이포 스케일 · 본문↔헤드라인 극단 대비 ---------- */
  --fs-display: clamp(2.75rem, 5.5vw, 5.25rem); /* 44→84  히어로 한 문장 — 사진이 주인공 */
  --fs-h1:      clamp(2.25rem, 4.2vw, 4rem);   /* 36→64   인용구·대제목 — 히어로(display)와 한 단 분리 */
  --fs-h2:      clamp(2rem, 3.4vw, 3.25rem);   /* 32→52   섹션 제목 (레스케이프 40px+α) */
  --fs-h3:      1.625rem;                      /* 26 */
  --fs-lead:    1.3125rem;                     /* 21  리드 문단 */
  --fs-body:    1.0625rem;                     /* 17  본문 */
  --fs-small:   0.875rem;                      /* 14 */
  --fs-label:   0.8125rem;                     /* 13  트래킹 라벨 (STANDARD 식) */

  --lh-display: 1.12;
  --lh-heading: 1.24;
  --lh-body:    1.8;      /* 레스케이프 본문 1.8 — 느슨하게 읽히는 무드 */
  --ls-heading: -0.01em;  /* 명조 대형 타이포는 온건하게 (신라 실측 ≈ -0.007em) */
  --ls-display: -0.005em; /* 히어로·인용구 전용 */
  --ls-body:    -0.02em;
  --ls-label:   0.22em;   /* 영문 대문자 라벨 전용 */

  /* ---------- 여백 · 비균등 (호흡 단위) ---------- */
  --s1: 8px;
  --s2: 16px;
  --s3: 28px;
  --s4: 56px;
  --s5: 140px;   /* 신라 섹션 상단 140px */

  /* ---------- 레이아웃 ---------- */
  --container: 1280px;   /* 신라 1272 정규화 */
  --gutter: 24px;
  --gutter-mobile: 20px;

  /* ---------- 형태 · 절제 ---------- */
  --radius: 0;           /* 두 레퍼런스 공통 — 둥근 모서리 전면 금지 */
  --border-w: 1px;

  /* ---------- 모션 · 레스케이프 실측 ---------- */
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);   /* ease-out형 (실측 근사) */
  --dur-reveal: .9s;     /* 텍스트 블록 기본 */
  --dur-reveal-m: 1.4s;  /* 대형 미디어 */
  --dur-reveal-l: 1.6s;  /* 질감 인용구 */
  --dur-ui: .5s;         /* 버튼 와이프·헤더 전환 (transition all .5s ease-in-out) */
  --dur-fade: .3s;       /* 드롭다운·인디케이터 페이드 */
  --reveal-x: 80px;      /* data-parallax self-left/right 초기 오프셋 */
  --reveal-y: 50px;      /* self-down 초기 오프셋 */
  --wipe-skew: -16deg;   /* 대각선 와이프 버튼 사다리꼴 */
}

/* ---------- 한글 조판 필수 ---------- */
:root { word-break: keep-all; overflow-wrap: break-word; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--c-ink);
}
p {
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}
.num { font-feature-settings: "tnum"; }

/* 영문 세리프 라벨 (레스케이프 Playfair 역할) */
.label-en {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-wood);
}