/* 외주 포트폴리오 카드 · 분야별 표 — /outsourcing 과 /business 「웹 · 앱 개발」 이 같이 씁니다 (2026-11-08). new/page.css 다음에 부릅니다 */
.pf { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pf-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.09); }
.pf-thumb { aspect-ratio: 1200 / 630; background: var(--canvas) center / cover no-repeat; position: relative; }
.pf-badge { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.pf-badge span { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--fg); }
.pf-badge .live { background: var(--ok); color: #fff; } .pf-badge .design { background: var(--branch-blue); color: #fff; } .pf-badge .closed { background: var(--faint); color: #fff; }
.pf-body { padding: 18px 20px 20px; display: grid; gap: 6px; flex: 1; align-content: start; }
.pf-cat { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--branch-blue); }
.pf-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.pf-sum { font-size: 14.5px; line-height: 1.6; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-stats { display: flex; gap: 16px; margin-top: 6px; }
.pf-stats b { display: block; font-size: 16px; font-weight: 700; } .pf-stats b small { font-size: 11px; color: var(--sub); margin-left: 1px; }
.pf-stats small { font-size: 11.5px; color: var(--faint); }
.pf-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.pf-acts a { font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); transition: background .2s, border-color .2s; }
.pf-acts a:hover { background: var(--canvas); }
.pf-acts a.p { background: var(--fg); border-color: var(--fg); color: #fff; }
.pf-acts a.off { opacity: .45; pointer-events: none; }
/* 분야별 예시 표 (2026-11-08 운영자 「진행중인이 아니라 예시 — ax 기업은 … 부동산 분양 사이트 제작 … 차트 형식으로」) */
.chart { margin-top: 36px; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden; }
.chart table { width: 100%; border-collapse: collapse; font-size: 15px; }
.chart th, .chart td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.chart thead th { border-top: 0; background: var(--canvas); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--sub); font-weight: 700; }
.chart th[scope=row] { width: 26%; font-weight: 700; letter-spacing: -.012em; }
.chart th[scope=row] small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--branch-blue); font-weight: 700; }
.chart td.ex a { font-weight: 600; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
.chart td.ex a:hover { border-color: var(--fg); }
.chart td.ex .st { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: var(--canvas); color: var(--sub); vertical-align: 1px; }
.chart td.ex .st.design { background: #e8f3fa; color: var(--blue); } .chart td.ex .st.live { background: #e6f4ec; color: var(--ok); }
.chart td .what { color: var(--sub); line-height: 1.6; }
.chart td .soon { color: var(--faint); }
@media (max-width: 640px) { .chart thead { display: none; } .chart tr { display: grid; } .chart th[scope=row] { width: auto; border-top: 1px solid var(--line); } .chart td { border-top: 0; padding-top: 0; } }
.pf-sub { margin-top: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--sub); font-weight: 700; text-align: center; }
.pf-note { margin-top: 36px; padding: 22px 24px; border-radius: 18px; background: var(--canvas); color: var(--sub); font-size: 14.5px; line-height: 1.65; text-align: center; }
.pf-note b { color: var(--fg); font-weight: 600; }