/* 홈 전용 규칙. 색·글꼴·모서리·전환 같은 토큰과 기본 스타일은 블로그 CSS(/assets/css/style.css)가 준다.
   여기서는 _sass/minima/custom-styles.scss 가 :root 에 내보낸 var(--…) 만 쓴다.
   홈에만 있는 것은 빈티지 사진과 손글씨 값(받침선 + 써지는 애니메이션) 둘이다 */

/* 손글씨 Reenie Beanie 를 직접 호스팅한다 (Google 판 18KB → 7KB). 카드 값(dd)에 쓰는
   영문 대소문자 · 공백 · @ 만 담았다. 숫자나 다른 기호는 대체 글꼴(cursive)로 보인다.
   글자 범위는 tools/build_home.py 의 REENIE_CHARS 와 짝이다.
   block: 대체 cursive 는 크기가 전혀 달라 줄이 밀리므로, 폰트가 올 때까지(최대 3초) 비워 둔다.
   dd 는 어차피 써지는 애니메이션으로 나타나 잠깐 빈 칸이 어색하지 않다 */
@font-face {
  font-family: "Reenie Beanie";
  src: url("reenie-beanie.woff2") format("woff2");
  font-display: block;
}

:root {
  /* 프로필 사진 얼굴 크롭. 지금 사진은 크롭·빈티지 톤을 이미지에 구워 넣어 1 이다.
     크롭 안 한 사진으로 바꾸면 이 두 값만 조정한다 (이전 원본 기준 2 / 50% 32%) */
  --avatar-zoom: 1; /* 확대 배율 (1 = 원본 전체) */
  --avatar-focus: 50% 50%; /* 사진 안 얼굴 위치 (가로 세로) */
  /* 섹션 구분 점선. dashed 는 간격을 못 정해 border-image 로 그린다 (선 3px + 빈칸 3px, 1px dashed 와 같은 촘촘함) */
  --divider-dash: repeating-linear-gradient(to right, var(--color-border) 0 3px, transparent 3px 6px) 1;
}

/* 홈만 Lato (블로그는 본문·제목 모두 시스템 글꼴). 400 · 400 italic · 700 은 _template.html 이 로드한다.
   제목은 블로그 전역 규칙(.page-heading 등)이 글꼴을 다시 지정하므로 더 높은 명시도로 덮는다 */
body,
.page-content :is(h1, h2, h3) {
  font-family: Lato, sans-serif;
}

/* 홈만 따뜻한 흰색 배경. 회색(박스 배경·선)도 같은 톤의 홈 값으로 바꿔, 아래 규칙은 그대로 var(--color-bg-soft) 등을 쓴다 */
:root {
  --color-bg-soft: var(--color-bg-soft-home);
  --color-border: var(--color-border-home);
}

body {
  background-color: var(--color-bg-home);
}

/* 블로그 CSS 가 Sass 값으로 컴파일해 위 변수를 따라오지 않는 선: 푸터 위 선, 맨 위로 버튼 */
.site-footer {
  border-top-color: var(--color-border);
}

/* 맨 위로 버튼도 블로그처럼 배경색을 반투명(80%)으로 깐다 */
.back-to-top {
  border-color: var(--color-border);
  background-color: color-mix(in srgb, var(--color-bg-home) 80%, transparent);
}

/* 맨 위로 버튼(#top)은 CSS 로 부드럽게 올라간다 */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.dim {
  color: var(--color-muted);
}

/* _data.yaml 안에서 텍스트에 강조색을 줄 때 (손글씨 값과 같은 색) */
.accent {
  color: var(--color-link);
}

/* _data.yaml 안에서 제목 옆에 붙이는 로고 (글자 높이에 맞춰 비례) */
.logo {
  height: 1em;
  max-height: 14px; /* 글자보다 작게 */
  width: auto;
  /* viewBox 없는 SVG 는 width:auto 가 안 먹어 300px 로 튄다 — 안전장치 */
  max-width: 7em;
  object-fit: contain;
  vertical-align: -0.1em;
  border-radius: 3px;
}

/* 본문 링크: 블로그 글 본문(.post-content a)과 같다. 주변 글자색 + 옅은 밑줄, hover 시 링크색 */
.page-content a,
.page-content a:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.page-content a:hover {
  color: var(--color-link);
  text-decoration-color: currentColor;
}

