리디

---
name: 리디
slug: ridi
category: content
last_updated: "2026-10-20"
created_at: "2026-10-19"
lang: ko
logo: https://getdesign.kr/logos/ridi.png
colors:
  ## neutral — 무채색 원시 (층 A --ridi-color-*)
  neutral-25: oklch(0.985 0.000 0.0) # #FAFAFA — 렌더 상세 정보 박스 바탕과 같은 값
  neutral-50: oklch(0.970 0.000 0.0) # #F5F5F5 — 렌더 검색창·바로가기 원 바탕과 같은 값
  neutral-100: oklch(0.925 0.000 0.0) # #E6E6E6 — 렌더 테두리와 같은 값
  neutral-200: oklch(0.845 0.000 0.0) # #CCCCCC
  neutral-300: oklch(0.722 0.000 0.0) # #A5A5A5 — 렌더 보조 글자와 같은 값
  neutral-400: oklch(0.573 0.000 0.0) # #787878 — 렌더 회색 보조 글자(홈 1440 최다)와 같은 값
  neutral-500: oklch(0.510 0.000 0.0) # #666666
  neutral-600: oklch(0.431 0.000 0.0) # #505050
  neutral-700: oklch(0.337 0.000 0.0) # #373737
  neutral-750: oklch(0.293 0.000 0.0) # #2C2C2C — 규칙 밖 단계
  neutral-800: oklch(0.244 0.000 0.0) # #202020
  neutral-850: oklch(0.222 0.000 0.0) # #1B1B1B — 규칙 밖 단계
  neutral-900: oklch(0.191 0.000 0.0) # #141414 — 렌더 기본 글자와 같은 값
  neutral-white: oklch(1.000 0.000 0.0) # #FFFFFF — red-25 와 같은 값
  neutral-black: oklch(0.000 0.000 0.0) # #000000
  ## coolgray — 푸른 기 회색 원시
  coolgray-25: oklch(0.982 0.002 247.8) # #F8F9FA
  coolgray-50: oklch(0.966 0.003 228.8) # #F2F4F5 — 렌더 회차 행 구분선과 같은 값
  coolgray-100: oklch(0.930 0.005 258.3) # #E6E8EB
  coolgray-200: oklch(0.871 0.007 247.9) # #D1D5D9 — 렌더 보기 버튼 테두리와 같은 값
  coolgray-300: oklch(0.723 0.013 236.7) # #9EA7AD
  coolgray-400: oklch(0.625 0.016 244.8) # #808991
  coolgray-500: oklch(0.526 0.016 241.2) # #636C73
  coolgray-600: oklch(0.394 0.014 244.0) # #40474D
  coolgray-700: oklch(0.325 0.009 233.9) # #303538
  coolgray-800: oklch(0.266 0.008 240.2) # #222629
  coolgray-900: oklch(0.212 0.005 248.1) # #17191B
  ## blue — 원시 블루 램프
  blue-50: oklch(0.964 0.019 243.0) # #E9F5FF
  blue-100: oklch(0.892 0.058 241.4) # #BAE1FF
  blue-200: oklch(0.840 0.087 242.4) # #98D2FF
  blue-300: oklch(0.774 0.125 243.5) # #69BEFF
  blue-400: oklch(0.735 0.147 245.2) # #4CB1FF
  # 화면·워드마크의 리디 블루는 #1E9EFF(emotion-blue)다. blue-500 은 렌더 8조합에서 0건이고 사이트 아이콘 PNG 에만 나온다
  blue-500: oklch(0.683 0.176 248.4) # #1F9EFF — 토큰 원시값 · 대표색은 emotion-blue
  blue-600: oklch(0.637 0.163 248.1) # #1C90E8
  blue-660: oklch(0.569 0.174 252.7) # #0077D9 — 규칙 밖 단계
  blue-700: oklch(0.531 0.134 248.0) # #1670B5
  blue-800: oklch(0.444 0.109 247.3) # #11578C
  blue-900: oklch(0.369 0.088 247.3) # #0D426B
  ## deepblue — 짙은 청색 원시
  deepblue-25: oklch(0.970 0.010 267.4) # #F2F5FC
  deepblue-50: oklch(0.951 0.020 264.5) # #E8EFFD
  deepblue-100: oklch(0.846 0.066 267.0) # #B9CCF9
  deepblue-200: oklch(0.773 0.100 265.8) # #97B4F6
  deepblue-300: oklch(0.673 0.150 264.5) # #6792F2
  deepblue-400: oklch(0.613 0.181 263.5) # #497DEF
  deepblue-500: oklch(0.531 0.225 262.9) # #1C5CEB
  deepblue-600: oklch(0.497 0.208 262.9) # #1954D6
  deepblue-650: oklch(0.500 0.236 262.2) # #0050E6 — 규칙 밖 단계
  deepblue-700: oklch(0.416 0.171 263.1) # #1441A7
  deepblue-800: oklch(0.351 0.138 262.8) # #0F3381
  deepblue-900: oklch(0.295 0.111 263.1) # #0C2763
  ## darknavy — 남색 회색 원시
  darknavy-25: oklch(0.973 0.002 247.8) # #F5F6F7
  darknavy-50: oklch(0.943 0.003 264.5) # #EBECEE
  darknavy-100: oklch(0.818 0.010 252.8) # #BFC4CA
  darknavy-200: oklch(0.729 0.015 254.6) # #A1A8B1
  darknavy-300: oklch(0.596 0.023 255.0) # #76808D
  darknavy-400: oklch(0.510 0.029 255.7) # #5B6777
  darknavy-500: oklch(0.371 0.040 255.8) # #324155 — 렌더 1권무·무료 배지 바탕과 같은 값
  darknavy-600: oklch(0.349 0.036 256.6) # #2E3B4D
  darknavy-700: oklch(0.298 0.029 256.8) # #242E3C
  darknavy-800: oklch(0.258 0.024 256.4) # #1C242F
  darknavy-900: oklch(0.220 0.020 258.3) # #151B24
  ## red — 원시 레드 램프
  red-25: oklch(1.000 0.000 0.0) # #FFFFFF — neutral-white 와 같은 값(상류 중복을 그대로 둔다)
  red-50: oklch(0.954 0.019 17.5) # #FCEBEB
  red-100: oklch(0.852 0.061 18.4) # #F4BFBF
  red-200: oklch(0.785 0.093 19.4) # #EFA1A1
  red-300: oklch(0.697 0.142 21.4) # #E87676
  red-400: oklch(0.647 0.170 23.1) # #E35B5B
  red-500: oklch(0.587 0.206 26.4) # #DC3232 — 렌더 별점·할인 배지와 같은 값
  red-600: oklch(0.547 0.191 26.2) # #C82E2E
  red-700: oklch(0.458 0.156 25.9) # #9C2424
  red-800: oklch(0.383 0.128 25.6) # #791C1C
  red-900: oklch(0.318 0.103 25.2) # #5C1515
  ## yellow — 원시 옐로 램프
  yellow-25: oklch(0.993 0.011 95.2) # #FFFDF5
  yellow-50: oklch(0.987 0.021 95.3) # #FFFBEB
  yellow-100: oklch(0.957 0.065 94.0) # #FFF1C0
  yellow-200: oklch(0.938 0.094 94.0) # #FFEAA1
  yellow-300: oklch(0.913 0.131 94.0) # #FFE176
  yellow-400: oklch(0.899 0.148 93.3) # #FFDB5C
  yellow-500: oklch(0.878 0.168 91.7) # #FFD233
  yellow-600: oklch(0.818 0.156 91.7) # #E8BF2E
  yellow-700: oklch(0.680 0.128 91.9) # #B59524
  yellow-800: oklch(0.566 0.106 92.7) # #8C741C
  yellow-900: oklch(0.467 0.086 92.3) # #6B5815
  ## green — 원시 그린 램프
  green-25: oklch(0.979 0.009 161.4) # #F3FAF6
  green-50: oklch(0.970 0.018 161.1) # #EBF9F1
  green-100: oklch(0.905 0.053 160.6) # #C2EBD4
  green-200: oklch(0.861 0.080 159.4) # #A4E2BF
  green-300: oklch(0.800 0.113 158.2) # #7AD4A2
  green-400: oklch(0.766 0.133 156.7) # #61CC90
  green-500: oklch(0.715 0.158 154.2) # #39BF74
  green-600: oklch(0.668 0.147 154.4) # #34AE6A
  green-700: oklch(0.558 0.122 154.3) # #288852
  green-800: oklch(0.464 0.098 154.9) # #1F6940
  green-900: oklch(0.386 0.079 155.4) # #185031
  ## purple — 원시 퍼플 램프
  purple-25: oklch(0.979 0.008 293.9) # #F8F7FD
  purple-50: oklch(0.957 0.017 293.1) # #F1EFFC
  purple-100: oklch(0.865 0.058 293.9) # #D4CCF6
  purple-200: oklch(0.798 0.088 293.2) # #BFB3F1
  purple-300: oklch(0.705 0.131 291.2) # #A190EB
  purple-400: oklch(0.650 0.157 289.8) # #8F7BE7
  purple-500: oklch(0.566 0.196 286.8) # #735AE1
  purple-600: oklch(0.529 0.182 287.0) # #6952CD
  purple-700: oklch(0.445 0.149 287.3) # #5240A0
  purple-800: oklch(0.374 0.121 287.1) # #3F327C
  purple-900: oklch(0.314 0.097 287.5) # #30265F
  ## orange — 원시 오렌지 램프
  orange-25: oklch(0.983 0.010 58.2) # #FFF8F3
  orange-50: oklch(0.966 0.021 60.8) # #FFF1E6
  orange-100: oklch(0.892 0.066 60.1) # #FDD2B0
  orange-200: oklch(0.844 0.099 58.5) # #FDBC8A
  orange-300: oklch(0.781 0.143 56.7) # #FC9E54
  orange-400: oklch(0.746 0.166 54.0) # #FB8B33
  orange-500: oklch(0.699 0.194 46.9) # #FA6E00
  orange-600: oklch(0.652 0.180 47.1) # #E46400
  orange-700: oklch(0.544 0.149 47.8) # #B24E00
  orange-800: oklch(0.455 0.122 49.3) # #8A3D00
  orange-900: oklch(0.376 0.099 50.4) # #692E00
  ## mint — 원시 민트 램프
  mint-25: oklch(0.978 0.010 197.0) # #F1FAFA
  mint-50: oklch(0.973 0.018 196.9) # #E9FAFA
  mint-100: oklch(0.918 0.056 196.2) # #B9F0F0
  mint-200: oklch(0.880 0.078 195.8) # #98E8E8
  mint-300: oklch(0.833 0.106 195.3) # #68DEDE
  mint-400: oklch(0.806 0.118 195.1) # #4BD7D7
  mint-500: oklch(0.770 0.127 194.8) # #1ECDCD — 렌더 UP 배지 바탕과 같은 값
  mint-600: oklch(0.719 0.119 194.8) # #1BBBBB
  mint-700: oklch(0.599 0.098 194.8) # #159292
  mint-800: oklch(0.499 0.081 194.9) # #117171
  mint-900: oklch(0.412 0.066 194.9) # #0D5656
  ## gold — 원시 골드 램프
  gold-25: oklch(0.982 0.004 91.4) # #FAF9F6
  gold-50: oklch(0.978 0.009 100.0) # #F9F8F1
  gold-100: oklch(0.930 0.026 94.7) # #EDE8D5
  gold-200: oklch(0.896 0.039 95.9) # #E4DDC0
  gold-300: oklch(0.848 0.058 97.6) # #D7CEA3
  gold-400: oklch(0.820 0.070 97.6) # #D0C591
  gold-500: oklch(0.773 0.085 97.3) # #C4B676
  gold-600: oklch(0.722 0.080 98.1) # #B2A66B
  gold-700: oklch(0.601 0.064 97.2) # #8B8154
  gold-800: oklch(0.502 0.052 96.8) # #6C6441
  gold-900: oklch(0.415 0.041 96.7) # #524C32
  ## emotion 테마 (층 B) — 화면이 실제로 칠하는 이름 붙은 값
  primary: "{colors.emotion-blue}"
  emotion-blue: oklch(0.683 0.176 248.3) # #1E9EFF — 층 B lightTheme blue · 공개 글의 최종 리디 블루 · 현재 탭·선택 알약·구매 버튼·워드마크
  dark-emotion-blue: oklch(0.649 0.156 244.3) # #1496E6 — 층 B darkTheme blue
  emotion-grey200: oklch(0.955 0.000 0.0) # #F0F0F0 — 층 B grey200 · 홈 구분선·테두리 · 층 A 에 없는 값
  emotion-grey550: oklch(0.450 0.000 0.0) # #555555 — 층 B grey550 · 상세 보조 글자 · darkTheme 에 키 없음
  emotion-dim-thumb: oklch(0.000 0.000 0 / 0.04) # rgba(0, 0, 0, 0.04) — 층 B dimThumb · 표지 덧칠·외곽선 · 다크도 같은 값
  ## 시맨틱 background·surface (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인
  background-neutral-default: "{colors.neutral-white}"
  dark-background-neutral-default: "{colors.neutral-900}"
  background-neutral-subtle: "{colors.neutral-50}"
  dark-background-neutral-subtle: "{colors.neutral-900}"
  surface-elevated: "{colors.neutral-white}"
  dark-surface-elevated: "{colors.neutral-800}"
  surface-disabled: "{colors.neutral-50}" # 다크 값은 원시 참조가 아닌 리터럴이라 본문 표에만
  # surface-thumbnail-blur 는 라이트·다크 모두 color-mix 라 본문 표에만 둔다
  surface-selected-blue: "{colors.blue-500}"
  dark-surface-selected-blue: "{colors.blue-600}"
  surface-selected-white: "{colors.neutral-white}"
  dark-surface-selected-white: "{colors.neutral-600}"
  surface-selected-black: "{colors.neutral-900}"
  dark-surface-selected-black: "{colors.neutral-50}"
  surface-danger-50: "{colors.red-50}"
  dark-surface-danger-50: "{colors.red-800}"
  surface-danger-300: "{colors.red-300}"
  dark-surface-danger-300: "{colors.red-700}"
  surface-danger-400: "{colors.red-400}"
  dark-surface-danger-400: "{colors.red-500}"
  surface-danger-500: "{colors.red-500}"
  dark-surface-danger-500: "{colors.red-600}"
  surface-danger-600: "{colors.red-600}"
  dark-surface-danger-600: "{colors.red-500}"
  surface-warning-50: "{colors.orange-50}"
  dark-surface-warning-50: "{colors.orange-800}"
  surface-warning-300: "{colors.orange-300}"
  dark-surface-warning-300: "{colors.orange-700}"
  surface-warning-500: "{colors.orange-500}"
  dark-surface-warning-500: "{colors.orange-600}"
  surface-success-50: "{colors.green-50}"
  dark-surface-success-50: "{colors.green-800}"
  surface-success-300: "{colors.green-300}"
  dark-surface-success-300: "{colors.green-700}"
  surface-success-500: "{colors.green-500}"
  dark-surface-success-500: "{colors.green-600}"
  ## 시맨틱 surface-general (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인
  surface-general-white-default: "{colors.neutral-white}"
  dark-surface-general-white-default: "{colors.neutral-900}"
  surface-general-white-subtle: "{colors.neutral-white}"
  dark-surface-general-white-subtle: "{colors.neutral-800}"
  surface-general-white-static: "{colors.neutral-white}"
  dark-surface-general-white-static: "{colors.neutral-white}"
  surface-general-gray-25: "{colors.neutral-25}"
  dark-surface-general-gray-25: "{colors.neutral-850}"
  surface-general-gray-50: "{colors.neutral-50}"
  dark-surface-general-gray-50: "{colors.neutral-800}"
  surface-general-gray-100: "{colors.neutral-100}"
  dark-surface-general-gray-100: "{colors.neutral-700}"
  surface-general-gray-800: "{colors.neutral-800}"
  dark-surface-general-gray-800: "{colors.neutral-50}"
  surface-general-gray-900: "{colors.neutral-900}"
  dark-surface-general-gray-900: "{colors.neutral-white}"
  surface-general-black-static: "{colors.neutral-black}"
  dark-surface-general-black-static: "{colors.neutral-black}"
  surface-general-blue-50: "{colors.blue-50}"
  dark-surface-general-blue-50: "{colors.blue-800}"
  surface-general-blue-100: "{colors.blue-100}"
  dark-surface-general-blue-100: "{colors.blue-700}"
  surface-general-blue-300: "{colors.blue-300}"
  dark-surface-general-blue-300: "{colors.blue-700}"
  surface-general-blue-500: "{colors.blue-500}"
  dark-surface-general-blue-500: "{colors.blue-600}"
  surface-general-blue-600: "{colors.blue-600}" # 라이트 600 ↔ 다크 500 맞바꿈
  dark-surface-general-blue-600: "{colors.blue-500}"
  surface-general-deepblue-50: "{colors.deepblue-50}"
  dark-surface-general-deepblue-50: "{colors.deepblue-800}"
  surface-general-deepblue-300: "{colors.deepblue-300}"
  dark-surface-general-deepblue-300: "{colors.deepblue-700}"
  surface-general-deepblue-500: "{colors.deepblue-500}"
  dark-surface-general-deepblue-500: "{colors.deepblue-600}"
  surface-general-darknavy-50: "{colors.darknavy-50}"
  dark-surface-general-darknavy-50: "{colors.darknavy-800}"
  surface-general-darknavy-300: "{colors.darknavy-300}"
  dark-surface-general-darknavy-300: "{colors.darknavy-700}"
  surface-general-darknavy-500: "{colors.darknavy-500}"
  dark-surface-general-darknavy-500: "{colors.darknavy-600}"
  surface-general-red-50: "{colors.red-50}"
  dark-surface-general-red-50: "{colors.red-800}"
  surface-general-red-300: "{colors.red-300}"
  dark-surface-general-red-300: "{colors.red-700}"
  surface-general-red-500: "{colors.red-500}"
  dark-surface-general-red-500: "{colors.red-600}"
  surface-general-yellow-50: "{colors.yellow-50}"
  dark-surface-general-yellow-50: "{colors.yellow-800}"
  surface-general-yellow-300: "{colors.yellow-300}"
  dark-surface-general-yellow-300: "{colors.yellow-700}"
  surface-general-yellow-500: "{colors.yellow-500}"
  dark-surface-general-yellow-500: "{colors.yellow-600}"
  surface-general-green-50: "{colors.green-50}"
  dark-surface-general-green-50: "{colors.green-800}"
  surface-general-green-300: "{colors.green-300}"
  dark-surface-general-green-300: "{colors.green-700}"
  surface-general-green-500: "{colors.green-500}"
  dark-surface-general-green-500: "{colors.green-600}"
  surface-general-purple-50: "{colors.purple-50}"
  dark-surface-general-purple-50: "{colors.purple-800}"
  surface-general-purple-300: "{colors.purple-300}"
  dark-surface-general-purple-300: "{colors.purple-700}"
  surface-general-purple-500: "{colors.purple-500}"
  dark-surface-general-purple-500: "{colors.purple-600}"
  surface-general-orange-50: "{colors.orange-50}"
  dark-surface-general-orange-50: "{colors.orange-800}"
  surface-general-orange-300: "{colors.orange-300}"
  dark-surface-general-orange-300: "{colors.orange-700}"
  surface-general-orange-500: "{colors.orange-500}"
  dark-surface-general-orange-500: "{colors.orange-600}"
  surface-general-mint-50: "{colors.mint-50}"
  dark-surface-general-mint-50: "{colors.mint-800}"
  surface-general-mint-300: "{colors.mint-300}"
  dark-surface-general-mint-300: "{colors.mint-700}"
  surface-general-mint-500: "{colors.mint-500}"
  dark-surface-general-mint-500: "{colors.mint-600}"
  surface-general-gold-50: "{colors.gold-50}"
  dark-surface-general-gold-50: "{colors.gold-800}"
  surface-general-gold-300: "{colors.gold-300}"
  dark-surface-general-gold-300: "{colors.gold-700}"
  surface-general-gold-500: "{colors.gold-500}"
  dark-surface-general-gold-500: "{colors.gold-600}"
  ## 시맨틱 border (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인
  border-default: "{colors.neutral-100}"
  dark-border-default: "{colors.neutral-700}"
  border-inverse: "{colors.neutral-700}"
  dark-border-inverse: "{colors.neutral-100}"
  border-strong: "{colors.neutral-200}"
  dark-border-strong: "{colors.neutral-600}"
  border-disabled: "{colors.neutral-50}"
  dark-border-disabled: "{colors.neutral-700}"
  border-divider-default: "{colors.neutral-50}"
  dark-border-divider-default: "{colors.neutral-750}"
  border-divider-strong: "{colors.neutral-100}"
  dark-border-divider-strong: "{colors.neutral-600}"
  border-danger: "{colors.red-500}"
  dark-border-danger: "{colors.red-600}"
  border-warning: "{colors.orange-500}"
  dark-border-warning: "{colors.orange-600}"
  border-success: "{colors.green-500}"
  dark-border-success: "{colors.green-600}"
  border-information: "{colors.blue-500}"
  dark-border-information: "{colors.blue-600}"
  border-selected-blue: "{colors.blue-500}"
  dark-border-selected-blue: "{colors.blue-600}"
  border-selected-white: "{colors.neutral-white}"
  dark-border-selected-white: "{colors.neutral-600}"
  border-selected-black: "{colors.neutral-900}"
  dark-border-selected-black: "{colors.neutral-50}"
  ## 시맨틱 text (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인
  text-primary: "{colors.neutral-900}"
  dark-text-primary: "{colors.neutral-50}"
  text-primary-static: "{colors.neutral-900}"
  dark-text-primary-static: "{colors.neutral-900}"
  text-inverse: "{colors.neutral-50}"
  dark-text-inverse: "{colors.neutral-900}"
  text-inverse-static: "{colors.neutral-50}"
  dark-text-inverse-static: "{colors.neutral-50}"
  text-secondary: "{colors.neutral-400}"
  dark-text-secondary: "{colors.neutral-500}"
  text-tertiary: "{colors.neutral-300}"
  dark-text-tertiary: "{colors.neutral-600}"
  text-disabled: "{colors.neutral-200}"
  dark-text-disabled: "{colors.neutral-700}"
  text-rating: "{colors.red-500}"
  dark-text-rating: "{colors.red-600}"
  text-danger: "{colors.red-500}"
  dark-text-danger: "{colors.red-600}"
  text-warning: "{colors.orange-500}"
  dark-text-warning: "{colors.orange-600}"
  text-success: "{colors.green-500}"
  dark-text-success: "{colors.green-600}"
  text-information: "{colors.blue-500}"
  dark-text-information: "{colors.blue-600}"
  text-general-deepblue-650: "{colors.deepblue-650}"
  dark-text-general-deepblue-650: "{colors.deepblue-300}"
  text-general-blue-660: "{colors.blue-660}"
  dark-text-general-blue-660: "{colors.blue-300}"
  text-general-red-400: "{colors.red-400}"
  dark-text-general-red-400: "{colors.red-500}"
  text-selected-blue: "{colors.blue-500}"
  dark-text-selected-blue: "{colors.blue-600}"
  text-selected-white: "{colors.neutral-50}"
  dark-text-selected-white: "{colors.neutral-600}"
  text-selected-black: "{colors.neutral-900}"
  dark-text-selected-black: "{colors.neutral-50}"
  ## 시맨틱 icon (층 A) — dark- 행은 발행된 다크 짝이나 웹 브라우저에서 켜지는 경로는 미확인
  icon-primary: "{colors.neutral-900}"
  dark-icon-primary: "{colors.neutral-50}"
  icon-inverse: "{colors.neutral-50}"
  dark-icon-inverse: "{colors.neutral-900}"
  icon-inverse-static: "{colors.neutral-50}"
  dark-icon-inverse-static: "{colors.neutral-50}"
  icon-secondary: "{colors.neutral-400}"
  dark-icon-secondary: "{colors.neutral-500}"
  icon-tertiary: "{colors.neutral-200}"
  dark-icon-tertiary: "{colors.neutral-700}"
  # icon-disabled 는 라이트·다크 모두 color-mix 라 본문 표에만 둔다
  icon-rating: "{colors.red-500}"
  dark-icon-rating: "{colors.red-600}"
  icon-danger: "{colors.red-500}"
  dark-icon-danger: "{colors.red-600}"
  icon-warning: "{colors.orange-500}"
  dark-icon-warning: "{colors.orange-600}"
  icon-success: "{colors.green-500}"
  dark-icon-success: "{colors.green-600}"
  icon-information: "{colors.blue-500}"
  dark-icon-information: "{colors.blue-600}"
  icon-selected-blue: "{colors.blue-500}"
  dark-icon-selected-blue: "{colors.blue-600}"
  icon-selected-white: "{colors.neutral-white}"
  dark-icon-selected-white: "{colors.neutral-600}"
  icon-selected-black: "{colors.neutral-900}"
  dark-icon-selected-black: "{colors.neutral-50}"
  icon-general-white-static: "{colors.neutral-white}"
  dark-icon-general-white-static: "{colors.neutral-white}"
  icon-general-general-static: "{colors.neutral-black}" # 상류 이름 그대로
  dark-icon-general-general-static: "{colors.neutral-black}"
  icon-general-gray-50: "{colors.neutral-50}"
  dark-icon-general-gray-50: "{colors.neutral-800}"
  icon-general-gray-300: "{colors.neutral-300}"
  dark-icon-general-gray-300: "{colors.neutral-700}"
  icon-general-gray-500: "{colors.neutral-500}"
  dark-icon-general-gray-500: "{colors.neutral-600}"
  icon-general-gray-300-static: "{colors.neutral-300}"
  dark-icon-general-gray-300-static: "{colors.neutral-300}"
  icon-general-blue-500: "{colors.blue-500}"
  dark-icon-general-blue-500: "{colors.blue-600}"
  icon-general-blue-600: "{colors.blue-600}" # 라이트 600 ↔ 다크 500 맞바꿈
  dark-icon-general-blue-600: "{colors.blue-500}"
  icon-general-deepblue-500: "{colors.deepblue-500}"
  dark-icon-general-deepblue-500: "{colors.deepblue-600}"
  icon-general-darknavy-500: "{colors.darknavy-500}"
  dark-icon-general-darknavy-500: "{colors.darknavy-600}"
  icon-general-red-500: "{colors.red-500}"
  dark-icon-general-red-500: "{colors.red-600}"
  icon-general-yellow-500: "{colors.yellow-500}"
  dark-icon-general-yellow-500: "{colors.yellow-600}"
  icon-general-green-500: "{colors.green-500}"
  dark-icon-general-green-500: "{colors.green-600}"
  icon-general-purple-500: "{colors.purple-500}"
  dark-icon-general-purple-500: "{colors.purple-600}"
  icon-general-orange-500: "{colors.orange-500}"
  dark-icon-general-orange-500: "{colors.orange-600}"
  icon-general-mint-500: "{colors.mint-500}"
  dark-icon-general-mint-500: "{colors.mint-600}"
  icon-general-gold-500: "{colors.gold-500}"
  dark-icon-general-gold-500: "{colors.gold-600}"
