/* ═══════════════════════════════════════════════════════════════
   김태종 — AI Engineer
   무채색 본문 + 하늘색(#bbe2fb) 포인트 · 라이트 전용
   kimcoder.io/resume 를 직접 실측해 레이아웃·타이포 수치를 맞춤
   컨테이너 1400 / 본문 1216 / 우측 목차 112 (gap 40)
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --bg:      #ffffff;
  --ink:     #111827;   /* 제목·본문 */
  --ink-2:   #374151;   /* 목차·보조 */
  --ink-3:   #6b7280;   /* 기간·라벨 */
  --ink-4:   #9ca3af;   /* 가장 옅은 */
  --rule:    #e5e7eb;
  --wash:    #f9fafb;

  /* 포인트 컬러. #bbe2fb 는 흰 배경 대비 1.3:1 이라 글자에는 쓸 수 없다.
     면(accent) · 테두리(rule/line) · 글자(ink) 로 역할을 나눠 쓴다. */
  --accent:       #bbe2fb;   /* 면 — 마커·바·강조 블록 */
  --accent-soft:  #eaf5fd;   /* 배경 워시 */
  --accent-rule:  #d3e9f8;   /* 옅은 테두리 */
  --accent-line:  #7cc2ec;   /* 선·불릿 마커 */
  --accent-ink:   #1b6fa8;   /* 글자용 (흰 배경 대비 5.4:1) */

  --sans: "Pretendard Variable", Pretendard, Inter, -apple-system,
          BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --container: 1400px;
  --toc-w: 7rem;        /* 112px */
  --toc-gap: 2.5rem;    /* 40px */
  --navbar-h: 3.75rem;
  --gutter: clamp(1rem, 3vw, 2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 1.5rem);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }

code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: .35rem;
  padding: .08em .35em;
  word-break: break-word;
}

.period { font-variant-numeric: tabular-nums; }

/* ── 상단 네비 ─────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 3px 0 var(--accent);   /* 화면 최상단 포인트 스트립 */
}

.navbar-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
}

.navbar-links a:hover { color: var(--accent-ink); }
.navbar-brand:hover { color: var(--accent-ink); text-decoration-color: var(--accent-line); }

/* ── 페이지 셸: 본문 + 우측 목차 ───────────────────────────── */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 5rem;
  display: flex;
  align-items: flex-start;
  gap: var(--toc-gap);
}

.doc { flex: 1; min-width: 0; }

/* ── 우측 목차 ─────────────────────────────────────────────── */
.toc {
  display: none;
  width: var(--toc-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--navbar-h) + 2.5rem);
  max-height: calc(100vh - var(--navbar-h) - 4rem);
  overflow-y: auto;
}

.toc ul { margin: 0; padding: 0; list-style: none; }

