/* 폰트 self-host: templates/fonts/(생성기가 산출물 fonts/로 복사) — 출처·라이선스는 docs/LICENSES.md. Pretendard는 가변 폰트(45~920) 1개 파일로 전 굵기를 커버, Montserrat는 라벨 텍스트가 항상 기본 굵기(400)만 쓰므로 Regular 1개 파일로 충분하다(M7-1). */ @font-face { font-family: 'Pretendard'; font-weight: 45 920; font-style: normal; font-display: swap; src: url('./fonts/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/Montserrat-Regular.woff2') format('woff2'); } /* 디자인 토큰: OKLCH 60(배경)-30(서페이스·텍스트)-10(액센트) 비율. 라이트니스 값은 4.5:1 대비 기준으로 선택함 — 변경 시 대비 재확인 필요. */ :root { color-scheme: light dark; --color-bg: oklch(97% 0.01 250); --color-surface: oklch(93% 0.015 250); --color-text: oklch(22% 0.02 250); --color-text-muted: oklch(40% 0.02 250); --color-accent: oklch(58% 0.19 250); --color-accent-contrast: oklch(98% 0.01 250); --color-border: oklch(85% 0.01 250); --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; --font-label: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --touch-target: 44px; --motion-duration: 0.6s; } @media (prefers-color-scheme: dark) { :root { --color-bg: oklch(21% 0.02 250); --color-surface: oklch(27% 0.02 250); --color-text: oklch(95% 0.01 250); --color-text-muted: oklch(75% 0.02 250); --color-accent: oklch(72% 0.17 250); --color-accent-contrast: oklch(15% 0.02 250); --color-border: oklch(38% 0.02 250); } } :root[data-theme='light'] { --color-bg: oklch(97% 0.01 250); --color-surface: oklch(93% 0.015 250); --color-text: oklch(22% 0.02 250); --color-text-muted: oklch(40% 0.02 250); --color-accent: oklch(58% 0.19 250); --color-accent-contrast: oklch(98% 0.01 250); --color-border: oklch(85% 0.01 250); } :root[data-theme='dark'] { --color-bg: oklch(21% 0.02 250); --color-surface: oklch(27% 0.02 250); --color-text: oklch(95% 0.01 250); --color-text-muted: oklch(75% 0.02 250); --color-accent: oklch(72% 0.17 250); --color-accent-contrast: oklch(15% 0.02 250); --color-border: oklch(38% 0.02 250); } /* theme 액센트 프리셋 5종 — (generate.ts가 schema.ts의 theme 값을 주입). --color-accent만 오버라이드한다(배경·서페이스·텍스트·보더·accent-contrast는 공통 유지). 각 L/C 값은 OKLCH→선형 sRGB 변환 후 WCAG 상대휘도로 배경(--color-bg)·버튼 텍스트 (--color-accent-contrast) 양쪽 대비를 계산해 라이트·다크 모두 4.5:1 이상(여유 마진 포함)이 되도록 골랐다 — 5종을 같은 라이트니스대(라이트 L 53~55%, 다크 L 68%)로 맞춰 톤을 통일했다. */ :root[data-accent='blue'] { --color-accent: oklch(54% 0.15 250); } :root[data-accent='green'] { --color-accent: oklch(53% 0.11 145); } :root[data-accent='purple'] { --color-accent: oklch(55% 0.22 305); } :root[data-accent='orange'] { --color-accent: oklch(55% 0.13 55); } :root[data-accent='pink'] { --color-accent: oklch(55% 0.22 340); } @media (prefers-color-scheme: dark) { :root[data-accent='blue'] { --color-accent: oklch(68% 0.17 250); } :root[data-accent='green'] { --color-accent: oklch(68% 0.21 145); } :root[data-accent='purple'] { --color-accent: oklch(68% 0.21 305); } :root[data-accent='orange'] { --color-accent: oklch(68% 0.17 55); } :root[data-accent='pink'] { --color-accent: oklch(68% 0.22 340); } } :root[data-theme='light'][data-accent='blue'] { --color-accent: oklch(54% 0.15 250); } :root[data-theme='light'][data-accent='green'] { --color-accent: oklch(53% 0.11 145); } :root[data-theme='light'][data-accent='purple'] { --color-accent: oklch(55% 0.22 305); } :root[data-theme='light'][data-accent='orange'] { --color-accent: oklch(55% 0.13 55); } :root[data-theme='light'][data-accent='pink'] { --color-accent: oklch(55% 0.22 340); } :root[data-theme='dark'][data-accent='blue'] { --color-accent: oklch(68% 0.17 250); } :root[data-theme='dark'][data-accent='green'] { --color-accent: oklch(68% 0.21 145); } :root[data-theme='dark'][data-accent='purple'] { --color-accent: oklch(68% 0.21 305); } :root[data-theme='dark'][data-accent='orange'] { --color-accent: oklch(68% 0.17 55); } :root[data-theme='dark'][data-accent='pink'] { --color-accent: oklch(68% 0.22 340); } *, *::before, *::after { box-sizing: border-box; } /* 배경 그레인 텍스처(M7-2): feTurbulence 흑백 노이즈, 알파는 SVG rect의 opacity=0.04로 굽는다(≤0.04 요건). 대비 재실측(worst-case — 노이즈 극값 0/255가 4% 섞였다고 가정한 최악 케이스, WCAG 상대휘도 기준): 라이트 bg 대 text-muted 최저 7.65:1, 다크 최저 6.99:1 — 요구치 4.5:1 대비 충분한 여유. */ body { margin: 0; background-color: var(--color-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E"); color: var(--color-text); font-family: var(--font-body); line-height: 1.5; } .font-label { font-family: var(--font-label); } a { color: var(--color-accent); } .skip-link { position: absolute; top: 0; left: 0; z-index: 1000; padding: 0.75rem 1rem; background: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-100%); transition: transform 0.2s ease; } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); padding: 0.5rem 1.25rem; border: none; border-radius: 0.5rem; background: var(--color-accent); color: var(--color-accent-contrast); font-family: var(--font-body); text-decoration: none; cursor: pointer; } button, input, select, textarea { min-height: var(--touch-target); font-family: inherit; } @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up var(--motion-duration) ease-out both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 레이아웃: 375px 모바일 퍼스트, 768/1024 브레이크포인트에서 컨테이너 확장 + 프로젝트 그리드 단수 증가. */ .hero, main > section { max-width: 40rem; margin-inline: auto; padding-inline: 1.25rem; padding-block: 3rem; } .hero { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .hero__name { margin: 0; font-size: clamp(1.75rem, 5vw + 1rem, 2.75rem); } .hero__tagline { max-width: 32rem; color: var(--color-text-muted); } .hero__cta { margin-top: 0.5rem; } main > section { border-top: 1px solid var(--color-border); } main > section h2 { margin-block: 0 1.5rem; font-size: 1.5rem; } .projects__list, .skills__list, .contact__links { margin: 0; padding: 0; list-style: none; } .projects__list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .project-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 0.75rem; background: var(--color-surface); } /* hover 리프트(M7-2): 포인터 장치에서만(터치는 :hover가 탭 후에도 눌어붙는 문제 방지), reduced-motion에서는 이동 자체를 무효화한다(트랜지션만 죽이는 게 아니라 transform: none). */ @media (hover: hover) { .project-card { transition: transform 0.2s ease; } .project-card:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .project-card:hover { transform: none; } } .project-card__media { overflow: hidden; border-radius: 0.5rem; aspect-ratio: 4 / 3; } .project-card__image { display: block; width: 100%; height: 100%; object-fit: cover; } .project-card__title { margin: 0; font-size: 1.125rem; } .project-card__description { margin: 0; color: var(--color-text-muted); } .project-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .tag { padding: 0.25rem 0.625rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-size: 0.75rem; } .project-card__link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--touch-target); margin-top: auto; } .skills__list { display: flex; flex-wrap: wrap; gap: 0.625rem; } .skill { padding: 0.5rem 1rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .contact { display: flex; flex-direction: column; gap: 1rem; } /* 글래스 카드(M7-2): 연락 섹션 카드 1곳만 — 기본값은 불투명 surface(폴백), backdrop-filter 지원 브라우저에서만 반투명+블러로 전환한다(@supports 분기). color-mix(surface, transparent)는 surface의 L/C/H를 그대로 두고 알파만 82%로 낮추는 것과 동치라 대비가 예측 가능하다. 대비 재실측(블러가 배경 노이즈를 평균화한다고 가정한 근사 — 평평한 --color-bg 기준): 라이트 text-muted 최저 7.65:1, 다크 최저 7.00:1 — 요구치 4.5:1 여유 확보(스크래치 스크립트 계산). */ .contact__card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 0.75rem; background: var(--color-surface); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .contact__card { background: color-mix(in oklch, var(--color-surface) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .contact__links { display: flex; flex-direction: column; gap: 0.75rem; } .contact__email, .contact__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); } .demo-notice { padding: 1.5rem 1rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.875rem; text-align: center; } .demo-notice p { margin: 0; } @media (min-width: 768px) { .hero, main > section { max-width: 48rem; padding-block: 4rem; } .projects__list { grid-template-columns: repeat(2, 1fr); } .contact__links { flex-direction: row; flex-wrap: wrap; } } @media (min-width: 1024px) { .hero, main > section { max-width: 64rem; } .projects__list { grid-template-columns: repeat(3, 1fr); } }