/* ============================================================
   components.css — 카드 · 배지 · 태그 · 경력표 · Impact · 도판 · 페이저
   tokens.css → base.css → layout.css 다음에 읽는다.
   ============================================================ */

/* ============================================================
   1. 프로젝트 섹션
   <section class="proj-section" id="robotics" data-category="robotics">
   data-category 는 마크업에 남아 있지만 색으로 쓰지 않는다 —
   분야 구분은 섹션 제목과 순서가 이미 하고 있다.
   ============================================================ */

.proj-section {
  margin-block-end: 72px;
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
}

/* 구 .category-title 값 그대로 */
.proj-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 12px;
  border-bottom: var(--hairline) solid var(--rule-category);
  margin-bottom: 28px;
}

.proj-section__count {
  margin-inline-start: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.proj-section__count::before { content: "프로젝트 "; }

/* ============================================================
   2. 프로젝트 카드 — <a class="proj-card"> 통째로 링크
   ============================================================ */

/* 메인 프로젝트는 카드(테두리 있는 상자), 그 외 작업은 한 줄 리스트.
   둘의 무게 차이가 "이쪽이 주력"을 말한다 — 한 열 목록으로 통일했더니
   그 구분이 사라졌다. 배경도 그림자도 두지 않는다. 테두리 하나면 된다. */
.proj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 680px) {
  .proj-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch; /* 같은 줄의 카드는 높이를 맞추고, 태그는 카드 맨 아래로(.proj-card__tags) */
  }
  /* 카드가 하나뿐인 분야(Game)는 오른쪽 절반이 통째로 비므로 1열 */
  .proj-grid:has(> :only-child) { grid-template-columns: 1fr; }
}


.proj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border: var(--hairline) solid var(--border-strong);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}



.proj-card:hover { border-color: var(--text); }
.proj-card:hover .proj-card__title { text-decoration: underline; text-underline-offset: 0.18em; }

.proj-card:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- 배지 줄 -------------------------------------------------- */
.proj-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* 날짜만 오른쪽 끝으로 밀면 가운데가 340px 빈 채널이 된다.
   제목 위 작은 메타 줄로 왼쪽에 붙인다. */
.proj-card__period {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ---- 제목 · 한 줄 --------------------------------------------- */
.proj-card__title {
  font-size: 1.1rem;          /* 구 .project h4 */
  margin-bottom: 6px;
  color: var(--text);
  text-wrap: balance;
}

/* 영문 풀이처럼 제목 아래에 붙는 둘째 줄: 한 줄에 들어가게 작게 */
.proj-card__title-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
@media (min-width: 680px) {
  .proj-card__title-sub { white-space: nowrap; }
}

.proj-card__oneline {
  font-size: 0.9rem;          /* 구 .project .summary */
  margin-bottom: 12px;
  color: var(--text-muted);
}

/* ---- Impact — 카드의 얼굴 -------------------------------------
   라벨이 "물리 버튼 하나가 상태와 단계에 따라 여섯 가지 뜻으로 동작"
   처럼 한 문장이다. 숫자를 가로로 늘어놓으면 라벨 칸이 100px도 안 돼
   네다섯 줄로 쪼개진다. 그래서 가로 3열이 아니라 세로 행으로 쌓고,
   숫자를 왼쪽 고정폭 열에 세운다.

   이렇게 하면
     · 숫자가 왼쪽에 한 줄로 서서 세로로 훑인다
     · 수치가 2개인 카드와 3개인 카드가 섞여도 숫자 열의 x좌표가 같다
     · 라벨이 길어져도 오른쪽에서 자연스럽게 흐른다
   ---------------------------------------------------------------- */
.proj-card__impact {
  /* 카드 안의 수치는 훑어보라고 있는 것이라 상세의 히어로 숫자만큼 키우지
     않는다. 본문(0.95rem)보다 한 단만 위. */
  --fs-num: var(--fs-h3);   /* 본문 한 단 위 — 상세의 히어로 숫자만큼 키우지 않는다 */

  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
  padding: 12px 14px;              /* 구 .stat */
  margin: 16px 0 18px;
  list-style: none;
  border: var(--hairline) solid var(--border);
  border-radius: 8px;
}

.proj-card__impact .impact-item {
  display: grid;
  grid-template-columns: minmax(0, 4.75rem) minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  margin-block-start: 0;
}

.proj-card__impact .impact-item__num {
  font-size: var(--fs-num);
  line-height: var(--lh-tight);
}

.proj-card__impact .impact-item__label {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

/* 카드가 아주 좁으면 숫자 열을 접어 위아래로 놓는다.
   기준은 뷰포트가 아니라 카드 폭이다 — 카드 폭은 뷰포트에 비례하지
   않는다(실측: vw 414 → 카드 378px, vw 680 → 카드 305px. 2열로
   바뀌면서 오히려 좁아진다). 미디어쿼리로 걸면 더 좁은 카드에서
   안 접히는 역전이 난다. */
@supports (container-type: inline-size) {
  .proj-card { container-type: inline-size; container-name: card; }

  @container card (max-width: 235px) {
    .proj-card__impact .impact-item { grid-template-columns: 1fr; }
  }
}

/* ---- 태그 줄 -------------------------------------------------- */
.proj-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: auto;   /* 남는 높이를 위에 두어 태그 줄을 카드 바닥에 맞춘다 */
  padding: var(--sp-1) 0 0;
  list-style: none;
}
.proj-card__tags li { margin-block-start: 0; }

/* ============================================================
   3. Impact 아이템 — 상세 페이지의 큰 숫자 카드
   ============================================================ */

.impact-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
}

