/* * Basketball / ReadyToPlay Design System — Tokens * 통합 디자인 토큰. main.css / player.css / rtp-tokens.css 의 분산 변수를 통합. * * ⭐ 2026-07-02: claude.ai/design "RtP Design System" 정본과 1회 정렬. * - BRAND PRIMARY = ORANGE (#FF6B35). 파랑은 accent(보조)·데이터/링크로 강등 (정본 명시). * - status/easing 등 값 충돌은 정본 기준으로 통일. * - neutral scale / type 조합 토큰 / tracking / focus-ring 등 정본 자산 채움(③). * - 값 맞추기 기준·재사용 규칙은 docs/conventions/frontend.md "Design Tokens" 참고. * * 사용: var(--bb-primary), var(--bb-tap-target) 등 */ :root { /* ───────── Color — brand PRIMARY = Orange (정본: color-brand-*) ───────── */ --bb-primary: #FF6B35; /* 브랜드 primary (Nike/RtP 오렌지) */ --bb-primary-dark: #D94E1F; /* 정본 orange-strong */ --bb-primary-heavy: #B8401A; /* 정본 orange-heavy (신규) */ --bb-primary-soft: #FFEEE6; /* 정본 orange-soft */ --bb-primary-tint: #FFF5F0; /* 정본 orange-tint (신규) */ /* ───────── Color — accent = Blue (정본: color-accent-*, 데이터/링크/info) ───────── */ --bb-accent: #0064FF; /* 정본 blue (기존 #3182F6 → #0064FF 통일) */ --bb-accent-dark: #0052D4; /* 정본 blue-strong */ --bb-accent-heavy: #003FA8; /* 정본 blue-heavy (신규) */ --bb-accent-soft: #EAF2FE; /* 정본 blue-soft */ --bb-accent-tint: #F4F8FF; /* 정본 blue-tint (신규) */ /* 하위호환 별칭: 과거 --bb-primary(파랑)를 명시적으로 쓰던 데이터/링크용 */ --bb-primary-blue: var(--bb-accent); --bb-primary-blue-dark: var(--bb-accent-dark); --bb-primary-blue-soft: var(--bb-accent-soft); /* ───────── Color — text ───────── */ --bb-ink: #191F28; --bb-ink-sub: #6B7280; --bb-ink-muted: #9CA3AF; /* ───────── Color — surface ───────── */ --bb-bg: #FFFFFF; --bb-surface: #F9FAFB; --bb-border: #E5E8EB; --bb-border-soft: #EEF0F2; /* ───────── Color — hero (RTP dark theme) ───────── */ --bb-hero-dark: #15171C; --bb-hero-inner: #1C1F25; /* ───────── Neutral scale (정본 --neutral-*, 신규 ③) ───────── */ --bb-neutral-0: #FFFFFF; --bb-neutral-50: #F7F7F8; --bb-neutral-100: #F4F4F5; --bb-neutral-200: #DBDCDF; --bb-neutral-300: #C2C4C8; --bb-neutral-400: #AEB0B6; --bb-neutral-500: #989BA2; --bb-neutral-600: #70737C; --bb-neutral-700: #46474C; --bb-neutral-800: #2E2F33; --bb-neutral-900: #171719; --bb-neutral-950: #0A0A0B; /* ───────── Color — semantic status (정본 값으로 통일) ───────── */ --bb-success: #00BF40; /* 정본 status-positive (기존 #22C55E) */ --bb-success-soft: #D1FAE5; --bb-warning: #FAA800; /* 정본 status-warning (기존 #F59E0B) */ --bb-warning-soft: #FEF3C7; --bb-danger: #FF4242; /* 정본 status-negative (기존 #EF4444) */ --bb-danger-soft: #FEE2E2; --bb-info: #0066FF; /* 정본 status-info (신규 ③) */ --bb-info-soft: #EAF2FE; /* ───────── Color — ranking accent (record_ranking R3/R13, 1~3위 강조) C안(2026-07-30) 개정: 금/은/동 3색 배지 → 단일 오렌지 강조(숫자 색상, 배지 아님)로 정리. 기존 --bb-rank-gold/-silver/-bronze(+soft) 는 사용처가 없어 제거. ───────── */ --bb-rank-accent: var(--bb-primary); --bb-rank-accent-soft: var(--bb-primary-soft); /* ───────── Spacing (4px scale) ───────── */ --bb-space-05: 2px; /* 정본 --space-2 (신규 ③) */ --bb-space-1: 4px; --bb-space-15: 12px; /* 정본 --space-12 (신규 ③) */ --bb-space-2: 8px; --bb-space-25: 20px; /* 정본 --space-20 (신규 ③) */ --bb-space-3: 16px; --bb-space-4: 24px; --bb-space-5: 32px; --bb-space-6: 48px; /* 정본 --space-48 (신규 ③) */ --bb-space-7: 64px; /* 정본 --space-64 (신규 ③) */ --bb-space-8: 96px; /* 정본 --space-96 (신규 ③) */ --bb-space-9: 128px; /* 정본 --space-128 (신규 ③) */ /* ───────── Typography — families ───────── */ --bb-font: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; --bb-font-num: 'Barlow', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif; --bb-text-2xs: 10px; /* 신규 — 초소형 배지(NEW 등) 전용, 정본에 없는 규격이라 로컬 추가 */ --bb-text-sm: 14px; --bb-text-base: 16px; --bb-text-lg: 18px; --bb-text-xl: 20px; /* ───────── Typography — 조합 토큰 (정본 --type-*, 신규 ③) ───────── */ --bb-type-display-l: 700 56px/1.10 var(--bb-font); --bb-type-display-m: 700 40px/1.15 var(--bb-font); --bb-type-h1: 700 36px/1.334 var(--bb-font); --bb-type-h2: 700 28px/1.358 var(--bb-font); --bb-type-h3: 700 24px/1.334 var(--bb-font); --bb-type-h4: 700 20px/1.4 var(--bb-font); --bb-type-h5: 700 17px/1.412 var(--bb-font); --bb-type-body-lg: 500 17px/1.5 var(--bb-font); --bb-type-body: 500 16px/1.5 var(--bb-font); --bb-type-body-sm: 500 14px/1.5 var(--bb-font); --bb-type-caption: 500 13px/1.5 var(--bb-font); --bb-type-button: 600 16px/1.25 var(--bb-font); /* Tracking (정본 --tracking-*, 신규 ③) */ --bb-tracking-h1: -0.027em; --bb-tracking-h2: -0.024em; --bb-tracking-h3: -0.023em; --bb-tracking-h4: -0.012em; --bb-tracking-body: 0.006em; /* ───────── Radius (실제 사용 빈도순 + 정본 스케일 채움) ───────── */ --bb-radius-sm: 6px; /* 로컬 비표준 유지 (컴포넌트 회귀 방지) */ --bb-radius: 12px; /* = 정본 --radius-4 */ --bb-radius-lg: 14px; /* 로컬 비표준 유지 */ --bb-radius-xl: 16px; /* = 정본 --radius-5 */ --bb-radius-pill: 999px; --bb-radius-4: 4px; /* 정본 --radius-2 (신규 ③) */ --bb-radius-8: 8px; /* 정본 --radius-3 (신규 ③) */ --bb-radius-20: 20px; /* 정본 --radius-6 (신규 ③) */ --bb-radius-32: 32px; /* 정본 --radius-7 (신규 ③) */ --bb-radius-64: 64px; /* 정본 --radius-8 (신규 ③) */ /* ───────── Shadow / Elevation ───────── */ --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); --bb-shadow-md: 0 6px 16px rgba(255, 107, 53, 0.24); /* 오렌지 틴트 CTA */ --bb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --bb-focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.32); /* 정본 focus-ring, 오렌지 (신규 ③) */ /* ───────── Touch target (모바일 접근성) ───────── */ --bb-tap-target: 44px; /* ── college_gauge 세그먼트 탭 (프로토 .gr__t) ──────────────────────────── PROTO_SCALE='tokens_added' — 프로토가 5·9·12.5·9.5·20·7px 로 그려져 있고 쓸 수 있는 계열 토큰이 없다. 반올림하면 6개 탭에 오차가 누적돼 "디자인이 다르다" 가 된다(2026-09-22 사용자 지적). 기능 스코프 토큰으로 승격한다. */ --bb-gauge-seg-gap: 5px; /* proto .gr__t gap */ --bb-gauge-seg-pad: 4px; /* proto .gr__t padding */ --bb-gauge-seg-radius: 9px; /* proto .gr__t button radius (≠ --bb-radius-sm 6px) */ --bb-gauge-seg-text: 12.5px; /* proto .gr__t button (≠ --bb-text-sm 14px) */ --bb-gauge-seg-sub: 9.5px; /* proto .gr__t button s (≠ --bb-text-2xs 10px) */ --bb-gauge-seg-logo: 20px; /* proto .gr__t--u button img */ --bb-gauge-seg-uni-gap: 7px; /* proto .gr__t--u button gap */ /* 🔴 2026-09-23 추가 — 되돌리기. '준비 중' 시트의 글자 넷이 전부 11.5px 로 같아 **메타(10.5)/본문(12.5) 2단 계층이 1단으로 붕괴**해 있었다. */ --bb-gauge-sheet-kicker-mb: 11px; /* proto .ps__k margin-bottom */ --bb-gauge-sheet-n-mb: 18px; /* proto .ps__n margin-bottom */ /* 2026-10-02 college_gauge mini — 결과 화면 CTA 훅 바·팀 순위 행(handoff-2026-10-02/tokens.proto.css §B 와 같은 값). 레포에 쓸 수 있는 같은 계열 토큰이 없어 정본 값 그대로 추가한다(반올림 X). */ --bb-gauge-text-lead: 15px; /* proto .ft__hook b */ --bb-gauge-lo-track: rgba(255,107,53,.22); /* proto .bar--lo 그라데이션 시작(= --bb-primary 22%) */ --bb-gauge-shadow-knob: 0 1px 4px rgba(0,0,0,.2); /* proto .bar--lo u 손잡이 */ --bb-gauge-shadow-ft: 0 -10px 28px rgba(23,23,25,.12); /* proto .ft--cta 결과 CTA 바(위로 드리움) */ --bb-gauge-shadow-cta: 0 8px 20px rgba(255,107,53,.32); /* proto .ft__go (≈ --bb-shadow-md 0 6px 16px .24) */ /* ───────── Motion (정본 easing 곡선으로 통일) ───────── */ --bb-ease: cubic-bezier(0.2, 0, 0, 1); /* 정본 (기존 0.4,0,0.2,1) */ --bb-t-fast: 120ms; --bb-t-base: 200ms; --bb-t-slow: 320ms; --bb-t-graph: 600ms; /* 신규 — 상세 그래프 채우기 애니메이션(stat_detail_ux R2) */ --bb-t-spin: 800ms; /* 신규 — 진입 로딩 스피너 1회전(stat_detail_ux R1) */ /* ───────── Overlay (신규 — stat_detail_ux R1 진입 로딩) ───────── */ --bb-overlay-dark: rgba(25, 31, 40, 0.55); /* --bb-ink 틴트, 전체화면 딤 오버레이용 */ --bb-overlay-dark-strong: rgba(25, 31, 40, 0.68); /* 신규 — inapp_escape_hint. 웹뷰 대비 강조용 딤(대비가 핵심이라 표준보다 진하다) */ --bb-overlay-light-strong: rgba(255, 255, 255, 0.94); /* 신규 — home_rec. 어두운 썸네일 위 근백색 원(재생 버튼 배경) */ /* ───────── Font-size 확장 (신규 — home_rec 이식, 핸드오프 raw px 토큰화) ───────── 기존 --bb-text-2xs/sm/lg/xl(10/14/18/20px) 로 안 맞는 중간값만 채운다. */ --bb-text-2xs-plus: 10.5px; --bb-text-11: 11px; --bb-text-11-plus: 11.5px; --bb-text-12: 12px; /* 🔴 2026-09-23 — 미해결 고정 19건 되돌리기(docs/handoff/2026-09-23-pinned-style- drift-investigation.md). PROTO_SCALE.decision = "tokens_added" 정책대로 **반올림 대신 토큰을 추가**해 정본 px 를 보존한다. 반올림하면 오차가 누적돼 "디자인이 다르다" 가 된다(2026-09-22 사용자 지적). */ --bb-text-12-plus: 12.5px; /* proto .coach__b p · .ps__s · .ps__later — 본문 단 */ --bb-text-13: 13px; /* proto .coach__b b · .base__h b (≠ --bb-text-sm 14px) */ --bb-text-19: 19px; /* proto .ps__t 시트 제목 (≠ --bb-text-xl 20px) */ --bb-text-22: 22px; --bb-text-26: 26px; /* college_gauge G1 훅 제목 — 시안 .ask__t */ /* ───────── home_rec 컴포넌트 사이징 (신규 — 추천 카드 재생 아이콘·썸네일) ───────── */ --bb-rec-space-5: 5px; /* 배지 좌우 padding · 스탯 라벨 margin-top */ --bb-rec-play-tri-l: 13px; /* 재생 삼각형 border-left(히어로 기본) */ --bb-rec-play-tri-tb: 8px; /* 재생 삼각형 border-top/bottom(히어로 기본) */ --bb-rec-play-mini: 26px; /* 옅은 카드 재생 버튼 지름 */ --bb-rec-play-tri-mini-l: 9px; /* 재생 삼각형 border-left(옅은 카드) */ /* ── goal_flow — 핸드오프 프로토(handoff/proto/flow.css) 정본 스케일 ────────── ⚠️ 전역 4px 스케일(--bb-space-*)에 끼워 넣지 않는다. 프로토가 11·13·13.5px 같은 홀수·소수 스케일로 그려져 있어 전역에 넣으면 다른 기능도 그리드를 벗어난다. home_rec 의 --bb-rec-* 선례와 같은 기능 스코프 블록이다. 근거: contracts/goal_flow.py PROTO_SCALE(decision="tokens_added"). 반올림하면(13→8px) 칩이 한 화면에 20개 반복되며 오차가 누적된다(2026-09-22 실측). */ --bb-goal-chip-pad-y: 13px; /* proto .chip padding 세로 */ --bb-goal-chip-pad-x: 14px; /* proto .chip padding 가로 */ --bb-goal-chip-gap: 11px; /* proto .chip gap */ --bb-goal-chip-title: 13.5px; /* proto .chip__t b font-size */ --bb-goal-chip-glyph: 11px; /* proto .chip__c font-size (체크 글리프) */ --bb-goal-cat-radius: 9px; /* proto .cat border-radius */ --bb-goal-cat-dot: 5px; /* proto .cat__r width·height·margin-left (E79 추천 점) */ --bb-goal-note-gap: 11px; /* proto .base__note padding-top */ --bb-goal-coach-glyph: 13px; /* proto .coach__av font-size */ --bb-goal-picks-gap: 14px; /* proto .picks margin-bottom */ --bb-goal-pick-pad-l: 10px; /* proto .pick padding-left (로고/글자 쪽) */ /* ── goal_intro_rail(A1b) 로고 레일 ← D-g ───────────────────────────────── 정본은 104/82(+gap 18)=204px 인데 `.rtp-goal-intro__rail` 의 칸은 `min-height: 168px` 이다 — **정본 크기가 안 들어간다**(실측: iPhone SE·12 mini· Galaxy S8·iPhone 14 전부 168px). 비율(1:0.788)을 지키고 축소했다 → 164px. ⚠️ 들어가는 근거는 "여유 4px" 이 아니라 **min-height 가 하한**이라는 것이다 (flex-shrink 가 그 아래로 못 간다 · box-sizing:border-box 전역). 누가 min-height 를 건드리면 여기가 걸려야 한다. */ --bb-goal-rail-a: 84px; /* proto .rail__ln span 104 × 0.808 */ --bb-goal-rail-b: 66px; /* proto .rail__ln--b span 82 × 0.805 */ --bb-goal-rail-gap: 14px; /* proto .rail gap(세로) 18 × 0.778 */ --bb-goal-rail-radius-a: 21px; /* proto .rail__ln span radius 26 */ --bb-goal-rail-radius-b: 18px; /* proto .rail__ln--b span radius 22 */ --bb-goal-rail-img-a: 52px; /* proto .rail__ln span img 64 */ --bb-goal-rail-img-b: 40px; /* proto .rail__ln--b span img 50 */ /* 🔴 2026-09-23 추가 — 위와 같은 되돌리기. 코치 카드는 세로 패딩이 8px 이라 정본(15px)보다 **28% 납작**했다(실측 높이 58px ↔ 74px). */ --bb-goal-coach-pad-y: 15px; /* proto .coach padding 세로 */ --bb-goal-coach-mb: 22px; /* proto .coach margin-bottom */ --bb-goal-coach-title-mb: 5px; /* proto .coach__b b margin-bottom */ --bb-goal-base-pad-t: 13px; /* proto .base padding-top */ --bb-goal-base-pad-x: 14px; /* proto .base padding 좌우 */ --bb-goal-base-mb: 14px; /* proto .base margin-bottom */ /* ── design-port(v2 핸드오프) ← T51 — INTRO/STEP1~6 값 대조에서 새로 드러난 것들 */ --bb-goal-field-gap: 10px; /* proto .two gap(STEP2 두 칸 필드) */ --bb-goal-intro-pad-b: 26px; /* proto .in__b padding 하단 */ --bb-goal-intro-tag-mb: 13px; /* proto .in__tag margin-bottom */ --bb-goal-unicard-pad-t: 14px; /* proto .uc padding-top(STEP3 대학 카드) */ --bb-goal-why-mb: 18px; /* proto .why margin-bottom(STEP5 배너) */ --bb-goal-stat-pad-t: 11px; /* proto .st padding-top(STEP6 지표 카드) */ --bb-goal-stat-why-gap: 9px; /* proto .st__why padding-top/margin-top */ --bb-rec-play-tri-mini-tb: 5.5px; /* 재생 삼각형 border-top/bottom(옅은 카드) */ --bb-rec-thumb-mini-w: 96px; /* 옅은 카드 썸네일 너비 */ --bb-rec-thumb-mini-h: 58px; /* 옅은 카드 썸네일 높이 */ /* ── goal_level_gate(A2a) W2 — 다크 히어로 게이트 스케일 ────────────────── PROTO_SCALE=tokens_added 승계(goal_flow 전체). 정본(handoff/proto/flow-wgate.css R.S.w2, dark:true)이 22·24·12.5·13·10·9·15·38px 같은 스케일이라 전역 4px 그리드에 안 맞는다. --bb-goal-* 선례와 같은 기능 스코프 블록 — 반올림 대신 값을 보존한다. */ --bb-w2-pad-x: 22px; /* proto .wdk__b padding 좌우 */ --bb-w2-pad-b: 22px; /* proto .wdk__b padding 하단 */ --bb-w2-title: 24px; /* proto .wdk__t font-size */ --bb-w2-sub: 12.5px; /* proto .wdk__s / .wseg button font-size */ --bb-w2-seg-radius: 13px; /* proto .wseg border-radius */ --bb-w2-seg-btn-radius: 10px; /* proto .wseg button border-radius */ --bb-w2-card-gap: 9px; /* proto .wgl gap */ --bb-w2-card-pad: 15px; /* proto .wgc padding */ --bb-w2-card-glyph: 38px; /* proto .wgc__n width/height */ --bb-w2-card-label: 15px; /* proto .wgc__b b font-size */ --bb-w2-card-note: 10px; /* proto .wgc__r s font-size */ /* 🔴 proto-css-diff 가 잡은 6건 — 레포 일반 토큰(--bb-space-*)을 쓰니 정본 값이 13→12 · 10→8 · 18→16 · 11→12 · 6→4 로 **반올림**됐다. W25 가 경고한 경로 ("칩 패딩 13→8px 누적")라 정본 값을 토큰으로 보존한다(PROTO_SCALE=tokens_added). */ --bb-w2-tag-mb: 13px; /* proto .wdk__tag margin-bottom */ --bb-w2-title-mb: 10px; /* proto .wdk__t margin-bottom */ --bb-w2-sub-mb: 18px; /* proto .wdk__s margin-bottom */ --bb-w2-seg-mb: 11px; /* proto .wseg margin-bottom */ --bb-w2-seg-gap: 6px; /* proto .wseg gap */ --bb-w2-card-inner-gap: 13px; /* proto .wgc gap */ /* ── on-dark ink/surface scale (신규 rgba 하드코딩 금지 — auto_rules frontend/, 선례: --rtp-hero-caption). W2 다크 히어로 전용 — 밝은 테마에서 쓰지 말 것. ───── */ --bb-hero-ink-2: rgba(255, 255, 255, 0.8); /* proto .wgc__n 아이콘 색 */ --bb-hero-ink-sub: rgba(255, 255, 255, 0.66); /* proto .wdk__s 부제 */ --bb-hero-ink-3: rgba(255, 255, 255, 0.55); /* proto .wgc__b span */ /* 🔴 정본은 .45(4.48:1)·.4(3.84:1) 인데 **둘 다 WCAG AA(4.5:1) 미달**이다. 적용처가 12.5px·10px **일반 텍스트**라 4.5:1 이 필요하다(large-text 예외 안 됨). [6.5] 실캡처에서 '첫 번째로 신청해요' 가 **거의 안 읽혔다** — 계산이 아니라 눈으로 확인. → .50 으로 올린다(5.26:1). PROTO_STYLE_EXCEPTIONS 에 사유 선언. */ --bb-hero-ink-4: rgba(255, 255, 255, 0.50); /* proto .wseg button(비활성) — 정본 .45 에서 상향 */ --bb-hero-ink-muted: rgba(255, 255, 255, 0.50); /* proto .wgc__r s — 정본 .4 에서 상향(위 사유) */ --bb-hero-surface: rgba(255, 255, 255, 0.055); /* proto .wgc 배경 */ --bb-hero-surface-2: rgba(255, 255, 255, 0.07); /* proto .wseg 배경 */ --bb-hero-surface-3: rgba(255, 255, 255, 0.1); /* proto .wgc__n 배경 · .wseg 테두리 */ --bb-hero-surface-4: rgba(255, 255, 255, 0.14); /* proto .wseg button[aria-pressed] 배경 */ --bb-hero-line: rgba(255, 255, 255, 0.12); /* proto .wgc 테두리 */ /* goal_intro_rail(A1b) — 정본 `.rail__ln span` · `.prep__q i` 의 흰색 알파. ⚠️ 신규 rgba 하드코딩 금지(auto_rules frontend/) — 토큰으로 올린다. */ --bb-hero-logo-face: rgba(255, 255, 255, 0.9); /* proto .rail__ln span 배경 */ --bb-hero-line-2: rgba(255, 255, 255, 0.14); /* proto .rail__ln span 테두리 */ --bb-hero-line-dash: rgba(255, 255, 255, 0.26); /* proto .prep__q i 점선 테두리 */ /* ── goal_flow v2 — 정본 tokens.proto.css 127개 (docs/sdd/goal_flow/handoff/) ────── 정본 CSS 를 값 수정 없이 옮기고(goal-flow.css ②), **값의 결정은 여기서만** 한다. = 정본과 같은 레포 토큰을 가리킨다 ≈ Q2 — 가장 가까운 레포 토큰으로 반올림(정본 값은 주석) NEW 정본 값 그대로. 단 Q1(흰 글씨 알파 .45/.40/.35/.34 → .50)·Q2(비브랜드 오렌지 #FF7A2C·#F05A22 → 브랜드 #FF6B35) 결정분은 바꿨고 주석에 정본 값을 남겼다. 바뀐 값은 contract PROTO_STYLE_EXCEPTIONS 에 같은 사유로 선언돼 있다(css-diff 가 센다). SDD: docs/sdd/goal_flow_v2.md §0 */ --bb-goal-c-0a7cff: #0a7cff; /* NEW */ --bb-goal-c-0f7b5f: #0f7b5f; /* NEW */ --bb-goal-c-111111: var(--bb-neutral-950); /* ≈ Q2 반올림 (정본 #111) */ --bb-goal-c-16181d: var(--bb-hero-dark); /* ≈ Q2 반올림 (정본 #16181d) */ --bb-goal-c-3c4148: var(--bb-neutral-700); /* ≈ Q2 반올림 (정본 #3c4148) */ --bb-goal-c-4e5968: var(--rtp-ink-2); /* = 정본과 같은 값 */ --bb-goal-c-8f2f0e: #8F2F0E; /* NEW */ --bb-goal-c-9a3412: #9a3412; /* NEW */ --bb-goal-c-a16207: #a16207; /* NEW */ --bb-goal-c-black: #000; /* NEW */ --bb-goal-c-black-a14: rgba(0,0,0,.14); /* NEW */ --bb-goal-c-black-a40: rgba(0,0,0,.4); /* NEW */ --bb-goal-c-black-a42: rgba(0,0,0,.42); /* NEW */ --bb-goal-c-black-a6: rgba(0,0,0,.06); /* NEW */ --bb-goal-c-c2410c: #c2410c; /* NEW */ --bb-goal-c-c2451a: var(--bb-primary-heavy); /* ≈ Q2 반올림 (정본 #C2451A) */ --bb-goal-c-d64545: #d64545; /* NEW */ --bb-goal-c-d94f1c: var(--bb-primary-dark); /* ≈ Q2 반올림 (정본 #d94f1c) */ --bb-goal-c-dfe3e8: var(--bb-border); /* ≈ Q2 반올림 (정본 #dfe3e8) */ --bb-goal-c-dim-a50: rgba(10,14,20,.5); /* NEW */ --bb-goal-c-e4e6ea: var(--bb-border); /* ≈ Q2 반올림 (정본 #e4e6ea) */ --bb-goal-c-e6f9f2: #e6f9f2; /* 정본 그대로 — ≈ 반올림하면 완료 배지 초록이 회색(--bb-border-soft)이 된다. --bb-success(#00BF40)는 글자 대비 미달이라 대체 불가 */ --bb-goal-c-eef0f3: var(--bb-border-soft); /* ≈ Q2 반올림 (정본 #eef0f3) */ --bb-goal-c-f05a22-a18: rgba(255,107,53,.18); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(240,90,34,.18)) */ --bb-goal-c-f05a22-a38: rgba(255,107,53,.38); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(240,90,34,.38)) */ --bb-goal-c-ff7a2c-a16: rgba(255,107,53,.16); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.16)) */ --bb-goal-c-ff7a2c-a18: rgba(255,107,53,.18); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.18)) */ --bb-goal-c-ff7a2c-a20: rgba(255,107,53,.2); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.2)) */ --bb-goal-c-ff7a2c-a22: rgba(255,107,53,.22); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.22)) */ --bb-goal-c-ff7a2c-a25: rgba(255,107,53,.25); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.25)) */ --bb-goal-c-ff7a2c-a5: rgba(255,107,53,.05); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.05)) */ --bb-goal-c-ff7a2c-a50: rgba(255,107,53,.5); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.5)) */ --bb-goal-c-ff7a2c-a60: rgba(255,107,53,.6); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.6)) */ --bb-goal-c-ff7a2c-a85: rgba(255,107,53,.85); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 rgba(255,122,44,.85)) */ --bb-goal-c-ffc39f: #ffc39f; /* NEW */ --bb-goal-c-ffd9c2: #ffd9c2; /* NEW */ --bb-goal-c-fff1e7: var(--bb-primary-soft); /* ≈ Q2 반올림 (정본 #fff1e7) */ --bb-goal-c-fff2cc: var(--bb-warning-soft); /* ≈ Q2 반올림 (정본 #fff2cc) */ --bb-goal-c-fff4ed: var(--bb-primary-tint); /* ≈ Q2 반올림 (정본 #fff4ed) */ --bb-goal-c-fff4ef: var(--bb-primary-tint); /* ≈ Q2 반올림 (정본 #fff4ef) */ --bb-goal-c-fff8e1: var(--bb-primary-soft); /* ≈ Q2 반올림 (정본 #fff8e1) */ --bb-goal-c-ios-sheet-a97: rgba(248,248,248,.97); /* NEW */ --bb-goal-c-white: var(--bb-bg); /* = 정본과 같은 값 */ --bb-goal-c-white-a10: var(--bb-hero-surface-3); /* = 정본과 같은 값 */ --bb-goal-c-white-a12: var(--bb-hero-line); /* = 정본과 같은 값 */ --bb-goal-c-white-a14: var(--bb-hero-surface-4); /* = 정본과 같은 값 */ --bb-goal-c-white-a26: var(--bb-hero-line-dash); /* = 정본과 같은 값 */ --bb-goal-c-white-a34: rgba(255,255,255,.5); /* Q1 명도비 — 텍스트용 알파 .50 로 (정본 rgba(255,255,255,.34)) */ --bb-goal-c-white-a35: rgba(255,255,255,.5); /* Q1 명도비 — 텍스트용 알파 .50 로 (정본 rgba(255,255,255,.35)) */ --bb-goal-c-white-a40: rgba(255,255,255,.5); /* Q1 명도비 — 텍스트용 알파 .50 로 (정본 rgba(255,255,255,.4)) */ --bb-goal-c-white-a45: var(--bb-hero-ink-4); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.45)) */ --bb-goal-c-white-a50: var(--bb-hero-ink-4); /* = 정본과 같은 값 */ --bb-goal-c-white-a55: var(--bb-hero-ink-3); /* = 정본과 같은 값 */ --bb-goal-c-white-a5p5: var(--bb-hero-surface); /* = 정본과 같은 값 */ --bb-goal-c-white-a6: var(--bb-hero-surface); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.06)) */ --bb-goal-c-white-a60: var(--bb-hero-ink-3); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.6)) */ --bb-goal-c-white-a62: var(--bb-hero-ink-sub); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.62)) */ --bb-goal-c-white-a66: var(--bb-hero-ink-sub); /* = 정본과 같은 값 */ --bb-goal-c-white-a7: var(--bb-hero-surface-2); /* = 정본과 같은 값 */ --bb-goal-c-white-a70: var(--bb-hero-ink-sub); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.7)) */ --bb-goal-c-white-a72: rgba(255,255,255,.72); /* NEW */ --bb-goal-c-white-a80: var(--bb-hero-ink-2); /* = 정본과 같은 값 */ --bb-goal-c-white-a88: var(--bb-hero-logo-face); /* ≈ Q2 반올림 (정본 rgba(255,255,255,.88)) */ --bb-goal-c-white-a90: var(--bb-hero-logo-face); /* = 정본과 같은 값 */ --bb-goal-radius-1: 1px; /* NEW */ --bb-goal-radius-10: var(--rtp-radius-md); /* = 정본과 같은 값 */ --bb-goal-radius-11: 11px; /* NEW */ --bb-goal-radius-12: var(--bb-radius); /* = 정본과 같은 값 */ --bb-goal-radius-13: var(--bb-w2-seg-radius); /* = 정본과 같은 값 */ --bb-goal-radius-14: var(--bb-radius-lg); /* = 정본과 같은 값 */ --bb-goal-radius-16: var(--bb-radius-xl); /* = 정본과 같은 값 */ --bb-goal-radius-18: var(--rtp-radius-2xl); /* = 정본과 같은 값 */ --bb-goal-radius-2: 2px; /* NEW */ --bb-goal-radius-20: var(--bb-radius-20); /* = 정본과 같은 값 */ --bb-goal-radius-22: 22px; /* NEW */ --bb-goal-radius-26: 26px; /* NEW */ --bb-goal-radius-3: 3px; /* NEW */ --bb-goal-radius-4: var(--bb-radius-4); /* = 정본과 같은 값 */ --bb-goal-radius-5: 5px; /* NEW */ --bb-goal-radius-6: var(--bb-radius-sm); /* = 정본과 같은 값 */ --bb-goal-radius-7: 7px; /* NEW */ --bb-goal-radius-8: var(--bb-radius-8); /* = 정본과 같은 값 */ --bb-goal-radius-9: var(--bb-goal-cat-radius); /* = 정본과 같은 값 */ --bb-goal-radius-999: var(--bb-radius-pill); /* = 정본과 같은 값 */ --bb-goal-fs-10: var(--bb-text-2xs); /* = 정본과 같은 값 */ --bb-goal-fs-10p5: var(--bb-text-2xs-plus); /* = 정본과 같은 값 */ --bb-goal-fs-11: var(--bb-text-11); /* = 정본과 같은 값 */ --bb-goal-fs-11p5: var(--bb-text-11-plus); /* = 정본과 같은 값 */ --bb-goal-fs-12: var(--bb-text-12); /* = 정본과 같은 값 */ --bb-goal-fs-12p5: var(--bb-text-12-plus); /* = 정본과 같은 값 */ --bb-goal-fs-13: var(--bb-text-13); /* = 정본과 같은 값 */ --bb-goal-fs-13p5: var(--bb-goal-chip-title); /* = 정본과 같은 값 */ --bb-goal-fs-14: var(--bb-text-sm); /* = 정본과 같은 값 */ --bb-goal-fs-14p5: 14.5px; /* NEW */ --bb-goal-fs-15: var(--bb-w2-card-label); /* = 정본과 같은 값 */ --bb-goal-fs-16: var(--bb-text-base); /* = 정본과 같은 값 */ --bb-goal-fs-17: 17px; /* NEW */ --bb-goal-fs-18: var(--bb-text-lg); /* = 정본과 같은 값 */ --bb-goal-fs-19: var(--bb-text-19); /* = 정본과 같은 값 */ --bb-goal-fs-19p5: 19.5px; /* NEW */ --bb-goal-fs-20: var(--bb-text-xl); /* = 정본과 같은 값 */ --bb-goal-fs-21: 21px; /* NEW */ --bb-goal-fs-22: var(--bb-text-22); /* = 정본과 같은 값 */ --bb-goal-fs-23: 23px; /* NEW */ --bb-goal-fs-24: var(--bb-w2-title); /* = 정본과 같은 값 */ --bb-goal-fs-25: 25px; /* NEW */ --bb-goal-fs-32: 32px; /* NEW */ --bb-goal-fs-34: 34px; /* NEW */ --bb-goal-fs-38: var(--bb-w2-card-glyph); /* = 정본과 같은 값 */ --bb-goal-fs-42: 42px; /* NEW */ --bb-goal-fs-44: 44px; /* NEW */ --bb-goal-fs-8p5: 8.5px; /* NEW */ --bb-goal-fs-9: 9px; /* NEW */ --bb-goal-fs-9p5: var(--bb-gauge-seg-sub); /* = 정본과 같은 값 */ --bb-goal-shadow-1: 0 1px 3px rgba(0,0,0,.08); /* NEW */ --bb-goal-shadow-2: 0 3px 12px rgba(0,0,0,.08); /* NEW */ --bb-goal-shadow-3: 0 0 0 1px var(--rtp-line); /* NEW */ --bb-goal-shadow-4: 0 14px 40px rgba(0,0,0,.24); /* NEW */ --bb-goal-shadow-5: 0 0 0 2px #fae100; /* NEW */ --bb-goal-shadow-6: 0 0 0 1.5px rgba(255,107,53,.45); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 0 0 0 1.5px rgba(255,122,44,.45)) */ --bb-goal-shadow-7: 0 6px 16px -4px rgba(255,107,53,.7); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 0 6px 16px -4px rgba(255,122,44,.7)) */ --bb-goal-shadow-8: 0 14px 26px -10px rgba(194,65,12,.45); /* NEW */ --bb-goal-shadow-9: 0 0 0 4px rgba(255,107,53,.18); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 0 0 0 4px rgba(255,122,44,.18)) */ --bb-goal-shadow-10: 0 12px 28px rgba(0,0,0,.14); /* NEW */ --bb-goal-shadow-11: 0 0 0 2px var(--rtp-ink); /* NEW */ --bb-goal-shadow-12: 0 6px 18px rgba(255,107,53,.45); /* Q2 브랜드 오렌지 #FF6B35 로 (정본 0 6px 18px rgba(240,90,34,.45)) */ --bb-goal-shadow-13: 0 8px 20px rgba(0,0,0,.12); /* NEW */ /* goal_flow_v3 (design-port.md 부록 B · Q15) — 핸드오프 v2(proto/v2.css)가 새로 쓰는 값. 정본 값 보존 */ --bb-goal-fs-28: 28px; /* .cel__v b (축하 모달 지표 값) */ --bb-goal-radius-24: 24px; /* .ad__pn · .pk__pn (바텀시트 상단 모서리) */ --bb-goal-v2-c02: rgba(255,255,255,.85); /* .v2off__t 글자 — 기존 hero-ink 와 동거리라 정본 값 보존 */ --bb-goal-v2-c03: rgba(255,255,255,.72); /* .v2more 글자 */ --bb-goal-v2-c05: #eefaf2; /* .v2hero--df 배경 (--bb-success-soft 는 너무 진해 대체 불가) */ --bb-goal-v2-c07: rgba(15,17,21,.55); /* .cel__bg 축하 모달 딤 */ --bb-goal-v2-c15: #d6d8de; /* .nudge__tip span */ --bb-goal-v2-c18: rgba(15,17,21,.45); /* .ad__bg · .pk__bg 시트 딤 */ --bb-goal-v2-c19: rgba(0,0,0,.08); /* 탭·세그먼트 선택 그림자 색 */ --bb-goal-v2-c20: rgba(15,17,21,.64); /* .gd__hole 가이드 딤 */ --bb-goal-v2-c21: rgba(0,0,0,.24); /* .gd__tip 그림자 색 */ /* identity_verification — 하단 인증 배너(verify_banner 핸드오프, design-port 2026-10-05). 정본 값 보존(tokens_added). 글자 3종은 새 토큰을 만들지 않는다 — Q2 로 레포 크기 토큰에 맞췄다 (제목 --bb-text-13 · 부제 --bb-text-11-plus · 버튼 --bb-text-12-plus). 캡처용 stage 토큰은 구현 대상 아님. */ --bb-verify-banner-on-dark: #FFFFFF; /* 다크 위 제목·버튼 글씨 (--bb-bg 와 값만 같고 의미가 다름) */ --bb-verify-banner-on-dark-sub: rgba(255,255,255,.62); /* 다크 위 부제 (hero-dark 위 7.4:1) */ --bb-verify-banner-icon-bg: rgba(255,107,53,.18); /* 아이콘 박스 배경 = --bb-primary 18% */ --bb-verify-banner-shadow: 0 10px 26px rgba(0,0,0,.28); --bb-verify-banner-radius-icon: 11px; /* 아이콘 박스 */ --bb-verify-banner-radius-btn: 10px; /* 인증하기 (≈ --bb-radius 12px, 정본 값 보존) */ --bb-verify-banner-size-icon: 36px; --bb-verify-banner-h-btn: 36px; /* 단독 탭 대상 아님 — 배너 전체(≥44px)가 탭 영역 */ --bb-verify-banner-inset: 10px; /* 앱 칸 좌우·탭바 위 간격 */ --bb-verify-banner-pad: 14px; --bb-verify-banner-pad-left: 15px; --bb-verify-banner-gap: 12px; --bb-verify-banner-sub-gap: 3px; }