/* ===== 거누그래픽 포트폴리오 (project.php / view.php) ===== */
#pf { --bg:#111; --surface:#1a1a1b; --line:#2b2b2d; --text:#f7f7f7; --sub:#c9c9c9; --mute:#8a8a8f; --accent:#f4bc1e; --r:16px;
  background:var(--bg); color:var(--sub); font-weight:300; }
#pf * { box-sizing:border-box; }
#pf a { color:inherit; text-decoration:none; }
#pf img { max-width:100%; }
#pf .pf-wrap { max-width:1350px; margin:0 auto; padding:0 24px; }
#pf .pf-label { display:block; font-family:'Viga', 'Outfit', sans-serif; font-size:13px; letter-spacing:.24em; color:var(--accent); line-height:1.4; margin-bottom:14px; }
#pf h1, #pf h2, #pf h3 { color:var(--text); letter-spacing:-0.03em; line-height:1.3; margin:0; }
#pf p { margin:0; }
#pf .pf-sec { padding:96px 0; }
#pf .pf-sec.tight { padding-top:0; }
#pf .pf-alt { background:#161617; }

/* 버튼 · 태그 */
#pf .pf-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 28px; border-radius:999px; font-size:15px; font-weight:500; white-space:nowrap; transition:background .2s, color .2s, border-color .2s; }
#pf .pf-btn.yellow { background:var(--accent); color:#111; }
#pf .pf-btn.yellow:hover { background:#fff; }
#pf .pf-btn.line { border:1px solid #555; color:var(--text); }
#pf .pf-btn.line:hover { border-color:var(--accent); color:var(--accent); }
#pf .pf-btn.blog { background:#03c75a; color:#fff; }
#pf .pf-btn.blog:hover { background:#fff; color:#03a04a; }
#pf .pf-btn svg { width:18px; height:18px; }
#pf .pf-tags { display:flex; flex-wrap:wrap; gap:6px; }
#pf .pf-tag { display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:400; background:#232325; color:var(--sub); line-height:1; }
#pf .pf-tag.cat { background:rgba(244,188,30,.12); color:var(--accent); }

/* ---------- 목록: 소개 · 숫자 ---------- */
#pf .pf-intro { padding:80px 0 0; }
#pf .pf-intro-top { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-bottom:56px; }
#pf .pf-intro h2 { font-size:48px; font-weight:700; line-height:1.2; }
#pf .pf-intro .lead { max-width:440px; font-size:17px; line-height:1.8; color:var(--sub); }
#pf .pf-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#pf .pf-stats > div { padding:26px 0 28px 28px; border-right:1px solid var(--line); }
#pf .pf-stats > div:first-child { padding-left:0; }
#pf .pf-stats > div:last-child { border-right:0; }
#pf .pf-stats b { display:block; color:var(--text); font-family:'Outfit', sans-serif; font-size:36px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; }
#pf .pf-stats span { font-size:12px; letter-spacing:.16em; color:var(--mute); text-transform:uppercase; }

/* 분야 필터 */
#pf .pf-filter { position:relative; z-index:2; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#pf .pf-filter .pf-wrap { display:flex; align-items:center; gap:8px; height:84px; overflow-x:auto; scrollbar-width:none; }
#pf .pf-filter .pf-wrap::-webkit-scrollbar { display:none; }
#pf .pf-chip { flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px; border-radius:999px; border:1px solid #3a3a3d; font-size:14px; font-weight:400; color:var(--sub); transition:all .2s; }
#pf .pf-chip small { font-size:12px; color:var(--mute); }
#pf .pf-chip:hover { border-color:#777; color:var(--text); }
#pf .pf-chip.on { background:var(--accent); border-color:var(--accent); color:#111; font-weight:600; }
#pf .pf-chip.on small { color:rgba(17,17,17,.6); }