/* ── Page header: 이름 + 프로필 카드 ── */

/* 블로그 상단 헤더(3rem)가 없으므로 그만큼 내려, 이름이 블로그 글 제목과 같은 높이에서 시작하게 한다.
   이름 → 카드는 minima h1 기본(15px)보다 넓게 띄워 큰 사진과 붙어 보이지 않게 한다 */
.page-heading {
  margin: calc(2rem - 2px) 0 1.5rem; /* 위 점선(2px) + padding 1rem 을 더해도 이름 높이는 그대로 3rem */
  padding-top: 1rem;
  border-top: 2px solid;
  border-image: var(--divider-dash);
}

/* 큰 Lato Bold 는 기본 자간이 헐거워 보인다: 이름과 섹션 제목(Experience …)만 좁힌다 */
.page-heading,
.data-section h2 {
  letter-spacing: -0.02em;
}

.page-head {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid;
  border-image: var(--divider-dash);
}

/* 사진이 없으면(onerror) 본문이 전체 폭을 쓰도록 grid 가 아닌 flex */
.id-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* 사진 틀: 크롭만 하고, 안쪽 사진은 CSS 변수로 얼굴 쪽을 확대한다 */
.id-photo {
  flex-shrink: 0;
  width: 8.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* 빈티지 톤은 이미지에 구워져 있어 filter 는 쓰지 않는다 */
.id-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--avatar-zoom));
  transform-origin: var(--avatar-focus);
}