typography:
  body-LSemibold: # --text-body-LSemibold
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: -0.16px
  body-mBold: # --text-body-mBold
    fontSize: 15px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: -0.15px
  body-mSemibold: # --text-body-mSemibold
    fontSize: 15px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: -0.15px
  body-mMedium: # --text-body-mMedium
    fontSize: 15px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: -0.15px
  body-sSemibold: # --text-body-sSemibold
    fontSize: 14px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: -0.14px
  body-sRegular: # --text-body-sRegular
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.14px
  body-xsSemibold: # --text-body-xsSemibold
    fontSize: 13px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: -0.13px
  body-xsRegular: # --text-body-xsRegular
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.13px
  caption-mMedium: # --text-caption-mMedium
    fontSize: 12px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: -0.12px
  scale-01: # fontSize-01 · letterSpacing-01
    fontSize: 7px
    letterSpacing: -0.07px
  scale-02: # fontSize-02 · letterSpacing-02
    fontSize: 8px
    letterSpacing: -0.08px
  scale-03: # fontSize-03 · letterSpacing-03
    fontSize: 9px
    letterSpacing: -0.09px
  scale-04: # fontSize-04 · letterSpacing-04
    fontSize: 11px
    letterSpacing: -0.11px
  scale-05: # fontSize-05 · letterSpacing-05
    fontSize: 12px
    letterSpacing: -0.12px
  scale-06: # fontSize-06 · letterSpacing-06
    fontSize: 13px
    letterSpacing: -0.13px
  scale-07: # fontSize-07 · letterSpacing-07
    fontSize: 14px
    letterSpacing: -0.14px
  scale-08: # fontSize-08 · letterSpacing-08
    fontSize: 15px
    letterSpacing: -0.15px
  scale-09: # fontSize-09 · letterSpacing-09
    fontSize: 16px
    letterSpacing: -0.16px
  scale-10: # fontSize-10 · letterSpacing-10
    fontSize: 18px
    letterSpacing: -0.18px
  scale-11: # fontSize-11 · letterSpacing-11
    fontSize: 20px
    letterSpacing: -0.2px
  scale-12: # fontSize-12 · letterSpacing-12
    fontSize: 22px
    letterSpacing: -0.22px
  scale-13: # fontSize-13 · letterSpacing-13
    fontSize: 24px
    letterSpacing: -0.24px
  scale-14: # fontSize-14 · letterSpacing-14
    fontSize: 26px
    letterSpacing: -0.26px
  scale-15: # fontSize-15 · letterSpacing-15
    fontSize: 34px
    letterSpacing: -0.34px
  scale-16: # fontSize-16 · letterSpacing-16
    fontSize: 42px
    letterSpacing: -0.42px
