/* ═══════════════════════════════════════════════════════════════
   김의영 — Typography
   ───────────────────────────────────────────────────────────────
   서체 · 스케일 · 텍스트 스타일. tokens.css 보다 먼저 읽는다.

   원칙
     1. 크기를 낱개로 고르지 않는다. 아래 11단 스케일에서만 고른다.
     2. 크기 · 행간 · 자간 · 굵기는 한 벌(텍스트 스타일)로 묶여 있다.
        컴포넌트는 스타일 하나를 통째로 쓴다. 낱개 조합 금지.
     3. 한글 기준으로 짠 스케일이다. 라틴 관행을 그대로 옮기지 않았다.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. 서체 — Pretendard 자체 호스팅
   ───────────────────────────────────────────────────────────────
   subset = KS X 1001 상용 한글 2,350자. 굵기 4단만 싣는다(1.03MB).
   local() 은 일부러 뺐다. 방문자 PC 에 설치된 구버전이 끼어들면
   렌더링이 사람마다 달라진다. 항상 이 파일을 쓴다.
   그 밖의 희귀 한자·한글은 fallback 으로 떨어진다 — 본문에 쓰지 말 것.
   Pretendard © Kil Hyung-jin · SIL Open Font License 1.1 (fonts/LICENSE.txt)
   ─────────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Pretendard'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/Pretendard-Bold.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-weight:800; font-style:normal; font-display:swap;
  src:url('fonts/Pretendard-ExtraBold.subset.woff2') format('woff2');
}

:root{
  --font-sans:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
              'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
  /* 라벨·수치 전용. 사양서 톤을 만드는 축. 한글은 fallback 으로 떨어진다 */
  --font-mono:ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas,
              'D2Coding', 'Nanum Gothic Coding', monospace;
}


/* ───────────────────────────────────────────────────────────────
   2. 스케일 — 15px 기준, 소단 1.08 / 대단 1.22
   ───────────────────────────────────────────────────────────────
   2026-08-17 전면 개정. 이전 스케일의 문제는 "크다"가 아니라
   **중간이 촘촘한데 눈금 전체가 높다** 였다.

     이전   13.5 · 14.5 · 15 · 16 · 17   ← 5단이 3.5px 안에
     결과   위계는 안 생기고 면적만 먹음. 한 화면에 들어오는 정보가 적어짐

   고친 방법 세 가지
     1. 중복 단 제거 — md(15) 를 base 로 흡수. 12단 → 11단
     2. 본문 기준을 16 → 15 로. 개조식 문서는 읽는 단위가 '줄'이 아니라
        '항목'이라, 본문을 키워도 읽기가 나아지지 않는다
     3. 제목 구간을 크게 낮춤. 화면을 먹던 건 본문이 아니라 위쪽이었다
        h2 33→25 · h1 48→34 · 이름 60→44 · 진술 27→20

     3xs   11      mono 라벨 (대문자 · 자간 넓힘)
     2xs   12      메타 · 기간
      xs   13      캡션 · 링크
      sm   14      개조식 보조설명   ← 문서 분량의 절반
    base   15      본문 · 개조식 항목
      lg   16      컬럼 제목
      xl   17      소제목
     2xl   clamp   카드 · 목차 제목
     3xl   clamp   섹션 제목 h2
     4xl   clamp   페이지 제목 h1
     5xl   clamp   이름
   ─────────────────────────────────────────────────────────────── */
