@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ══════════════════════════════════════════════════════════════
   김예빈 — 연구자 개인 사이트
   assets/css/site.css — 산세리프 단일 서체 (Pretendard only)

   조판 규칙 (이 파일 전체가 지키는 것)
   ① 서체는 Pretendard 하나. 세리프·합성 이탤릭을 쓰지 않는다.
      위계는 크기 · 굵기 · 색 세 축으로만 만든다.
      (--mono 는 코드 블록에만. --serif 토큰은 이름 보존용으로 선언만 해 두고 쓰지 않는다.)
   ② 활자 크기는 아래 6단계뿐이다. 그 밖의 절대 크기를 쓰지 않는다.
      예외는 상대 단위 두 개 — code 0.875em, sub/sup 0.72em.
   ③ 규칙선은 한 종류: 1px solid var(--line). 굵기·색을 늘리지 않고,
      border-top 또는 border-bottom 중 한쪽만 써서 이중선을 만들지 않는다.
      블록 좌측 마커(요약·주석·인용)는 2px 세로선으로, 규칙선과 별개의 장치다.
   ④ 왼쪽 본문 가장자리는 머리글 · 문단 · 목록 · 표에서 x = 0 한 줄로 맞춘다.
   ⑤ 날짜와 수치는 font-variant-numeric: tabular-nums.
   ⑥ 작은 라벨은 .label 한 가지 관용만 쓴다 (--t1 / 600 / .04em / --muted).
   ⑦ overflow-wrap: anywhere 를 쓰지 않는다 — 그것이 ㈜·숫자+단위를
      갈라 놓던 원인이었다. 필요한 곳에만 break-word 를 준다.

   토큰 이름은 본문 다이어그램(build/extras.py 의 인라인 SVG)이 직접
   참조하므로 바꾸지 않는다. 값만 조정했다.
   ══════════════════════════════════════════════════════════════ */

:root {
  --paper:        #ffffff;
  --paper-tint:   #fafaf9;
  --surface:      #ffffff;
  --surface-2:    #f5f5f3;
  --surface-3:    #e9e9e6;
  --ink:          #1a1a1a;
  --ink-2:        #3a3a3a;
  --muted:        #6b6b6b;
  --muted-2:      #7d7d7d;
  --line:         #dfdfda;
  --line-2:       #c8c8c2;
  --accent:       #1f5bb5;
  --accent-soft:  #eef3fb;
  --accent-ink:   #17498f;
  --warm:         #8a5a2b;
  --warm-soft:    #f6f0e8;
  --warm-ink:     #6a4420;
  --good:         #1c6f47;
  --good-soft:    #e8f4ee;
  --bad:          #a82720;
  --bad-soft:     #fbeeec;

  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', 'Malgun Gothic', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;   /* 이름 보존용 — 이 변형에서는 쓰지 않는다 */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  --col: 740px;
  --toc-w: 184px;
  --gutter: 20px;

  /* ── 활자 스케일: 6단계 ─────────────────────────────
     t1 12px  라벨 · 메타 · 태그 · 배지 · 각주
     t2 14px  메뉴 · 날짜 · 표 · 캡션 · 주석 · 부제목
     t3 16px  본문 · 목록 제목 · h4
     t4 19px  이름(brand) · h3 · 글 머리 부제
     t5 24px  h2 · 페이지 제목
     t6 32px  글 제목                                   */
  --t1: 12px;
  --t2: 14px;
  --t3: 16px;
  --t4: 19px;
  --t5: 24px;
  --t6: 32px;

  /* 행간 — 본문 1.78 (한국어 15~17px 구간의 권장값) */
  --lh-body: 1.78;
  --lh-tight: 1.5;
  --lh-head: 1.3;

  --rule: 1px solid var(--line);
  --r: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #111111;
    --paper-tint:   #171717;
    --surface:      #161616;
    --surface-2:    #1e1e1e;
    --surface-3:    #2a2a2a;
    --ink:          #eaeae8;
    --ink-2:        #c8c8c5;
    --muted:        #9a9a97;
    --muted-2:      #7c7c79;
    --line:         #2c2c2c;
    --line-2:       #3e3e3e;
    --accent:       #86aef0;
    --accent-soft:  #1a2434;
    --accent-ink:   #a9c6f6;
    --warm:         #d4a273;
    --warm-soft:    #2a2119;
    --warm-ink:     #e6c19a;
    --good:         #5cbf8f;
    --good-soft:    #15271e;
    --bad:          #ef8b82;
    --bad-soft:     #2b1917;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:        #111111;
  --paper-tint:   #171717;
  --surface:      #161616;
  --surface-2:    #1e1e1e;
  --surface-3:    #2a2a2a;
  --ink:          #eaeae8;
  --ink-2:        #c8c8c5;
  --muted:        #9a9a97;
  --muted-2:      #7c7c79;
  --line:         #2c2c2c;
  --line-2:       #3e3e3e;
  --accent:       #86aef0;
  --accent-soft:  #1a2434;
  --accent-ink:   #a9c6f6;
  --warm:         #d4a273;
  --warm-soft:    #2a2119;
  --warm-ink:     #e6c19a;
  --good:         #5cbf8f;
  --good-soft:    #15271e;
  --bad:          #ef8b82;
  --bad-soft:     #2b1917;
  color-scheme: dark;
}

/* ══ base ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t3);
  line-height: var(--lh-body);
  letter-spacing: -0.006em;
  font-feature-settings: "ss01" off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 한국어 조판: 어절 단위 줄바꿈. anywhere 는 쓰지 않는다 (㈜·숫자+단위 분리 원인) */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }

h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.018em; }
p { text-wrap: pretty; }

/* 세리프·합성 이탤릭 금지 — 강조는 굵기와 색으로만 */
i, em, cite, var { font-style: normal; }
b, strong { font-weight: 650; }

/* 긴 URL·경로·수식 토큰만 강제 분절 (본문 어절은 건드리지 않는다) */
code, samp, kbd, .browser .url, .doclinks a, .meta dd, main td, main th, figcaption {
  overflow-wrap: break-word;
}

/* 줄바꿈 금지 관용 — ㈜+회사명, 숫자+단위 */
.nw { white-space: nowrap; }

/* ── 공통 유틸 (본문 렌더러가 쓰는 어휘) ── */
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.small { font-size: var(--t2); color: var(--muted); }
.en { font-weight: 400; letter-spacing: 0; }
.sep { color: var(--muted-2); margin: 0 7px; }
/* 구분자 뒤에 폭 0 줄바꾸기 기회 — overflow-wrap: anywhere 를 쓰지 않고
   구분자에 붙은 긴 토큰(이메일·DOI·URL)을 다음 줄로 내린다. .nw 안에서는 nowrap 이 이긴다. */
.sep::after { content: "\200B"; }

/* 작은 라벨 — 사이트 전체에서 이 관용 하나만 쓴다 */
.label, .toc .label, .summary .label, .sec-label h2, .cv-block > h2 {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--muted);
}

/* 본문 컬럼 — 좌측 가장자리의 유일한 기준 */
.col {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main { padding: 32px 0 64px; }

/* ══ 머리글 ════════════════════════════════════════════════════
   모바일 390px 결함 수정: 테마 버튼이 혼자 다음 줄로 내려가지 않게
   1행 = 이름 + 테마 버튼, 2행 = 메뉴 로 고정한다.                */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60; height: 2px; width: 0;
  background: var(--accent); transition: width .08s linear;
}

.site-head { padding: 24px 0 14px; border-bottom: var(--rule); }
.site-head .bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 6px;
}
.brand {
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-size: var(--t4);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.brand a { color: inherit; }
.brand a:hover, .brand:hover { text-decoration: none; }
.brand .en {
  font-size: var(--t2);
  font-weight: 400;
  color: var(--muted);
  margin-left: 9px;
  letter-spacing: 0;
  white-space: nowrap;
}
.nav {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; flex-wrap: wrap;
  gap: 0 18px;
  font-size: var(--t2);
  line-height: 1.5;
}
.nav a { color: var(--muted); display: inline-block; padding: 12px 0; margin: -12px 0; }  /* 탭 타깃 44px */
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.theme-btn {
  grid-column: 2; grid-row: 1; justify-self: end;
  width: 44px; height: 44px; margin: -12px -12px -12px 0;   /* 탭 타깃 44px, 레이아웃은 그대로 */
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted);
  display: inline-grid; place-items: center; line-height: 0;
}
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn:hover { color: var(--ink); }

@media (min-width: 620px) {
  .site-head .bar { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; }
  .nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 0 20px; }
  .theme-btn { grid-column: 3; }
}

