/* ===================================================================
   사주망고 공통 타이포그래피

   폰트 변수와 기본값은 여기에만 둔다. 예전에는 20개 HTML이 각자 :root에
   같은 변수를 복사해 갖고 있어서, 한 곳을 고쳐도 나머지 열아홉 곳이
   따라오지 않아 페이지마다 글꼴이 어긋났다.

   역할
     제목    MaruBuri 700
     본문    Pretendard 400 / 700
     원국표  Noto Serif KR 700 (한자와 한글을 한 벌로 맞추기 위해 통째로)

   이 세 가지 외의 웨이트는 지정하지 않는다.
   =================================================================== */

/* 마루부리는 네이버 공식 CSS를 그대로 링크할 수 없다.
   (1) font-display를 지정하지 않아 폰트가 올 때까지 글자가 안 보이고,
   (2) 웨이트가 아니라 패밀리명으로 나뉘어 있다('MaruBuri'는 Regular,
       Bold는 'MaruBuriBold'라는 별도 이름에 weight는 400으로 선언돼 있다).
   그대로 쓰면 다섯 벌이 모두 로드 대상이 되고, font-weight:700을 줘도
   진짜 Bold가 아니라 브라우저가 굵게 흉내 낸 가짜 볼드가 나온다.
   그래서 Bold 한 벌만 직접 선언한다. */
@font-face{
  font-family: 'MaruBuri';
  /* 상용 한글 2,350자 + 기본 라틴·기호로 서브셋한 파일(441KB → 210KB).
     원본은 12,398자가 들어 있는데 이 사이트가 쓰는 건 제목 몇 줄뿐이다. */
  src: url('fonts/MaruBuri-Bold-subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Pretendard는 가변폰트(Pretendard Variable)로 로드한다. 실제 패밀리명이
     'Pretendard Variable'이라 이 이름이 앞에 없으면 폰트가 잡히지 않는다. */
  --font-heading: 'MaruBuri', 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  --font-pillars: 'Noto Serif KR', serif;
  --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --lh-heading: 1.4;
  --lh-body: 1.75;
  --ls-body: -0.01em;
  --fs-body-mobile: 16px;
  --fs-body-desktop: 17px;
}

body{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-mobile);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

@media (min-width: 768px){
  body{ font-size: var(--fs-body-desktop); }
}

h1, h2, h3{
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}

/* 본문 문단 사이는 한 줄 높이만큼 띄운다. 문단이 붙어 있으면 긴 풀이를
   읽어 내려갈 때 어디서 끊기는지 눈으로 잡히지 않는다. */
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

/* 사주 원국표(명식): 한자와 한글을 같은 벌로 묶는다.
   마루부리에는 한자 글리프가 아예 없어서(한글·라틴 12,398자만 있다) 제목
   글꼴을 그대로 쓰면 한자만 다른 폰트로 떨어져 굵기와 크기가 어긋난다. */
.manse-hanja, .manse-hangul, .manse-sip, .manse-table, .manse-unseong,
.dw-ganji, .p-hanja, .p-label, .pc-hanja, .pc-hangul, .pc-label,
.mini-manse-hanja, .pillar-chip, .pillar-big-card{
  font-family: var(--font-pillars);
  font-weight: 700;
}

/* 로고 워드마크: 마루부리 글자 모양을 패스로 구워 쓴다. 웹폰트로 두면 폰트가
   도착할 때까지 로고가 다른 글꼴로 보이고, 없는 웨이트는 브라우저가 굵게
   흉내 내 가짜 볼드가 된다. 패스로 구우면 둘 다 생기지 않는다.
   높이를 em으로 두어 로고 자리의 font-size를 그대로 따라간다. */
.logo-wordmark{ display:block; height: 1em; width: auto; flex: none; }