@charset "utf-8";
/* ==========================================================================
   PF-LIST · 포트폴리오 목록 / PF-VIEW · 포트폴리오 상세
   구조·치수: ideadoit.com/doit/works.html · view_selected_works.html (component.css .list_type2 · .detail_type1) 그대로
     목록 - 화면 폭 전체 2열, 칸 사이 1px 선(#010101), 배경 #0f0f0f, 썸네일 비율 100 : 76.7
          - 마우스를 올리면 어두운 막(.6) + 아래쪽 흰 선 2px 위 '제목 / 연도 / 분류' 띠(53px) + 오른쪽 화살표
          - 1023px 이하는 막을 숨기고 썸네일만, 모바일도 2열 유지
     상세 - 이미지를 화면 폭 전체(width 100%)로 틈 없이 쌓는다. width/height 속성으로 원본 비율 유지, 자르지 않음
          - 문구 단락: 20px / 500 / 34px, 좌우 17px (1023px 이하 18px / 300 / 30px, 좌우 15px)
   글꼴: Pretendard (파머스브랜딩 공통). 원본 고유 값(#0f0f0f, #010101)은 IDEADOIT 목록 재현용으로만 쓴다.
   ========================================================================== */
.pfm { padding-top: var(--header-offset); letter-spacing: -0.02em; }
.pfm p { margin: 0; }
.pfm picture { display: block; }
.pfm img, .pfm video { display: block; }

/* ---------- PF-LIST ---------- */
.pf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--fb-ink); }
.pf-item { position: relative; min-width: 0; border-bottom: 1px solid var(--fb-ink); }
.pf-item:nth-child(odd)::after { content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: var(--fb-ink); z-index: 1; }
.pf-link { position: relative; display: block; color: inherit; text-decoration: none; }
.pf-link:focus-visible { outline: 2px solid var(--fb-point); outline-offset: -2px; }

.pf-thumb { position: relative; width: 100%; aspect-ratio: 100 / 76.7; overflow: hidden; }
.pf-thumb picture { position: absolute; inset: 0; }
.pf-thumb .pf-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pf-thumb.fade-bg { opacity: 0; transition: opacity .3s ease; }
.pf-thumb.fade-bg.is-loaded { opacity: 1; }
.pf-thumb.is-empty { display: flex; align-items: center; justify-content: center; }
.pf-thumb.is-empty span { font-size: 13px; color: var(--fb-ink-300); }

.pf-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .5s ease-out; }
.pf-link:hover .pf-overlay, .pf-link:focus-visible .pf-overlay { opacity: 1; }
.pf-info {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 56px 0 15px; border-top: 2px solid var(--fb-paper);
    font-size: 16px; font-weight: 400; line-height: 53px; color: var(--fb-paper);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-info strong { font-weight: 400; }
.pf-info span { display: inline-block; position: relative; top: -1px; width: 33px; font-size: 12px; text-align: center; }
/* 원본 오른쪽 화살표(arw1.png, 29px)를 SVG 로 */
.pf-info::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 29px; height: 14px; transform: translateY(-50%);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 14' fill='none' stroke='white' stroke-width='1.5'><path d='M0 7h27M21 1l6 6-6 6'/></svg>") no-repeat center / contain;
}

/* 목록 머리: 칼럼·지원사업과 같은 머리줄 + 제목 */
.pf-head { padding-top: 72px; padding-bottom: 48px; background: var(--fb-paper); }
.pf-head .works-bar { margin: 0; }
.pf-title { margin: 48px 0 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; color: var(--fb-ink); }
/* 1023px 이하: 마우스 오버 띠 대신 사진 아래에 이름 · 연도 */
.pf-cap { display: none; }

/* ---------- PF-VIEW ---------- */
.pv-body { background: var(--fb-paper); }
.pv-media { margin: 0 auto; }
.pv-media img, .pv-media video { width: 100%; max-width: 100%; height: auto; }
/* 큰 이미지가 그려지기 전까지 흰 화면 대신 옅은 바탕 */
.pv-media img { background: var(--fb-fog); }
.pv-video { position: relative; width: 100%; background: var(--fb-ink); }
.pv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-note, .pv-part { padding: 0 17px; font-size: 20px; font-weight: 500; line-height: 34px; letter-spacing: -0.5px; color: var(--fb-ink); word-break: break-all; }
.pv-note { padding-bottom: 30px; }
.pv-note a { color: inherit; }
/* 비터배터(원본 2건 통합): 각 원본 묶음 앞에 원래 이름·연도 (연도를 합치지 않음) */
.pv-part { display: flex; gap: 12px; padding-top: 30px; padding-bottom: 14px; }
.pv-part-year { font-weight: 400; color: var(--fb-ink-500); }
.pv-missing { padding: 60px 17px 20px; font-size: 18px; }
.pv-back { display: inline-block; margin: 0 17px 60px; color: var(--fb-ink); }

/* 목록으로 돌아가기 (원본에는 없는 최소 이동 줄) */
.pv-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 28px var(--fb-side) 100px; border-top: 1px solid var(--fb-line); background: var(--fb-paper); }
.pv-nav a { color: var(--fb-ink); text-decoration: none; }
.pv-nav a:focus-visible { outline: 2px solid var(--fb-point-text); outline-offset: 4px; }
.pv-nav-link { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pv-nav-link.is-next { text-align: right; }
.pv-nav-label { font-size: 13px; color: var(--fb-ink-500); }
.pv-nav-title { font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-nav-link:hover .pv-nav-title { color: var(--fb-point-text); }
.pv-nav-list { padding: 10px 22px; border: 1px solid var(--fb-ink); border-radius: 999px; font-size: 15px; font-weight: 500; }
.pv-nav-list:hover { background: var(--fb-point); border-color: var(--fb-point); }

@media (width <= 1023px) {
    .pf-overlay { display: none; }
    .pf-cap { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 18px; color: var(--fb-paper); }
    .pf-cap strong { font-size: 15px; font-weight: 500; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pf-cap span { font-size: 12px; color: var(--fb-ink-300); letter-spacing: 0; }
    .pv-note, .pv-part { padding-left: 15px; padding-right: 15px; font-size: 18px; font-weight: 300; line-height: 30px; }
    .pv-note { padding-bottom: 20px; }
}
@media (width <= 767px) {
    .pf-head { padding-top: 48px; padding-bottom: 32px; }
    .pf-title { margin-top: 32px; font-size: 28px; line-height: 1.35; }
    .pf-cap { padding: 10px 12px 14px; }
    .pf-cap strong { font-size: 14px; }
    .pf-thumb.is-empty span { font-size: 11px; }
    .pv-nav { gap: 12px; padding-bottom: 80px; }
    .pv-nav-title { font-size: 15px; }
    .pv-nav-list { padding: 8px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-thumb.fade-bg, .pf-overlay { transition: none; }
}