/* 행간·자간은 구 .stat-value 값 그대로 (1.25 · -0.01em) */
.impact-item__num {
  font-size: var(--fs-num);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

/* 머리말이 숫자가 아니라 말일 때 — 숫자용 조판을 벗긴다.
   -0.01em 은 숫자를 붙여 세우려고 넣은 값인데 한글에 걸리면 눌려 보이고,
   고정폭 숫자(tabular-nums)는 한글에서 아무 일도 하지 않는다. */
.impact-item__num--text {
  letter-spacing: normal;
  font-variant-numeric: normal;
  white-space: normal;
}

.impact-item__unit {
  margin-inline-start: 1px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  color: var(--text-muted);
}

/* 구 .stat-label 0.78rem. 행간도 구 사이트처럼 본문과 같은 단으로 둔다 —
   1.4 로 조여 두었더니 두 줄짜리 설명이 한 덩어리로 뭉쳐 보였다. */
.impact-item__label {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.impact-grid {
  display: grid;
  /* auto-fit 은 빈 트랙을 접어 남은 카드를 늘린다 — 수치가 1개인 페이지에서
     카드 하나가 872px로 퍼졌다. auto-fill 로 빈 트랙을 남겨 폭을 고정한다. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding: 0;
  list-style: none;
}
/* 수치가 넷인 페이지 — 위 auto-fill 규칙으로는 872px 칸에 셋만 들어가
   넷째가 혼자 아랫줄로 내려간다. 넓은 화면에서만 넷으로 세우고,
   칸이 좁아지면 위 규칙으로 돌아가 둘 · 하나로 접힌다. */
/* 넷일 때는 칸 폭이 들쭉날쭉하면 안 된다 — 라벨 줄을 한 줄씩 지정해 두었고
   그중 가장 긴 "LOCKED, READY, NAV, PAUSED" 가 179px 을 요구한다.
   920px 이상에서는 본문 폭이 872px 로 고정되므로 칸이 항상 209px(안쪽 183px)이라
   그 줄이 접히지 않는다. 그 아래는 둘, 560px 아래는 하나로 내린다. */
.impact-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 559px) {
  .impact-grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 920px) {
  .impact-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.impact-grid .impact-item { margin-block-start: 0; }

/* 줄을 지정한 라벨 — 한 항목이 한 줄이다 */
.impact-item__line { display: block; }

.impact-grid > .impact-item {
  /* 좌우 16px 이면 넷일 때 안쪽이 175px 이라 가장 긴 라벨 줄(179px)이 접힌다 */
  padding: var(--sp-3);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-inline-start: var(--cat-bar) solid var(--cat);
  border-radius: var(--r-sm);
}

/* 구 .stat-value 와 같은 1.3rem. 재설계 1차는 36.8px로 +77% 커져 있었다. */
.impact-grid .impact-item__num { font-size: var(--fs-num); }

/* ============================================================
   4. 태그 · 배지
   ============================================================ */

/* 구 .award — 카드 안에서 마지막 "+N" 하나만 다음 줄로 떨어지지 않게
   좌우 여백을 조금 줄였다(12px → 9px). */
.tag {
  display: inline-block;
  padding: 4px 9px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

/* "+3" — 마크업이 class="tag tag-more" 라 뒤에 와서 덮는다 */
.tag-more {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
  border-color: var(--border-strong);
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  border-radius: var(--r-pill);
  /* "제안·시뮬레이션 단계 · 공모전 대상" 처럼 긴 배지가 있다 */
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* 상태를 색 하나로만 나르지 않는다(WCAG 1.4.1) — 점 표식이 같이 간다 */
.badge::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentcolor;
}

/* 상태색(초록·호박·회색)도 걷어냈다. 배지 글자가 "진행 중" · "완료" ·
   "운영 중" 이라고 이미 말하므로 색이 더 얹을 정보가 없다.
   구분은 앞의 점 표식이 채워졌는지 비었는지로만 한다. */
.badge--live,
.badge--wip,
.badge--done { color: var(--text-muted); background: var(--surface-2); }

/* 끝난 것에 채운 점을 찍으면 진행 중처럼 읽힌다. 속을 비운다. */
.badge--done::before { background: none; box-shadow: inset 0 0 0 1.5px currentcolor; }

/* ============================================================
   5. 사이드 프로젝트 — 한 줄 리스트
   위계 차이의 핵심은 표면을 주지 않는 것이다.
   카드 = 떠 있는 면 / 리스트 = 바닥에 붙은 줄.
   ============================================================ */

.proj-list__title {
  margin-block: var(--sp-5) 0;
  padding-block-end: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  border-block-end: var(--hairline) solid var(--border-strong);
}

.proj-list { padding: 0; list-style: none; }

.proj-row { margin-block-start: 0; }
.proj-row + .proj-row { border-block-start: var(--hairline) solid var(--border); }

/* 상세 페이지가 있는 줄은 줄 전체가 링크다. 없는 줄(.proj-row__body)은
   같은 격자만 쓰고, 링크는 제목 옆 작은 것 하나만 둔다. */
.proj-row > a,
.proj-row > .proj-row__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  color: inherit;
  text-decoration: none;
}
.proj-row > a:hover { background: var(--surface-2); }


@media (min-width: 720px) {
  .proj-row > a,
  .proj-row > .proj-row__body {
    /* 마지막 열을 auto 로 두면 태그가 오른쪽 끝에 붙고, 태그 길이가
       제각각이라 우측 가장자리가 들쭉날쭉해진다. 고정폭 열에 왼쪽 정렬한다. */
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) minmax(0, 11rem);
    align-items: baseline;
  }
}

.proj-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* 줄 전체가 링크가 아닐 때 제목 옆에 붙는 작은 링크 */
.proj-row__gh {
  margin-inline-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-faint);
  text-decoration: none;
  white-space: nowrap;
}
.proj-row__gh:hover { color: var(--text); text-decoration: underline; }

.proj-row__oneline {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.proj-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.proj-row__tags li { margin-block-start: 0; }

/* 리스트 줄의 태그는 카드보다 조용하게 — 테두리를 걷고 점으로 잇는다 */
.proj-row__tags .tag {
  padding-inline: 0;
  color: var(--text-faint);
  background: none;
  border-color: transparent;
  white-space: normal;
}
.proj-row__tags li + li .tag::before {
  content: "·";
  margin-inline-end: var(--sp-2);
  color: var(--border-strong);
}

/* ---- 상호참조 리스트 (.proj-list--xref) -----------------------
   다른 분야 섹션에 본체가 있는 프로젝트를 가리키는 줄이다.
   같은 섹션의 사이드 프로젝트와 구별되게 한 단 더 낮춘다 —
   여기 걸린 것은 "이 분야의 작업"이 아니라 "저기 있는 것으로 가는 길". */
.proj-list--xref .proj-row > a { padding-block: var(--sp-2); }

.proj-list--xref .proj-row__title {
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.proj-list--xref .proj-row__title::before {
  content: "↗";
  margin-inline-end: var(--sp-2);
  color: var(--text-faint);
}

/* ============================================================
   6. 경력 표
   ------------------------------------------------------------
   열: 소속(th scope=row) / 역할 / 기간 / 담당 업무
   768px 미만에서는 카드형으로 쌓는다. 가로 스크롤 표는 훑어보는
   문서에서 제일 안 읽힌다.

   마크업에 data-label 이 없으므로 열 이름은 순서로 붙인다.
   열 순서가 바뀌면 아래 nth-of-type 도 같이 고쳐야 한다.
   ============================================================ */

/* 구 사이트에서 이 자리(소속·기간을 왼쪽에 세운 줄)는 .info-row 였고
   0.9rem · 행간 1.7 이었다. */
.exp-table,
.rec-table { font-size: var(--fs-sm); }

/* 구 .flow-table caption 과 같은 값 (0.78rem · 600 · 자간 0.02em) */
.exp-table caption,
.rec-table caption {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: start;
}

.exp-table thead th,
.rec-table thead th {
  padding: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-faint);
  border-block-end: var(--hairline) solid var(--border-strong);
  white-space: nowrap;
}

.exp-table tbody th,
.exp-table td,
.rec-table tbody th,
.rec-table td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-block-end: var(--hairline) solid var(--border);
  vertical-align: baseline;
}

.exp-table tbody th,
.rec-table tbody th {
  font-weight: var(--fw-semi);
  color: var(--text);
}

.exp-table td,
.rec-table td { color: var(--text-muted); }

.exp-table__period {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 관련 프로젝트 링크 묶음 — 본문 아래 줄로 내린다 */
.exp-table__projects {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-faint);
}
.exp-table__projects a { color: var(--text-muted); }
.exp-table__projects a:hover { color: var(--text); }

.exp-table tbody tr:last-child th,
.exp-table tbody tr:last-child td { border-block-end: 0; }

@media (min-width: 680px) {
  /* 가장 긴 소속("단국대학교 배리어프리 ICT기술 연구센터(ITRC)")이 한 줄에
     들어가는 폭. 32%(279px)에서는 두 줄로 접혔다. */
  .exp-table tbody th { inline-size: 39%; }
  /* 역할·기간은 내용 길이에 맞춰 최소로 — 남는 폭을 담당 업무에 준다 */
  .exp-table td:nth-of-type(1) { inline-size: 1%; white-space: nowrap; }
  .exp-table td:nth-of-type(2) { inline-size: 1%; }
}

@media (max-width: 679px) {
  .exp-table thead {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }

  .exp-table,
  .exp-table tbody,
  .exp-table tr,
  .exp-table th,
  .exp-table td { display: block; }

  .exp-table tr {
    padding: var(--sp-4);
    margin-block-end: var(--sp-4);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--r-sm);
  }

  .exp-table tbody th {
    padding: 0 0 var(--sp-3);
    font-size: var(--fs-body);
    border-block-end: var(--hairline) solid var(--border);
  }

  .exp-table td {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-2) 0 0;
    border-block-end: 0;
  }

  /* th(소속) 다음의 td 세 개 — 역할 / 기간 / 담당 업무 */
  .exp-table td:nth-of-type(1)::before { content: "역할"; }
  .exp-table td:nth-of-type(2)::before { content: "기간"; }
  .exp-table td:nth-of-type(3)::before { content: "담당 업무"; }

  .exp-table td::before {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-faint);
  }

  /* td 가 2열 그리드이므로 자식이 자동 배치된다. ::before 가 1열,
     본문 텍스트가 2열을 차지하고 나면 .exp-table__projects 는 다음 행의
     1열(3.75rem)로 떨어져 링크가 한 글자씩 세로로 쪼개진다.
     값과 같은 열에 세운다. */
  .exp-table__projects { grid-column: 2; }
}

