/* ============================================================
   base.css — 리셋 · 타이포 · 링크 · 포커스
   tokens.css 다음에 읽는다.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 스티키 헤더에 제목이 가리지 않게. 앵커 이동 전부에 적용된다. */
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-4));
}

/* 내용이 짧은 페이지(404)에서 푸터가 화면 한가운데 뜨지 않게 */
body {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 1rem;              /* 구 body 16px — 본문 문단은 따로 0.95rem */
  line-height: var(--lh-body);
  /* 한글은 어절 단위로 끊어야 읽힌다. 영문 토큰만 따로 쪼갠다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* -webkit-font-smoothing: antialiased 를 넣지 않는다.
     macOS 에서 이 한 줄이 서브픽셀 안티에일리어싱을 끄고 회색조로 바꾼다 —
     글자가 얇아지고 색이 옅어져서, 같은 Pretendard 를 같은 크기로 그려도
     다른 글꼴처럼 보인다. 구 사이트에는 없던 선언이다.
     구 사이트와 픽셀 대조: 이 줄이 있을 때 About 문단의 14.68%가 어긋났고,
     빼면 0%가 된다(한 줄이 1px 어긋나는 것은 절 위치의 소수점 반올림).
     text-rendering: optimizeLegibility 도 구 사이트에 없어 같이 뺀다. */
}

/* ---- 제목 ----------------------------------------------------
   구 사이트는 제목에 자간을 손대지 않았고 행간도 본문과 같은 1.65였다.
   재설계하며 1.25로 조이고 자간을 -0.015em 좁혔는데, 같은 Pretendard인데도
   글자가 다르게 보이는 원인이 이것이었다. 구 쪽으로 되돌린다.

   굵기도 마찬가지다. 구 사이트는 제목에 font-weight 를 거의 적지 않아
   브라우저 기본값 700 으로 나왔다(h2 25.6px/700 · h4 17.6px/700).
   600 으로 내려 잡았던 것을 700 으로 되돌리고, 구 사이트가 명시적으로
   600 을 준 셋만 각자 자리에서 다시 600 으로 내린다
   — .name · .detail-title · 대문자 분야 제목. */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-wrap: balance;
}

/* body 가 16px 이므로 본문 문단은 구 사이트처럼 한 단 낮춰 잡는다.
   표는 셀이 아니라 <table> 에 걸어야 한다 — td·th 에 직접 걸면 표가
   자기 크기를 정해도(.md-table 0.86rem 등) 셀 쪽 선택자가 이겨서
   그대로 15.2px 로 그려진다. 실제로 그렇게 되어 있었다. */
p, li, dd, dt, figcaption { font-size: var(--fs-body); }
table { font-size: var(--fs-body); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ---- 본문 ---------------------------------------------------- */
/* 마지막 줄에 한두 글자만 남는 것을 브라우저가 피하게 한다.
   경력 표의 링크 줄이 "·" 하나만 남기고 넘어가던 것이 이 경우다. */
p, li, td, th, dd, figcaption, .impact-item__label, .ts-item__val,
.exp-table__projects, .proj-card__oneline, .proj-row__oneline {
  text-wrap: pretty;
}

/* 문단 사이는 줄 사이보다 확실히 넓어야 덩어리가 보인다.
   12px이면 행간(24.3px)의 절반이라 문단 구분이 흐려진다 — 약 0.75줄로 둔다. */
p + p { margin-block-start: 1.15em; }

/* 문단 다음에 오는 목록도 같이 띄운다. * { margin: 0 } 뒤로 ul 에 여백이
   하나도 없어서 설명과 항목이 붙어 한 덩어리로 읽혔다 — 문단보다 한 단 더
   벌린다. 목록은 문단이 아니라 다른 덩어리다. */
p + ul, p + ol { margin-block-start: var(--sp-4); }
/* 목록이 끝나고 다시 문단이 시작될 때도 같은 만큼 띄운다 — 여기가 0 이라
   마지막 항목과 다음 문단이 붙어 있었다. */
ul + p, ol + p { margin-block-start: var(--sp-4); }

strong, b { font-weight: var(--fw-semi); color: var(--text); }

ul, ol { padding-inline-start: 1.2em; }
li + li { margin-block-start: var(--sp-1); }

/* ---- 링크 ----------------------------------------------------
   링크를 색으로 표시하지 않는다. 텍스트 중심 문서에서 본문 안의
   파란 글자는 유일한 유채색이 되어 그것만 튄다(실측: 사이트 전체에서
   유채색 글자가 이 링크 하나뿐이었다).
   구분은 밑줄로 하고, 호버는 색이 아니라 굵기와 명도로 반응한다.
   악센트색은 포커스 링에만 남긴다 — 키보드 사용자에게만, 잠깐 보인다. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--text);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* ---- 코드 ----------------------------------------------------
   현행 index.html 977행의 "원인과 대응" 표가 320px에서 약 308px을
   요구해 가로 스크롤을 만들던 원인이 긴 식별자였다
   (①DontDestroyOnLoad는 159px, SetParent(null)로 129px).
   body 의 keep-all 이 영문 토큰에도 걸려 안 쪼개지던 것이라,
   코드에는 anywhere 를 따로 준다. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

code {
  padding: 0.1em 0.35em;
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: 4px;
}

pre {
  overflow-x: auto;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}
pre code { padding: 0; background: none; border: 0; }

/* ---- 미디어 -------------------------------------------------- */
img, svg, video, canvas, iframe {
  display: block;
  max-inline-size: 100%;
}
img, video { block-size: auto; }

/* ---- 표 ------------------------------------------------------ */
table { border-collapse: collapse; inline-size: 100%; }
th { text-align: start; }

/* ---- 폼 ------------------------------------------------------ */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

/* ============================================================
   포커스
   ------------------------------------------------------------
   링 색은 어떤 표면 위에서도 대비 5.4:1 이상이다(측정: 라이트
   5.41~5.85, 다크 7.44~8.58). 분야색 배경 위에서도 뜨도록 바깥에
   표면색 한 겹을 더 둘러 두 겹으로 그린다.
   ============================================================ */
:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 3px;
}

/* 마우스 클릭에는 링을 그리지 않지만, :focus-visible 을 모르는
   구형 브라우저에는 기본 outline 이 남아야 한다. */
:focus:not(:focus-visible) { outline: none; }

/* 스크립트가 포커스를 옮기는 대상(섹션 등)에는 링을 그리지 않는다 */
[tabindex="-1"]:focus { outline: none; }

/* ---- 건너뛰기 링크 -------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  min-block-size: var(--tap);
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--text);
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  font-weight: var(--fw-semi);
  /* 포커스 전에는 화면 밖. display:none 이면 탭으로 닿지 못한다. */
  transform: translateY(calc(-100% - var(--sp-4)));
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- 스크린리더 전용 ------------------------------------------ */
.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 선택 영역 ------------------------------------------------ */
/* 드래그 선택도 색 대신 명도 반전으로 */
::selection { background: var(--text); color: var(--bg); }

/* ============================================================
   모션 축소
   tokens.css 가 --dur 을 0.01ms 로 깎으므로 transition 은 이미
   멈춘다. 여기서는 그 토큰을 쓰지 않는 것들(스크롤, 애니메이션,
   GIF를 제외한 자동 재생)을 마저 끈다.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}