/* ══ 첫 페이지 ═════════════════════════════════════════════════
   머리글 → 가는 선 → 프로필(사진 + 이력) →
   짧은 서술 문단 → 링크 한 줄 → 날짜순 통합 목록 하나.
   블록·카드·타일·지표 배너를 두지 않는다.                        */

body[data-track="home"] .site-head { padding: 30px 0 16px; }

.home { padding-top: 14px; }

/* ── 프로필 블록 (CONTRACT.md) — 사진 + 이력. 박스로 감싸지 않는다: 사진의 1px 테두리가 유일한 선 ──
   .affil/.topic 이 있던 자리를 승계한다. 이름은 이 페이지의 h1 이므로 머리글 .brand 는 다른 페이지와 같은 t4 로 둔다. */
.profile {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}
.profile-photo {
  width: 132px; height: 176px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
}
.profile-body { min-width: 0; }
.profile-name {
  margin: 0;
  font-size: var(--t6);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}
.profile-name .en {
  font-size: var(--t3);
  font-weight: 400;
  color: var(--muted);
  margin-left: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}
.profile-role {
  margin-top: 6px;
  font-size: var(--t3);
  color: var(--ink-2);
  line-height: 1.6;
}
.profile-cv {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 3px;
  align-items: baseline;
  font-size: var(--t2);
  line-height: 1.68;
}
.profile-cv dt {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
}
.profile-cv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.profile-cv dd .num { color: var(--muted); margin-right: 6px; }
.profile-cv dd .sep { margin: 0 6px; }
.profile-cv a { overflow-wrap: break-word; }

@media (max-width: 560px) {
  .profile { grid-template-columns: minmax(0, 1fr); gap: 16px 0; }
  .profile-photo { width: 96px; height: 128px; }
  .profile-name { font-size: var(--t5); }
  .profile-name .en { display: block; margin: 4px 0 0; font-size: var(--t2); }
  .profile-cv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .profile-cv dt { margin-top: 10px; }
  .profile-cv dt:empty { display: none; }
  .profile-cv dt:first-child { margin-top: 0; }
  /* 좁은 화면에서는 날짜를 제목 위로 올려 세로로 쌓는다 — 고정폭 날짜 열이 오른쪽을 밀어내지 않게
     (사용자 지시 2026-09-09). 목록(.idx)에서 쓰는 방식과 같다. */
  .profile-cv dd .num { display: block; margin: 0 0 1px; }
}

.lede { margin-top: 24px; }
.lede p { color: var(--ink-2); }
.lede p + p { margin-top: 14px; }
.lede b { color: var(--ink); font-weight: 650; }

.linkline {
  margin-top: 20px;
  font-size: var(--t2);
  line-height: 1.9;
  color: var(--muted);
}
.linkline a { color: var(--muted); overflow-wrap: break-word; }
.linkline a:hover { color: var(--ink); }
.linkline .sep { margin: 0 8px; }

/* ── 날짜순 통합 목록 — 논문과 포트폴리오가 한 흐름으로 섞인다 ── */
.idx-head {
  margin: 46px 0 0;
  padding-bottom: 9px;
  border-bottom: var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.idx-head .c { font-size: var(--t1); font-weight: 400; letter-spacing: 0; color: var(--muted-2); }

.idx { list-style: none; padding: 0; margin: 0; }
.idx > li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: var(--rule);   /* 규칙선은 한쪽에만 — 이중선이 생기지 않는다 */
}
.idx > li:last-child { border-bottom: 0; }

/* 더보기 — 목록 맨 아래 오른쪽에 작게. 테두리 없이 글자만 (사용자 지시 2026-09-08). */
.idxmore { margin: 10px 0 0; text-align: right; }
.idxmore a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 12px 0;
  font-size: var(--t1);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.idxmore a:hover { color: var(--ink); text-decoration: none; }

/* 날짜 열: max-content 로 가장 긴 토큰('2023.12 – 현재', 진행 중인 재직 프로젝트)에 맞춰
   모든 행이 같은 폭을 쓴다. 나머지는 `YYYY.MM` 7자 + tabular-nums 라 자리마다 맞고,
   제목 열의 왼쪽 가장자리는 전 행에서 한 줄로 정렬된다. */
