/* 포트폴리오 상세 공통 (피그마 「포트폴리오 상세 — C안」 node 246:2829, 1920px 기준) */

.portfolio-view { background: #fff; color: #000; }
/* 자간은 피그마 그대로 -2.5%. 글자 크기가 바뀌어도 비율이 유지되도록 em 으로 요소마다 겁니다 */
.portfolio-view, .portfolio-view * { letter-spacing: -0.025em; }
.portfolio-view .pf-inner { max-width: 1440px; margin: 0 auto; }

/* 1. 첫 화면 */
.portfolio-view .pf-hero { position: relative; display: flex; align-items: center; justify-content: center; height: 60vh; text-align: center; color: #fff; }
/* 글자는 가운데 정렬. 폭·좌우 여백은 아래 섹션과 같은 pf-inner 를 같이 씀 */
.portfolio-view .pf-hero-inner { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.portfolio-view .pf-hero-title { margin: 0; font-size: 48px; font-weight: 700; line-height: normal; text-wrap: pretty; }
.portfolio-view .pf-hero-sub { margin: 0; font-size: 24px; font-weight: 500; line-height: normal; text-wrap: balance; line-height: 1.6; }

/* 스크롤 안내 — 마우스 모양 + SCROLL, 전체가 위아래로 떠다니고 안의 휠 점이 아래로 내려감 */
/* 첫 화면 글자가 다 올라온 뒤(1.2초) 나타나고, 그다음부터 떠다닙니다 */
.portfolio-view .pf-scroll { position: absolute; left: 50%; bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: inherit; transform: translateX(-50%); animation: pf-fade-in 1s ease-out 1.2s both, pf-scroll-float 2s ease-in-out 2.2s infinite; }
.portfolio-view .pf-scroll:hover, .portfolio-view .pf-scroll:focus { color: inherit; text-decoration: none; }
.portfolio-view .pf-scroll-mouse { position: relative; display: block; width: 26px; height: 42px; border: 2px solid currentColor; border-radius: 13px; opacity: .8; }
.portfolio-view .pf-scroll-mouse::before { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: pf-scroll-wheel 1.6s ease-in-out infinite; }
/* 영문 대문자 라벨이라 피그마 자간(-2.5%) 대신 넓게 벌립니다 */
.portfolio-view .pf-scroll-text { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .2em; opacity: .8; }

@keyframes pf-scroll-float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}
@keyframes pf-scroll-wheel {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(12px); }
}
/* 2. 정보 카드 */
/* 어두운 배경은 첫 화면으로 옮기고, 정보 카드는 흰 바탕에 짙은 글자 */
.portfolio-view .pf-info { padding: 120px 0; }
.portfolio-view .pf-info-card {  }
/* 두 열을 각각 세로 Flex로 쌓아 반대쪽 항목의 높이에 영향을 받지 않습니다. */
.portfolio-view .pf-info-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 60px; margin: 0; }
.portfolio-view .pf-info-column { flex: 0 0 calc(50% - 30px); min-width: 0; display: flex; flex-direction: column; gap: 28px; margin: 0; }
.portfolio-view .pf-info-item { min-width: 0; display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }
.portfolio-view .pf-info-item dt { font-size: 16px; font-weight: 500; color: #505050; }
.portfolio-view .pf-info-item dd { min-width: 0; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.6; color: #111; word-break: keep-all; overflow-wrap: anywhere; }
/* 여러 문장 항목 — 한 문장에 한 줄, 앞에 동그라미. 줄이 넘어가도 둘째 줄이 동그라미 밑이 아니라 글자 시작선에 맞춰집니다 */
.portfolio-view .pf-info-list { margin: 0; padding: 0; list-style: none; }
.portfolio-view .pf-info-list li { position: relative; padding-left: 16px; word-break: keep-all; }
.portfolio-view .pf-info-list li + li { margin-top: 4px; }
/* 동그라미는 첫 줄 가운데 높이(줄 높이 1.6 의 절반 = 0.8em)에 맞춥니다 */
.portfolio-view .pf-info-list li::before { content: ''; position: absolute; top: calc(0.8em - 2px); left: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.portfolio-view .pf-site-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 48px; padding: 12px 36px; border-radius: 100px; background: #111; font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; transition: all .3s ease-out; }
/* 부트스트랩 링크 호버색(파랑·밑줄)이 덮지 않게 흰 글자를 붙잡아 둡니다 */
.portfolio-view .pf-site-btn:hover, .portfolio-view .pf-site-btn:focus { color: #fff; text-decoration: none; transform: translateY(-5px); }
/* 화살표 아이콘 파일이 검은 선이라 짙은 버튼 위에서 흰색으로 뒤집습니다 */
.portfolio-view .pf-site-btn img { display: block; width: 22px; height: 22px; filter: invert(1); }

/* 3. 디자인 시스템 */
.portfolio-view .pf-colors { padding: 120px 0; }
.portfolio-view .pf-section-title { margin: 0 0 48px; font-size: 32px; font-weight: 700; line-height: normal; line-height: 1.4; }
.portfolio-view .pf-color-row { display: flex; }
.portfolio-view .pf-color { flex: 1 1 0; display: flex; align-items: flex-end; height: 340px; padding: 40px; font-size: 26px; font-weight: 700; line-height: 1.4; color: #171717; }
.portfolio-view .pf-color.is-dark { color: #fff; }
/* 서체 — 색 줄 바로 밑에 붙는 두 칸. 위에 Kor/Eng 라벨, 아래에 그 서체로 쓴 서체 이름 */
.portfolio-view .pf-type-row { display: flex; }
.portfolio-view .pf-type { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; height: 240px; padding: 40px; background: #f7f7f7; }
.portfolio-view .pf-type + .pf-type { border-left: 1px solid #dcdcdc; }
.portfolio-view .pf-type-label { padding: 4px 16px; border: 1px solid #c4c4c4; border-radius: 100px; font-size: 16px; font-weight: 500; line-height: 1.4; color: #505050; }
.portfolio-view .pf-type-name { font-family: 'Pretendard', sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: #111; }

/* 4. 목업 — PC용·모바일용 두 장. 768px 이상은 PC용, 767px 이하는 모바일용만 보입니다 */
.portfolio-view .pf-mockup-item img { display: block; width: 100%; height: auto; }
.portfolio-view .pf-mockup-mo { display: none; }
/* 이미지 자리 (is-empty) */
.portfolio-view .pf-mockup-item.is-empty { height: 560px; background: #dcdcdc; }
.portfolio-view .pf-mockup-item p { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.4; }

/* 5. 디자인 이미지 — 2단, 단마다 세로로 이어짐 (왼쪽 단을 다 채우고 오른쪽 단으로 넘어감) */
.portfolio-view .pf-design { padding: 120px 0; }
.portfolio-view .pf-design-title { margin: 0 0 44px; font-size: 32px; font-weight: 700; line-height: 1.4; }
.portfolio-view .pf-design-grid { column-count: 2; column-gap: 80px; }
.portfolio-view .pf-design-item { overflow: hidden; margin: 0 0 80px; border-radius: 12px; box-shadow: 3px 4px 34px 0 rgba(0, 0, 0, 0.15); break-inside: avoid; -webkit-column-break-inside: avoid; }
/* 이미지가 1장뿐이면 2단으로 나누지 않고 그 1장을 전체 폭으로 보여줍니다 */
.portfolio-view .pf-design-item:only-child { column-span: all; }
.portfolio-view .pf-design-item img { display: block; width: 100%; height: auto; }
.portfolio-view .pf-design-item.is-empty { background: #f7f7f7; }
.portfolio-view .pf-design-item.is-empty:nth-child(4n+2) { background: #dcdcdc; }
.portfolio-view .pf-design-item.is-empty:nth-child(4n+3) { background: #c4c4c4; }

/* 6. 모션
 * 움직임은 한 가지 말투로 통일합니다 — '보이지 않는 선 아래에서 올라오기'와 '천천히 멈추기'.
 * 같은 감속 곡선을 사용하되 본문은 짧고 차분하게, 제목과 이미지는 조금 더 여유 있게 움직입니다.
 * 첫 화면은 CSS 만으로, 그 아래는 js/motion.js 가 <html> 에 pf-motion 을 붙였을 때만 움직입니다. */
.portfolio-view { --pf-ease: cubic-bezier(.19, 1, .22, 1); }

/* 글자 올라오기: 요소를 자기 높이만큼 내려 두고, 내린 만큼 아래를 잘라 둡니다.
 * 둘을 같은 곡선으로 함께 0 으로 돌리면 원래 자리의 밑선에서 글자가 솟아오르는 것처럼 보입니다.
 * 위·옆은 글자 획이 잘리지 않게 넉넉히(-50%·-10%) 열어 둡니다 */
@keyframes pf-rise {
    from { transform: translateY(100%); clip-path: inset(-50% -10% 100% -10%); }
    to { transform: translateY(0); clip-path: inset(-50% -10% 0 -10%); }
}
@keyframes pf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 6-1. 첫 화면 — 페이지를 열면 제목, 0.2초 뒤 부제목이 올라옵니다 */
.portfolio-view .pf-hero-title { animation: pf-rise 1.4s var(--pf-ease) .2s both; }
.portfolio-view .pf-hero-sub { animation: pf-rise 1.4s var(--pf-ease) .4s both; }
/* 스크롤하면 글자가 느리게 따라 내려가며 흐려집니다 (값은 motion.js 가 넣음) */
.pf-motion .portfolio-view .pf-hero { overflow: hidden; }
.pf-motion .portfolio-view .pf-hero-inner { transform: translate3d(0, var(--pf-hero-shift, 0px), 0); opacity: var(--pf-hero-fade, 1); }

/* 6-2. 섹션 제목·서체 이름 — 첫 화면 제목과 같은 방식으로 올라옵니다 */
.pf-motion .portfolio-view .pf-section-title,
.pf-motion .portfolio-view .pf-design-title,
.pf-motion .portfolio-view .pf-type-name { transform: translateY(100%); clip-path: inset(-50% -10% 100% -10%); transition: transform 1.2s var(--pf-ease) var(--pf-delay, 0s), clip-path 1.2s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-section-title.is-in,
.pf-motion .portfolio-view .pf-design-title.is-in,
.pf-motion .portfolio-view .pf-type.is-in .pf-type-name { transform: translateY(0); clip-path: inset(-50% -10% 0 -10%); }
.pf-motion .portfolio-view .pf-type-name { transition-delay: calc(var(--pf-delay, 0s) + .15s); }

/* 6-3. 정보 카드 — 항목이 짧은 거리만 조용히 떠오릅니다. 버튼은 호버 움직임과 겹치지 않게 투명도만 */
.pf-motion .portfolio-view .pf-info-item { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--pf-ease) var(--pf-delay, 0s), transform 1.2s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-info-item.is-in { opacity: 1; transform: translateY(0); }
.pf-motion .portfolio-view .pf-site-btn { opacity: 0; transition: opacity 1s var(--pf-ease) var(--pf-delay, 0s), transform .3s ease-out; }
.pf-motion .portfolio-view .pf-site-btn.is-in { opacity: 1; }

/* 6-4. 색상 칸 — 아래에서 위로 칠해지듯 열리고, 칸이 거의 다 열릴 즈음 이름이 떠오릅니다 */
.pf-motion .portfolio-view .pf-color { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-color.is-in { clip-path: inset(0 0 0 0); }
.pf-motion .portfolio-view .pf-color span { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--pf-ease) calc(var(--pf-delay, 0s) + .45s), transform 1.1s var(--pf-ease) calc(var(--pf-delay, 0s) + .45s); }
.pf-motion .portfolio-view .pf-color.is-in span { opacity: 1; transform: translateY(0); }
.pf-motion .portfolio-view .pf-type-label { opacity: 0; transition: opacity 1s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-type.is-in .pf-type-label { opacity: 1; }

/* 6-5. 디자인 이미지 — 칸이 올라오는 동안 안의 이미지는 살짝 확대된 상태에서 천천히 제자리로 */
.pf-motion .portfolio-view .pf-design-item { opacity: 0; transform: translateY(64px); transition: opacity 1.2s var(--pf-ease) var(--pf-delay, 0s), transform 1.6s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-design-item.is-in { opacity: 1; transform: translateY(0); }
.pf-motion .portfolio-view .pf-design-item img { transform: scale(1.12); transition: transform 2.2s var(--pf-ease) var(--pf-delay, 0s); }
.pf-motion .portfolio-view .pf-design-item.is-in img { transform: scale(1); }

/* 6-6. 본문·작업 항목 — 레이아웃은 고정하고 투명도와 짧은 수직 이동만 사용합니다. */
.pf-motion .portfolio-view .pf-breadcrumb,
.pf-motion .portfolio-view .pf-case-lead,
.pf-motion .portfolio-view .pf-case-row,
.pf-motion .portfolio-view .pf-deliverables > li,
.pf-motion .portfolio-view .pf-style-note,
.pf-motion .portfolio-view .pf-screen-slider {
    opacity: 0;
    transform: translate3d(0, var(--pf-reveal-distance, 24px), 0);
    transition: opacity .8s var(--pf-ease) var(--pf-delay, 0s), transform 1.1s var(--pf-ease) var(--pf-delay, 0s);
}
.portfolio-view .pf-breadcrumb { --pf-reveal-distance: 12px; }
.portfolio-view .pf-case-lead, .portfolio-view .pf-style-note { --pf-reveal-distance: 18px; }
/* 가로 무한 슬라이드는 내부 wrapper가, 첫 등장은 바깥 컨테이너가 각각 담당합니다. */
.portfolio-view .pf-screen-slider { --pf-reveal-distance: 32px; }
.pf-motion .portfolio-view .pf-breadcrumb.is-in,
.pf-motion .portfolio-view .pf-case-lead.is-in,
.pf-motion .portfolio-view .pf-case-row.is-in,
.pf-motion .portfolio-view .pf-deliverables > li.is-in,
.pf-motion .portfolio-view .pf-style-note.is-in,
.pf-motion .portfolio-view .pf-screen-slider.is-in { opacity: 1; transform: translate3d(0, 0, 0); }
/* 키보드로 링크나 갤러리에 접근할 때는 등장을 기다리지 않습니다. */
.pf-motion .portfolio-view .pf-breadcrumb:focus-within,
.pf-motion .portfolio-view .pf-screen-slider:focus-within { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .portfolio-view .pf-scroll, .portfolio-view .pf-scroll-mouse::before,
    .portfolio-view .pf-hero-title, .portfolio-view .pf-hero-sub { animation: none; }
    .pf-motion .portfolio-view .pf-hero-inner,
    .pf-motion .portfolio-view .pf-info-item,
    .pf-motion .portfolio-view .pf-site-btn,
    .pf-motion .portfolio-view .pf-section-title,
    .pf-motion .portfolio-view .pf-design-title,
    .pf-motion .portfolio-view .pf-color,
    .pf-motion .portfolio-view .pf-color span,
    .pf-motion .portfolio-view .pf-type-label,
    .pf-motion .portfolio-view .pf-type-name,
    .pf-motion .portfolio-view .pf-design-item,
    .pf-motion .portfolio-view .pf-design-item img,
    .pf-motion .portfolio-view .pf-breadcrumb,
    .pf-motion .portfolio-view .pf-case-lead,
    .pf-motion .portfolio-view .pf-case-row,
    .pf-motion .portfolio-view .pf-deliverables > li,
    .pf-motion .portfolio-view .pf-style-note,
    .pf-motion .portfolio-view .pf-screen-slider {
        opacity: 1; transform: none; clip-path: none; transition: none;
    }
}

/* 1440px 컨테이너가 안 들어가는 화면 */
@media (max-width: 1520px) {
    .portfolio-view .pf-inner { padding: 0 40px; }
}

@media (max-width: 991px) {
    .portfolio-view .pf-hero-title { font-size: 40px; }
    .portfolio-view .pf-hero-sub { font-size: 22px; }
    .portfolio-view .pf-info, .portfolio-view .pf-colors { padding: 80px 0; }
    .portfolio-view .pf-design { padding: 120px 0; }
    .portfolio-view .pf-color { height: 240px; padding: 28px; font-size: 20px; }
    .portfolio-view .pf-type { height: 180px; padding: 28px; }
    .portfolio-view .pf-type-name { font-size: 40px; }
    .portfolio-view .pf-mockup-item.is-empty { height: 400px; }
    .portfolio-view .pf-design-grid { column-gap: 40px; }
    .portfolio-view .pf-design-item { margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .portfolio-view .pf-inner { padding: 0 20px; }
    .portfolio-view .pf-hero { min-height: 480px; }
    .portfolio-view .pf-hero-inner { gap: 12px; }
    .portfolio-view .pf-hero-title { font-size: 28px; text-wrap: balance; }
    .portfolio-view .pf-hero-sub { font-size: 16px; }
    .portfolio-view .pf-scroll { bottom: 24px; gap: 8px; }
    .portfolio-view .pf-scroll-mouse { width: 22px; height: 36px; border-radius: 11px; }
    .portfolio-view .pf-info, .portfolio-view .pf-colors { padding: 60px 0; }
    .portfolio-view .pf-info-grid { gap: 20px; }
    .portfolio-view .pf-info-column { flex-basis: 100%; gap: 20px; }
    .portfolio-view .pf-info-item dt { font-size: 14px; }
    .portfolio-view .pf-info-item dd { font-size: 16px; text-wrap: pretty; }
    .portfolio-view .pf-site-btn { margin-top: 32px; padding: 10px 24px; font-size: 16px; }
    .portfolio-view .pf-section-title { margin: 0 0 24px; font-size: 24px; }
    .portfolio-view .pf-color-row { flex-direction: column; }
    .portfolio-view .pf-color { flex: none; height: 120px; padding: 20px; font-size: 18px; }
    .portfolio-view .pf-type-row { flex-direction: column; }
    .portfolio-view .pf-type { flex: none; height: auto; gap: 16px; padding: 20px; }
    .portfolio-view .pf-type + .pf-type { border-left: 0; border-top: 1px solid #dcdcdc; }
    .portfolio-view .pf-type-label { font-size: 14px; }
    .portfolio-view .pf-type-name { font-size: 28px; }
    .portfolio-view .pf-mockup-pc { display: none; }
    .portfolio-view .pf-mockup-mo { display: block; }
    .portfolio-view .pf-mockup-item.is-empty { height: 260px; }
    .portfolio-view .pf-mockup-item p { font-size: 20px; }
    .portfolio-view .pf-design { padding: 80px 0; }
    .portfolio-view .pf-design-title { margin: 0 0 24px; font-size: 24px; }
    .portfolio-view .pf-design-grid { column-count: 1; }
    .portfolio-view .pf-design-item { margin-bottom: 24px; }
}