/* Vibelit 브랜드 표면 — site.css(범용 Tailwind 빌드) 위에 얹는 앱별 리컬러.
 *
 * site.css 는 lovinn 랜딩에서 가져온 Tailwind v4 빌드 산출물이라 앱 색이 들어 있지 않다.
 * 브랜드는 전적으로 이 파일에서 나온다 — 다른 앱으로 이식할 때 여기만 갈아끼우면 된다.
 * 값의 출처: apps/mobile/lib/theme/gradients.ts (GRADIENTS.brand, CATEGORY_COLORS).
 */
:root {
  --brand-from: #7C3AED;  /* violet — GRADIENTS.brand[0] */
  --brand-to:   #EC4899;  /* pink   — GRADIENTS.brand[1] */
}

/* 로고 타일 · 주 CTA — 135° 대각(앱의 GRADIENT_DIRECTION 과 동일) */
.brand-mark,
.brand-fill {
  background-image: linear-gradient(135deg, var(--brand-from), var(--brand-to));
}
.brand-fill {
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, .25), 0 4px 6px -4px rgba(236, 72, 153, .25);
}
.brand-fill:hover { filter: brightness(1.05); }

/* 다운로드 섹션 배경 — 위아래 흰색으로 페이드되는 옅은 브랜드 워시 */
.brand-wash {
  background-image: linear-gradient(to bottom, #fff, rgba(124, 58, 237, .06) 50%, #fff);
}

/* 폰 목업 뒤 글로우 */
.brand-glow {
  background-image: linear-gradient(to top right,
    rgba(124, 58, 237, .35), rgba(168, 85, 247, .25), rgba(236, 72, 153, .3));
}

/* features 섹션 배경 블롭 */
.brand-blob-a { background-color: rgba(124, 58, 237, .10); }
.brand-blob-b { background-color: rgba(236, 72, 153, .10); }

/* 렌즈/혜택 카드 — 색은 인라인 --lens 로 주입(앱 CATEGORY_COLORS 와 같은 값) */
.lens-ico {
  background-color: color-mix(in srgb, var(--lens) 12%, transparent);
  color: var(--lens);
}
.lens-border { border-color: color-mix(in srgb, var(--lens) 28%, transparent); }

/* color-mix 미지원 브라우저 폴백 — 색 대신 중립 회색으로 떨어지되 레이아웃은 유지 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .lens-ico { background-color: rgba(0, 0, 0, .05); color: var(--lens); }
  .lens-border { border-color: rgba(0, 0, 0, .12); }
}

/* 이미지·영상이 width/height 속성 때문에 비율이 깨지지 않도록(랜딩 공통 안전장치).
 *
 * 반드시 `@layer base` 안에 둔다. 이 파일의 나머지 규칙은 레이어 밖이라 site.css 의
 * `@layer utilities` 를 **명시도와 무관하게** 전부 이기는데(레이어 없는 선언이 항상 우선),
 * 이 규칙이 레이어 밖에 있으면 `h-full` 같은 유틸리티까지 눌러버린다.
 * 실제로 히어로 배경이 900px 대신 802px 로 줄어 아래에 빈 띠가 생겼다.
 * base 는 utilities 보다 아래 레이어라 유틸리티가 정상적으로 이긴다. */
@layer base {
  img, video { max-width: 100%; height: auto; display: block; }
}

/* ── site.css 빌드에 없는 유틸리티 보충 ────────────────────────────────────
 * site.css 는 lovinn 이 실제로 쓴 클래스만 담긴 빌드 산출물이라 아래 셋이 빠져 있다.
 * scripts/landing/build.py 의 audit() 가 이 누락을 잡아낸다.
 *
 * animate-fade-in-up 은 lovinn 마크업에도 쓰였지만 CSS 가 없어 그쪽에서는
 * 아무 동작도 하지 않는다(요소는 보이므로 무해). 여기서 실제로 정의해 살린다.
 */
@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; }
.animate-fade-in-up.delay-100 { animation-delay: .1s; }
.animate-fade-in-up.delay-200 { animation-delay: .2s; }
.animate-fade-in-up.delay-300 { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up { animation: none; }
}