.idx .d {
  font-size: var(--t2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}

.idx .t {
  font-size: var(--t3);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink);
}
.idx .t:hover { color: var(--accent-ink); text-decoration: none; }
.idx .t .paren { color: var(--muted); font-weight: 400; }

.idx .k {
  font-size: var(--t1);
  letter-spacing: .04em;
  color: var(--muted-2);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 620px) {
  .idx > li { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 3px; }
  .idx .d { grid-column: 1; grid-row: 1; }
  .idx .k { grid-column: 2; grid-row: 1; }
  .idx .t { grid-column: 1 / -1; grid-row: 2; }
}

/* ══ 목록 · 논문 페이지 머리 ════════════════════════════════════ */
.page-title { font-size: var(--t5); letter-spacing: -0.024em; line-height: 1.25; }
.page-title .en { font-size: var(--t4); font-weight: 400; color: var(--muted); margin-left: 10px; }
.page-desc { margin-top: 12px; color: var(--ink-2); }
.page-desc b { color: var(--ink); font-weight: 650; }

.sec-label {
  margin: 40px 0 0; padding-bottom: 9px; border-bottom: var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.sec-label h2 { letter-spacing: .04em; }
.sec-label a, .sec-label span { font-size: var(--t1); font-weight: 400; letter-spacing: 0; color: var(--muted-2); }

/* ══ 글 목록 (.plist — 빌더 출력) ═══════════════════════════════ */
.plist { list-style: none; padding: 0; margin: 8px 0 0; }
.plist li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: var(--rule);
}
.plist li:last-child { border-bottom: 0; }
.plist .d {
  font-size: var(--t2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.plist .t { font-size: var(--t3); font-weight: 500; line-height: var(--lh-tight); color: var(--ink); }
.plist .t:hover { color: var(--accent-ink); }
.plist .s { grid-column: 2; margin-top: 5px; font-size: var(--t2); color: var(--muted); line-height: 1.7; }
.plist .m { grid-column: 2; margin-top: 4px; font-size: var(--t1); color: var(--muted-2); line-height: 1.6; }

/* 연도 구분 — 규칙선을 늘리지 않고 라벨 하나로만 */
.plist li.yr {
  display: block; border-bottom: 0;
  padding: 26px 0 4px;
}
.plist li.yr:first-child { padding-top: 0; }
.plist .y {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* 소개를 함께 보는 목록(연구·포트폴리오 페이지)은 한 행이 3단이므로 리듬을 한 단 넓힌다 */
.plist.detail li { padding: 15px 0; }
.plist.detail li.yr { padding: 30px 0 4px; }
.plist.detail li.yr:first-child { padding-top: 0; }

@media (max-width: 620px) {
  .plist li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .plist .s, .plist .m { grid-column: 1; }
}

/* ══ 글 머리 ════════════════════════════════════════════════════ */
.post-head { padding-bottom: 24px; border-bottom: var(--rule); }
.post-head .kicker { font-size: var(--t2); color: var(--muted); }
.post-head .kicker a { color: var(--muted); }
.post-head .kicker a:hover { color: var(--ink); }
.post-head h1 {
  margin-top: 10px;
  font-size: var(--t6);
  letter-spacing: -0.028em;
  line-height: 1.28;
  text-wrap: pretty;
}
.post-head .sub {
  margin-top: 16px;
  font-size: var(--t4);
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.62;
  letter-spacing: -0.014em;
}
.meta {
  margin: 22px 0 0;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 18px;
  font-size: var(--t2);
  line-height: 1.68;
}
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tags { margin-top: 16px; font-size: var(--t1); color: var(--muted-2); line-height: 1.8; }
.tags span + span::before { content: " · "; color: var(--muted-2); }

@media (max-width: 480px) {
  .post-head h1 { font-size: var(--t5); }
  .meta { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .meta dt { margin-top: 8px; }
}

/* ══ 글 레이아웃 — 좁은 화면 한 컬럼, 넓은 화면 왼쪽 여백에 목차 ══ */
.layout {
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 24px var(--gutter) 0;
}
article { min-width: 0; }

.toc { font-size: var(--t2); margin: 0 0 24px; border-bottom: var(--rule); }
.toc > summary {
  list-style: none; cursor: pointer;
  padding: 10px 0;
  color: var(--muted); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}   /* 위쪽 규칙선은 .post-head 의 border-bottom 이 이미 그린다 — 이중선 방지 */
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary:hover { color: var(--ink); }
.toc > summary .tn { font-size: var(--t1); font-weight: 400; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.toc .label { display: none; }
.toc ol { list-style: none; padding: 0; margin: 4px 0 12px; columns: 2; column-gap: 26px; }
.toc li { break-inside: avoid; }
.toc a {
  display: block; padding: 4px 0 4px 11px;
  font-size: var(--t1);
  color: var(--muted); line-height: 1.55;
  border-left: 1px solid var(--line);
}
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc a.on { color: var(--ink); border-left-color: var(--ink); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

@media (min-width: 1240px) {
  .layout {
    max-width: none; padding-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--col)) minmax(0, 1fr);
    column-gap: 34px;
  }
  .layout > article { grid-column: 2; }
  .layout > .toc {
    grid-column: 1; justify-self: end; width: var(--toc-w);
    position: sticky; top: 26px; max-height: calc(100vh - 52px); overflow-y: auto;
    border: 0; margin: 0; padding-top: 4px;
  }
  .toc > summary { display: none; }
  .toc .label { display: block; margin-bottom: 9px; }
  .toc ol { columns: 1; margin: 0; }
}

/* ══ 본문 조판 ══════════════════════════════════════════════════ */
article > section { padding: 2px 0 22px; }
section[id] { scroll-margin-top: 22px; }   /* 목차 앵커 착지 지점 */

article h2 {
  margin: 34px 0 10px;
  padding-top: 26px;
  border-top: var(--rule);
  font-size: var(--t5);
  letter-spacing: -0.024em;
}
article > section:first-of-type h2 { margin-top: 0; padding-top: 0; border-top: 0; }
article .h-lead {
  margin: 6px 0 16px;
  font-size: var(--t3);
  color: var(--muted);
  line-height: 1.72;
}
article h3 { margin: 30px 0 8px; font-size: var(--t4); font-weight: 650; }
article h4 { margin: 24px 0 6px; font-size: var(--t3); font-weight: 650; color: var(--ink-2); }

article p { margin: 13px 0; color: var(--ink-2); }
article p strong, article li strong, article b, article strong { color: var(--ink); font-weight: 650; }
article em { color: var(--ink); font-weight: 650; }   /* 합성 이탤릭 대신 굵기 */
article ul, article ol { margin: 13px 0; padding-left: 1.35em; color: var(--ink-2); }
article li { margin: 6px 0; }
article li::marker { color: var(--muted-2); }
article ul ul, article ol ol, article ul ol, article ol ul { margin: 5px 0; }

article a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 32%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
article a:hover { text-decoration-color: var(--accent); }

article code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 1px 5px;
  color: var(--ink);
  letter-spacing: 0;
}
article pre {
  margin: 18px 0;
  padding: 15px 16px;
  background: var(--surface-2);
  border-radius: var(--r);
  overflow-x: auto;
}
article pre code { background: none; padding: 0; font-size: var(--t1); line-height: 1.65; }

article blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line-2);
  color: var(--ink-2);
}
article blockquote p:first-child { margin-top: 0; }
article blockquote p:last-child { margin-bottom: 0; }
article hr { border: 0; border-top: var(--rule); margin: 30px 0; }
article sub, article sup { font-size: 0.72em; line-height: 0; }

/* ── 표 — 첫 칸이 본문보다 안으로 들어가지 않게 ── */
.tablewrap { overflow-x: auto; margin: 20px 0; }
.tablewrap::-webkit-scrollbar { height: 8px; }
.tablewrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.tablewrap table { min-width: 420px; }
.tablewrap table.kv { min-width: 0; }

main table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t2);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
main th, main td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--rule);
}
main th:first-child, main td:first-child { padding-left: 0; }   /* 본문 왼쪽 가장자리와 정렬 */
main th:last-child, main td:last-child { padding-right: 0; }
main thead th { font-weight: 650; color: var(--ink); white-space: nowrap; }
main tbody tr:last-child td { border-bottom: 0; }
main td:first-child { color: var(--ink); font-weight: 500; }
main table caption {
  caption-side: top; text-align: left;
  padding: 0 0 7px;
  font-size: var(--t1); font-weight: 600; letter-spacing: .04em; color: var(--muted);
}

