/* 물밑 디자인 토큰 — 콘솔 리디자인 (2026-08-22) * * monitor.css **뒤에** 불러 :root 변수를 덮어쓴다. 기존 컴포넌트는 전부 * var()를 쓰고 있어서, 여기서 값만 바꾸면 마크업을 건드리지 않고도 같은 * 시스템 위로 올라온다. 새 컴포넌트는 console.css에 있다. * * 원칙 세 가지. * 1. 8~10px 텍스트를 없앤다. 최소 12px(--fs-xs). 읽히지 않는 고지는 고지가 * 아니라 소음이고, 소음은 법적 목적도 달성하지 못한다. * 2. 색은 신호일 때만 쓴다. 등락(--up/--down)과 액센트 하나. 카드마다 * 보라·노랑·청록 테두리를 두르면 색이 의미를 잃는다. * 3. 숫자가 주인공이다. 라벨은 작고 조용하게, 값은 크고 tabular하게. */ :root { /* --- 면 ------------------------------------------------------------- */ /* 물밑 = 수면 아래. 위에서 아래로 아주 옅게 깊어진다. */ --bg: #0a0c0f; --bg-deep: #070809; --panel: #11151a; --panel-2: #171c22; --panel-3: #1d242b; /* --- 잉크 ----------------------------------------------------------- */ /* muted를 #929ba3 → #b3bdc7로 올렸다. 기존 값은 본문 대비가 4.5:1에 못 * 미쳐 "숫자를 보기 어렵다"의 직접 원인이었다. */ --ink: #eff3f7; --ink-2: #b3bdc7; --muted: #b3bdc7; --ink-3: #8b96a1; --faint: #8b96a1; /* --- 선 ------------------------------------------------------------- */ --line: #222a32; --line-strong: #333d47; --line-2: #333d47; /* --- 신호색 --------------------------------------------------------- */ /* 한국어가 기본 문서이므로 국내 금융 관례를 기본값으로 둔다. 영어 모드만 * 아래에서 서구권 관례로 바꾼다. `--green`/`--red`는 연결·오류처럼 언어와 * 무관한 상태색이고, 가격 방향에는 반드시 `--up`/`--down`을 쓴다. */ --up: #ff6b81; --down: #4f8ff7; --green: #34d8a4; --red: #ff6b81; --amber: #f7c14b; --accent: #4fa8ff; --accent-ink: #0a0c0f; --accent-soft: rgba(79, 168, 255, .14); /* 달력 요일색. 등락 신호가 **아니다** — 한국 달력의 관례(일요일 붉게, * 토요일 푸르게)라 이름을 따로 준다. `--down`을 빌려 쓰면 "내렸다"는 뜻이 * 요일에 묻고, 두 붉은색이 화면에서 서로를 흉내 낸다. */ --cal-sun: #ff8fa0; --cal-sat: #8ec5ff; /* `--violet`은 다계열 차트의 둘째 계열이다 — 등락과 무관한 **범주**색이라 신호색을 빌리지 않으려고 따로 둔다. `--cyan`은 여기 있었는데 css·js·html 어디에서도 쓰이지 않았다(실측 0). 쓰이지 않는 유채색은 다음 사람이 아무 데나 집어 쓰는 통로가 되므로 걷는다. */ --violet: #a78bfa; --chart: #4fa8ff; --chart-fill: rgba(79, 168, 255, .10); /* --- 타이포 --------------------------------------------------------- */ --sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; /* 수치·라벨 면. 본문과 같은 글꼴이고, 자리폭 숫자로 정렬을 얻는다. * * 예전에는 이 자리가 시스템 등폭(윈도우에서는 Cascadia Mono)이었다. 문제는 * 그 줄에 한글이 섞인다는 것이었다 — "저유동성 가능", "확정 종가 코스피 * 6,852.58", "마지막 갱신 2026년 8월 23일"처럼. 등폭 스택에 없는 한글은 * 대체 글꼴로 빠지고, 그러면 한 줄 안에 서로 다른 두 글꼴이 선다. 그게 * 화면 곳곳에서 느껴지던 부조화의 정체다. * * ₩도 등폭에서는 다른 글자와 같은 폭에 욱여넣느라 짓눌린다(40px 실측: * Cascadia 23.4px vs Pretendard 36.5px). 큰 가격에서 특히 티가 난다. * * 정렬은 잃지 않는다 — Pretendard에 tabular-nums를 켜면 열 자리 숫자 폭이 * 완전히 균일하다(40px 실측 전부 25.58px). */ --num: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; /* 진짜 등폭. 글이 아니라 식별자에만 쓴다 — 티커, 코드. */ --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* 44는 실측으로 들어온 단이다 — `.stress-score`가 47회 쓰고 있었는데 * 램프에 없어서 문서와 코드가 갈렸다. 지수 하나를 화면 전체가 대표하는 * 자리(스트레스 점수)에만 쓴다. 보드 타일은 그대로 38이다. */ --fs-hero: 2.75rem; /* 44 — 한 화면을 대표하는 단일 지수 */ --fs-display: 2.375rem; /* 38 — 보드 타일 대표 숫자 */ --fs-xxl: 1.75rem; /* 28 */ --fs-xl: 1.375rem; /* 22 — 섹션 제목 */ --fs-lg: 1.0625rem; /* 17 */ --fs-md: 0.9375rem; /* 15 — 본문 기준 */ --fs-sm: 0.8125rem; /* 13 — 보조 */ --fs-xs: 0.75rem; /* 12 — 라벨 하한선. 이보다 작게 쓰지 않는다 */ /* --- 간격·모서리 ---------------------------------------------------- * `--sp-1h`(6)는 1과 2 사이의 반 칸이다. 스케일 위반이라 지우려고 세어 * 봤더니 **화면에서 가장 많이 쓰이는 거터**였다(전 페이지 실측 1,734회, * 2위 8px 975회). 1,734곳을 8로 밀면 빽빽함이 이 제품의 성격이라는 규칙과 * 부딪히고, 화면 전체가 미세하게 헐거워진다. 규칙을 어기고 있던 게 * 아니라 규칙이 이 칸을 빠뜨리고 있었다 — 정식으로 넣는다(감사 P2-2). */ --sp-1: 4px; --sp-1h: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; /* **판 안쪽 여백**은 간격이 아니라 역할이다. * * `.panel`은 테두리·모서리·면만 갖고 안쪽 여백은 자식 열댓 개가 각자 16px로 * 들고 있었다. 그래서 폰에서 셸(12)과 타일(12)은 내려갔는데 판 안쪽만 16으로 * 남아, 한 화면에 왼쪽 모서리가 25(타일 내용)와 29(판 내용) 둘로 갈렸다 * (실측 2026-09-06, 412·390·360 전부 동일). 4px은 눈에 안 띄는 대신 * 스크롤하는 내내 읽는 위치를 다시 잡게 만든다. * * 타일을 16으로 올리는 길은 막혀 있다 — 360px에서 `₩1,737,849`의 잉크가 * 134.6px인데 내용 폭이 138.4px밖에 없어 여유가 3.8px다. 16으로 올리면 * -4.2px, 곧 넘친다. 그래서 반대로 판을 12로 내린다. 셸이 이미 560px에서 * 16 → 12를 하고 있으므로 판만 혼자 남아 있던 셈이다. * * 값 하나로 모으면 다음 사람이 판 안에 무언가를 새로 놓을 때 고를 것이 없다. */ --panel-inset: var(--sp-4); --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* 알약은 실측 36곳에서 리터럴 999px로 쓰이고 있었다. 토큰으로 올려야 세계 층이 값을 바꿀 수 있다 — 옛 화면에는 같은 값이라 무변화다. */ /* 2026-09-09 — small 6 → 8. 나머지 셋은 이미 토스의 값과 같았다(10·14). `--r-xl`(16)이 새로 들어온다: 시트와 큰 판이 쓴다. 폰에서는 `world.css`가 한 단씩 더 굴린다(운영자 승인 2026-09-07). */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px; /* 읽기 폭. 네 곳에 손으로 68ch를 적어 두고 네 곳을 빠뜨리고 있었다 — 빠뜨린 쪽에 계약상 필수인 저작자 표시가 있었다(12px에 238자/줄). */ --measure: 68ch; /* ==================================================================== * 제품 타입 램프 — 위계는 크기가 아니라 **역할**이 정한다 (2026-09-09) * * 위의 `--fs-*`는 **값과 라벨의 램프**다(12·13·15·17·22·28·38·44). 그건 * 그대로 둔다 — 표 안 데이터를 키우면 표가 부풀어 값을 훑는 일을 방해한다는 * 판정이 이미 이 파일에 세 번 적혀 있다. * * 여기 새로 서는 `--t-*`는 **제목과 산문의 램프**다. 토스의 제품 타입 * (H1 36/700 · H2 30/600 · H3 24/600 · H4 22/600 · 본문 16 · 작은 본문 14)을 * 가져오되, 그 값은 **데스크톱에서만** 도달한다. * * 왜 `clamp`인가: 지금 화면이 나쁜 이유가 "폰 레이아웃을 그대로 늘려 놓은 * 것"이라 반대 방향으로도 같은 실수를 할 수 있다 — 데스크톱 제목을 폰에 * 그대로 내리면 390px에서 두 줄짜리 30px 제목이 화면의 3할을 먹는다. 폰은 * 지금 크기를 지키고 넓어질수록 토스 값에 닿는다. * * 도달 지점(실측): h1 36 @ 692px · h2 30 @ 883px · h3 24 @ 1091px. * 폰(390)에서는 28 / 22 / 17로, 지금 화면과 같거나 한 단 안이다. * * 줄높이는 토스 값(1.5)을 그대로 쓴다. 한글은 `word-break: keep-all`로 * 어절 단위로 끊기므로 큰 제목이 두 줄이 될 때 1.5가 오히려 읽기 쉽다. * ==================================================================== */ --t-h1: clamp(1.75rem, 5.2vw, 2.25rem); /* 28 → 36 */ --t-h2: clamp(1.375rem, 3.4vw, 1.875rem); /* 22 → 30 */ --t-h3: clamp(1.0625rem, 2.2vw, 1.5rem); /* 17 → 24 */ --t-h4: clamp(1rem, 1.8vw, 1.375rem); /* 16 → 22 */ --t-body: 1rem; /* 16 — 토스 본문 */ --t-body-sm: 0.875rem; /* 14 — 토스 작은 본문 */ --t-lh-heading: 1.5; --t-lh-body: 1.5; --t-w-h1: 700; --t-w-h: 600; /* --- 컨트롤 치수 (토스 제품 값) -------------------------------------- * 32 / 38 / 48 / 56. 기본은 xlarge(56)이고 좌우 여백 20px, 글자 17/600. * **이 저장소의 24px 바닥을 대체하지 않는다** — 24는 표 안 인라인 링크의 * 바닥이고(WCAG 2.2 AA 2.5.8, `tests/frontend/test_layout_spacing.py`가 지고 있다), * 아래 값은 **주 동작**의 크기다. 둘은 다른 것을 재는 자다. */ --ctl-h-sm: 32px; --ctl-h-md: 38px; --ctl-h-lg: 48px; --ctl-h-xl: 56px; --ctl-pad-x: 20px; --ctl-fs: 1.0625rem; /* 17 */ --ctl-fw: 600; /* 손가락 자리 세 단. 역할이 다르므로 이름도 다르다. */ --tap-min: 24px; /* 표 안 인라인 링크 — WCAG 2.2 AA 바닥 */ --tap-control: 44px; /* 화면 컨트롤 */ --tap-primary: 56px; /* 그 화면의 주 동작 */ /* --- 모션은 **우리 값**이다 ------------------------------------------- * 참조 문서가 토스의 그림자·곡선을 "검증된 토큰 아님"이라고 못 박았다. * 그래서 베끼지 않고 정한다. 두 축뿐이다 — * 즉각(120ms): 눌림처럼 손가락에 붙어야 하는 것. * 도착(220ms): 값·판이 자리를 잡는 것. * 곡선 하나(감속)만 쓴다. 튀는 곡선은 계기판의 성격과 맞지 않는다. */ --mo-press: 120ms; --mo-settle: 220ms; --mo-ease: cubic-bezier(.2, .8, .3, 1); /* 가상 요소에 쓰는 기호. JS가 만드는 자리는 `console.js`의 `icon()`을 쓰고, * `::before`처럼 노드를 못 만드는 자리는 **마스크**로 그린다 — 마스크는 * 알파만 쓰므로 색은 언제나 `background-color: currentColor`가 정한다. * 유니코드 삼각형(▸▾)을 쓰면 폰트마다 모양과 정렬이 달라진다. */ --ico-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); /* 외부로 나가는 링크. 꺾쇠(--ico-caret)를 45도 돌려 쓰던 자리인데, 돌린 꺾쇠는 화살표가 아니라 **모서리(ㄱ)**로 읽힌다(운영자 제보 2026-08-31). 상자에서 화살표가 나가는 관용 기호를 따로 둔다. */ --ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); --ico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); --shadow: 0 20px 60px rgba(0, 0, 0, .32); --tape-h: 34px; --mast-h: 58px; /* 폰에서 하단에 서는 페이지 탭 바의 높이 (W-6). 구역 시트 바닥과 본문 * 아래 여백이 같은 값을 읽어야 층이 어긋나지 않는다. * * 52 → 62 (2026-09-07). 바가 바닥에 붙은 띠에서 **가장자리에서 띄운 * 알약**으로 바뀌면서 아이콘이 20 → 24px가 됐다. 테두리는 높이 안에 * 있다(`box-sizing: border-box`) — 밖에 두면 이 값을 읽는 곳이 전부 * 1px씩 어긋난다. */ --pagebar-h: 62px; /* 알약이 화면 가장자리에서 떨어지는 거리. 좌·우·아래가 같은 값이라야 * 떠 있는 것으로 보인다. 시트 바닥과 본문 여백도 이 값을 함께 읽는다. */ --pagebar-inset: 12px; } /* 같은 숫자도 금융권의 색 관습은 로케일마다 반대다. 색만으로 뜻을 전하지 * 않도록 +/- 부호와 ▲/▼ 형태는 그대로 유지한다. */ html[data-lang="en"] { --up: #34d8a4; --down: #ff6b81; } /* --- 기준 타이포 ------------------------------------------------------ */ /* 앵커로 이동할 때 고정 머리(마스트+테이프)에 가리지 않게 하는 여백. * * **스크롤포트(`html`)가 아니라 앵커 대상에 준다.** `scroll-padding-top`을 * html에 두면 그 규칙이 앵커 이동뿐 아니라 **포커스 이동에도** 걸린다 — * 마스트헤드 검색칸을 누르는 순간 브라우저가 "그 요소를 위에서 108px * 아래에 두겠다"며 페이지를 위로 끌어올린다. 그런데 검색칸은 sticky라 * 아무리 스크롤해도 13px에 붙어 있어서 조건이 영영 만족되지 않고, 글자를 * 칠 때마다 화면이 계속 위로 밀린다(실측 2026-08-31: 2,500 → 2,025 → * 1,590px, 운영자 제보). `scroll-behavior: smooth`라 그게 스르륵 보인다. * * 여백을 **본문 안의 앵커 대상**으로 옮기면 앵커 착지는 그대로(실측 108px, * 고정영역 바닥 92px 아래)면서 머리말 컨트롤의 포커스는 건드리지 않는다. */ html { font-size: 16px; } main [id], main.shell { scroll-margin-top: calc(var(--mast-h) + var(--tape-h) + 16px); } /* 좁은 화면에서는 테이프가 흐름 안으로 내려와(console.css) 고정 높이가 마스트뿐이다. 여백도 그만큼만 준다. */ @media (max-width: 560px) { /* 폰에서는 판 안쪽도 셸·타일과 같은 12px에 선다 — 왼쪽 모서리가 하나가 된다. */ :root { --panel-inset: var(--sp-3); } main [id], main.shell { scroll-margin-top: calc(var(--mast-h) + 12px); } } body { background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(79, 168, 255, .07), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%) fixed; color: var(--ink); font-family: var(--sans); font-size: var(--fs-md); line-height: 1.6; letter-spacing: -0.005em; } /* 숫자는 자리폭이 같아야 값이 흔들리지 않는다. * 화면 전체에 켜고, **글**에서만 끈다 — 문장 속 숫자는 비례폭이 더 잘 읽힌다. * 이렇게 두면 새로 만든 컴포넌트가 기본으로 정렬된 숫자를 갖는다. */ body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } h1, h2, p, .console-sub, .section-copy, .sec-note, .intro-copy, .disclose-body, .method-grid, .term-def, .cal-agenda-kind { font-variant-numeric: normal; font-feature-settings: normal; } .num, .tnum, table td.num, table th.num, .tile-value, .tape-value, .metric-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- 최소 글자 크기 바닥 --------------------------------------------- * monitor.css에 9~11px 하드코딩이 흩어져 있다. 한 번에 다 고치는 대신 * 실제로 작았던 셀렉터만 바닥을 올린다. 나머지 페이지로 확산할 때 * 원본 규칙을 정리한다. */ /* 브랜드 로크업의 부제만 12px 아래를 허용한다 — 데이터가 아니라 장식이다. */ .brand small { font-size: 11px; letter-spacing: .1em; } .eyebrow, .source-pill, .section-index, .connection-badge, .status-badge, .hint-chip, .panel-footer, .attribution, .kro-footer, .site-search-group, .site-search-hit .hit-meta { font-size: var(--fs-xs); } .section-copy, .hero-copy { font-size: var(--fs-md); color: var(--ink-2); } /* --- 표와 지표 카드 --------------------------------------------------- * /us의 지표 섹션은 9~11.5px로 짜여 있었다(표 헤더 9px, 카드 키커 9px, 각주 * 9px). 여기가 페이지 글자 수의 대부분이라 바닥을 올리지 않으면 "글자가 * 작다"가 그대로 남는다. 다열 표는 이미 .table-scroll 안에서 가로로 흐르므로 * 폭이 늘어도 레이아웃이 깨지지 않는다. */ .accessible-table { font-size: var(--fs-xs); } .accessible-table th { font-size: var(--fs-xs); } .metric-kicker { font-size: var(--fs-xs); } .metric-unit { font-size: var(--fs-xs); } .metric-change { font-size: var(--fs-xs); } .chart-slot .chart-empty { font-size: var(--fs-xs); } .metric-description { font-size: var(--fs-sm); color: var(--ink-2); } .hint-chip { font-size: var(--fs-xs); line-height: 1.45; } .metric-card > footer { font-size: var(--fs-xs); line-height: 1.5; } .panel-footer { font-size: var(--fs-xs); line-height: 1.5; } .krp-market { font-size: var(--fs-xs); } .feed-soon, .jump-nav a { font-size: var(--fs-xs); } .accessible-table td.range { font-size: var(--fs-xs); } .comparison-legend, .notice-line, .select-label, .select-label select { font-size: var(--fs-xs); } /* 기간 토글(1D/1W)은 9px로 짜여 있었다. 헤더 안에 있는 것만 12px로 올리는 예외가 있어서, 헤더 밖에 선 토글(#ksi-sort "평소 대비"/"관심도 수준")은 9px 그대로 낱말을 찍고 있었다. 낱말은 글리프보다 크기를 더 탄다. 2026-09-07 — 바닥(12)이 아니라 **한 단 위**(13)에 세운다. 이 목록의 나머지는 설명·각주·표 머리처럼 읽고 지나가는 글자지만, 이것은 눌러서 화면을 바꾸는 컨트롤이다. 폰에서는 전폭 줄이 되어 네 낱말이 각자 한 칸을 갖는데, 그 크기에서 12px은 컨트롤이 아니라 각주로 읽혔다. 바닥은 그대로 12다 — 13은 그 위다. */ .segmented button { font-size: var(--fs-sm); } .comparison-card p { font-size: var(--fs-xs); color: var(--ink-2); } /* /crypto — 전체 시장 보드 표, 청산 카드, 국면 게이지, 요약 스트립. */ .cboard-sym, .cboard-table td, .cboard-table th { font-size: var(--fs-xs); } .cliq-head .oi, .cliq-legend { font-size: var(--fs-xs); } .crypto-strip, .crypto-strip small, .kro-strip-item, .kro-strip-item small { font-size: var(--fs-xs); } .sig-gauge small, .sig-gauge span, .sig-gauge > span, .coin-kpi > span, .sig-reading, .creg-delta { font-size: var(--fs-xs); } .cvol-card small, .fng-deltas span, .cliq-venues, .cliq-venues b { font-size: var(--fs-xs); } .crypto-dominance-bar .seg { font-size: var(--fs-xs); } .fng-attribution, .fng-attribution a { font-size: var(--fs-xs); } .cstr-stable .cstr-sub { font-size: var(--fs-xs); } .crypto-news .meta, .crypto-news .meta span, .coin-tag { font-size: var(--fs-xs); } /* /analytics — 자체 인라인 CSS로 짜인 페이지. 표 머리·펄스 카드·기간 버튼· * 내부자 역할 줄이 10~11.5px였다. */ .data-table th, .data-table td, .insider-table th, .insider-table td { font-size: var(--fs-xs); } .pulse-label, .pulse-note, .period-button { font-size: var(--fs-xs); } .insider-source, .heatmap-subtitle, .heatmap-footer { font-size: var(--fs-xs); } .sub, .intro-copy { font-size: var(--fs-sm); } /* --- 12px 바닥, 2026-08-25 실측 훑기 ------------------------------------ 하한선은 여기 적힌 것만 지켜진다 — 규칙을 새로 쓰면서 이 목록에 안 넣으면 아무도 안 잡는다. 실제로 그렇게 새어 나간 게 `.segmented button`(9px)이었고, 그 김에 브라우저로 모든 페이지를 훑어 남은 것을 여기 모았다. tests/frontend/test_typography.py가 이제 새 누수를 막는다. */ /* 마스트·네비·푸터. `.brand small`은 일부러 뺐다 — 위에 적힌 대로 그 줄만 12px 아래를 허용하기로 한 자리다(장식이지 데이터가 아니다). */ .nav-chip, .icon-button, .refresh-button, .view-tab, .mast-ticker, .mast-ticker small, .presence-badge, .session-badge, .site-footer p { font-size: var(--fs-xs); } /* 히어로·요약 카드·주말 구역 */ .kicker, .eyebrow, .hero-meta, .summary-label, .summary-change, .summary-meta, .weekend-disclaimer, .zone-divider small, .zone-mini small, .zone-link-card span { font-size: var(--fs-xs); } /* 섹터·상관·지수 표 */ .sector-name, .sector-name code, .sector-value, .corr-cell, .method-grid p, .kridx-table td.range { font-size: var(--fs-xs); } /* 주말 참고가(kro) — 한 카드 안에서만 8.5~11px이 여섯 가지 섞여 있었다 */ .kro-sym, .kro-vs, .kro-vs-ref, .kro-meta dt, .kro-meta dd, .kro-lag, .kro-footer .kro-method, .kro-footer .kro-disclaimer, .kro-official-strip, .kro-official-strip .kro-strip-label, .kro-strip-lag, .kro-strip-item em { font-size: var(--fs-xs); } /* 뉴스 레인·영상 */ .feed-region, .feed-date, .feed-tag, .feed-domain, .feed-move, .feed-hub, .news-videos .nvid-meta, .news-videos .nvid-play { font-size: var(--fs-xs); } /* /bio — .bio-chip 안의 은 규칙이 아예 없어 브라우저 기본값(부모의 0.83배) 으로 9.17px에 앉아 있었다. 실측 184곳으로 사이트에서 가장 작은 글자였다 */ .bio-chip, .bio-chip small, .bio-table .bio-why, .bio-table .bio-pub, .bio-filter button { font-size: var(--fs-xs); } /* 규칙이 없는 은 어디에 있든 부모의 0.8333배로 앉는다. `.bio-chip small`을 올리자 그 아래 `.bio-title small`이 드러났고, 하나씩 쫓으면 끝이 없다. 상대 축소는 남기되 12px 아래로는 못 내려가게 바닥을 깐다 — 타입 셀렉터라 클래스로 크기를 정한 곳(위 목록)은 전부 이 규칙을 이긴다. */ small { font-size: max(var(--fs-xs), 0.8333em); } /* SVG 도넛 가운데 라벨·13F 배지는 console.css 원본에서 올렸다 — console.css가 tokens.css보다 **뒤에** 실려서 여기 적어도 안 먹는다(실측: 11px 그대로였다). */ /* /crypto/{심볼} — 인라인