/* src/nnt/css/style.css */
/* 폰트(Pretendard dynamic subset)는 index.html 의 로 건다.
여기서 @import 하면 이 파일을 받은 뒤에야 발견돼 임계 경로가 한 단계
길어진다. jsDelivr의 gh/orioncactus/pretendard 경로는 저장소가 50MB
제한을 넘어 403(영구)이고, npm 원본은 웨이트당 ~766KB라 dynamic subset을
쓴다 — 자체 호스팅/서브셋은 런칭 전 체크리스트 항목이다. */
:root {
/* ── 팔레트: 확정 시 이 블록만 교체 ── */
--bg: #0B0D0F;
--surface: #14181C;
--fg: #F2F4F5;
--muted: #8B959C;
--accent: #3DDC97;
--accent-2: #7C5CFF;
--line: #232A30;
--cta-fg: #06231A;
--accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
/* 제품컷 스튜디오 배경(#F3F3F3 실측)과 맞춘 카드 상단 배경.
제품명/설명 텍스트는 이 위가 아니라 카드 하단의 --surface 영역에 둔다
(--fg on --card-bg 대비 1.01:1로 사실상 안 보임 — 절대 텍스트를 얹지 말 것). */
--card-bg: #F3F3F3;
--maxw: 1140px;
--pad-block: clamp(72px, 10vw, 140px);
--pad-inline: clamp(20px, 5vw, 40px);
--fs-hero: clamp(2.5rem, 7vw, 5rem);
--fs-h2: clamp(1.75rem, 4vw, 2.75rem);
--fs-body: clamp(1rem, 1.6vw, 1.125rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: var(--fs-body);
line-height: 1.7;
word-break: keep-all; /* 한글 단어 중간 줄바꿈 방지 */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* ── 레이아웃 유틸 ── */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-inline); }
.section { padding-block: var(--pad-block); }
.section + .section { border-top: 1px solid var(--line); }
.eyebrow {
font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent); margin: 0 0 12px;
}
h2 { font-size: var(--fs-h2); line-height: 1.25; margin: 0 0 20px; font-weight: 700; }
p { margin: 0 0 16px; color: var(--muted); }
/* ── CTA (자사몰 유도) ── */
.cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px; border-radius: 999px;
background: var(--accent); color: var(--cta-fg);
font-weight: 700; text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); }
.cta:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.cta--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
/* ── 히어로 ── */
.hero {
padding-block: clamp(88px, 12vw, 160px) var(--pad-block);
position: relative; /* 배경 영상 레이어의 기준 */
isolation: isolate; /* 음수 z-index가 body 배경 뒤로 빠지지 않게 */
/* overflow:hidden 을 두지 않는다. 영상·스크림은 .hero를 컨테이닝 블록으로
하는 absolute inset:0 라 애초에 섹션 밖으로 새지 못하고, 이 규칙은 실제로는
제목·CTA·3D가 넘치는 것을 가려 360px 가로 스크롤 검사를 무력화한다. */
}
/* 레이어: 영상(-2) → 스크림(-1) → 카피·3D(기본) */
.hero__bg {
position: absolute; inset: 0;
/* 이 두 줄은 inset:0 과 중복이 아니다.