fonts:
  font-sans: '"Pretendard Variable", "Pretendard Std Variable", "Pretendard JP Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif'
  font-sans-detail: '"Pretendard Variable", "Pretendard Std Variable", "Pretendard JP Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif'
spacing:
  ds-50: 2px
  ds-100: 4px
  ds-150: 6px
  ds-200: 8px
  ds-250: 10px
  ds-300: 12px
  ds-400: 16px
  ds-500: 20px
  ds-600: 24px
  ds-700: 28px
  ds-750: 30px
  ds-900: 36px
  ds-1000: 40px
rounded:
  radius-50: 2px
  radius-100: 4px
  radius-full: 9999px
elevation:
  carousel-arrow: 2px 4px 8px 0 oklch(0.000 0.000 0.0 / 0.06)   # 캐러셀 화살표 원 · 컴포넌트 코드의 값(이름 붙은 그림자 토큰 아님)
  floating-box: 5px 5px 10px 0 oklch(0.000 0.000 0.0 / 0.08)   # 떠 있는 상자(1440 만) · 컴포넌트 코드의 값(이름 붙은 그림자 토큰 아님)
  legacy-button: 0 1px 1px 0 oklch(0.871 0.007 247.9 / 0.3)   # 상세 rui_ 버튼(옛 층) · 레거시 CSS 의 값
components:
  gnb-tab:
    textColor: "{colors.neutral-900}"
  gnb-tab-current:
    textColor: "{colors.emotion-blue}"
  genre-pill:
    textColor: "{colors.neutral-900}"
    rounded: 99px
  genre-pill-selected:
    backgroundColor: "{colors.emotion-blue}"
    textColor: "{colors.neutral-white}"
    rounded: 99px
  hero-card:
    rounded: 20px
    width: 364px
    height: 414px
  book-card:
    rounded: "{rounded.radius-100}"
    width: 180px
  cover-badge:
    textColor: "{colors.neutral-white}"
    height: 23px
  purchase-button:
    backgroundColor: "{colors.emotion-blue}"
    textColor: "{colors.neutral-white}"
    rounded: 6px
  favorite-pill:
    backgroundColor: "{colors.neutral-white}"
    textColor: "{colors.emotion-blue}"
    rounded: 30px
  info-chip:
    rounded: "{rounded.radius-50}"
    width: 40px
    height: 18px
  carousel-arrow:
    backgroundColor: "{colors.neutral-white}"
    width: 40px
    height: 40px
---

# 리디 — design.md

## Brand & Style

리디는 흰 바탕과 차가운 무채색 회색 위에 하늘색 리디 블루 `oklch(0.683 0.176 248.3)` 한 점으로 현재 탭·선택 알약·구매 버튼을 표시하고, 표지·카드는 4px 모서리로 정돈해 표지와 일러스트가 화면을 채우게 둔 웹툰·웹소설·전자책 콘텐츠 플랫폼이다 [src:5][src:3][src:17].

리디(RIDI)는 리디주식회사가 운영하는 콘텐츠 플랫폼이고 웹 서비스는 ridibooks.com 이다. 2022년 리뉴얼에서 서비스명을 "리디북스"에서 "리디"로 바꾸고 카테고리를 웹툰·웹소설·도서·셀렉트로 나눴으며, BI 콘셉트 "스페이스"와 새 심볼 'R' 을 내놓으면서 "리디의 상징인 블루 컬러 등 디자인 요소들을 재정의" 했다고 적는다 [src:4]. 브랜드 에센스는 "모두의 취향(For All Tastes)"이고, 웹툰·웹소설 등은 리디의 서브 브랜드, 옛 리디북스는 전자책 카테고리의 서브 브랜드가 됐다 [src:6]. App Store 앱 이름은 "만화 웹툰 웹소설 도서는 리디"이고 판매자는 RIDI Corporation 이다 [src:12].

**블루 한 색에 내력이 있다.** 리뉴얼 첫 테스트에서 고른 더 짙은 블루가 다크 모드의 검정 배경과 대비가 심해 "눈의 피로도를 주어" 다시 골랐고, 최종 리디 블루가 위 값이다 [src:5]. 선정 목표는 서비스 방향이 드러나는 블루, 다양한 환경에서 눈이 편한 블루, "다크 모드 대응이 가능한 장기적으로 건강한 컬러 시스템" 세 가지였다 [src:5]. 그래서 이 블루는 강조의 크기가 아니라 빈도로 일한다 — 화면 대부분은 짙은 회색 글자 `{colors.neutral-900}` 과 회색 보조 글자 `{colors.neutral-400}` 이 차지하고, 블루는 지금 어디에 있는지·무엇을 골랐는지·어디서 사는지를 알리는 자리에만 나온다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음).

밀도는 높다. 데스크톱은 1170px 컨테이너 [src:20] 안에 히어로 카드 셋을 동시에 놓고 [src:16], 그 아래 표지 여섯 장과 랭킹 세 열을 촘촘히 깐다(≈ 캡처에서 읽음 · 공개 출처 없음). 모바일은 같은 내용을 장르 알약·바로가기·표지의 가로 스크롤 띠로 접는다(375 렌더 관찰 ≈, 캡처에서 읽음 · 공개 출처 없음). 면(카드)으로는 히어로 카드 하나만 20px 로 둥글게 튀고 [src:16], 표지·카드는 4px 다 [src:17]. 알약(99px · 30px)과 원형 조작 표지(50% · 29px)는 따로다 [src:15][src:10][src:14].

**로고.** 심볼 'R' 은 리디가 처음 만든 심볼로, 이니셜 방식에 퍼스펙티브로 "무한한 공간"을, 비대칭 조형으로 "재미있고 즐거운" 정서를 담고, 워드마크는 "둥글고 볼드한 형태를 각지고 정돈된 형태로 개선"했다 [src:7]. 카탈로그 로고는 리디 웹이 게시한 512px 사이트 아이콘(흰 정사각 위 R 심볼)을 원본 그대로 쓴다 [src:11]. 그 아이콘의 주색은 토큰 `{colors.blue-500}` 과 같은 값이고, 아이콘 안에 화면의 리디 블루(`{colors.emotion-blue}`) 값 픽셀은 0개다 [src:11]. App Store 앱 아이콘(블루 전면 위 흰 글리프)은 대표색과 맞지만 심볼을 발행한 브랜드라 쓰지 않았다 [src:13][src:7]. 헤더 `RIDI` 워드마크는 SVG 이미지이고 채움이 `{colors.emotion-blue}` 값이다 [src:1][src:37]. 회사 사이트 워드마크 SVG 도 같은 채움이다 [src:33]. 로고 이용 허락·가이드 문구는 찾지 못했다 [src:7].

**범위.** 이 항목은 ridibooks.com 웹 하나 — 만화 홈 · 웹툰 홈 · 웹툰 상세 · 만화 e북 상세 — 를 다룬다. 앱 전용 화면, 리디페이퍼, 다른 서비스는 넣지 않는다. 공개된 디자인 시스템 이름이 없어 `design_system_name` 을 두지 않는다. 옛 디자인 시스템 저장소는 MIT 라이선스로 아카이브돼 있고 [src:31], npm `@ridi/colors` 0.7.1 은 111색을 싣고 [src:30], 옛 문서 사이트는 대표색을 "Dodger Blue" 로 불렀다 [src:34]. 이것들은 대표색 근거로 쓰지 않는다.

**목소리.** 서비스 문구는 명사형·짧은 구절이다. 섹션 제목은 `지금 많이 읽고 있는 만화` · `오늘, 리디의 발견` 같은 관형형·명사구이고 [src:1], 버튼은 `첫화보기` · `전권 대여` · `전권 할인 소장` 처럼 서술형 종결어미 없이 끝난다 [src:9][src:10]. 안내는 `만화 감상을 더 몰입감 있게!`(≈ 캡처 · 공개 출처 없음) 같은 평서 감탄이다. 시스템 안내는 `혜택 기간 : …` 같은 건조한 명사 나열이고 [src:10], 작품관·이벤트 이름은 대괄호로 묶는다(`[RIDI ONLY 작품관]`) [src:9]. 웹툰 홈 섹션은 `웹툰 실시간 랭킹` · `요일별 웹툰` · `기다리면 무료로 시작해!` 다 [src:8].

## Colors

리디의 색은 두 층으로 나뉜다. 층 A 는 홈이 불러오는 `--ridi-*` 디자인 토큰 CSS 로, 원시 137색과 라이트/다크 시맨틱 122쌍이 이름 붙어 발행돼 있고, 그 Tailwind 유틸 클래스(`.bg-surface-elevated` 등 23개)도 같은 파일에 정의돼 있다 [src:2]. 그러나 수집한 HTML 5개 · JS 71개에서 이 이름과 유틸 클래스를 쓰는 곳은 0건이고(≈ 보드 판독 · 공개 출처 없음), 화면이 실제로 칠하는 것은 층 B — emotion 테마 객체와 컴포넌트 CSS 의 리터럴 값 — 이다 [src:3]. 층 B 의 값 대부분이 층 A 원시와 같을 뿐, 토큰을 거쳐 칠해진 것은 아니다. 다크도 마찬가지로 단서가 붙는다. 층 A 는 다크 짝을 발행하지만, 웹 브라우저에서 다크가 켜지는 경로는 확인하지 못했다 — 테마 선택 코드는 앱 안에서 앱이 다크를 알릴 때, `/bridge/books/` 경로, `/inapp/account/reauth` + dark 일 때만 다크를 고르고 그 밖은 라이트이며 [src:19], 렌더 8조합(4페이지 × 2폭)은 모두 `data-theme="light"` 였고 `prefers-color-scheme` 은 수집 파일에 0건이었다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음).

그래서 frontmatter 는 층 A 를 이름 그대로 싣고(키는 `--ridi-color-` 를 뗀 것), 층 B 에서 층 A 에 없는 이름 붙은 값 넷과 다크 블루 하나를 `emotion-` 접두 그룹으로 따로 싣는다. 층 A 를 쓰는 소비자는 이것이 **발행됐지만** [src:2] **화면에서 쓰이지 않은 이름**(≈ 보드 판독 · 공개 출처 없음)이라는 점을 전제로 해야 한다.