:root{
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 15px;
  --fs-lg:   16px;
  --fs-xl:   17px;
  --fs-2xl:  clamp(17px, 1.7vw, 19px);
  --fs-3xl:  clamp(20px, 2.1vw, 25px);
  --fs-4xl:  clamp(25px, 3vw,   34px);
  /* 이름 한 단. 라틴 대문자 6자(AJ KIM) 기준의 88px 로 시작해
     한글 3자에 맞춰 60 → 44. 4xl × 1.3. */
  --fs-5xl:  clamp(29px, 3.9vw, 44px);
  /* 진술 한 줄 — 제목도 본문도 아닌 중간 위계 */
  --fs-lead: clamp(16.5px, 1.7vw, 20px);

  /* ── 행간 — 한글은 라틴보다 넉넉해야 한다 ─────────────────────
     글자를 줄인 만큼 행간도 조금 줄인다. 크기만 줄이고 행간을 두면
     줄 사이가 벌어져 오히려 덩어리가 흩어진다. */
  --lh-1:    0.98;   /* 이름 — 글자가 서로 붙게 */
  --lh-2:    1.22;   /* 제목 */
  --lh-3:    1.32;   /* 소제목 · 진술 */
  --lh-4:    1.55;   /* 조밀한 목록 */
  --lh-5:    1.62;   /* 본문 기본 */
  --lh-6:    1.66;   /* 여유 본문 */

  /* ── 자간 — 크면 좁히고, 작으면 벌린다 ────────────────────── */
  /* 자간은 크기에 딸린 값이다. 스케일을 낮추면 같이 완화해야 한다 —
     작아진 글자에 큰 글자용 음수 자간을 그대로 물리면 획이 붙는다. */
  --ls-5xl:  -0.038em;
  --ls-4xl:  -0.034em;
  --ls-3xl:  -0.026em;
  --ls-2xl:  -0.018em;
  --ls-base: -0.004em;
  --ls-label: 0.15em;    /* 라틴 대문자 라벨 — 벌려야 읽힌다 */
  --ls-label-ko: 0.02em; /* 한글 라벨 — 벌리면 한 단어가 두 단어가 된다 */
  --ls-name: -0.028em;  /* 한글 이름 — 라틴 대문자용 음수 자간을 그대로 쓰면 붙는다 */

  /* ── 굵기 — 이 4단만 싣는다. 다른 값은 합성돼 뭉갠다 ──────── */
  --fw-normal: 400;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;
}


/* ───────────────────────────────────────────────────────────────
   3. 텍스트 스타일 — 크기·행간·자간·굵기를 한 벌로
   ───────────────────────────────────────────────────────────────
   컴포넌트는 이 클래스를 쓰거나, 셀렉터를 여기에 얹는다.
   컴포넌트 CSS 안에서 font-size 를 새로 정의하지 말 것.
   ─────────────────────────────────────────────────────────────── */

/* 문서 기본값 — 아래 스타일이 덮지 않는 모든 곳이 이걸 물려받는다.
   배치는 components.css 의 body 규칙이 따로 맡는다. */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base); line-height:var(--lh-6);
  letter-spacing:var(--ls-base);
}