/* ============================================================
   7. 수상 · 자격 · 학력
   ============================================================ */

.awards,
.certs,
.education {
  padding: 0;
  list-style: none;
}

.awards li,
.certs li,
.education li {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  margin-block-start: 0;
  border-block-end: var(--hairline) solid var(--border);
}

/* 넓은 화면에서는 제목과 메타를 한 줄에 놓는다 — 세로를 줄이고
   오른쪽 빈 공간도 함께 없앤다. */
@media (min-width: 720px) {
  .awards li,
  .certs li {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-1) var(--sp-5);
  }
  .education li {
    grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--sp-1) var(--sp-5);
  }
}
.awards li:last-child,
.certs li:last-child,
.education li:last-child { border-block-end: 0; }

.awards__title,
.certs__title,
.education__school {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text);
}

.awards__meta,
.certs__meta,
.education__period,
.education__detail {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-faint);
}

.education__period { font-variant-numeric: tabular-nums; }
.education__detail { color: var(--text-muted); }

/* ============================================================
   8. 도판 (.figure)
   ------------------------------------------------------------
   다크모드 도면 처리 — filter: invert 를 기본값에서 뺐다.

   images/ 의 SVG 9장을 전부 파싱해 보면 #1a1a1a·#666·#fff 같은
   순수 회색뿐이고 비회색 색상이 0개다. 그래서 현행
   filter: invert(0.93) hue-rotate(180deg) 의 결과물 자체는 멀쩡하다.

   문제는 결과가 아니라 선택자다. `img[src$=".svg"]` 는 "파일 확장자"를
   기준으로 삼아서, 앞으로 넣는 SVG가 컬러든 아니든 자동으로 반전
   대상이 된다. 사진 3장이 음화로 뒤집혔던 사건도 구조가 같았다 —
   대상을 명시하지 않고 넓게 잡은 선택자였다.

     .figure__img--diagram  ← 기본. 밝은 판(--paper) 위에 올린다.
                              filter 없음 → 컬러 SVG를 넣어도 안전.
     .figure__img--invert   ← 명시적으로 지정했을 때만 반전.
                              확장자·태그로 자동 적용하지 말 것.
   ============================================================ */

