/* 브랜다이브 Lab 토큰 v4c · 라이트 기본 · G "깊이 잠수 v2" + 형광 라임 · 2026-10-27 시안 사이트 CSS는 이 파일의 변수만 쓴다. hex는 이 파일 밖에 적지 않는다. 라이트 기본(v4c): 사이트 다섯 쪽과 견본 문서(brand.html)는 data-theme 없이 3절 라이트 별칭(v3 값 체계)을 쓴다. 2절 다크 별칭(v4b 숯색)은 html 또는 구간 요소에 data-theme="dark" 가 있을 때 읽는다(C6, 2026-10-27: 소개 페이지 히어로·후반부·푸터 구간 단위). 그 밖의 쪽 사용 0곳. 별칭 이름은 두 테마가 같다. v4b 공개본 보관: prototype/_v4b/. v4b: 다크 바탕·면·선을 심청 집안(v4, 보관본 prototype/_v4/tokens.css)에서 숯색 집안으로 옮겼다. 심청은 버튼·포커스·탭 표시선 같은 작은 자리에만 남는다. 해석 근거: docs/reference/reinterpretation.md. 움직임 값(6절)은 참고 사이트에서 잰 값을 옮겼고 지어낸 값이 없다. 서체 링크: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css */ :root { /* 1. 스케일 ------------------------------------------------------ */ /* Primary 심청(깊은 바다 파랑): 누르는 색. v4b 다크에서는 버튼 바탕(600)·탭 표시선(500)·포커스 링(400)에만 쓴다. 950·875·850은 v4 다크 바탕 단계(색상각 204~207, 채도 100 유지, 명도만 낮춤). v4b 사이트 사용 0곳, 보관본 _v4 용 */ --blue-50: #EFF8FF; --blue-100: #DBF1FF; --blue-200: #B7E1FE; --blue-300: #80C7F8; --blue-400: #40A5E3; --blue-500: #0276AE; --blue-600: #015886; --blue-700: #024772; --blue-800: #013355; --blue-850: #002D4C; /* v4 다크: 누른 면·옅은 선 */ --blue-875: #002440; /* v4 다크: hover 면 */ --blue-900: #001C33; /* v4 다크: 기록 카드·코드 면. 파비콘 바탕 */ --blue-950: #000B14; /* v4 다크: 페이지 바탕 */ /* Secondary 1 청록: AI에게 맡긴 칸. 깊이(밝기)가 아니라 색상으로 나눈다. 글자색·선·빛 금지. 다크에서는 800(흰 글자 10.6:1) 같은 깊은 면만 쓴다. 밝은 청록 면을 어두운 바탕에 올리지 않는다 */ --teal-50: #E8FBFB; --teal-100: #CFF6F5; --teal-200: #A5ECEA; --teal-300: #70DCDA; --teal-400: #19C6C5; --teal-500: #07A5A4; --teal-600: #018180; --teal-700: #036463; --teal-800: #014746; --teal-900: #002D2D; /* Secondary 2 연청: 라이트 테마의 옅은 머리 띠 시작색 쪽, 그림 배경 기준색. 다크 테마 사용 0곳. 글자색 금지 */ --sky-50: #F0FBFF; --sky-100: #D9F4FF; --sky-200: #B5E9FE; --sky-300: #82D8F9; --sky-400: #47C4F1; --sky-500: #22A6D5; --sky-600: #1082AB; --sky-700: #056484; --sky-800: #01465F; --sky-900: #012D40; /* Point 형광 라임: 사람이 직접 칠한 형광펜(직접 정한 기준). 다크 규칙(v4): 글자 위에 칠하는 면으로만 쓰고 위 글자는 잉크 #141414(형광펜 200 위 16.3:1, 도식 칸 500 위 14.4:1). 글자색·선·점·막대·테두리·빛·그라데이션 금지(흰 글자도 500 위 1.28:1). 한 쪽에 두 곳 이하, 한 화면 면적 3% 이하. 예외는 방문자가 직접 칠하는 글자 선택 영역(::selection) 하나. 색상각 72~79도, 앰버 구간 35~50도와 22도 이상 떨어짐 */ --lime-50: #F7FEE0; --lime-100: #F0FCC2; --lime-200: #E4FB9A; --lime-300: #D8F972; --lime-400: #CFF750; --lime-500: #C6F432; --lime-600: #A5D122; --lime-700: #7DA418; --lime-800: #59780D; --lime-900: #395105; /* 회색: 무채색만. 다크에서도 글자 회색은 무채색 그대로 쓴다(바탕·면·선은 아래 숯 집안) */ --grey-50: #F7F7F7; --grey-100: #F0F0F0; --grey-200: #E3E3E3; --grey-300: #CCCCCC; --grey-400: #A3A3A3; --grey-500: #8A8A8A; --grey-600: #616161; --grey-700: #4A4A4A; --grey-800: #2E2E2E; --grey-900: #141414; /* 숯(v4b 다크 바탕·면·선): 색상각 210(심청 204~207 쪽), 채도 6%. 눈으로는 무채색이고 아주 약하게 차가운 쪽으로만 기운다. 단계는 바탕 대비로 정했다: 면 1.20 → hover 1.32 → 누름·옅은 선 1.44 → 기본 선 1.59(첫 단 20%, 그다음 약 10%씩). 글자 회색은 여기서 고르지 않는다(글자는 위 무채색 회색 그대로) */ --char-950: #111213; /* 페이지 바탕. 명도 7% */ --char-900: #222426; /* 표지 면·코드 면·도식 칸. 바탕과 1.20 */ --char-850: #292B2E; /* hover 면. 바탕과 1.32 */ --char-800: #2F3134; /* 누르는 동안의 면·옅은 선. 바탕과 1.44 */ --char-750: #35383B; /* 기본 선. 바탕과 1.59, 표지 면과 1.32 */ /* 4. 타이포 (두 테마 공통) ------------------------------------------ */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --ls-ko: -0.025em; --ls-en: 0; --ls-num: 0; --fs-display: 2.5rem; --lh-display: 1.3; /* 40 홈 첫 줄·공유 카드 */ --fs-h1: 2rem; --lh-h1: 1.3; /* 32 페이지 제목 */ --fs-h2: 1.5rem; --lh-h2: 1.4; /* 24 섹션·기록 카드 제목 */ --fs-h3: 1.125rem; --lh-h3: 1.4; /* 18 소제목·기준 문장·짧은 기록 제목 */ --fs-body: 1rem; /* 16 본문. 행간은 테마별(2·3절 --lh-body) */ --fs-small: 0.875rem; --lh-small: 1.45; /* 14 요약·도식 칸 글 */ --fs-caption: 0.8125rem; --lh-caption: 1.45; /* 13 메타·캡션·범례 */ --lh-tab: 1.5; /* 분류 탭 16px 라벨: 48 높이에서 글자 상자 위아래가 12씩(가이드 12.2는 140%, 한 줄 라벨이라 보이는 차이 없음) */ /* 표지 글자(v4b): 표지 폭을 따라 네 단 가운데 하나를 고른다(site.css 컨테이너 조건). 화면 폭이 아니라 표지 폭 기준이라 600 미만 구간에서도 값이 바뀌지 않는다. 크기는 디자인 가이드 5.4 위계표 안 값(Display 3 / Headline 1·3·4) */ --fs-cover-1: 2.5rem; --lh-cover-1: 1.3; /* 40 표지 폭 400 이상 */ --fs-cover-2: 2rem; --lh-cover-2: 1.3; /* 32 표지 폭 280~399 */ --fs-cover-3: 1.5rem; --lh-cover-3: 1.4; /* 24 표지 폭 200~279 */ --fs-cover-4: 1.25rem; --lh-cover-4: 1.4; /* 20 표지 폭 200 미만 */ --wm-fs: 1.125rem; /* 워드마크 기본 18 */ --wm-fs-min: 0.875rem; /* 최소 14 */ /* 5. 간격·레이아웃 (4px × n) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --gap-in: var(--sp-4); /* 그룹 안 */ --gap-group: var(--sp-12); /* 그룹 사이 48(600 미만 32) */ --gap-section: var(--sp-24); /* 섹션 사이 96(600 미만 64) */ --gap-top: var(--sp-10); /* 머리 아래 첫 콘텐츠 40(600 미만 32) */ /* 열 구간(31-layout-spec): 1024 이상 12열·거터 28 / 600~1023 8열·거터 16 / 600 미만 4열·거터 16. 좌우 여백은 모든 폭 20 */ --container: 1320px; --container-narrow: 800px; --measure: 844px; /* 본문 문단 최대 폭 = 1320 폭에서 8열(81×8 + 28×7). 사이트 CSS는 열 배치로 같은 폭을 만든다 */ --page-margin: 20px; --gutter: 28px; --cols: 12; --gnb-h: 64px; /* 머리 메뉴 높이 64(600 미만 56), 선 1px 별도 */ /* 기록 카드(v4): 면으로만 묶는다(테두리·그림자 없음). 안쪽 여백 24(600 이상 32), 카드 사이 = 거터. v4b 사이트 사용 0곳 */ --card-pad: var(--sp-6); /* 표지 카드(v4b): 표지 면(세로 4:5) + 아래 제목 + 분류·상태 한 줄. 테두리·그림자·카드 속 카드 없음. 표지 → 제목 20(디자인 가이드 1.6 "썸네일→텍스트 세로 20 고정"), 제목 → 분류 줄 4. 격자 가로 간격 = 거터(28 / 16), 세로 간격 48(600 미만 32): 카드 안 가장 큰 간격 20보다 커야 해서(가이드 0.2) 거터보다 크게 둔다 */ --cover-ratio: 4 / 5; --cover-ratio-wide: 2 / 1; /* 상세 머리 표지, 600 미만에서만 */ --cover-gap: var(--sp-5); --grid-row-gap: var(--gap-group); /* 아티클 썸네일 분류색(C5 확정, C9 변경 2026-10-27): 그림 배경과 같은 값이라 그림이 늦게 떠도 같은 색 면이 먼저 보인다. 5분류. 기획 = 심청 500(청사진 파랑, 설계도) / 글쓰기 = 라임 200(형광펜 = 사람이 칠한 문장) / 디자인 = 블루 200(종이 위 기준선) / 영상 = 연청 300(물 표면·움직임) / 자동화 = 심청 900(깊게 잠수한 작업). 기획 칸 그림은 큰 덩어리 심청 900·밝은 면 연청 100만 쓰고 라임 포인트는 쓰지 않는다(파랑 위 네온 방지). 라임 200은 그림 배경으로만 쓰는 예외다(라임 글자·선·점 금지 규칙은 그대로). 청록은 'AI에게 맡긴 칸' 색이라 썸네일에 쓰지 않는다 */ --thumb-ratio: 3 / 2; --thumb-planning: var(--blue-500); --thumb-video: var(--sky-300); --thumb-writing: var(--lime-200); --thumb-design: var(--blue-200); --thumb-auto: var(--blue-900); --thumb-zoom: 1.03; /* 목록 카드 hover 때 그림이 다가오는 배율 */ --dur-thumb: 400ms; /* 그 확대 시간 */ --lh-prose: 1.75; /* 아티클 본문 문단 행간. 긴 글이라 기본(1.6)보다 한 단 넓게 */ /* 6. 움직임 (두 테마 공통) --------------------------------------------- 디자인 가이드는 시간 값을 정하지 않는다(문서 범위 밖). 아래 값은 참고 사이트 하나의 스타일에서 잰 값을 옮겼다. 출처·대응은 docs/reference/reinterpretation.md 2절. 곡선은 두 개만 쓴다. 움직임 줄이기 설정(prefers-reduced-motion: reduce)이면 site.css 가 전환·등장을 끈다 */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 면·화살표·등장: 참고 사이트의 기본 곡선 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 선 그리기: 빠르게 나왔다가 천천히 멈춘다 */ --dur-1: 120ms; /* 글자색 바뀜(링크·메뉴) */ --dur-2: 200ms; /* 면 한 단계·화살표 밀림 */ --dur-3: 250ms; /* 메뉴 밑줄 그리기 */ --dur-4: 500ms; /* 스크롤 등장 */ --stagger: 120ms; /* 등장 순서 간격. 네 번째부터는 같은 지연(최대 360ms) */ --reveal-y: 24px; /* 등장 전 아래로 내려 둔 거리 */ --nudge-x: 4px; /* 카드 hover 때 화살표가 밀리는 거리 */ /* 7. 모양 ------------------------------------------------------- */ --radius-s: 3px; /* 42 이하 버튼 */ --radius-m: 4px; /* 버튼·도식 칸·입력·기록 카드·코드 묶음 */ --radius-l: 8px; /* 사이트 사용 0곳. brand.html 견본 틀에만 쓴다 */ --shadow-1: 0 4px 16px rgba(20, 20, 20, 0.08); /* 라이트 테마의 떠 있는 층 전용. 다크 사이트 사용 0곳 */ /* 8. 버튼·링크 크기 ------------------------------------------------ */ --btn-h: 48px; --btn-h-s: 42px; --btn-px: 16px; --btn-fs: 0.875rem; --btn-min-w: 80px; --link-underline: 1px; --link-underline-hover: 2px; --link-underline-offset: 0.2em; --focus-width: 2px; --focus-offset: 2px; --dg-gap: var(--sp-1); --dg-gap-lane: var(--sp-4); } /* 2. 의미 별칭 — 다크 (소개 페이지 구간 단위: 히어로·만들어 본 것 띠·후반부·연락 띠·머리 메뉴·푸터 요소의 data-theme="dark" 에서만 읽는다. 다른 쪽 사용 0곳) --------------------- v4b: 바탕·면·선은 숯 집안(1절). 대비는 WCAG 상대 휘도 공식으로 python3 계산. "면"은 --bg-subtle(표지 면) */ :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; --text-1: #FFFFFF; /* 제목·표지 글자·강한 글자. 바탕 18.8:1, 표지 면 15.6:1, hover 면 14.2:1 */ --text-2: var(--grey-300); /* 본문·카드 제목 #CCCCCC. 바탕 11.7:1, 면 9.7:1, hover 면 8.8:1 */ --text-3: var(--grey-400); /* 보조·캡션·분류 줄·쉬는 탭 #A3A3A3. 바탕 7.4:1, 면 6.2:1, hover 면 5.6:1 */ --text-4: var(--grey-600); /* 비활성 전용(대비 예외). 바탕 3.0:1 */ --text-link: var(--text-1); /* 링크는 흰 글자 + 밑줄. 심청·청록·연청·라임 글자 금지 */ --text-on-brand: #FFFFFF; /* 심청 버튼 위 7.7:1 */ --text-on-brand-2: var(--grey-200); --text-on-point: var(--grey-900); /* 라임 위 잉크 */ --text-on-band-2: var(--text-2); /* v4b는 머리 띠가 없어 본문 회색과 같다(글자색 4단계 유지) */ --text-on-inverse: var(--grey-900); --bg-page: var(--char-950); /* 페이지 바탕 숯 */ --bg-subtle: var(--char-900); /* 면 한 단: 표지·코드 묶음·도식 칸 */ --bg-hover: var(--char-850); /* 면 두 단: 표지 hover. 가이드 4.3 "배경과 대비되는 방향으로 1단계"를 다크에서는 밝은 쪽으로 */ --bg-pressed: var(--char-800); /* 면 세 단: 누르는 동안 */ --bg-cover: var(--char-900); /* 표지 면(v4c에서 이름을 나눔). 다크는 면 한 단과 같다 */ --bg-cover-hover: var(--char-850); --bg-cover-pressed: var(--char-800); --bg-ai: var(--teal-800); /* AI에게 맡긴 범위 면(흰 글자 10.6:1). 사이트 사용 0곳, 견본용 */ --bg-paper: var(--char-900); --bg-brand-tint: var(--char-900); --bg-strong: var(--char-900); --bg-inverse: #FFFFFF; /* 건너뛰기 링크(키보드 초점일 때만 보임) */ --line-1: var(--char-750); /* 기본 구분선: 머리 메뉴 끝·섹션 경계·바닥 윗선. 바탕 1.59 */ --line-2: var(--char-800); /* 옅은 선: 목록 행 사이·탭 바닥선. 바탕 1.44 */ --line-ui: var(--grey-500); /* 입력창·선 버튼 경계 #8A8A8A. 바탕 5.4:1 */ --line-strong: #FFFFFF; /* 심청은 작은 자리에만: 버튼 바탕, 탭 표시선, 포커스 링. 600(브랜드 기준값)은 숯 바탕과 2.45:1이라 선·링에는 밝은 단을 쓴다 */ --brand: var(--blue-600); /* 버튼 바탕(흰 글자 7.7:1). 글자색으로 쓰지 않는다 */ --brand-hover: #016BA5; /* 명도 +6%p. 어두운 바탕에서는 밝은 쪽이 대비 방향. 흰 글자 5.8:1 */ --brand-pressed: #0175B4; /* 명도 +9%p, 흰 글자 5.0:1 */ --accent-line: var(--blue-500); /* 선택된 탭 표시선 2px. 바탕 3.8:1(그래픽 3:1 기준 통과). 늘 보이는 선이라 기준을 넘는 가장 어두운 단 */ --secondary-1: var(--teal-500); /* 견본용 기준값. 사이트 사용 0곳 */ --secondary-2: var(--sky-300); /* 견본용 기준값. 사이트 사용 0곳 */ --point: var(--lime-500); /* 도식 '직접 정함' 칸. 칸 안에 "직접 정함" 글자 라벨. 사이트 사용 0곳 */ --point-subtle: var(--lime-500); --mark: var(--lime-200); /* 형광펜: 사람이 직접 정한 구절. 쪽마다 두 곳 이하. 위 잉크 16.3:1. 500이 아니라 200인 이유: 어두운 바탕에서 500은 형광 발광(다크 + 네온)으로 읽히고, 200은 종이 위 형광펜으로 읽힌다 */ --selection: var(--lime-200); /* 방문자가 칠하는 선택 영역. 위 잉크 */ --state-error: #EF5350; /* 다크 오류(Material Red 400). 바탕 5.4:1 */ --state-success: #66BB6A; /* 다크 성공(Material Green 400). 바탕 7.9:1 */ --focus-ring: var(--blue-400); /* 2px 키보드 초점 링 #40A5E3. 바탕 6.9:1, 면 5.7:1. 잠깐만 보이는 표시라 잘 보이는 쪽을 골랐다 */ --focus-ring-on-dark: var(--blue-400); --link-on-dark: #FFFFFF; --lh-body: 1.7; /* 다크 본문 행간 170%. 밝은 글자는 어두운 바탕에서 굵고 빽빽해 보인다 */ /* 머리 띠: v4b 사이트 사용 0곳(머리는 바탕과 같은 숯 면). v4 값은 보관본 prototype/_v4/tokens.css */ --grad-head: none; --grain-head: none; --band-base: var(--char-950); /* 도식: 칸은 표지와 같은 면 한 단, 글자 흰색(15.6:1)·보조 #CCCCCC(9.7:1) */ --dg-1: var(--char-900); --dg-ai: var(--teal-800); /* AI에게 맡긴 단계(흰 글자 10.6:1). 사이트 사용 0곳 */ --dg-mark: var(--lime-500); /* 사람이 직접 정한 기준, 도식당 1칸. 글자 --text-on-point + "직접 정함" 라벨. 사이트 사용 0곳 */ --dg-2: var(--char-850); /* 버튼 상태 */ --btn-primary-bg: var(--brand); --btn-primary-bg-hover: var(--brand-hover); --btn-primary-bg-pressed: var(--brand-pressed); --btn-primary-text: var(--text-on-brand); --btn-line-border: var(--line-ui); --btn-line-text: var(--text-1); --btn-line-bg-hover: var(--bg-hover); --btn-line-bg-pressed: var(--bg-pressed); --btn-disabled-bg: var(--char-800); --btn-disabled-text: var(--grey-600); --link-color: var(--text-link); } /* 3. 의미 별칭 — 라이트 (사이트 기본, v4c. v3 값 체계 그대로 + 표지 면 별칭) ------ */ :root { --text-1: var(--grey-900); /* 제목·강한 글자 18.4:1 */ --text-2: var(--grey-700); /* 본문 8.9:1 */ --text-3: var(--grey-600); /* 보조·캡션 6.2:1, 회색 면 위 5.4:1 이상 */ --text-4: var(--grey-400); /* 비활성 전용(대비 예외) */ --text-link: var(--blue-700); /* 링크 9.8:1, 머리 띠 가장 진한 점 7.6:1 */ --text-on-brand: #FFFFFF; --text-on-brand-2: var(--grey-200); --text-on-point: var(--grey-900); --text-on-band-2: var(--grey-800); --text-on-inverse: #FFFFFF; --bg-page: #FFFFFF; --bg-subtle: var(--grey-50); --bg-hover: var(--grey-100); --bg-pressed: var(--grey-200); /* 표지 면(v4c): 흰 바탕 위 옅은 회색. 회색 50(바탕 1.07)은 4:5 표지 열 장이 바탕에 묻혀 한 단 진한 100을 쓴다. 바탕 1.14, hover 200 1.28(한 단 진하게), 누름 300 1.61. 표지 글자 잉크 #141414: 100 위 16.2, 200 위 14.4, 300 위 11.5 */ --bg-cover: var(--grey-100); --bg-cover-hover: var(--grey-200); --bg-cover-pressed: var(--grey-300); --bg-ai: var(--teal-50); --bg-paper: var(--grey-100); --bg-brand-tint: var(--sky-50); --bg-strong: var(--blue-900); --bg-inverse: var(--blue-900); --line-1: var(--grey-200); --line-2: var(--grey-100); --line-ui: var(--grey-500); --line-strong: var(--grey-900); --brand: var(--blue-600); --brand-hover: #014468; /* 명도 −6%p */ --brand-pressed: #013A58; /* 명도 −9%p */ --accent-line: var(--blue-600); /* 선택된 탭 표시선 2px 심청 #015886. 흰 바탕 7.7:1 */ --secondary-1: var(--teal-500); --secondary-2: var(--sky-300); --point: var(--lime-500); --point-subtle: var(--lime-50); --mark: var(--lime-100); --selection: var(--lime-100); --state-error: #C62828; --state-success: #2E7D32; --focus-ring: var(--blue-700); --focus-ring-on-dark: #FFFFFF; --link-on-dark: var(--text-on-brand); --lh-body: 1.6; /* 그라데이션·질감: 브랜드 표현 자리 전용(규정: docs/brand/brand-guide.md 4절). 선형 2색, 각도 고정 */ --grad-1: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-700) 100%); /* 진한 띠: 공유 카드·표지 */ --grad-2: linear-gradient(115deg, #D5F0FE 0%, var(--teal-50) 100%); /* 옅은 띠: 라이트 테마 머리 */ --grad-3: linear-gradient(180deg, var(--sky-100) 0%, var(--sky-300) 100%); /* 그림 배경 기준색. 글자 금지 */ --grad-head: var(--grad-2); --grain-head: var(--band-grain); /* 질감: SVG 잡음(feTurbulence fractalNoise, baseFrequency 0.8, 3옥타브, 240px 타일 stitch, sRGB 계산) 한 겹. 낱알 한 색, 낱알마다 불투명도 0~4%(평균 2%). 움직이지 않는다. 띠 그라데이션 위에만 얹는다. 옅은 띠 = 심청 900 낱알(--band-grain), 진한 띠 = 흰 낱알(--band-grain-dark) */ --band-base: var(--teal-50); --band-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.110 0 0 0 0 0.200 0.040 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --band-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.040 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* 진한 면 위에는 라임·청록·연청(아쿠아)을 글자·선·점·빛으로 올리지 않는다(다크 + 네온 방지). 글로우·빛 번짐 금지 */ --dg-1: var(--grey-100); --dg-ai: var(--teal-100); --dg-mark: var(--lime-500); --dg-2: var(--blue-800); --btn-primary-bg: var(--brand); --btn-primary-bg-hover: var(--brand-hover); --btn-primary-bg-pressed: var(--brand-pressed); --btn-primary-text: var(--text-on-brand); --btn-line-border: var(--line-ui); --btn-line-text: var(--text-1); --btn-line-bg-hover: var(--grey-50); --btn-line-bg-pressed: var(--grey-100); --btn-disabled-bg: var(--grey-200); --btn-disabled-text: var(--grey-600); --link-color: var(--text-link); } /* 600~1023: 8열, 거터 16 */ @media (max-width: 1023px) { :root { --gutter: 16px; --cols: 8; } } /* 600 이상: 기록 카드 안쪽 여백 32 */ @media (min-width: 600px) { :root { --card-pad: var(--sp-8); } } /* 600 미만: 4열, 모바일 글자 크기·간격. 글자 크기 기준도 열 기준과 같은 600 하나로 둔다 */ @media (max-width: 599px) { :root { --fs-display: 1.75rem; --lh-display: 1.4; /* 28 */ --fs-h1: 1.5rem; --lh-h1: 1.4; /* 24 */ --fs-h2: 1.25rem; --lh-h2: 1.4; /* 20 */ --fs-h3: 1rem; --lh-h3: 1.4; /* 16 */ --gutter: 16px; --cols: 4; --gap-section: var(--sp-16); --gap-group: var(--sp-8); --gap-top: var(--sp-8); --gnb-h: 56px; } }