/* 주요 수치 표 */
.kv { margin: 20px 0; }
.kv td.v { color: var(--ink); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kv td.n { color: var(--muted); font-weight: 400; }

/* ── 그림 ── */
figure { margin: 22px 0; }
figure img {
  width: 100%;
  border: var(--rule);
  border-radius: var(--r);
  background: #fff;
  cursor: zoom-in;
}
figure img[height] { height: auto; }
figcaption { margin-top: 9px; font-size: var(--t2); color: var(--muted); line-height: 1.65; }
figcaption b { color: var(--ink-2); font-weight: 650; }

.figrow { display: grid; gap: 16px; margin: 22px 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.figrow figure { margin: 0; }
.figrow.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.shot-mobile img { max-width: 300px; margin-inline: auto; }

/* 세로로 긴 전체 캡처 */
.shotbox {
  max-height: 520px; overflow-y: auto; overscroll-behavior: contain;
  border: var(--rule); border-radius: var(--r); background: #fff;
}
.shotbox img { border: 0; border-radius: 0; width: 100%; }
.shotbox::-webkit-scrollbar { width: 8px; }
.shotbox::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }

/* 실서비스 화면 — 글 안에서만 쓰는 브라우저 창 (첫 페이지에는 두지 않는다) */
.browser { margin: 22px 0 28px; }
.browser .bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-2); border-bottom: 0;
  border-radius: 5px 5px 0 0;
  background: var(--surface-2);
}
.browser .dots { display: inline-flex; gap: 5px; flex: none; }
.browser .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.browser .url {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: var(--t1); letter-spacing: 0;
  color: var(--muted);
  background: var(--paper);
  border: var(--rule); border-radius: var(--r);
  padding: 3px 8px;
}
.browser .view {
  border: 1px solid var(--line-2); border-radius: 0 0 5px 5px;
  overflow: hidden; background: #fff;
}
.browser .view.tall { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.browser .view::-webkit-scrollbar { width: 8px; }
.browser .view::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.browser .view img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; cursor: zoom-in; }