/* 대표 프로젝트 */
#pf .pf-featured { display:grid; grid-template-columns:1.55fr 1fr; gap:56px; align-items:center; }
#pf .pf-featured .pf-img { aspect-ratio:16/10; border-radius:20px; }
#pf .pf-featured h2 { font-size:38px; font-weight:700; margin:16px 0 6px; }
#pf .pf-featured .en { color:var(--mute); font-size:15px; margin-bottom:22px; }
#pf .pf-featured .desc { margin:22px 0 28px; line-height:1.8; }
#pf .pf-meta { display:flex; flex-wrap:wrap; gap:12px 36px; border-top:1px solid var(--line); padding-top:20px; margin:0 0 30px; }
#pf .pf-meta dt { font-size:12px; color:var(--mute); letter-spacing:.06em; line-height:1.4; }
#pf .pf-meta dd { margin:4px 0 0; color:var(--text); font-weight:500; font-size:15px; line-height:1.4; }

/* 이미지 공통 */
#pf .pf-img { position:relative; display:block; overflow:hidden; background:#222 center/cover no-repeat; }
#pf .pf-img > i { position:absolute; inset:0; background:inherit; background-size:cover; background-position:center; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
#pf a:hover .pf-img > i { transform:scale(1.04); }
#pf .pf-play { position:absolute; left:14px; top:14px; z-index:1; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; background:rgba(17,17,17,.75); color:#fff; font-size:12px; font-weight:500; }

/* 카드 그리드 */
#pf .pf-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:36px; }
#pf .pf-head h2 { font-size:32px; font-weight:700; }
#pf .pf-head .count { color:var(--mute); font-size:14px; }
#pf .pf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:56px 28px; }
#pf .pf-card .pf-img { aspect-ratio:4/3; border-radius:var(--r); }
#pf .pf-card-top { display:flex; justify-content:space-between; align-items:center; margin:18px 0 8px; font-size:13px; color:var(--mute); }
#pf .pf-card-top .cat { color:var(--accent); font-weight:500; }
#pf .pf-card h3 { font-size:19px; font-weight:500; line-height:1.45; }
#pf .pf-card .en { font-size:13px; color:var(--mute); margin:2px 0 0; }
#pf .pf-card .pf-tags { margin-top:12px; }
#pf .pf-card.is-hidden { display:none; }
#pf .pf-more { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:64px; }
#pf .pf-progress { width:200px; height:2px; background:var(--line); position:relative; }
#pf .pf-progress i { position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
#pf .pf-more span { font-size:13px; color:var(--mute); }
#pf .pf-empty { padding:80px 0; text-align:center; color:var(--mute); }

/* 아카이브 */
#pf .pf-arch-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:44px; }
#pf .pf-arch-head h2 { font-size:32px; font-weight:700; }
#pf .pf-year { display:grid; grid-template-columns:200px 1fr; border-top:2px solid #444; padding-top:6px; margin-bottom:52px; }
#pf .pf-year-no { font-family:'Outfit', sans-serif; font-size:54px; font-weight:700; color:var(--text); line-height:1; padding-top:18px; }
#pf .pf-year-no small { display:block; font-size:13px; font-weight:400; color:var(--mute); margin-top:10px; }
#pf .pf-rows { list-style:none; margin:0; padding:0; }
#pf .pf-rows li { border-bottom:1px solid var(--line); }
#pf .pf-rows a, #pf .pf-rows .pf-row-text { display:grid; grid-template-columns:1fr 240px 120px 24px; gap:20px; align-items:center; padding:20px 0; transition:color .2s; }
#pf .pf-rows a:hover { color:var(--accent); }
#pf .pf-rows a:hover .t { color:var(--accent); }
#pf .pf-rows .t { color:var(--text); font-weight:500; font-size:17px; transition:color .2s; }
#pf .pf-rows .a { font-size:15px; }
#pf .pf-rows .pf-tag { justify-self:start; }
#pf .pf-rows svg { width:20px; height:20px; }

