@charset "UTF-8";
/* ==========================================================================
   웹폰트 (fonts.css)

   디자인 방향 "서리 능선" 에서 온 파일이다. 이 방향이 채택되지 않으면
   이 파일과 /static/fonts/seori/ 폴더, base.html 의 link 두 줄만 지우면
   원래대로(OS 기본 스택) 돌아간다. 다른 파일은 건드리지 않았다.

   ★ 왜 웹폰트를 까는가
     여태 서체가 전부 OS 기본 스택이었다. 그래서 같은 화면이 손님마다 다른 글씨로
     보인다 — 아이폰은 애플산돌고딕, 윈도우는 맑은 고딕, 안드로이드는 노토다.
     맑은 고딕은 획이 가늘고 한글 자간이 들쭉날쭉해서, 어르신이 보시는 화면에서
     가장 불리한 글씨가 하필 가장 많은 손님에게 간다.

   ★★ 왜 CDN 이 아니라 직접 받아 두는가
     site.css 머리말이 '외부 폰트/이미지 CDN 사용 금지' 라고 적어 둔 규칙을 지킨다.
     구글 폰트나 jsDelivr 를 링크하면 그 회사가 느린 날 우리 글자가 안 나온다.
     파일은 저장소 안에 있고, 우리 서버가 우리 도메인에서 내보낸다.

   ★★★ 전부 서브셋이다
     Pretendard 는 KS X 1001 상용 한글 서브셋(가중치당 약 260KB),
     고운바탕은 한글 굵은 것 한 벌(약 437KB)만 받았다. 통짜 Pretendard 는
     가중치 하나가 1.1MB 다 — 청송 산골에서 휴대폰으로 여시는 손님에게
     3MB 짜리 글씨는 배려가 아니다.
     대신 상용 한글 밖의 드문 글자(희귀 성씨·옛한글)는 OS 글씨로 떨어진다.
     받는 분 성함에 그런 글자가 있으면 그 글자만 모양이 다르다 — 읽히기는 한다.

   출처 / 라이선스 (둘 다 SIL Open Font License 1.1, 상업적 웹 사용 허용)
     Pretendard  1.3.9   https://github.com/orioncactus/pretendard
     Gowun Batang(고운바탕) https://github.com/yangheeryu/Gowun-Batang
                            (@fontsource/gowun-batang 5.3.0 배포본)
     라이선스 원문은 /static/fonts/seori/ 안에 두 벌 다 함께 둔다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 본문 서체 — Pretendard

   font-display: swap 은 양보할 수 없다. 기본값(auto/block)이면 폰트를 받는 동안
   글자가 <아예 안 보인다>. 느린 회선에서 빈 화면을 보신 어르신은 기다리는 게 아니라
   고장 났다고 판단하고 나가신다. swap 이면 먼저 OS 글씨로 읽히다가 바뀐다.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/seori/Pretendard-Regular.subset.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/seori/Pretendard-SemiBold.subset.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/seori/Pretendard-Bold.subset.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. 제목 서체 — 고운바탕 (부리체)

   ★ unicode-range 로 <한글에만> 건다. 숫자와 영문은 Pretendard 가 그린다.
     이유가 둘이다.
       1) 가격(35,000)과 인증번호(1004166)는 값이다. 값은 줄이 맞아야 읽힌다 —
          Pretendard 의 고정폭 숫자를 쓰고 싶다.
       2) 부리체 숫자는 굵기가 들쑥날쑥해서 큰 글자에서 먼저 얇아 보인다.

   ★★ 굵은 것 한 벌만 받는다(700). 부리체는 22px 미만·가는 굵기에서 획이 날아간다.
     그래서 이 서체는 22px 이상 제목에서만 쓴다. 본문·버튼·입력칸·표는 전부
     Pretendard 다 — 어르신이 읽어야 하는 글은 고딕이 이긴다.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Gowun Batang";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/seori/GowunBatang-Bold.korean.woff2") format("woff2");
    /*
      한글 + <한글 문장에 붙는 문장부호>까지다. 숫자와 영문 낱자는 일부러 뺐다.

      ★ 부호를 빼 보고 알았다. 마침표만 Pretendard Bold 로 떨어지니까
        "껍질째 드셔 보세요." 의 끝점이 부리체 글자 옆에서 <네모난 먹덩이>로 보였다.
        큰 제목일수록 그 한 점이 눈에 걸린다. 부호는 글자와 같은 손에서 나와야 한다.
    */
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF,
        U+0021, U+002C, U+002E, U+003A, U+003B, U+003F, U+00B7,
        U+2018-201D, U+2026, U+2013-2014, U+3001-3002, U+FF01, U+FF0C, U+FF0E, U+FF1F;
}

/* --------------------------------------------------------------------------
   3. 토큰

   site.css 가 토큰의 주인이다. 여기서 --font-sans 를 다시 정의하는 것은
   <이 파일이 site.css 뒤에 실려서> 덮어쓰기 위해서다. 원래 값을 지우는 게 아니라
   맨 앞에 Pretendard 를 끼우고 나머지 대체 스택은 그대로 남겨 둔다 —
   폰트를 못 받은 손님에게는 예전 화면이 그대로 나온다.
   -------------------------------------------------------------------------- */
:root {
    --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

    /* 제목 전용. 한글은 고운바탕, 나머지 글자는 Pretendard 로 떨어진다. */
    --font-display: "Gowun Batang", "Pretendard", -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", serif;
}

/* --------------------------------------------------------------------------
   4. 어디에 쓰는가

   제목만이다. 위계를 크기로만 만들면 본문 17px 을 지키는 한 위로 계속 키워야 하는데,
   서체가 갈리면 34px 과 28px 사이에 <결이 다르다> 는 신호가 하나 더 생긴다.
   -------------------------------------------------------------------------- */
.hero__title,
.section__title,
.page-head__title,
.card2__title {
    font-family: var(--font-display);
    /*
      site.css 는 이 제목들에 letter-spacing:-0.02em 을 준다. 고딕 기준으로 잡은 값이다.
      부리체는 글자 옆 공간(부리·삐침)이 이미 좁아서 -0.02em 을 그대로 얹으면
      '껍질째' 의 ㄲ 과 ㅂ 이 붙어 버린다. 거의 0 으로 되돌린다.
    */
    letter-spacing: -0.005em;
}

/* 값은 줄이 맞아야 비교가 된다. 꼬마 35,000 / 꼬꼬마 31,500 을 위아래로 놓고
   자릿수가 어긋나면 어느 쪽이 싼지를 눈이 아니라 머리로 세게 된다. */
.product-card__price,
.product-card__list-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}