/* ===== Design tokens ===== */ :root { --bg: #f6f6f6; --fg: #161513; --muted: #8a8780; --line: #d9d7d2; --maxw: 1400px; --gutter: clamp(20px, 5vw, 64px); /* 본문 + 헤더 네비 (고정 15px, 화면 폭에 따라 변하지 않음) */ --step-0: 15px; /* 이미지 캡션 — 본문과 동일 크기 (원래의 관계 유지) */ --step--1: 15px; /* 푸터 */ --step-footer: 12px; --step-1: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); --step-2: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem); } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; } ::selection { background: #888; color: #fff; } body { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif; font-size: var(--step-0); font-weight: 700; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* Text that exists for search engines and screen readers but is not shown visually */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===== Image protection: deter casual saving/dragging ===== */ img, [style*="background-image"] { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; } /* ===== Page transition (fade in / out) ===== */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageFadeOut { from { opacity: 1; } to { opacity: 0; } } /* easeInOutSine — 시작·끝이 모두 완만한 S자 곡선. easeOut 계열은 앞부분에서 opacity 가 급히 올라가(20%지점에 이미 0.49) 길이를 늘려도 빠르게 느껴지므로, 변화량을 전 구간에 고르게 분산시킴. */ body { animation: pageFadeIn 1.2s cubic-bezier(0.37, 0, 0.63, 1) both; } body.is-leaving { animation: pageFadeOut 0.6s cubic-bezier(0.37, 0, 0.63, 1) forwards; pointer-events: none; } /* 프로젝트 페이지는 히어로가 도착하기 전에 페이드가 끝나버리면 이미지가 툭 나타난다. 각 페이지 의 인라인 스크립트가 html.hero-hold 를 걸어 페이드를 "일시정지" 시켜두고, script.js 가 히어로 로드 후 해제한다. 키프레임·길이·이징은 그대로라 해제되는 순간 평소와 똑같은 페이드가 처음부터 재생된다. */ html.hero-hold body { animation-play-state: paused; } /* 상한 시간을 넘겨 뒤늦게 도착한 히어로는 페이지가 이미 보이는 상태이므로 이미지 자체를 짧게 페이드인시켜 튀어나오지 않게 한다. */ @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } .pd-hero img.is-late { animation: heroFadeIn 0.5s cubic-bezier(0.37, 0, 0.63, 1) both; } @media (prefers-reduced-motion: reduce) { body { animation: none; } body.is-leaving { opacity: 0; animation: none; } /* 페이드가 없으므로 붙잡아 둘 것도 없다 */ html.hero-hold body { animation-play-state: running; } .pd-hero img.is-late { animation: none; } } /* ===== Header ===== */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); } /* sticky on inner pages */ .page .site-header { position: sticky; top: 0; z-index: 50; transition: opacity 0.5s ease, transform 0.5s ease; } .page .site-header.is-hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; } /* overlay header on the home slideshow (black text on light images, transparent) */ .site-header.overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; backdrop-filter: none; border-bottom: none; color: var(--fg); } .site-header.overlay .nav a { color: var(--fg); } .site-header.overlay .nav-toggle span { background: var(--fg); } .brand { letter-spacing: 0.04em; /* 로고는 기존 크기 유지 (변경 요청 대상 아님) */ font-size: 17.28px; } .nav { display: flex; gap: clamp(36px, 5.5vw, 80px); } .nav a { font-size: var(--step-0); color: var(--fg); letter-spacing: 0.01em; overflow: hidden; display: inline-block; position: relative; line-height: 1.3; } .nav-label { display: block; transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1); white-space: nowrap; } .nav-label--clone { position: absolute; top: 0; left: 0; transform: translateY(105%); } .nav a:hover .nav-label:first-child, .contact-links a:hover .nav-label:first-child { transform: translateY(-105%); } .nav a:hover .nav-label--clone, .contact-links a:hover .nav-label--clone { transform: translateY(0); } .nav a.active { opacity: 1; } .nav-toggle { display: none; position: relative; width: 18px; height: 18px; background: none; border: 0; cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .nav-toggle span { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 1px; background: var(--fg); transform-origin: center; } .nav-toggle span:first-child { transform: translateY(-50%); } .nav-toggle span:last-child { transform: translateY(-50%) rotate(90deg); } .nav-toggle[aria-expanded="true"] { transform: rotate(45deg); } /* ===== Fullscreen fade slideshow (home) ===== */ .home { background: var(--bg); } .slideshow { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 0; } .slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #efede9; /* light fallback if image fails to load */ opacity: 0; /* 첫 슬라이드 페이드인 + 슬라이드 간 크로스페이드에 공통 적용 */ transition: opacity 1.2s ease-in-out; } .slide.is-active { opacity: 1; } /* distinct light fallback tones per slide so the page is never blank */ .slide:nth-child(1) { background-color: #f1efeb; } .slide:nth-child(2) { background-color: #eeece7; } .slide:nth-child(3) { background-color: #f0eee9; } .slide:nth-child(4) { background-color: #edebe6; } /* Home overlay caption */ .hero-caption { position: fixed; left: var(--gutter); bottom: clamp(40px, 8vh, 80px); z-index: 10; color: #fff; pointer-events: none; } .hero-caption .eyebrow { font-size: var(--step-0); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-bottom: 10px; } .hero-caption .title { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { .slide { transition: opacity 0.4s linear; } } /* ===== Works page ===== */ .works-page { padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(80px, 10vw, 140px); } .works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 24px); } .work-card { display: block; overflow: hidden; } .work-thumb { width: 100%; aspect-ratio: 3 / 4; background-size: cover; background-position: center; background-color: #ddd9d2; overflow: hidden; transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .work-card:nth-child(3n+1) .work-thumb { background-color: #d7dcdd; } .work-card:nth-child(3n+2) .work-thumb { background-color: #ddd8cf; } .work-card:nth-child(3n) .work-thumb { background-color: #d3dad4; } .work-card:hover .work-thumb { filter: blur(6px); transform: scale(1.04); } /* Slideshow thumb — same box/ratio as other cards, images cross-fade inside */ .work-thumb--slides { position: relative; } /* no hover effect on the slideshow card — just the slideshow */ .work-card:hover .work-thumb--slides { filter: none; transform: none; } .work-thumb--slides .work-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.9s ease; } .work-thumb--slides .work-slide.is-active { opacity: 1; } /* ===== Project detail page ===== */ .project-page { max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(20px, 2.5vw, 32px); } .pd-back { display: inline-block; font-size: var(--step-0); color: var(--fg); margin: clamp(24px, 4vw, 40px) 0; } /* Hero image */ .pd-hero { margin: 0 0 clamp(40px, 6vw, 72px); } .pd-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line); display: block; } /* Title + specs */ .pd-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(40px, 6vw, 72px); } .pd-title { font-size: var(--step-0); line-height: 1.4; letter-spacing: 0; } .pd-specs { display: grid; grid-template-columns: repeat(2, auto); gap: 18px clamp(28px, 4vw, 56px); margin: 0; } .pd-specs dt { font-size: var(--step-0); color: var(--muted); margin-bottom: 3px; } .pd-specs dd { margin: 0; font-size: var(--step-0); color: var(--fg); white-space: nowrap; } /* Narrative text */ .pd-text { max-width: 60ch; display: flex; flex-direction: column; gap: 18px; font-size: var(--step-0); line-height: 1.75; color: var(--fg); margin-bottom: clamp(28px, 4vw, 48px); } .pd-intro { font-size: var(--step-0); line-height: 1.75; letter-spacing: 0; margin-bottom: 0; } /* Image gallery */ .pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 28px); margin-bottom: 0; } .pd-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); display: block; } .pd-gallery .pd-full { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .pd-slideshow { grid-column: 1 / -1; position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--line); overflow: hidden; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.35); } .pd-slideshow-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.9s ease; } .pd-slideshow-slide.is-active { opacity: 1; } .pd-gallery-text { align-self: start; max-width: none; padding-right: clamp(20px, 4vw, 56px); font-size: var(--step-0); line-height: 1.75; color: var(--fg); margin: 0; background: none; } /* Credit line */ .pd-credit { font-size: var(--step-0); color: var(--muted); text-align: center; } /* Tablet: keep 2-column gallery but tighten head + narrative width */ @media (max-width: 900px) { .pd-hero img { aspect-ratio: 16 / 11; } .pd-head { gap: clamp(20px, 4vw, 48px); } .pd-text { max-width: none; } } /* Mobile: collapse custom gallery grid to a single column in source order. The E.M.S page positions items with inline grid-column/grid-row, so those must be neutralised with !important or pd-full spans only one implicit column. */ @media (max-width: 700px) { .pd-head { grid-template-columns: 1fr; align-items: start; gap: 24px; } .pd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; gap: 16px clamp(20px, 6vw, 40px); } .pd-specs dd { white-space: normal; } .pd-gallery { grid-template-columns: 1fr; gap: 14px; } .pd-gallery > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .pd-gallery-text { padding-right: 0 !important; } } /* Small phones: single-column specs so long labels never overflow */ @media (max-width: 400px) { .pd-specs { grid-template-columns: 1fr; } } /* ===== Contact page ===== */ .contact-page { display: flex; flex-direction: column; /* no max-width — let map stretch to gutter edges */ } .contact-info { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: clamp(28px, 3.5vw, 44px) var(--gutter) clamp(40px, 5vw, 64px); } .map-wrap { /* stretch edge-to-edge within the page gutter; top gap matches Works/About images */ margin: clamp(32px, 5vw, 56px) var(--gutter) 0; /* tall enough to be useful, grows on large screens */ height: clamp(480px, 65vh, 860px); border-radius: 2px; overflow: hidden; background: var(--line); } .map-frame { width: 100%; height: 100%; border: 0; display: block; } /* ===== About page ===== */ .about-page { display: flex; flex-direction: column; } .about-intro { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 56px); max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(56px, 8vw, 104px); } .about-intro-img img { width: 100%; aspect-ratio: 142 / 73; object-fit: cover; display: block; } .about-intro-text { display: flex; flex-direction: column; gap: 16px; } .about-role { font-size: var(--step-0); color: var(--fg); letter-spacing: 0.04em; } .about-bio-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); } .about-tagline { font-size: var(--step-0); color: var(--fg); line-height: 1.7; } @media (max-width: 700px) { .about-bio-cols { grid-template-columns: 1fr; gap: 20px; } } .about-section { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(48px, 7vw, 88px) var(--gutter); } .about-bio-body { max-width: 600px; display: flex; flex-direction: column; gap: 18px; font-size: var(--step-0); line-height: 1.75; letter-spacing: -0.005em; color: var(--fg); } .about-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .about-exp-heading { font-size: var(--step-0); color: var(--fg); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 28px; font-weight: 400; } .about-exp-heading--gap { margin-top: clamp(40px, 5vw, 56px); } .about-exp-list { list-style: none; padding: 0; display: flex; flex-direction: column; } .about-exp-list li { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; } .about-exp-year { font-size: var(--step-0); color: var(--fg); } .about-exp-title { font-size: var(--step-0); } .about-exp-sub { font-size: var(--step-0); color: var(--fg); } .about-clients-grid { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; } .about-clients-grid span { font-size: var(--step-0); letter-spacing: -0.005em; color: var(--fg); padding: 8px 0; width: 100%; } @media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; } .about-intro-img img { aspect-ratio: 4 / 3; } .about-exp { grid-template-columns: 1fr; } } /* ===== Text pages (About / Contact / News) ===== */ .text-page { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(80px, 10vw, 140px); } .text-body { display: flex; flex-direction: column; gap: 24px; font-size: var(--step-0); line-height: 1.7; color: var(--fg); } .text-body p { color: var(--fg); } .skill-list { list-style: none; padding: 0; margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; font-size: var(--step-0); font-weight: 400; } .skill-list li { border-top: 1px solid var(--line); padding-top: 12px; } .contact-email { display: inline-block; font-size: var(--step-0); border-bottom: 2.5px solid var(--fg); padding-bottom: 4px; width: fit-content; } .contact-links { display: flex; gap: 28px; margin-top: clamp(28px, 4vw, 44px); } .contact-links a { font-size: var(--step-0); color: var(--fg); overflow: hidden; display: inline-block; position: relative; line-height: 1.3; } .contact-details { display: flex; flex-wrap: wrap; gap: 12px clamp(40px, 6vw, 80px); margin-top: clamp(14px, 2vw, 20px); } .contact-detail dt { font-size: var(--step-0); color: var(--muted); margin-bottom: 4px; } .contact-detail dd { margin: 0; font-size: var(--step-0); color: var(--fg); line-height: 1.6; } .contact-detail dd a { color: var(--fg); } /* ===== News page ===== */ .news-page { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(80px, 10vw, 140px); } .news-feed { list-style: none; padding: 0; display: flex; flex-direction: column; } .news-item { display: grid; grid-template-columns: 32% 1fr; gap: clamp(24px, 4vw, 60px); padding: clamp(32px, 5vw, 56px) 0; } .news-item + .news-item { border-top: 1px solid var(--fg); } .news-img-wrap { overflow: hidden; } .news-img-wrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; display: block; } /* Shift crop toward the left */ .news-img-wrap img.news-img-left { object-position: 40% center; } /* Portrait images — same width as the rest; exact aspect-ratio set inline per image */ .news-img-wrap img.news-img-portrait { aspect-ratio: 3 / 4; } /* Logos centered on white background; per-logo padding set inline */ .news-img-wrap img.news-img-logo { object-fit: contain; background: #fff; padding: 22%; } .news-body { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; } .news-title { font-size: var(--step-0); line-height: 1.4; } .news-meta { font-size: var(--step-0); color: var(--fg); opacity: 0.45; } .news-desc { margin-top: 12px; font-size: var(--step-0); line-height: 1.7; max-width: 60ch; } @media (max-width: 640px) { .news-item { grid-template-columns: 1fr; } } /* ===== Footer ===== */ .site-footer { margin-top: auto; padding: 28px var(--gutter); } .site-footer-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px clamp(40px, 6vw, 100px); } .site-footer span, .site-footer a { font-size: var(--step-footer); color: var(--fg); white-space: nowrap; } .site-footer a:hover { opacity: 0.6; transition: opacity 0.2s ease; } .site-footer .sep { color: var(--fg); user-select: none; } /* home: footer sits on top of slideshow — hide it */ .home .site-footer { display: none; } /* ===== Responsive ===== */ @media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px), (max-height: 500px) and (orientation: landscape) { .nav { display: none; } .nav.open { display: flex; flex-direction: column; align-items: center; position: absolute; top: 100%; left: 0; right: 0; gap: 0; padding: 20px 0 28px; background: rgba(246, 246, 246, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Home page header is an overlay over the slideshow — keep menu transparent */ .site-header.overlay .nav.open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.open a { margin: 10px 0; padding: 0; color: var(--fg); font-size: var(--step-0); overflow: hidden; } .site-header.overlay .nav.open a { color: var(--fg); } .nav-toggle { display: flex; } } @media (max-width: 540px) { .works-grid { grid-template-columns: 1fr; } .skill-list { grid-template-columns: 1fr; } .news-list li { flex-direction: column; gap: 4px; } .news-date { flex: none; } }