/* ══════════════════════════════════════════════════════════════════
   pages.css — 페이지별 레이아웃
   1. Home        2. Resume      3. Portfolio
   4. Case detail 5. Contact     6. 좁은 화면
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. Home ─────────────────────────────────────────────────────── */
.hero {
  padding-top: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.hero h1 { margin: 14px 0 22px; }
.hero .lead { max-width: 26ch; }
.hero .body-text { margin: 0 0 var(--space-6); max-width: 52ch; }
.hero-figure { margin-top: 6px; }
.hero-figure .hatch { aspect-ratio: 4 / 5; }

/* 이력 줄 — 기간 · 이름 · 한 줄 설명 · 화살표 */
.entry-list { border-top: 0; }
.entry {
  display: grid;
  grid-template-columns: 170px minmax(0, 220px) minmax(0, 1fr) 24px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.entry:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: inherit; }
.entry-name { font: 600 21px/1.2 var(--font-heading); }
.entry-desc { font-size: 14px; color: var(--color-neutral-800); }
.entry-arrow { color: var(--color-accent); font-size: 15px; }

/* 학력·대외활동 줄 — 링크가 아니라 화살표 없이 기간 + 기관·설명 두 칸입니다. */
.entry--edu { grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; }
.entry--edu:hover { background: none; }
.entry--edu .entry-name { display: block; font-size: 18px; }
.entry--edu .entry-desc { margin: 6px 0 0; }

/* 기술 격자 */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 40px;
}
.skill-grid h6 { margin: 0 0 12px; }

/* 대표 작업 — 왼쪽 개요, 오른쪽 성과 */
.work {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
}
.work:hover { color: inherit; background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.work h3 { margin: 0 0 6px; }
.work-sub { font-size: 14px; color: var(--color-neutral-800); margin: 0 0 12px; }
.work .tag-row { margin-top: 14px; }
.work-body p { font-size: 15px; line-height: 1.7; margin: 0 0 var(--space-4); text-wrap: pretty; }
.work-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.work-result .note { margin: 0; }
.work-more { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--color-accent); }

/* ─── 2. Resume ───────────────────────────────────────────────────── */
/* 문서형 — 좁은 한 단에 밀도를 높입니다. */
.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 70px var(--page-pad) 0;
}
.doc h1 { font-size: clamp(34px, 4.4vw, 46px); margin: 0 0 10px; }
.doc-role { font-size: 16px; margin: 0 0 22px; color: var(--color-neutral-800); }
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-text);
  font: 400 12px var(--font-mono);
  color: var(--color-neutral-700);
}
.doc h6 { margin: 44px 0 14px; }
.doc h6[id] { scroll-margin-top: 88px; }
.doc h6.tight { margin-bottom: 6px; }
.doc-lead { font-size: 15px; line-height: 1.8; margin: 0; text-wrap: pretty; }

.doc-list { border-top: 1px solid var(--color-text); }
.doc-item { padding: 26px 0; border-bottom: 1px solid var(--color-divider); scroll-margin-top: 88px; }
.doc-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.doc-item-head h4 { margin: 0; }
.doc-item-head .mono { flex: none; }
.doc-item > p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-neutral-800);
  margin: 10px 0 12px;
}
.doc-stack {
  font: 400 11.5px/1.7 var(--font-mono);
  color: var(--color-neutral-700);
  margin-bottom: 14px;
}
.doc-item ul { font-size: 13.5px; line-height: 1.85; }
.doc-item ul li + li { margin-top: 2px; }

.doc-footer { display: flex; justify-content: center; padding: 56px 0 0; }
.doc .table td:first-child { width: 150px; }
.doc .table--edu td:first-child {
  width: 180px;
  font: 400 11.5px var(--font-mono);
  color: var(--color-neutral-600);
}

/* ─── 3. Portfolio ────────────────────────────────────────────────── */
.page-head { padding-top: 76px; max-width: 1000px; }
.page-head h1 { font-size: clamp(36px, 5vw, 52px); margin: 0 0 16px; }
.page-head p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  max-width: 54ch;
  color: var(--color-neutral-800);
  text-wrap: pretty;
}