.figure { margin-block: var(--sp-5); }

/* 좁은 화면에서 도면을 가로 스크롤로 두었더니 "잘렸다"로 읽혔다.
   게다가 max-block-size 와 겹쳐 1020×600 도면이 934px까지 커져
   335px 칸을 599px 넘겼다. 스크롤을 걷고 폭에 맞춰 줄인다. */

/* 세로 상한. 이게 없으면 원본 비율대로 화면을 가득 채워 스크롤이 길어진다.
   구 style.css 도 .project-media img 에 max-height: 560px 을 걸어 뒀었다.
   width 를 100% 로 고정하지 않고 auto 로 둬야 높이를 줄일 때 가로도 같이
   줄어 여백이 생기지 않는다. */
.figure img {
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  max-block-size: var(--figure-max-h);
  margin-inline: auto;
  border-radius: var(--r-sm);
}

/* ---- 도판 등급 -------------------------------------------------
   종류마다 필요한 크기가 다르다. 선택자는 전부 `.figure img.…` (0,2,1) 로
   쓴다 — 클래스만 쓰면 (0,1,0)이라 바로 위 `.figure img` (0,1,1) 에 져서
   폭 제한이 통째로 무시된다(두 라운드 동안 사진이 100%로 그려진 원인).

     --arch     아키텍처 도면    폭 100% · 세로 넉넉히 (그룹 박스·계층이 있어 작으면 못 읽는다)
     --diagram  직접 그린 도판   폭 100% · 세로 560px
     --screen   화면 캡처        폭 72%  · 세로 480px
     --photo    실물 사진        폭 44%  · 세로 420px
   ---------------------------------------------------------------- */

