/* ================================================================ 텐비 디자인 토큰 한 벌. 랜딩(lp-*) · 작업실(--ws-*) · 분석(Tailwind) · 강의실(clsx-*)이 서로 다른 시기에 자라면서 색·모서리·여백이 넷으로 갈렸다. 여기가 그 넷이 수렴할 자리다. 왜 public/css 인가: resources/css 에 두면 vite 번들을 타는데, 강의실은 일부러 번들에 기대지 않고(classroom/_style 주석 참고) public/build 는 gitignore 라 서버에서 빌드된다. 토큰은 넷 다 닿아야 하므로 빌드를 안 타는 자리에 둔다. workspace.css 가 이미 같은 자리에 있다. 왜 workspace.css 안에 넣지 않았나: 그 파일은 body { overflow: hidden } 을 같이 걸어서 공개 화면에 로드하면 페이지가 안 굴러간다. 토큰만 따로 서야 넷이 같이 쓸 수 있다. 쓰는 법: partials/tokens 를 껍데기 에 넣는다. 이 파일 자체는 선택자를 만들지 않으므로 로드해도 화면이 변하지 않는다. 기존 --lp / --ws 변수를 여기로 갈아끼우는 건 단계별로 따로 한다. ================================================================ */ :root { /* ── 중립 ────────────────────────────────────────────── Tailwind slate 계열. 랜딩 본문 833개 hex 의 상위 값이 전부 이 계열이고 분석·강의실·전역 topbar 도 여기 있다. 넷 중 셋이 이미 쓰던 값이라 기준으로 삼았다. 작업실의 Toss 회색(#191f28 계열)이 여기로 온다. */ --t-fg: #0f172a; /* 본문 글자 */ --t-fg-2: #64748b; /* 보조 글자 */ --t-fg-3: #94a3b8; /* 흐린 글자, 자리표시 */ --t-fg-on: #ffffff; /* 진한 바탕 위 글자 */ --t-bg: #f8fafc; /* 화면 바탕 */ --t-bg-sunken: #f1f5f9; /* 한 단 들어간 바탕 */ --t-surface: #ffffff; /* 카드·패널 */ --t-surface-2: #f8fafc; /* 카드 안 한 단 */ --t-line: #e2e8f0; /* 기본 선 */ --t-line-strong: #cbd5e1; /* 강조 선, 입력칸 테두리 */ /* ── 브랜드 ──────────────────────────────────────────── 파랑 하나로 모은다. 애플 블루(#0071E3, lp 머리말)와 Toss 블루(#3182f6, 작업실)가 여기로 온다. #3182f6 과 #3b82f6 은 눈으로 구분이 안 돼서 둘을 합치는 건 공짜다. */ --t-brand: #3b82f6; /* 바탕·아이콘 */ --t-brand-strong: #2563eb; /* 글자·테두리. 흰 바탕에서 AA 를 넘긴다 */ --t-brand-hover: #1d4ed8; --t-brand-soft: #eff6ff; /* 연한 바탕 */ /* ── 유료 표식 ────────────────────────────────────────── 리믹스는 유일한 유료 제품인데 topbar 에서 네 번째에 둔다(화면 규칙 1-2). 순서 대신 색으로 무게를 주기로 한 그 색이 이것이다. 일반 강조에 쓰지 않는다. 아무 데나 쓰면 표식이 아니게 된다. 쓰는 곳: topbar .paid, 리믹스 CTA, 강의실 수강신청 버튼. */ --t-paid-from: #7c3aed; --t-paid-to: #ff2d78; --t-paid: linear-gradient(135deg, var(--t-paid-from), var(--t-paid-to)); --t-paid-solid: #7c3aed; /* 그라디언트를 못 쓰는 자리(글자·테두리) */ /* ── 상태 ──────────────────────────────────────────────── */ --t-ok: #10b981; --t-ok-soft: #ecfdf5; --t-warn: #f59e0b; --t-warn-soft: #fffbeb; --t-danger: #ef4444; --t-danger-soft: #fef2f2; /* ── 모서리 ──────────────────────────────────────────── 실측: 8px 124 · 12px 115 · 10px 73 · 16px 68 · 999px 59 · 20px 54 · 6px 51. Tailwind 쪽은 rounded-xl 808 · full 703 · 2xl 548 · lg 421. 9/10 은 8 로, 14 는 12 로, 18/20 은 16 으로 접으면 90% 가 덮인다. 999px · 99px · 9999px 은 같은 알약의 세 가지 표기라 하나로 모은다. */ --t-r-sm: 6px; /* 뱃지, 작은 태그 */ --t-r-md: 8px; /* 버튼, 입력칸 */ --t-r-lg: 12px; /* 카드 */ --t-r-xl: 16px; /* 큰 카드, 모달 */ --t-r-2xl: 24px; /* 히어로 패널 */ --t-r-pill: 999px; /* 알약 버튼, 아바타 */ /* ── 여백 ────────────────────────────────────────────── 실측에 6/7/9/10/14px 이 섞여 있다. 짝수 네 칸 배수로 접는다. */ --t-sp-1: 4px; --t-sp-2: 8px; --t-sp-3: 12px; --t-sp-4: 16px; --t-sp-5: 20px; --t-sp-6: 24px; --t-sp-8: 32px; --t-sp-10: 40px; --t-sp-12: 48px; --t-sp-16: 64px; /* 랜딩 섹션 사이. 지금 5rem(80px) 고정인데 모바일에서 너무 벌어진다. */ --t-sp-section: 80px; /* ── 본문 폭 ────────────────────────────────────────── 실측했더니 제품마다 다른 게 아니라 화면마다 달랐다. 랜딩 1100 · 강의실 1080 · 분석 1100/1200/1000/900 · /app 1280(max-w-7xl) · 그 밖에 max-w-[1200px] 이 34곳. 1280 을 고른 이유: Tailwind 의 max-w-7xl 기본값이라 max-w-[1300px] 같은 임의값 클래스를 안 써도 된다. 문서 3장 함정표에 "JS로 붙인 임의값 클래스는 빌드에 없어서 무시된다"가 있는데 그 함정을 아예 피한다. /app 이 이미 쓰는 값이고, 랜딩 1100 에서 넓어지는 방향이라 넘침 위험도 없다. 규칙은 "어느 제품이냐"가 아니라 "표냐 문단이냐"로 갈린다. 제품별로 다르면 사용자가 규칙을 배워야 하지만, 내용 종류로 갈리면 배울 게 없다. */ /* 세 칸 사다리. 폭은 "어느 페이지냐"가 아니라 "무엇을 담느냐"가 정한다. 실측했더니 작업실 본문 폭이 열 가지였다(672 · 768 · 896 · 1024 · 1100 · 1152 · 1280 · 1440 · 1600 · 없음). 규칙이 먼저 있었던 게 아니라 페이지가 먼저 생겨서다. 칸을 셋으로 줄이면 새 화면을 만들 때 고를 것이 셋뿐이라 다시 갈라지지 않는다. */ /* 세 값 모두 Tailwind 기본값이다(max-w-7xl · 5xl · 3xl). 그래서 max-w-[1300px] 같은 임의값 클래스를 쓸 일이 없고(3장 함정표), 이미 그 클래스를 쓰던 화면은 손댈 것도 없다. 22화면이 이미 5xl 위에 있었다. */ --t-w-wide: 1280px; /* max-w-7xl. 표 · 대시보드 · 카드 그리드 */ --t-w-base: 1024px; /* max-w-5xl. 도구 화면 · 목록. 기본값 */ --t-w-form: 768px; /* max-w-3xl. 폼 · 설정 · 글줄. 한국어 본문 한 줄 45~50자 */ /* 머리말 두 줄의 안쪽 정렬 기준. 가장 넓은 칸에 맞춘다. 본문이 그보다 좁아도 가운데 정렬끼리는 같은 중심선을 공유한다. */ --t-width: var(--t-w-wide); --t-width-read: var(--t-w-form); /* ── 머리말 기하학 ────────────────────────────────────── 페이지를 옮길 때 머리말이 튀지 않게 하는 값들이다. 색보다 먼저다. 재 보니 2줄 머리말 높이가 랜딩 64 · 분석 60 · 플래너 60 · 강의실 60 · 작업실 56 으로 갈려 있었다. 제품을 옮길 때마다 아래 본문이 위아래로 흔들렸다. 더 눈에 띄던 건 좌측 시작점이다. 랜딩(max 1100 중앙)과 강의실(max 1080 중앙)만 가운데 정렬이라, 1440px 화면에서 로고가 x=194 · x=204 에 있다가 분석으로 넘어가면 x=20 으로 순간이동했다. 바로 위 1줄은 늘 x=20 이라 같은 화면 안에서도 두 줄의 왼쪽 끝이 어긋나 있었다. 그래서 2줄은 1줄과 같은 규칙을 쓴다: 폭을 묶지 않고 화면 전체, 가장자리 20px. 이 판단은 analysis-header 주석에 이미 적혀 있던 것이고, 랜딩과 강의실만 따르지 않고 있었다. 본문 폭(--t-width)과는 별개다. 본문은 스크롤로 사라지지만 머리말 두 줄은 늘 붙어 있어서, 서로 맞추는 쪽이 이득이 크다. 60px 을 고른 이유: 다섯 중 셋이 이미 60 이다. 랜딩은 64 에서 줄어드는 방향이라 아래 내용에 여백이 4px 늘 뿐 겹치지 않는다(안전한 방향). */ /* 1줄은 주 내비게이션이다. 40px 에 12.5px 글자는 눈이 좋고 화면이 작을 때만 편하다. 나이가 있거나 모니터가 크면 누르기도 읽기도 불편하다. 예쁜 것보다 닿는 게 먼저다. */ --t-topbar-h: 52px; /* 1줄. --tenb-topbar-h 와 같은 값을 본다 */ --t-nav-h: 60px; /* 2줄 */ --t-nav-pad: 20px; /* 두 줄 공통 가장자리 여백 */ /* ── 타입 ────────────────────────────────────────────── 실측 상위: 13px 245 · 12px 211 · 14px 178 · 11px 99 · 10px 81 · 15px 71 · 16px 62. 13.5 · 12.5 · 11.5 · .68rem · .72rem 같은 값이 섞여 있어 이 눈금으로 접는다. 한국어 UI 라 본문 band 가 11~14 로 촘촘한 건 유지한다. */ --t-fs-2xs: 11px; --t-fs-xs: 12px; --t-fs-sm: 13px; --t-fs-md: 14px; /* 기본 본문 */ --t-fs-lg: 16px; --t-fs-xl: 18px; --t-fs-2xl: 20px; --t-fs-3xl: 24px; --t-fs-4xl: 30px; --t-fs-5xl: 36px; --t-fs-6xl: 48px; /* 랜딩 히어로 */ --t-fw-normal: 400; --t-fw-medium: 500; --t-fw-semi: 600; --t-fw-bold: 700; --t-fw-heavy: 800; --t-lh-tight: 1.25; /* 제목 */ --t-lh-normal: 1.5; /* 본문 */ --t-lh-loose: 1.7; /* 긴 글 */ --t-font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* ── 그림자 ────────────────────────────────────────────── */ --t-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --t-shadow: 0 2px 8px rgba(15, 23, 42, .08); --t-shadow-lg: 0 8px 24px rgba(15, 23, 42, .10); --t-shadow-header: 0 1px 12px rgba(15, 23, 42, .06); /* ── 움직임 ────────────────────────────────────────────── */ --t-ease: .15s ease; --t-ease-slow: .25s ease; } /* ──────────────────────────────────────────────────────────── 다크. 지금 다크를 온전히 지원하는 건 작업실뿐이다(화면 규칙 2-2). 테마를 켜는 스위치 자체는 이미 전역이다. partials/account-menu 의 setWorkspaceTheme 이 data-theme 과 .dark 클래스를 둘 다 걸고, 그 조각은 모든 껍데기에 들어간다. tailwind.config 의 darkMode:'selector' 도 그 클래스와 맞물려 있다. 빠진 건 배선이 아니라 두 가지다. (1) 랜딩·분석·강의실에서 저장된 테마를 페이지 로드 시점에 적용하는 코드 (2) lp-styles · clsx 쪽 다크 규칙 여기서는 값만 미리 정의해 둔다. 아직 아무도 --t-* 를 참조하지 않으므로 이 블록이 화면을 바꾸지 않는다. ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --t-fg: #f1f5f9; --t-fg-2: #94a3b8; --t-fg-3: #64748b; --t-fg-on: #0f172a; --t-bg: #0f172a; --t-bg-sunken: #020617; --t-surface: #1e293b; --t-surface-2: #334155; --t-line: #334155; --t-line-strong: #475569; /* 어두운 바탕에서 #2563eb 는 너무 가라앉는다. 한 단 올린다. */ --t-brand: #60a5fa; --t-brand-strong: #93c5fd; --t-brand-hover: #bfdbfe; --t-brand-soft: rgba(96, 165, 250, .15); --t-paid-from: #a78bfa; --t-paid-to: #ff5c93; --t-paid-solid: #a78bfa; --t-ok: #34d399; --t-ok-soft: rgba(52, 211, 153, .15); --t-warn: #fbbf24; --t-warn-soft: rgba(251, 191, 36, .15); --t-danger: #f87171; --t-danger-soft: rgba(248, 113, 113, .15); --t-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --t-shadow: 0 2px 8px rgba(0, 0, 0, .35); --t-shadow-lg: 0 8px 24px rgba(0, 0, 0, .45); --t-shadow-header: 0 1px 12px rgba(0, 0, 0, .35); } /* data-theme 이 안 붙은 화면(랜딩·분석·강의실)은 아직 시스템 설정을 따르지 않는다. 1~4단계에서 색을 토큰으로 갈아끼운 뒤 5단계에서 이 블록을 연다. 지금 열면 배선이 절반만 된 화면이 흰 글자에 흰 바탕으로 깨진다. @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { ... } } */