/* CTA */
#pf .pf-cta { background:var(--accent); color:#111; padding:72px 0; }
#pf .pf-cta .pf-wrap { display:flex; justify-content:space-between; align-items:center; gap:32px; }
#pf .pf-cta h2 { color:#111; font-size:30px; font-weight:700; line-height:1.4; }
#pf .pf-cta .btns { display:flex; gap:10px; flex-wrap:wrap; }
#pf .pf-cta .pf-btn.dark { background:#111; color:#fff; }
#pf .pf-cta .pf-btn.dark:hover { background:#333; }
#pf .pf-cta .pf-btn.ghost { border:1px solid rgba(17,17,17,.4); color:#111; }
#pf .pf-cta .pf-btn.ghost:hover { background:rgba(17,17,17,.08); }

/* ---------- 상세 ---------- */
#pf .pf-cover { position:relative; height:760px; min-height:520px; max-height:90vh; color:#fff; background:#000 center/cover no-repeat; }
#pf .pf-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.15) 55%, rgba(17,17,17,.95) 100%); }
#pf .pf-cover .pf-wrap { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:64px; }
#pf .pf-crumb { font-size:13px; color:rgba(255,255,255,.7); display:flex; gap:10px; margin-bottom:22px; }
#pf .pf-crumb a:hover { color:var(--accent); }
#pf .pf-cover h1 { font-size:68px; font-weight:700; line-height:1.12; margin:18px 0 10px; word-break:keep-all; }
#pf .pf-cover .en { font-size:18px; color:rgba(255,255,255,.7); }
#pf .pf-cover .pf-tag { background:rgba(255,255,255,.14); color:#fff; }
#pf .pf-cover .pf-tag.cat { background:var(--accent); color:#111; }
#pf .pf-info { border-bottom:1px solid var(--line); }
#pf .pf-info .pf-wrap { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-top:34px; padding-bottom:34px; }
#pf .pf-info dl { display:flex; flex-wrap:wrap; gap:14px 60px; margin:0; }
#pf .pf-info dt { font-size:12px; color:var(--mute); letter-spacing:.08em; line-height:1.4; }
#pf .pf-info dd { margin:4px 0 0; color:var(--text); font-weight:500; font-size:16px; line-height:1.4; }
#pf .pf-info .btns { display:flex; gap:10px; flex:none; }
#pf .pf-overview { display:grid; grid-template-columns:320px 1fr; gap:80px; }
#pf .pf-overview h2 { font-size:28px; font-weight:700; line-height:1.4; }
#pf .pf-overview .body { font-size:18px; line-height:1.9; color:var(--sub); }
#pf .pf-video { position:relative; aspect-ratio:16/9; border-radius:24px; overflow:hidden; background:#000; margin-bottom:20px; }
#pf .pf-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#pf .pf-gal { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
#pf .pf-gal figure { margin:0; }
#pf .pf-gal figure.full { grid-column:span 2; }
#pf .pf-gal img { display:block; width:100%; height:auto !important; border-radius:20px; background:#222; }
#pf .pf-pn { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#pf .pf-pn a { display:flex; gap:20px; align-items:center; padding:34px 0; min-width:0; }
#pf .pf-pn a + a, #pf .pf-pn span + a { border-left:1px solid var(--line); padding-left:40px; justify-content:flex-end; text-align:right; }
#pf .pf-pn .pf-img { width:120px; height:90px; border-radius:12px; flex:none; }
#pf .pf-pn small { display:block; font-size:12px; color:var(--mute); letter-spacing:.1em; margin-bottom:6px; }
#pf .pf-pn b { display:block; color:var(--text); font-size:18px; font-weight:500; line-height:1.4; }
#pf .pf-pn a:hover b { color:var(--accent); }
#pf .pf-center { display:flex; justify-content:center; margin-top:40px; }
#pf .pf-404 { padding:220px 0 140px; text-align:center; }
#pf .pf-404 h1 { font-size:30px; margin-bottom:26px; }