### 대표색 — emotion-blue, blue-500 이 아니다

`primary` 는 `{colors.emotion-blue}` 를 가리킨다. 공개 글이 최종 리디 블루로 밝힌 값이 이것이고 [src:5], 같은 값이 emotion 테마의 `blue` 라는 이름 붙은 발행값이다 [src:3]. 층 A 의 `{colors.blue-500}` 은 이와 R 채널 1 만 다른 값으로(OKLCH 로는 `248.4` 대 `248.3` 의 색상각 차이뿐이라 기계 대조로는 구분되지 않는다) [src:2], 렌더 8조합 어디에도 나오지 않고(≈ 보드 판독 · 공개 출처 없음) 사이트 아이콘 PNG 에 나온다 [src:11]. 토큰이 왜 이 값인지(의도인지 반올림인지)는 확인되지 않았다.

**브랜드 블루 역할은 상류 정의 그대로 둔다.** 층 A 시맨틱 `surface-selected-blue` · `text-information` 등은 `{colors.blue-500}` / `{colors.blue-600}` 을 가리키고 [src:2], 이 항목은 그것을 `emotion-blue` 로 다시 가리키지 않는다. 다크에서 화면이 쓰는 블루는 emotion 쪽 짝 `{colors.dark-emotion-blue}` 다 [src:3].

### emotion 층 그룹

| 키 | 층 B 키 | 화면 자리 |
| --- | --- | --- |
| `{colors.emotion-blue}` | `blue` | 현재 탭 글자 · 선택 알약 · 구매 버튼 · `+ 관심` · `선택 대여` · 가격 글자 · 워드마크 — 값은 [src:3][src:5], 쓰이는 자리는 렌더 관찰(≈ 보드 판독 · 공개 출처 없음) |
| `{colors.dark-emotion-blue}` | `blue`(darkTheme) | 다크 테마의 같은 자리 [src:3] |
| `{colors.emotion-grey200}` | `grey200` | 홈 구분선·테두리 — 컴포넌트 소스는 `1px solid` 리터럴로 같은 값을 쓴다 [src:3][src:14] |
| `{colors.emotion-grey550}` | `grey550` | 상세 보조 글자(평가 수 · 출판사 · 총 화수). darkTheme 에는 이 키가 없다 [src:3] |
| `{colors.emotion-dim-thumb}` | `dimThumb` | 표지 위 덧칠·외곽선, 다크도 같은 값 [src:3][src:17] |

`{colors.emotion-grey200}` 은 층 A 에 없는 값이고, 가장 가까운 원시 `{colors.neutral-50}` · `{colors.coolgray-50}` · `{colors.darknavy-50}` 셋이 같은 거리로 동률이다 [src:2][src:3]. emotion 테마의 다른 키 — `grey600` · `fillPrimary` · `fillCta`(라이트 모두 `{colors.neutral-900}` 값), `bgBase`(라이트 `{colors.neutral-white}` 값), `darkNavy` `oklch(0.315 0.030 258.3)`, 375 히어로 쪽 번호 배경 `fillCarouselNum` `oklch(0.191 0.000 0.0 / 0.2)`, 다이얼로그 배경막 `dimDialog` `oklch(0.000 0.000 0.0 / 0.7)` — 는 토큰 맵 밖에 둔다 [src:3].

**층 사이에서 값이 갈린다.** `1권무`·`무료` 배지의 렌더 바탕(≈, 보드 판독 · 공개 출처 없음)은 층 A `{colors.darknavy-500}` 과 같은 값이고, emotion `darkNavy` 와는 다르다 [src:2][src:3]. emotion 다크 값도 층 A 다크와 같지 않다 — emotion `bgBase` 다크는 층 A `background-neutral-default` 다크(`{colors.neutral-900}`)와 다른 값이다 [src:3][src:2]. 그래서 다크에서 emotion 층에서 가져오는 것은 브랜드 블루 `{colors.dark-emotion-blue}` 하나이고, 바탕·글자·테두리는 층 A 다크 시맨틱으로 칠한다. 블루 밖의 emotion 다크 값(`bgBase` 다크 등)을 층 A 다크 시맨틱과 섞으면 한 화면 안에서 바탕이 두 가지로 갈린다.

### 원시 팔레트 137

12계열 — neutral 15 · coolgray 11 · blue 11 · deepblue 12 · darknavy 11 · red 11 · yellow 11 · green 11 · purple 11 · orange 11 · mint 11 · gold 11 — 이고, 알파를 가진 원시는 없다 [src:2]. 규칙 밖 단계가 넷 있다(`{colors.blue-660}` · `{colors.deepblue-650}` · `{colors.neutral-750}` · `{colors.neutral-850}`) [src:2]. 같은 값을 가진 원시 쌍은 `{colors.neutral-white}` = `{colors.red-25}` 하나뿐이고, 상류 중복을 그대로 두었다 [src:2]. **원시는 테마를 타지 않는다** — 다크 정의는 원시 값을 바꾸지 않고 시맨틱이 가리키는 원시만 바꾼다 [src:2]. 그래서 아래 다크 짝은 `dark-` 팔레트가 아니라 접두 없는 원시를 가리킨다.

렌더에서 원시와 같은 값이 나온 자리는 다음과 같다(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음 — 값 일치일 뿐 토큰 경유가 아니다): `{colors.neutral-400}` 보조 글자(홈 1440 최다) · `{colors.neutral-900}` 기본 글자 · `{colors.red-500}` 별점·할인 배지 · `{colors.neutral-300}` 보조 글자 · `{colors.neutral-50}` 검색창·바로가기 원 · `{colors.darknavy-500}` 배지 · `{colors.mint-500}` `UP` 배지 · `{colors.neutral-100}` 테두리 · `{colors.neutral-25}` 상세 정보 박스 · `{colors.coolgray-200}` `보기` 버튼 테두리 · `{colors.coolgray-50}` 회차 행 구분선.

층 A·emotion 어디에도 없는 렌더 색도 있다(≈, 보드 판독 · 공개 출처 없음): 비선택 회차 탭 `oklch(0.967 0.000 0.0)`, 체크박스 테두리 `oklch(0.795 0.009 264.5)`, 정보 칩의 바탕·글자 여섯 색(`연재` 글자 · `이벤트` 바탕·글자 · `리다무` 바탕 · `추천` 바탕·글자 — `## Components` 의 `info-chip`. `독점` 칩 바탕·글자는 `{colors.neutral-100}` / `{colors.emotion-grey550}` 값이라 여기 들지 않는다), 히어로 칩의 반투명 흰 바탕과 반투명 검정 글자, 맨 위로 버튼의 반투명 흰 바탕. 빈도 1의 배너 배경 40여 개는 작품별 배너 색이라 토큰이 아니다. 상세 화면 코드에는 배경 상수 `oklch(0.628 0.191 27.4)` 가 있고 다크면 테마의 빨강으로 바뀐다 [src:22]. 메타 `msapplication-TileColor` 는 목록 HTML 에서 `{colors.emotion-blue}` 값, 상세 HTML 에서 흰색이고, `theme-color` 는 흰색이다 [src:1][src:10].

**옛 층의 색.** 상세 화면만 불러오는 레거시 CSS 에 옛 이름 변수가 남아 있다. 옛 대표색 `--dodgerblue_50` `oklch(0.628 0.164 249.6)` 이 회차 리스트의 파란 버튼과 `리다무` 칩 글자에 쓰이고, `--lightsteelblue_20` `oklch(0.942 0.017 248.0)` 이 `연재` 칩 바탕이다 [src:27][src:29]. 옛 팔레트 111키는 지금도 emotion 번들 안 객체로 실려 있다 [src:3][src:30]. 레거시 hover 블루 `oklch(0.609 0.200 254.9)` 는 상세 레거시 CSS 에만 있다 [src:26].

### 시맨틱 122쌍 — 라이트 / 다크

이름 집합은 라이트·다크가 같다(122 = 122). 참조 형태는 라이트 `var()` 120 · color-mix 2, 다크 `var()` 119 · color-mix 2 · 리터럴 1 이다 [src:2]. color-mix 두 토큰은 `var()` 폴백을 먼저 정의한 뒤 `@supports (color:color-mix(in lab, red, red))` 안에서 덮는다 [src:2]. 다크 경향은 일정하다 — 강조 채움·글자는 라이트 500 → 다크 600, 연한 50 단계 채움은 다크 800 으로 가고, `surface-general-blue-600` · `icon-general-blue-600` 만 라이트 600 ↔ 다크 500 을 맞바꾼다 [src:2].

아래 표는 frontmatter 참조 행과 **같은 대응의 두 벌**이다. 단일 원시를 가리키는 역할(라이트 120 · 다크 119)은 frontmatter 에도 `text-primary: "{colors.neutral-900}"` / `dark-text-primary: "{colors.neutral-50}"` 꼴로 실려 있고, color-mix 둘(`surface-thumbnail-blur` · `icon-disabled`)과 다크 리터럴 하나(`surface-disabled` 다크)는 이 표에만 있다. 다크 열은 발행된 다크 짝이지만 웹에서 켜지는 경로는 확인되지 않았다.

**background · surface**

| 역할 | 라이트 | 다크 |
| --- | --- | --- |
| `background-neutral-default` | `{colors.neutral-white}` | `{colors.neutral-900}` |
| `background-neutral-subtle` | `{colors.neutral-50}` | `{colors.neutral-900}` |
| `surface-elevated` | `{colors.neutral-white}` | `{colors.neutral-800}` |
| `surface-disabled` | `{colors.neutral-50}` | 리터럴 `oklch(0.431 0.000 0.0)` — `{colors.neutral-600}` 과 같은 값이지만 참조가 아니다 |
| `surface-thumbnail-blur` | color-mix `{colors.neutral-50}` 60% → 투명 = `oklch(0.970 0.000 0.0 / 0.6)` | color-mix `{colors.coolgray-800}` 60% → 투명 = `oklch(0.266 0.008 240.2 / 0.6)` |
| `surface-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` |
| `surface-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` |
| `surface-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` |
| `surface-danger-50` | `{colors.red-50}` | `{colors.red-800}` |
| `surface-danger-300` | `{colors.red-300}` | `{colors.red-700}` |
| `surface-danger-400` | `{colors.red-400}` | `{colors.red-500}` |
| `surface-danger-500` | `{colors.red-500}` | `{colors.red-600}` |
| `surface-danger-600` | `{colors.red-600}` | `{colors.red-500}` |
| `surface-warning-50` | `{colors.orange-50}` | `{colors.orange-800}` |
| `surface-warning-300` | `{colors.orange-300}` | `{colors.orange-700}` |
| `surface-warning-500` | `{colors.orange-500}` | `{colors.orange-600}` |
| `surface-success-50` | `{colors.green-50}` | `{colors.green-800}` |
| `surface-success-300` | `{colors.green-300}` | `{colors.green-700}` |
| `surface-success-500` | `{colors.green-500}` | `{colors.green-600}` |

**surface-general**

| 역할 | 라이트 | 다크 |
| --- | --- | --- |
| `surface-general-white-default` | `{colors.neutral-white}` | `{colors.neutral-900}` |
| `surface-general-white-subtle` | `{colors.neutral-white}` | `{colors.neutral-800}` |
| `surface-general-white-static` | `{colors.neutral-white}` | `{colors.neutral-white}` |
| `surface-general-gray-25` | `{colors.neutral-25}` | `{colors.neutral-850}` |
| `surface-general-gray-50` | `{colors.neutral-50}` | `{colors.neutral-800}` |
| `surface-general-gray-100` | `{colors.neutral-100}` | `{colors.neutral-700}` |
| `surface-general-gray-800` | `{colors.neutral-800}` | `{colors.neutral-50}` |
| `surface-general-gray-900` | `{colors.neutral-900}` | `{colors.neutral-white}` |
| `surface-general-black-static` | `{colors.neutral-black}` | `{colors.neutral-black}` |
| `surface-general-blue-50` | `{colors.blue-50}` | `{colors.blue-800}` |
| `surface-general-blue-100` | `{colors.blue-100}` | `{colors.blue-700}` |
| `surface-general-blue-300` | `{colors.blue-300}` | `{colors.blue-700}` |
| `surface-general-blue-500` | `{colors.blue-500}` | `{colors.blue-600}` |
| `surface-general-blue-600` | `{colors.blue-600}` | `{colors.blue-500}` |
| `surface-general-deepblue-50` | `{colors.deepblue-50}` | `{colors.deepblue-800}` |
| `surface-general-deepblue-300` | `{colors.deepblue-300}` | `{colors.deepblue-700}` |
| `surface-general-deepblue-500` | `{colors.deepblue-500}` | `{colors.deepblue-600}` |
| `surface-general-darknavy-50` | `{colors.darknavy-50}` | `{colors.darknavy-800}` |
| `surface-general-darknavy-300` | `{colors.darknavy-300}` | `{colors.darknavy-700}` |
| `surface-general-darknavy-500` | `{colors.darknavy-500}` | `{colors.darknavy-600}` |
| `surface-general-red-50` | `{colors.red-50}` | `{colors.red-800}` |
| `surface-general-red-300` | `{colors.red-300}` | `{colors.red-700}` |
| `surface-general-red-500` | `{colors.red-500}` | `{colors.red-600}` |
| `surface-general-yellow-50` | `{colors.yellow-50}` | `{colors.yellow-800}` |
| `surface-general-yellow-300` | `{colors.yellow-300}` | `{colors.yellow-700}` |
| `surface-general-yellow-500` | `{colors.yellow-500}` | `{colors.yellow-600}` |
| `surface-general-green-50` | `{colors.green-50}` | `{colors.green-800}` |
| `surface-general-green-300` | `{colors.green-300}` | `{colors.green-700}` |
| `surface-general-green-500` | `{colors.green-500}` | `{colors.green-600}` |
| `surface-general-purple-50` | `{colors.purple-50}` | `{colors.purple-800}` |
| `surface-general-purple-300` | `{colors.purple-300}` | `{colors.purple-700}` |
| `surface-general-purple-500` | `{colors.purple-500}` | `{colors.purple-600}` |
| `surface-general-orange-50` | `{colors.orange-50}` | `{colors.orange-800}` |
| `surface-general-orange-300` | `{colors.orange-300}` | `{colors.orange-700}` |
| `surface-general-orange-500` | `{colors.orange-500}` | `{colors.orange-600}` |
| `surface-general-mint-50` | `{colors.mint-50}` | `{colors.mint-800}` |
| `surface-general-mint-300` | `{colors.mint-300}` | `{colors.mint-700}` |
| `surface-general-mint-500` | `{colors.mint-500}` | `{colors.mint-600}` |
| `surface-general-gold-50` | `{colors.gold-50}` | `{colors.gold-800}` |
| `surface-general-gold-300` | `{colors.gold-300}` | `{colors.gold-700}` |
| `surface-general-gold-500` | `{colors.gold-500}` | `{colors.gold-600}` |