.figure img.figure__img--arch {
  max-inline-size: 100%;
  max-block-size: min(88vh, 760px);
  padding: var(--sp-4);
  background: var(--paper);
  border: var(--hairline) solid var(--paper-edge);
}

.figure img.figure__img--diagram {
  max-inline-size: 100%;
  max-block-size: var(--figure-max-h);
  padding: var(--sp-3);
  background: var(--paper);
  border: var(--hairline) solid var(--paper-edge);
}

.figure img.figure__img--screen {
  max-inline-size: 72%;
  max-block-size: 480px;
  border: var(--hairline) solid var(--border-strong);
  background: var(--surface-2);
}

.figure img.figure__img--photo {
  max-inline-size: 40%;
  /* 세로로 긴 사진은 폭만 제한해서는 여전히 크다 — 높이도 함께 묶는다 */
  max-block-size: 250px;
  inline-size: auto;
  border: var(--hairline) solid var(--border-strong);
  background: var(--surface-2);
}

@media (max-width: 719px) {
  /* 좁은 화면에서는 등급 차이를 좁힌다 — 안 그러면 캡처·사진이 손톱만 해진다 */
  .figure img.figure__img--screen { max-inline-size: 100%; }
  .figure img.figure__img--photo  { max-inline-size: 78%; }
}

/* ---- 영상 임베드 — 구 style.css .video-embed 그대로.
   아키텍처 도면과 같은 급으로 크게 둔다. ---------------------------- */

