/* ============================================================
   layout.css — 헤더 · 컨테이너 · 섹션 · 히어로 · 푸터
   ============================================================ */

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   헤더
   ============================================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--bg);
  border-block-end: var(--hairline) solid var(--border);
}

/* 배경 블러는 지원될 때만. 긴 문서에서 매 스크롤 프레임마다
   합성 레이어를 다시 칠하므로 저사양 기기에서 끊긴다.
   불투명 배경을 기본값으로 두고 블러는 얹기만 한다. */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header {
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--header-h);
}

.site-header__home {
  flex: none;
  color: var(--text);
  font-size: var(--fs-body);   /* 구 .nav-name 0.95rem */
  font-weight: var(--fw-semi);
  text-decoration: none;
  /* 44px 터치 타깃 — 보이는 글자는 그대로 두고 영역만 세로로 채운다 */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline-end: var(--sp-2);
}
.site-header__home:hover { color: var(--text); }

/* ---- 분야 내비 ------------------------------------------------ */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-inline-size: 0;
  margin-inline-end: auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a[aria-current] { color: var(--text); font-weight: var(--fw-semi); }

/* 좁은 화면에서 내비를 숨겼더니 분야로 갈 방법이 아예 없어졌다(햄버거도 없다).
   가로 스크롤로 두었더니 네 번째 분야가 잘린 채 "더 있다"는 표시도 약했다.
   폰에서는 분야 이름을 짧게 줄여 넷이 모두 한 줄에 들어오게 한다 —
   스크롤해서 찾게 하는 것보다 처음부터 다 보이는 편이 낫다. */
.nav-short { display: none; }

@media (max-width: 719px) {
  .site-nav a { padding-inline: var(--sp-2); font-size: var(--fs-xs); }
  .nav-full  { display: none; }
  .nav-short { display: inline; }
}

/* 이름을 되살리는 지점을 400px로 잡았더니 401~464px에서 자리가 모자라
   테마 버튼이 마지막 분야 링크를 덮었다 — 414(iPhone 11·XR·Pixel Pro)와
   430(Pro Max)에서 Music을 누르면 다크 모드가 켜졌다.
   이름까지 모두 들어가는 폭은 실측 465px이라 그 값으로 끊는다. */
@media (max-width: 464px) {
  .site-header__home { display: none; }
}

/* 320px(SE 1세대)에서는 짧은 이름 넷도 테마 버튼에 밀린다 — 간격과 글자를
   한 단 더 줄여 넷이 모두 제 자리에서 눌리게 한다. */
@media (max-width: 360px) {
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 5px; font-size: 0.72rem; }  /* 320px 전용 */
  .theme-toggle { padding-inline: var(--sp-2); }
}

/* ---- 테마 토글 ------------------------------------------------
   theme.js 가 <html data-theme> 과 버튼의 aria-pressed 를 갱신한다.
   버튼 글자는 "누르면 무엇이 되는지"를 말한다:
     라이트일 때 → "Dark"   (.label-light)
     다크일 때   → "Light"  (.label-dark)
   ---------------------------------------------------------------- */
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap);
  min-inline-size: 4.25rem;
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: transparent;
  border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }

/* ---- 인쇄용 영상 주소 --------------------------------------------
   .video-url 은 종이에만 나오는 줄이다 — 인쇄에서 YouTube iframe 이
   흰 빈 칸이 되어 주소가 사라지므로, 실제 링크로 심어 두고 print.css
   에서만 보이게 한다. 실제 <a> 라서 PDF 에서 선택·복사·클릭이 된다.
   ---------------------------------------------------------------- */
.video-url { display: none; }

.theme-toggle .label-dark { display: none; }
.theme-toggle .label-light { display: inline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .label-light { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .label-dark { display: inline; }
}
:root[data-theme="dark"] .theme-toggle .label-light { display: none; }
:root[data-theme="dark"] .theme-toggle .label-dark { display: inline; }
/* 시스템이 다크여도 라이트를 직접 고르면 다시 "Dark" 로 */
:root[data-theme="light"] .theme-toggle .label-light { display: inline; }
:root[data-theme="light"] .theme-toggle .label-dark { display: none; }

/* ============================================================
   본문 · 섹션
   ============================================================ */

main.container {
  padding-block: clamp(48px, 11vw, 96px);   /* 구 .container 상하 */
}

/* 구 사이트는 전역 선택자로 걸었다. .about 처럼 클래스 없는 section·h2 가
   있으므로 클래스로 좁히면 빠진다 — 실제로 About 제목의 아래 여백과
   섹션 간격이 그렇게 빠져 있었다. */
section { margin-block-end: var(--section-gap); }

h2 {
  margin-block-end: 28px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);   /* 구 사이트 h2 는 700 */
  color: var(--text);
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
}

.section__title {
  letter-spacing: normal;
  text-transform: none;
  border: 0;
  padding: 0;
}

/* 구 .about / .skills / .projects 가 전부 max-width: 760px 였다.
   다만 경력 표는 네 열이라 760px에서 칸마다 줄이 쪼개진다 — 표만 예외로
   컨테이너 폭을 다 쓰게 둔다. */
/* 폭을 두 가지로 두면(표 872px / 나머지 760px) 오른쪽 끝이 112px 어긋나
   계단처럼 보인다. 괘선을 긋는 요소는 전부 컨테이너 폭으로 통일하고,
   줄길이 제한은 읽는 문단에만 건다. */

.about p,
.section > p,
.section > ul:not([class]),
.section > ol:not([class]) {
  max-inline-size: var(--measure-prose);
}

/* ============================================================
   프로필 — 구 style.css 의 .profile 블록을 값 그대로 옮겼다.
   사진 크기(clamp 140~280px)와 18% 라운드가 사용자가 말한 "이전 사진 크기"다.
   ============================================================ */

.profile {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(64px, 10vw, 120px);
}

.profile-img {
  width: clamp(140px, 30vw, 280px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 18%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}

.profile-info { min-width: 0; }

.name {
  font-size: var(--fs-display);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: 16px;
  text-wrap: balance;
}

.roles p {
  font-size: var(--fs-body);
  margin-bottom: 6px;
}

.links {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.links a {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.resume { margin-top: 28px; }

.resume-btn {
  display: inline-block;
  padding: 10px 22px;
  border: var(--hairline) solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .resume-btn:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }
}

.resume-btn:active { transform: scale(0.97); }

/* ===== About =====
   구 사이트의 .about p 는 행간이 1.6 이었다(본문 기본 1.65 보다 한 단 좁다).
   리드 문장도 이 규칙에 덮여 1.6 으로 나왔다 — 선택자가 더 구체적이라서다. */
.about p {
  font-size: var(--fs-body);
  margin-bottom: 8px;
}

.about-lead {
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: 16px;
  max-inline-size: none;
}

.about p + p { margin-top: 12px; }

@media (max-width: 700px) {
  .profile { flex-direction: column; }
  .profile-img { width: clamp(140px, 45vw, 200px); }
}

/* ============================================================
   푸터
   ============================================================ */

.site-footer {
  margin-block-start: auto;
  border-block-start: var(--hairline) solid var(--border);
  padding-block: var(--sp-5);
  color: var(--text-faint);
  font-size: var(--fs-sm);
}
.site-footer p { overflow-wrap: anywhere; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }