/* ===================================================================== 후지필름 포토페스타 2026 — 프로그램 소개 페이지 공통 스타일 wrapper class / S3 css filename : photo-pesta-program S3 image folder : assets/playwith/photo-pesta-program/ 6개 프로그램 페이지가 이 CSS 1벌을 공유한다 (텍스트·이미지만 페이지별 교체). 모든 룰은 .photo-pesta-program 아래로 네임스페이스 (playwith 와이드 페이지 §3). ===================================================================== */ /* 폰트 — post-body는 접근 불가하므로 CSS @import로 로드 (§12-B-4). Pretendard는 사이트가 이미 로드할 수 있으나 안전하게 함께 import. */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); /* ---------- wrapper (base + 풀폭 breakout) ---------- */ .photo-pesta-program{ --bg: #ffffff; --beige: #f3f3f3; --ink: #171717; --ink-2: #4a4a4a; --muted: #909090; --line: #d8d8d8; --rust: #9a9a9a; --max: 1130px; background: var(--bg); color: var(--ink); font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* col-xl-6 컬럼 안에서 풀폭으로 빠져나오기 (§4·§5 cross-origin 대비 !important) */ position: relative !important; width: 100% !important; margin: 0 !important; } @media (min-width: 60em){ .photo-pesta-program{ width: 100vw !important; max-width: 1360px !important; left: 50% !important; transform: translateX(-50%) !important; } } .photo-pesta-program *{ box-sizing: border-box; } .photo-pesta-program img{ display: block; max-width: 100%; } .photo-pesta-program a{ color: inherit; } /* 본문 인라인 링크 — 사이트 공통 a{text-decoration:none} 위로 밑줄 복원 */ .photo-pesta-program a.lnk{ text-decoration: underline; text-underline-offset: 2px; } .photo-pesta-program em{ color: inherit; font-style: italic; } /* 사이트 em{color:#029570} 무력화 (§3-3) */ /* ---------- hero ---------- */ .photo-pesta-program .hero{ position: relative; width: 100%; overflow: hidden; background: #1a1a1a; } .photo-pesta-program .hero-img{ width: 100%; height: auto; display: block; } /* ---------- section frame ---------- */ .photo-pesta-program .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; } .photo-pesta-program .eyebrow{ font-family: "Jost", sans-serif; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; font-size: 11px; color: var(--rust); display: inline-flex; align-items: center; gap: 12px; } .photo-pesta-program .eyebrow::before{ content: ""; width: 28px; height: 1px; background: var(--rust); display: inline-block; } /* ---------- intro ---------- */ .photo-pesta-program .intro{ padding: 96px 0 64px; } .photo-pesta-program .intro-single{ max-width: 860px; margin: 0 auto; } .photo-pesta-program .intro h1{ margin: 0 0 32px; font-family: inherit; font-weight: 400; font-size: 38px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); word-break: keep-all; } .photo-pesta-program .intro h1 .en{ display: block; margin-top: 14px; font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; font-size: 13px; color: var(--ink-2); } .photo-pesta-program .intro .lead{ margin: 0 0 28px; font-family: inherit; font-weight: 500; font-size: 22px; line-height: 1.55; color: var(--ink); letter-spacing: -0.005em; } .photo-pesta-program .intro p{ margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.85; text-wrap: pretty; } .photo-pesta-program .intro p:last-child{ margin-bottom: 0; } /* ---------- gallery (asymmetric grid) ---------- */ .photo-pesta-program .gallery{ padding: 0 0 96px; } .photo-pesta-program .gallery-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; } .photo-pesta-program .gallery-grid figure{ margin: 0; overflow: hidden; background: #1a1a1a; } .photo-pesta-program .gallery-grid img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .photo-pesta-program .gallery-grid figure:hover img{ transform: scale(1.03); } .photo-pesta-program .gallery-grid .g-a{ grid-column: span 7; aspect-ratio: 3 / 2; } .photo-pesta-program .gallery-grid .g-b{ grid-column: span 5; aspect-ratio: 3 / 2; margin-top: 36px; } .photo-pesta-program .gallery-grid .g-c{ grid-column: span 5; aspect-ratio: 3 / 2; } .photo-pesta-program .gallery-grid .g-d{ grid-column: span 7; aspect-ratio: 3 / 2; margin-top: 36px; } /* 2-up 캡션형 갤러리 (수상자 토크 등 — 이미지 아래 설명) */ .photo-pesta-program .gallery-grid figure.g-cap{ grid-column: span 6; background: transparent; overflow: visible; margin-top: 0; } .photo-pesta-program .gallery-grid figure.g-cap .g-thumb{ display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #1a1a1a; } .photo-pesta-program .gallery-grid figure.g-cap figcaption{ margin-top: 16px; } .photo-pesta-program .gallery-grid .cap-cat{ display: block; font-size: 13px; color: var(--muted); letter-spacing: 0.01em; margin-bottom: 5px; } .photo-pesta-program .gallery-grid .cap-title{ display: block; font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.55; word-break: keep-all; } /* ---------- details ---------- */ .photo-pesta-program .details{ padding: 88px 0; background: var(--bg); } .photo-pesta-program .section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; } .photo-pesta-program .section-head h2{ margin: 14px 0 0; font-family: inherit; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; color: var(--ink); } .photo-pesta-program .section-head .en-h{ font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; font-size: 12px; color: var(--muted); } .photo-pesta-program .info-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .photo-pesta-program .info-cell{ background: var(--bg); padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 132px; } .photo-pesta-program .info-cell .label{ font-family: "Jost", sans-serif; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; font-size: 10.5px; color: var(--rust); } .photo-pesta-program .info-cell .value{ font-family: inherit; font-weight: 500; font-size: 19px; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; } .photo-pesta-program .info-cell .sub{ font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } .photo-pesta-program .info-cell.span-3{ grid-column: span 3; } .photo-pesta-program .info-cell.span-4{ grid-column: span 4; } .photo-pesta-program .info-cell.span-6{ grid-column: span 6; } .photo-pesta-program .info-cell.span-12{ grid-column: span 12; } .photo-pesta-program .info-cell.feature{ background: #e6e6e6; } .photo-pesta-program .info-cell.feature .value{ font-size: 24px; } /* ---------- speaker ---------- */ .photo-pesta-program .speaker{ padding: 96px 0; background: var(--beige); } .photo-pesta-program .speaker-grid{ display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; } /* 강연자가 여럿인 페이지 — 블록 사이 구분선 (1명 페이지엔 매칭 안 됨) */ .photo-pesta-program .speaker-grid + .speaker-grid{ margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); } /* 강연자 3명 가로 3열 카드 (program-6 전용 — .speaker-cols 사용 페이지만 적용) */ .photo-pesta-program .speaker-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; } .photo-pesta-program .speaker-card .speaker-figure{ margin-bottom: 24px; } .photo-pesta-program .speaker-cols h2{ font-size: 26px; } .photo-pesta-program .speaker-figure{ margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; box-shadow: 0 24px 48px -28px rgba(0,0,0,0.25); } .photo-pesta-program .speaker-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; } .photo-pesta-program .speaker h2{ margin: 14px 0 6px; font-family: inherit; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; color: var(--ink); } .photo-pesta-program .speaker .role{ margin: 0 0 28px; font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--muted); } .photo-pesta-program .speaker p{ margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.9; text-wrap: pretty; } .photo-pesta-program .speaker p:last-child{ margin-bottom: 0; } /* ---------- notice (.notice → .notice-sec : 사이트 .post .notice 충돌 회피 §3-2) ---------- */ .photo-pesta-program .notice-sec{ padding: 88px 0 96px; background: var(--beige); } .photo-pesta-program .notice-body{ display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; } .photo-pesta-program .notice-sec ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .photo-pesta-program .notice-sec li{ position: relative; padding-left: 22px; font-size: 15px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; } .photo-pesta-program .notice-sec li::before{ content: "—"; position: absolute; left: 0; color: var(--rust); } /* ---------- 변형: speaker 블록이 없는 페이지 (예: 수상자 토크) ---------- speaker(회색)가 빠지면 intro+gallery(흰)·details(흰)가 붙으므로 details를 회색·notice를 흰색으로 뒤집어 흰–회–흰 교차를 유지한다. */ .photo-pesta-program.no-speaker .details{ background: var(--beige); } .photo-pesta-program.no-speaker .notice-sec{ background: var(--bg); } /* ---------- responsive ---------- */ @media (max-width: 880px){ .photo-pesta-program .notice-body, .photo-pesta-program .speaker-grid{ grid-template-columns: 1fr; gap: 32px; } .photo-pesta-program .section-head{ flex-direction: column; align-items: flex-start; gap: 8px; } .photo-pesta-program .info-cell.span-3, .photo-pesta-program .info-cell.span-4, .photo-pesta-program .info-cell.span-6{ grid-column: span 6; } .photo-pesta-program .speaker-figure{ max-width: 420px; } .photo-pesta-program .speaker-cols{ grid-template-columns: 1fr; gap: 48px; } .photo-pesta-program .gallery-grid .g-a, .photo-pesta-program .gallery-grid .g-b, .photo-pesta-program .gallery-grid .g-c, .photo-pesta-program .gallery-grid .g-d{ grid-column: span 6; margin-top: 0; } } @media (max-width: 560px){ .photo-pesta-program{ font-size: 15px; } .photo-pesta-program .wrap{ padding: 0 18px; } .photo-pesta-program .intro{ padding: 56px 0 40px; } .photo-pesta-program .intro h1{ font-size: 28px; } .photo-pesta-program .intro h1 .en{ font-size: 12px; } .photo-pesta-program .intro .lead{ font-size: 18px; } .photo-pesta-program .intro p{ font-size: 14.5px; } .photo-pesta-program .gallery{ padding: 0 0 56px; } .photo-pesta-program .gallery-grid{ gap: 10px; } .photo-pesta-program .gallery-grid .g-a, .photo-pesta-program .gallery-grid .g-b, .photo-pesta-program .gallery-grid .g-c, .photo-pesta-program .gallery-grid .g-d, .photo-pesta-program .gallery-grid figure.g-cap{ grid-column: span 12; } .photo-pesta-program .details{ padding: 56px 0; } .photo-pesta-program .speaker{ padding: 64px 0; } .photo-pesta-program .speaker h2{ font-size: 26px; } .photo-pesta-program .notice-sec{ padding: 56px 0 72px; } .photo-pesta-program .section-head h2{ font-size: 24px; } .photo-pesta-program .info-grid{ grid-template-columns: 1fr; } .photo-pesta-program .info-cell.span-3, .photo-pesta-program .info-cell.span-4, .photo-pesta-program .info-cell.span-6, .photo-pesta-program .info-cell.span-12{ grid-column: span 1; } .photo-pesta-program .info-cell{ padding: 22px 20px 24px; min-height: 0; } .photo-pesta-program .info-cell .value{ font-size: 17px; } .photo-pesta-program .info-cell.feature .value{ font-size: 20px; } }