/* 포트폴리오 전용 부품 — tokens · components · app 다음에 읽는다. 이름은 pf- 로 시작한다.
   색은 tokens 변수만 쓴다. 상태 배지 3계열: 사용·운영(green) · 구현·검증(teal) · 초기·기획(gray). */

:root {
  --hairline-strong: rgba(0, 0, 0, 0.16);
  --badge-use-bg: #e3f4ea;   --badge-use-fg: #1e6b3a;    /* 5.71:1 */
  --badge-build-bg: #e1f1ef; --badge-build-fg: #0b5c55;  /* 6.74:1 */
  --badge-early-bg: #ececf0; --badge-early-fg: #48484d;  /* 7.72:1 */
}

/* ---------- 한글 줄바꿈·제목 균형 ---------- */
.lw-page { word-break: keep-all; overflow-wrap: anywhere; }
.lw-h1, .lw-h2, .lw-h3, .lw-h5, .lw-subhead, .lw-tile-title, .lw-tile-sub, .lw-detail-title, .lw-card-name, .pf-hero-lead, .lw-pagehead-desc { text-wrap: balance; }
.lw-table td, .lw-prose td { word-break: normal; }

/* ---------- 그림 표지(잘리지 않게) ---------- */
.pf-media { background: var(--bg-alt); }
.pf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pf-media--svg img { padding: 4%; }
.lw-tile-media.pf-media { position: relative; width: min(560px, 86%); aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 0 0 1px var(--hairline) inset; }
.lw-card-media.pf-media { position: relative; background: var(--bg); box-shadow: 0 0 0 1px var(--hairline) inset; }
.lw-section:not(.lw-section--alt) .lw-card-media.pf-media { background: var(--bg); }
.lw-detail-media.pf-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt); }
.lw-detail-hero { grid-template-columns: 360px minmax(0, 1fr); }

/* ---------- 표지 ---------- */
.pf-logo-dot { color: var(--accent); }

/* ---------- 상태 배지 ---------- */
.pf-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.pf-badge--use { background: var(--badge-use-bg); color: var(--badge-use-fg); }
.pf-badge--build { background: var(--badge-build-bg); color: var(--badge-build-fg); }
.pf-badge--early { background: var(--badge-early-bg); color: var(--badge-early-fg); }
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 카드 보강 ---------- */
.lw-card { position: relative; }
.pf-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-5); }
.pf-card-top .lw-card-line { margin-top: 0; }
.pf-card-hl { margin-top: var(--space-3); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent); }
.pf-card-media-icon { color: var(--text-secondary); }
.lw-card-name a { color: inherit; }
.lw-card-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }   /* 카드 전체 클릭 */
.lw-card-name a:hover { text-decoration: none; }
.lw-card:focus-within { box-shadow: var(--shadow-card-hover); }

/* ---------- 홈 ---------- */
.pf-hero-lead { margin: var(--space-4) auto 0; max-width: 760px; font-size: 21px; line-height: 31px; color: var(--text-secondary); }
.pf-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.pf-way { padding: var(--space-7); border-radius: var(--radius-lg); background: var(--bg); }
.lw-section:not(.lw-section--alt) .pf-way { background: var(--bg-alt); }
.pf-way-num { font-size: 12px; line-height: 16px; color: var(--accent); font-weight: 600; }
.pf-way-title { margin-top: var(--space-2); font-size: 21px; line-height: 27px; font-weight: 600; }
.pf-way-desc { margin-top: var(--space-2); font-size: 14px; line-height: 22px; }
.pf-way .lw-links { margin-top: var(--space-4); }
.pf-tile-badges { margin-top: var(--space-3); justify-content: center; }

/* ---------- 상세 ---------- */
.pf-detail-media { position: relative; }
.pf-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.pf-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-5); margin-top: var(--space-5); font-size: 14px; line-height: 20px; }
.pf-meta dt { color: var(--text-secondary); }
.pf-meta dd { margin: 0; overflow-wrap: anywhere; }
.pf-hl-value { margin-top: var(--space-2); font-size: 28px; line-height: 35px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pf-hl-label { margin-top: var(--space-2); font-size: 14px; line-height: 20px; }
.pf-hl-cond { margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.pf-ai { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--bg-alt); font-size: 14px; line-height: 22px; }
.pf-ai strong { font-weight: 600; }
.pf-related { margin-top: var(--space-5); }

/* ---------- 그림·구성도·확대 보기 ---------- */
.pf-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-4) 0 var(--space-8); }
.pf-figs--one { grid-template-columns: minmax(0, 1fr); }
.pf-fig { margin: 0; }
.pf-fig-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg-alt); overflow: hidden; cursor: zoom-in; }
.pf-fig-btn img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; max-height: 520px; }
.pf-fig figcaption { margin-top: var(--space-2); font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.pf-diagram { margin: var(--space-4) 0 var(--space-8); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-alt); overflow-x: auto; }
.pf-diagram svg, .pf-diagram img { display: block; width: 100%; min-width: 560px; height: auto; }
.pf-diagram figcaption { margin-top: var(--space-3); font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.pf-zoom { width: min(1200px, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow-toast); }
.pf-zoom::backdrop { background: rgba(0, 0, 0, 0.6); }
.pf-zoom img { display: block; width: 100%; height: auto; max-height: calc(92vh - 56px); object-fit: contain; background: var(--bg-alt); }
.pf-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 16px; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.pf-zoom-close { padding: 4px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }

/* ---------- 표(구성요소별 상태 등) ---------- */
.lw-prose .lw-table-scroll table td:first-child { font-weight: 600; }

/* ---------- 분류 페이지 필터 ---------- */
.pf-filter { margin-top: var(--space-6); }
.pf-filter .lw-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--on-accent); }
.pf-empty { margin-top: var(--space-6); font-size: 14px; color: var(--text-secondary); }

