/* 프로젝트 상세 (project-*.html, make_work.py 가 생성). 디자인 원칙(CLAUDE.md) 토큰만 씀.
kuhlandhan 케이스 페이지에서 가져온 규칙: 맨 위 = 작은 라벨(--t-xs 검정) 바로 아래 큰 값, 칸마다 나란히.
맨 위 줄: ← Work 캡슐(목록으로) | 수상 배지(검은 박스 + 흰 로고 + 결과, 오른쪽 끝)
12칸 그리드 1줄: Type 1–3 | Project 4–8 (이름 + 설명) | Role 9–11 | Year 12
2줄: 링크 Behance·Exhibition(검정 밑줄 글자) 1–3 | 개요 4–8 | Credits 9–12 (팀 프로젝트만)
그다음 이미지 모듈은 모듈마다 폭·위치가 다름 (make_work.py LAYOUT). 지금은 전부 회색 자리 + "Image 03 · 4:5" 표시.
헤더·하단바·커서·컨택트 창·페이지 이동은 about / work 와 같음 */
.pj {
position: relative;
padding: calc(420 * var(--k)) var(--edge) calc(200 * var(--k));
color: var(--fg);
font-weight: 400;
letter-spacing: var(--track);
}
/* ---------- Behance 식 창 (pj-modal.js, 10-29) ----------
Work 위에 뜨는 가운데 창, 최대 1200px (이미지가 Behance 1400 원본 크기에 맞음 — 크게 펼치면 흐리고 스크롤이 너무 김).
바깥 = 어두운 블러, 창 안에서 스크롤, 오른쪽 위 ✕ (상단 메뉴 캡슐과 같은 메타볼) */
html.pj-modal-open { overflow: hidden; }
.pj-modal {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
background: rgba(14, 14, 14, 0.5);
-webkit-backdrop-filter: blur(18px) saturate(120%);
backdrop-filter: blur(18px) saturate(120%);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.4s;
}
.pj-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
/* 창 자체가 스크롤 → 스크롤바가 창 오른쪽 안에 (사용자 10-29). 상세 페이지와 같은 회색 캡슐 */
.pj-modal__sheet {
--top: max(56px, calc(120 * var(--k)));
position: relative;
width: min(1200px, calc(100vw - 2 * var(--edge)));
height: calc(100% - var(--top) - max(24px, calc(48 * var(--k))));
margin-top: var(--top);
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 16px;
background: var(--page-bg);
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
translate: 0 48px;
transition: translate 0.6s cubic-bezier(0.32, 0.72, 0, 1);
scrollbar-width: none; /* 기본 스크롤바는 숨기고, 창 오른쪽 바깥에 따로 긴 캡슐 (아래 .pj-modal__bar) */
}
.pj-modal__sheet::-webkit-scrollbar { display: none; }
/* 스크롤바 = 창 오른쪽 바깥에 떨어진 긴 캡슐 (사용자 10-29). 트랙은 옅은 유리, 손잡이는 상단 메뉴 글라스 톤 → 올리거나 잡으면 진하게.
위치·높이는 창과 같게 (창 폭 --w 기준으로 계산), 손잡이 크기·위치는 pj-modal.js */
.pj-modal { --w: min(1200px, calc(100vw - 2 * var(--edge))); }
.pj-modal__bar {
position: fixed;
top: max(56px, calc(120 * var(--k)));
bottom: max(24px, calc(48 * var(--k)));
left: calc(50vw + var(--w) / 2 + 8px); /* 창 오른쪽에 바로 붙여서 (사용자 10-29) */
width: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
cursor: pointer;
touch-action: none;
}
/* 10-30: 유리·선형·퍼지는 그라데이션 다 해 봤는데 사용자가 전부 "맨 처음으로" → 이 연한 트랙 + 밝은 손잡이 그대로 둘 것 */
.pj-modal__thumb {
position: absolute;
left: 0;
right: 0;
top: 0;
min-height: 48px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(225, 225, 225, 0.75), rgba(190, 190, 190, 0.65));
transition: background 0.25s;
}
.pj-modal__bar:hover .pj-modal__thumb, .pj-modal__bar.is-drag .pj-modal__thumb { background: linear-gradient(180deg, rgba(250, 250, 250, 0.95), rgba(215, 215, 215, 0.9)); }
@media (max-width: 760px) { .pj-modal__bar { display: none; } }
.pj-modal.is-open .pj-modal__sheet { translate: 0 0; }
.pj-modal .pj { padding: max(28px, calc(64 * var(--k))) max(20px, calc(56 * var(--k))) max(40px, calc(80 * var(--k))); }
.pj-modal .pj__modules { row-gap: 16px; column-gap: 16px; margin-top: max(40px, calc(96 * var(--k))); } /* 창 안은 이미지 사이 간격 촘촘히 */
.pj-modal .pj__next { margin-bottom: 0; }
.pj-modal__close { position: fixed; top: max(14px, calc(40 * var(--k))); right: max(14px, calc(40 * var(--k))); z-index: 2; height: 40px; }
.pj-modal__close .nav__item { padding: 0; border: 0; background: none; color: var(--fg-ui); cursor: pointer; }
.pj-modal__close .nav__item.is-active { color: #fff; }
.pj-modal__close svg { display: block; }
@media (max-width: 760px) { .pj-modal__sheet { width: calc(100vw - 16px); margin-top: 64px; } }
/* 더블클릭(file://)으로 상세 페이지를 바로 열 때도 같은 폭(1200)의 가운데 단 */
.project-page .pj > :is(.pj__top, .pj__info, .pj__modules, .pj__next) { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* ---------- 맨 위: ← Work · 수상 배지 ---------- */
.pj__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap);
margin-bottom: calc(var(--head-gap) * 1.5);
font-size: 13px;
letter-spacing: -0.01em;
}
.pj__top .nav { position: relative; height: 32px; font-size: 13px; letter-spacing: -0.01em; }
.pj .nav .nav__item { color: var(--fg-ui); }
.pj .nav .nav__item.is-active { color: #fff; }
.pj .nav .nav__item svg { display: block; flex: none; }
.pj__back .nav__item { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pj__awards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* 배지: 검은 박스 안에 흰 로고 + 세로 가는 선 + 결과 두 줄 (예: red dot | Winner / 2026) */
.pj__award {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 12px;
border-radius: 6px;
color: #fff;
background: #111;
}
.pj__award-logo { font-size: 14px; font-weight: 500; letter-spacing: -0.03em; white-space: nowrap; } /* 로고 자리 (지금은 글자) */
.pj__award-logo svg, .pj__award-logo img { display: block; height: 18px; width: auto; } /* 공식 흰색 로고 (assets/awards/) */
.pj__award-result {
display: flex;
flex-direction: column;
padding-left: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.35);
font-size: 10px;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
}
.pj__award-result span + span { opacity: 0.6; }
/* ---------- 정보 ---------- */
.pj__info, .pj__modules, .pj__next {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
}
.pj__info { align-items: start; row-gap: max(24px, calc(56 * var(--k))); }
.pj__cell { display: flex; flex-direction: column; min-width: 0; }
/* 10-29 창(1200)에 맞게 다시: ① 프로젝트 이름 크게 한 줄 ② Type | Role | Year | 링크 ③ 개요 | Credits */
.pj__cell--project { grid-column: 1 / -1; order: -1; }
.pj__cell--project .pj__label { display: none; } /* 큰 이름이라 "Project" 라벨은 필요 없음 */
.pj__cell--project .pj__value { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -0.02em; }
/* 제목 줄: 왼쪽 이름·설명 | 오른쪽 끝 수상 딱지 */
.pj__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.pj__title-row .pj__awards { flex: none; max-width: 60%; }
.pj-modal .pj__top { display: none; } /* 창에선 ← Work 없음 → 빈 줄도 없앰 */
@media (max-width: 760px) { .pj__title-row { flex-direction: column; } .pj__title-row .pj__awards { max-width: none; } }
/* 10-29 사용자: 제목 아래 글자 더 작게 → 창 폭(1200)이 고정이라 화면 크기와 상관없이 px 로 고정
값·역할·링크·개요 13px · 설명·기간 12px · 라벨 11px */
.pj__info .pj__cell:not(.pj__cell--project) .pj__value,
.pj__info .pj__role,
.pj__info .pj__link { font-size: 13px; line-height: 1.45; }
.pj__info .pj__role { padding-top: 0; }
.pj__info .pj__desc { font-size: 12px; line-height: 1.45; }
.pj__info .pj__label { font-size: 11px; color: var(--fg-2); }
.pj__info .pj__overview { font-size: 13px; line-height: 1.6; }
.pj__cell--type { grid-column: 1 / span 3; }
.pj__cell--role { grid-column: 4 / span 4; }
.pj__cell--year { grid-column: 8 / span 2; }
.pj__cell--links { grid-column: 10 / span 3; align-items: flex-start; row-gap: 0.3em; padding-top: 1.1em; }
.pj__cell--type, .pj__cell--role, .pj__cell--year, .pj__cell--links { padding-top: 14px; border-top: 1px solid var(--line); } /* 정보 줄 위 가는 선 */
.pj__cell--year .pj__desc { margin-top: 0.2em; }
/* 외부 링크(Behance·전시): 버튼 말고 검정 글자 + 밑줄 */
.pj__link { color: var(--fg); font-size: var(--t-md); line-height: var(--lh); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color 0.15s; }
.pj__link:hover { color: var(--fg-2); }
.pj__overview { grid-column: 1 / span 8; margin: 0; max-width: 46em; font-size: var(--t-sm); line-height: 1.55; }
.pj__cell--credits { grid-column: 9 / span 4; }
/* Credits: 이미지 다 본 뒤 맨 아래 (다음 프로젝트 위), 가는 선 아래 여러 칸 가로로 */
.pj__credits {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
margin-top: max(56px, calc(140 * var(--k)));
padding-top: 14px;
border-top: 1px solid var(--line);
}
.pj__credits > .pj__label { grid-column: 1 / span 3; color: var(--fg-2); }
.pj__credits .pj__credits-list { grid-column: 4 / span 9; margin: 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: var(--gap); row-gap: 14px; font-size: var(--t-xs); }
.project-page .pj > .pj__credits { max-width: 1200px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .pj__credits > .pj__label, .pj__credits .pj__credits-list { grid-column: 1 / -1; } .pj__credits .pj__credits-list { margin-top: 10px; } }
.pj__label { margin-bottom: 0.35em; font-size: var(--t-xs); line-height: 1; color: var(--fg); }
.pj__value { font-size: var(--t-lg); line-height: var(--lh-tight); }
.pj__role { padding-top: 0.3em; font-size: var(--t-md); line-height: var(--lh); } /* 큰 값과 윗선 맞춤 */
.pj__desc { margin: 0.5em 0 0; font-size: var(--t-md); line-height: var(--lh); color: var(--fg-2); }
.pj__credits-list { margin: 0.3em 0 0; display: grid; row-gap: 0.5em; font-size: var(--t-sm); line-height: var(--lh); }
.pj__credits-list dt { color: var(--fg-2); } /* 역할 (회색) */
.pj__credits-list dd { margin: 0; } /* 이름 */
/* ---------- 이미지 모듈 ---------- */
.pj__modules {
row-gap: max(24px, calc(64 * var(--k)));
margin-top: max(56px, calc(150 * var(--k)));
}
.pj__img {
position: relative;
margin: 0;
display: grid;
place-items: center;
--r: 14px; /* 상자 크기별 R 단계 ↓ (사용자 10-29: 작은 상자에 R 이 너무 큼) */
border-radius: var(--r);
overflow: hidden;
clip-path: inset(0 round var(--r)); /* 둥근 모서리를 한 번 더 깔끔히 잘라 가장자리에 검은·회색 실선이 비치지 않게 (10-29) */
background: linear-gradient(#e6e6e6, #d6d6d6);
}
/* R 단계: 전체 폭 16 · 10~8칸 14 · 6칸 12 · 4칸 8 · 3칸 이하 6 (px) — 상자 폭에 비례해 줄어 보이게 */
.pj__img--w12, .pj__img--w11 { --r: 16px; }
.pj__img--w10, .pj__img--w9, .pj__img--w8, .pj__img--w7 { --r: 14px; }
.pj__img--w6, .pj__img--w5 { --r: 12px; }
.pj__img--w4 { --r: 8px; }
.pj__img--w3, .pj__img--w2, .pj__img--w1 { --r: 6px; }
/* 같은 크기 여러 장 묶음 (영상 스틸 등): 촘촘한 격자 한 덩어리 */
.pj__group { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
/* 바로 위 모듈(메인 영상)에 붙임: 모듈 간격을 빼고 묶음 안 간격(6px)만 남김 */
/* 묶음 안 작은 칸은 clip-path 안 씀 (Rectism 180칸 = 칸마다 마스크라 창 스크롤이 버벅임, 10-31)
content-visibility:auto 는 쓰지 않음 — 화면 밖 묶음 높이를 어림값으로 잡아 스크롤 길이가 내려가면서 바뀜 (사용자 10-31). 모든 칸은 aspect-ratio 로 처음부터 제 높이 */
.pj__group .pj__img { clip-path: none; }
.pj__group--attach { margin-top: calc(6px - max(24px, calc(64 * var(--k)))); }
.pj-modal .pj__group--attach { margin-top: -10px; }
.pj__img:has(img) { background: none; } /* 사진이 있으면 회색 바탕 없음 (가장자리 1px 에 비치던 것) */
/* 사진·영상을 상자보다 1px 씩 크게 → 소수점 반올림으로 생기는 가장자리 틈이 안 보임 */
.pj__img img, .pj__img video, .pj__img iframe { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; display: block; border: 0; }
.pj__img--video { background: #e9e9e9; } /* 영상 뜨기 전 연회색 (검정이면 둥근 모서리 가장자리 1px 로 검은 실선이 비침, 페이지색이면 빈칸처럼 보임) */
.pj__img--video iframe { scale: 1.012; } /* 비메오 플레이어가 영상 둘레에 남기는 1~2px 검은 여백(레터박스)을 상자 밖으로 */
/* 자리 표시 글자: 피그마로 채울 때 어느 칸·비율인지 */
.pj__ph { font-size: var(--t-xs); color: var(--fg-2); letter-spacing: 0; }
.pj__text { margin: max(24px, calc(64 * var(--k))) 0; font-size: var(--t-md); line-height: var(--lh); }
/* 글 단락 위 작은 회색 제목 (Behance 처럼 이미지 사이 설명 + 앞뒤 여백 넉넉히) */
/* 문단 나눔 (make_work.py paras) + 마지막 줄에 한두 단어만 남지 않게 (사용자 11-01: 줄바꿈 신경) */
.pj__text, .pj__overview { text-wrap: pretty; }
.pj__p { display: block; }
.pj__p + .pj__p { margin-top: 0.9em; }
.pj__text-h { display: block; margin-bottom: 0.6em; font-size: var(--t-xs); color: var(--fg-2); letter-spacing: 0; }
.pj__modules > .pj__text { margin: max(48px, calc(140 * var(--k))) 0; }
.pj-modal .pj__modules > .pj__text { margin: 56px 0; font-size: 14px; line-height: 1.65; } /* 창 안 본문 (Behance 글 단락) */
.pj-modal .pj__text-h { font-size: 12px; margin-bottom: 0.8em; }
/* ---------- 다음 프로젝트: 이름 / 연도 바로 옆에 ↗ ---------- */
.pj__next {
align-items: center;
margin: max(56px, calc(150 * var(--k))) 0 max(56px, calc(120 * var(--k))); /* 선 없음 — 바로 아래 하단바에 이미 선이 있음 */
}
.pj__next .pj__label { grid-column: 1 / span 3; }
.pj__next-title { grid-column: 4 / span 9; display: flex; align-items: center; gap: 14px; }
.pj__next-year { color: var(--fg-2); }
.pj__go { position: relative; height: 32px; }
/* ---------- 좁은 화면 ---------- */
@media (max-width: 760px) {
.pj { padding-top: var(--page-top); } /* 로고·메뉴 아래 (hero.css 폰). 폰은 창 없이 이 페이지로 옴 (pj-modal.js) */
/* 사진·영상 R: 폰 화면엔 데스크톱 단계가 커 보여서 한 단계로 작게 (사용자 11-01) */
.pj__img, .pj__img[class*="pj__img--w"] { --r: 6px; }
.pj__group .pj__img { --r: 3px; }
.pj__behind-img { border-radius: 6px; }
.pj__modules { row-gap: 12px; }
.pj__group { gap: 4px; }
.pj__group--attach { margin-top: -8px; }
/* 글자 버튼 (style.css「폰: 글자 버튼」): ← Work · 다음 프로젝트 ↗ · Behind the Scenes */
.pj__go { height: auto; }
.pj__behind-btn { height: auto; padding: 0; font-size: 15px; }
.pj__top { flex-direction: column; align-items: flex-start; }
.pj__awards { justify-content: flex-start; }
.pj__info, .pj__next { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
.pj__cell--type, .pj__cell--role, .pj__cell--year { grid-column: span 2; }
.pj__cell--project { grid-column: 1 / -1; order: -1; }
.pj__cell--links, .pj__overview, .pj__cell--credits { grid-column: 1 / -1; }
/* 이미지 모듈은 폰에서도 컴퓨터와 같은 12칸 → 나란히 있던 사진(6+6, 4+4+4, 8+4)은 폰에서도 나란히 (11-01 사용자: a to A 컬러·Rectism 90개가 한 장씩 풀어져 있었음).
가운데로 비켜 놓은 한 장짜리(8·10칸 등, 1번 칸에서 시작 안 하는 것)만 폰에선 꽉 차게. 글은 꽉 차게 */
.pj__modules { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 6px; row-gap: 6px; }
.pj__modules > :is(.pj__img--w7, .pj__img--w9, .pj__img--w10, .pj__img--w11),
.pj__modules > .pj__img--w8:not([style^="grid-column:1 /"]) { grid-column: 1 / -1 !important; }
.pj__text { grid-column: 1 / -1 !important; }
.pj__group--attach { margin-top: -2px; } /* 모듈 간격 6 − 묶음 간격 4 */
.pj__behind-grid { columns: 2; column-gap: 4px; }
.pj__behind-img { margin-bottom: 4px; }
.pj__next .pj__label, .pj__next-title { grid-column: 1 / -1; }
}
/* 현장·제작 사진 탭 (10-30, Hale): 맨 아래 글라스 캡슐(.pill, 상단 버튼과 같은 결)을 누르면 사진이 두 줄로 주르륵 펼쳐짐 */
.pj__behind { margin-top: max(24px, calc(48 * var(--k))); }
/* 메뉴 캡슐(32px)보다 크게 (사용자 10-31: 버튼 좀 더 키워줘) */
.pj__behind-btn { display: flex; list-style: none; width: max-content; margin: 0 auto; height: 44px; padding: 0 22px; gap: 8px; font-size: 15px; user-select: none; }
.pj__behind-btn::-webkit-details-marker { display: none; }
.pj__behind-btn svg { width: 12px; height: 12px; transition: transform 0.3s; }
.pj__behind[open] .pj__behind-btn svg { transform: rotate(180deg); }
.pj__behind-grid { columns: 2; column-gap: 8px; margin-top: 20px; }
.pj__behind-img { break-inside: avoid; margin: 0 0 8px; border-radius: 12px; overflow: hidden; background: #e9e9e9; }
.pj__behind-img img, .pj__behind-img video { display: block; width: 100%; height: auto; }
.pj__behind-img video { aspect-ratio: 9 / 16; object-fit: cover; } /* 영상은 preload 안 해서 크기를 미리 잡아 둠 (지금 비하인드 영상 = 폰 세로) */
/* 본편 영상 재생 버튼 (10-30, Hale): 포스터 가운데 유리 동그라미 + 흰 삼각형. 누르면 사라지고 기본 컨트롤 */
.pj__film video { object-fit: contain; background: #000; }
.pj__play {
position: absolute; left: 50%; top: 50%; translate: -50% -50%;
display: grid; place-items: center; width: 68px; height: 68px; padding: 0 0 0 3px;
border: 0; border-radius: 999px; color: #fff; cursor: pointer;
background: rgba(40, 40, 40, 0.35);
-webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
transition: background 0.25s, scale 0.25s;
}
.pj__play:hover { background: rgba(20, 20, 20, 0.55); scale: 1.06; }
.pj__play[hidden] { display: none; }
/* 위로 올리면 나타나는 "← Work" (pj-modal.js, 11-01): 왼쪽 위에 떠 있는 작은 글라스 캡슐. 내리면 위로 스르륵 숨음 */
.pj-backbar {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 14px);
left: var(--edge, 20px);
z-index: 45;
display: flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px 0 12px;
border-radius: 999px;
font-size: 14px;
letter-spacing: var(--track);
color: #333;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(240, 240, 240, 0.55));
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
translate: 0 -12px;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-webkit-tap-highlight-color: transparent;
}
.pj-backbar.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.pj-backbar svg { display: block; }