/* ============================================================================ Flotic 회사 홈페이지 — 베이스 스타일 (리셋·레이아웃·공통 컴포넌트) ============================================================================ tokens.css 의 CSS 변수를 소비한다. 섹션별 스타일은 sections.css 에서. ============================================================================ */ /* ── 리셋 ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-text-primary); background-color: var(--color-bg); min-height: 100vh; } /* ── 줄바꿈 정책 — 한국어 어절 단위 / 영문 자연 줄바꿈 ─────────────────────── 한국어(lang=ko): word-break: keep-all 로 어절(띄어쓰기 단위) 줄바꿈. 글자가 단어 중간에 잘리는 현상을 줄이되, 매우 긴 어절·URL·괄호 텍스트는 overflow-wrap: break-word 로 폴백하여 컨테이너 넘침 방지. 영문(lang=en): word-break: normal 로 자연 단어 줄바꿈을 유지하고, 긴 단어·URL만 overflow-wrap: break-word 로 폴백. word-break·overflow-wrap 모두 상속되므로 기준으로 하위 요소 전체에 적용된다. 버튼(.btn white-space:nowrap) 등은 영향 없음. 섹션별 긴 주소·법적 고지 줄은 sections.css에서 overflow-wrap: anywhere 로 추가 보강한다. */ :lang(ko) { word-break: keep-all; overflow-wrap: break-word; } :lang(en) { word-break: normal; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--color-primary-hover); text-decoration: none; transition: color var(--motion-fast); } a:hover { color: var(--color-primary-hover); } ul, ol { list-style: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ── 레이아웃 프리미티브 ───────────────────────────────────────────────────── */ /* 콘텐츠 최대 폭 컨테이너 — 좌우 패딩은 BokSpacing.pageHorizontal 기준 */ .container { width: 100%; max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding); } /* 섹션 래퍼 — 수직 패딩은 BokSpacing.x4l(40)~x5l(48) 기준 */ .section { padding-block: var(--space-x5l); } .section--tight { padding-block: var(--space-x4l); } .section--hero { padding-block: var(--space-hero) var(--space-x6l); } /* 섹션 헤더(제목+설명) 공통 토대 */ .section-header { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-x5l); } .section-header__eyebrow { font-size: var(--text-micro); font-weight: var(--weight-semi-bold); letter-spacing: var(--tracking-micro); color: var(--color-primary-hover); text-transform: uppercase; } .section-header__title { font-family: var(--font-display); font-size: var(--text-headline-large); font-weight: var(--weight-bold); line-height: var(--leading-headline); letter-spacing: var(--tracking-headline-large); color: var(--color-text-primary); } .section-header__subtitle { font-size: var(--text-body-large); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-text-secondary); max-width: 60ch; } /* ── 그리드 ──────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: var(--space-xl); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* ── 공통 컴포넌트 토대 ───────────────────────────────────────────────────── */ /* 카드 — BokColors.lSurface + 절제 그림자 */ .card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-xl); } /* 버튼 — primary / ghost 변형 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md); font-size: var(--text-body); font-weight: var(--weight-semi-bold); line-height: var(--leading-single); letter-spacing: var(--tracking-body); transition: background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); white-space: nowrap; } .btn--primary { background: var(--color-primary); color: var(--color-on-primary); } .btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 28%, transparent); } /* 버튼 hover/active 정제 — 절제된 lift(translateY -1px). active 시 원위치. */ .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { transform: translateY(-1px); } .btn--primary:active { background: var(--color-primary-pressed); } .btn--ghost { background: transparent; color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-border); } .btn--ghost:hover { background: var(--color-surface-container); color: var(--color-text-primary); } .btn--lg { padding: var(--space-base) var(--space-x3l); font-size: var(--text-body-large); } /* 칩/배지 */ .chip { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); font-size: var(--text-micro); font-weight: var(--weight-medium); background: var(--color-primary-well); color: var(--color-primary); } /* 디바이더 */ .divider { border: none; border-top: 1px solid var(--color-border); margin-block: var(--space-xl); } /* 접근성: 스크린 리더 전용 */ .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; } /* 포커스 링 — 키보드 접근성 */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* 스크롤 패딩 — 고정 헤더 오프셋 (앵커 점프 시) */ :target { scroll-margin-top: calc(var(--header-height) + var(--space-lg)); } /* 접근성: 본문 바로가기 링크 — 키보드 포커스 시에만 노출 */ .skip-link { position: absolute; top: 0; left: 0; z-index: 200; padding: var(--space-md) var(--space-lg); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--text-body-small); font-weight: var(--weight-semi-bold); border-radius: 0 0 var(--radius-sm) 0; transform: translateY(-100%); transition: transform var(--motion-fast); } .skip-link:focus { transform: translateY(0); color: var(--color-on-primary); } /* ── 스크롤 reveal / 진입 모션 ────────────────────────────────────────────── */ /* JS가 활성화될 때 에 .reveal-on 을 추가하여 초기 hidden 상태를 만든다. JS 미지원·실패·prefers-reduced-motion 시에는 .reveal-on 이 없으므로 요소가 그대로 보임(접근성·SEO·no-JS 안전). stagger delay 는 --reveal-delay 로 각 요소에 JS 가 부여한다. 전환은 500ms + 부드러운 cubic-bezier 이징으로 "뿅 하고 생기는" 느낌을 줄이고 자연스럽게 스르르 등장하도록 개선. 페이드인 + 살짝 확대(scale 0.96→1)로 더 풍부한 진입감. */ .reveal-on .reveal { opacity: 0; transform: translateY(20px) scale(0.96); transform-origin: center top; transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* 접근성: 모션 감소 선호 — 애니메이션·전환 비활성화 */ @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; } } /* 모바일 메뉴 열림 시 본문 스크롤 잠금 — 스크림 뒤 본문이 스크롤되는 것 방지 */ body.nav-open { overflow: hidden; }