/* ==========================================================================
   무월 (MUWOL) — 디자인 토큰. 토큰은 이 파일 한 곳에만 둔다(05 Q-25).
   컨셉 한 문장: 손님이 이번 로스팅 원두의 이름과 볶은 날을 첫 화면에서 읽고,
                탭에서 산미·바디와 가격을 확인한다.
   레퍼런스: R1 coffeecollective.dk(원두 하나가 첫 화면), sey.coffee·momos.co.kr(연락처·영업시간 푸터)
            R2 37signals.com(타이포 단독, 단색 바탕, 한 웨이트)
            R3 heartroasters.com(상품 위 role=tablist)
   ========================================================================== */

:root {
  /* 타입 스케일 — 표제(Gothic A1 900)는 본문의 최대 6.25배. 한 줄 큰 낱말이 첫 화면의 주인이다 */
  --step--1: 0.8125rem;                                  /* 13px — 캡션·주석. 한글 하한 */
  --step-0: 1.0625rem;                                   /* 17px — 본문. Gowun Dodum은 같은 px에서 작게 보여 1px 올린다 */
  --step-1: 1.25rem;                                     /* 20px — 소제목·탭 */
  --step-2: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);         /* 24~32px — 패널 표제 */
  --step-3: clamp(2rem, 0.6rem + 4.4vw, 4.25rem);        /* 32~68px — 로스팅 날짜 줄 */
  --step-4: clamp(3.25rem, 0.5rem + 6.6vw, 6.25rem);     /* 52~100px — h1. 1440에서 "에티오피아 구지 우라가" 한 줄 */

  --leading-tight: 1.1;      /* h1·날짜 줄. 두 줄이 되는 390에서 받침·초성이 닿는지 실측(5단계) */
  --leading-heading: 1.3;
  --leading-normal: 1.7;
  --measure: 36em;

  --font-display: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --weight-display: 900;
  --weight-body: 400;

  /* 색 — 어두운 갈색 바탕 하나 + 자두 강조 하나. 강조 hue는 similarity.mjs 기준(CIELAB LCh) 330°.
     대비 실측(5단계에서 재검): ink/surface 14.97, muted/surface 7.24, faint/surface 6.46,
     accent/surface 7.24, ink-on-accent 7.24, muted/raised 6.46 */
  --surface: #1f1713;
  --surface-raised: #2a211c;
  --surface-sunken: #180f0c;
  --ink: #f3ebe4;
  --ink-muted: #b3a399;
  --ink-faint: #a89a90;

  --line: #3d322b;
  --line-strong: #5a4b42;

  --accent: #d390ca;
  --accent-hover: #e4a0db;
  --accent-ink: #1f1713;

  /* placeholder 표식 — 사용자만 아는 값(주소·영업시간·전화)의 자리. 점선 밑줄 하나로 통일 */
  --ph-line: 1px dashed var(--line-strong);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(4rem, 2.5rem + 5vw, 8rem);

  --radius: 2px;

  --container: 1120px;
  --pad-inline: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);
  --photo: clamp(11rem, 8rem + 12vw, 19rem);   /* 원형 크롭 지름 */

  /* 모션 — 등장 스태거(로드 1회)와 마퀴(앰비언트 루프). 감소 모션에서는 둘 다 0 */
  --dur-quick: 160ms;
  --dur-normal: 420ms;
  --dur-rise: 620ms;
  --stagger: 90ms;
  --rise-shift: 0.6em;
  --marquee-dur: 26s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-normal: 0ms;
    --dur-rise: 0ms;
    --stagger: 0ms;
    --rise-shift: 0;
    --marquee-dur: 0s;
  }
}