**border**

| 역할 | 라이트 | 다크 |
| --- | --- | --- |
| `border-default` | `{colors.neutral-100}` | `{colors.neutral-700}` |
| `border-inverse` | `{colors.neutral-700}` | `{colors.neutral-100}` |
| `border-strong` | `{colors.neutral-200}` | `{colors.neutral-600}` |
| `border-disabled` | `{colors.neutral-50}` | `{colors.neutral-700}` |
| `border-divider-default` | `{colors.neutral-50}` | `{colors.neutral-750}` |
| `border-divider-strong` | `{colors.neutral-100}` | `{colors.neutral-600}` |
| `border-danger` | `{colors.red-500}` | `{colors.red-600}` |
| `border-warning` | `{colors.orange-500}` | `{colors.orange-600}` |
| `border-success` | `{colors.green-500}` | `{colors.green-600}` |
| `border-information` | `{colors.blue-500}` | `{colors.blue-600}` |
| `border-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` |
| `border-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` |
| `border-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` |

**text**

| 역할 | 라이트 | 다크 |
| --- | --- | --- |
| `text-primary` | `{colors.neutral-900}` | `{colors.neutral-50}` |
| `text-primary-static` | `{colors.neutral-900}` | `{colors.neutral-900}` |
| `text-inverse` | `{colors.neutral-50}` | `{colors.neutral-900}` |
| `text-inverse-static` | `{colors.neutral-50}` | `{colors.neutral-50}` |
| `text-secondary` | `{colors.neutral-400}` | `{colors.neutral-500}` |
| `text-tertiary` | `{colors.neutral-300}` | `{colors.neutral-600}` |
| `text-disabled` | `{colors.neutral-200}` | `{colors.neutral-700}` |
| `text-rating` | `{colors.red-500}` | `{colors.red-600}` |
| `text-danger` | `{colors.red-500}` | `{colors.red-600}` |
| `text-warning` | `{colors.orange-500}` | `{colors.orange-600}` |
| `text-success` | `{colors.green-500}` | `{colors.green-600}` |
| `text-information` | `{colors.blue-500}` | `{colors.blue-600}` |
| `text-general-deepblue-650` | `{colors.deepblue-650}` | `{colors.deepblue-300}` |
| `text-general-blue-660` | `{colors.blue-660}` | `{colors.blue-300}` |
| `text-general-red-400` | `{colors.red-400}` | `{colors.red-500}` |
| `text-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` |
| `text-selected-white` | `{colors.neutral-50}` | `{colors.neutral-600}` |
| `text-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` |

**icon**

| 역할 | 라이트 | 다크 |
| --- | --- | --- |
| `icon-primary` | `{colors.neutral-900}` | `{colors.neutral-50}` |
| `icon-inverse` | `{colors.neutral-50}` | `{colors.neutral-900}` |
| `icon-inverse-static` | `{colors.neutral-50}` | `{colors.neutral-50}` |
| `icon-secondary` | `{colors.neutral-400}` | `{colors.neutral-500}` |
| `icon-tertiary` | `{colors.neutral-200}` | `{colors.neutral-700}` |
| `icon-disabled` | color-mix `{colors.neutral-200}` 50% → 투명 = `oklch(0.845 0.000 0.0 / 0.5)` | color-mix `{colors.neutral-700}` 50% → 투명 = `oklch(0.337 0.000 0.0 / 0.5)` |
| `icon-rating` | `{colors.red-500}` | `{colors.red-600}` |
| `icon-danger` | `{colors.red-500}` | `{colors.red-600}` |
| `icon-warning` | `{colors.orange-500}` | `{colors.orange-600}` |
| `icon-success` | `{colors.green-500}` | `{colors.green-600}` |
| `icon-information` | `{colors.blue-500}` | `{colors.blue-600}` |
| `icon-selected-blue` | `{colors.blue-500}` | `{colors.blue-600}` |
| `icon-selected-white` | `{colors.neutral-white}` | `{colors.neutral-600}` |
| `icon-selected-black` | `{colors.neutral-900}` | `{colors.neutral-50}` |
| `icon-general-white-static` | `{colors.neutral-white}` | `{colors.neutral-white}` |
| `icon-general-general-static` | `{colors.neutral-black}` | `{colors.neutral-black}` |
| `icon-general-gray-50` | `{colors.neutral-50}` | `{colors.neutral-800}` |
| `icon-general-gray-300` | `{colors.neutral-300}` | `{colors.neutral-700}` |
| `icon-general-gray-500` | `{colors.neutral-500}` | `{colors.neutral-600}` |
| `icon-general-gray-300-static` | `{colors.neutral-300}` | `{colors.neutral-300}` |
| `icon-general-blue-500` | `{colors.blue-500}` | `{colors.blue-600}` |
| `icon-general-blue-600` | `{colors.blue-600}` | `{colors.blue-500}` |
| `icon-general-deepblue-500` | `{colors.deepblue-500}` | `{colors.deepblue-600}` |
| `icon-general-darknavy-500` | `{colors.darknavy-500}` | `{colors.darknavy-600}` |
| `icon-general-red-500` | `{colors.red-500}` | `{colors.red-600}` |
| `icon-general-yellow-500` | `{colors.yellow-500}` | `{colors.yellow-600}` |
| `icon-general-green-500` | `{colors.green-500}` | `{colors.green-600}` |
| `icon-general-purple-500` | `{colors.purple-500}` | `{colors.purple-600}` |
| `icon-general-orange-500` | `{colors.orange-500}` | `{colors.orange-600}` |
| `icon-general-mint-500` | `{colors.mint-500}` | `{colors.mint-600}` |
| `icon-general-gold-500` | `{colors.gold-500}` | `{colors.gold-600}` |

계층별 개수는 background 2 · surface 17 · surface-general 41 · border 13 · text 18 · icon 31 이다 [src:2]. `icon-general-general-static` 은 상류 이름을 그대로 옮긴 것이다 [src:2].

## Typography

**패밀리는 Pretendard Variable 하나다.** 발행 글꼴 토큰은 `--ridi-fontFamily-pretendardVariable` 하나이고 [src:2], emotion 테마에는 크기·줄높이·글꼴 정의가 0건이라 타입의 발행처는 층 A 한 곳이다 [src:3]. @font-face 는 Pretendard Variable · JP Variable · Std Variable 서브셋으로, 모두 `font-weight: 300 700`, `font-display: swap`, `woff2-variations` 이고 리디 CDN 에서 받는다 [src:24]. 홈·웹툰 홈의 렌더 스택은 `{fonts.font-sans}` 이고(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음), 상세 화면만 `"Apple SD Gothic Neo"` 와 `"Malgun Gothic"` 사이에 Noto Sans KR 이 더 낀 `{fonts.font-sans-detail}` 이다 [src:10][src:35]. **브랜드 전용 디스플레이 서체는 없다** — 헤더 `RIDI` 는 SVG 이미지이고 [src:1][src:37], 토큰·테마 어디에도 다른 패밀리가 없다 [src:2][src:3]. 그래서 `font-display-src` 는 해당하지 않는다. 리디가 OFL 로 배포하는 리디바탕은 전자책 뷰어용 글꼴이고 웹 UI 에는 쓰이지 않는다 [src:32][src:1].

**크기 16단계, 자간은 크기 × −0.01.** `fontSize-01`…`16` 과 같은 번호의 `letterSpacing-*` 가 짝으로 발행돼 있어 frontmatter 는 이것을 `{typography.scale-01}`…`{typography.scale-16}` 으로 크기와 자간만 싣는다 [src:2]. 7 · 8 · 9 · 11 · 12 · 13 · 14 · 15 · 16 · 18 · 20 · 22 · 24 · 26 · 34 · 42px 이고, 26px 다음이 바로 34px 다 [src:2].

**줄높이 14단계는 번호가 크기와 짝이 아니다.** `lineHeight-01`…`14` 는 아래 값이고, `lineHeight-08` 24px 은 `fontSize-08` 15px 의 짝이 아니며, 크기 15·16 번에 대응하는 줄높이 번호가 없다 [src:2]. 짝을 지어내지 않고 이 표에만 둔다.

| 토큰 | 값 | 토큰 | 값 |
| --- | --- | --- | --- |
| `lineHeight-01` | 8px | `lineHeight-08` | 24px |
| `lineHeight-02` | 10px | `lineHeight-09` | 28px |
| `lineHeight-03` | 12px | `lineHeight-10` | 32px |
| `lineHeight-04` | 16px | `lineHeight-11` | 36px |
| `lineHeight-05` | 18px | `lineHeight-12` | 38px |
| `lineHeight-06` | 20px | `lineHeight-13` | 46px |
| `lineHeight-07` | 22px | `lineHeight-14` | 56px |

**굵기는 넷이다** — `regular` 400 · `medium` 500 · `semibold` 600 · `bold` 700 [src:2].

**합성 역할 9개가 네 값을 모두 갖는다.** 층 A 의 `--text-*` 역할은 크기·줄높이·자간·굵기를 묶은 것이고, frontmatter 스타일 이름은 상류 이름 그대로다 [src:2].

| 스타일 | 크기 / 줄높이 / 굵기 | 상류 참조 |
| --- | --- | --- |
| `{typography.body-LSemibold}` | 16 / 24 / 600 | `fontSize-09` · `lineHeight-08` · `semibold` |
| `{typography.body-mBold}` | 15 / 22 / 700 | `fontSize-08` · `lineHeight-07` |
| `{typography.body-mSemibold}` | 15 / 22 / 600 | `fontSize-08` · `lineHeight-07` |
| `{typography.body-mMedium}` | 15 / 22 / 500 | `fontSize-08` · `lineHeight-07` |
| `{typography.body-sSemibold}` | 14 / 22 / 600 | `fontSize-07` · `lineHeight-07` |
| `{typography.body-sRegular}` | 14 / 22 / 400 | `fontSize-07` · `lineHeight-07` |
| `{typography.body-xsSemibold}` | 13 / 20 / 600 | `fontSize-06` · `lineHeight-06` |
| `{typography.body-xsRegular}` | 13 / 20 / 400 | `fontSize-06` · `lineHeight-06` |
| `{typography.caption-mMedium}` | 12 / 18 / 500 | `fontSize-05` · `lineHeight-05` |

`--text-body-LBold` 는 크기 16px 만 있고 유틸 클래스가 없어 스타일로 싣지 않는다 [src:2]. 이 합성 이름들도 수집 화면에서는 0건이다(≈ 보드 판독 · 공개 출처 없음).

**화면이 실제로 쓰는 스타일**(렌더 관찰 ≈, 보드 판독 · 공개 출처 없음). 상속 기본값은 HTML 인라인 전역 규칙 — `line-height:normal` · `letter-spacing:-0.03em` · `font-size:14px` — 이다 [src:1]. 크기는 거의 전부 위 16값 안이지만(홈 1440 1140요소 중 1138), 줄높이는 토큰 밖 값(17 · 19 · 21 · 18.4 · 11 · 26px 등)이 많고 굵기 900 도 쓴다.

| 자리 | 1440 | 375 |
| --- | --- | --- |
| 히어로 제목 | ≈ 22 / 32 / 900 | ≈ 20 / 28 / 900 |
| 섹션 제목 h2 | ≈ 22 / 26 / 700 | ≈ 18 / 22 / 700 |
| 카드 제목 | ≈ 16 / 19 / 500 | ≈ 15 / 18 / 500 |
| 작가 줄 | ≈ 14 / 17 / 400 | ≈ 13 / 16 / 400 |
| 별점 | ≈ 13 / 16 | ≈ 12 / 14 |
| 상세 제목 h1 | ≈ 32 / 38 / 700 | (상세는 375 에서 접히지 않음) |
| 구매 버튼 | ≈ 18 / 22 / 600 | — |