/* 이름 — 페이지에 한 번 */
.t-display, .hero__name{
  font-size:var(--fs-5xl); line-height:var(--lh-1);
  letter-spacing:var(--ls-5xl); font-weight:var(--fw-black);
}
/* 이름 — 한글은 네모틀이라 라틴 대문자용 음수 자간을 물려받으면 글자가 붙는다 */
.t-name, .hero__name{
  letter-spacing:var(--ls-name);
}
/* 워드마크 — 헤더·푸터는 라틴 대문자로 남긴다 (도메인 aj-kim.com 과 한 벌) */
.nav__brand{
  font-size:var(--fs-base); font-weight:var(--fw-black);
  letter-spacing:var(--ls-3xl);
}
.footer__meta strong{
  font-size:var(--fs-base); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-2xl);
}
/* 페이지 제목 */
.t-title, .workhead h1{
  font-size:var(--fs-4xl); line-height:var(--lh-2);
  letter-spacing:var(--ls-4xl); font-weight:var(--fw-black);
}
/* 섹션 제목 */
.t-heading, h2{
  font-size:var(--fs-3xl); line-height:var(--lh-2);
  letter-spacing:var(--ls-3xl); font-weight:var(--fw-bold);
}
/* 진술 한 줄 — 히어로·푸터 */
.t-lead-xl, .hero__line, .footer__line{
  font-size:var(--fs-lead); line-height:var(--lh-3);
  letter-spacing:var(--ls-3xl); font-weight:var(--fw-bold);
}
/* 카드 제목 */
.t-subhead, .card__title, .idx__t, .pages__t{
  font-size:var(--fs-2xl); line-height:var(--lh-3);
  letter-spacing:var(--ls-3xl); font-weight:var(--fw-bold);
}
/* 소제목 — 일하는 방식 */
.t-subhead-sm, .way h3, .idx__catname{
  font-size:var(--fs-xl); line-height:var(--lh-3);
  letter-spacing:var(--ls-3xl); font-weight:var(--fw-bold);
}
/* 컬럼 제목 */
.t-column, .col h3, .job__head strong, .seg__h, .pager__t, .proj__n{
  font-size:var(--fs-lg); line-height:var(--lh-4);
  letter-spacing:var(--ls-2xl); font-weight:var(--fw-bold);
}
/* 도입문 · 본문 */
.t-body, .lede, .band__hl, .hero__role{
  font-size:var(--fs-base); line-height:var(--lh-5);
  letter-spacing:var(--ls-base); font-weight:var(--fw-normal);
}
.band__hl{font-weight:var(--fw-bold); line-height:var(--lh-4); letter-spacing:var(--ls-2xl)}
/* 개조식 항목 — 키워드 쪽 */
.t-item, .kv > li, .def dt, .opt__nm, .feat__row b{
  font-size:var(--fs-base); line-height:var(--lh-5);
  letter-spacing:var(--ls-base);
}
.def dt{font-weight:var(--fw-bold); line-height:var(--lh-4)}
/* 개조식 보조설명 — 문서 분량의 절반. 여기가 흐리면 전부 안 읽힌다 */
.t-detail, .def dd, .opt__note, .idx__d, .idx__proj, .proj > span, .pages__d, .kv--sm > li, .col li, .way li,
.tradeoff p, .callout p, .retro-p, .stack dd, .job__who, .footer__meta,
.feat__row > summary > span, .feat__row--plain > span{
  font-size:var(--fs-sm); line-height:var(--lh-4);
  letter-spacing:var(--ls-base); font-weight:var(--fw-normal);
}
.retro-p, .callout p{line-height:var(--lh-5)}
/* 캡션 · 링크 */
.t-caption, .job__desc, .spec dt, .spec dd, .stack dt,
.nav__link, .jump__t, .card__more, .toplink, .chip, .links{
  font-size:var(--fs-xs); line-height:var(--lh-4); letter-spacing:var(--ls-base);
}
/* 본문 안 강조 — 굵기만 올린다. 크기는 부모를 따라간다.
   컴포넌트마다 font-weight 를 흩어 두면 굵기 단이 슬금슬금 늘어난다. */
.t-strong, .lede b, .kv > li b, .idx__proj b, .retro-p b, .opt--take .opt__nm{
  font-weight:var(--fw-bold);
}
/* 약한 강조 — 링크성 요소 */
.t-semi, .card__more, .toplink, .opt--take .opt__note{
  font-weight:var(--fw-semi);
}
/* 칩 뒤 화살표 — 본체(13px)보다 한 단 작게 */
a.chip::after{font-size:var(--fs-3xs)}

/* 메타 — 기간 · 숫자. mono */
.t-meta, .meta, .def--dated .when, .idx__catmeta, .idx__proj i, .tag, .proj__meta{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-2xs); line-height:var(--lh-4); letter-spacing:0;
}
/* 라벨 — 사양서 톤을 만드는 요소. 문자 체계에 따라 두 벌이다.
   ───────────────────────────────────────────────────────────
   라틴 대문자는 벌려야 읽히고, 한글은 벌리면 단어가 쪼개진다.
   ('배 경' 처럼 두 글자가 두 단어로 보인다)
   한글은 mono 에 글리프가 없어 fallback 으로 떨어지므로 sans 로 지정한다.

   ★ 기본값은 안전한 쪽(한글)이다. 라틴 대문자 라벨에만 .label--en 을 붙인다.
     반대로 두면 라벨을 추가하는 사람이 실수하는 순간 조용히 깨진다. */

/* 라틴 대문자 — mono · 자간 넓힘 */
.t-label-en, .label--en, .idx__n, .jump__n{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-3xs); line-height:var(--lh-4);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  font-weight:var(--fw-semi);
}
/* 한글 — sans · 자간 그대로 */
.t-label, .label, .pager__lb, .seg__lb, .band__lb, .callout__k, .stack__gh,
.tradeoff h4, .split h3{
  font-family:var(--font-sans); font-variant-numeric:tabular-nums;
  font-size:var(--fs-3xs); line-height:var(--lh-4);
  letter-spacing:var(--ls-label-ko);
  font-weight:var(--fw-bold);
}
.split h3{font-size:var(--fs-2xs)}