/* ========================================================================= DALYUL — tokens.css (WP-02) DESIGN §1 토큰 그대로: 색 · 타이포 · 간격 · 그리드 · 이징 · 지속시간 · z 값을 바꾸려면 DESIGN.md를 먼저 고친다. JS는 getComputedStyle로 읽어도 된다. ========================================================================= */ /* JS(chapters.js·menu.js)가 --margin을 parseFloat로 읽는다. 등록하지 않으면 식 문자열이 그대로 와서 NaN이 된다(CONSULT_여백 §2-1) */ @property --margin { syntax: ''; inherits: true; initial-value: 112px; } @property --gutter { syntax: ''; inherits: true; initial-value: 24px; } :root { /* ---------- 1-1 색 ---------- */ /* 26-10-15 사장님 결정: 색 견본 ④(첫 화면 남색 하늘에 맞춤 — docs/build/색견본_세방법.html) + 아침 바탕 #ECECEC. 초록기 빼고 흰색을 둘로 나눔: 밤 위 글자 = 구름과 같은 흰색(--moonmilk), 아침 칸 바탕 = --morning. 밤 바탕 · 먹은 그대로(무대 WebGL 바탕 · 은하수 사진 검정 · 밤 사진 바탕과 맞물려 있어 바꾸면 경계가 생김 — 차이도 1~4단계라 눈에 거의 안 보임). 옛 값: dust #9A9D97 · moonmilk #ECEDE7(아침 바탕 겸용) · paper #F6F6F2 · stone #5C605B · 실버 #D6D8D3 · 바잘트 #17191B. 옛 판 = 홈페이지\dalyul-moon_백업_1015_구름전 */ --umbra: #060708; /* 밤 배경 */ --umbra-2: #0E1012; /* 밤 위 한 단 띄운 면(입력창, 메뉴) */ --dust: #9A9FA8; /* 밤 위 보조 텍스트·라벨 */ --moonmilk:#EDEFF2; /* 밤 위 본문·제목(구름과 같은 흰색) */ --morning: #ECECEC; /* 아침 바탕(사장님 지정) */ --paper: #F6F6F6; /* 아침 위 한 단 밝은 면 */ --ink: #0A0B0C; /* 아침·스윕 위 글자 */ --stone: #5B5E63; /* 아침 위 보조 텍스트(#ECECEC 위 5.6:1) */ --sun: #FF5A1E; /* 유일한 포인트(면·점만) */ --sweep-01: #F2541B; /* COLLECTION 01 버밀리언 (collections.json과 동일) */ --sweep-01-alt-a: #D6D9DE; /* 역상 시안: 세럼 실버 */ --sweep-01-alt-b: #161A24; /* 역상 시안: 크림 베이살트(남색 기운 아주 살짝) */ --rule-night: rgba(237, 239, 242, .18); --rule-day: rgba(10, 11, 12, .16); /* 맥락 색(섹션·HUD가 덮어쓴다). 기본 = 밤 */ --fg: var(--moonmilk); --fg-2: var(--dust); --rule: var(--rule-night); --focus: var(--sun); /* ---------- 1-2 타이포: 패밀리 ---------- 'Dalyul Han' = 月·律 두 글자만(unicode-range). Pretendard에 한자가 없어 생기는 시스템 폰트 섞임을 막는다(Noto Sans KR VF 서브셋, 같은 Source Han 계열). 'Dalyul Local Sans' = CDN 실패(html.font-offline)일 때만 스택에 들어간다. */ --ff-kr-fallback: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif; --ff-ja-fallback: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif; --ff-local: ; /* .font-offline에서 채운다 */ --ff-pretendard: 'Dalyul Han', 'Pretendard Variable', 'Pretendard', var(--ff-local) var(--ff-kr-fallback); --ff-pretendard-jp: 'Dalyul Han', 'Pretendard JP Variable', 'Pretendard JP', 'Pretendard Variable', var(--ff-local) var(--ff-ja-fallback); --ff-archivo: 'Archivo', 'Pretendard Variable', var(--ff-local) var(--ff-kr-fallback); --ff-mono: 'JetBrains Mono', 'Pretendard Variable', 'Pretendard JP Variable', var(--ff-local) ui-monospace, 'SFMono-Regular', Consolas, monospace; /* 언어별 역할 매핑(KO 기본) */ --ff-display: var(--ff-pretendard); --ff-body: var(--ff-pretendard); /* FOCUS R3 F22 서체 위계 세 층(같은 고딕 계열 안에서만): 정점 800은 세 곳(히어로 슬로건 · 컬렉션 제목 「만월」 · S12 제목) + 月律 두 글자, 장 제목 600, 제품 · 이름 500, 큰 시각 숫자 500(고른 폭). 라벨 = 사이트 고딕 대문자 600 · 자간 .16em(고정폭은 궤도 눈금 숫자에만) */ --fw-peak: 800; --fw-title: 600; --fw-name: 500; --fw-time: 500; --ff-label: var(--ff-pretendard); --fw-display: var(--fw-title); --fw-display-2: var(--fw-title); /* d2·h2 */ --fw-body: 500; --fw-label: 600; /* JetBrains Mono는 500만 받으므로 라틴은 500, 한글·가나는 Pretendard 600 */ --fstretch-display: 100%; --fstretch-body: 100%; /* ---------- 1-2 타이포: 크기 (데스크톱 clamp / 모바일 고정은 아래 미디어쿼리) ---------- */ --fs-d1: clamp(52px, 10.5vw, 200px); --fs-d2: clamp(40px, 6.4vw, 116px); --fs-h2: clamp(32px, 4.2vw, 72px); --fs-lead: clamp(24px, 2.4vw, 40px); --fs-body-l: clamp(19px, 1.45vw, 24px); --fs-body: clamp(16px, 1.15vw, 18px); --fs-label: 13px; --fs-kicker: clamp(19px, 1.4vw, 22px); /* §44 장 머리 이름표(月律 — RHYTHM · 만월 컬렉션의 밤 · COLLECTION 01 …) = 메뉴(15px)보다 한 단계 위, 큰 제목보다 아래 */ --fs-tag: clamp(22px, 1.55vw, 24px); /* §44 따라오는 장 표지(「— 만월 컬렉션의 밤」 · 「● 01 만월」, 데스크톱 흰 글자 600) */ --ls-kicker: .12em; /* 대문자 라틴 이름표 자간(크기가 커진 만큼 .16em → .12em) */ --fs-time: clamp(72px, 10vw, 180px); --fs-scale: 1; /* .font-offline에서 1.04(600 폴백 보정, DESIGN §10-1-11) */ --lh-d1: .95; --lh-d2: 1.02; --lh-h2: 1.12; --lh-lead: 1.4; --lh-body-l: 1.6; --lh-body: 1.65; --lh-label: 1.3; --lh-time: 1; /* 자간 KO 기본 */ /* FINAL F-05 ⓖ: 한글 큰 제목 자간은 −0.02em 이내(−0.035 → −0.02, 획이 붙어 뭉개지는 것 0) */ --ls-d1: -.02em; --ls-d2: -.02em; --ls-h2: -.02em; --ls-lead: -.015em; --ls-body-l: -.01em; --ls-body: 0; --ls-label: .16em; --ls-time: -.03em; --ls-label-mixed: 0; /* 번역되는 라벨(한글·가나)은 0 */ /* ---------- 1-3 간격 ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --section-gap: 24vh; /* ---------- 1-4 그리드 (≥1280 기본) — OWNER_UPDATE_R1 §15 · CONSULT_여백 ---------- */ --cols: 12; --content-max: 1680px; /* 글 영역 최대 폭. 넘는 폭은 양쪽 여백으로(약 1976부터 작동) */ /* 레일 곡선 2판(CONSULT_레일곡선): 레일 그림은 벽(x 0)부터 그리고, 아래 세 값은 이제 본문 최소 여백(112) 계산에만 쓴다. 곡선 자리·높이·누르는 폭(--rail-top · --rail-chord · --rail-hit)은 header.js가 화면 크기마다 문서 루트에 쓴다 */ --rail-x: 24px; --rail-w: 32px; --rail-clear: 56px; --rail-box-w: 104px; /* 레일 상자 폭(벽 ~ x 104) */ /* 최대 폭 보정 전 여백. 역상 50/50 경계 간격과 전폭 장식(S08 호) 라벨이 쓴다 */ --margin-base: max(calc(var(--rail-x) + var(--rail-w) + var(--rail-clear)), min(7.5vw, 160px)); --margin: max(var(--margin-base), calc((100vw - var(--content-max)) / 2)); --gutter: clamp(24px, calc(100vw / 60), 32px); --col: calc((100vw - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols)); --hdr-h: 72px; /* 머리글 아래 여백(26-10-03 사장님 「메뉴와 너무 붙어 있어」): 따라오는 표지 「● 01 만월」 · 「— 만월 컬렉션의 밤」 · 출시 알림 귀퉁이가 머리글 아래 끝에서 띄우는 거리 하나. 화면 높이 비례(1366×768 = 40 · 1440×900 ≈ 47 · 1767×1030 ≈ 54px). 휴대폰은 예전 값 그대로(아래 767px) */ --below-hdr: clamp(40px, 5.2svh, 56px); /* ---------- 1-5 이징 · 지속시간 ---------- */ --ease-out: cubic-bezier(.165, .84, .44, 1); --ease-out-soft: cubic-bezier(.215, .61, .355, 1); --ease-io: cubic-bezier(.455, .03, .515, .955); --ease-tide: cubic-bezier(.445, .05, .55, .95); --ease-back: cubic-bezier(.3, 1.18, .5, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --d-xs: 120ms; --d-s: 240ms; --d-m: 400ms; --d-l: 800ms; --d-xl: 1200ms; --d-2xl: 1600ms; /* ---------- 1-6 z-index ---------- */ --z-sky: 0; --z-poster: 1; --z-k4: 1; --z-stage: 2; --z-main: 3; --z-grain: 4; --z-jumpfx: 39; /* 메뉴 이동 물결 막(js/scroll/jumpfx.js) — 머리글 바로 아래 */ --z-hud: 40; --z-cursor: 50; --z-menu: 60; --z-overlay: 70; --z-loader: 80; --z-skip: 90; /* 그레인 세기(밤 4% / 아침 2.5% / 스윕 3%) */ --grain-night: .03; --grain-day: .025; --grain-sweep: .03; } /* ---------- 언어별 매핑 ---------- */ :root:lang(en) { --ff-display: var(--ff-archivo); --ff-body: var(--ff-archivo); --fw-peak: 700; --fw-title: 600; --fw-name: 500; --ff-label: var(--ff-archivo); --fw-body: 450; --fstretch-display: 118%; /* wdth 112~125 */ --fstretch-body: 100%; --ls-d1: -.03em; --ls-d2: -.025em; --ls-h2: -.02em; --ls-lead: -.01em; --ls-body-l: 0; --ls-label-mixed: .08em; } :root:lang(ja) { --ff-display: var(--ff-pretendard-jp); --ff-body: var(--ff-pretendard-jp); --ff-label: var(--ff-pretendard-jp); --ls-d1: -.01em; --ls-d2: -.01em; --ls-h2: 0; --ls-lead: 0; --ls-body-l: 0; } /* CDN 폰트 CSS가 실패하면(link onerror) 로컬 Pretendard 600 서브셋으로 */ :root.font-offline { --ff-local: 'Dalyul Local Sans',; --fs-scale: 1.04; } /* ---------- 그리드 단계 ---------- */ /* 미디어쿼리에서는 --margin-base만 바꾼다(--margin은 위 식 그대로 → 1976 미만에서 --margin = --margin-base) */ @media (max-width: 1279px) { :root { --margin-base: 7.5vw; --gutter: 20px; } } @media (max-width: 1023px) { :root { --cols: 8; } /* 여백·거터는 위 단계 그대로 */ } @media (max-width: 767px) { :root { --cols: 4; --margin-base: clamp(24px, 6.15vw, 32px); --gutter: 16px; --hdr-h: 56px; --below-hdr: 24px; --fs-d1: 52px; --fs-d2: 40px; --fs-h2: 30px; --fs-lead: 22px; --fs-body-l: 18px; --fs-body: 16px; --fs-label: 12px; --fs-kicker: 16px; --fs-time: 64px; --section-gap: 16vh; } } /* ---------- 메뉴 이동 「동심원」 막 두 장(js/scroll/jumpfx.js, CONSULT_메뉴이동_물결 ㉮) ---------- .jfx-veil = 도착 장 바탕색 덮개(색 · 가면은 JS), .jfx-fx = 그 아래 층 전부를 출렁이게 하는 물결 막(물결 도는 동안만 붙음). 둘 다 누름 · 끌기를 받지 않고 화면 낭독에서 숨김. 평소 비용 0(숨김) */ .jfx-veil, .jfx-fx { position: fixed; inset: 0; z-index: var(--z-jumpfx); pointer-events: none; } .jfx-veil { opacity: 0; visibility: hidden; background: var(--umbra); } .jfx-fx { display: none; } /* ---------- 마우스 물결 방울(js/fx/waterlens.js · 가 판 세게, CONSULT_마우스물결_전체) ---------- 작은 원형 막 = 그 아래 그려진 모든 것을 밀어 일렁이게(backdrop-filter는 JS가 방울이 살아 있는 동안만 붙임). 층: 평소 39(머리글 · 고리 커서 아래) · 제품 자세히 보기 창 / 저널 읽기 창이 열리면 71(창 위) · 목차가 열리면 62(목차 60 위, 태양 커서 65 아래). 누름 · 끌기 · 글자 선택 · 입력 칸 커서는 그대로(pointer-events: none). 평소 숨김 = 비용 0 */ :root { --z-waterlens: 39; --z-waterlens-over: 71; --z-waterlens-menu: 62; } .waterlens-drop { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; z-index: var(--z-waterlens); pointer-events: none; user-select: none; contain: strict; display: none; } html.is-overlay .waterlens-drop, html.is-reader .waterlens-drop { z-index: var(--z-waterlens-over); } html.menu-open .waterlens-drop { z-index: var(--z-waterlens-menu); } /* 휴대폰 손가락 물결(js/fx/touchripple.js · 크게) — 마우스 물결과 같은 층 규칙. 크롬 계열 = 원형 막(.touchripple-drop) · 아이폰 = 빛 고리 캔버스(.touchripple-glow). 누름 · 스크롤은 그대로(pointer-events: none). 평소 숨김 = 비용 0 */ .touchripple-drop, .touchripple-glow { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: var(--z-waterlens); pointer-events: none; user-select: none; display: none; } .touchripple-drop { border-radius: 50%; contain: strict; } html.is-overlay .touchripple-drop, html.is-reader .touchripple-drop, html.is-overlay .touchripple-glow, html.is-reader .touchripple-glow { z-index: var(--z-waterlens-over); } html.menu-open .touchripple-drop, html.menu-open .touchripple-glow { z-index: var(--z-waterlens-menu); }