/* ---------- 소개 · 경력 ---------- */
.pf-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.pf-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--space-6); font-size: 17px; line-height: 25px; }
.pf-facts dt { color: var(--text-secondary); }
.pf-facts dd { margin: 0; }
.pf-timeline { border-top: 1px solid var(--hairline); }
.pf-tl-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--hairline); }
.pf-tl-period { font-size: 14px; line-height: 22px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pf-tl-org { font-size: 19px; line-height: 26px; font-weight: 600; }
.pf-tl-role { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.pf-tl-items { margin-top: var(--space-3); padding-left: 1.1em; list-style: disc; font-size: 15px; line-height: 23px; }
.pf-tl-items li { margin: 3px 0; }
.pf-tl-items a { font-weight: 600; }
.pf-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pf-skill { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--bg); }
.lw-section:not(.lw-section--alt) .pf-skill { background: var(--bg-alt); }
.pf-skill-name { font-size: 17px; line-height: 23px; font-weight: 600; }
.pf-skill-desc { margin-top: var(--space-2); font-size: 14px; line-height: 21px; }
.pf-contact-lead { margin-top: var(--space-4); font-size: 21px; line-height: 29px; color: var(--text-secondary); }
.pf-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }

/* ---------- 상태 표기 안내 ---------- */
.pf-legend { margin-top: var(--space-8); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--bg-alt); font-size: 14px; line-height: 22px; }
.lw-section--alt .pf-legend { background: var(--bg); }
.pf-legend summary { cursor: pointer; font-weight: 600; color: var(--link); }
.pf-legend-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.pf-legend-head { font-size: 12px; line-height: 16px; color: var(--text-secondary); margin-bottom: var(--space-2); }
.pf-legend li { margin: 6px 0; }
@container lw-page (max-width: 833px) { .pf-legend-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 전체 목록 ---------- */
.pf-all td:nth-child(1) { white-space: nowrap; color: var(--text-secondary); }
.pf-all td a { font-weight: 600; }

/* ---------- 바닥글 ---------- */
.pf-footer-note { margin-top: var(--space-2); }

/* ---------- 인쇄용 요약 ---------- */
@page { size: A4; margin: 14mm 14mm 16mm; }
.pf-print { font-size: 11pt; line-height: 1.55; color: #111; }
.pf-print h1 { font-size: 22pt; line-height: 1.25; margin: 0 0 4mm; }
.pf-print h2 { font-size: 14pt; margin: 7mm 0 2mm; padding-bottom: 1mm; border-bottom: 1px solid #ccc; }
.pf-print h3 { font-size: 11.5pt; margin: 4mm 0 1mm; }
.pf-print p, .pf-print li { margin: 0 0 1.5mm; }
.pf-print ul { padding-left: 5mm; list-style: disc; }
.pf-print a { color: var(--accent); text-decoration: none; }
.pf-print .pf-badge { height: auto; padding: 0 6px; font-size: 8.5pt; }
.pf-print-case { break-inside: avoid; margin-bottom: 4mm; }
.pf-print-break { break-before: page; }
.pf-print-meta { font-size: 9pt; color: #555; }

/* ---------- 폭 단계 ---------- */
@container lw-page (max-width: 1068px) {
  .lw-detail-hero { grid-template-columns: 280px minmax(0, 1fr); }
  .pf-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container lw-page (max-width: 833px) {
  .pf-ways { grid-template-columns: minmax(0, 1fr); }
  .pf-profile { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .pf-tl-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}
@container lw-page (max-width: 734px) {
  .lw-detail-hero { grid-template-columns: minmax(0, 1fr); }
  .lw-detail-media.pf-media { width: 100%; max-width: 420px; }
  .pf-figs { grid-template-columns: minmax(0, 1fr); }
  .pf-skills { grid-template-columns: minmax(0, 1fr); }
  .pf-hero-lead { font-size: 17px; line-height: 25px; }
  .pf-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-meta dd { margin-bottom: var(--space-2); }
  .pf-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-facts dd { margin-bottom: var(--space-3); }
}