/** * DINO FINDER design tokens — 로그인 v2 기준 브랜드·UI 톤 */ :root { /* ── 반투명용 RGB 삼원색 ────────────────────────────────────────────── 알파가 붙은 색은 hex 토큰으로 표현할 수 없다. 그래서 그림자·테두리· 오버레이에 쓰이는 rgba() 가 계속 리터럴로 남아 있었다. 세 숫자만 토큰으로 빼면 rgba(var(--ink-rgb), 0.06) 처럼 쓸 수 있고, 계산된 색은 한 값도 달라지지 않는다. 나중에 다크 테마를 붙일 때 여기 네 줄만 바꾸면 알파가 걸린 색이 전부 따라온다. 값은 아래 hex 토큰과 짝이다: --ink-rgb = #0f172a (--text-dark / --text-heading) --paper-rgb = #ffffff --brand-rgb = #9b7fc7 (--primary-purple) hex 쪽을 바꾸면 여기도 함께 바꿔야 한다. */ --ink-rgb: 15, 23, 42; --paper-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; --brand-rgb: 155, 127, 199; /* Brand purple */ --primary-purple: #9b7fc7; --primary-purple-light: #b8a5d6; --primary-purple-pale: #e8e0f5; --primary-purple-dark: #483d8b; --primary-purple-deep: #5b4e9d; --primary-purple-muted: #7c6aa8; /* Action purple — 흰 글자를 얹는 면 전용. --primary-purple(#9b7fc7)은 흰 글자 대비가 3.36:1 로 WCAG AA(4.5:1)에 미달한다. 따라서 #9b7fc7 은 테두리·아이콘·배경틴트 등 "글자가 없는" 장식에만 쓰고, 버튼·뱃지처럼 흰 글자가 올라가는 면에는 아래 토큰을 쓴다. */ --primary-purple-action: #7c6aa8; /* 흰 글자 4.68:1 — AA 통과 */ --primary-purple-action-hover: #6f5c9c; /* 흰 글자 5.70:1 */ /* Brand gradients (login aside / CTA) */ --brand-aside-gradient: linear-gradient(155deg, #1a1430 0%, #2b2350 42%, #5b4e9d 78%, #7c6aa8 100%); --brand-sidebar-gradient: linear-gradient(175deg, #1a1430 0%, #2b2350 38%, #1f1a36 100%); --brand-cta-gradient: linear-gradient(135deg, #483d8b 0%, #9b7fc7 55%, #7c6aa8 100%); --brand-cta-shadow: 0 4px 14px rgba(91, 78, 157, 0.35); --brand-cta-shadow-hover: 0 8px 22px rgba(91, 78, 157, 0.4); /* Surfaces */ --bg-page: #f8fafc; --bg-main: #f8fafc; --bg-card: #ffffff; --bg-light-purple: #f5f3f7; --bg-elevated: #ffffff; --bg-input: #fafbfc; --bg-subtle: #f1f5f9; /* Text */ --text-primary: #334155; --text-secondary: #64748b; /* 흰 배경 4.76:1 — 통과. 단 --bg-subtle(#f1f5f9) 위에서는 4.34:1 로 미달하므로 회색 바탕에는 --text-body 를 쓴다 */ /* slate 램프에서 secondary 와 primary 사이의 칸. 본문 글자로 60곳에 쓰인다. 흰 배경 7.58:1 — 4.76(secondary) 과 10.35(primary) 사이를 메운다. */ --text-body: #475569; --text-dark: #0f172a; --text-heading: #0f172a; --text-purple: #483d8b; --text-muted: #94a3b8; /* 흰 배경 2.56:1 — 장식·비활성 전용. 본문에 쓰지 않는다 */ --text-on-brand: #ffffff; /* Borders */ --border-light: #e2e8f0; --border-purple: #e8e0f5; --border-accent: #9b7fc7; --border-strong: #cbd5e1; --border-card: rgba(226, 232, 240, 0.9); /* Focus / interaction */ --focus-border: var(--primary-purple); --focus-ring: 0 0 0 4px rgba(var(--brand-rgb), 0.18); /* Shadows — 고도(elevation) 눈금. xs·sm 은 "면을 살짝 띄우는" 얇은 그림자, md 이상은 실제로 떠 있는 요소용. xs / xl / 2xl 은 이미 코드에 흩어져 있던 값을 그대로 눈금으로 삼은 것이다. 기존 sm/md/lg 의 값은 바꾸지 않았다 — 이미 쓰고 있는 곳이 45군데라 값을 조정하면 그쪽이 전부 함께 움직인다. 유색 그림자(브랜드 보라·파랑)와 포커스 링은 고도가 아니라 의미를 나타내므로 이 눈금에 넣지 않는다. --shadow-purple / --focus-ring 을 쓴다. */ --shadow-xs: 0 1px 2px rgba(var(--ink-rgb), 0.04); --shadow-sm: 0 1px 2px rgba(var(--ink-rgb), 0.06); --shadow-md: 0 4px 12px rgba(var(--ink-rgb), 0.08); --shadow-lg: 0 12px 40px rgba(var(--ink-rgb), 0.1); --shadow-xl: 0 20px 48px rgba(var(--ink-rgb), 0.18); --shadow-2xl: 0 24px 56px rgba(var(--ink-rgb), 0.22); --shadow-purple: 0 4px 16px rgba(var(--brand-rgb), 0.12); --shadow-card: 0 0 0 1px rgba(var(--ink-rgb), 0.04), 0 20px 50px -12px rgba(var(--ink-rgb), 0.12), 0 8px 24px -8px rgba(91, 78, 157, 0.1); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Radius (login v2) */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 20px; --radius-pill: 999px; /* ── 타입 스케일 ───────────────────────────────────────────── 5단계로만 쓴다. 인접해서 구별되지 않는 값(13·15·17·19px)과 한글 가독 하한 아래 값(9·10·10.5·11px)을 없애기 위한 기준이다. 아래 --font-* 는 이 스케일을 가리키는 기존 이름(별칭)이다. */ --text-xs: 0.75rem; /* 12px — 라벨·메타·칩. 한글은 이보다 작게 쓰지 않는다 */ --text-sm: 0.875rem; /* 14px — 보조 본문·표 셀 */ --text-md: 1rem; /* 16px — 본문 */ --text-lg: 1.25rem; /* 20px — 소제목 */ --text-xl: 1.5rem; /* 24px — 제목 */ /* Typography (별칭) */ --font-base: 18px; --font-base-app: 16px; --font-display: 1.75rem; --font-section: var(--text-lg); --font-body: var(--text-md); --font-caption: var(--text-sm); --font-small: var(--text-sm); /* 13px → 14px (스케일 밖 값 제거) */ /* 입력의 글자 크기 하한. iOS Safari 는 16px 미만인 input·select·textarea 에 포커스가 가면 페이지를 확대한다. 검색이 주 동작인 앱이라 검색창을 누를 때마다 화면이 튀고 사용자가 직접 축소해야 했다. 타입 스케일과 별개로 입력에는 이 하한을 적용한다. */ --input-font-min: 16px; --leading-tight: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.65; --letter-tight: -0.02em; /* ── 버튼 스케일 ────────────────────────────────────────────── 역할은 3종(primary / secondary / danger). 규격은 아래 토큰으로만 쓴다. radius 는 위 Radius 스케일(sm 8 · md 12 · lg 14 · pill 999)을 재사용. */ --btn-h-sm: 32px; --btn-h: 40px; --btn-h-lg: 48px; --btn-px-sm: var(--space-3); /* 12px */ --btn-px: var(--space-4); /* 16px */ --btn-px-lg: var(--space-5); /* 20px */ --btn-font-sm: 0.75rem; /* 12px — 툴바·칩 */ --btn-font: 0.875rem; /* 14px — 기본 */ --btn-font-lg: 1rem; /* 16px — 모달 확정 */ --btn-weight: 700; --btn-gap: var(--space-2); /* ── 의미 계열 ──────────────────────────────────────────────── 오류·경고·성공·정보를 각각 4단계로 쓴다. 단계 이름은 쓰임이다. *-pale 옅은 배경 *-border 테두리 (기본) 채움·아이콘 *-text pale 배경 위에 얹는 글자 값은 전부 코드에서 이미 가장 많이 쓰이던 것을 골랐다. 새로 만든 색은 없다. 대비는 흰 배경과 같은 계열 pale 배경 양쪽에서 4.5:1 이상을 확인했다 — 예외는 --warning 하나뿐이고 아래에 적어 뒀다. */ /* 오류 — --danger 는 파괴적 동작(삭제) 버튼 면에도 쓴다 (흰 글자 6.54:1) */ --danger-pale: #fef2f2; /* 코드에 20곳. 이전 값 #fdeceb 는 쓰인 곳이 없었다 */ --danger-border: #fecaca; --danger: #b3261e; --danger-hover: #8f1d17; --danger-text: #991b1b; /* pale 위 7.60:1 · 흰 배경 8.31:1 */ /* 경고 */ --warning-pale: #fffbeb; --warning-border: #fde68a; /* 흰 글자 대비가 2.15:1 이다. 아이콘·테두리·채움 전용으로 쓰고 글자가 필요하면 --warning-text 를 쓴다. --text-muted 와 같은 종류의 제약. */ --warning: #f59e0b; --warning-text: #92400e; /* pale 위 6.84:1 · 흰 배경 7.09:1 */ /* 성공 — green 램프 (emerald 와 섞여 있던 것을 이쪽으로 모았다) */ --success-pale: #f0fdf4; --success-border: #bbf7d0; --success: #15803d; /* 흰 글자 5.02:1 */ --success-text: #166534; /* pale 위 6.81:1 · 흰 배경 7.13:1 */ /* 정보 */ --info-pale: #eff6ff; --info-border: #bfdbfe; --info: #1d4ed8; /* 흰 글자 6.70:1 */ --info-text: #1e40af; /* pale 위 8.01:1 · 흰 배경 8.72:1 */ /* 잔여 사용량 칩 — 청록. 다른 의미 계열과 겹치지 않는 "정보성 수치" 표시용. #0891b2(cyan-600)는 칩 배경 위 3.36:1 로 본문 기준에 못 미쳐 한 단계 내렸다. */ --usage-chip-pale: rgba(6, 182, 212, 0.1); --usage-chip-text: #0e7490; /* 칩 배경 위 4.89:1 */ /* Login feature chips — 동일 너비 (가장 긴 라벨 기준) */ --login-feature-chip-width: 17rem; /* 로고: DINO 제외 영역 — 옅은 형광 라임 (글로우 없음) */ --brand-neon: #d4f08a; --brand-neon-bright: #e4f7b8; --brand-neon-glow: transparent; --logo-neon-filter: brightness(0) saturate(100%) invert(94%) sepia(18%) saturate(650%) hue-rotate(34deg) brightness(1.42); /* logo.png: DINO 좌측 흰색 | 우측 형광 (rest가 좌측을 살짝 겹쳐 흰 테두리 잔상 제거) */ --logo-dino-split: 36%; --logo-rest-overlap: 1.4%; /* Layout */ --sidebar-width: 380px; --content-max: 1600px; --z-modal-backdrop: 9999; --z-modal: 10000; --z-tooltip: 10001; /* App aliases (sidebar / CTA) — 전부 "글자가 올라가는 면"이라 action 계열을 가리킨다 */ --app-ui-purple: var(--primary-purple-action); --app-ui-purple-hover: var(--primary-purple-action-hover); --app-ui-purple-border: #6a5891; } /* ═══════════════════════════════════════════════════════════════════ 모션 축소 — 정본 가드 ------------------------------------------------------------------- !important 가 필요한 이유: 이 규칙의 선택자 * 는 명세도 0 이라, .loading-spinner { animation: … } 같은 규칙(0,1,0)에 로드 순서와 무관하게 진다. 실제로 같은 블록이 !important 없이 dino-components.css 에 있었을 때, 모션 축소를 켜도 애니메이션 34개 중 30개(무한 반복 12개 포함)가 그대로 돌아갔다. 접근성 오버라이드는 작성자 스타일을 반드시 이겨야 하는 자리다. duration 을 0 이 아니라 0.01ms 로 두는 이유: 애니메이션을 마지막 프레임까지 즉시 진행시켜 fill-mode: both 로 만든 최종 상태를 유지하고, transitionend·animationend 이벤트도 그대로 발생시킨다(0s 면 발생하지 않을 수 있다). dino-dialog.js 의 토스트 제거가 animationend 에 의존한다. ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } }