/*
 * doc-web.css - shared canon for the web-style resume / career documents (KR)
 *
 * css/doc.css 와는 별개다. doc.css 는 resume-en / career-en / portfolio-summary 가
 * 계속 쓰므로 건드리지 않는다. 이 파일을 쓰는 페이지는 doc.css 도 tokens.css 도
 * 링크하지 않으므로, 여기서 쓰는 색은 전부 자체 값이어야 한다 (var(--navy) 등 금지).
 *
 * Page-specific components stay in each file's inline <style>.
 */

:root {
  --band: #2f2f2f;
  --band-2: #3b3b3b;
  --ink: #1b1b1b;
  --text: #2c2c2c;
  --muted: #6f6f6f;
  --rule: #e6e6e6;
  --link: #1155cc;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --serif: "Noto Serif KR", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f4f4f4;
  font-family: var(--sans);
  color: var(--text);
  font-size: 11px;
  line-height: 1.34;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.doc { max-width: 720px; margin: 0 auto; background: #fff; }

a { color: var(--link); }

/* ===== 다크 헤더 밴드 ===== */
.band {
  background: var(--band);
  color: #fff;
  text-align: center;
  padding: 11px 24px 9px;
}
.band h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  margin: 0 0 3px;
}
.band .role { font-size: 10.1px; color: #c8c8c8; margin: 0; }
.band .doctype { font-size: 9.2px; color: #9a9a9a; margin: 3px 0 0; letter-spacing: 1.5px; }

/* ===== 연락처 스트립 ===== */
.contact {
  background: var(--band-2);
  color: #ededed;
  padding: 5px 24px;
  font-size: 9.9px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 16px;
}
.contact > * { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.contact a { color: #ededed; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.contact a:hover { border-bottom-color: #fff; }
.contact svg { width: 10px; height: 10px; flex: none; fill: currentColor; opacity: .8; }

/* ===== 본문 ===== */
.body { padding: 10px 24px 8px; }

/* 섹션 머리: 형광펜 제목 + (선택) 오른쪽 기간.
   제목은 글자 폭만큼만 칠하므로 기간은 flex 로 바깥에 붙인다. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 4px;
  break-after: avoid;
}
.sec-head:first-child { margin-top: 0; }
.sec-head .period { font-size: 9.9px; color: var(--muted); white-space: nowrap; }

/* 섹션 제목 형광펜.
   margin-left 음수 + 같은 크기 padding-left 라서 글자의 x 좌표는 본문과 그대로 맞는다.
   background-size/position 으로 잉크를 아래로 앉혀 윗줄이 살짝 비게 한다.
   print-color-adjust 가 없으면 인쇄에서 칠이 통째로 날아간다. */
h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0 -7px;
  padding: 1px 7px 0;
  border-radius: 2px;
  background-image: linear-gradient(102deg,
      rgba(255, 221, 112, 0)   0%,
      rgba(255, 221, 112, .95) 3%,
      rgba(255, 221, 112, .88) 94%,
      rgba(255, 221, 112, 0)   100%);
  background-size: 100% 86%;
  background-position: 0 92%;
  background-repeat: no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h2 a { font-size: 10.1px; font-weight: 600; margin-left: 7px; letter-spacing: 0; }

/* ===== 항목 =====
   항목 제목이 불릿 머리의 굵은 라벨과 같은 무게라 굵기만으로는 위계가 안 선다.
   여백과 함께 항목 "사이"에 실선을 넣어 블록 경계를 만든다.
   .entry 는 .body 의 마지막 자식이 아니므로(뒤에 .sec-head 가 온다) :last-child 로는
   마지막 항목을 못 집는다. 인접 선택자를 쓴다. */
.entry { margin-bottom: 8px; }
.entry + .entry { border-top: 1px solid var(--rule); padding-top: 7px; }
.hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hdr .t { font-weight: 700; color: var(--ink); font-size: 11.3px; }
.hdr .t a { font-size: 9.9px; font-weight: 600; }
.hdr .d { font-size: 10.2px; color: var(--muted); white-space: nowrap; }
.entry ul { margin: 3px 0 0; padding-left: 15px; }
.entry li { margin-bottom: 1px; }
.entry li b { color: var(--ink); }

.note { font-size: 9.9px; color: var(--muted); margin: 0 0 5px; }

/* ===== 플로팅 내비 (화면 전용, 인쇄에서 숨김) =====
   doc.css 의 같은 컴포넌트를 옮겨 왔으나 색은 tokens.css 에 기대지 않고 자체 값으로 닫았다.
   이 문서가 모노크롬 + 노랑 형광펜이라 기존 navy·gold 는 부딪힌다. */
.top-nav {
  position: fixed; top: 18px; right: 18px; z-index: 1000;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: 141px;
}
.top-nav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: 9px;
  text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.top-nav .download-pdf {
  background: #2f2f2f; border: 1.5px solid #2f2f2f; color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.top-nav .download-pdf:hover {
  background: #111; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.top-nav .download-pdf:active { transform: translateY(0); }
.top-nav .to-career, .top-nav .to-resume {
  background: #fff; color: #2f2f2f; border: 1.5px solid #2f2f2f;
}
.top-nav .to-career:hover, .top-nav .to-resume:hover { background: #2f2f2f; color: #fff; }
/* EN 판을 새 디자인으로 옮기면 되살릴 자리 */
.top-nav .lang { background: #fff; color: #8a5410; border: 1.5px solid #8a5410; }
.top-nav .lang:hover { background: #8a5410; color: #fff; }

/* 본문 11px 은 A4 1장에 맞추려고 정한 값이지 화면용 크기가 아니다.
   화면에서는 문서 전체를 확대한다. zoom 은 줄바꿈·비율을 그대로 둔 채 배율만 키우므로
   화면과 인쇄본이 같은 조판을 유지한다(11px x 1.3 = 약 14px).
   폭은 따로 건드리지 않는다. zoom 이 걸린 요소는 퍼센트가 이미 배율만큼 나뉜 포함 블록
   기준으로 풀리므로, width:auto 면 좁은 화면에서 화면 폭에 정확히 맞고 넓은 화면에서는
   max-width 720px 이 걸려 936px 로 그려진다. 여기서 width 를 또 나누면 이중으로 줄어든다.
   @media screen 안에 있으므로 인쇄에는 적용되지 않는다. */
@media screen {
  body { padding: 24px 0; }
  .doc { zoom: 1.3; }
}

/* 확대된 문서(720 x 1.3 = 936px) 옆에 고정 내비가 들어갈 자리가 없으면
   본문을 덮는다. 그때는 문서 위 가로줄로 내린다. */
@media (max-width: 1259px) {
  body { padding: 0; }
  .top-nav {
    position: static; width: auto;
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    padding: 12px 16px 0;
  }
}

@media (max-width: 560px) {
  .body { padding: 18px 18px 26px; }
  .sec-head { display: block; }
  .sec-head .period { display: block; margin-top: 2px; }
  .hdr { display: block; }
  .hdr .d { white-space: normal; }
}

@page { size: A4; margin: 12mm; }

@media print {
  body { background: #fff; padding: 0; }
  .doc { max-width: none; }
  .top-nav { display: none !important; }
  .band, .contact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .entry { break-inside: avoid; }
}