.toc a {
  display: block;
  padding: .3rem 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.toc a:hover { color: var(--accent-ink); text-decoration: none; }
.toc .lv2 a { color: var(--ink-2); }
.toc .lv3 a {
  padding-left: .75rem;
  color: var(--ink-3);
  border-left: 2px solid var(--accent-rule);
  margin-left: .125rem;
}
.toc .lv3 a:hover { border-left-color: var(--accent-line); }

@media (min-width: 1280px) {
  .toc { display: block; }
}

/* ── 제목 위계 (레퍼런스 실측값) ───────────────────────────── */
.doc h1 {
  margin: 0 0 1rem;
  font-size: 3rem;          /* 48 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}

.doc h2 {
  position: relative;
  margin: 3.25rem 0 1.25rem;
  padding-top: 1.15rem;     /* 포인트 바 자리 (합계는 기존 4rem 간격 유지) */
  font-size: 2.25rem;       /* 36 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* 대제목 위 포인트 바 — 섹션 시작을 알리는 유일한 색 신호 */
.doc h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: .3125rem;
  border-radius: 999px;
  background: var(--accent);
}

.doc h3 {
  margin: 3rem 0 .35rem;
  font-size: 1.875rem;      /* 30 */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.doc h4 {                   /* 팀 / 직위 — 굵지 않다 */
  margin: 1.25rem 0 .25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

.doc h6.label {             /* 성과 · 역할 · 사용 기술 라벨 */
  position: relative;
  margin: 1.5rem 0 .35rem;
  padding-left: .85rem;
  font-size: 1.125rem;      /* 18 */
  font-weight: 500;
  line-height: 1.55;
}

.doc h6.label::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .375rem;
  height: .375rem;
  border-radius: 1px;
  background: var(--accent-line);
}

.doc p { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }

.doc ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.doc li { margin-bottom: .3rem; font-size: .875rem; line-height: 1.45; color: var(--ink); }
.doc li::marker { color: var(--accent-line); }
.doc li strong { font-weight: 600; }

/* 제목 옆 기간 */
.doc h2 .period, .doc h3 .period {
  font-size: .5em;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.doc h3 .period { font-size: .47em; }

/* 헤딩 앵커 */
.hash-link {
  opacity: 0;
  padding-left: .35em;
  color: var(--ink-4);
  font-weight: 400;
  transition: opacity .12s ease;
}

.hash-link:hover { color: var(--accent-ink); text-decoration: none; }
:hover > .hash-link, .hash-link:focus-visible { opacity: 1; }

/* ── 마스트헤드 ────────────────────────────────────────────── */
.masthead-row { display: flex; align-items: flex-start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.masthead-text { flex: 1; min-width: 0; }

.masthead-photo {
  flex-shrink: 0;
  width: 240px;
  height: 320px;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--accent-soft);
  /* 사진 뒤로 살짝 어긋나게 깔리는 포인트 면 */
  box-shadow: 0 0 0 1px var(--accent-rule), .75rem .75rem 0 var(--accent);
}

.tagline { color: var(--ink-3) !important; }

/* ── 프로필 박스 ───────────────────────────────────────────── */
.profile {
  margin: 1.75rem 0 0 !important;
  padding: 1.1rem 1.4rem !important;
  list-style: none;
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: .5rem;
  display: grid;
  gap: .35rem;
  max-width: 32rem;
}

.profile li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0 1rem;
  margin: 0;
  font-size: 1rem;
}

.profile .k { color: var(--ink-3); }
.profile .v { color: var(--ink); }
.profile a { text-decoration: underline; text-decoration-color: var(--accent-line); }
.profile a:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }

/* ── 경력 요약 ─────────────────────────────────────────────── */
.tenure { list-style: none; padding-left: 0 !important; }

.tenure li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  font-size: 1.0625rem;
}

.tenure li::before {          /* 회사명 앞 포인트 마커 */
  content: "";
  flex: none;
  align-self: center;
  width: .375rem;
  height: .375rem;
  border-radius: 1px;
  background: var(--accent-line);
}

.tenure li:last-child { border-bottom: 0; }
.tenure .period { font-size: .875rem; font-weight: 500; color: var(--ink-3); }

/* ── 핵심 기술 ─────────────────────────────────────────────── */
.skill-group { margin-bottom: 1.5rem; }
.skill-group > h4 { font-weight: 600; margin-bottom: .5rem; }

/* ── 회사 메타 ─────────────────────────────────────────────── */
.facts {
  list-style: none;
  padding-left: 0 !important;
  margin: .75rem 0 0 !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--rule);
}

.facts li { color: var(--ink-3); margin-bottom: .1rem; }
.facts strong { color: var(--ink-3); font-weight: 600; }

/* ── 수행업무 / 프로젝트 : 좌 제목·기간 / 우 내용 2단 ──────── */
.task {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  gap: 0 2rem;
  padding: 2rem 0 0;
}

.task-aside { padding-top: .1rem; }

.task-title {
  margin: 0 !important;
  font-size: 1.25rem !important;      /* 20 */
  font-weight: 500;
  line-height: 1.4;
}

.task-period {
  margin: .15rem 0 0 !important;
  font-size: .875rem !important;      /* 14 */
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-3) !important;
}

.task-main { min-width: 0; }
.task-main > *:first-child { margin-top: 0; }
.task-main p { font-size: 1rem; line-height: 1.55; }
.task-link { font-size: .875rem !important; }
.task-link a { text-decoration: underline; text-decoration-color: var(--accent-line); }
.task-link a:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }

/* 사용 기술 — JD 키워드가 한눈에 들어오도록 포인트 컬러 칩으로 */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .875rem !important;
  color: var(--ink-2) !important;
}

.stack .chip {
  padding: .15rem .5rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-rule);
  border-radius: .3rem;
  line-height: 1.5;
  white-space: nowrap;
}

/* ── 학력 · 그 외 ──────────────────────────────────────────── */
.bg-group { margin-bottom: 1.25rem; }
.bg-group > h4 { font-weight: 600; margin-bottom: .35rem; }

/* ── 꼬리말 (최종 수정일) ──────────────────────────────────── */
.doc-footer {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--ink-4);
}

.doc-footer p { margin: 0; font-size: inherit; color: inherit; }

/* ── 인쇄 버튼 ─────────────────────────────────────────────── */
.print-btn {
  margin-top: 1.75rem;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--accent-rule);
  border-radius: .4rem;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.print-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .task { grid-template-columns: 1fr; gap: .5rem; }
  .task-aside { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
  .task-period { margin-top: 0 !important; }
}

@media (max-width: 40rem) {
  .doc h1 { font-size: 2rem; }
  .doc h2 { font-size: 1.625rem; margin-top: 2.75rem; }
  .doc h3 { font-size: 1.375rem; }
  .doc h3 .period, .doc h2 .period { display: block; white-space: normal; font-size: .875rem; }
  .doc p { font-size: 1.0625rem; }
  .masthead-row { flex-direction: column-reverse; gap: 1.5rem; }
  .masthead-photo {
    width: 150px;
    height: 200px;
    box-shadow: 0 0 0 1px var(--accent-rule), .5rem .5rem 0 var(--accent);
  }
  .doc h2 { padding-top: .95rem; }
  .doc h2::before { width: 2rem; }
  .profile li { grid-template-columns: 4.75rem 1fr; font-size: .9375rem; }
  .navbar-links { gap: 1rem; font-size: .9375rem; }
  .hash-link { display: none; }
}

/* ── 인쇄 (PDF 저장) ───────────────────────────────────────── */
@media print {
  :root { --gutter: 0; }

  body { font-size: 10pt; line-height: 1.45; }
  .navbar, .toc, .print-btn, .hash-link { display: none !important; }
  .doc-footer { margin-top: 1.5rem; padding-top: .6rem; font-size: 8.5pt; }
  .page { max-width: none; padding: 0; display: block; }
  .doc h1 { font-size: 21pt; margin-bottom: .5rem; }
  .doc h2 { font-size: 14pt; margin: 1.3rem 0 .6rem; padding-top: .3rem; }
  .doc h2::before { width: 1.4rem; height: .1875rem; }
  .doc h3 { font-size: 12pt; margin: 1rem 0 .2rem; }
  .doc h4 { font-size: 10pt; margin: .5rem 0 .2rem; }
  .doc h6.label { font-size: 10pt; margin: .55rem 0 .2rem; }
  .doc p { font-size: 10pt; margin-bottom: .5rem; }
  .doc li { font-size: 9pt; }
  .task { padding-top: .8rem; grid-template-columns: minmax(0, 26%) minmax(0, 1fr); gap: 0 1rem; }
  .task-title { font-size: 10.5pt !important; }
  .task-period { font-size: 9pt !important; }
  .masthead-photo { width: 95px; height: 127px; box-shadow: none; }
  .profile { background: none; padding: .6rem .9rem !important; }

  /* 인쇄본에서는 칩 테두리가 지면을 어지럽히므로 가운뎃점 나열로 되돌린다 */
  .stack { display: block; color: var(--ink-3) !important; }
  .stack .chip { padding: 0; background: none; border: 0; white-space: normal; }
  .stack .chip:not(:last-child)::after { content: " · "; }

  .doc h2, .doc h3 { break-after: avoid; page-break-after: avoid; }
  .task, .tenure li, .bg-group, .skill-group { break-inside: avoid; page-break-inside: avoid; }

  @page { size: A4; margin: 14mm 13mm; }
}