/* ============================================================
   연 글꼴 표준 v1.0 · 2026-09-11
   연소사 : "평소에 너가 사용하는 글꼴이 내가 잘 안보일 때가 많아"
            "굵은 볼드체와 가독성이 좋은 서체를 미리 준비해 둘 필요가 있다"

   쓰는 법 — 페이지 <head> 에 이 두 줄만 :
     <link rel="stylesheet" href="/_shared/yeon-type.css">
     <script defer src="/_shared/yeon-type.js"></script>   ← 가 크기 단추 (선택)

   ⛔ 이 파일은 글꼴·크기·굵기만 정합니다. 색이나 자리는 건드리지 않습니다.
   ============================================================ */

/* ── 글꼴 : Pretendard Variable ─────────────────────────────
   왜 이 글꼴인가
     · 한글 자소가 크고(큰 x-height) 획이 고르게 굵어 작은 크기에서도 안 뭉갠다
     · 굵기가 45~920 로 이어져 500·600·800 이 전부 진짜 굵기다
       (맑은 고딕은 400·700 둘뿐 — 그래서 500 을 줘도 아무 일이 안 일어난다)
     · SIL 오픈 폰트 라이선스 = 상업 배포까지 자유
   ⚠️ 이름만 적어 두면 안 된다. 아래 @import 로 파일을 실제로 불러와야 한다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root{
  --yeon-sans: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --yeon-serif: "Noto Serif KR", serif;

  --yeon-base: 17.5px;   /* 바탕 글씨 — 16px 은 큰 화면에서 작다 */
  --yeon-body: 600;      /* 본문 굵기 = 뚜렷하게 굵게 */
  --yeon-strong: 800;    /* 강조는 본문보다 두 단 위라야 눈에 든다 */
  --yeon-label: 700;     /* 단추·딱지·표 머리 */
  --yeon-line: 1.75;     /* 굵을수록 줄 사이가 넉넉해야 안 답답하다 */
}

body{
  font-family: var(--yeon-sans);
  font-size: var(--yeon-base);
  font-weight: var(--yeon-body);
  line-height: var(--yeon-line);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* 본문 갈래
   ⚠️ 앞에 body 를 붙인 까닭 : 이 파일은 <link> 라서 페이지 제 <style> 보다 먼저 온다.
      그냥 .chip 이라고 쓰면 페이지의 .chip{font-weight:400} 에 밀린다(같은 급이면 뒤가 이김).
      body 를 하나 붙이면 급이 한 단 올라 표준이 이긴다. */
body p, body li, body td, body th, body dd, body dt,
body blockquote, body figcaption, body label, body .content{
  font-weight: var(--yeon-body);
}
body b, body strong{ font-weight: var(--yeon-strong); }
body h1, body h2, body h3, body h4, body h5, body h6{
  font-weight: var(--yeon-strong); line-height: 1.35;
}

/* 단추·딱지·표 머리 — 짧은 글일수록 굵어야 읽힌다 */
body button, body .btn, body .chip, body .badge, body .tag,
body th, body .dbar .t{ font-weight: var(--yeon-label); }

/* 잔글씨 바닥 — 12px 아래로 내려가지 않게 막는다 */
small, .sm, .note, .meta, .caption, figcaption{ font-size: max(13px, 0.78em); font-weight: 600; }

/* 입력칸도 같은 글꼴로 (기본값은 브라우저 글꼴이라 혼자 튄다) */
input, textarea, select, button{ font-family: inherit; }

/* ── 가 크기 셋 단 (yeon-type.js 가 씁니다) ───────────────── */
.yeon-fs{ display:flex; gap:4px; align-items:center; flex-shrink:0 }
.yeon-fs button{ padding:5px 9px; line-height:1; font-weight:800; cursor:pointer;
  border:1px solid currentColor; border-radius:8px; background:transparent; color:inherit }
.yeon-fs button:nth-child(1){ font-size:12px }
.yeon-fs button:nth-child(2){ font-size:15px }
.yeon-fs button:nth-child(3){ font-size:18px }
.yeon-fs button.on{ background:currentColor }
.yeon-fs button.on::after{ content:"" }

/* ── 인쇄 ───────────────────────────────────────────────────
   종이에서는 화면보다 한 단 얇아야 번지지 않는다. 배율도 1 로 되돌린다. */
@media print{
  body{ font-weight:500 }
  b, strong{ font-weight:700 }
  .yeon-fs{ display:none !important }
  [data-yeon-zoom]{ zoom:1 !important }
}