/* Fluno 브랜드 — apps/mobile/theme/colors.ts 의 다크 팔레트.
 * 배경 #0B0B0F · 표면 #15161C/#1E2029 · 액센트 #F5C518(노랑) · 액센트 위 글자 #1A1A1A.
 * lovinn 템플릿은 흰 배경 전제라 헤더·버튼·배지의 배경/글자는 여기 전용 클래스로 바꾼다. */
:root { --bg: #0B0B0F; --surface: #15161C; --surface-high: #1E2029; --accent: #F5C518;
        --accent-ink: #1A1A1A; --text: #F2F2F2; --muted: #9BA0A8; --line: #262833; }

body { background: var(--bg); color: var(--text); }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.ink { color: var(--text); }
.ink-soft { color: var(--muted); }
.accent-text { color: var(--accent); }
.accent-ink { color: var(--accent-ink); }
.sec-dark { background: var(--bg); }
.sec-alt { background: var(--surface); }

.hdr { background: rgba(11, 11, 15, .85); border-color: var(--line); }
.nav-link { color: var(--muted); }
.nav-link:hover { color: var(--text); }
.lang-on { background: var(--accent); color: var(--accent-ink); }
.lang-off { color: var(--muted); }
.lang-off:hover { color: var(--text); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn-store { background: var(--surface-high); border-color: var(--line); color: var(--text); }

.card-dark { background: var(--surface); border-color: var(--line); }
.chip-dark { background: var(--surface-high); border-color: var(--line); color: var(--text); }
.acc-ico { background: rgba(245, 197, 24, .12); color: var(--accent); }
/* 컨셉 카드의 예시 자막 — 앱 쇼케이스의 자막처럼 보이게 */
.sample { background: var(--bg); color: var(--text); border-left: 3px solid var(--accent); }

.brand-fill { background: var(--accent); }
.brand-fill:hover { background: #FFD43B; }
.brand-wash { background: radial-gradient(60% 80% at 80% 50%, rgba(245, 197, 24, .10), transparent 70%), var(--bg); }
.brand-glow { background: radial-gradient(closest-side, rgba(245, 197, 24, .28), transparent); }
.brand-blob-a { background: rgba(245, 197, 24, .08); }
.brand-blob-b { background: rgba(155, 160, 168, .06); }
.dot { background: var(--accent); }

/* 반드시 `@layer base` 안에 둔다. 이 파일의 나머지 규칙은 레이어 밖이라 site.css 의
 * `@layer utilities` 를 명시도와 무관하게 전부 이긴다 — img{height:auto} 가 레이어 밖이면
 * .h-full 같은 크기 유틸리티를 무력화한다(vibelit 에서 히어로가 900px→802px 로 줄었다). */
@layer base {
  img, video { max-width: 100%; height: auto; display: block; }
}

@keyframes fade-in-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.animate-fade-in-up { animation: fade-in-up .6s ease-out both; }

/* 히어로 가림막 — 좁은 화면에서만 폰 합성을 어둡게 눌러 제목·버튼이 읽히게 한다 */
.hero-shade { background: rgba(11, 11, 15, .15); }
@media (max-width: 767px) { .hero-shade { background: rgba(11, 11, 15, .62); } }