1440 → 375 에서 줄어드는 폭은 1·2·4px 로 일정하지 않다. 도서 카드 제목은 코드에 15px / 500 / −0.01em / 18px 로 적혀 있으나 [src:17] 1440 렌더는 위처럼 16 / 19 / 500 이다(≈). 굵기 900 은 토큰 밖이고 @font-face 범위가 300–700 이라 [src:24], 실제로 몇으로 그려지는지는 확인되지 않았다.

## Spacing

**간격은 `--spacing-ds-*` 13단계이고, 이름의 숫자 ÷ 25 = px 다.** `{spacing.ds-50}` 2px 부터 `{spacing.ds-1000}` 40px 까지이고 다크 재정의는 없다 [src:2]. 4px 배수가 뼈대지만 2 · 6 · 10 · 30px 이 끼어 있고 800 단계는 없다(`{spacing.ds-750}` 30px 다음이 `{spacing.ds-900}` 36px) [src:2].

**컨테이너는 1170px 이다.** `max-width:1170px` · 좌우 패딩 30px(`{spacing.ds-750}` 과 같은 값) · 가운데 정렬이고, 1440 에서 콘텐츠 폭은 1110px 이다. `DesktopSmall`(767px) 이하에서 좌우 패딩이 16px(`{spacing.ds-400}` 과 같은 값)로 줄어든다 [src:20][src:16]. 캐러셀 간격은 상수 `TABLET_GAP` 9 · `MOBILE_GAP` 8 이고 렌더 gap 도 같다 [src:16].

화면 간격 중 값이 토큰과 맞는 것은 gap 4px(`{spacing.ds-100}`), 컨테이너 패딩, 왼쪽 24px(`{spacing.ds-600}`) 정도이고, 토큰을 거쳤는지는 확인되지 않았다(≈, 보드 판독 · 공개 출처 없음). 단계 밖 값도 많다 — 장르 알약 여백 `7px 10px 8px` [src:15], 3px, `17px 12px`, 계산 소수 패딩(≈).

## Rounded

**발행된 반경은 셋이다** — `{rounded.radius-50}` 2px · `{rounded.radius-100}` 4px · `{rounded.radius-full}` 9999px [src:2]. 키는 숫자만 남기면 YAML 이 정수 키로 읽으므로 `radius-` 접두를 남겼다.

화면의 지배적인 반경은 4px 로, 표지·카드에 반복되고 `{rounded.radius-100}` 과 같은 값이다 [src:17]. 그 밖의 반경은 토큰 맵에 넣지 않고 `## Components` 의 각 스펙과 frontmatter `components:` 에 단위 붙은 값으로 둔다.

| 반경 | 자리 | 근거 |
| --- | --- | --- |
| 2px | 상세 정보 칩(`{rounded.radius-50}` 과 같은 값) | ≈ 보드 판독 · 공개 출처 없음 |
| 4px | 표지 · 카드 · 정보 박스 | [src:17] |
| 6px | 구매 버튼 | [src:10] |
| 8px | 검색창 · 떠 있는 상자 | [src:21] · 검색창 ≈ |
| 20px | 히어로 카드 | [src:16] |
| 29px | 맨 위로 버튼 | [src:14] |
| 30px | `+ 관심` 알약 | [src:10] |
| 99px | 장르 알약(선택·비선택 모두) | [src:15] |
| 999px | 진행 막대 | [src:22] |
| 50% | 캐러셀 화살표 원 | [src:14] |
| `0 4px 0 0` | 표지 좌하단 배지 묶음 | [src:17] |
| `4px 0` | `R ONLY` 배지 | [src:17] |

`{rounded.radius-full}` 과 같은 값의 요소는 렌더 8조합 어디에도 없었다(≈ 보드 판독 · 공개 출처 없음) — 알약은 99px·30px 같은 리터럴로 그린다 [src:15][src:10]. 상세 레거시 CSS 는 3px·4px 가 많다 [src:25].

## Elevation & Depth

**브랜드가 이름 붙인 그림자 토큰은 0개다.** 층 A 에는 클래스마다 값을 박은 Tailwind 임의값 그림자 6개가 있을 뿐 이름 붙은 그림자가 없고 [src:2], emotion 테마에도 없다 [src:3]. 그래서 frontmatter `elevation:` 맵에는 컴포넌트 코드가 값을 박아 둔 그림자 셋을 관찰값으로 싣는다(브랜드가 붙인 이름이 없어 키는 쓰이는 자리로 지었다) — 캐러셀 화살표 원 `carousel-arrow` [src:14], 1440 에서만 뜨는 상자 `floating-box`(테두리 `{colors.emotion-grey200}` · 반경 8px) [src:21], 상세 옛 층 `rui_` 버튼 `legacy-button` [src:25]. 히어로 작은 칩의 `0 1px 1px 0` 검정 15% 그림자는 출처 없는 보드 판독이라 맵에 싣지 않는다(≈ 보드 판독 · 공개 출처 없음). 구분은 그림자보다 `{colors.emotion-grey200}` · `{colors.neutral-100}` 의 얇은 선과 `{colors.neutral-50}` 면으로 한다(렌더 관찰 ≈). 렌더 테두리 두께가 소스의 `1px` 이 아니라 `0.888889px` 로 나오는데 원인은 확인되지 않았다(≈).

```text
filters (레거시 키 객체 — 그림자가 아니라 drop-shadow 필터):
  logoFilter         drop-shadow(0 0 1px oklch(0.000 0.000 0.0 / 0.3))   [src:3]
  logoFilter2        drop-shadow(0 1px 1px oklch(0.000 0.000 0.0 / 0.2)) [src:3]
```

**높이는 그림자보다 쌓임 순서로 표현한다.** emotion 번들의 `ZIndexLayer` 가 그 체계다 [src:3].

```text
ZIndexLayer                                                  [src:3]
  LEVEL_TOASTMESSAGE   10000
  LEVEL_MODAL           9000
  LEVEL_OVERLAY         8000   (하단 고정 구매바가 이 층)      [src:18]
  LEVEL_HEADER          7000
  LEVEL_TOOLTIP         6000
  LEVEL_DROPDOWN        5000
  LEVEL_BASE               0
  LEVEL_BELOW             -1
```

**모션 값 토큰도 0개다.** 관찰된 지속은 0.1 · 0.2 · 0.3 · 0.4s, 이징은 `ease` · `ease-in-out` · `ease-out` 이다(≈, 보드 판독 · 공개 출처 없음). 이름 붙은 모션 변수는 레거시 스피너의 `--animation-duration: .7s` 하나다 [src:28].

```text
motion (번들 관측 — 모션 토큰 파일은 없다):
  carousel-arrow     opacity, color, pointer-events 0.2s ease                 [src:14]
  genre-pill         all 0.2s ease-in-out, hover opacity 0.4                  [src:15]
  back-to-top        opacity, pointer-events, transform 0.4s ease             [src:14]
  infinite-drag      transform 0.2s cubic-bezier(0, 0, 0.31, 1) (인라인)      [src:20]
  banner-carousel    ANIMATION_DURATION 모바일 500 · 태블릿 300 · 데스크톱 800  [src:16]
                     ANIMATION_DELAY 4000 · DESKTOP_ANIMATION_DELAY 6000
                     TEXT_MOTION_DURATION 400 · TEXT_MOTION_OFFSET 30
                     (단위 표기 없음 — ms 로 보인다)
  mobile-text        모바일 보기에서만 opacity transition, ease-in-out        [src:36]
  legacy-spinner     --animation-duration .7s                                 [src:28]
```

`prefers-reduced-motion` 은 수집한 HTML 5 · JS 71 · CSS 14 에서 0건이었다(≈, 보드 판독 · 공개 출처 없음). 배너 캐러셀에는 자동 넘김 지연 상수 4000 · 6000(단위 미표기)이 있으므로 [src:16], 움직임 줄이기 대응은 소비자가 채워야 한다.

## Shapes

리디의 형태는 **작은 사각형 위에 몇 개의 큰 곡면**이다. 표지·카드·정보 박스가 4px 의 얕은 모서리를 공유하고 [src:17], 그 안에서 히어로 카드의 20px [src:16]과 장르 알약의 99px [src:15], `+ 관심` 알약의 30px [src:10] 만 둥글게 튄다. 원은 캐러셀 화살표(50%)와 맨 위로 버튼(29px) 같은 떠 있는 조작 표지에 쓰이고 [src:14], 바로가기 아이콘도 원형이다(≈ 캡처).

표지 배지는 모서리 하나만 둥글린 비대칭 모양이다 — 좌하단 배지 묶음은 `0 4px 0 0`, 좌상단 `R ONLY` 배지는 `4px 0` 으로, 표지 모서리에 붙어 바깥쪽 모서리만 각을 유지한다 [src:17]. 심볼 'R' 도 퍼스펙티브와 비대칭 조형을 쓰고, 워드마크는 "각지고 정돈된 형태"로 다듬었다 [src:7] — 정돈된 기하 위에 비대칭 한 점을 얹는 문법이 로고와 배지에 같이 있다.

선은 가늘고 연하다. 1px 회색 선과 연회색 면이 구분을 맡고, 테두리를 진하게 하거나 두께를 올려 강조하는 장치는 `+ 관심` 알약의 블루 테두리 정도다 [src:10]. 표지 위에는 `{colors.emotion-dim-thumb}` 1px 외곽선을 안쪽으로 그어(`outline-offset:-1px`) 흰 표지가 흰 바탕에 녹지 않게 한다 [src:17][src:3].

## Components

아래 9종(변형 포함 11개)은 frontmatter `components:` 에도 같은 이름으로 실려 있다. 값은 대부분 화면 실측이고, 코드 정의가 확인된 것은 해당 청크를 `[src:N]` 으로 인용한다. **`≈` 는 공개 URL 이 없는 렌더 관찰값이다** — 계산 스타일을 승인된 디자인 보드에서 옮긴 값은 "보드 판독 · 공개 출처 없음", 캡처 이미지에서 잰 값(`약` 이 붙은 치수)은 추정이다. **맵에 싣는 기준도 이 구분을 따른다.** 코드 정의값과 보드 판독값(계산 스타일을 옮긴 정확값 — `info-chip` 40 × 18, `cover-badge` 23, `carousel-arrow` 40 × 40)은 `components:` 에 싣고, `약` 이 붙은 캡처 추정 치수(`genre-pill-selected` 높이 약 34px, `favorite-pill` 약 64 × 34, `purchase-button` 약 226 × 52)는 본문에만 둔다 — 맵에 들어가면 기계 소비자가 추정값을 발행값과 구별할 수 없다. 색은 층 A 원시나 emotion 그룹을 가리키지만, 화면은 그 토큰 이름이 아니라 리터럴 값으로 칠한다는 점(`## Colors`)을 전제로 읽는다. 치수 단위는 px 다.

### gnb-tab

```text
GNB 대분류 탭                                               ≈ 보드 판독 · 공개 출처 없음
  label        만화 · 웹툰 · 웹소설 · 도서 · 리디샵 · 셀렉트       [src:1]
  default      {colors.neutral-900} · 16 / 18 / 600
  gap          22 · padding 12 0
  375          15 / 20 · padding 13 9 11
  detail       상세 화면에서는 현재 탭 표시 없이 전부 {colors.neutral-400}
  extras       리디샵 옆 빨간 N({colors.red-500} 9px 700) · 셀렉트 옆 외부 링크 아이콘
```

### gnb-tab-current

현재 탭은 글자만 `{colors.emotion-blue}` 로 바꾸고 굵기를 700 으로 올린다(16 / 18 / 700). 밑줄·배경은 없다(≈, 보드 판독 · 공개 출처 없음).

### genre-pill

```text
장르 알약 (비선택)                                           [src:15]
  fill         없음
  label        {colors.neutral-900} (emotion fillPrimary 값) · 600
  radius       99
  1440         16 / 19 · padding 7 10 8
  375          14 / 17 · padding 7 10 6 · 가로 스크롤
  gap          4 ({spacing.ds-100} 과 같은 값)
  hover        opacity 0.4 · transition all 0.2s ease-in-out
```

라벨은 만화 홈 `추천` · `베스트` · `신작` · `BL` · `라노벨` …, 웹툰 홈 `추천` · `로맨스` · `BL` · `판타지/SF` … 다 [src:1][src:8]. hover 는 `(hover:hover) and (pointer:fine)` 쿼리 안에서만 켜진다 [src:3].

### genre-pill-selected

선택 알약은 `{colors.emotion-blue}` 채움에 `{colors.neutral-white}` 700 글자이고, 반경·여백은 비선택과 같다 [src:15]. 높이는 약 34px 이다(≈ 추정 — 캡처에서 잰 값이라 `components:` 에 싣지 않는다).

```tsx
// 재구성 예시 — 선택 알약은 {colors.emotion-blue} 채움 + 흰 글자, 반경 99px
<GenrePill selected>BL</GenrePill>
<GenrePill>라노벨</GenrePill>
```

### hero-card