.filter-bar {
  padding-top: 36px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.project-list {
  padding-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.project-card { padding: 32px 34px; }
.project-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.project-card h3 { margin: 0; font-size: clamp(24px, 2.8vw, 29px); }
.project-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.project-card .project-sub { font-size: 15px; margin: 8px 0 14px; }
.project-card .tag-row { margin-top: 16px; }
.project-card .btn { margin-top: 22px; }
.project-highlights h6 { margin: 0 0 12px; }
.project-highlights ul { font-size: 14px; line-height: 1.9; }

.empty-state {
  grid-column: 1 / -1;
  padding: 40px 0;
  font-size: 14px;
  color: var(--color-neutral-700);
}

/* GitHub API로 채우는 공개 저장소 그리드 */
.github-projects { padding-top: var(--section-gap); }
.github-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  margin: 12px 0 18px;
}
.github-state { margin: 0; font-size: 12px; color: var(--color-neutral-600); }
.github-state[data-state="error"] { color: #b65d4c; }
[data-theme="dark"] .github-state[data-state="error"] { color: #ee9b8d; }
.github-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.github-card {
  min-width: 0;
  padding: 24px;
  display: grid;
  grid-template-rows: auto minmax(3.2em, 1fr) auto;
  gap: 14px;
}
.github-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.github-card h3 { min-width: 0; font-size: 21px; overflow-wrap: anywhere; }
.github-card-description { margin: 0; color: var(--color-neutral-800); font-size: 13.5px; line-height: 1.6; }
.github-card-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; }

/* ─── 4. Case detail ──────────────────────────────────────────────── */
.back-link { padding-top: 26px; }
.back-link a {
  font: 400 11.5px var(--font-mono);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.case-head {
  padding-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}
.case-head h1 { font-size: clamp(36px, 5.4vw, 56px); margin: 0 0 12px; }
.case-head .lead { font-size: clamp(17px, 2vw, 20px); max-width: 34ch; }
.case-head .table td:first-child { width: 74px; color: var(--color-neutral-600); }

.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 48px;
}
.overview p { font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.overview-aside { padding: 22px 24px; }
.overview-aside h6 { margin: 0 0 14px; }
.overview-aside ol { font-size: 13.5px; line-height: 1.95; padding-left: 18px; }

.case { padding: 34px 0; border-bottom: 1px solid var(--color-divider); }
.case:last-of-type { border-bottom: 0; }
.case-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.case-no {
  font: 400 11.5px var(--font-mono);
  color: var(--color-accent);
  letter-spacing: 0.14em;
}
.case-title h3 { margin: 0; font-size: clamp(21px, 2.4vw, 25px); }

/* 문제 → 원인 → 해결 → 결과. 왼쪽에 모노 라벨을 세웁니다. */
.case-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px 22px;
  font-size: 14.5px;
  line-height: 1.8;
}
.case-label {
  font: 400 10.5px/2.1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-neutral-600);
}
.case-grid p { margin: 0; text-wrap: pretty; }
.case-grid .stat { padding: 18px 20px; }
.case-grid .stat-value { font-size: clamp(24px, 2.5vw, 33px); }
.case-grid .stat-label { margin-top: 6px; }
.case-grid .note { font-size: 13px; color: var(--color-neutral-700); margin-top: 12px; }

/* 구현 상세 — 접었다 펴는 서랍 */
.case-more { margin-top: 22px; border-top: 1px solid var(--color-divider); }
.case-more-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 14px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 400 13px/1.5 var(--font-body);
  color: var(--color-neutral-700);
}
.case-more-toggle:hover { color: var(--color-text); }
.case-more-mark {
  flex: none;
  font: 400 11px var(--font-mono);
  color: var(--color-accent);
}
.case-more-panel {
  padding: 16px 0 4px;
  font-size: 13.5px;
  line-height: 1.85;
}
.case-more-panel ul { padding-left: 16px; color: var(--color-neutral-800); }
.case-more-panel .note { margin-top: 12px; }

