/* ═══════════════════════════════════════════════════════════════════ tokens.css — 모음전 디자인 규칙 (단일 진실 원천) ─────────────────────────────────────────────────────────────────── 정본 문서 : docs/디자인-규칙.md 검사 : python 프로그램/_시스템/scripts/check_design_tokens.py ★ 모든 값의 근거 = apple.com/kr 3개 페이지 실측 (2026-07-31) · 홈 — 브랜드·마케팅 · iPhone 17 Pro 구입하기 — 선택·폼 밀집 (우리 프로그램과 가장 비슷) · iPhone 17 Pro 소개 — 검정 구역 ★ 이 파일 말고 다른 곳에서 크기·여백·색을 새로 정의하지 않는다. 화면마다 --ink / --sub / --line 을 다시 정의하던 것이 편차의 원인이었다. ★ base.html 에서 가장 마지막에 불러온다(뒤에 오는 것이 이긴다). 적용 방법 ① 크기·여백·둥글기 = :root 라 어디서든 var(--sp-5) 처럼 바로 쓴다. ② 애플 색 = 바깥 상자에 class="ds" 를 붙인 화면에만 적용된다. 어두운 화면은 class="ds ds-dark". ═══════════════════════════════════════════════════════════════════ */ :root{ /* ══ 글꼴 ═══════════════════════════════════════════════════════ 애플 실측: 한국어 페이지 전체가 'SF Pro KR' 한 가지(151곳). SF Pro 는 애플 기기 전용 라이선스라 웹에 못 쓴다. → Pretendard = SF Pro / Apple SD Gothic Neo 를 대체하려고 만든 글꼴. */ --글꼴:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont, 'Apple SD Gothic Neo','Segoe UI',system-ui,sans-serif; /* ══ 글자 크기 — 중요도 7등급 ═══════════════════════════════════ 애플 실측 크기 = 11·12·14·17·19·21·24·28·32·48·56 페이지 성격별 최다: 홈(마케팅) 12px(84곳) 구입하기(폼) 14px(153곳) ← 우리 프로그램과 가장 비슷 소개(마케팅) 17px(78곳) ★ 우리는 표가 본체라 12px 를 데이터, 14px 를 본문으로 둔다. */ --fs-배지:12px; /* 등급0 — 배지·단위·법적 고지. 읽는 글의 하한 */ /* [2026-08-13 사장님] 11→12. 「판매중」 같은 딱지가 안 보였다. */ --fs-표:13px; /* 등급1 — 표 안 글씨 */ /* [2026-08-13 사장님] 12→13. **여백은 그대로** 두고 글자만 한 칸. 라이브 실측(창 1870): 표 1452→1535, 폭 상한 1700 안에 들어간다. */ --fs-본문:14px; /* 등급2 — 설명문·입력칸. 애플 폼 페이지 최다 */ --fs-카드제목:17px; /* 등급3 — 카드 머리 */ --fs-섹션제목:24px; /* 등급4 — 구역 머리 */ --fs-화면제목:32px; /* 등급5 — 페이지 머리 */ --fs-요약숫자:48px; /* 등급6 — 대표 숫자 하나 */ /* 최소 글자 크기 — 애플 실측: 읽는 글 최소 11px(법적 고지). 10px 은 페이지 전체에 2곳뿐이고 내용이 「0」「+」 = 글자가 아니라 표식. ★ 11px 미만 금지. 12px 미만은 배지·단위·법적 고지에만. */ --fs-최소:12px; /* [2026-08-13] 바닥선 11→12 */ /* [2026-08-13 사장님] 넓은 표가 있는 화면이 쓸 수 있는 가로 상한. 1100 이면 표가 잘리고 검색창과 폭이 어긋난다(라이브 실측). 한 곳에서 정한다. */ --화면-상한:1700px; /* ══ 굵기 — 400 / 600 이 전부 ═══════════════════════════════════ ★ 애플 실측의 가장 큰 발견: 구입 페이지 400(272곳)·600(64곳) — 700 이 아예 없다. 검정 구역도 32px·48px·56px 제목까지 전부 600. 홈에서만 17px 700 이 7곳. → 제목도 600 이 기본. 700 은 예외(작은 글씨를 도드라지게 할 때만). */ --fw-본문:400; --fw-강조:600; /* 제목·강조의 기본값 */ --fw-굵게:700; /* 예외 — 표 헤더처럼 작은 글씨를 도드라지게 할 때만 */ /* ══ 자간 — 0 이 기본 ═══════════════════════════════════════════ ★ 애플 실측: 11·12·14·17·32·48·56px 전부 자간 0(normal). 19·21·24px 만 +0.01em 안팎의 미세 양수. → 한국어에서는 자간을 건드리지 않는 것이 애플 방식이다. (음수 자간은 영문 대형 헤드라인 관습이라 한글엔 맞지 않는다) */ --ls-기본:0; --ls-중간:.01em; /* 19~24px 구간에만 */ /* ══ 줄간격 — 애플 실측값 그대로 ════════════════════════════════ 12px→1.33 / 14px→1.57 / 17px→1.59 / 19px→1.53 21px→1.29 / 24px→1.29 / 32px→1.22 / 48px→1.18 */ --lh-표:1.33; /* 11·12px */ --lh-본문:1.57; /* 14px — 여러 줄을 읽는다 */ --lh-읽기:1.59; /* 17px 문단 */ --lh-소제목:1.35; /* 17px 한 줄짜리 제목 */ --lh-제목:1.29; /* 24px */ --lh-큰제목:1.22; /* 32px */ --lh-요약숫자:1.18; /* 48px */ --lh-작은글:1.33; /* (옛 이름 유지) */ --lh-빽빽:1.33; /* (옛 이름 유지) */ /* ══ 여백 7단 (4의 배수) ════════════════════════════════════════ 애플 실측 여백은 반응형 계산값이라 8·11·15·17·24·34·44·48·56 로 흩어진다. ★ 그중 8 이 압도적 1위(50곳·33곳)이고 큰 값은 24·48·56. 우리는 4의 배수 7단으로 고정한다 — 애플의 「경향」만 가져온다. */ --sp-1:4px; /* 아이콘↔글자 · 배지 안 위아래 · 라벨↔값 */ --sp-2:8px; /* 배지 안 좌우 · 표 칸 위아래 · 버튼 안 위아래 */ --sp-3:12px; /* 표 칸 좌우 · 버튼 안 좌우 · 알약 안 좌우 */ --sp-4:16px; /* 카드 안 항목 사이 · 필터 줄 위 */ --sp-5:24px; /* 카드 안쪽 · 구역 안쪽 위아래 */ --sp-6:32px; /* 화면 좌우 여백 · 상단 여백 */ --sp-7:48px; /* 구역과 구역 사이 */ /* ★ 애매하면 작은 쪽. 6·9·10·14·18px 같은 사이 값을 새로 만들지 않는다. */ /* ══ 둥근 모서리 ════════════════════════════════════════════════ 애플 실측: 구입 페이지 12px(14곳) 20px(7곳) 18px(2곳) 8px(1곳) 50%(원) 홈 980px(24곳 — 거의 전부 알약) 소개 28·36·45px(마케팅 대형 카드) */ --r-작은것:8px; /* 입력칸·작은 버튼 */ --r-카드:12px; /* 카드 — 애플 최다 */ --r-큰카드:18px; /* 큰 카드·칩 */ --r-알약:980px; /* 배지·필터 알약 — 애플이 실제로 쓰는 값 */ --r-원:50%; --r-버튼:8px; /* (옛 이름 유지) */ --r-팝업:18px; /* (옛 이름 유지) */ /* ══ 그림자 — 쓰지 않는다 ═══════════════════════════════════════ ★ 애플 실측: 3개 페이지 전부 box-shadow 가 0곳이었다. 층은 그림자가 아니라 「1px 선」과 「배경 밝기 차이」로 만든다. */ --sh-카드:none; --sh-팝업:none; /* ══ 움직임 ═════════════════════════════════════════════════════ 애플 실측: 0.32s cubic-bezier(0.4,0,0.6,1) 이 193곳으로 압도적, 그다음 0.24s ease(93곳). */ --전환-빠름:.24s; --전환-기본:.32s; --전환-곡선:cubic-bezier(.4,0,.6,1); } /* ═══════════════════════════════════════════════════════════════════ 색 — class="ds" 를 붙인 화면에만 적용 ═══════════════════════════════════════════════════════════════════ */ .ds{ /* ── 애플 웹 실측 색 ──────────────────────────────────────────── ★ 파랑이 역할별로 3가지다(iOS 의 #007AFF 와 다르다): 버튼 배경 #0071E3 / 링크 글자 #0066CC / 다크·포커스 #2997FF */ --ap-버튼파랑:#0071E3; --ap-링크파랑:#0066CC; --ap-밝은파랑:#2997FF; /* 검정 구역의 링크 · 포커스 테두리 */ --ap-green:#34C759; --ap-red:#FF3B30; --ap-orange:#FF9500; --ap-sky:#5AC8FA; /* 「주문 관리」 상태 항목이 고를 수 있는 7색의 마지막 하나(나머지 6은 위에 이미 있다). 의미색이 아니라 **분류색**이라 자유 hex 를 허용하지 않고 여기 한 곳에서 정한다. */ --ap-purple:#AF52DE; /* 회색 — 애플 실측 hex */ --ap-g0:#FAFAFC; /* 살짝 밝은 바탕 */ --ap-g1:#F5F5F7; /* 페이지 바탕 (배경 1위) */ --ap-g2:#E8E8ED; --ap-g3:#D2D2D7; /* 선 — 애플 테두리 1위 */ --ap-g4:#86868B; /* 보조 글자 · 선택된 테두리 */ --ap-g45:#6E6E73; /* 보조 글자(진한 쪽) */ --ap-g5:#424245; --ap-g6:#1D1D1F; /* 본문 글자 — 실측 1위 */ /* ── 글자색을 「검정 투명도」로 ───────────────────────────────── ★ 애플은 본문 회색을 hex 가 아니라 검정 투명도로 만든다. 실측: rgba(0,0,0,.88) / .80 / .72(58곳·1위) / .56 바탕이 바뀌어도 저절로 어울린다. */ --글자-진하게:rgba(0,0,0,.88); --글자-기본:rgba(0,0,0,.80); --글자-보조:rgba(0,0,0,.72); --글자-흐리게:rgba(0,0,0,.56); /* ── 기존 이름에 연결 (이 아래가 실제로 화면을 바꾼다) ─────────── */ --primary:var(--ap-버튼파랑); --color-primary:var(--ap-버튼파랑); /* 토스 원본의 primary-strong(진한 강조 파랑)·primary-tint(옅은 파랑 배경) 이름 호환. 처음엔 :root(toss.css)에만 있고 .ds/.ds-dark 둘 다에 없었다 — 어두운 화면에서 :root 의 라이트값(#1B64DA/#E8F2FF)이 그대로 남아 검정 위에 옅은 하늘색 배경이 뜨는 등 대비가 깨졌다. */ --primary-strong:var(--ap-링크파랑); --primary-tint:var(--연한-파랑); --blue:var(--ap-링크파랑); --ink:var(--ap-g6); --sub:var(--ap-g4); --faint:var(--ap-g3); --line:var(--ap-g3); --line2:var(--ap-g2); --bg:var(--ap-g1); --surface:#FFFFFF; /* [2026-08-02] 「한 단 옅은 판」 — 타입마다 아래에서 다시 정하지만, 어느 타입에서도 이름이 비지 않도록 여기서 기본값을 준다. (없으면 그 이름을 쓴 배경 선언이 통째로 무효가 돼 배경이 사라진다.) */ --surface2:var(--ap-g1); /* 🔴 [2026-08-02] **떠 있는 판 전용 바탕** — 반드시 불투명이어야 한다. 카드용 바탕(--surface)은 어두운 타입에서 반투명(4%)이다. 페이지 위에 얹힌 카드에는 맞지만, **다른 내용 위에 뜨는 판**(설명 판·팝오버·드롭다운)에 쓰면 뒤 내용이 그대로 비쳐 글자와 겹친다 — 사장님이 그래프 위 설명 판에서 보신 것. 떠 있는 판은 이 이름을 쓴다. */ --바탕-떠있는:#FFFFFF; --red:var(--ap-red); --green:var(--ap-green); --amber:var(--ap-orange); --n100:var(--ap-g0); --n200:var(--ap-g2); --n300:var(--ap-g3); /* n400 — 애플 실측엔 g3(#D2D2D7)과 g4(#86868B) 사이 값이 없다. 다른 --연한-* 처럼 「실측 근거 없는 신규 값」으로 인정하고 둘의 중간(보간)만 채운다. */ --n400:#ACACB1; --n500:var(--ap-g4); --n600:var(--ap-g45); --n700:var(--ap-g6); /* n800/n900 — 애플 실측 회색 사다리는 g6(#1D1D1F, 본문 잉크 1위)가 가장 어둡고 그보다 더 어두운 회색이 없다. 토스 원본은 n700 안에서만 정의하던 --color-border/--color-text-secondary/--color-bg-muted 계열을 optgen·catalog 화면들이 「정의 블록 없이」 복사해 썼다. 그 페이지 밖에선 이름이 비어 있어 `border:1px solid var(--color-border)` 선언이 통째로 무효가 된다(예비값도 없음) → 입력칸·카드·표의 테두리가 아예 사라졌다 (mou-m.com/optgen 실측: border-style none·0px). 지어낸-이름 검사는 「어느 템플릿이든 정의 있으면 인정」이라 이 케이스를 통과시켰다. → 여기서 전역 정의해 어느 화면에서든 이름이 비지 않게 한다. 값은 전부 기존 애플 토큰에 연결(새 색 발명 없음) — 어두운 타입이 --line/--sub 등을 다시 정하면 이 별칭도 따라간다. */ --color-border:var(--line); /* #D2D2D7 — 애플 테두리 1위 */ --color-border-soft:var(--line2); /* #E8E8ED — 한 단 옅은 선 */ --color-text-primary:var(--ink); --color-text-secondary:var(--글자-보조); --color-text-tertiary:var(--sub); --color-bg-muted:var(--n100); /* 표 머리글 띠·옅은 바탕 */ --color-primary-dark:var(--primary-strong); --color-primary-light:var(--연한-파랑); --color-success:var(--ap-green); --color-warning:var(--ap-orange); /* ── 그림자 이름 호환(shadow/shadow-sm/shadow-lg) ────────────────── ★ :root 의 --sh-카드/--sh-팝업 과 뜻은 같다(그림자를 쓰지 않는다 — 위 107행 「그림자 — 쓰지 않는다」 참고). 옛 화면이 toss.css 이름 (--shadow 등)을 직접 쓰는 자리가 있어 같은 규칙으로 연결한다. */ --shadow-sm:none; --shadow:none; --shadow-lg:none; /* ── 주문 상태 배지 6계열 (원본 UNIFY_RULES 12상태와 1:1) ─────── */ --상태-결제:var(--ap-g4); --상태-준비:var(--ap-sky); --상태-배송:var(--ap-버튼파랑); --상태-완료:var(--ap-green); --상태-클레임요청:var(--ap-orange); --상태-클레임완료:var(--ap-red); /* ── 매입가 변동 4색 (원본 pdx 범례와 1:1) ─────────────────────── */ --변동-손해:var(--ap-red); --변동-감소:var(--ap-orange); --변동-이득:var(--ap-green); --변동-없음:var(--ap-g4); font-family:var(--글꼴); color:var(--ink); background:var(--bg); letter-spacing:var(--ls-기본); line-height:var(--lh-표); -webkit-font-smoothing:antialiased; } /* ═══════════════════════════════════════════════════════════════════ 공통 부품 — 규칙을 지킨 기본 모양. 화면마다 다시 만들지 않는다. ═══════════════════════════════════════════════════════════════════ */ /* [2026-08-04 사장님 확정 D1] 입력칸 테두리 「항상 또렷」의 실체는 inline_color_fix.css 의 `.ds input…{border-color:var(--line)}` 규칙이다 (여기에 같은 걸 또 적으면 두 곳이 갈린다 — 적지 않는다). 단 그 규칙이 :focus 의 파란 테두리까지 덮고 있던 것은 그 파일에서 고쳤다. */ .ds .ds-화면제목{font-size:var(--fs-화면제목);font-weight:var(--fw-강조); letter-spacing:var(--ls-기본);line-height:var(--lh-큰제목)} .ds .ds-섹션제목{font-size:var(--fs-섹션제목);font-weight:var(--fw-강조); letter-spacing:var(--ls-중간);line-height:var(--lh-제목)} .ds .ds-카드제목{font-size:var(--fs-카드제목);font-weight:var(--fw-강조); letter-spacing:var(--ls-기본);line-height:var(--lh-소제목)} .ds .ds-본문{font-size:var(--fs-본문);line-height:var(--lh-본문);color:var(--글자-보조)} .ds .ds-문단{font-size:var(--fs-카드제목);line-height:var(--lh-읽기);color:var(--글자-보조)} .ds .ds-요약숫자{font-size:var(--fs-요약숫자);font-weight:var(--fw-강조); letter-spacing:var(--ls-기본);line-height:var(--lh-요약숫자); font-variant-numeric:tabular-nums} /* 카드 — 그림자 없이 1px 선으로만 (애플 방식) */ .ds .ds-카드{background:var(--surface);border-radius:var(--r-카드); padding:var(--sp-5);border:1px solid var(--line)} /* 선택 카드 — 애플 구입 페이지 실측: 12px 라운드 + 1px #D2D2D7, 고르면 테두리가 #86868B 로 진해진다(배경색을 칠하지 않는다) */ .ds .ds-선택카드{background:var(--surface);border-radius:var(--r-카드); padding:var(--sp-4);border:1px solid var(--line);cursor:pointer; transition:border-color var(--전환-빠름) var(--전환-곡선)} .ds .ds-선택카드.선택됨{border-color:var(--ap-g4)} .ds .ds-배지{display:inline-block;font-size:var(--fs-배지);font-weight:var(--fw-강조); border:1px solid currentColor;border-radius:var(--r-알약); padding:var(--sp-1) var(--sp-2);letter-spacing:var(--ls-기본);line-height:var(--lh-표)} .ds .ds-알약{border:0;border-radius:var(--r-알약);padding:var(--sp-1) var(--sp-3); font-size:var(--fs-표);font-weight:var(--fw-본문);font-family:inherit; letter-spacing:var(--ls-기본);cursor:pointer;text-align:center; transition:background var(--전환-빠름) var(--전환-곡선)} /* 주 버튼 — 애플 실측 배경 #0071E3, 알약, 글자 흰색 */ .ds .ds-주버튼{background:var(--ap-버튼파랑);color:#fff;border:0; border-radius:var(--r-알약);padding:var(--sp-2) var(--sp-4); font-size:var(--fs-본문);font-weight:var(--fw-본문);font-family:inherit; cursor:pointer;transition:background var(--전환-빠름) var(--전환-곡선)} /* 링크 — 애플 실측: 진짜 링크만 파랑+밑줄, 나머지는 본문색·밑줄 없음 */ .ds a{color:inherit;text-decoration:none} .ds a.링크{color:var(--ap-링크파랑);text-decoration:underline} /* 포커스 — 애플 실측 #2997FF */ .ds :focus-visible{outline:2px solid var(--ap-밝은파랑);outline-offset:2px} /* ── 표 ──────────────────────────────────────────────────────────── */ .ds table{border-collapse:separate;border-spacing:0;font-size:var(--fs-표); line-height:var(--lh-표)} .ds th,.ds td{padding:var(--sp-2) var(--sp-3);white-space:nowrap; letter-spacing:var(--ls-기본)} .ds th{font-size:var(--fs-배지);font-weight:var(--fw-강조);color:var(--sub); text-align:left;border-bottom:1px solid var(--line)} .ds td{border-bottom:1px solid var(--line2)} .ds .단위{font-size:var(--fs-배지);color:var(--글자-흐리게);margin-left:2px; font-variant-numeric:normal} /* ═══════════════════════════════════════════════════════════════════ 정렬 — 기본은 왼쪽. 가운데는 예외로만. ★ 애플 실측: 왼쪽 109~140곳(72~76%) vs 가운데 42~44곳(24~28%) ═══════════════════════════════════════════════════════════════════ */ .ds .숫자,.ds th.num,.ds td.num{text-align:right;font-variant-numeric:tabular-nums} .ds .글,.ds th.txt,.ds td.txt{text-align:left} /* 번호(주문·송장·우편) — 숫자지만 계산하지 않는다 → 왼쪽, 자릿수만 맞춤 */ .ds .번호{text-align:left;font-variant-numeric:tabular-nums} .ds .표식,.ds th.ctr,.ds td.ctr{text-align:center} .ds .빈화면{text-align:center;padding:var(--sp-7) var(--sp-6);color:var(--sub)} .ds button{text-align:center} /* 「A → B」 비교칸 — 셀 통째로 정렬하면 행마다 화살표가 어긋난다. 3칸으로 고정해 화살표를 세로로 맞춘다. */ .ds .ds-비교{display:inline-grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:var(--sp-1)} .ds .ds-비교 .전{text-align:right;color:var(--글자-흐리게); font-variant-numeric:tabular-nums} .ds .ds-비교 .화살표{text-align:center;color:var(--글자-흐리게);font-size:var(--fs-배지)} .ds .ds-비교 .후{text-align:left;font-weight:var(--fw-강조); font-variant-numeric:tabular-nums} /* ═══════════════════════════════════════════════════════════════════ 강조 — 크기를 키우지 않는다. 배경을 칠하지 않는다. ★ 애플 실측 강조 방식 상위 5개가 전부 「색 농도」 아니면 「굵기 400→600」. 크기를 바꾸거나 배경을 칠하는 강조는 한 건도 없었다. ═══════════════════════════════════════════════════════════════════ */ .ds .강조{font-weight:var(--fw-강조)} .ds .진하게{color:var(--글자-진하게)} .ds .흐리게{color:var(--글자-흐리게)} .ds .수치강조{font-weight:var(--fw-강조);font-variant-numeric:tabular-nums} /* ── 최대 폭 — 애플 실측 980 / 1024 / 640(폼) ────────────────────── */ .ds .폭-넓게{max-width:1024px;margin:0 auto} .ds .폭-기본{max-width:980px;margin:0 auto} .ds .폭-폼{max-width:640px} /* ── 밝은 카드 (시안 9) — 흰 바탕 + 가로 카드 요약 ──────────────── */ .ds.ds-light{ --bg:#FFFFFF; --surface:#FFFFFF; /* 🔴 [2026-08-02] --surface2 가 **어두운 타입에만** 있었다. 「한 단 옅은 판」을 뜻하는 이 이름을 화면들이 카드 안쪽·표 머리·마우스 올린 줄에 쓰는데, 화이트 타입에는 정의가 없어 **배경이 통째로 사라졌다**(정의 없는 이름을 예비값 없이 쓰면 그 선언 자체가 무효가 된다). 이름이 모든 타입에 있어야 화면이 타입을 안 가린다. */ --surface2:var(--ap-g1); --n100:var(--ap-g1); } .ds.ds-light .ds-카드{border:1px solid var(--line)} /* ───────────────────────────────────────────────────────────────────────── [2026-07-31] 어두운 모드 3차 — 「보이긴 하나 기준 미달」 정리 사장님 지적으로 라이브(mou-m.com/orders, 검정 한 판) 전수 측정한 결과. ① --faint 를 밝게 : #6E6E73 은 검정(#0A0A0A) 위에서 대비 3.9 로 기준(4.5) 미달. 「—」·「확인 불가」·「송장미입력」 같은 흐린 글자 1,516곳이 여기 걸렸다. #8E8E93 → 6.07. 테두리 색으로도 쓰이므로 어두운 화면에서 선이 조금 더 또렷해진다. ② 배지용 옅은 바탕 두 개(노랑·보라)가 아예 없어서 화면이 밝은 색을 굳혀 두고 있었다. 형제 토큰(연한-파랑/초록/빨강)과 같은 규칙으로 만든다 — 밝은 모드 10%, 어두운 모드 18%. ③ 보라 글자는 어두운 배경에서 #AF52DE(4.42)·#BF5AF2(검정3단 3.93)가 모자라 #DA8FFF 로. ───────────────────────────────────────────────────────────────────────── */ .ds { --연한-노랑: rgba(255,149,0,.10); --연한-보라: rgba(175,82,222,.10); --보라: #AF52DE; } /* [2026-07-31] 「밝은 카드」 3차 — 흐린 글자가 흰 바탕에서 안 읽히는 문제 라이브 실측(mou-m.com/orders, 밝은 카드): 2,845곳 미달, 최악 2.01. 원인 — `--faint` 한 이름이 **두 가지 일**을 하고 있었다. · 글자색으로 204번 (흰 바탕 위 #B0B8C1 = 2.01 · 토큰값 #D2D2D7 이면 1.4) · 테두리로 37번 (여기선 연한 게 맞다) 그래서 --faint 를 어둡게도 밝게도 못 한다. **글자용 이름을 따로 낸다.** --글자-희미 : 흰 바탕 #6E6E73 → 5.09 · 어두운 바탕 #98989D 글자로 쓰던 자리만 `color:var(--글자-희미, 원래값)` 으로 바꾼다(scripts/split_faint_text.py). 「현재」 모드에는 --글자-희미 가 없으므로 원래값으로 떨어져 **한 픽셀도 안 바뀐다.** --sub 도 흰 바탕에서 #86868B = 3.54 로 기준 미달이라 #6E6E73(5.09)로 내린다. ※ 애플 자신도 보조 글자는 흰 바탕에서 3.5 수준이다. 애플을 그대로 베끼면 기준을 못 맞추므로, 여기서는 **읽히는 쪽**을 택했다(사장님 지적이 「안 보인다」였다). */ .ds { --글자-희미: #6E6E73; --sub: #6E6E73; } /* [2026-08-01] 의미색(초록·빨강·주황·파랑)이 **세 가지 일**을 겸하고 있었다. ─────────────────────────────────────────────────────────────────────── 같은 `--green`(#34C759) 하나가 ① 밝은 바탕 위 글자 — 흰 바탕에서 2.22 · 옅은 초록 바탕에서 2.05 ← 안 읽힘 ② 검정 바탕 위 글자 — 9.46 · 7.45 ← 괜찮음 ③ 흰 글자를 얹는 배경 — 2.22 ← 안 읽힘 요구가 서로 반대라(①③은 어두워야, ②는 밝아야) **한 값으로는 불가능하다.** --faint 를 「글자용」과 「테두리용」으로 갈랐던 것과 똑같은 처방을 쓴다. 값은 추측하지 않고 전부 계산해서 골랐다(기준 4.5). 글자용(밝은 타입) : 초록 #1D7A3D 5.38/4.96 · 빨강 #C7332B 5.33/4.67 주황 #9A5B00 5.43/5.01 · 파랑 #0066CC 5.57/4.85 글자용(검정 타입) : 초록 #34C759 9.46/7.45 · 빨강 #FF6961 7.45/6.39 주황 #FF9F0A 10.2/8.04 · 파랑 #2997FF 6.96/6.02 배경용(흰 글자) : 초록 #1D7A3D 5.38 · 빨강 #C7332B 5.33 주황 #9A5B00 5.43 · 파랑 #0066CC 5.57 ※ 배경용은 흰 글자를 얹으므로 **어두운 화면에서도 어두워야** 한다 → 모드 공통. ※ 「기존 타입」에는 이 이름들이 없어 원래값으로 떨어진다 — 한 픽셀도 안 바뀐다. ※ 마켓 브랜드색은 여기에 없다 — 바꾸면 다른 마켓처럼 보인다. */ .ds { --글자-초록: #1D7A3D; --글자-빨강: #C7332B; --글자-주황: #9A5B00; --글자-파랑: #0066CC; --바탕-초록: #1D7A3D; --바탕-빨강: #C7332B; --바탕-주황: #9A5B00; --바탕-파랑: #0066CC; } /* [2026-08-01] 글자색 이름을 **배경**으로 쓴 자리 87곳 — 어두운 화면에서 뒤집힌다. ─────────────────────────────────────────────────────────────────────── `--ink` 는 「글자색」 이름이다. 어두운 화면에서는 밝은 값(#F5F5F7)으로 뒤집히도록 설계돼 있다. 그런데 `background: var(--ink)` 처럼 **배경**으로 쓴 자리가 61곳 있었다. 그러면 흰 글자 위에 거의 흰 배경이 겹친다 — 라이브 실측: 마진계산기 「분석 시작」 단추가 대비 1.09 로 안 보였다. 배경으로 쓰는 자리에는 배경용 이름을 따로 준다. 값은 계산해서 골랐다. --바탕-진하게 : 밝은 타입 #1D1D1F(흰 글자 16.9) · 검정 타입 #2A2A2D(13.5) 검정 타입에서 순검정을 쓰면 바탕과 구분이 안 되므로 한 단 밝게. --바탕-흐리게 : 밝은 타입 #E8E8ED · 검정 타입 #3A3A3D (연한 회색 판) ※ 「기존 타입」에는 이 이름들이 없어 원래값으로 떨어진다 — 한 픽셀도 안 바뀐다. */ .ds { --바탕-진하게: #1D1D1F; --바탕-흐리게: #E8E8ED; } /* [2026-08-01] 밝은 타입에서 보조 회색이 흰 바탕에 안 읽힌다. `--n500` = #86868B 는 흰 바탕에서 3.62 로 기준(4.5) 미달이다. `.text-muted`·`.field-hint`·`.auth-footer` 등 700곳 가까이가 이 이름을 쓴다. 같은 뜻의 `--sub` 는 이미 #6E6E73(5.09)로 내려 뒀으니 짝을 맞춘다. ※ 검정 타입에서는 #86868B 가 검정 위 5.8 로 충분하므로 그대로 둔다. */ .ds { --n500: var(--ap-g45); /* #6E6E73 — 흰 바탕 5.09 */ }.ds { --글자-희미: #68686D; }