/* ============================================================ Vibe Board · NEON — 시그니처 다크 아이덴티티 ------------------------------------------------------------ "바이브 코딩" 전시장의 메인 스킨. 색은 어두운 캔버스 위에서 '빛'으로 존재합니다 — 채워진 면이 아니라 글로우·그라데이션·라인. 라이트 모드는 토글로만 존재하고, 모든 네온 표현은 body.neon-dark / .neon-calm / .neon-line 컨텍스트에서만 켜집니다. 토큰: colors_and_type.css (--neon-*, --grad-*, --glow-*) 주입: app.jsx Tweaks → --nf-color · --nf-color2 · --nf-glow ============================================================ */ :root { --nf-color: var(--neon-blue); --nf-color2: var(--neon-violet); --nf-glow: 1; --nf-line-bg: var(--nf-color); } /* ============================================================ 1 · DARK CANVAS — 네온이 가장 잘 읽히는 깊은 밤 벽 + 모두 칠해 뷰포트 전체가 어둡게. ============================================================ */ html.neon-dark { background: #06080c; } :is(body.neon-dark, html.neon-dark body) { --bg: #06080c; --surface: #111722; --surface-2: #161d2a; --surface-3: #1e2737; --surface-pressed: #273242; --ink: #eef1f5; --ink-2: #d4dae2; --ink-3: #aeb7c2; --muted: #8b95a1; --muted-2: #6f7884; --muted-3: #4d5663; --line: #273040; --line-soft: #1a2230; --blue-soft: rgba(77, 159, 255, 0.16); --coral-soft: rgba(255, 122, 92, 0.18); --coral-ink: #ff9277; background: #06080c; min-height: 100vh; color: var(--ink); } /* 1a · AURORA — 상단에 은은히 번지는 네온 오로라 (고정, 비클릭) */ body.neon-dark::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 42% at 18% -8%, color-mix(in srgb, var(--nf-color) 26%, transparent) 0%, transparent 60%), radial-gradient(48% 38% at 88% -6%, color-mix(in srgb, var(--nf-color2) 22%, transparent) 0%, transparent 58%), radial-gradient(70% 50% at 50% 116%, color-mix(in srgb, var(--neon-violet) 14%, transparent) 0%, transparent 60%); opacity: calc(0.55 + 0.25 * var(--nf-glow)); transition: opacity .4s var(--ease); } /* 미세한 그리드 텍스처 — 코딩/테크 무드 (아주 약하게) */ body.neon-dark::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%); opacity: .5; } /* 다크에서 메인 컨텐츠가 배경 위에 뜨도록 */ body.neon-dark .container, body.neon-dark main { position: relative; z-index: 1; } /* ============================================================ 2 · HEADER — 글라스 + 네온 하단 라인 ============================================================ */ body.neon-line .app-header { position: sticky; } :is(body.neon-dark, html.neon-dark body) .app-header { background: color-mix(in srgb, #06080c 72%, transparent); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom-color: transparent; } body.neon-line .app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--nf-line-bg); box-shadow: 0 0 calc(6px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 60%, transparent), 0 0 calc(16px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 30%, transparent); z-index: 1; } /* 브랜드 워드마크 — 글로우 + 빛나는 캐럿 */ body.neon-dark .brand-word { text-shadow: 0 0 calc(14px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 22%, transparent); } body.neon-dark .brand-caret { background: var(--nf-color); box-shadow: 0 0 calc(8px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 80%, transparent); } /* 상단 네비 — 활성 항목에 네온 밑줄 글로우 */ body.neon-dark .app-nav__item { color: var(--ink-3); } body.neon-dark .app-nav__item:hover { color: var(--ink); } body.neon-dark .app-nav__item.is-active { color: var(--ink); } /* 활성 밑줄 글로우는 extra.css 의 .app-nav__item.is-active::after 가 담당 */ /* 아이콘 버튼 — 호버 시 네온 링 */ body.neon-dark .icon-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 40%, transparent), var(--glow-sm); } /* ============================================================ 3 · BUTTONS — primary / secondary / primary-outline 의 네온 표현은 extra.css 의 "버튼" 섹션(단일 소스)에서 관리합니다 (중복 제거). primary 는 거기서 시그니처 그라데이션 글로우로 정의됨. ============================================================ */ body.neon-dark .btn--ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } /* ============================================================ 4 · FILTER BAR + CHIPS ============================================================ */ :is(body.neon-dark, html.neon-dark body) .filter-bar { background: color-mix(in srgb, #06080c 80%, transparent); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); } body.neon-dark .chip { background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-soft); } body.neon-dark .chip:hover { box-shadow: inset 0 0 0 1px var(--line); } body.neon-calm .chip.is-active { background: color-mix(in srgb, var(--nf-color) 12%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 72%, transparent), var(--glow-sm); } body.neon-calm .chip.is-active .chip__count { color: var(--ink-3); } /* ============================================================ 5 · HERO — 글로우 eyebrow + 그라데이션 강조어 ============================================================ */ body.neon-calm .hero__eyebrow { background: color-mix(in srgb, var(--nf-color) 10%, transparent); color: color-mix(in srgb, var(--nf-color) 90%, white 10%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 45%, transparent), 0 0 calc(10px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 14%, transparent); } body.neon-calm .hero__eyebrow .pulse { background: var(--nf-color); box-shadow: 0 0 calc(8px * var(--nf-glow)) var(--nf-color); animation: vb-neon-pulse 1.8s ease-out infinite; } /* 강조어(전시장 등) → 흐르는 다색 네온 그라데이션 텍스트. inline-block + 넉넉한 하단 패딩으로 italic 글리프가 background-clip:text 에 잘리지 않게 함. filter 글로우는 일부 브라우저(특히 Safari)에서 background-clip:text 와 함께 글리프 하단을 잘라내므로 쓰지 않음 — 글로우 없이도 다색 그라데이션 자체가 충분히 시그니처. */ body.neon-dark .hero h1 em { font-style: italic; display: inline-block; /* 패딩으로 background-clip:text 의 클립 박스를 사방 넉넉히 키우고, 같은 크기의 음수 마진으로 레이아웃 위치/줄높이는 그대로 유지. → italic 글리프가 위·아래·좌·우 어느 변에서도 절대 안 잘림. */ padding: 0.18em 0.12em 0.3em; margin: -0.18em -0.12em -0.3em; background: var(--grad-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: vb-grad-shift 7s linear infinite alternate; } body.neon-dark .hero__stat { background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); } body.neon-dark .hero__stat b { color: var(--ink); } /* ============================================================ 6 · CARDS — 다크 글라스 + 네온 호버 ============================================================ */ body.neon-dark .post-card { background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); transition: transform var(--dur) var(--ease-out-soft), box-shadow var(--dur) ease; } body.neon-calm .post-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 55%, transparent), 0 18px 40px rgba(0, 0, 0, 0.5), var(--glow-md); } body.neon-dark .post-card__thumb { background: #0b0f17; } body.neon-dark .post-card__thumb--fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--nf-color) 22%, transparent), transparent 70%); pointer-events: none; } :is(body.neon-dark, html.neon-dark body) .post-card__cat, :is(body.neon-dark, html.neon-dark body) .like-btn { background: color-mix(in srgb, #0b0f17 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); } :is(body.neon-dark, html.neon-dark body) .like-btn.is-liked { background: var(--coral); color: #fff; box-shadow: 0 0 calc(14px * var(--nf-glow)) color-mix(in srgb, var(--coral) 55%, transparent); } /* 섹션 배지 — 네온 코랄 글로우 */ body.neon-dark .section__badge { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 35%, transparent); } /* ============================================================ 7 · TECH CHIPS / DETAIL ============================================================ */ :is(body.neon-dark, html.neon-dark body) .tech-chip { background: color-mix(in srgb, var(--nf-color) 15%, transparent); color: color-mix(in srgb, var(--nf-color) 80%, white 20%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 30%, transparent); } body.neon-dark .detail-card { background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: inset 0 0 0 1px var(--line-soft); } body.neon-dark .detail__thumb { box-shadow: inset 0 0 0 1px var(--line-soft); } body.neon-dark .meta-link { color: var(--nf-color); } /* ============================================================ 8 · FORMS — 포커스 시 네온 글로우 링 ============================================================ */ body.neon-dark .input, body.neon-dark .textarea, body.neon-dark .select { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } body.neon-dark .input:hover, body.neon-dark .textarea:hover, body.neon-dark .select:hover { box-shadow: inset 0 0 0 1px var(--muted-3); } body.neon-dark .input:focus, body.neon-dark .textarea:focus, body.neon-dark .select:focus { box-shadow: inset 0 0 0 1.5px var(--nf-color), var(--glow-sm); } body.neon-calm .cat-radio.is-active { background: color-mix(in srgb, var(--nf-color) 12%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nf-color) 55%, transparent), var(--glow-sm); } body.neon-dark .dropzone__icon { background: color-mix(in srgb, var(--nf-color) 16%, transparent); color: var(--nf-color); box-shadow: var(--glow-sm); } /* ============================================================ 9 · MOBILE TABS / MISC ============================================================ */ body.neon-dark .mobile-tabs { background: color-mix(in srgb, #06080c 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--line-soft), 0 -8px 24px rgba(0, 0, 0, 0.4); } body.neon-calm .mobile-tabs__item.is-active { color: var(--nf-color); } body.neon-calm .mobile-tabs__item.is-active svg { filter: drop-shadow(0 0 calc(7px * var(--nf-glow)) color-mix(in srgb, var(--nf-color) 75%, transparent)); } :is(body.neon-dark, html.neon-dark body) .toast { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-color) 40%, transparent), var(--glow-md); } /* 부드러운 테마 전환 */ body { transition: background .3s var(--ease); }