.case-nav {
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.case-nav p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

/* ─── 5. Contact ──────────────────────────────────────────────────── */
.contact {
  padding-top: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  max-width: 1050px;
}
.contact h1 { font-size: clamp(36px, 5vw, 52px); margin: 0 0 18px; }
.contact-intro {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 34px;
  max-width: 40ch;
  text-wrap: pretty;
}
.contact .table td:first-child { width: 88px; color: var(--color-neutral-600); }
.contact .btn { margin-top: 26px; }
.contact-form {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form .btn { margin-top: 0; }

/* ─── 6. 좁은 화면 ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero,
  .case-head,
  .overview,
  .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-figure { max-width: 380px; }
  .hero .lead, .hero .body-text { max-width: none; }
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .project-list { grid-template-columns: minmax(0, 1fr); }
  .github-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .entry { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; }
  .entry .mono { grid-column: 1; }
  .entry-name { grid-column: 1; }
  .entry-desc { grid-column: 1; }
  .entry-arrow { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
  .entry--edu { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .hero { padding-top: 44px; }
  /* 시안 1f(375px)를 따라 사진은 3:2, 버튼은 폭을 꽉 채워 세로로 쌓습니다. */
  .hero-figure .hatch { aspect-ratio: 3 / 2; }
  .hatch-ratio { display: none; }   /* 위에서 비율이 바뀌므로 표기를 숨깁니다 */
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; }
  .doc { padding-top: 44px; }
  .page-head, .contact { padding-top: 48px; }
  .skill-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .project-card { padding: 26px 22px; }
  .github-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form { padding: 24px 22px; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
  .case-label { line-height: 1.6; margin-top: 14px; }
  .case-grid > .case-label:first-child { margin-top: 0; }
  .doc-item-head { flex-direction: column; gap: 6px; }
  .toolbar { flex-wrap: wrap; gap: var(--space-3); }
  .site-footer .container { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ─── 2b. Resume 목차 ─────────────────────────────────────────────── */
/* 본문(780px)은 그대로 두고, 남는 오른쪽 여백에 띄웁니다. 여백이 모자란
   화면에서는 아예 감춥니다 — 본문을 좁히면서까지 낄 자리는 아닙니다. */
.doc-toc { display: none; }

@media (min-width: 1180px) {
  .doc-toc {
    display: block;
    position: fixed;
    top: 148px;                           /* 도구 띠(sticky) 아래 */
    left: calc(50% + 424px);              /* 본문 오른쪽 끝(390px) + 34px */
    width: min(212px, calc(50vw - 440px));
    max-height: calc(100vh - 196px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 10;
  }
}

.doc-toc-title {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-neutral-600);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-text);
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc > ol { counter-reset: toc; padding-top: 4px; }
.doc-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--color-divider);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-neutral-700);
  text-decoration: none;
  text-wrap: pretty;
  transition: color 0.15s, border-left-color 0.15s;
}
.doc-toc > ol > li > a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero) "  ";
  font: 400 10.5px var(--font-mono);
  color: var(--color-neutral-500);
}
.doc-toc ol ol a {
  padding-left: 24px;
  font-size: 11.8px;
  color: var(--color-neutral-600);
}
.doc-toc a:hover {
  color: var(--color-accent-800);
  border-left-color: var(--color-accent-400);
}
/* 지금 읽고 있는 항목 — toc.js 가 aria-current 를 옮겨 답니다. */
.doc-toc a[aria-current] {
  color: var(--color-accent-800);
  font-weight: 600;
  border-left-color: var(--color-accent);
}
.doc-toc a[aria-current]::before { color: var(--color-accent); }
/* 하위 항목이 켜져 있는 동안, 상위 항목도 옅게 짚어 둡니다. */
.doc-toc > ol > li:has(ol a[aria-current]) > a {
  color: var(--color-neutral-900);
  border-left-color: var(--color-neutral-400);
}