/* 손으로 그린 다이어그램 (인라인 SVG — 토큰을 직접 참조한다) */
.breakout { margin-inline: 0; }
.dg { width: 100%; height: auto; }
.dg text { letter-spacing: 0; }

/* ── 글 앞뒤의 보조 블록 — 좌측 2px 마커 하나로 통일, 배경 없음 ── */
.summary {
  margin: 24px 0;
  padding-left: 18px;
  border-left: 2px solid var(--ink);
}
.summary .label { display: block; margin-bottom: 4px; }
.summary ul { margin: 0; padding-left: 1.2em; }
.summary li { margin: 6px 0; font-size: var(--t3); color: var(--ink-2); }

.note {
  margin: 22px 0;
  padding-left: 18px;
  border-left: 2px solid var(--ink-2);
  background: none;
  font-size: var(--t2);
  color: var(--ink-2);
  line-height: 1.75;
}
.note.quiet { border-left-color: var(--line-2); }
.note .t { margin: 0 0 4px; font-weight: 650; color: var(--ink); }
.note p { margin: 7px 0; }
.note ul { margin: 7px 0 0; padding-left: 1.25em; }
.note li { margin: 5px 0; }
.note code { font-family: var(--mono); font-size: 0.875em; letter-spacing: 0; }

.doclinks { margin: 18px 0; font-size: var(--t2); color: var(--muted); line-height: 1.9; }
.doclinks .sep { margin: 0 7px; }

.takeaways { margin: 34px 0 0; padding-top: 24px; border-top: var(--rule); }
.takeaways h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: var(--t4); }
.takeaways ol { margin: 0; padding-left: 1.3em; color: var(--ink-2); }
.takeaways li { margin: 8px 0; color: var(--ink); }

.pnav {
  display: flex; justify-content: space-between; gap: 22px;
  margin: 42px 0 0; padding-top: 20px; border-top: var(--rule);
  font-size: var(--t2); line-height: 1.55;
}
.pnav a { max-width: 48%; color: var(--ink-2); }
.pnav a:hover { color: var(--accent-ink); text-decoration: none; }
.pnav .d { display: block; font-size: var(--t1); color: var(--muted); margin-bottom: 3px; }
.pnav .next { text-align: right; margin-left: auto; }

