🔴 ink는 «틴트 배경 위 11~13px 글자»가 4.5:1을 넘는 값이다. 시안 v1.0은 배경만 * 정하고 글자는 원색(#0F8B5F·#F04452 등)을 그대로 썼는데, 실측해 보니 7쌍 중 5쌍이 미달이었다 * (비공개 칩은 2.32:1). ink를 어둡게 잡아 전 쌍을 통과시킨 값이 아래다 — 실측치는 각 줄에. * ⚠ 배경 위 글자색을 임의로 바꾸지 마라. 바꾸려면 대비를 다시 재고 이 주석을 함께 고칠 것. * ⚠ 솔리드 배지(안읽음 수 등)·아이콘은 틴트가 아니라 원색(--error 등)을 그대로 쓴다 — * 흰 글자가 올라가므로 대비 사정이 다르다. */ /* 파랑 — 확정·전달됨·예약확정. 배경·글자는 기존 토큰(--primary-light / --primary-pressed) 4.82:1 */ --tint-blue-line: #BFDBFE; /* 초록 — 열람됨·공개 중·상담 완료·빠른상담 출처. 5.98:1 */ --tint-green-bg: #E6F9F1; --tint-green-line: #B7EBD3; --tint-green-ink: #0B6B47; /* 빨강 — 환불·업로드 실패. 5.08:1 */ --tint-red-bg: #FDECEE; --tint-red-line: #F8C9CE; --tint-red-ink: #C22636; /* 보라 — 견적 출처·관리자 칩·광고비 막대. 6.75:1 ⚠ 커뮤니티 「웨비나」 분야가 쓰던 톤이었는데 그 분야가 없어졌다(D-253 Q-118) — 토큰은 위 세 곳이 계속 쓰므로 남는다. 커뮤니티 칩에 보라를 되살리지 마라(분야는 3종이다). */ --tint-violet-bg: #EDEBFF; --tint-violet-ink: #4338CA; /** * 웜 — 보류·경고·용량 90%·다음 연락일 오늘. 4.75:1 * ⚠ 시안 v1.0이 새로 제안한 웜(#FFF7E6/#FFE1AD/#9A5200)은 **폐기**하고 이미 쓰던 값으로 통일했다 * (.badge-pending·.st-wait·세무시선 배지가 같은 쌍을 쓴다 — 웜이 두 벌이 되면 같은 뜻의 * 노란 칩이 화면마다 다른 색이 된다). 테두리는 글자색에서 파생한다(새 flat 토큰을 만들지 않는다). */ --tint-warm-bg: #FFF3E8; --tint-warm-line: rgba(194, 65, 12, .25); --tint-warm-ink: #C2410C; /** 아주 옅은 파랑 면 — 강조 요약 칸·드롭존 배경. 글자를 얹지 않는 «면»이라 대비 규칙 밖이다. */ --surface-tint: #F8FBFF; /** * 서체 역할 (D-260) — 세 벌을 **쓰임으로** 가른다. 취향으로 섞지 마라. * * · 본문(기본) Pretendard — 읽는 글 전부. body가 이미 쓰고 있어 토큰이 따로 없다. * · 제목 Pretendard(굵기 700~800) — 🔴 **전용 디스플레이 서체를 쓰지 않는다**(D-271). * 잘난체 2를 썼다가 걷어냈다(사용자 지시). 이유는 취향만이 아니다: * ① 굵기가 **한 벌뿐**이라 위계를 크기로만 만들 수 있고, 굵게 하려면 브라우저가 «가짜 굵게»를 * 덧그려 획이 뭉갠다(실제로 「제목이 두꺼워 보인다」는 지적으로 돌아왔다 — D-260). * ② 19px 미만에서 뭉개져 목록 카드 제목처럼 작은 자리에는 못 쓴다. 결국 «제목 서체»가 * 제목의 일부에만 적용돼, 같은 위계가 지면마다 다른 얼굴이 됐다. * ⇒ Pretendard는 400~800이 다 있어 **크기 × 굵기**로 위계를 만든다. 한 벌로 전 지면이 일관된다. * * 🔴 **서체는 Pretendard 한 벌이다**(D-363). 예전엔 «우리가 말을 거는 안내»에 주아체 * (--font-friendly)를 따로 썼는데, 사용자 지적으로 걷어냈다: 자간이 넓어 같은 안내가 지면마다 * 다른 얼굴이었고, **글리프가 빠진 글자**(가운뎃점 「·」 등)가 그냥 공백으로 그려졌다. * ⚠ 여기에 새 서체를 다시 들이려거든 **굵기가 여러 벌인가 · 한글 글리프가 온전한가**를 * 먼저 볼 것. D-260·D-271에 이어 세 번째로 같은 자리를 되돌린 것이다. */ /** * 형광펜 — 에디터가 «여기가 걸린 낱말»이라고 짚는 자리(광고 금칙 어절 등). * ⚠ 웜 틴트(--tint-warm-bg)와 쓰임이 다르다: 웜은 «상태 칩»의 면이고 이건 **본문 글자 위**를 * 지나가는 형광이라 더 진해야 글자 사이에서 보인다. 대비는 얹히는 본문색(--text-primary) * 기준 10.6:1. * 🔴 하이라이트가 필요하면 여기서 가져다 써라 — 파일마다 노란색을 새로 찍으면 «걸렸다»는 * 같은 뜻이 화면마다 다른 노랑이 된다. */ --tint-mark-bg: #FDE68A; /** * 자간 스케일 (D-161) — 글자가 클수록 좁게 조인다. * *
왜 토큰으로 묶는가: 예전에는 규칙 없이 -.1 · -.2 · -.3 · -.35 · -.4 · -.5 · -.6 · -.7 · -.8을 * 그때그때 찍었다. 그래서 **같은 화면 안에서 제목마다 자간이 달라** 다른 서체처럼 보였다 * (홈 실측: 큰 카드 제목 26px/-.7, 밴드 제목 21px/-.3, 섹션 제목 20px/-.2). * *
본문(13~15px)은 body의 -0.2px를 그대로 쓰므로 `--ls-md`를 따로 적을 필요가 없다. * **19px 이상에만** 붙이면 된다 — 그 아래는 기본값이 이미 맞다. * * ⚠ 새 값을 만들지 말고 이 다섯 중에서 고를 것. 여기 없는 크기를 쓰게 되면 * 가장 가까운 칸의 값을 쓴다. */ --ls-2xl: -.5px; /* 24px 이상 */ --ls-xl: -.4px; /* 19 ~ 23px */ --ls-lg: -.3px; /* 16 ~ 18px */ --ls-md: -.2px; /* 13 ~ 15px — body 기본값과 같다 */ --ls-sm: -.1px; /* 12px 이하 */ /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* Spacing (app_spacing) */ --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 20px; --s-2xl: 24px; --s-3xl: 32px; --screen-h: 20px; /* Elevation (AppShadows.card 근사) */ --shadow-card: 0 1px 2px rgba(17, 31, 40, 0.04), 0 4px 14px rgba(17, 31, 40, 0.05); --shadow-float: 0 6px 20px rgba(17, 31, 40, 0.12); /* Layout — **전폭 기준**(D-154, 사용자 지시) ───────────────────────────── 예전엔 본문을 1080px로 묶었다. 1440 화면에서 75%밖에 안 써서 좌우가 휑했다. 이제 캡을 두지 않고 **좌우 여백만** 남긴다. 여백은 화면 폭에 따라 늘어난다 (좁은 화면에서 글자가 모서리에 붙지 않고, 넓은 화면에서 숨 쉴 틈이 생긴다). ⚠ 참고로 기준 삼은 nol.yanolja.com은 사실 **1320px 캡**이다(1920 화면에서도 1320 고정, 전폭인 것은 상단바뿐). 우리가 좁아 보였던 건 1080이라서지 캡이 있어서가 아니다. 그래도 "공간을 100% 쓰자"는 지시에 맞춰 캡 자체를 없앤다. ⚠ **글이 긴 화면은 예외다.** 한 줄이 2000px면 눈이 다음 줄 첫 글자를 못 찾는다. 본문 단락에는 --reading-max를 걸어 읽기 폭을 지킨다(.article-body 등). */ --content-max: none; /** 글 본문 한 줄 최대 폭 — 한글 기준 한 줄에 45~55자. */ --reading-max: 760px; /** * 일터 화면의 콘텐츠 패널·에디터 칼럼 폭 (시안 v2.0 §1). * *
🔴 전역 상한이 아니다. D-154(사용자 지시)로 셸 본문에는 캡을 두지 않기로 했고 * 그 판단은 그대로다 — 목록·지도·표는 넓을수록 낫다. 이 둘은 골라 쓰는 값이라 * `.pg-panel`·`.pg-editor`를 붙인 화면에만 적용된다(app.css). *
어디에 쓰나: 요약 카드 + 표 한 벌로 끝나는 관리 화면(--panel-max), 글·계약서처럼 * 한 칼럼으로 읽고 쓰는 화면(--editor-max). */ --panel-max: 1144px; --editor-max: 680px; /** * 🔴 지면 기본 폭 (D-363, 사용자 지시) — 셸 본문이 남는 자리를 거의 다 쓴다. * *
왜 필요했나: 셸 본문(`.main`)에는 캡이 없는데 지면마다 제 섹션에 캡을 걸어 * 두어(720~1144px) 넓은 화면에서 좌우가 통째로 비었다 — 1920 화면에서 사이드바·여백을 빼면 * 1592px가 남는데 Q&A 작성은 720px, 곧 가용폭의 45%만 썼다. 그 값들은 각자 다른 시기에 * 각자의 이유로 정해져 서로 모르는 숫자였다. * *
⚠ 캡을 아예 없애지는 않는다. 2560px 모니터에서 폼이 2400px로 늘어나면 라벨과 * 입력칸이 화면 양 끝으로 갈라져 눈이 왕복한다. 1560px는 1920 화면에서 남는 자리를 다 쓰면서 * (98%) 초광폭에서만 멈춘다. *
🔴 글을 «읽는» 칼럼에는 쓰지 마라. 한 줄이 1560px면 한글 100자가 넘어가 눈이 * 다음 줄 첫 글자를 못 찾는다 — 그 자리는 {@code --reading-max}(760px)다. 넓히는 것은 * 지면이고, 그 안의 본문 단락은 여전히 좁아야 한다. */ --page-max: 1560px; /* * 🔴 --page-max를 쓰지 않는 지면 목록 — 좁은 것이 의도인 자리다. * 전부 「넓히면 더 나빠지는」 이유가 있고, 그 이유를 각 파일에도 적어 뒀다. * ① 글을 읽는 칼럼 — 세무시선 상세·작성(--reading-max). 한 줄이 길면 다음 줄을 못 찾는다. * ② 대화 열 — 채팅(.chat-msgs 860px). 말풍선이 화면을 가로지르면 대화로 안 읽힌다. * ③ 서식 문서 — 계약서(.ct-doc 794px). A4를 흉내 내는 지면이라 넓히면 서식이 아니게 된다. * ④ 선택지 격자 — 견적 문진(.iw-opts 1100px). 고른 뒤 다음 항목까지의 마우스 이동을 * 묶는 값이다(D-237에서 고친 버그) — 미학이 아니라 조작성이다. * ⑤ 가운데 서는 카드 — 로그인(.login-col 536px). 넓히면 폼이 허공에 흩어진다. * ⑥ 질문 작성(.qna-write-sec 820px, D-365) — 실측으로 정한 값이다. 500자를 쓰는 칸의 * 높이는 폭에 반비례한다: 칼럼 760px에서 500자 = 184px인데 1500px에서는 105px밖에 * 안 된다. 전폭으로 두면 «칸이 작아 보인다»가 되고 한 줄이 125자가 되어 쓰다가 다음 줄을 * 못 찾는다. 넓히려거든 qna.css의 표를 다시 재라 — 넓히면 칸은 커지는 게 아니라 낮아진다. * ⑦ 세무시선 상세 2단(.sisun-detail-sec 1140px, D-395) — 본문 읽기 폭(760) + 스티키 * 저자 카드(320)의 합이다. 넓히면 본문과 카드 사이 골만 벌어져 카드가 «딴 지면»처럼 * 떨어져 보인다 — 카드가 본문을 따라다닌다는 관계가 거리로 끊긴다. * ⑧ 결제 확인(.qna-paid-sec 640px, D-527) — 문장 셋과 버튼 둘뿐인 화면이다. 넓히면 가운데 * 선 글이 좌우로 흩어져 «확인»이 아니라 «빈 지면»으로 읽힌다. * ⑨ 맞춤 세무사(.fit-ink, D-626) — 여기만 «고정 px가 아니라 파생»이다. 3열 초상 격자라 * 카드 높이가 열에 따라붙고(H = 418 + 열×비율) 넓힐수록 세 CTA가 접힘 아래로 나간다. * 그래서 폭이 아니라 사진의 키 예산을 정하고({@code --fp-photo-h: 360px}, * fit.css) 폭은 {@code calc(3 × 예산 + 간격 + 안여백)} = 1180px로 파생시켰다. * 360인 근거 둘: CTA 바닥 = 403 + 예산 = 766px(1440×900 노트북 가시 높이 안) · * 2배 화면에서 360px을 그리려면 원본 720px이 필요한데 ImageSpec.PROFILE 권장 최소치가 * 800px이다. 초상 규격을 올리면 예산도 같이 올린다. * ⚠ /fit/more는 같은 지면 같은 클래스지만 썸네일 목록이라 이 상한에 매일 이유가 * 없다 — .fit-ink-wide로 --page-max를 쓴다. 상한을 정하는 것은 지면이 아니라 자산이다. * ⚠ 이 목록에 새로 넣으려거든 «넓히면 왜 나빠지는가»를 한 줄로 적어라. 못 적으면 넓혀라. */ /** * 일터(세무사·관리자) 지면 바탕 (시안 v2.0 §1 ⑦). * *
흰 콘텐츠 카드가 «떠 보이게» 하려는 아주 옅은 회색이다. 이미 있는 --grey50(#F9FAFB)과 * 굳이 나눈 이유: grey50은 카드·밴드 자신의 면으로 쓰이고 있어서, 지면 바탕까지 같은 * 값이면 그 밴드들의 경계가 사라진다(tokens.css의 --band-tint 폐기 주석과 같은 종류의 사고). *
⚠ 의뢰인(마케팅) 지면에는 깔지 않는다 — shell.css가 `body.shell-pro`에만 건다. */ --shell-bg: #F7F8FA; /** 좌우 여백 — 화면이 넓을수록 조금씩 더 준다. */ --shell-pad: clamp(16px, 2.2vw, 56px); /** * 🔴 페이지를 끊는 **파랑 틴트 토큰은 폐기했다**(옛 `--band-tint: #DCEBFC`, D-155 ⑤). * *
왜 지웠나: 홈에서 **채도 있는 색면이 그 밴드 하나뿐**이었다. 위아래는 순백 지면에 * 흰 카드(--surface + 1px --border)인데 상황 카드 줄만 하늘색 판이라, 사용자가 * "하늘색 배경 + 검은 글씨가 이질감"이라고 지적했다(2026-08-09). 대비가 모자란 게 * 아니라(라벨 최악 11.7:1로 넉넉했다) **홈에서 그 줄만 색이 튄 것**이 문제였다. * *
지금은 전폭 밴드 둘(`.situ-band`·`.review-band`)이 **같은 처리**를 쓴다 — * 배경 `--grey50` + 위아래 1px `--border`. 회색을 새로 만들지 말고 그 둘을 쓸 것. * * ⚠ 파랑 틴트를 **다시 만들지 마라**. `--primary-light`도 답이 아니다 — * `.ad-hl-tint`(틴트 강조를 산 광고 카드)가 이미 그 색이라, 광고 목록 마지막 줄에 * 그 카드가 오면 밴드와 **같은 색이 맞닿아 경계가 사라진다**(밴드 바로 위 자리다). */ /* 셸 레이아웃 (D-115 → 치수는 시안 v2.0 §1) — 색·타이포는 앱과 동기된 기존 토큰 그대로 두고 이 층만 새로 둔다. ⚠ 접힘 68px은 «아이콘 상자 40 + 좌우 14»에서 나온 값이다. 한쪽만 고치면 아이콘이 가운데를 벗어난다(shell.css의 html.rail .side-scroll 패딩과 함께 볼 것). */ /* 🔴 248 → 216 (D-282, 사용자 지시 「필요 이상으로 넓다」). ⚠ 더 줄이지 마라. 가장 긴 메뉴 이름(「내 상담 사례」)이 아이콘 20 + 간격 10 + 좌우 여백 24를 빼고 남는 폭에 한 줄로 들어가야 한다. 216에서 남는 글자 자리는 약 162px이고 15px 굵은 글씨 여섯 자가 딱 들어간다 — 여기서 더 줄이면 이름이 말줄임되어 메뉴를 못 읽는다. ⚠ 이 값이 바뀌면 `.main`의 margin-left와 레일 카드 폭이 함께 따라온다(레일 장수는 paged-rail.js가 **실측 폭**에서 다시 계산한다 — D-282). */ --sidebar-w: 216px; --rail-w: 68px; /* 상단바 높이 (D-166) — 참고 지면(nol.yanolja.com)의 **윗줄** 실측값이다. 그 지면은 68(윗줄) + 64(카테고리 줄) = 132지만, 우리는 카테고리 줄을 두지 않고 그만큼을 배너 위 여백으로 돌린다(사용자 지시). ⚠ 이 값은 **의뢰인(마케팅) 지면** 기준이다 — home.css의 배너 여백이 "68 + 24 + 60 = 152"로 여기에 맞춰져 있다. 일터 셸은 시안대로 62px이고 그 값은 shell.css가 `body.shell-pro`에 건다(좁은 화면은 두 셸 모두 56px). */ --topbar-h: 68px; /* --shell-max는 폐기했다(D-154) — 셸 본문도 전폭이라 상한이 없다. 남겨 두면 "여기가 폭을 정하는 곳"으로 오인돼 다시 좁아진다. */ } /* Pretendard (앱과 동일 폰트, static/fonts) */ /* ── 서체 1종 (D-260 → D-271 강조체 철회 → D-363 주아체 철회) ────────────────── **Pretendard 하나뿐이다.** 위계는 서체가 아니라 크기·굵기·색이 만든다. ⚠ 서체를 다시 늘리려거든 이 파일이 세 번 되돌아온 이유부터 읽어라(D-260·D-271·D-363). 공통 원인은 같다 — 굵기가 한 벌이거나 글리프가 빠진 서체를 «분위기» 때문에 들였다. 🔴 **전부 woff2다.** 예전엔 Pretendard 4벌을 OTF로 실어 **6.0MB**였다. 한글은 글리프가 1만 자를 넘어 원본이 크므로, woff2가 아니라 OTF를 싣는 순간 첫 진입이 통째로 무거워진다. 실측: 9.9MB(OTF 6벌) → **3.75MB**(woff2 6벌). 서체를 둘이나 늘리고도 예전보다 가볍다. ⚠ **OTF를 다시 올리지 마라.** 변환은 `fontTools`로 한다: `f=TTFont(src); f.flavor='woff2'; f.save(dst)` (brotli 필요) ⚠ 새 서체를 들일 때 **굵기가 여러 벌인지 먼저 볼 것.** 한 벌짜리는 브라우저가 «가짜 굵게»를 덧그려 획이 뭉개지고, 결국 위계가 필요한 자리에 못 쓴다(D-271·D-363에서 두 번 겪었다). */ @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('/fonts/Pretendard-Regular-c8c28655b30340ba098f7458a902c50f.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: url('/fonts/Pretendard-Medium-3ed245e7498587c1263c6f7dbcc5932b.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: url('/fonts/Pretendard-SemiBold-62c25836453ccc7015bf303990c20c17.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url('/fonts/Pretendard-Bold-1380df3282a42bbe715ebef16fe3272b.woff2') format('woff2'); }