/* Threads Autobot — SEED 파생 대시보드 레이어 SEED 에 없는 데스크톱 컴포넌트만 정의한다. 색·간격·라디우스는 전부 토큰. */ /* ---------- 폰트 : Wanted Sans + Pretendard 폴백 ---------- **두 폰트를 겹쳐 쓴다.** 한 폰트로는 안 됐다 - 후보를 파일로 열어 재본 결과 (`docs/research/2026-08-20-font-audit.md`): | 폰트 | 한글 음절 | 가나 | `tnum` | |---|---:|---:|:---:| | Wanted Sans | 11172/11172 | **0** | 있다 | | Pretendard | 11172/11172 | 174자 | 있다 | | SUIT | **2668** (23.9%) | 0 | 있다 | | S-Core Dream | 11172/11172 | 169자 | **없다** | Wanted Sans 를 앞에 세운다(사람 결정 - 더 개성 있는 인상). 다만 Pretendard 가 덮는 **2,345 코드포인트를 덮지 못한다**: 히라가나 84 · 가타카나 94 · 전각기호 96 · 그리스 · 키릴 등. 코퍼스에 일본어 인기글이 있어서(`draft 33`) 이걸 비우면 한 문장 안에서 서체가 갈린다. **`unicode-range` 로 자르지 않는다.** 폴백 체인에 그냥 두면 브라우저가 글리프 단위로 넘긴다 - 범위를 손으로 적으면 2,345자 중 적지 않은 것을 빠뜨린다. 파일도 필요할 때만 받는다: 한국어만 있는 화면에서 Pretendard 는 `unloaded` 로 남는다(실측). 가나가 한 자라도 나타나는 순간에만 내려온다. 섞여도 축이 맞는다 - 둘 다 `upm 2048` · **`cap-height 1448` 로 같다.** (x-height 는 1032 vs 1086 으로 다르다 - 가나는 본문 안에서만 나오므로 감수한다.) `url()` 을 **상대 경로**로 둔다. 두 경로가 다 살아야 한다: · SPA — Vite 가 `ui/app.css` 기준으로 해석해 `dist/assets/` 로 emit 한다 · SSR — Caddy 가 `/srv/autobot-ui` 를 `file_server` 로 내보내 `/fonts/…` 가 된다 **무게는 400/500/700 세 종이다.** SEED v2 가 `--seed-font-weight-medium`(500)을 recipe 60개·135곳에서 쓴다(실측). 500 을 안 실으면 CSS 폰트 매칭이 400 으로 내려가서 SEED 컴포넌트의 위계가 통째로 사라진다 - v1(400/700 두 단계)에서 올라오며 생긴 차이다. 둘 다 SIL Open Font License 1.1 - self-host 가 허용된다. `font-display: swap` — 폰트를 기다리며 글자를 숨기지 않는다. */ @font-face{ font-family:'Wanted Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/WantedSans-Regular.woff2') format('woff2'); } @font-face{ font-family:'Wanted Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/WantedSans-Medium.woff2') format('woff2'); } @font-face{ font-family:'Wanted Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/WantedSans-Bold.woff2') format('woff2'); } @font-face{ font-family:'Pretendard'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Pretendard-Regular.woff2') format('woff2'); } @font-face{ font-family:'Pretendard'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Pretendard-Medium.woff2') format('woff2'); } @font-face{ font-family:'Pretendard'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Pretendard-Bold.woff2') format('woff2'); } :root{ --gutter: 16px; /* SEED v2 는 `font-family` 토큰을 정의하지 않는다 — recipe 는 `inherit` 을 쓴다. 즉 서체는 **우리 소유**다. 그래서 `--ui-` 접두사로 못박는다: v2 가 나중에 같은 이름을 들고 오면 어느 쪽이 이기는지 알 수 없어진다. 순서가 곧 폴백 규칙이다. Wanted Sans 가 없는 글자(가나·전각·그리스 2,345자)를 Pretendard 가 받고, 둘 다 없는 것(한자 등)은 시스템 폰트가 받는다. */ --ui-font-family: 'Wanted Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; /* ---- 잉크 단계 : v2 가 우리 손땜을 공식화했다 ---- v1 은 잉크가 2단계뿐이라(16.06:1 / 3.42:1) AA 를 넘는 중간이 없었고, 그래서 `--ui-ink-2`(gray-700)를 손으로 만들어 39곳에 발랐다. **v2 는 5단계를 준다:** fg-neutral #1a1c20 17.06:1 본문 fg-neutral-muted #555d6d 6.62:1 **보조 텍스트 - 우리 --ui-ink-2 의 후계** fg-neutral-subtle #868b94 3.42:1 미달 - 쓰지 않는다 fg-placeholder #b0b3ba 2.10:1 플레이스홀더 전용 fg-disabled #d1d3d8 1.50:1 비활성 전용 **이름에 속으면 안 된다** - `subtle` 이 의미상 "보조" 로 읽히지만 3.42:1 로 v1 의 결함값과 같은 색(#868b94)이다. 보조 텍스트는 반드시 `muted` 다. `subtle`·`placeholder`·`disabled` 는 WCAG 가 대비를 면제하는 자리에만 쓴다. 그래서 이 블록에 잉크 토큰 정의가 없다 - 공식 토큰을 직접 참조한다. */ /* ---- 컨트롤 높이 래더 ---- **우리가 만든 토큰이다.** v2 는 컴포넌트가 자기 높이를 갖고 오므로 이 래더는 SEED 에 대응이 없는 것(표·시간대 격자·툴바 정렬)에만 쓴다. 이 다섯 값 밖의 높이를 쓰지 않는다. 한 줄에 두 높이가 섞이면 밑변이 어긋나고, 그게 2026-08-20 에 사용자가 지적한 "틀어지는 게 많다" 의 원인이었다. */ --seed-control-height-xsmall: 32px; --seed-control-height-small: 36px; --seed-control-height-medium: 40px; --seed-control-height-large: 48px; --seed-control-height-xlarge: 52px; } @media (min-width: 1024px){ :root{ --gutter: 24px; } } *{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--ui-font-family); background: var(--seed-color-bg-layer-basement, #f7f8fa); color: var(--seed-color-fg-neutral); -webkit-font-smoothing: antialiased; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; } /* ---------- 2026-08-21 죽은 규칙 정리 (81벌) ---------- SEED 컴포넌트로 옮긴 뒤 **마크업이 사라졌는데 규칙만 남아 있던 것**을 지웠다. 판정은 눈이 아니라 대조다: `ui/app.css` 의 규칙 251벌에서 클래스를 뽑고, `web/src/**`·`web/seed-design/**`·SSR 템플릿·`ui/*.html`·`web/*.py` 의 문자열 전부와 맞춰 **한 번도 나오지 않는 것만** 지웠다. 동적 조립(`hcell hcell--${st}`, `navClass()` 의 반환 문자열)까지 세었다 — `className=` 속성만 보면 그것들을 죽었다고 오판한다. 지운 묶음: 드롭존 `.drop`(8) · 토글 `.switch`(7) · 도움말 `.hb`(13) · 계정 탭 `.acctab`(6) · 설정 행 `.row`(6) · 더보기 `.mlist`(5) · 계정 건전성 표 `.tbl--health`(10) · 모바일 CTA·초안 네비(4) · 스파크라인 `.spark`(4) · 타임라인 모바일 요약(5) · 낱개 유틸리티(`.ic-16` `.warn` `.progress` `.progress__bar` `.metarow` `.datenav__d` `.pick__x` `.copybox` `.meta--foot` `.cellhide`). `.mobonly` 는 **되살렸다** — 모바일 메뉴 버튼이 그 자리를 다시 쓴다. **되살리지 말고 컴포넌트를 써라.** 지운 자리마다 대응 컴포넌트를 주석에 적었다. */ /* ---------- 아이콘 ---------- */ .ic{ width:20px; height:20px; display:inline-block; flex:0 0 auto; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; } .ic-24{ width:24px; height:24px; } /* ---------- 셸 ---------- 사이드바는 SEED `SideNavigation` 이 그린다(`web/src/components/Shell.tsx`). 여기 있던 `.sidebar`·`.navgroup__label`·`.navitem`(+hover/on) 6벌을 지웠다. **접힘이 CSS 트릭에서 상태로 바뀐 것이 핵심이다** — 전에는 `@media` 가 라벨을 `display:none` 으로 숨겼고, 그래서 넓은 화면에서 사람이 접을 수 없었고 접힌 상태에서 무슨 메뉴인지 알 수 없었다. SEED 는 240px/56px 두 폭과 `data-` 상태를 갖고 오고, 접혔을 때 라벨을 툴팁으로 되돌린다. **스크롤 주인이 바뀌었다.** 전에는 창이 스크롤하고 사이드바가 `sticky` 였다. 지금은 셸이 뷰포트 높이에 고정되고 `SideNavigationInset`(본문)이 스크롤한다 — recipe 가 `overflow-y:auto` 를 갖고 있어서 그렇게 두지 않으면 높이 제약이 없는 스크롤 컨테이너가 되고, 그 안의 `sticky` 상단바가 **영원히 붙지 않는다** (스크롤이 창에서 일어나므로 Inset 의 스크롤포트는 움직이지 않는다). */ .shell{ display:flex; height:100vh; overflow:hidden; } /* 브랜드 줄은 `SideNavigationHeader`(min-height 64px, padding 8px) 안에 산다. 접히면 이름을 빼고 마크만 남긴다 — 56px 안에서 이름은 잘린다. */ .brand{ display:flex; align-items:center; gap:8px; padding:0 4px; height:100%; } .brand__mark{ width:22px; height:22px; flex:0 0 auto; border-radius:var(--seed-radius-r2); background: var(--seed-color-bg-brand-solid); } /* 트래킹을 손으로 주지 않는다. SEED 는 38개 시맨틱 스타일 **전부** `letter-spacing: 0` 이다(`ui/seed.css` 실측 - narrow 토큰은 정의만 있고 어떤 스타일도 쓰지 않는다). Pretendard 는 0 에서 맞게 설계된 폰트라 음수 트래킹을 주면 오히려 자모가 붙는다. 이 화면들의 -0.01~-0.03em 은 전 폰트(에스코어드림) 시절의 습관이었다. */ .brand__name{ font-weight:700; font-size:15px; white-space:nowrap; } /* 접기 버튼은 펼친 상태에서 오른쪽 끝, **접힌 상태에서는 유일하게 남는 것**이다. 처음엔 접히면 감췄는데 그러면 1280px 아래에서 사람이 펼칠 방법이 없다 — SEED 가 그 폭에서 자동으로 접기 때문에 영구히 접힌 상태가 된다(실측: 1100px 에서 버튼 `display:none`). 56px 안에 마크와 버튼을 나란히 두면 둘 다 잘리므로, 접히면 브랜드 마크를 내리고 버튼만 가운데 남긴다. */ .brand__fold{ margin-left:auto; } .seed-side-navigation__root[data-side-navigation-state=collapsed] .brand__name, .seed-side-navigation__root[data-side-navigation-state=collapsed] .brand__mark{ display:none; } .seed-side-navigation__root[data-side-navigation-state=collapsed] .brand__fold{ margin:0 auto; } .topbar{ height:56px; display:flex; align-items:center; gap:12px; padding: 0 var(--gutter); background: var(--seed-color-bg-layer-default); border-bottom: 1px solid var(--seed-color-stroke-neutral-weak); position:sticky; top:0; z-index:5; } .topbar__title{ font-size:16px; font-weight:700; } .topbar__sub{ font-size:13px; color: var(--seed-color-fg-neutral-muted); } .topbar__right{ margin-left:auto; display:flex; align-items:center; gap:8px; } .page{ padding: var(--gutter); max-width: 1180px; } /* ---------- 카드 : 틴트 또는 테두리, 둘 다 금지. 그림자 없음 ---------- */ .card{ background: var(--seed-color-bg-layer-default); border: 1px solid var(--seed-color-stroke-neutral-weak); border-radius: var(--seed-radius-r3); padding: 16px; } .card--tint{ background: var(--seed-color-palette-gray-200); border: none; } .card__head{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; } .card__title{ font-size:13px; font-weight:700; color: var(--seed-color-fg-neutral-muted); } .card__more{ margin-left:auto; font-size:12px; color: var(--seed-color-palette-carrot-800); font-weight:700; } /* 12칸 격자는 **SEED `Grid` 로 안 간다** (2026-08-21 판정). `Grid` 는 컨테이너 축만 반응형이다: `columns` 는 `ResponsiveValue` 지만 `GridItem` 의 `colSpan` 은 아니다 — 구현이 `gridColumn` 을 단일 CSS 변수 (`--seed-box-grid-column`)로 내리고, `base.css` 에 그 변수의 브레이크포인트 4단(`-sm`/`-md`/`-lg`/`-xl`)이 **없다**(실측). 즉 `span 8 -> span 12` 같은 항목별 반응형 폭을 표현할 방법이 없고, 그게 이 격자가 존재하는 이유다. `columns={{base:1, md:12}}` 로 우회하면 모바일에서 `colSpan=8` 이 암시적 열 7개를 만들어 레이아웃이 깨진다. 그래서 3줄을 남긴다. DatePicker 와 같은 종류의 판정이다 — SEED 에 대응이 없어서 남기는 것이고, 트리거가 생기면 그때 간다. */ .grid{ display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); } .col-3{ grid-column: span 3; } .col-4{ grid-column: span 4; } .col-6{ grid-column: span 6; } .col-8{ grid-column: span 8; } .col-12{ grid-column: span 12; } /* ---------- 수치 ---------- */ .stat{ display:flex; flex-direction:column; gap:2px; } /* `font-variant-numeric` 선언은 이 파일에 원래부터 11곳 있었다. **에스코어드림에는 `tnum` 이 없어서 전부 무효였다** - Pretendard 로 바꾼 지금 처음 동작한다. */ .stat__v{ font-size:26px; font-weight:700; line-height:1.2; font-variant-numeric: tabular-nums; } .stat__u{ font-size:13px; font-weight:400; color: var(--seed-color-fg-neutral-muted); } .stat__l{ font-size:12px; color: var(--seed-color-fg-neutral-muted); } .num{ font-variant-numeric: tabular-nums; } /* 배지는 SEED `Badge` 가 그린다 (`@seed-design/react`). 여기 있던 `.badge` + 변형 5종(13줄)을 지웠다 — 대비를 팔레트에서 손으로 골라 맞추던 자리다. 교체 대응: `.badge--a`(BEST) -> `tone="brand"` `.badge--b`(발행) -> `tone="informative"` `.badge--c` -> `tone="neutral"` `.badge--d`(흐림) -> `tone="neutral" variant="outline"` `.badge--acct` -> `tone="neutral"` **`.bad` 로 글자만 빨갛게 칠하던 손땜이 사라졌다.** SEED 는 색을 안쪽 `.seed-badge__label` 에 주므로 root 에 붙는 클래스가 닿지 않는다. 실패는 `tone="critical"` 로 올렸다(`format.ts::statusTone`). */ /* 콜아웃은 SEED `Callout` 이 그린다 (`seed-design/ui/callout.tsx`). 여기 있던 `.callout` 3종 + `__t`/`__d`(12줄)을 지웠다 — 대비를 손으로 맞추던 자리이고, `tone="neutral|informative|positive|warning|critical|magic"` 이 그 판단을 공식 팔레트로 대신한다. `description` 이 **필수 prop** 이라 제목만 띄우는 콜아웃을 만들 수 없다. */ /* ---------- 표 ---------- */ .tbl{ width:100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .tbl th{ text-align:left; font-size:12px; font-weight:700; color: var(--seed-color-fg-neutral-muted); padding:8px 10px; border-bottom:1px solid var(--seed-color-stroke-neutral-weak); white-space:nowrap; } .tbl td{ font-size:13px; padding:10px; border-bottom:1px solid var(--seed-color-stroke-neutral-subtle); } .tbl tr:hover td{ background: var(--seed-color-bg-neutral-weak-alpha); } /* 오른쪽 정렬 칸은 **줄바꿈하지 않는다.** 헤더(`th`)에는 `nowrap` 이 있었는데 본문에는 없어서, 열이 좁아지면 값이 글자 중간에서 접혔다 — 운영 화면 실측에서 `21시간` 이 `21시` / `간` 으로 갈렸다(2026-08-21, `/app/timeline` 1024px). 숫자·기간은 한 덩어리로 읽어야 하는 값이다. 넘치면 `.tblwrap` 이 가로로 민다. */ .tbl .r{ text-align:right; white-space:nowrap; } /* 값 하나를 경고색으로. **`.r` 과 다른 축이다** — `.r` 은 표 안 우측 정렬이고 이건 색이다. 2026-08-14 신설: 회전 소진(8회전)·하드 탈락 축·상한 초과처럼 "이 숫자가 문제다" 를 한 글자도 안 읽고 알아채게 하는 자리에만 쓴다. 전부 칠하면 아무것도 눈에 안 띈다. */ .bad{ color: var(--seed-color-fg-critical); } .tbl__hook{ max-width:1px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 버튼은 SEED `ActionButton` 이 그린다 (`seed-design/ui/action-button.tsx`). 여기 있던 `.btn` + 변형 6종 + hover/press/disabled(40줄)을 지웠다. 교체 대응: `.btn--primary` -> `variant="brandSolid"` `.btn--secondary` -> `variant="neutralWeak"` `.btn--ghost` -> `variant="ghost"` `.btn--sm`(32) -> `size="xsmall"` `.btn`(36) -> `size="small"` (기본은 `medium`=40) `.btn--full`(48) -> `size="large"`(52) + `Box width="100%"` 공짜로 얻은 것 — `loading` prop 이 스피너를 붙인다(전에는 레이블만 '…중' 으로 바꿔서 누른 게 먹었는지 안 보였다), `asChild` 가 `` 를 감싸므로 `a:hover` 가 버튼 색을 덮는 사고(주황 배경에 주황 글자)가 구조적으로 없다, 그리고 `@media (hover:hover)`·press 지연·`:disabled` 재도색을 우리가 안 짠다. */ .kbd{ display:inline-flex; align-items:center; height:18px; padding:0 5px; border-radius: var(--seed-radius-r1); background: var(--seed-color-palette-gray-300); font-size:11px; color: var(--seed-color-palette-gray-800); font-weight:700; } /* ---------- 목록 행 ---------- */ .lrow{ padding:12px 14px; border-bottom:1px solid var(--seed-color-stroke-neutral-subtle); cursor:pointer; } .lrow:hover{ background: var(--seed-color-bg-neutral-weak-alpha); } .lrow--on{ background: var(--seed-color-palette-carrot-100); box-shadow: inset 3px 0 0 var(--seed-color-bg-brand-solid); } .lrow__top{ display:flex; align-items:center; gap:6px; margin-bottom:4px; } .lrow__hook{ font-size:13px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .post{ white-space:pre-wrap; font-size:15px; line-height:1.62; padding:16px; border-radius: var(--seed-radius-r3); background: var(--seed-color-palette-gray-200); } .post--src{ background: transparent; border:1px solid var(--seed-color-stroke-neutral-weak); } .meta{ font-size:12px; color: var(--seed-color-fg-neutral-muted); } .meta b{ color: var(--seed-color-fg-neutral); font-size:13px; } /* SEED `Divider` 는 **지금 들일 자리가 없다** (2026-08-21 판정). 남은 구분선은 전부 `border` 다 — 표 셀(`.tbl td`) · 목록 행(`.lrow`) · 카드 경계 · 접이식 위의 실선(아래 `details.fold`). 그건 요소가 아니라 **경계**라서 `
` 로 바꾸면 DOM 노드만 늘고 색은 SEED 의 `stroke.neutralMuted` 로 미묘하게 달라진다(우리는 `stroke-neutral-weak`). 독립 구분선을 실제로 그리는 자리가 생기면 그때 쓴다 — `/app/settings`(자동발행 Phase 0) 의 구역 나누기가 첫 후보다. */ details.fold{ border-top:1px solid var(--seed-color-stroke-neutral-weak); padding-top:12px; margin-top:12px; } details.fold > summary{ cursor:pointer; font-size:13px; font-weight:700; color: var(--seed-color-fg-neutral-muted); list-style:none; display:flex; align-items:center; gap:6px; } details.fold > summary::-webkit-details-marker{ display:none; } /* ---------- 날짜 네비 ---------- */ .datenav{ display:flex; align-items:center; gap:10px; } /* 아이콘 버튼도 래더를 따른다. **리터럴 px 을 쓰지 않는다** — 툴바에서 32 로 남아 있어 40px 필드와 밑변이 어긋났다. 기본은 `small`(36)이고 툴바처럼 필드와 나란히 서는 자리는 `medium`(40)으로 올린다. */ .iconbtn{ width: var(--seed-control-height-small); height: var(--seed-control-height-small); border-radius:var(--seed-radius-r2); border:none; background:transparent; color: var(--seed-color-fg-neutral-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; } .iconbtn:hover{ background: var(--seed-color-bg-neutral-weak-alpha); } /* 칩은 SEED `Chip`(선택 가능한 필터)과 `Badge`(누를 수 없는 라벨)로 갈렸다 — 여기 있던 `.chips`/`.chip`/`.chip--on`(10줄)을 지웠다. **하나였던 것을 둘로 나눈 게 핵심이다.** 전에는 `