.video-embed {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.figure--video { margin-block: var(--sp-6); }

/* 사진 여러 장은 세로로 쌓지 말고 나란히 —
   한 <figure> 안에 <img> 를 두세 장 넣으면 자동으로 배분된다. */
.figure:has(img + img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  align-items: start;
}
.figure:has(img + img) .figure__caption { grid-column: 1 / -1; }
.figure:has(img + img) img { max-inline-size: 100%; inline-size: 100%; }


/* 모노크롬 도면에 한해 옵트인하는 반전 */
.figure__img--invert {
  padding: var(--sp-3);
  background: var(--paper);
  border: var(--hairline) solid var(--paper-edge);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .figure__img--invert {
    background: transparent;
    border-color: transparent;
    filter: invert(0.92) hue-rotate(180deg);
  }
}
:root[data-theme="dark"] .figure__img--invert {
  background: transparent;
  border-color: transparent;
  filter: invert(0.92) hue-rotate(180deg);
}

/* 구 사이트 캡션은 0.8rem · 행간 1.55 였다 */
.figure__caption {
  margin-block-start: var(--sp-2);
  max-inline-size: var(--container-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

.figure__caption--standalone {
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--border-strong);
  font-size: var(--fs-sm);
}

/* 도면은 글자가 들어 있어 본문보다 넓어야 읽힌다 */
.figure--wide {
  inline-size: 100%;
  max-inline-size: none;
}

/* ============================================================
   9. 페이저
   마크업: <a class="pager__next"><span>다음</span>프로젝트명</a>
   방향 라벨이 내부 <span> 이므로 ::before 로 또 넣지 않는다.
   ============================================================ */

/* 큰 상자 두 개는 무게가 과하다. 구 사이트의 .pager 처럼 작은 텍스트 링크로. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-4);
  border-block-start: var(--hairline) solid var(--border);
}

.pager__prev,
.pager__next {
  display: inline-block;
  padding-block: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  max-inline-size: 22em;
}

.pager__prev > span,
.pager__next > span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.pager__next { text-align: end; margin-inline-start: auto; }

@media (hover: hover) {
  .pager__prev:hover,
  .pager__next:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.18em; }
}

/* ============================================================
   11. 본문 표 (.md-table) — 마크다운 표에서 변환된 것
   구 style.css 의 .flow-table 값을 그대로 옮겼다.
   .table-wrap 이 가로 스크롤을 받아 좁은 화면에서 문서가
   통째로 밀리는 것을 막는다(구 사이트에서는 이 래퍼가 없어
   320px에서 "원인과 대응" 표가 페이지를 넘치게 했다).
   ============================================================ */

.table-wrap {
  max-inline-size: var(--container-text);
  margin: 20px 0 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* 구 .flow-table 은 본문보다 한 단 작은 0.86rem 이었다. 표가 본문과 같은
   크기면 글 흐름 속에서 표로 안 읽힌다 — 그 차이가 구 사이트의 표 인상이었다. */
.md-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.md-table caption {
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block-end: 8px;
}

.md-table th {
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  padding: 0 10px 6px 0;
  border-block-end: var(--hairline) solid var(--border);
  white-space: nowrap;
}

.md-table td {
  padding: 9px 10px 9px 0;
  border-block-end: var(--hairline) solid var(--border);
  color: var(--text-muted);
  vertical-align: baseline;
}

.md-table td:first-child { color: var(--text); }

.md-table tbody tr:last-child td { border-block-end: 0; }

/* 긴 식별자가 든 칸이 칸을 넘기지 않게 — base.css 의 code 규칙과 같은 이유 */
.md-table code { overflow-wrap: anywhere; }


/* 짧은 영상(움짤 대체)도 도판과 같은 크기 규칙을 따른다 */
.figure video { display: block; max-inline-size: 100%; block-size: auto; border-radius: var(--r-sm); }
.figure video.figure__img--photo  { max-inline-size: 40%;  max-block-size: 250px; }
.figure video.figure__img--screen { max-inline-size: 72%;  max-block-size: 480px; }
@media (max-width: 719px) {
  .figure video.figure__img--photo  { max-inline-size: 78%; }
  .figure video.figure__img--screen { max-inline-size: 100%; }
}

/* 폰에서 긴 페이지를 손으로 되짚어 올라가지 않도록 — 푸터에 한 줄 */
.to-top {
  display: inline-block;
  padding: 10px 2px;      /* 손가락으로 누를 높이 */
  color: var(--text-muted);
  text-decoration: none;
}
.to-top:hover { color: var(--text); text-decoration: underline; }

/* ---- 폰에서 누를 것의 높이 -----------------------------------
   연락처·푸터 링크가 17~24px이라 손가락으로 겨냥하기 어려웠다.
   글자 크기는 그대로 두고 위아래 여백만 늘려 44px 가까이 만든다.
   줄 간격도 함께 벌려야 링크끼리 세로로 겹치지 않는다. -------------- */
/* 상세 페이지 링크(.detail-links)와 같은 방식으로 — 보이는 높이는 글줄에
   맞추고 터치 영역만 투명한 상자로 넓힌다. 줄 간격을 벌리지 않는다. */
.links a,
.site-footer a {
  position: relative;
  display: inline-block;
}

/* 푸터는 한 줄뿐이라 줄 간격을 벌려도 레이아웃이 흐트러지지 않는다 */
.site-footer p { line-height: 2.4; }
.links a::before,
.site-footer a::before {
  content: "";
  position: absolute;
  inset-inline: -4px;
  inset-block-start: 50%;
  block-size: var(--tap);
  transform: translateY(-50%);
}

/* ---- Skills — 구 사이트와 같은 그룹/항목 두 열 ------------------- */
/* 구 .info-row 는 라벨을 170px 로 고정하고 24px 을 띄웠다. max-content 로
   두면 라벨 길이에 따라 값 열이 움직여서, 구 사이트와 값이 시작하는 자리가
   20px 어긋난다. 두 열의 자리를 같게 맞춘다. */
.skills {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px 24px;
  margin: 0;
}
.skills dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text);
  white-space: nowrap;
}
.skills dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 폰에서는 두 열이 좁아 그룹명이 접힌다 — 위아래로 쌓는다 */
@media (max-width: 559px) {
  .skills { grid-template-columns: 1fr; gap: 2px 0; }
  .skills dt { margin-block-start: 14px; }
  .skills dt:first-child { margin-block-start: 0; }
}

/* ---- Education --------------------------------------------- */
.edu { margin: 0; padding: 0; list-style: none; }
.edu li {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 2px 20px;
  margin-block-start: 0;
  padding-block: 14px;
  border-block-start: var(--hairline) solid var(--border);
}
.edu li:first-child { border-block-start: 0; padding-block-start: 0; }
/* Skills 의 dt, Experience 의 소속 열과 같은 자리다 — 셋을 같은 단으로 맞춘다 */
.edu__org    { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.edu__period { font-size: var(--fs-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.edu__detail { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--text-muted); }
.edu__note   { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-faint); }

@media (max-width: 559px) {
  .edu li { grid-template-columns: 1fr; }
  .edu__period { order: -1; }
}

/* ---- Projects 아래 분야 제목 --------------------------------- */
.proj-section__title { font-size: var(--fs-body); }

/* ---- 수상 · 자격 표 — 날짜 · 이름 · 주관 --------------------- */
.rec-table { inline-size: 100%; border-collapse: collapse; }
.rec-table__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  inline-size: 1%;
}
/* 「75팀 중 6팀」처럼 수상에 딸린 조건은 이름 아래 한 단 낮춰 붙인다 */
.rec-table__note {
  display: block;
  margin-block-start: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-faint);
}