/* ══ CV (about.html) ═══════════════════════════════════════════ */
.about-top { display: flex; gap: 30px; align-items: flex-start; }
.about-top > div { min-width: 0; flex: 1; }
.about-top img { width: 112px; flex: none; border: var(--rule); border-radius: var(--r); }
@media (max-width: 620px) {
  .about-top { flex-direction: column-reverse; gap: 16px; }
  .about-top img { width: 96px; }
}
.cv { margin-top: 36px; }   /* About 의 이력 묶음 래퍼. 첫 페이지는 .profile-cv 를 쓴다 */
.cv-block {
  padding: 26px 0; border-top: var(--rule);
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px;
}
.cv-block > h2 { margin-top: 4px; }
.cv-item + .cv-item { margin-top: 20px; }
.cv-item .t { font-weight: 650; color: var(--ink); line-height: 1.5; }
.cv-item .m {
  margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 0 14px;
  font-size: var(--t2); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cv-item .d { margin-top: 7px; font-size: var(--t2); color: var(--ink-2); line-height: 1.75; }
.cv-item .d .dim { color: var(--muted); }
.cv-block blockquote { margin: 0 0 14px; padding: 2px 0 2px 18px; border-left: 2px solid var(--line-2); color: var(--ink-2); font-size: var(--t3); }
.cv-block p { color: var(--ink-2); font-size: var(--t3); }
@media (max-width: 700px) { .cv-block { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ══ 논문 · 특허 (publications.html) ═══════════════════════════
   인용 조판: 저자 = ink-2 / “제목” = ink 650 / 학회·저널명 = muted.
   Pretendard 에는 진짜 이탤릭이 없으므로 색과 굵기로 구분한다.     */
.pubs { list-style: none; padding: 0; margin: 8px 0 0; }
.pubs > li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px;
  padding: 16px 0; border-bottom: var(--rule);
}
.pubs > li:last-child { border-bottom: 0; }
.pubs .y {
  font-size: var(--t2); font-variant-numeric: tabular-nums; color: var(--muted);
  padding-top: 2px;
}
.pubs .y small { display: block; font-size: var(--t1); color: var(--muted-2); letter-spacing: .04em; }
.pubs .t { font-size: var(--t3); font-weight: 650; color: var(--ink); line-height: var(--lh-tight); }
.pubs .a { margin-top: 5px; font-size: var(--t2); color: var(--ink-2); }
.pubs .v { margin-top: 2px; font-size: var(--t2); color: var(--muted); }   /* 학회명 — 이탤릭 대신 색 */
.pubs .n { margin-top: 4px; font-size: var(--t1); color: var(--muted); line-height: 1.65; }
.pubs .l { margin: 7px 0 0; font-size: var(--t2); }
@media (max-width: 620px) {
  .pubs > li { grid-template-columns: minmax(0, 1fr); }
  .pubs .y small { display: inline; margin-left: 7px; }
}

/* 칩·태그 — 라벨 관용을 따르고 색은 하나만 */
.chip {
  font-size: var(--t1); letter-spacing: .04em; color: var(--ink-2);
  border: var(--rule); border-radius: var(--r); padding: 3px 9px;
}
.chip.on { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tag { font-size: var(--t1); letter-spacing: .04em; color: var(--muted-2); }
/* ══ 꼬리글 ════════════════════════════════════════════════════ */
.site-foot {
  border-top: var(--rule);
  padding: 22px 0 48px;
  font-size: var(--t2);
  color: var(--muted);
  line-height: 1.7;
}
.site-foot .col { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink); }

/* ══ 라이트박스 ════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 9, 12, .92);
  display: grid; place-items: center; padding: 26px; cursor: zoom-out;
}
.lb[hidden] { display: none !important; }
.lb img { max-width: 100%; max-height: 84vh; border-radius: var(--r); background: #fff; cursor: default; }
.lb .cap { margin-top: 14px; max-width: 74ch; font-size: var(--t2); color: #e6e7ea; text-align: center; line-height: 1.65; }
.lb .x {
  position: absolute; top: 16px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: var(--t5); line-height: 1; cursor: pointer;
}
.lb .x:hover { background: rgba(255, 255, 255, .24); }

/* 넓은 화면: 본문 안의 표·그림 묶음·다이어그램만 오른쪽 여백으로 넓게 */
@media (min-width: 1240px) {
  article .tablewrap, article .figrow, article .breakout { margin-right: -140px; }
}

@media print {
  .site-head, .site-foot, .toc, .lb, .theme-btn, .pnav, .progress { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .layout { display: block; }
  article > section { break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
}