/* ---------- 모바일 ---------- */
@media (max-width:1024px) {
  #pf .pf-cards { grid-template-columns:repeat(2,1fr); }
  #pf .pf-featured { gap:36px; }
  #pf .pf-rows a, #pf .pf-rows .pf-row-text { grid-template-columns:1fr 200px 24px; }
  #pf .pf-rows .pf-tag { display:none; }
}
@media (max-width:760px) {
  #pf .pf-wrap { padding:0 20px; }
  #pf .pf-sec { padding:60px 0; }
  #pf .pf-intro { padding-top:56px; }
  #pf .pf-intro-top { flex-direction:column; align-items:flex-start; gap:16px; padding-bottom:36px; }
  #pf .pf-intro h2 { font-size:32px; }
  #pf .pf-intro .lead { font-size:15px; }
  #pf .pf-stats { grid-template-columns:1fr 1fr; }
  #pf .pf-stats > div { padding:20px 0 22px 20px; }
  #pf .pf-stats > div:nth-child(odd) { padding-left:0; }
  #pf .pf-stats > div:nth-child(2) { border-right:0; }
  #pf .pf-stats > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  #pf .pf-stats b { font-size:26px; }
  #pf .pf-filter .pf-wrap { height:68px; }
  #pf .pf-chip { height:36px; padding:0 14px; font-size:13px; }
  #pf .pf-featured { grid-template-columns:1fr; gap:24px; }
  #pf .pf-featured .pf-img { aspect-ratio:4/3; border-radius:16px; }
  #pf .pf-featured h2 { font-size:26px; }
  #pf .pf-featured .pf-btn { width:100%; }
  #pf .pf-head h2, #pf .pf-arch-head h2 { font-size:24px; }
  #pf .pf-arch-head { flex-direction:column; align-items:flex-start; }
  #pf .pf-cards { grid-template-columns:1fr; gap:40px; }
  #pf .pf-year { grid-template-columns:1fr; }
  #pf .pf-year-no { font-size:38px; display:flex; align-items:baseline; gap:10px; padding:12px 0 4px; }
  #pf .pf-year-no small { margin:0; }
  #pf .pf-rows a, #pf .pf-rows .pf-row-text { grid-template-columns:1fr 20px; gap:4px 12px; padding:16px 0; }
  #pf .pf-rows .t { font-size:16px; grid-column:1; }
  #pf .pf-rows .a { font-size:13px; color:var(--mute); grid-column:1; grid-row:2; }
  #pf .pf-rows svg { grid-column:2; grid-row:1 / span 2; }
  #pf .pf-cta { padding:52px 0; }
  #pf .pf-cta .pf-wrap { flex-direction:column; align-items:stretch; }
  #pf .pf-cta h2 { font-size:22px; }
  #pf .pf-cta .pf-btn { flex:1; }
  #pf .pf-cover { height:600px; }
  #pf .pf-cover h1 { font-size:36px; }
  #pf .pf-cover .en { font-size:15px; }
  #pf .pf-cover .pf-wrap { padding-bottom:40px; }
  #pf .pf-info .pf-wrap { flex-direction:column; align-items:stretch; padding-top:26px; padding-bottom:26px; }
  #pf .pf-info dl { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
  #pf .pf-info .btns .pf-btn { flex:1; padding:0 12px; }
  #pf .pf-overview { grid-template-columns:1fr; gap:18px; }
  #pf .pf-overview h2 { font-size:22px; }
  #pf .pf-overview .body { font-size:16px; }
  #pf .pf-video { border-radius:16px; }
  #pf .pf-gal { grid-template-columns:1fr; gap:12px; }
  #pf .pf-gal figure.full { grid-column:auto; }
  #pf .pf-gal img { border-radius:14px; }
  #pf .pf-pn { grid-template-columns:1fr; }
  #pf .pf-pn a { padding:20px 0; }
  #pf .pf-pn a + a, #pf .pf-pn span + a { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  #pf .pf-pn .pf-img { width:88px; height:66px; }
  #pf .pf-pn b { font-size:15px; }
}

#pf .pf-rows .pf-row-text .t { color:#b5b5b8; }