/* ═══════════════════════════════════════════════════════════════ eser 디자인 시스템 — base.css 모든 데모·납품물의 기본선. 문서: docs/DESIGN_SYSTEM.md 불러오는 순서 (반드시 이 순서) 1) base.css 시스템 기본값 — 이 파일 2) tokens.css 데모별 무드 — 색과 일부 스케일만 덮어쓴다 3) skeleton.css 구조 — 토큰만 참조하고 값은 갖지 않는다 여기에 담기는 것: 타이포·여백·레이아웃·라운드·그림자·모션의 기본값. 여기에 담지 않는 것: 색. 색은 역할 이름만 정의하고 값은 tokens.css가 정한다. ═══════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────── 1. 서체 Pretendard를 본문·제목 모두에 쓴다. 무드에 따라 --font-head만 세리프로 교체하는 것을 허용한다(리넨이 그렇게 한다). ───────────────────────────────────────────────────────────── */ /* ── 서체는 Pretendard 하나다 (2026-09-07 Teo) ──────────────────── 전에는 눈썹·라벨·숫자가 --font-mono(Space Mono)였는데, 한글 글리프가 없어 **굴림체로 떨어졌다**(실측: GulimChe(9)). 한 화면에 세 서체가 섞여 보이던 원인이다. 이제 본문·제목·눈썹·숫자가 같은 서체를 쓴다. ★ 웹폰트는 각 페이지 의 jsdelivr 링크가 받는다(dynamic-subset). 못 받으면 아래 대체 목록의 시스템 산세리프로 물러난다 — 한글은 'Noto Sans KR'·'Apple SD Gothic Neo' 가 받는다. ★ 굵기는 Variable 이라 100~900 이 한 파일이다. 따로 요청이 늘지 않는다. */ --font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Apple SD Gothic Neo', Arial, sans-serif; --font-head: var(--font-body); /* --font-mono 는 이름만 남기고 값은 본문 서체다. 눈썹·라벨·표 머리·지표 숫자가 전부 이것을 부르고 있어서, 여기 한 줄이 그 자리를 다 덮는다. ★ 진짜 코드 조판이 필요한 자리는 --font-code 를 부른다(지금은 .ph-code / .ph-size — 자리표시자 슬롯 번호라 사진이 들어오면 숨는다). */ --font-mono: var(--font-body); --font-code: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace; /* ───────────────────────────────────────────────────────────── 2. 타이포 스케일 (v3 §1) ★ 이 --t-* 여덟 개가 정본이다. 임의 font-size 를 쓰지 않는다. 아래 --fs-* 는 기존 마크업이 부르던 이름이라 별칭으로만 남긴다. 새 규칙을 쓸 때는 --t-* 를 부른다. ★ 최소 15px. 캡션·라벨·아이브로우도 예외 없다 (v2 계승). v3 원안은 caption 13px · eyebrow 12px 였다. 그 값은 v2 의 "15px 하한, 예외 없음"과 정면으로 충돌하는데, 개정안 머리말이 "v2 에만 있는 규칙을 삭제하지 말 것"이라고 못박고 있다. 두 문장을 함께 지키는 길은 하나뿐이라 하한을 이겼다 — 역할과 이름은 v3, 값은 15px 이다. ───────────────────────────────────────────────────────────── */ --fs-min: 15px; /* 절대 하한 — 참조용 */ /* ─ 2.9차 축소 (I-2) ───────────────────────────────────────── display 정점을 6rem → 4rem 으로 내리고 나머지를 비율에 맞춰 함께 내렸다. 96px 짜리 히어로 카피는 1920 에서 화면을 압도했다. 새 단계 (최대값 기준) display 64 · h1 44 · h2 30 · h3 20 · h4 16 · body 16 · 15px 하한 인접 비율 1.45 / 1.47 / 1.50 / 1.25 — 눈으로 갈린다. ★ h3 는 20px 에서 멈춘다. h4·body 가 이미 16px 이라 더 내리면 "제목"과 "본문"이 같은 크기가 된다. 최소값도 18px 아래로 내리지 않는다 — 390px 에서 h3 를 비율대로 17px 까지 내렸더니 body(16)와 1px 차이가 되어 위계가 사라졌다. ★ caption·eyebrow 15px 는 v2 의 절대 하한이라 손대지 않는다. ★ clamp 의 최소·유동값도 함께 내렸다. 최대만 내리면 좁은 폭에서 h1 이 display 를 따라잡아 위계가 뒤집힌다. */ --t-display: clamp(2.25rem, 6vw, 4rem); /* 히어로 대형 카피 전용 */ --t-h1: clamp(1.75rem, 4vw, 2.75rem); /* 페이지·섹션 대제목 */ --t-h2: clamp(1.375rem, 2.6vw, 1.875rem);/* 섹션 소제목, 인용구 */ --t-h3: clamp(1.125rem, 1.6vw, 1.25rem);/* 카드·항목 제목 */ --t-h4: 1rem; /* 라벨성 제목 */ --t-body: 1rem; /* 본문 */ --t-caption: 15px; /* 캡션·메타 — v3 원안 13px, 하한으로 올림 */ --t-eyebrow: 15px; /* 섹션 라벨 — v3 원안 12px, 하한으로 올림 */ /* v3 §1 에 없지만 v2 에 있던 자리. 삭제하지 않는다 — 제목 옆 리드 문단은 body 와 h3 사이의 크기가 따로 필요하다. ★ 상한을 h3(20px) 아래로 둔다. 리드가 카드 제목보다 크면 문단이 제목처럼 읽힌다. */ --t-lead: clamp(1rem, 1.2vw, 1.1875rem); /* 역할별 굵기 (v3 §1 역할 고정표). ★ 데모별 무드는 tokens.css 가 이 다섯 개를 덮어써서 만든다 (리넨은 세리프라 전부 400 에 가깝다). */ --fw-display: 800; --fw-h1: 800; --fw-h2: 500; --fw-h3: 700; --fw-h4: 600; --fw-body: 400; /* 역할표에 없는 제목성 요소(브랜드 마크·카드 캡션·이전다음 등)가 쓰는 값. ★ var(--fw-h1) 로 두면 안 된다. 데모가 --fw-h1: var(--fw-head) 로 되받는 순간 순환 참조가 되고, CSS 는 순환을 무효값으로 처리해 font-weight 가 상속값(400)으로 떨어진다 — 얼로이 제목이 실제로 그렇게 얇아졌다. 별칭이 아니라 제 값을 갖는다. */ --fw-head: 700; --lh-tight: 1.15; /* display, h1 */ --lh-snug: 1.3; /* h2, h3 */ --lh-body: 1.7; /* body */ --lh-head: var(--lh-snug); /* 하위 호환 별칭 */ --ls-tight: -.02em; /* display, h1 (한글 대형) */ --ls-wide: .15em; /* eyebrow, caption 영문 */ --ls-head: var(--ls-tight); /* 하위 호환 별칭 */ /* 본문 한 줄 길이 — 한글 45~55자. em은 요소 자신의 font-size 기준이라 한글 한 글자 ≈ 1em이다. 그래서 50em이면 폰트 크기와 무관하게 항상 한 줄 50자가 된다. (ch는 '0' 글자 폭 기준이라 한글에서는 절반밖에 안 맞는다) */ --measure: 50em; /* 본문 기본 */ --measure-tight: 44em; /* 제목 옆 리드 등 */ /* ───────────────────────────────────────────────────────────── 3. 여백 — 8px 배수 이 스케일에 없는 값을 임의로 쓰지 말 것. --sp-0(4px)만 예외다. 배지 안쪽 여백처럼 8px가 과할 때만 쓴다. ───────────────────────────────────────────────────────────── */ --sp-0: 4px; /* 예외 — 미세 조정 전용 */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; /* 섹션 상하 여백 — 브레이크포인트별 값은 아래 미디어쿼리에서 재대입 */ --section-py: var(--sp-6); /* 390 기준: 64 */ --section-py-sm: var(--sp-5); /* 390 기준: 48 */ /* 한 섹션 안에서 덩어리를 나누는 간격. ★ 섹션 사이보다 작아야 "같은 섹션 안"으로 읽힌다. 스튜디오에서 이 자리에만 --sp-8(128px)을 손으로 넣어 두었는데, 섹션 여백(96)보다 커서 두 덩어리가 남남으로 보였다 (2.7차 G-4). 임의값을 쓰지 말고 이 토큰을 쓴다. */ --gap-block: var(--section-py-sm); --gutter: var(--sp-3); /* 390 기준: 24 */ /* ───────────────────────────────────────────────────────────── 4. 레이아웃 ───────────────────────────────────────────────────────────── */ --w-base: 1480px; /* 기본 컨테이너 */ --w-wide: 1680px; /* 넓게 — 이미지·작업물 위주 섹션 */ --w-read: 800px; /* 본문 전용 컨테이너 (한글 약 50자) */ /* 하위 호환 별칭 — 기존 마크업이 쓰던 이름 */ --w-normal: var(--w-base); --w-copy: var(--w-read); --grid-cols: 12; --grid-gap: var(--sp-3); /* ───────────────────────────────────────────────────────────── 5. 모서리 · 테두리 · 그림자 · 모션 ───────────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-pill: 999px; --bw: 1px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06); --shadow: 0 4px 20px rgba(0, 0, 0, .08); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .14); /* ─── 모션 토큰 (v3 §7) — v2 모션 토큰을 대체한다 ──────────── 원칙: 짧고, 일관되게. 화려함은 종류의 다양함이 아니라 타이밍의 정확함에서 나온다. 그래서 값이 셋뿐이고 이징은 하나다. ★ v2 는 "손끝에 붙는 전환(--dur*)"과 "스크롤에 반응하는 큰 모션 (--mo-*)"을 성격이 다르다며 따로 뒀고, 그 결과 이징이 셋 (.22/.8/.2/1 · 0/0/.2/1 · .16/1/.3/1)이고 리빌이 1s 였다. 페이지마다 모션이 달라 보이던 이유가 여기 있다 — 두 벌을 하나로 합치고, 옛 이름은 별칭으로만 남긴다. */ --dur-1: .3s; /* 호버, 소형 요소 */ --dur-2: .45s; /* 스크롤 리빌 기본 */ --dur-3: .6s; /* 히어로, 페이지 진입 */ --ease-out: cubic-bezier(.22, 1, .36, 1); --reveal-y: 24px; --stagger: 80ms; /* 형제 요소 순차 등장 간격 */ /* ─ 하위 호환 별칭 ─ */ --dur-fast: var(--dur-1); --dur: var(--dur-1); --dur-slow: var(--dur-2); --ease: var(--ease-out); --mo-ease: var(--ease-out); --mo-reveal-y: var(--reveal-y); --mo-reveal-dur: var(--dur-2); --mo-stagger: var(--stagger); --header-h: 64px; /* ───────────────────────────────────────────────────────────── 5-2. 패럴랙스 · 인트로 ★ 이동량이 px 가 아니라 % 다 (v3 §7-3: 섹션 높이의 8~12%). 고정 200px 은 400px 짜리 띠에서는 절반을 움직이고 1000px 짜리 섹션에서는 20%만 움직인다 — 같은 값인데 세기가 달라 보인다. demo.js 가 이 숫자를 섹션 높이에 곱한다. ★ --plx-scale 은 이동으로 생기는 빈틈을 덮는 최소치보다 조금만 크면 된다. 이동 폭이 ±5%(=travel/2)이므로 1.15 로 충분하다. 1.25 는 필요 없이 사진을 25% 확대해 화질을 버린다. ───────────────────────────────────────────────────────────── */ --plx-travel-pct: 10; /* 섹션 높이의 10% */ --plx-scale: 1.15; --intro-dur: 1.2s; /* 로딩 인트로 — 상한 1.5s */ /* ───────────────────────────────────────────────────────────── 5-3. 히어로 높이 (v2) vh 가 아니라 svh 를 쓴다. iOS 주소창 때문에 vh 는 로드 직후 높이가 튄다. 페이지마다 제각각이던 것을 규격으로 고정한다. ───────────────────────────────────────────────────────────── */ --hero-h-home: min(88svh, 900px); --hero-h-home-min: 640px; --hero-h-full: 100svh; /* 골격 B 홈 — 미디어가 실제로 채운다 */ --hero-h-full-min: 560px; --hero-h-detail: min(64svh, 680px); --hero-h-sub: min(52svh, 520px); --hero-h-sub-min: 380px; /* ───────────────────────────────────────────────────────────── 5-4. 텍스트 안전지대 (v2) 이미지·영상 위에 텍스트가 앉는 자리. 미디어를 한쪽으로 몰고 반대쪽을 비운 뒤, 그 사이를 마스크와 그라디언트로 잇는다. ★ CSS 만으로는 못 만든다. 사진 자체가 그 구도로 나와야 한다. (docs/DEMO_TOKENS.md — 이미지를 만들기 전에) ───────────────────────────────────────────────────────────── */ --hero-media-w: 62%; /* 미디어가 차지하는 폭 */ --hero-safe-w: 38%; /* 텍스트 안전지대 — 1024~1279 는 아래에서 넓힌다 */ /* ── 미디어 가장자리 페이드 (히어로 계열 공통) ────────────────── 미디어가 배경과 만나는 안쪽 변을 녹인다. 실측 21곳 중 20곳이 같은 램프를 쓰고 있었는데 한 곳만 토큰이고 나머지는 22% 가 박혀 있었다. 같은 것이 두 이름으로 있으면 한쪽만 바뀌는 날이 온다 — 하나로 모았다. width 램프가 끝나는 지점. **경계의 부드러움**을 정한다. 넓을수록 천천히 나타나 경계가 덜 보인다. opacity 램프 **한가운데**의 알파. **사진이 얼마나 빨리 올라오는가**를 정한다. 높을수록 지우는 양이 줄어 사진이 많이 남는다. ★ 램프는 반드시 알파 0 에서 시작한다. 바닥값을 0 보다 올리면 사진이 "없음 → 35%" 로 튀어 이미지 왼쪽 변에 세로 선이 생긴다 — 완화가 아니라 반대다. 처음에 그렇게 짰다가 확대 비교판에서 보고 고쳤다. 그래서 "연하게" 는 바닥을 올리는 것이 아니라 **빨리 올라오게** 하는 것으로 푼다. 시작은 0, 중간을 높인다. ★ 두 값만 바꾸면 히어로 20곳이 함께 바뀐다. */ --hero-fade-width: 20%; --hero-fade-opacity: .60; /* 램프의 모양. 알파를 직선으로 올리면 불투명해지는 지점에 무릎이 생겨 "직선 경계" 로 보인다. 양 끝을 눕히고 가운데를 opacity 로 잡는다. opacity = .5 면 smoothstep 과 거의 같고, 그보다 높이면 앞쪽이 빨리 차올라 지워지는 면적이 줄어든다. ★ 방향은 쓰는 쪽이 정한다. 여기서는 색 정지점만 만든다. */ --hero-fade-stops: rgb(0 0 0 / 0) 0%, rgb(0 0 0 / calc(var(--hero-fade-opacity) * .35)) calc(var(--hero-fade-width) * .25), rgb(0 0 0 / var(--hero-fade-opacity)) calc(var(--hero-fade-width) * .5), rgb(0 0 0 / calc(var(--hero-fade-opacity) + (1 - var(--hero-fade-opacity)) * .72)) calc(var(--hero-fade-width) * .75), #000 var(--hero-fade-width); /* ── 풀블리드 히어로의 스크림 (2026-08-28) ───────────────────── 사진이 히어로 전체를 덮고 글자가 그 위에 앉는 구도에서 쓴다. **목적은 가독이지 배경 재현이 아니다** — 스크림 아래로 사진이 계속 비쳐 보여야 한다. 그래서 색을 칠하는 대신 불투명도를 낮춘 층을 얹고, 글자 쪽에서 시작해 반대쪽으로 사라지게 한다. alpha 글자 쪽 끝의 진하기. 1 이면 사진이 안 보인다 — 올리지 않는다. end 스크림이 완전히 사라지는 지점. ★ 색은 데모의 --c-bg-alt 를 쓴다. 밝은 데모는 밝게, 어두운 데모는 어둡게 덮여야 글자색과 같은 편에 선다. */ /* ── 곧은 변을 만드는 층은 전부 걷어냈다 ───────────────── 좌측 밴드(--hero-protect-stops) · 바닥 밴드(--brush-floor) 를 2026-08-31 에, 브러쉬 마스크(--brush-*)와 유리층(--glass-*)을 2026-09-04 에 지웠다. 내력은 DESIGN_SYSTEM §12. ★ Teo 가 그린 얼룩 그림은 지우지 않았다 — 적용만 해제했다. store/demo/linen/img/white-text-shadow{,-mobile}.webp ── 히어로 흰 번짐 — 글자 블록 뒤 한 층 (2026-09-06 Teo ⑯) ───── 사진은 섹션 전폭, 원본 그대로(덮개 없음). **글자 블록**(눈썹~본문~ 버튼~지표 묶음) 뒤에만 배경색 면을 하나 깔고 가장자리를 blur 로 녹인다. 글자 박스보다 위·아래·오른쪽으로 --veil-pad 만큼 크고 왼쪽은 화면 끝까지. 중심 불투명도 --veil-alpha(90%), 바깥으로 갈수록 0. 경계선·얼룩이 있으면 실패. 식은 skeleton.css .hf-copy::before. ★ 지나온 것 — 09-04 타원 마스크 → 09-05 px → 09-06 화면 폭 %(가로 40→75%W · 세로 45→100%H) 를 전부 걷었다(Teo ⑩ 폐기). 화면 기준 정의는 글자 폭과 무관하게 움직여서 글자가 번짐 밖으로 나갔다. */ --veil-alpha: 90%; --veil-pad: 120px; --veil-blur: 96px; /* ★ --hero-focus 는 2026-09-09 에 걷었다. 히어로 사진 위치는 항상 정중앙이고 (skeleton.css .hero-full .hf-media img), 어느 부분을 보여줄지는 원본 크롭이 정한다. 이 토큰을 읽던 자리가 없어져 값만 남으면 죽은 코드가 된다. */ /* 글자 기둥의 왼쪽 — 초광폭에서 .wrap 이 가운데로 모이는 만큼. .hf-copy 를 내용 폭(fit-content)으로 줄이면서 이 값으로 왼쪽 선을 .wrap 과 같은 자리에 둔다(skeleton.css). */ --hf-inset: max(0px, calc((100vw - var(--w-base)) / 2)); /* ── 좁은 화면 — 같은 번짐, 여백·blur·농도만 작다 (⑯) — 파일 끝 @media */ /* 지표 뒤 둥근 면 (좁은 화면 전용) — 2026-09-04 복원. blur 없음. */ --meta-bg-alpha: 22%; --meta-bg-pad: 18px; --meta-bg-round: 8px; /* 지표 상자의 최소 너비 = 버튼 행 너비 (2026-09-05 Teo 규칙). "제품 보기" 왼쪽 끝 ~ "성분 확인하기" 오른쪽 끝. 실측 149 + 16 + 186. ★ CSS 는 다른 요소의 너비를 참조하지 못해 값을 적어 둔다. 버튼 문구가 바뀌면 다시 재서 고친다 — 재는 법은 DESIGN_SYSTEM §13. ★ 버튼이 두 줄로 접히는 폭(≤398)에서는 이 값이 성립하지 않는다. 그때는 상자를 히어로 전 폭으로 넓힌다(skeleton.css). */ --hf-actions-w: 351px; /* 사진 위 보조 버튼 — 사진이 비치는 반투명 + 반투명 테두리 + 진한 글자. ★ 채움을 진하게 올리지 않는다. 그러면 옅은 불투명 상자가 되어 글자가 상자에 묻힌다(2026-09-05, 390 에서 그렇게 보였다). 글자는 색으로 세우고 채움은 사진이 비칠 만큼만. */ /* 2026-09-05 — 종이색 14% 에서 흰색 55% 로 (Teo). 색은 순백이다 — 리넨 팔레트는 순백을 안 쓰지만 사진 위 버튼 채움은 팔레트 면이 아니라 빛이라 예외다. 데모가 --ghost-bg-color 로 바꿀 수 있다. */ /* 히어로 본문 글자색 (2026-09-05). 기본은 팔레트 그대로(--c-muted). 사진이 어두운 자리(리넨 서브 히어로 — 나무 작업대·문·접시)에서는 본문이 2.3~3.8 로 떨어져 데모가 자기 tokens.css 에서 --c-text 로 덮는다. 층이 아니라 글자다 — --hero-ink-eyebrow/em/meta 와 같은 방식. */ --hero-ink-lead: var(--c-muted); --ghost-bg-color: #fff; --ghost-bg-alpha: 55%; --ghost-bg-alpha-hover: 75%; --ghost-line-alpha: 55%; /* ── 풀블리드 히어로의 글자색 (2026-09-04) ────────────────── 사진 위에서 대비가 모자라면 **층을 얹지 않고 글자색을 한 단 진하게** 한다(§12). 기본값은 팔레트 역할색 그대로라 다른 데모는 아무것도 안 바뀐다. 데모가 자기 히어로에서만 덮는다 — 리넨 tokens.css 참고. */ --hero-ink-eyebrow: var(--c-muted); /* 아이브로우 */ --hero-ink-em: var(--c-accent); /* 제목 강조(em) */ --hero-ink-meta: var(--c-text); /* 지표 숫자·라벨 */ --hero-ov-end: 58%; /* 오버레이가 사라지는 지점 */ --hero-ov-alpha: 1; /* ───────────────────────────────────────────────────────────── 6. 색 — 역할 이름만 정의한다 값은 각 데모의 tokens.css가 정한다. 아래는 이름 규약이며 skeleton.css는 오직 이 이름들만 참조한다. --c-bg 기본 배경 --c-bg-alt 교차 섹션 배경 (히어로·푸터 등) --c-surface 카드·패널 --c-surface-h 카드 호버 --c-text 기본 텍스트 --c-muted 보조 설명 --c-faint 라벨·캡션 --c-accent 강조 (링크·수치·아이브로우) --c-accent-2 보조 강조 --c-line 기본 구분선 --c-line-2 강한 구분선 --c-btn-bg 버튼 배경 --c-btn-fg 버튼 글자 --ph-bg/line/text 자리표시자 3색 tokens.css에서 위 14개를 모두 정의하지 않으면 그 데모는 깨진다. ───────────────────────────────────────────────────────────── */ } /* ═══════════════════════════════════════════════════════════════ 한글 줄바꿈 — 낱말 단위로만 끊는다 브라우저 기본값(word-break:normal)은 한글을 아무 음절에서나 끊는다. 영어는 낱말 사이에만 끊기는데 한글만 "싶으신가 / 요?"가 되는 이유다. keep-all은 공백·문장부호에서만 끊게 만든다 — 한글 사이트의 기본값이다. 대가: 긴 낱말이 안 접혀서 좁은 칸에서 넘칠 수 있다. 그래서 overflow-wrap:anywhere을 함께 건다. 평소에는 낱말을 지키고, 한 낱말이 칸보다 길 때만 마지막 수단으로 끊는다. 토큰 파일에 요소 규칙을 두는 건 이 파일에서 여기가 유일하다. 무드가 아니라 언어의 문제라 데모별로 다를 이유가 없다. ═══════════════════════════════════════════════════════════════ */ html { word-break: keep-all; overflow-wrap: anywhere; /* 숫자는 항상 라이닝(대문자 높이 정렬). 세리프는 올드스타일 숫자가 기본인 것이 많아 "300"이 "3oo"로 읽힌다. 리넨이 그랬다. 무드로 세리프를 고르는 건 자유지만 숫자가 소문자처럼 보이는 건 무드가 아니라 사고다 — 시스템 기본값으로 막는다. */ font-variant-numeric: lining-nums; } /* 문장부호 단독 줄바꿈 금지 (v3 §1). keep-all 은 공백에서 끊는 것까지는 못 막는다. 대형 카피에서 "장면을 / 설계합니다 / ." 처럼 마지막 마침표만 다음 줄로 떨어지는 것이 그 경우다 — 어절과 문장부호 사이에 끊을 자리가 없는데도 끊긴 게 아니라, "설계합니다."가 칸보다 길어 마지막 글자가 밀려난 것이다. 그래서 마지막 어절+문장부호를 한 낱말로 묶는다.