/* 폰에서는 세 열이 좁아 이름이 잘린다 — 경력 표와 같은 카드 모양으로 */
@media (max-width: 559px) {
  .rec-table, .rec-table tbody, .rec-table tr, .rec-table th, .rec-table td { display: block; }
  .rec-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .rec-table tr {
    padding: 14px 0;
    border-block-end: var(--hairline) solid var(--border);
  }
  .rec-table tr:last-child { border-block-end: 0; }
  .rec-table th, .rec-table td { padding: 0; border: 0; }
  .rec-table__date { margin-block-end: 4px; color: var(--text-faint); font-size: var(--fs-xs); }
  .rec-table tbody th { margin-block-end: 2px; }
}

/* 사진과 영상이 섞이면 :has(img + img) 가 안 맞는다 — 빌더가 붙이는 클래스로 잡는다 */
.figure--pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  align-items: start;
}
/* 비율이 제각각인 사진을 나란히 놓으면 윗변만 맞고 아랫변이 들쭉날쭉하다.
   파일을 자르지 않고 같은 비율로 보이게 잘라 넣는다. */
.figure.figure--pair > img,
.figure.figure--pair > video {
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: none;
  aspect-ratio: 4 / 3;
  block-size: auto;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.figure--pair .figure__caption { grid-column: 1 / -1; }