/* ============================================================
   꼼지락작업소 — 생김새를 고치는 파일
   ============================================================

   ★ 글꼴 · 글자 크기 · 두께 · 색 은 **이 파일에서만** 고치세요.
     여기 값을 바꾸면 사이트 열아홉 장에 한꺼번에 반영됩니다.
     css/site.css 는 손대지 않으셔도 됩니다.

   고치는 법
     1. 이 파일에서 바꾸고 싶은 줄을 찾습니다
     2. `:` 다음 값만 바꿉니다. `;` 는 지우지 마세요
     3. 저장 → 터미널에서 `git add -A && git commit -m "글씨 조정" && git push`
        (또는 바탕화면 '사이트 갱신' 단추)
     4. 1~2분 뒤 사이트에 반영됩니다

   숫자 읽는 법
     16px               = 항상 16
     clamp(A, B, C)     = 작은 화면에선 A, 커지면 B만큼 따라 커지되, 최대 C
                          → 폰과 PC에서 알아서 달라집니다. A와 C만 만지면 됩니다
     1.6                = 줄 간격(글자 크기의 1.6배)
     400 / 700 / 800    = 두께 (400 보통 · 700 굵게 · 800 아주 굵게)
     rgba(0,0,0,.12)    = 마지막 숫자가 진하기 (0 투명 ~ 1 불투명)
   ============================================================ */