/* 사진 높이만큼 늘려 링크 줄을 사진 아래 끝에 맞춘다 (세로로 쌓이는 모바일에선 gap 만 남는다) */
.id-body {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.id-fields {
  margin: 0;
}

/* 서식 필드: 키 + 손글씨 값, 줄마다 받침선. 아래 끝 정렬이라 키는 선 위에 살짝 뜨고 손글씨는 선에 걸쳐 앉는다 */
.id-fields div {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.id-fields dt {
  flex: 0 0 6.5rem;
  padding-bottom: 0.25rem;
  font-size: var(--font-size-sm);
  line-height: 1;
  color: var(--color-muted);
}

/* Reenie Beanie 는 x-height 가 작아 이 크기여야 본문 1rem 과 눈높이가 맞는다.
   음수 margin 으로 글씨를 받침선까지 내린다. 첫 로드 때 줄마다 차례로 써진다 (reduced motion 이면 꺼짐, 아래 참고).
   fill-mode 는 backwards: 끝난 뒤에도 inset(0) 이 남으면 박스 밖으로 삐져나온 획(T 가로획, J 꼬리)이 잘린다 */
.id-fields dd {
  min-width: 0;
  margin: 0 0 -0.2em;
  font-family: "Reenie Beanie", cursive;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--color-link);
  animation: write 0.6s ease-out 0.3s backwards;
}

.id-fields div:nth-child(2) dd {
  animation-delay: 0.8s;
}

.id-fields div:nth-child(3) dd {
  animation-delay: 1.3s;
}

@keyframes write {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* 위 animation 선언보다 뒤에 있어야 이긴다 (같은 선택자) */
@media (prefers-reduced-motion: reduce) {
  .id-fields dd {
    animation: none;
  }
}

/* 이메일 주소가 길어도 좁은 화면에서 넘치지 않게 줄을 바꾼다. hover 색은 위 .page-content a:hover 가 준다 */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: auto 0 0;
  font-size: var(--font-size-sm);
}

.page-links a,
.page-links a:visited {
  color: var(--color-muted);
}

/* 손가락으로 누르기 쉽게: 좁은 화면이나 터치 기기에선 글자를 키우고 누르는 영역을 높이 44px 로 넓힌다.
   가로 padding 은 음수 margin 으로 되돌려 글자 위치(열 정렬)는 그대로 두고, 이웃 링크와 영역이 맞닿게만 한다 */
@media (max-width: 767px), (pointer: coarse) {
  .page-links {
    font-size: 1rem;
    column-gap: 1.5rem;
  }

  .page-links a {
    padding: 0.625rem 0.75rem;
    margin: 0 -0.75rem;
  }
}

/* ── News: 블로그 callout 과 같은 모양 (배경만) ── */

.callout {
  margin-top: 1.5rem; /* bio 마지막 문단 여백과 겹쳐(collapse) 실제 간격 = 1.5rem */
  padding: 1rem;
  border-radius: var(--radius);
  background-color: var(--color-bg-soft);
}

.news {
  display: grid;
  grid-template-columns: auto 1fr; /* 날짜 열은 내용만큼 */
  gap: 0.25rem 1.25rem;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.news dt {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Data sections (Experience, Awards, …) ── */

/* 섹션마다 블로그 구분선(hr)과 같은 색의 2px 점선으로 시작한다. h2 글꼴·굵기는 블로그 전역 제목 규칙 */
.data-section {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid;
  border-image: var(--divider-dash);
}

/* 간격으로 묶는다: 항목 사이 1.5rem > 제목→첫 항목 1.25rem > 항목 안 제목→설명 0.25rem */
.data-section h2 {
  margin-bottom: 0.5rem;
}

/* 날짜는 baseline 정렬로 제목 첫 줄에 맞는다 (로고는 위 정렬) */
.entry {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  line-height: 1.5;
}

/* 두 줄 높이보다 살짝 작게 — 위 정렬이라 아래에 여백이 남는다 */
.entry-logo {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  align-self: flex-start;
  margin-top: 0.25rem;
  border-radius: var(--radius);
}

.entry-body {
  flex: 1;
}

.entry-title {
  font-weight: 600;
  line-height: 1.4;
}

.entry-desc,
.entry-date {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

.entry-desc {
  margin-top: 0.25rem;
}

.entry-desc strong {
  color: var(--color-text);
  font-weight: 400;
}

.entry-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.group-label {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

/* 첫 소제목은 h2 바로 아래: 다른 섹션의 제목→첫 항목(1.25rem)과 같은 간격.
   h2 의 margin-bottom 과 겹쳐(collapse) 큰 쪽만 남으므로 더하지 않고 1.25rem 을 그대로 준다 */
.data-section .group-label:first-of-type {
  margin-top: 1.25rem;
}

.section-list {
  margin: 0;
  padding-left: 1.25rem;
}

.section-list li {
  padding: 0.25rem 0;
  line-height: 1.6;
}

/* ── Footer: 위 실선·여백은 minima .site-footer. 아이콘 다음 © 를 한 줄로 ── */

.site-footer .wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* 블로그 푸터(.social-media-list)와 같은 아이콘 줄: 테두리 없이 아이콘만, 16px 간격 */
.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a,
.footer-links a:visited {
  display: flex;
  padding: 0.25rem 0;
  color: inherit;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-link);
}

.footer-links svg {
  width: 1.125rem; /* 블로그 아이콘 18.75px 에 가깝게 */
  height: 1.125rem;
  fill: currentColor;
}

/* 포커스 링은 누르는 영역(모바일 44px) 대신 아이콘을 감싼다: 화면 가장자리에서 잘리지 않고, 어느 아이콘인지 분명하다 */
.footer-links a:focus-visible {
  outline: none;
}

.footer-links a:focus-visible svg {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* 손가락으로 누르기 쉽게: 프로필 링크(.page-links)와 같은 조건에서 누르는 영역을 44×44px 로 넓힌다.
   음수 margin 으로 아이콘 위치는 그대로 두고, gap 을 가로 padding 두 배로 벌려 이웃 영역이 맞닿게만 한다 */
@media (max-width: 767px), (pointer: coarse) {
  .footer-links {
    gap: 1.625rem;
  }

  .footer-links a {
    padding: 0.8125rem; /* (44px - 아이콘 18px) / 2 */
    margin: -0.5625rem -0.8125rem; /* 세로는 평소 padding 0.25rem 만큼만 남긴다 */
  }
}

/* ── Responsive ── */

@media (max-width: 767px) {
  /* 사진 → 필드 순으로 쌓는다 */
  .id-card {
    flex-direction: column;
    gap: 1rem;
  }

  .id-photo {
    width: min(9rem, 100%);
  }

  /* 손글씨 값이 한 줄에 들어가도록 키를 선 위로 올린다 */
  .id-fields div {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .id-fields dt {
    flex-basis: auto; /* 세로 방향에선 basis 가 높이가 되므로 되돌린다 */
  }

  /* 로고와 본문은 한 줄에 두고 날짜만 아래로 */
  .entry {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .entry-date {
    flex-basis: 100%;
  }
}