/* ============================================================================= base.css — 리셋 · 공통 요소 · 유틸리티 역할: 브라우저 기본값 정리, 타이포 기본, 섹션/컨테이너/라벨 등 전역 유틸. 의존: tokens.css 가 먼저 로드되어야 한다 (변수 참조). 주의: 특정 컴포넌트 스타일은 components.css, 페이지 전용은 pages/ 로. 여기에 페이지 고유 스타일을 넣기 시작하면 구조가 무너진다. ========================================================================== */ /* ===== 리셋 ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 400; line-height: var(--lh-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; word-break: keep-all; /* 한국어 어절 단위 줄바꿈 — 가독성 핵심 */ } /* 커스텀 셀렉션 — 와인 배경. 이런 마감이 "사람 손" 인상을 만든다 */ ::selection { background: var(--wine); color: var(--paper); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } /* 키보드 포커스 — 마우스 클릭에는 안 보이고 탭 이동에만 보이게 */ :focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; } /* ===== 타이포 공통 ===== */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 900; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); /* 헤비웨이트 한글의 벌어짐 보정 */ } h4, h5, h6 { font-weight: 800; line-height: 1.4; } strong { font-weight: 600; } /* 이미지 로딩 중 배경색 — 로딩 전 흰 깜빡임 방지 */ .img-frame { background: var(--paper-warm); overflow: hidden; } .img-frame img { width: 100%; height: 100%; object-fit: cover; } /* ===== 레이아웃 유틸 ===== */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-3); } .section { padding-block: var(--sp-15); } .section--warm { background: var(--wash); } /* 인접 섹션 구분용 워시 */ /* ===== 섹션 라벨 (골드 오버라인 + 헤어라인) ===== */ .label { display: block; font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-spacing); color: var(--wine); /* 참고 시안과 동일한 블루 오버라인 */ text-transform: uppercase; margin-bottom: var(--sp-2); } /* 골드 헤어라인 — 라벨과 짝으로 쓰는 훈장적 디테일 */ .hairline { height: 1px; background: var(--hairline-gold); border: 0; margin-block: var(--sp-3); } .section-head { margin-bottom: var(--sp-8); } .section-head h2 { font-size: var(--fs-6); } .section-head p { color: var(--ink-soft); margin-top: var(--sp-2); max-width: 560px; } /* 섹션 제목 옆 영문 포인트 — Space Grotesk 대문자, 소량만 사용 */ .accent-en { font-family: var(--font-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wine); } /* ===== 스크롤 리빌 (텍스트 전용) ===== JS(dom.js의 옵저버)가 뷰포트 진입 시 .is-visible을 붙인다. [중요] 사진(.reveal-mask)은 절대 숨기지 않는다 — 과거 clip-path 마스크가 스크롤 복원·모듈 캐시 등 상황에서 사진을 영영 가리는 사고가 있었다. 사진을 다시 숨김 상태로 만드는 코드는 넣지 말 것. .js 게이트: 각 페이지 의 인라인 스크립트가 html에 .js를 붙인다 — 스크립트가 죽은 환경에서도 텍스트가 숨겨진 채 남지 않게 하는 안전장치 */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal); } .is-visible.reveal { opacity: 1; transform: none; } /* 형제 요소 순차 등장 — 지연은 HTML이 아니라 여기서 일괄 관리 */ .is-visible .reveal:nth-child(2) { transition-delay: 0.12s; } .is-visible .reveal:nth-child(3) { transition-delay: 0.24s; } .is-visible .reveal:nth-child(4) { transition-delay: 0.36s; } /* ===== 모션 비활성화 (필수) ===== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal, .js .reveal-mask { opacity: 1; transform: none; clip-path: none; } } /* ===== 반응형 ===== */ @media (max-width: 1024px) { .section { padding-block: var(--sp-12); } } @media (max-width: 768px) { .section { padding-block: var(--sp-9); } .section-head h2 { font-size: var(--fs-5); } }