:root {
  color-scheme: light only;

  /* ══════════════════════════════════════════════════════════
     1. 글꼴
     ══════════════════════════════════════════════════════════
     --display : 제목에 쓰는 글꼴 (지금은 '쌍문동 B')
     --body    : 본문에 쓰는 글꼴 (지금은 Pretendard)

     새 글꼴을 쓰시려면 ① assets/fonts/ 에 파일을 넣고
     ② css/site.css 맨 위의 @font-face 에 이름을 등록한 뒤
     ③ 여기 맨 앞에 그 이름을 적습니다.
     뒤에 이어 적은 것들은 '앞 글꼴이 없을 때 대신 쓸 것' 목록이라 지우지 마세요. */
  --display: 'Ggom Display', 'Pretendard Variable', Pretendard, sans-serif;
  --body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', sans-serif;

  /* ══════════════════════════════════════════════════════════
     2. 글자 크기
     ══════════════════════════════════════════════════════════ */
  --fs-hero:    clamp(34px, 7.4vw, 64px);   /* 대문 큰 글씨 (바른 핸드메이드…) */
  --fs-h1:      clamp(26px, 5vw, 44px);     /* 각 장 제목 (원단 입고방, 티셔츠…) */
  --fs-h2:      clamp(26px, 4.4vw, 42px);   /* 섹션 제목 (만들어 둔 옷…) */
  --fs-h3:      18px;                        /* 작은 제목 (가격 내역, 원단 이야기…) */
  --fs-title:   clamp(24px, 4.4vw, 38px);   /* 상품 이름 */
  --fs-body:    16px;                        /* 본문 */
  --fs-sub:     15px;                        /* 설명글 */
  --fs-small:   13px;                        /* 잔글씨 (안내·날짜) */
  --fs-tiny:    12px;                        /* 제일 작은 글씨 (푸터 사업자 정보) */
  --fs-btn:     15px;                        /* 단추 글씨 */
  --fs-price:   clamp(24px, 4vw, 32px);     /* 가격 */

  /* ══════════════════════════════════════════════════════════
     3. 두께 — 400 보통 · 600 약간 굵게 · 700 굵게 · 800 아주 굵게
     ══════════════════════════════════════════════════════════ */
  --fw-display: 700;   /* 제목 */
  --fw-strong:  700;   /* 굵은 글씨 */
  --fw-medium:  600;   /* 살짝 굵게 (메뉴, 잔글씨 강조) */
  --fw-body:    400;   /* 본문 */
  --fw-eyebrow: 800;   /* SHOP · REVIEW 같은 작은 영문 머리글 */

  /* ══════════════════════════════════════════════════════════
     4. 줄 간격 · 자간
     ══════════════════════════════════════════════════════════ */
  --lh-display: 1.16;    /* 제목 줄 간격 — 좁을수록 단단해 보입니다 */
  --lh-body:    1.6;     /* 본문 줄 간격 — 넓을수록 읽기 편합니다 */
  --lh-prose:   1.75;    /* 긴 글(ABOUT·주문 안내) 줄 간격 */
  --ls-display: -.02em;  /* 제목 자간 (음수면 촘촘) */
  --ls-body:    -.012em; /* 본문 자간 */

  /* ══════════════════════════════════════════════════════════
     5. 색
     ══════════════════════════════════════════════════════════
     브랜드 색 중 가장 따뜻한 핑크를 크게 한 번 씁니다.
     작은 색을 여러 개 흩뿌리지 않는 것이 이 사이트의 규칙입니다. */

  /* 브랜드 */
  --brand: #e58db9;        /* 넓은 면, 단추, 고른 상태 */
  --brand-deep: #c85f92;   /* 흰 배경 위 강조 글자, 마우스 올릴 때 */
  --brand-ink: #3a1410;    /* 핑크 위에 얹는 글자색 */
  --brand-soft: #fbeef4;   /* 옅은 핑크 배경 */

  /* 글자 — 검정 대신 따뜻한 갈색 */
  --ink: #3a2018;          /* 본문 글자 */
  --ink-2: #6b5248;        /* 설명글 */
  --gray: #9a8b83;         /* 잔글씨 */

  /* 바탕 */
  --paper: #fffdfb;        /* 페이지 바탕 */
  --soft: #f8f0e6;         /* 사진 자리·옅은 칸 바탕 */
  --line: rgba(63, 28, 17, .12);    /* 옅은 구분선 */
  --line-2: rgba(63, 28, 17, .22);  /* 진한 구분선·테두리 */

  /* 곁들이는 색 — 계열 타일 배경과 배지에만 씁니다 */
  --brown: #3f1c11;
  --brown-2: #61382a;
  --pink: #e58db9;
  --pink-soft: #fbeaf1;
  --cream: #f7edda;
  --peach: #f3bd95;
  --peach-soft: #fce6d3;
  --gold-soft: #f9f0d4;
  --sage: #b7c4a8;
  --sage-soft: #eef2e6;
  --mint: #00c1ae;         /* 로고에만 남은 색. 화면에는 쓰지 않습니다. */

  /* ══════════════════════════════════════════════════════════
     6. 모서리 · 그림자 · 여백
     ══════════════════════════════════════════════════════════ */
  --r: 18px;        /* 카드 모서리 둥글기 */
  --r-s: 12px;      /* 작은 칸 둥글기 */
  --pill: 999px;    /* 알약 모양 (단추·칩) — 건드리지 마세요 */
  --shadow: 0 10px 30px rgba(63, 28, 17, .09);
  --shadow-lg: 0 20px 50px rgba(63, 28, 17, .14);

  --nav-h: 58px;     /* 상단 메뉴 높이 */
  --gutter: 20px;    /* 화면 좌우 여백 (폰). 태블릿 이상은 아래에서 28px */
  --max: 1280px;     /* 내용이 벌어지는 최대 폭 */

  /* ══════════════════════════════════════════════════════════
     7. 움직임 — 0ms 로 하면 애니메이션이 없어집니다
     ══════════════════════════════════════════════════════════ */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d1: 150ms;   /* 짧게 (색 바뀜) */
  --d2: 300ms;   /* 보통 (카드 떠오름) */
  --d3: 480ms;   /* 길게 (스크롤 등장) */
}

/* 태블릿 이상에서 좌우 여백을 조금 넓힙니다 */
@media (min-width: 768px) {
  :root { --gutter: 28px; }
}