/* ===================================================================== InnoLink — 디자인 토큰 이 파일에는 값만 둔다. 선택자·컴포넌트는 components.css / app.css. 출처 색 · 타이포 · 하드룰 ....... .doc/design/innored_basic.md 차트 색 .................... .doc/design/chart-palette.md (검증 완료) 간격 · 라운드 · 그림자 · 모션 .. .doc/design/reb_design.md ← §2 주석 참고 하드 룰 (innored_basic) · Primary 는 ink(#111) 흑잉크. indigo/navy 브랜드화 금지 · 본문에 빨강 금지. #F91112 는 "INNORED" 워드에만 · 시스템 블루 금지 — accent(#0E7490) 사용 · 이모지 금지, 아이콘은 SVG stroke 만 ===================================================================== */ /* ── 0. 폰트 — 자체 호스팅 (CDN 금지: 코딩 가이드 §11) ───────────────── Pretendard Variable v1.309 · SIL Open Font License 1.1 https://github.com/orioncactus/pretendard wght 축 45~930 이라 620 · 650 같은 중간 웨이트가 그대로 렌더된다. */ @font-face { font-family: 'Pretendard Variable'; src: url('../fonts/PretendardVariable.woff2') format('woff2-variations'); font-weight: 45 930; font-style: normal; font-display: swap; } /* ── 그룹 링크 테마가 쓰는 글꼴 둘 (2026-09-09) ────────────────────── 관리 화면은 이 둘을 쓰지 않는다 — 공개 화면의 테마에서만 쓴다 (app.css 의 .il-pg--mill — Plex 는 지금 쓰는 테마가 없지만, 선언만으로는 아무도 안 받으므로 다음 테마를 위해 둔다). ★ 여기 적어 두어도 **그 테마를 쓰는 화면에서만 내려받는다.** 브라우저는 @font-face 를 선언만으로 받지 않고, 실제로 그 글꼴로 그릴 글자가 생겨야 받는다. 그래서 기본 테마를 쓰는 그룹 링크의 방문자는 한 바이트도 더 받지 않는다 — 이 화면들은 **바깥 사람이 폰으로 여는 것**이라 그 점이 중요하다. ★ font-display: swap 이 없으면 안 된다. 없으면 글꼴을 받는 동안 글자가 아예 안 보인다(최대 3초) — 바이오에서 눌러 들어온 사람이 보는 첫 화면이 빈 종이가 된다. swap 은 시스템 글꼴로 먼저 그리고 도착하면 갈아 끼운다. ★ 파일은 public/assets/fonts 에만 둔다 (2026-09-09 결정). .wireframe 에서 정적 HTML 을 열면 이 둘은 404 로 없고, 그때는 아래 대체 글꼴(시스템 명조 · 고딕)로 그려진다 — 와이어프레임은 배치를 보는 자리라 글꼴이 한 벌 아래로 떨어져도 하는 일이 그대로다. 고운바탕 SIL Open Font License 1.1 · github.com/yangheeryu/Gowun-Batang ttf 8.4MB 를 woff2 로 바꿔 0.51MB 다 (한글 11,172자 전부) IBM Plex Sans KR SIL Open Font License 1.1 · github.com/IBM/plex 0.42MB (한글 11,172자 전부) */ /* ★ 400 만 적는다. `400 700` 이라고 적으면 브라우저가 **이 파일이 곧 700** 이라고 믿고 굵게 만들지 않는다 — 굵게 쓴 제목과 버튼이 전부 가는 획으로 섰다 (2026-09-09 실측). 가진 무게를 사실대로 적어야 나머지를 흉내 낸다. 진짜 Bold 파일을 넣고 싶으면 여기 @font-face 를 한 벌 더 두면 된다 */ @font-face { font-family: 'Gowun Batang'; src: url('../fonts/GowunBatang-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans KR'; src: url('../fonts/IBMPlexSansKR-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ── 1. 색 — innored_basic 원본값 (변경 금지) ────────────────────── */ --ink: #111111; /* Primary 텍스트 */ --brand-innored: #F91112; /* "INNORED" 워드 전용. 그 밖의 용도 금지 */ --bg: #F7F7F5; /* 페이지 배경 */ --bg-subtle: #EFEFEA; /* hover · nested · 빈 값 */ --accent: #0E7490; /* 링크 · 포커스 · 강조 */ --success: #047857; --warn: #B45309; --danger: #B91C1C; --border: #E6E6E1; /* 파생 — innored_basic 에 정의가 없어 이 프로젝트에서 만든 값. 전부 #F7F7F5 위 대비를 실측해서 정했다(주석의 수치). */ --bg-elevated: #FFFFFF; /* 카드 · 모달 */ --text-secondary: #57574F; /* 6.79:1 AA 본문 */ --text-muted: #6F6F6B; /* 4.70:1 AA 본문 · 축 라벨 */ --text-placeholder:#8A8A83; /* 3.24:1 UI 전용, 본문 금지 */ --border-strong: #D5D5CE; --overlay: rgba(17, 17, 17, .38); /* 사진에서 잘라 낼 자리 **바깥**을 덮는 색. --overlay 로는 사진이 그대로 비쳐 어디까지가 남는 자리인지 안 갈린다 (cropper.js) */ --overlay-strong: rgba(17, 17, 17, .62); --text-inverse: #FFFFFF; --ink-hover: #000000; --accent-hover: #0B5F77; /* 위 흰 글자 7.20:1 */ /* 상태 tint + 그 위 글자 — 배지 · 스트라이프 전용. 전부 11px bold 기준 AA(4.5:1)를 넘도록 실측해서 맞춘 쌍이다. 따로 떼어 쓰지 말 것. */ --accent-tint: #DCF5FF; --accent-on-tint: #0E7490; /* 4.73:1 */ --success-tint: #DEF7EB; --success-on-tint: #047857; /* 4.86:1 */ --warn-tint: #FFECE2; --warn-on-tint: #B14F00; /* 4.60:1 — 원본 #B45309 은 4.41 로 미달이라 한 단계 어둡게 */ --danger-tint: #FFEBE8; --danger-on-tint: #B91C1C; /* 5.64:1 */ /* 잉크 사이드바 위 텍스트 (배경 --ink 기준 실측) */ --on-ink: #FFFFFF; /* 18.88:1 */ --on-ink-2: #D6D6D0; /* 12.94:1 일반 메뉴 */ --on-ink-3: #B4B4AC; /* 9.05:1 보조 */ --on-ink-label: #8E8E86; /* 5.72:1 섹션 라벨 */ --on-ink-disabled:#6F6F69; /* 3.73:1 UI 전용 */ --on-ink-hover: rgba(255, 255, 255, .07); --on-ink-active: rgba(255, 255, 255, .12); --on-ink-success: #5FD0A6; /* 9.94:1 토스트 마크 */ --on-ink-error: #EF8F8F; /* 8.09:1 토스트 마크 */ /* ── 2. 차트 색 — chart-palette.md (검증기 통과값. 눈으로 고치지 말 것) ── 카테고리는 슬롯 순서대로 배정하고 절대 순환하지 않는다. 7번째 계열이 필요하면 --chart-other 로 접는다. */ --chart-1: #0091b5; /* accent (브랜드 앵커) — 자사 · 주요 지표는 항상 여기 */ --chart-2: #4932b2; /* violet */ --chart-3: #8d006a; /* plum */ --chart-4: #a13c00; /* rust */ --chart-5: #928500; /* olive */ --chart-6: #00734f; /* green */ --chart-other: #7b7b77; /* (기타) 중립 */ /* QR 코드 바탕 — 테마를 따라가면 안 된다. 스캐너는 명암 차로 읽기 때문에 다크 모드에서 바탕이 어두워지면 그 QR 은 인쇄물에서 읽히지 않는다. */ --qr-bg: #ffffff; /* 순차 램프 — 요일×시간 히트맵. 단일 색상(H 223) 명도 단계 */ --seq-100: #0bb1db; --seq-200: #009dc3; --seq-300: #0089ab; --seq-400: #007693; --seq-500: #00637d; --seq-600: #005167; /* 차트 크롬 */ --chart-surface: var(--bg-elevated); --chart-empty: var(--bg-subtle); /* 값이 0인 셀. 램프 최저단과 구분해야 한다 */ --chart-grid: var(--border); --chart-axis: var(--border); --chart-label: var(--text-muted); /* ── 3. 타이포 ────────────────────────────────────────────────── Pretendard Variable 단일 패밀리(innored_basic). CDN 금지(코딩 가이드 §11)라 assets/fonts/ 에 self-host 했다(§0 @font-face). 폴백은 폰트 로드 실패 시에만 쓰인다. */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* body / caption 만 원문에서 확인된 값이다. display · title · heading · lead 의 px 는 원본 스크래핑에서 유실되어(innored_basic 주석) 아래 값은 이 프로젝트가 정한 잠정치다 — 라이브 styleguide.php 확인 후 교정할 것. */ --fs-display: 32px; --fw-display: 800; --ls-display: -.03em; /* 잠정 */ --fs-title: 24px; --fw-title: 800; --ls-title: -.025em; /* 잠정 */ --fs-heading: 18px; --fw-heading: 700; --ls-heading: -.02em; /* 잠정 */ --fs-lead: 16px; --fw-lead: 500; /* 잠정 */ --fs-body: 14px; --fw-body: 400; /* 확인됨 */ --fs-caption: 12.5px;--fw-caption: 500; /* 확인됨 */ --fs-micro: 11px; --fw-micro: 700; --ls-micro: .08em; /* eyebrow */ --lh-tight: 1.3; --lh-body: 1.6; /* ── 4. 간격 · 셰이프 · 그림자 · 모션 ──────────────────────────── innored_basic 에는 이 네 가지 정의가 없다. 같은 제작 계보인 reb_design 값을 가져왔다. 색은 절대 섞지 않았다(innored_basic 명시 금지 사항). */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-18: 72px; --sp-24: 96px; --radius-sm: 8px; /* 인풋 · 버튼 · 태그 */ --radius-md: 12px; /* 큰 버튼 · 카드 */ --radius-lg: 16px; /* 카드 */ --radius-xl: 20px; /* 모달 · 시트 */ --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 2px 4px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.07); --shadow-lg: 0 8px 24px rgba(0,0,0,.09); --shadow-xl: 0 16px 48px rgba(0,0,0,.12); --ease: cubic-bezier(.16, 1, .3, 1); --t-fast: 150ms var(--ease); --t-base: 250ms var(--ease); --t-slow: 400ms var(--ease); /* ── 5. 레이아웃 ────────────────────────────────────────────────── */ --sidebar-w: 240px; --topbar-h: 56px; /* 본문 폭 상한 (2026-08-25 — none 에서 바꿨다) "표와 차트가 주라서 넓을수록 정보가 더 들어간다" 고 열어 뒀는데, 화면을 옮길 때마다 본문 폭이 모니터 폭을 그대로 따라가 덜컹거렸다. 1440 은 넓은 표(링크 목록 7컬럼)가 여유 있게 들어가면서, 1920 짜리 모니터에서 양쪽에 눈에 띄는 여백이 남는 지점이다. 좁은 화면에서는 이 값이 걸리지 않고 --content-pad 만 남는다. 글이 주인 화면(폼·리포트)은 더 좁힌다: .il-content--reading */ --content-max: 1440px; --reading-max: 1200px; /* 카드 목록이 한 줄로 서는 화면 — 링크(.il-home) · 프로젝트(.il-prlist). 표가 아니라 카드라 가로로 채울 칸이 없다. 1440 을 다 쓰면 카드 한 장이 화면을 가로지르고, 제목과 오른쪽 끝 숫자 사이가 눈으로 못 잇는 거리가 된다. ★ 두 화면이 같은 값을 각자 적어 두지 않는다 (2026-08-28). 앞서는 .il-home 이 880px 을 직접 물고 있었는데, 프로젝트를 카드로 옮기면서 같은 숫자가 두 군데가 됐다. 목록의 폰 크기를 두 화면에 따로 적었다가 같은 페이지가 다르게 보였던 일과 같은 자리다 (app.css §페이지 한 줄 21차). */ --list-max: 880px; /* 좌우 여백 — 화면 폭에 따라 늘고 준다. 16px 아래로는 안 내려간다 (좁은 화면에서 글자가 모서리에 붙는다), 48px 위로는 안 올라간다 (그 이상은 --content-max 가 맡는다) */ --content-pad: clamp(var(--sp-4), 4vw, var(--sp-12)); /* 본문과 같은 자리에서 시작하게 하는 안쪽 여백. 띠(상단바)는 배경이 끝까지 가야 하므로 max-width 로 못 줄인다 — 대신 넘치는 만큼을 여백으로 돌린다. 100% 는 그 띠의 폭이다 */ --gutter: calc(max(0px, (100% - var(--content-max)) / 2) + var(--content-pad)); /* 포커스 링 — 잉크 한 겹이다 (2026-08-25). 본래 bg 2px + accent 4px 로 하늘색 후광이 떴는데, 화면이 흑백인 곳에 혼자 색이 있어 촌스러웠고 두께도 6px 라 칸보다 링이 먼저 보였다. 2px 도 두꺼웠다 (2026-08-25 2차). 1px 이면 "포커스가 왔다" 는 말은 되면서 칸보다 먼저 눈에 띄지는 않는다. 글자 칸은 링을 아예 안 쓴다 — 테두리 한 줄이 옅은 회색에서 잉크로 바뀌는 것으로 말한다. 둘레 전체가 바뀌므로 신호는 충분하고, 테두리 위에 링을 겹치면 무슨 짓을 해도 두 줄로 보인다. 지우지는 않는다. 키보드로 쓰는 사람은 이것 말고 지금 어디 있는지 알 길이 없다 (WCAG 2.4.7). */ --focus-ring: 0 0 0 1px var(--ink); --focus-ring-on-ink: 0 0 0 1px var(--on-ink); } /* 다크 모드는 이번 범위 밖. innored_basic 은 theme: light 단일 테마이고 다크 값을 정의하지 않는다. 필요해지면 명도를 뒤집는 게 아니라 같은 색상에서 스텝을 다시 골라 다크 표면 기준으로 재검증해야 한다(chart-palette.md §8). */