.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media (min-width: 48rem) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 시즌 퀴즈 (/quiz/…) ─────────────────────────────────────────────────────
 * 모바일 우선: 16px 좌우 여백, 탭 영역 44px 이상, 375px 에서 가로 스크롤 없음.
 * 결과 쪽 배경 그라데이션은 인라인 --q-from/--q-to 로 주입(앱 SEASON_DISPLAY.gradient 와 같은 값).
 */
.quiz-main { padding: 6rem 0 4rem; min-height: 70vh; background: linear-gradient(to bottom, #fff, rgba(124, 58, 237, .05) 60%, #fff); }
.quiz-wrap { width: 100%; max-width: 32rem; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.quiz-card { background: rgba(255, 255, 255, .85); border: 1px solid #e5e7eb; border-radius: 1.5rem; padding: 1.5rem 1.25rem; box-shadow: 0 10px 30px -12px rgba(76, 29, 149, .18); }
.quiz-card[hidden], .quiz-step[hidden], .quiz-back[hidden] { display: none; }
.quiz-kicker { font-size: .8125rem; font-weight: 600; color: var(--brand-from); letter-spacing: .02em; margin: 0 0 .5rem; }
.quiz-title { font-size: 1.75rem; line-height: 1.25; font-weight: 800; color: #0f172a; margin: 0 0 .75rem; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-sub { font-size: 1rem; line-height: 1.6; color: #475569; margin: 0 0 1.5rem; }
.quiz-start, .quiz-share, .quiz-retry { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; border-radius: 9999px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 0; box-sizing: border-box; text-decoration: none; }
.quiz-start { color: #fff; }
.quiz-note { font-size: .8125rem; line-height: 1.5; color: #64748b; margin: 1rem 0 0; }

.quiz-top { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; }
.quiz-back { min-height: 2.75rem; min-width: 2.75rem; padding: 0 .5rem; background: none; border: 0; color: #475569; font-size: .9375rem; cursor: pointer; }
.quiz-progress { margin: 0 0 0 auto; font-size: .9375rem; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.quiz-bar { height: .375rem; border-radius: 9999px; background: #e5e7eb; overflow: hidden; margin: .25rem 0 1.25rem; }
.quiz-bar-fill { display: block; height: 100%; width: 0; border-radius: 9999px; background-image: linear-gradient(135deg, var(--brand-from), var(--brand-to)); transition: width .25s ease; }
.quiz-q { font-size: 1.25rem; line-height: 1.4; font-weight: 700; color: #0f172a; margin: 0 0 1rem; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-opts { display: grid; gap: .625rem; }
.quiz-opt { display: block; width: 100%; min-height: 3.25rem; padding: .75rem 1rem; text-align: left; font-size: 1rem; line-height: 1.4; color: #0f172a; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 1rem; cursor: pointer; box-sizing: border-box; transition: border-color .15s, background-color .15s; }
.quiz-opt:hover { border-color: var(--brand-from); }
.quiz-opt[aria-pressed="true"] { border-color: var(--brand-from); background: rgba(124, 58, 237, .08); }
.quiz-start:focus-visible, .quiz-opt:focus-visible, .quiz-back:focus-visible, .quiz-share:focus-visible, .quiz-retry:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }

.quiz-result { text-align: center; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--q-from) 35%, #fff), #fff 55%); }
.quiz-emoji { font-size: 3rem; line-height: 1; margin: 0 0 .5rem; }
.quiz-label { display: inline-block; font-size: .875rem; font-weight: 700; color: #0f172a; padding: .25rem .875rem; border-radius: 9999px; background: linear-gradient(135deg, var(--q-from), var(--q-to)); margin: 0 0 .75rem; }
.quiz-headline { font-size: 1.5rem; line-height: 1.35; font-weight: 800; color: #0f172a; margin: 0 0 .75rem; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-body { font-size: 1rem; line-height: 1.65; color: #334155; margin: 0 0 1.5rem; text-align: left; }
.quiz-h2 { font-size: .875rem; font-weight: 700; color: #475569; margin: 0 0 .75rem; }
.quiz-reps, .quiz-more { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.quiz-reps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .75rem; }
.quiz-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quiz-chip { display: flex; flex-direction: column; align-items: center; gap: .375rem; min-width: 0; }
.quiz-swatch { display: block; width: 100%; height: 2rem; border-radius: .75rem; border: 1px solid rgba(15, 23, 42, .08); }
.quiz-chip-rep .quiz-swatch { height: 4.25rem; border-radius: 1rem; }
.quiz-chip-name { font-size: .75rem; line-height: 1.3; color: #334155; text-align: center; overflow-wrap: anywhere; }
.quiz-chip-rep .quiz-chip-name { font-size: .8125rem; font-weight: 600; }
.quiz-cta-lead { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 1.75rem 0 .75rem; }
.quiz-stores { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.quiz-stores > a { display: block; }
.quiz-stores button { width: 100%; justify-content: flex-start; }
.quiz-actions { display: grid; gap: .625rem; margin-top: 1.25rem; }
.quiz-share { background: #0f172a; color: #fff; }
.quiz-retry { background: #fff; color: #0f172a; border: 1.5px solid #cbd5e1; }
.quiz-toast { min-height: 1.25rem; margin: .75rem 0 0; font-size: .8125rem; color: #475569; }
@media (min-width: 48rem) { .quiz-title { font-size: 2.25rem; } .quiz-headline { font-size: 1.75rem; } }

/* ── 추가 테스트(웜쿨·얼굴형·테토에겐) 결과 쪽 + 테스트 간 링크 ───────────────── */
.quiz-meter { margin: 0 0 1.5rem; }
.quiz-meter[hidden], .quiz-second[hidden], .quiz-second a[hidden] { display: none; }
.quiz-meter-track { height: .625rem; border-radius: 9999px; background: #e5e7eb; overflow: hidden; }
.quiz-meter-fill { display: block; height: 100%; width: 0; border-radius: 9999px; background-image: linear-gradient(90deg, var(--q-from), var(--q-to)); transition: width .6s ease; }
.quiz-meter-text { margin: .5rem 0 0; font-size: .9375rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.quiz-sec { text-align: left; margin: 1.25rem 0 0; padding: 1rem 1.125rem; background: rgba(255, 255, 255, .7); border: 1px solid #e5e7eb; border-radius: 1rem; }
.quiz-sec-h { font-size: .9375rem; font-weight: 700; color: #0f172a; margin: 0 0 .5rem; }
.quiz-list { list-style: disc; margin: 0; padding: 0 0 0 1.125rem; display: grid; gap: .375rem; font-size: .9375rem; line-height: 1.55; color: #334155; }
.quiz-second { margin: 1.25rem 0 0; font-size: .9375rem; color: #475569; }
.quiz-second a { color: var(--brand-from); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.quiz-next { margin: 1.5rem 0 0; padding: 1rem; border-radius: 1rem; background: rgba(124, 58, 237, .06); }
.quiz-next p { margin: 0 0 .75rem; font-size: .9375rem; font-weight: 600; color: #0f172a; }
.quiz-tests { margin: 2rem 0 0; }
.quiz-tests-h { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 .75rem; }
.quiz-tests-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.quiz-test-card { display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: .75rem 1rem; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 1rem; text-decoration: none; transition: border-color .15s; }
.quiz-test-card:hover { border-color: var(--brand-from); }
.quiz-test-card:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }
.quiz-test-thumb { width: 4rem; height: 3rem; object-fit: cover; border-radius: .625rem; flex-shrink: 0; }
.quiz-test-text { display: flex; flex-direction: column; min-width: 0; }
.quiz-test-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
.quiz-test-desc { font-size: .8125rem; color: #64748b; overflow-wrap: anywhere; }
.quiz-test-info { font-size: .75rem; font-weight: 600; color: var(--brand-from); margin-top: .125rem; }
.quiz-tests-all { margin: .875rem 0 0; text-align: center; font-size: .9375rem; }
.quiz-tests-all a { color: var(--brand-from); font-weight: 700; text-decoration: none; }
.quiz-foot-tests { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 2.5rem 0 0; font-size: .8125rem; }
.quiz-list li::marker { color: var(--brand-from); }

/* 색 고르기(웜쿨) — 색 두 칸 + '비슷' 한 줄. 칸은 크게(휴대폰을 얼굴 옆에 대고 비교한다) */
.quiz-chip-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.quiz-opt-chip { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; padding: .5rem; text-align: center; }
.quiz-opt-swatch { display: block; height: 7.5rem; border-radius: .75rem; border: 1px solid rgba(15, 23, 42, .08); }
.quiz-opt-label { font-weight: 600; }
.quiz-opt-same { text-align: center; color: #475569; }
/* 얼굴형 그림 선택지 */
.quiz-opt-ico-row { display: flex; align-items: center; gap: .875rem; }
.quiz-opt-ico { width: 2.5rem; height: 3.125rem; flex-shrink: 0; color: #334155; }
.quiz-face { display: block; width: 5.5rem; height: 7.15rem; margin: 0 auto .75rem; }
.quiz-meter-level { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 800; color: #0f172a; }

/* ── 테스트 모음(/tests/)·홈 섹션 ─────────────────────────────────────────── */
.hub-main { padding: 6rem 0 4rem; background: linear-gradient(to bottom, #fff, rgba(124, 58, 237, .05) 50%, #fff); }
.hub-home { padding: 5rem 0; background: linear-gradient(to bottom, #fff, rgba(236, 72, 153, .05)); }
.hub-wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.hub-head { text-align: center; max-width: 40rem; margin: 0 auto 2rem; }
.hub-title { font-size: 2rem; line-height: 1.25; font-weight: 800; color: #0f172a; margin: 0 0 .75rem; word-break: keep-all; overflow-wrap: anywhere; }
.hub-sub { font-size: 1rem; line-height: 1.65; color: #475569; margin: 0; }
.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.hub-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 1.5rem; overflow: hidden; text-decoration: none; box-shadow: 0 10px 30px -14px rgba(76, 29, 149, .22); transition: transform .2s ease, box-shadow .2s ease; }
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(76, 29, 149, .32); }
.hub-card:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 3px; }
.hub-img { position: relative; display: block; aspect-ratio: 4 / 3; background: #f1f5f9; }
.hub-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-tag { position: absolute; bottom: .75rem; padding: .25rem .75rem; border-radius: 9999px; font-size: .8125rem; font-weight: 700; color: #0f172a; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); }
.hub-tag-l { left: .75rem; }
.hub-tag-r { right: .75rem; }
.hub-body { display: flex; flex-direction: column; gap: .375rem; padding: 1.125rem 1.25rem 1.25rem; flex: 1; }
.hub-info { font-size: .8125rem; font-weight: 700; color: var(--brand-from); }
.hub-card-title { font-size: 1.25rem; line-height: 1.35; font-weight: 800; color: #0f172a; margin: 0; word-break: keep-all; }
.hub-card-desc { font-size: .9375rem; line-height: 1.55; color: #475569; }
.hub-go { margin-top: auto; padding-top: .5rem; font-size: .9375rem; font-weight: 700; color: var(--brand-from); }
.hub-note { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: #94a3b8; }
.hub-all { margin: 2rem 0 0; text-align: center; }
.hub-all-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 2rem; border-radius: 9999px; color: #fff; font-weight: 700; text-decoration: none; }
@media (min-width: 40rem) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-title { font-size: 2.5rem; } }
.quiz-q, .quiz-title, .quiz-headline, .hub-title, .hub-card-title { text-wrap: pretty; }
.quiz-opt-label { font-size: .9375rem; line-height: 1.3; text-wrap: balance; }
.quiz-face g { fill: color-mix(in srgb, var(--q-to) 28%, #fff); stroke: var(--brand-from); }