장면을
설계합니다.

★ 묶는 범위는 "마지막 한 어절 + 문장부호"까지다. white-space:nowrap 은 위의 overflow-wrap:anywhere 보다 세서, 묶은 덩어리가 칸보다 길면 그대로 넘쳐 가로 스크롤이 생긴다. 두 어절을 묶고 싶어지면 그건 카피가 긴 것이지 줄바꿈 문제가 아니다. */ .nowrap { white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════ 브레이크포인트 — 4단 고정 (390 / 1024 / 1280 / 1920) 모바일 우선. 위 :root가 390 기준이고 아래에서 단계적으로 키운다. ═══════════════════════════════════════════════════════════════ */ /* 1024 — 태블릿 가로 */ @media (min-width: 1024px) { :root { --section-py: var(--sp-7); /* 96 */ --section-py-sm: var(--sp-6); /* 64 */ --gutter: var(--sp-4); /* 32 */ --header-h: 68px; } } /* 1024~1279 — 안전지대를 한 뼘 넓힌다. 이 구간에서 --t-display 는 8vw 로 자라는데(82~96px) 안전지대는 38% 라, 히어로 대형 카피가 제 칸을 10~25px 넘쳤다. 전수 점검(A-1)에서 1024 의 "설계합니다."가 368px 대 359px 로 걸렸다. ★ 카피를 줄이거나 글자를 줄이는 쪽이 아니라 칸을 넓히는 쪽을 골랐다. 대형 카피의 크기는 §1 이 정하는 규격이고, 안전지대 38%는 사진 구도를 위한 목표치이기 때문이다. 42%까지는 오버레이가 아직 짙어 글자가 읽힌다 (--hero-ov-end 58%). */ @media (min-width: 1024px) and (max-width: 1279px) { :root { --hero-safe-w: 42%; } } /* 1280 — 데스크톱 */ @media (min-width: 1280px) { :root { --section-py: var(--sp-7); /* 96 */ --section-py-sm: var(--sp-6); /* 64 */ --gutter: var(--sp-5); /* 48 */ } } /* 1920 — 최대 폭 구간. 여기서 더 키우지 않는다 */ @media (min-width: 1920px) { :root { --section-py: var(--sp-8); /* 128 */ --section-py-sm: var(--sp-7); /* 96 */ --gutter: var(--sp-6); /* 64 */ } } /* 좁은 화면 번짐 여백·blur (⑯). :root 안에 미디어쿼리를 넣지 않는다 — 파일 끝. */ @media (max-width: 900px) { :root { --veil-pad: 28px; --veil-blur: 40px; --veil-alpha: 78%; } }