/* ─────────────────────────────────────────────────────────
   Hyunjun-Kim.me · Resume Web Overlay
   - 이력서 본문(11_이력서_범용_v1.html) 인라인 스타일 100% 보존
   - 이 파일은 "웹 컨텍스트 레이어"만 추가
   - @media print 시 전부 숨김 → A4 프린트 스펙 원형 유지
   의존: design-tokens.css, common.css
   ───────────────────────────────────────────────────────── */

/* ─── body 배경: 이력서가 .page 외부에서 회색 배경(#F3F4F6)을 주는데
   웹 통합본에서는 Paper 배경으로 변경 (sticky 헤더와 톤 일치) ─── */
body.resume-web {
  background: var(--color-paper);
}

/* ─── .page 래퍼: 웹 뷰에서도 이력서 카드 느낌 유지하되
   헤더 아래 여백 조정 + 모바일 대응 ─── */
body.resume-web .page {
  margin: 32pt auto;
}

@media (max-width: 767px) {
  /* 모바일: A4 고정폭 해제하고 유동 폭으로 재조정 */
  body.resume-web .page {
    max-width: 100%;
    margin: 0;
    padding: 1.5rem 1.25rem;
    box-shadow: none;
    border-radius: 0;
    font-size: 14pt;
  }

  /* Credential Strip 3열 → 세로 스택 */
  body.resume-web .strip {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  /* Awards 3열 → 1열 */
  body.resume-web .awards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Brand matrix 2열 → 세로 스택 */
  body.resume-web .brand-row {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Experience · Education · Languages 2열 → 세로 스택 */
  body.resume-web .job,
  body.resume-web .edu-item,
  body.resume-web .lang-item {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Experience 타임라인 수직선 제거 (세로 스택에서 불필요) */
  body.resume-web .exp-wrap::before { display: none !important; }
  body.resume-web .job::before { display: none !important; }

  /* Stat grid 다열 → 2열로 축소 */
  body.resume-web .stat-grid,
  body.resume-web .stat-grid.stat-grid-3,
  body.resume-web .stat-grid.stat-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.resume-web .stat-grid.stat-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 헤더 이름 · 섹션 제목 모바일 축소 */
  body.resume-web .name-ko { font-size: 24pt !important; }
  body.resume-web .name-en { font-size: 11pt !important; }
  body.resume-web .sec-number { font-size: 16pt !important; }
  body.resume-web .profile-hook { font-size: 17pt !important; }
  body.resume-web .company { font-size: 14pt !important; }
  body.resume-web .company.chain { font-size: 12pt !important; }
}

/* ═════════════════════════════════════════════════════════
   NEXT STEP 블록 (웹 전용 · 본문 종료 후)
   ═════════════════════════════════════════════════════════ */

.next-step {
  max-width: 820pt;
  margin: 0 auto;
  padding: 3rem 52pt 4rem;
  border-top: 2px solid var(--color-stone);
  background: var(--color-paper);
}

.next-step__label {
  font-family: var(--font-en);
  font-size: var(--fs-h1-section);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1rem;
}

.next-step__copy {
  font-family: var(--font-ko);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-graphite);
  max-width: 540px;
  margin: 0 0 2rem;
}

.next-step__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.next-step__or {
  font-family: var(--font-en);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--color-graphite);
}

@media (max-width: 767px) {
  .next-step {
    padding: 2rem 1.25rem 3rem;
    border-top-width: 1px;
  }
  .next-step__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .next-step__ctas > .btn { width: 100%; }
  .next-step__or { text-align: center; }
}

/* ═════════════════════════════════════════════════════════
   @MEDIA PRINT · A4 프린트 스펙 보존 (웹 오버레이 전부 숨김)
   ═════════════════════════════════════════════════════════ */

@media print {
  /* 이력서 인라인 스타일의 @media print 가 이미 처리:
       .page 박스섀도 제거 · margin 0 · padding 32pt 42pt · max-width none
     → 이 오버레이는 웹 전용 요소만 숨기면 됨 */

  .site-header,
  .skip-link,
  .next-step,
  .site-footer {
    display: none !important;
  }

  body.resume-web { background: #FFFFFF !important; }

  /* 페이지 브레이크 힌트 (Section 05 Work Experience 직전에 자연스럽게 끊김) */
  section { break-inside: avoid; }
}