```text
히어로 배너 카드                                             [src:16]
  size         364 × 414 (1440) · gap 9 · 3장 동시
  radius       20
  media        전면 작품 일러스트
  title        흰 글자 ≈ 22 / 32 / 900, 두 줄
  subtitle     ≈ 16 / 24 / 500
  copyright    ≈ 8 / 11 / 400
  chips        좌상단 묶음 (UP | ↓30% · R ONLY | ↓10% · R ONLY | NEW)     ≈ 보드 판독
               fill oklch(1.000 0.000 0.0 / 0.87) · 글자 oklch(0.000 0.000 0.0 / 0.8)
               13 / 16 / 700 · radius 3 · shadow 0 1px 1px 0 oklch(0.000 0.000 0.0 / 0.15)
  375          1장 + 양옆 이웃 비침 · 약 329–359 × 364 · 제목 ≈ 20 / 28 / 900
               우상단 쪽 번호 2 / 20, 배경 fillCarouselNum oklch(0.191 0.000 0.0 / 0.2)  [src:3]
```

화살표 원(`{component.carousel-arrow}`)은 1440 에서 컨테이너 바깥으로 걸쳐 놓인다(≈ 캡처).

### book-card

```text
도서 카드                                                   [src:17]
  cover        반경 4 ({rounded.radius-100} 과 같은 값) · 이미지 폭 767 초과 180 / 이하 78
  overlay      outline 1px solid {colors.emotion-dim-thumb} · outline-offset -1px
               background {colors.emotion-dim-thumb}                              [src:3]
  title        ≈ 16 / 19 / 500, 최대 2줄 (코드값 15 / 500 / -0.01em / 18)
  author       ≈ 14 / 17 / 400 {colors.neutral-400}
  rating       빨간 별 + 점수 + (평가 수) ≈ 13 / 16 · 점수 {colors.red-500} · 평가 수 {colors.neutral-400}
  section h2   ≈ 22 / 26 / 700
  1440 / 375   한 줄 6장 (약 180) / 약 2.3장 가로 스크롤 (약 130)                 ≈ 추정
```

### cover-badge

```text
표지 배지                                                    [src:17]
  group        표지 좌하단 ul · radius 0 4px 0 0
  item         min-width 23 · height 23 · 흰 글자 {colors.neutral-white} 11px 700 · 자간 -0.02em
  fill         서버 데이터 색 — 관찰된 대응:
                 10%   {colors.red-500}
                 1권무 {colors.darknavy-500}
                 대여  {colors.neutral-400}
                 UP    {colors.mint-500}
R ONLY 배지
  position     좌상단 · radius 4px 0
  fill         검정 opacity 0.7 바탕 + 흰 SVG 로고
  size         767 초과 61 × 30 / 이하 47 × 24
```

### purchase-button

```text
구매 버튼                                                    [src:10]
  fill         {colors.emotion-blue}
  label        {colors.neutral-white} · ≈ 18 / 22 / 600 (크기는 {typography.scale-10} 과 같은 값)
  radius       6
  size         약 226 × 52 (≈ 추정 · components 맵에는 싣지 않음)
  layout       만화 상세: 전권 대여 · 전권 할인 소장 두 개, 간격 약 8 / 웹툰 상세: 첫화보기 하나
  contrast     흰 글자 / 블루 채움 ≈ 2.8:1 (보드 판독)
```

흰 글자와 `{colors.emotion-blue}` 의 대비는 약 2.8:1 이고, 18px · 600 은 WCAG 큰 글자 기준 밖이라 4.5:1 에 못 미친다(≈, 보드 판독 · 공개 출처 없음). 브랜드의 관행이지 기준을 채운 조합이 아니다. 레거시 hover 색은 상세 레거시 CSS 에만 있다 [src:26].

```tsx
// 재구성 예시 — 만화 상세의 두 버튼, 각 {colors.emotion-blue} 채움 · 반경 6px
<PurchaseButton>전권 대여</PurchaseButton>
<PurchaseButton>전권 할인 소장</PurchaseButton>
```

### favorite-pill

`+ 관심` 알약은 `{colors.neutral-white}` 바탕에 `{colors.emotion-blue}` 테두리·글자, 반경 30px, 14px 500 이다 [src:10]. 크기는 약 64 × 34 다(≈ 추정 — 캡처에서 잰 값이라 `components:` 에 싣지 않는다).

### info-chip

```text
상세 정보 라벨 칩                                             ≈ 보드 판독 · 공개 출처 없음
  size         40 × 18 · 11 / 13 / 700
  radius       2 ({rounded.radius-50} 과 같은 값)
  variants     연재    바탕 oklch(0.942 0.017 248.0) (레거시 --lightsteelblue_20 [src:27])
                       글자 ≈ oklch(0.601 0.038 261.9)
               이벤트  바탕 ≈ oklch(0.913 0.019 295.8) · 글자 ≈ oklch(0.517 0.129 283.6)
               독점    바탕 {colors.neutral-100} · 글자 {colors.emotion-grey550}
               리다무  바탕 ≈ oklch(0.967 0.016 239.1)
                       글자 oklch(0.628 0.164 249.6) (레거시 --dodgerblue_50 [src:29])
               추천    바탕 ≈ oklch(0.948 0.016 262.8) · 글자 ≈ oklch(0.504 0.013 252.2)
  divider      칩 행 사이 {colors.neutral-100}
```

`리다무` 칩 옆에는 뜻풀이 `1일마다 1편 기다리면 무료` 가 같은 행에 붙는다 [src:9].

### carousel-arrow

```text
캐러셀 화살표 원                                              [src:14]
  size         40 × 40 · radius 50%
  fill         {colors.neutral-white}
  border       1px solid {colors.emotion-grey200}                                 [src:3]
  shadow       2px 4px 8px 0 oklch(0.000 0.000 0.0 / 0.06)
  transition   opacity, color, pointer-events 0.2s ease
```

### screen-parts-observed

맵에 싣지 않은 화면 부품이다(≈, 렌더 관찰 · 공개 출처 없음 — 출처가 있는 값만 `[src:N]`).

- **검색창** — `{colors.neutral-50}` 바탕, 약 260 × 40, 반경 8px, 돋보기 `{colors.neutral-400}`, 입력 전 문구 없음.
- **바로가기 원형 아이콘** — 지름 70px(375 에서 56px), `{colors.neutral-50}` 바탕, 라벨 13px 500, 1440 에서 8개 가운데 정렬.
- **랭킹 리스트** — 표지 80 × 116 + 순위 숫자 18 / 21 / 500 + 제목·작가·별점, 3열 × 3행.
- **정보 박스** — `{colors.neutral-25}` 바탕, `{colors.emotion-grey200}` 테두리, 반경 4px, 2열 라벨(굵은 검정)·값(`{colors.neutral-400}`, 미지원은 `{colors.neutral-200}`). ISBN · UCI · 지원 환경(앱 · 웹 · PC뷰어 · PAPER)이 여기 나온다 [src:10].
- **가격 표(만화 상세)** — `소장` · `단권` · `전권` · `정가` · `판매가`, 할인율·판매가는 블루, 정가는 검정 [src:10].
- **맨 위로 버튼** — 우하단 고정, 약 58 × 58, 반경 29px, 반투명 흰 바탕 `oklch(1.000 0.000 0.0 / 0.9)`, 얇은 `{colors.neutral-100}` 값의 테두리(emotion `grey300`) [src:14].
- **상세 사이드 베스트 목록** — 순위 숫자 `{colors.red-500}` 700, 제목 14 / 20 `{colors.emotion-grey550}` 말줄임.
- **하단 고정 구매바** — 코드에만 있다: `position:fixed; bottom:0`, `LEVEL_OVERLAY`(8000), 패딩 `10px 10px calc(10px + var(--safe-area-inset-bottom,0px))`, 위쪽 1px `grey300` 선, 흰 바탕, `belowType("desktop")` 일 때만 `display:flex`. 라벨은 `소장하기` · `대여하기` · `캐시백 구매하기` · `바로 보기` · `첫화보기` · `이어보기` 다 [src:18]. 렌더 캡처에는 보이지 않았고 기준 폭은 확인되지 않았다.

### legacy-episode-list

웹툰 상세의 회차 리스트는 위 emotion 컴포넌트보다 오래된 `rui_` 클래스 층이다. 한 DOM 안에 `fig-` · `book-detail-direct-` · `rui_` 접두가 섞인다(≈). 맵에 싣지 않는다.

```text
회차 리스트 (옛 층)                                           ≈ 보드 판독 · 공개 출처 없음 (변수 출처만 [src:N])
  tabs         위 2px 선 {colors.neutral-500} 값
               선택 대여하기   흰 바탕 · 굵게
               비선택 소장하기 바탕 ≈ oklch(0.967 0.000 0.0) (토큰·레거시 변수 어디에도 없음) · 경계 {colors.neutral-200} 값
  row          체크박스 테두리 ≈ oklch(0.795 0.009 264.5)
                 inset 0 1px 0 0 oklch(0.922 0.000 0.0) (레거시 --gray_10)          [src:29]
               썸네일 약 40 × 60 · radius 4
               무료 배지 {colors.darknavy-500} 값
               제목 13 / 16 / 700 {colors.neutral-black} 값 · 보조줄 12px {colors.coolgray-400} 값
               보기 버튼 rui_button_white_30 · 테두리 {colors.coolgray-200} 값 · radius 3
                 shadow 0 1px 1px 0 oklch(0.871 0.007 247.9 / 0.3)                [src:25]
  divider      {colors.coolgray-50} 값 (레거시 --slategray_5 와도 같다)              [src:29]
  toolbar      전체 선택 · ↑↓ 신간부터 · 카트(테두리 {colors.coolgray-200} 값, radius 3)
               총 0화 0원 (금액 {colors.emotion-blue} 값) · 선택 대여 ({colors.emotion-blue} 값 채움)
  blue button  rui_button_blue_40 · 바탕 oklch(0.628 0.164 249.6) (레거시 --dodgerblue_50)  [src:27]
  active link  a.active 글자 레거시 --gray_80                                     [src:29]
```

## Do's and Don'ts

**Do** — 블루는 위치·선택·구매 세 자리에만 쓴다. 현재 탭 글자, 선택 알약 채움, 구매 버튼·`+ 관심` 이 `{colors.emotion-blue}` 이고(자리는 렌더 관찰 ≈, 보드 판독 · 공개 출처 없음), 나머지 화면은 `{colors.neutral-900}` · `{colors.neutral-400}` 회색 글자와 흰 바탕으로 짠다 [src:3][src:15][src:10].

**Do** — 대표색이 필요하면 `{colors.emotion-blue}`(`primary`)를 쓴다. 공개 글의 최종 리디 블루이자 화면이 칠하는 값이다 [src:5][src:3]. 층 A 의 브랜드 블루 역할을 쓸 때는 그것이 `{colors.blue-500}` 을 가리키고 [src:2] 그 값은 화면에 나오지 않는다(≈ 보드 판독 · 공개 출처 없음)는 점을 알고 쓴다.

**Do** — 표지가 주인공이게 둔다. 표지는 `{rounded.radius-100}` 과 같은 4px 모서리에 `{colors.emotion-dim-thumb}` 외곽선을 안쪽으로 긋고, 큰 곡면(20px)은 히어로 카드 하나에만 준다 [src:17][src:16].

**Do** — 흰 글자 / `{colors.emotion-blue}` 채움(약 2.8:1)을 재현할 때는 그것이 본문·큰 글자 기준 모두에 못 미치는 조합이라는 것을 전제로 한다(≈, 보드 판독). 기준 충족이 필요한 제품이면 이 조합을 그대로 옮기지 말고 따로 판단한다.

**Don't** — 층 A `--ridi-*` 이름을 "리디 화면이 쓰는 토큰"처럼 소개하지 않는다. 발행됐지만 [src:2] 수집 화면에서 사용처가 0건인 이름이다(≈ 보드 판독 · 공개 출처 없음).

**Don't** — 다크에서 emotion 층에서 가져오는 것은 브랜드 블루 `{colors.dark-emotion-blue}` 하나뿐이고, 바탕·글자·테두리는 층 A 다크 시맨틱으로 칠한다. emotion `bgBase` 다크 등 블루 밖의 emotion 다크 값을 층 A 다크 시맨틱과 섞지 않는다 — 바탕부터 다른 값이다 [src:3][src:2]. 웹에서 다크가 켜지는 경로도 확인되지 않았다 [src:19].

**Don't** — 구분을 그림자로 하지 않는다. 그림자는 캐러셀 화살표 원과 떠 있는 상자 정도에만 있고, 현재 화면(emotion) 층의 카드·버튼·알약은 그림자 없이 선과 면으로 구분한다 [src:14][src:21]. 히어로 작은 칩의 `0 1px 1px` 그림자(≈ 보드 판독 · 공개 출처 없음)와 상세 회차 리스트의 옛 층 `rui_` 버튼 그림자 [src:25]는 이 규칙의 예외다.

**Don't** — 옛 층 색(`--dodgerblue_50` 등)을 대표색으로 승격하지 않는다. 상세 회차 리스트에 남은 레거시이고, 리뉴얼 뒤의 리디 블루가 아니다 [src:27][src:29][src:5].

**Don't (도메인 경계)** — 차용할 것은 리디의 시각 처리이지 콘텐츠 플랫폼의 서비스 개념이 아니다. `리다무`(기다리면 무료) · `R ONLY` / `리디온리`(독점 작품) · `대여하기` / `소장하기` 이중 구매 구조 · `1권무` · `캐시충전` · `셀렉트` 같은 리디 고유 개념과 그 배지·칩·뜻풀이 카피를 관계없는 제품에 옮기지 않는다 [src:9][src:1][src:17][src:18]. 흰 바탕 위 블루 한 점, 4px 표지 모서리, 알약 필터라는 시각 언어만 가져간다.

## Responsive Behavior

**코드에 브레이크포인트 열거가 있다.** emotion 번들의 `BreakPoint` 는 `MobileSmall` 319 · `MobileDefault` 374 · `DesktopSmall` 767 · `DesktopMedium` 1169 · `DesktopDefault` 1279 · `DesktopLarge` 1439 와 그리드용 `GridSmall` 599 · `GridMedium` 999 · `GridLarge` 1169 다 [src:3]. 다른 청크의 판은 `ExtraSmall` 299 · `Small` 374 · `Mobile` 432 · `Medium` 833 · `Large` 999 · `ExtraLarge` 1279 를 더해 15개다 [src:23]. 캐러셀 모듈의 `MOBILE_BREAKPOINT` 479 는 이 열거와 별도 상수다 [src:16]. 쿼리 도우미는 아래쪽 한정 `max-width:${e}px`, 위쪽 한정 `min-width:${e+1}px` 로 1을 더하므로, 렌더 쿼리는 `(max-width: 767px)` · `(min-width: 768px)` 쌍으로 보인다 [src:3].

아래 표는 `BreakPoint` 9개를 모두 싣는다. 렌더는 1440 · 375 두 폭에서만 했으므로, 그 사이 경계에서 무엇이 바뀌는지는 코드에 적힌 것 말고는 관찰하지 못했다.

| 폭 | 근거 | Key Changes |
| --- | --- | --- |
| ≥ 1440 | `DesktopLarge` 1439 [src:3] | 컨테이너 1170 / 콘텐츠 1110 · 히어로 3장 [src:20][src:16] · 표지 6장 · 랭킹 3열(≈) |
| ≤ 1279 | `DesktopDefault` 1279 [src:3] | 렌더 폭 밖 · 미관찰(≈) |
| ≤ 1169 | `DesktopMedium` · `GridLarge` 1169 [src:3] | 1170 컨테이너가 화면 폭을 넘기 시작하는 경계 |
| ≤ 999 | `GridMedium` 999 [src:3] | 렌더 폭 밖 · 미관찰(≈) |
| ≤ 767 | `DesktopSmall` 767 [src:3] | 컨테이너 패딩 30 → 16 [src:20] · 표지 이미지 180 → 78 · `R ONLY` 배지 61×30 → 47×24 [src:17] |
| ≤ 599 | `GridSmall` 599 [src:3] | 렌더 폭 밖 · 미관찰(≈) |
| ≤ 479 | `MOBILE_BREAKPOINT` [src:16] | 캐러셀 모듈 전용 모바일 판정 상수 — `BreakPoint` 열거와 무관 |
| 375 | 렌더 관찰 ≈ | 아래 표. `MobileDefault` 374 경계 바로 위 폭이다 |
| ≤ 374 | `MobileDefault` 374 [src:3] | 렌더 폭 밖 · 미관찰(≈) |
| ≤ 319 | `MobileSmall` 319 [src:3] | 렌더 폭 밖 · 미관찰(≈) |

**1440 ↔ 375 (홈 · 웹툰 홈, 렌더 관찰 ≈ — 캡처·보드 판독 · 공개 출처 없음)**

| 항목 | 1440 | 375 |
| --- | --- | --- |
| GNB | 1단 `RIDI` · 검색창 260×40 · `로그인 / 회원가입`, 2단 대분류 + `전체 카테고리` · `캐시충전` | `RIDI` + `로그인` 알약, 검색창 별도 줄, 대분류 가로 잘림(오른쪽 흰 그라데이션) + 햄버거 |
| 장르 알약 | 한 줄에 전부, 16/19 | 가로 스크롤, 14/17 [src:15] |
| 히어로 | 3장 동시, 364×414, gap 9 [src:16] | 1장 + 양옆 이웃 비침, 쪽 번호 `2 / 20` |
| 바로가기 원 | 70px × 8, 가운데 정렬 | 56px, 5개 보이고 가로 스크롤 + 화살표 |
| 표지 | 약 180px, 한 줄 6장 | 약 130px, 약 2.3장 가로 스크롤 |
| 랭킹 | 3열 × 3행 | 1열(재확인 안 됨) |
| 섹션 제목 | 22/26/700 | 18/22/700 |

**상세 페이지는 375 에서 접히지 않았다.** 헤더만 `RIDI` + 검색 아이콘 + `로그인` 알약으로 줄고, 본문은 표지 + 정보 열 + 오른쪽 베스트 목록의 데스크톱 배치 그대로 그려져 오른쪽이 잘렸다(≈ 캡처). 레거시 CSS 에 `#ridi_books` 의 `min-width:1170px` 가 있으나 그것이 원인인지는 확인되지 않았다 [src:26]. 코드의 하단 고정 구매바는 `belowType("desktop")` 일 때만 켜지는데 [src:18], 렌더에서는 보이지 않았다. 그래서 모바일 상세 UI 는 관찰하지 못했다.

**터치 타깃.** 모바일 햄버거 44 × 44, 캐러셀 화살표 40 × 40(`{component.carousel-arrow}`), 장르 알약 높이 약 34px 로 44px 미만인 컨트롤이 있다(≈) [src:14]. 이 치수를 빌릴 때는 히트 영역을 패딩으로 보완하는 편이 안전하다. 호버 효과는 `(hover:hover) and (pointer:fine)` 쿼리로 터치 기기에서 끈다 [src:3].

**이미지.** 표지는 폭 옵션(180 / 78)으로 갈아 끼우고 [src:17], 375 의 표지·바로가기·장르 띠는 줄바꿈 대신 가로 스크롤로 넘친다(≈ 캡처).

## Known Gaps

- **웹 다크 경로를 확인하지 못했다.** 층 A 는 다크 짝 122개를 발행하고(그중 단일 원시를 가리키는 119개를 frontmatter 참조 행으로 실었다) emotion 테마도 다크 객체가 있지만, 테마 선택 코드는 앱 안·특정 경로에서만 다크를 고르고 [src:19], 렌더 8조합은 모두 라이트였다(≈ 보드 판독 · 공개 출처 없음). frontmatter 의 `dark-` 행은 발행값이지 웹에서 관찰한 값이 아니다.
- **`--ridi-*` 이름은 수집 화면에서 쓰이지 않는다.** 토큰과 그 유틸 클래스는 발행돼 있지만 [src:2], 그 사용처가 HTML 5 · JS 71 에서 0건이고(≈ 보드 판독 · 공개 출처 없음), 화면은 emotion 리터럴로 칠한다. 프리뷰가 층 A 이름으로 그린 자리는 실제 화면과 갈릴 수 있다.
- **모바일 상세 화면을 관찰하지 못했다.** 375 에서 상세 본문이 접히지 않고 데스크톱 배치로 잘려 그려졌고, 코드의 하단 고정 구매바도 렌더에 나오지 않았다 [src:18][src:26].
- **굵기 900 의 실제 렌더를 모른다.** 히어로 제목이 900 을 지정하지만 Pretendard @font-face 범위가 300–700 이라 [src:24], 실제로 몇으로 그려지는지 확인되지 않았다.
- **움직임 줄이기 대응이 없다.** `prefers-reduced-motion` 이 수집 파일 HTML 5 · JS 71 · CSS 14 에서 0건이었다(≈ 보드 판독 · 공개 출처 없음). 배너 캐러셀의 자동 넘김 [src:16]을 빌리려면 소비자가 채워야 한다.
- **로고 이용 조건을 확인하지 못했다.** 심볼·워드마크 공개 글에 여백·최소 크기·색 변형 규정이 없고, 이용 허락 문구도 찾지 못했다 [src:7]. 게시된 아이콘 변형은 전부 흰 바탕 불투명이라 투명 공식 변형이 없다(≈).

## References

안정 진입점은 ridibooks.com 이다[src:1]. "(해시 번들)" 표시가 붙은 항목은 경로의 빌드 디렉터리와 파일명 해시가 배포마다 바뀐다. 2번은 홈이 불러오는 `--ridi-*` 정의 CSS 로, 3번은 emotion 테마(`blue` 키)·`BreakPoint`·`ZIndexLayer` 를 정의한 JS 청크로 홈 HTML 에서 다시 찾는다.

1. https://ridibooks.com/ — 리디 웹 홈(만화). 메타(`msapplication-TileColor` · `theme-color`)와 인라인 전역 CSS 는 원문 HTML 에만 있고 마크다운 변환 결과에는 안 나온다
2. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/2ethfubrjwnx3.css — (해시 번들) `--ridi-*` 토큰 파일. 운영 빌드 산출물이고 라이선스 고지가 없다. 수집 화면(HTML 5 · JS 71)에서 이 이름과 그 유틸 클래스의 사용처는 확인되지 않았다 — 화면은 emotion 테마의 리터럴 값으로 칠한다
3. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/24q01dois7pyq.js — (해시 번들) emotion 테마 · BreakPoint · ZIndexLayer · 옛 팔레트 객체
4. https://ridicorp.com/2022/03/ridi_brand_renewal/ — 리디 브랜드 리뉴얼 보도자료. 직접 조회는 HTTP 403 이라 웨이백 사본으로 읽힌다
5. https://brunch.co.kr/@rididesign/3 — 리디 디자인팀 글. 리디 블루 선정 과정
6. https://brunch.co.kr/@rididesign/1 — 리디 디자인팀 글. 브랜드 에센스 · 슬로건 · 브랜드 위계
7. https://brunch.co.kr/@rididesign/5 — 리디 디자인팀 글. 심볼 'R' 과 워드마크
8. https://ridibooks.com/webtoon/recommendation — 웹툰 홈
9. https://ridibooks.com/books/4766000001 — 웹툰 상세. 컴포넌트 CSS 는 원문 HTML 의 인라인 emotion 스타일에만 있다
10. https://ridibooks.com/books/845057904 — 만화 e북 상세. 메타와 인라인 emotion CSS(구매 버튼 · 관심 알약 치수)는 원문 HTML 에만 있다
11. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/media/favicon-512x512.1cyy_bycddyab.png — (해시 번들) 사이트 아이콘 512px. 카탈로그 로고 원본
12. https://apps.apple.com/kr/app/id338813698 — App Store 리디 앱 페이지
13. https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/cd/ab/d0/cdabd09d-5c78-d1e3-5799-2a80e59a5f73/AppIcon-0-0-1x_U007emarketing-0-8-0-85-220.png/512x512bb.png — App Store 앱 아이콘(로고 대안, 채택하지 않음)
14. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0d-e8wyl9jo7t.js — (해시 번들) 원형 화살표 · 맨 위로 버튼
15. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0zzvuqqu1yfjb.js — (해시 번들) 장르 알약
16. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/1olus6ddrutne.js — (해시 번들) 배너 캐러셀 상수 · 히어로
17. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/3a_yseolhbvor.js — (해시 번들) 도서 카드 · 배지 · 별점
18. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/0gbp_78gr4iip.js — (해시 번들) 상세 · 하단 고정 구매바
19. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/2vj87jyhia5aa.js — (해시 번들) AppThemeProvider(테마 선택)
20. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/25z1iesmb3nnt.js — (해시 번들) 1170 컨테이너 · 무한 스크롤 드래그 이징
21. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/1uc0h5t-1snq-.js — (해시 번들) 떠 있는 상자 그림자
22. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/34oie16683kj2.js — (해시 번들) 상세 배경 색 상수 · 999px 진행 막대
23. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/07ssoqeqp8vjq.js — (해시 번들) BreakPoint 15개 판
24. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/common/pretendard.css — (해시 번들) Pretendard @font-face
25. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/page_base_renewal.css — (해시 번들) 레거시 CSS
26. https://static.ridicdn.net/books-backend/p/081c5d/books/dist/css/page_detail_renewal.css — (해시 번들) 상세 레거시 CSS
27. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/bookDetail.css — (해시 번들) 상세 레거시 CSS
28. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/modal.css — (해시 번들) 레거시 CSS(스피너)
29. https://static.ridicdn.net/books-backend/p/081c5d/store/dist/base.css — (해시 번들) 레거시 CSS. `--dodgerblue_*` 등 옛 이름 변수
30. https://unpkg.com/@ridi/colors@0.7.1/hex.json — 옛 디자인 시스템 색 패키지(111색)
31. https://github.com/ridi/design-system — 옛 디자인 시스템 저장소. MIT, 아카이브 상태
32. https://ridicorp.com/ridibatang/ — 리디바탕 글꼴 소개. 직접 조회는 HTTP 403 이라 웨이백 사본으로 읽힌다
33. https://ridicorp.com/wp-content/uploads/2022/03/ridi.svg — 회사 사이트 워드마크 SVG
34. https://web.archive.org/web/20211022233111/https://ridi.design/colors/ — 옛 디자인 시스템 문서 사이트(색 페이지)의 웨이백 사본
35. https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400..700&display=swap — 상세 화면이 불러오는 Noto Sans KR
36. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/352t57z-gyyan.js — (해시 번들) 텍스트 모션 상수
37. https://static.ridicdn.net/books-frontend/p/87a0bf/_next/static/chunks/12izop6p_2o-u.js — (해시 번들) 헤더 워드마크 SVG 컴포넌트