/* ========================================================================== 인비랩 디자인 토큰 (단일 진입점) — docs/design/design-system.md 와 함께 관리 규칙: 색·글자·간격·크기·둥글기·그림자 값은 이 파일에서만 정한다. 다른 CSS/HTML/JS 는 var(--…) 로만 쓴다 (scripts/design-system-lint.mjs 가 검사). 브랜드: 2026-09-08 대표 지시로 대표색을 파랑(#2563eb) → 인비남 레드(#BE0909)로 전면 교체. 이전 "파랑 보존" 방침은 폐기됨. 간격·둥글기·그림자·z-index 등 색 이외 토큰은 유지. ========================================================================== */ :root { /* ---- 색: 브랜드 (파랑 → 인비남 레드) ---- */ --color-brand: #BE0909; /* 대표 레드 — 로고 강조, 기본 버튼, 링크 (흰 바닥 6.5:1) */ --color-brand-hover: #8F0404; --color-brand-active: #6E0303; --color-brand-soft: #FDEEED; /* 레드 연한 바닥 (선택됨, 정보 배지) */ --color-brand-line: #F3D3D1; /* ---- 색: 보조 브랜드 (신규) — 인비남 옐로, 강조·하이라이트에만 소량 ---- */ --color-accent: #FFE14D; --color-accent-soft: #FFF8DB; --color-accent-dim: rgba(255, 225, 77, 0.12); /* 검정 바 위 옐로 알약 바닥 (시안 tipbar > b) */ --color-accent-line: #F5DE9B; --color-on-accent: #151515; /* 옐로 위 글자 (14.0:1) */ /* ---- 색: 검정 패널 (신규) — 코치 배너·시상대 1위·리스트 헤더 ---- */ --color-ink: #151515; /* 흰 글자 대비 18.3:1 */ --color-ink-soft: #2A2424; /* 검정 패널 안 구분선 */ --color-on-ink: #FFFFFF; --color-on-ink-muted: #B5ADAC; /* 검정 위 보조 글자 (8.3:1) */ /* ---- 색: 바탕·표면 ---- */ --color-bg: #FAF8F7; /* 로그인 후 화면 바닥 (살짝 따뜻한 회백) */ --color-bg-page: #FFFFFF; /* 공개 페이지(로그인·소개) 바닥 */ --color-surface: #FFFFFF; /* 카드·패널·입력창 */ --color-surface-subtle: #F8F6F5; /* 표 머리, 코드 블록 바닥 */ --color-surface-hover: #FBF7F7; --color-overlay: rgba(21, 21, 21, 0.55); --color-overlay-strong: rgba(0, 0, 0, 0.72); /* 영상 위 시각 배지 바닥 (강의실 시안) */ --color-ink-warm: #3A2F2F; /* 강의실 영상 자리(재생 전) 그라데이션 시작색 (시안) */ /* ---- 색: 글자 ---- */ --color-text: #1A1A1A; /* 본문·제목 */ --color-text-secondary: #57534E; /* 설명 */ --color-text-muted: #6B6663; /* 보조·캡션 */ --color-text-inverse: #FFFFFF; --color-text-link: #BE0909; /* ---- 색: 선 ---- */ --color-border: #E9E3E1; --color-border-strong: #D6CECB; /* ---- 색: 상태 (글자색 / 연한 바닥 / 선) ---- */ --color-success: #0F7A4A; --color-success-soft: #E8F5EF; --color-success-line: #BFE3D4; --color-warning: #A45B18; --color-warning-soft: #FFF7EE; --color-warning-line: #F0D9C2; --color-danger: #C81E1E; --color-danger-soft: #FDEEED; --color-danger-line: #F3D3D1; --color-danger-text: #B91C1C; /* 글자용 */ --color-info: #1F3A5F; --color-info-soft: #EEF2F7; --color-info-line: #C9D5E3; --color-focus-ring: rgba(190, 9, 9, 0.35); /* ---- 색: '같은 원본' 묶음 상자 (신규) ---- */ --color-group-bg: #FFF7EE; --color-group-line: #F0D9C2; --color-group-text: #A45B18; /* 그룹 바닥 대비 4.8:1 */ /* ---- 색: 썸네일 위 오버레이 (신규) — lint의 하드코딩 금지 규칙 대응 ---- */ --color-scrim-strong: rgba(0, 0, 0, 0.82); /* 썸네일 하단 그라데이션 끝 */ --color-scrim: rgba(0, 0, 0, 0.42); /* 썸네일 상단 그라데이션 */ --color-scrim-chip: rgba(0, 0, 0, 0.72); /* 썸네일 위 작은 배지 바닥 */ --color-on-scrim: #FFFFFF; /* 오버레이 위 글자 */ --color-on-scrim-line: rgba(255, 255, 255, 0.5); --shadow-brand: 0 3px 10px rgba(190, 9, 9, 0.45); --shadow-brand-soft: 0 6px 20px rgba(190, 9, 9, 0.14); --shadow-brand-card: 0 8px 24px rgba(190, 9, 9, 0.12); --shadow-text-on-media: 0 1px 4px rgba(0, 0, 0, 0.8); /* ---- 글꼴 ---- */ /* 프리텐다드: 한글 가독성이 맑은고딕보다 좋고 웨이트 9단계로 위계 표현에 유리. CDN 로드, fallback 유지. */ --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; /* 역할별 크기 / 굵기 / 줄간격 — 페이지에서 font-size 직접 지정 금지 */ --text-display: 34px; --leading-display: 1.22; --weight-display: 900; --text-h1: 27px; --leading-h1: 1.28; --weight-h1: 900; --text-h2: 21px; --leading-h2: 1.35; --weight-h2: 800; --text-h3: 18px; --leading-h3: 1.4; --weight-h3: 800; --text-title: 16px; --leading-title: 1.45; --weight-title: 700; --text-body-lg: 16px; --leading-body-lg: 1.7; --text-body: 15px; --leading-body: 1.65; /* 14px에서 상향 */ --text-body-sm: 13.5px; --leading-body-sm: 1.5; --text-label: 13px; --weight-label: 600; --text-caption: 12.5px; --leading-caption: 1.4; --text-2xs: 11.5px; /* 신규 — 배지·사이드바 설명 등 작은 보조 글자 */ --text-micro: 10.5px; /* 신규 — 썸네일 위 오버레이 배지 전용 (그보다 큰 곳엔 쓰지 않음) */ --text-code: 13px; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ---- 숫자 강조용 (신규) — 조회수·배율처럼 큰 숫자 ---- */ --text-metric: 21px; --weight-metric: 900; --tracking-metric: -0.03em; --text-metric-lg: 30px; /* ---- 간격 (4px 배수) ---- */ --space-0: 0; --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; --space-16: 64px; --space-20: 80px; /* ---- 크기 ---- */ --control-h-sm: 32px; --control-h-md: 36px; --control-h-lg: 44px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --container-max: 1200px; --container-narrow: 720px; --container-pad: 24px; --container-pad-mobile: 16px; --sidebar-w: 246px; --ticker-h: 46px; --header-h: 56px; --touch-min: 44px; /* 시안5B: 사이드바 246px · 상단 티커 46px */ --m-tabbar-h: 60px; /* 신규 — 모바일(899px 이하) 하단 탭바 높이 (4단계) */ /* ---- 둥글기 ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* ---- 그림자 (2단계만) ---- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); /* ---- 선 굵기 ---- */ --border-w: 1px; --border-w-strong: 2px; /* ---- 층 순서 ---- */ --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; /* ---- 움직임 ---- */ --motion-fast: 120ms; --motion-base: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1); } /* ---- 레거시 변수 별칭 (구 style.css 의 :root 이름 → 새 토큰). 이관 전 페이지·자막제거기 페이지의 page