/* [LEGACY 2026-06-29] 라이트 블루 전환으로 더 이상 사용 안 함(어떤 페이지도 body.nothing 미사용). 캐논=DESIGN.md 라이트 블루. 잔존 레드 제거됨. ============================================================================ VELOR · Nothing Design System (monochrome · typographic · industrial) Single source of truth for the dark Nothing skin across velor.kr. Korean body text stays Pretendard (Nothing fonts have no Hangul); Doto/ Space Grotesk/Space Mono drive Latin display, labels, nav, buttons, data. Adapted from the Nothing design language: dark canvas (#000/#111), monochrome greys, single accent (here VELOR uses RED #1B4DE6), flat — no gradients/shadows, radius capped, pill mono buttons, dot-matrix, segmented bars. Opt in per page with . ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap'); :root{ /* canonical tokens — must match DESIGN.md §2 (single source of truth) */ --black:#000000; --inset:#0A0A0A; --surface:#0E0E0E; --surface-raised:#151515; --border:#262626; --border-visible:#3A3A3A; --text-disabled:#8C8C8C; --text-secondary:#ABABAB; --text-2:#C7C7C7; --text-primary:#ECECEC; --text-display:#FFFFFF; --accent:#1B4DE6; --accent-hi:#123BB8; --accent-subtle:rgba(27,77,230,0.15); --success:#4A9E5C; --warning:#D4A843; --error:#1B4DE6; --info:#9A9A9A; --font-display:"Doto","Space Mono",monospace; --font-ui:"Space Grotesk","Pretendard","DM Sans",system-ui,sans-serif; --font-kr:"Pretendard",-apple-system,"Space Grotesk",sans-serif; --font-mono:"Space Mono","JetBrains Mono","SF Mono",monospace; --ease:cubic-bezier(0.25,0.1,0.25,1); } /* ---- base ------------------------------------------------------------ */ body.nothing{ background:var(--black); color:var(--text-primary); font-family:var(--font-kr); -webkit-font-smoothing:antialiased; } body.nothing ::selection{background:var(--accent);color:#fff} /* Latin-only display/labels: Space Mono / Doto applied where tagged. (Korean runs stay Pretendard via --font-kr on body.) */ body.nothing .n-mono,body.nothing .label,body.nothing [data-mono]{ font-family:var(--font-mono); letter-spacing:0.06em; } body.nothing .n-display{font-family:var(--font-display);letter-spacing:-0.02em} /* ---- flat enforcement (Nothing: no shadow, no gradient sheen) -------- */ body.nothing [class*="shadow"]{box-shadow:none !important} body.nothing .blur,body.nothing [class*="blur-"]{filter:none !important} /* cap oversized radii to Nothing's 16px ceiling */ body.nothing [class*="rounded-2xl"], body.nothing [class*="rounded-3xl"], body.nothing [class*="rounded-["]{border-radius:14px !important} /* ============================================================================ OVERRIDE LAYER — remap existing Tailwind brand utilities to Nothing dark. Specificity (body.nothing .x = 0-2-1) beats raw Tailwind utilities (0-1-0). ============================================================================ */ /* surfaces / backgrounds (light canvas -> dark) */ body.nothing .bg-white{background-color:var(--surface) !important} body.nothing .bg-bg{background-color:var(--black) !important} body.nothing .bg-bg\/60{background-color:#0A0A0A !important} body.nothing .bg-navydk{background-color:var(--black) !important} body.nothing .bg-navy,body.nothing .bg-navy2{background-color:var(--surface) !important} body.nothing .bg-white\/85{background-color:rgba(0,0,0,.85) !important} /* translucent light overlays on dark are fine — leave bg-white/5, /10 */ /* accent fills (gold -> red) */ body.nothing .bg-gold{background-color:var(--accent) !important;color:#fff !important} body.nothing .bg-goldl{background-color:var(--accent-hi) !important} /* text colors */ body.nothing .text-ink, body.nothing .text-navy, body.nothing .text-navydk{color:var(--text-primary) !important} body.nothing .text-mut{color:var(--text-secondary) !important} body.nothing .text-gold,body.nothing .text-goldl{color:var(--accent-hi) !important} body.nothing .text-green{color:var(--success) !important} /* text-white / text-ice stay light on dark — leave as-is */ /* borders */ body.nothing .border-line{border-color:var(--border) !important} body.nothing .border-gold\/40, body.nothing .border-gold\/50, body.nothing .border-gold\/60{border-color:rgba(27,77,230,.45) !important} /* residual gold opacity tints (e.g. bg-gold/10 hero orb) -> red accent-subtle */ body.nothing [class*="bg-gold\/"]{background-color:var(--accent-subtle) !important} /* gradients -> flat dark (kill the navy gradient overlay sheen) */ body.nothing [class*="bg-gradient"]{background-image:none !important;background-color:transparent !important} /* theme-color-ish chrome */ body.nothing header[class*="bg-white"]{border-bottom-color:var(--border) !important} /* ============================================================================ NOTHING COMPONENT CONVENTIONS (applied via existing markup patterns) ============================================================================ */ /* Pill CTAs -> Space Mono ALL CAPS (the site uses rounded-full for buttons) */ body.nothing a[class*="rounded-full"], body.nothing button[class*="rounded-full"], body.nothing .n-btn{ font-family:var(--font-mono) !important; text-transform:uppercase; letter-spacing:0.06em; font-size:13px; border-radius:999px !important; } /* secondary/ghost pill (bordered, transparent) */ body.nothing .n-btn-secondary{ background:transparent;border:1px solid var(--border-visible);color:var(--text-primary); padding:12px 24px;display:inline-block; } /* desktop nav -> mono caps, dimmed inactive */ body.nothing nav a{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;font-size:12px} body.nothing nav a:hover{color:var(--text-display) !important} /* dot-matrix backgrounds (Nothing signature) */ .dot-grid{background-image:radial-gradient(circle,var(--border-visible) 1px,transparent 1px);background-size:16px 16px} .dot-grid-subtle{background-image:radial-gradient(circle,var(--border) .5px,transparent .5px);background-size:12px 12px} /* segmented progress bar (discrete blocks, 2px gaps, no radius) */ .n-seg{display:flex;gap:2px;width:100%} .n-seg>i{flex:1;height:10px;background:var(--border);border-radius:0} .n-seg>i.on{background:var(--text-display)} .n-seg>i.on.accent{background:var(--accent)} .n-seg>i.on.success{background:var(--success)} /* bracket label (e.g. [LOADING], [ HOME ]) */ .n-bracket::before{content:"[ "} .n-bracket::after{content:" ]"} /* technical chip / tag */ body.nothing .n-chip{ font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em; font-size:11px;border:1px solid var(--border-visible);border-radius:999px; padding:4px 12px;color:var(--text-secondary);background:transparent; } /* inputs -> underline style, mono labels */ body.nothing input:not([type=checkbox]):not([type=radio]):not([type=file]), body.nothing select,body.nothing textarea{ background:var(--surface) !important;border-color:var(--border-visible) !important; color:var(--text-primary) !important;border-radius:8px !important; } body.nothing input::placeholder,body.nothing textarea::placeholder{color:var(--text-disabled)} body.nothing input:focus,body.nothing select:focus,body.nothing textarea:focus{ border-color:var(--text-primary) !important;outline:none; } /* table data grids */ body.nothing table th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em; font-size:11px;color:var(--text-secondary);border-bottom:1px solid var(--border-visible)} body.nothing table td{border-color:var(--border)} /* ============================================================ READABILITY PATCH (2026-06-19) — 시니어 가독성 하드닝 원인: /app 등에서 쓰는 light "spot" 라벤더 표면·gray/ink 유틸이 다크 리맵되지 않아 (a) 라이트 카드 위 라이트 텍스트가 투명, (b) bg-navy/bg-navydk 액션버튼이 검정 위 검정으로 비가시, (c) 안내문/플레이스홀더 대비 부족. systemic: 모든 body.nothing 페이지 적용 · 미사용 클래스엔 무해. ============================================================ */ /* 1) light "spot" 라벤더 표면 -> 다크 (raised, so inner cards separate from the bg-white phone frame which maps to --surface) */ body.nothing [class*="bg-spot"]{background-color:var(--surface-raised) !important} body.nothing [class*="from-spot"], body.nothing [class*="to-spot"], body.nothing [class*="via-spot"]{background-image:none !important;background-color:var(--surface-raised) !important} /* dark navy banner/footer (bg-ink900 #0F172A) -> neutral Nothing surface */ body.nothing .bg-ink900{background-color:var(--surface) !important} /* 2) spot 보더 -> 가시 보더 */ body.nothing [class*="border-spot"]{border-color:var(--border-visible) !important} /* 3) spot 텍스트 -> 다크 위 가독 */ body.nothing [class*="text-spot"]{color:var(--text-2) !important} /* 4) 미리맵 gray 유틸(이제 다크 카드 위) */ body.nothing .text-gray-900,body.nothing .text-gray-800,body.nothing .text-gray-700{color:var(--text-primary) !important} body.nothing .text-gray-600,body.nothing .text-gray-500,body.nothing .text-gray-400{color:var(--text-secondary) !important} body.nothing [class*="border-gray-"],body.nothing [class*="divide-gray-"]{border-color:var(--border) !important} body.nothing [class*="bg-gray-50"],body.nothing [class*="bg-gray-100"]{background-color:var(--surface) !important} /* 5) 번호 ink 스케일(text-ink700/900 등) -> 가독 */ body.nothing [class*="text-ink"]{color:var(--text-2) !important} /* 6) 채움 액션 버튼/링크가 비가시(#000/#0E0E0E on #000) -> accent (섹션/말풍선 div는 제외, button·a 한정) */ body.nothing button.bg-navy,body.nothing a.bg-navy, body.nothing button.bg-navydk,body.nothing a.bg-navydk{ background-color:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important} body.nothing button.bg-navy:hover,body.nothing a.bg-navy:hover, body.nothing button.bg-navydk:hover,body.nothing a.bg-navydk:hover{background-color:var(--accent-hi) !important} /* 6b) 채움 CTA 전경색 흰색 강제 (2026-06-29, AA) — 자식·아이콘·visited까지. a/button 한정(div/section 제외). */ body.nothing a.bg-navy,body.nothing a.bg-navydk,body.nothing a.bg-gold,body.nothing a.bg-goldl, body.nothing button.bg-navy,body.nothing button.bg-navydk,body.nothing button.bg-gold,body.nothing button.bg-goldl, body.nothing a.bg-navy:visited,body.nothing a.bg-navydk:visited,body.nothing a.bg-gold:visited,body.nothing a.bg-goldl:visited, body.nothing a.bg-navy:hover,body.nothing a.bg-navydk:hover,body.nothing a.bg-gold:hover,body.nothing a.bg-goldl:hover, body.nothing a.bg-navy:focus,body.nothing a.bg-navydk:focus,body.nothing a.bg-gold:focus,body.nothing a.bg-goldl:focus{color:#fff !important} body.nothing a.bg-navy *,body.nothing a.bg-navydk *,body.nothing a.bg-gold *,body.nothing a.bg-goldl *, body.nothing button.bg-navy *,body.nothing button.bg-navydk *,body.nothing button.bg-gold *,body.nothing button.bg-goldl *{color:#fff !important;fill:currentColor !important;stroke:currentColor !important} body.nothing a.bg-goldl,body.nothing button.bg-goldl{background-color:var(--accent-hi) !important;border-color:var(--accent-hi) !important} /* 7) 폼 필드: 가시 보더 + inset 배경 + 명확한 포커스(시니어 폼) */ body.nothing input:not([type="checkbox"]):not([type="radio"]), body.nothing textarea,body.nothing select{ border-color:var(--border-visible) !important;background-color:var(--inset) !important;color:var(--text-primary) !important} body.nothing input:not([type="checkbox"]):not([type="radio"]):focus, body.nothing textarea:focus,body.nothing select:focus{ border-color:var(--accent-hi) !important;outline:2px solid var(--accent-subtle);outline-offset:1px} body.nothing input::placeholder,body.nothing textarea::placeholder{color:#8C8C8C !important} /* 8) 다크 위 green 적합도 텍스트 가독 보정 */ body.nothing [class*="text-green-6"],body.nothing [class*="text-green-5"]{color:#3FB36B !important}