/* famousbros 공용 디자인 부품 v2 (2026-10-16) — 정본 G:\workspace\DESIGN.md.
   🔥 이 파일은 각 저장소 static/css/fb.css 로 **그대로 복사**한다(고치려면 여기서 고치고 다시 복사). 사이트별 차이는 사이트 CSS 의 --fb-* 값으로만 낸다.
   레퍼런스: navbar.gallery(떠 있는 내비) · liquid-glass(유리 질감) · supahero(히어로) · cta.gallery(CTA) · footer.design(푸터) · scrolltide(스크롤 등장) · 3dicons(CC0 3D 아이콘).
   SSR MPA 그대로 — 이 파일에는 JS 가 필요한 부품이 없다. */

:root {
  /* 사이트가 덮어쓰는 값(기본값은 중립 회색 + 보라) — 대비 실측은 사이트 CSS 주석에 남긴다 */
  --fb-bg: #f6f7f9;
  --fb-surface: #ffffff;
  --fb-ink: #191f28;          /* --fb-surface 위 16.9:1 */
  --fb-muted: #4e5968;        /* --fb-surface 위 7.4:1 */
  --fb-line: #e5e8eb;
  --fb-accent: #5b4ce0;       /* 흰 글자 6.1:1 */
  --fb-on-accent: #ffffff;
  --fb-display: inherit;      /* 제목 글꼴 — 사이트의 웹폰트 1종 */
  --fb-display-weight: 800;   /* 굵기가 하나뿐인 글꼴(Black Han Sans 등)은 400 — 800 을 주면 가짜 굵게로 뭉갠다 */

  --fb-r-s: 12px;
  --fb-r-m: 20px;
  --fb-r-l: 28px;
  --fb-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
  --fb-glass: color-mix(in srgb, var(--fb-surface) 70%, transparent);
  --fb-glass-line: color-mix(in srgb, var(--fb-ink) 10%, transparent);
  --fb-max: 1080px;          /* 내비·푸터 폭 — 사이트 본문 폭(.wrap)에 맞춘다 */
  --fb-nav-h: 64px;
  --fb-tab-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fb-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    --fb-glass: color-mix(in srgb, var(--fb-surface) 62%, transparent);
    --fb-glass-line: color-mix(in srgb, #fff 14%, transparent);
  }
}

/* ── 유리 ─────────────────────────────────────────────────────────
   반사광(위 1px 하이라이트) + 흐림. backdrop-filter 를 모르는 브라우저는 불투명 면으로 떨어진다. */
.fb-glass {
  background: var(--fb-surface);
  border: 1px solid var(--fb-glass-line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), var(--fb-shadow);
}
/* 🔥 흐림은 요소 자신이 아니라 ::before 층에 건다. backdrop-filter 가 걸린 요소는 안쪽 position: fixed 의
   기준 상자가 되어, 폰에서 탭바(.fb-nav__links)가 화면 아래가 아니라 막대 안에 붙었다(2026-10-16 실측). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fb-glass { position: relative; isolation: isolate; background: transparent; }
  .fb-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: var(--fb-glass);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    pointer-events: none;
  }
}

/* ── 내비: 떠 있는 유리 막대 ─────────────────────────────────────
   마크업: header.fb-nav > div.fb-nav__bar.fb-glass > a.fb-nav__logo + nav.fb-nav__links > a[aria-current]
   폰(<720px)에서는 같은 nav 가 화면 아래 탭바로 내려간다 — 링크를 두 벌 두지 않는다(스크린리더가 내비를 두 번 읽는다). */
.fb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 16px 0;
}
.fb-nav__bar {
  max-width: var(--fb-max);
  margin: 0 auto;
  min-height: var(--fb-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
}
.fb-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--fb-ink);
  text-decoration: none;
  font-family: var(--fb-display);
  font-weight: var(--fb-display-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.fb-nav__logo img, .fb-nav__logo svg { width: 28px; height: 28px; border-radius: 8px; }
.fb-nav__links { display: flex; align-items: center; gap: 4px; }
.fb-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--fb-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.fb-nav__links a:hover { color: var(--fb-ink); background: color-mix(in srgb, var(--fb-ink) 6%, transparent); }
.fb-nav__links a[aria-current] { color: var(--fb-ink); background: color-mix(in srgb, var(--fb-accent) 14%, transparent); }

@media (max-width: 719px) {
  .fb-nav { padding: 8px 12px 0; }
  .fb-nav__bar { min-height: 56px; padding: 0 16px; }
  .fb-nav__links {
    position: fixed;
    z-index: 60;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    min-height: var(--fb-tab-h);
    justify-content: space-around;
    gap: 0;
    padding: 6px;
    border-radius: 999px;
    /* 탭바는 막대(.fb-glass)와 따로 떠 있으니 유리를 다시 입힌다 */
    background: var(--fb-surface);
    border: 1px solid var(--fb-glass-line);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), var(--fb-shadow);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fb-nav__links { background: var(--fb-glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
  }
  .fb-nav__links a { flex: 1 1 0; justify-content: center; padding: 0 6px; font-size: 13px; min-width: 0; }
  .fb-nav__links a[aria-current] { color: var(--fb-accent); }
  /* 탭바가 본문 끝을 가리지 않게 */
  body:has(.fb-nav__links) { padding-bottom: calc(var(--fb-tab-h) + 28px + env(safe-area-inset-bottom)); }
}
/* 바깥 막대가 이미 유리라 그 안의 nav 는 투명(데스크톱) */
@media (min-width: 720px) { .fb-nav__links { background: none; } }

/* ── 버튼 ────────────────────────────────────────────────────────
   주 버튼은 화면에 하나(UIUX.md Von Restorff). 문구는 동사로 구체적으로("검사 시작하기", "여기 클릭" 금지). */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--fb-accent);
  border-radius: 999px;
  background: var(--fb-accent);
  color: var(--fb-on-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--fb-accent) 35%, transparent);
}
.fb-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px color-mix(in srgb, var(--fb-accent) 40%, transparent); }
.fb-btn--ghost { background: transparent; color: var(--fb-ink); border-color: color-mix(in srgb, var(--fb-ink) 22%, transparent); box-shadow: none; }
.fb-btn--ghost:hover { background: color-mix(in srgb, var(--fb-ink) 5%, transparent); box-shadow: none; }
@media (max-width: 719px) { .fb-hero__actions .fb-btn, .fb-cta .fb-btn { width: 100%; } }

.fb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fb-ink);
}
/* 점은 ::after + order:-1 — ::before 는 .fb-glass 의 흐림 층이 쓴다 */
.fb-pill::after { content: ""; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--fb-accent); }

/* ── 히어로 ──────────────────────────────────────────────────────
   홈 첫 화면 하나에만. 할 일 하나 + 3D 아이콘 하나. 배경은 강조색 번짐(메시 그라데이션). */
.fb-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 32px;
  padding: 56px 0 48px;
}
.fb-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40px 0 -20px;   /* 화면 밖으로 넓히면 폰에서 가로 스크롤이 생긴다 — 대신 closest-side 로 상자 안에서 0 까지 옅어지게 */
  background:
    radial-gradient(closest-side at 78% 45%, color-mix(in srgb, var(--fb-accent) 24%, transparent), transparent),
    radial-gradient(closest-side at 12% 85%, color-mix(in srgb, var(--fb-accent) 12%, transparent), transparent);
  pointer-events: none;
}
.fb-hero__h {
  margin: 16px 0 16px;
  font-family: var(--fb-display);
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: var(--fb-display-weight);
  color: var(--fb-ink);
  text-wrap: balance;
  word-break: keep-all;
}
.fb-hero__h em { font-style: normal; color: var(--fb-accent); }
.fb-hero__p { margin: 0; max-width: 46ch; color: var(--fb-muted); font-size: 17px; line-height: 1.7; word-break: keep-all; }
.fb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fb-hero__art { margin: 0; display: grid; place-items: center; }
.fb-hero__art img { width: min(100%, 320px); height: auto; filter: drop-shadow(0 24px 40px color-mix(in srgb, var(--fb-accent) 30%, transparent)); animation: fb-float 6s ease-in-out infinite; }
@keyframes fb-float { 50% { transform: translateY(-12px) rotate(-2deg); } }
@media (max-width: 719px) {
  .fb-hero { grid-template-columns: 1fr; padding: 28px 0 32px; gap: 8px; }
  .fb-hero__art { order: -1; justify-items: start; }
  .fb-hero__art img { width: 120px; }
}

/* ── 구역·카드 ───────────────────────────────────────────────── */
.fb-sec { margin-top: 56px; }
.fb-sec__h { margin: 0 0 8px; font-family: var(--fb-display); font-size: clamp(22px, 3.4vw, 28px); line-height: 1.3; letter-spacing: -0.015em; color: var(--fb-ink); }
.fb-sec__d { margin: 0 0 20px; color: var(--fb-muted); max-width: 62ch; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.fb-card {
  position: relative;
  display: block;
  padding: 20px;
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-r-m);
  background: var(--fb-surface);
  color: var(--fb-ink);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.fb-card:hover, .fb-card:has(a:hover) { transform: translateY(-2px); box-shadow: var(--fb-shadow); border-color: color-mix(in srgb, var(--fb-accent) 35%, var(--fb-line)); }
.fb-card__icon { width: 48px; height: 48px; margin-bottom: 12px; }
.fb-card__t { margin: 0 0 4px; font-weight: 700; font-size: 17px; line-height: 1.4; }
.fb-card__d { margin: 0; color: var(--fb-muted); font-size: 14px; line-height: 1.6; }

/* ── CTA 띠 ──────────────────────────────────────────────────────
   쪽 끝, 푸터 앞에 하나. 제목 한 줄 + 설명 한 줄 + 버튼 하나. */
.fb-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 64px 0 0;
  padding: 40px 32px;
  border-radius: var(--fb-r-l);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.fb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--fb-accent) 20%, transparent), transparent 70%);
}
.fb-cta__icon { width: 72px; height: 72px; }
.fb-cta__h { margin: 0 0 4px; font-family: var(--fb-display); font-size: clamp(20px, 3vw, 26px); line-height: 1.3; color: var(--fb-ink); word-break: keep-all; }
.fb-cta__p { margin: 0; color: var(--fb-muted); }
@media (max-width: 719px) {
  .fb-cta { grid-template-columns: 1fr; padding: 28px 20px; text-align: left; }
  .fb-cta__icon { width: 56px; height: 56px; }
}

/* ── 푸터 ────────────────────────────────────────────────────────
   브랜드(로고·한 줄 소개) | 이 사이트 | famousbros 다른 사이트 | 안내(소개·방침·약관·문의) + 맨 아래 고지. */
.fb-foot { margin-top: 80px; border-top: 1px solid var(--fb-line); background: color-mix(in srgb, var(--fb-surface) 60%, var(--fb-bg)); color: var(--fb-muted); font-size: 14px; }
.fb-foot__in { max-width: var(--fb-max); margin: 0 auto; padding: 48px 20px 32px; display: grid; grid-template-columns: 1.4fr 1fr 1.6fr 1fr; gap: 32px; }
.fb-foot__brand p { margin: 12px 0 0; max-width: 32ch; line-height: 1.6; }
.fb-foot__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fb-ink); }
.fb-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fb-foot a { display: inline-flex; align-items: center; min-height: 36px; color: var(--fb-muted); text-decoration: none; }
.fb-foot a:hover { color: var(--fb-ink); text-decoration: underline; }
.fb-foot__family { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); column-gap: 12px; }
.fb-foot__family a { min-height: 32px; font-size: 13px; }
.fb-foot__bottom { max-width: var(--fb-max); margin: 0 auto; padding: 20px 20px 40px; border-top: 1px solid var(--fb-line); font-size: 13px; line-height: 1.6; }
.fb-foot__bottom p { margin: 0 0 6px; max-width: 80ch; }
@media (max-width: 719px) {
  .fb-foot__in { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-top: 36px; }
  .fb-foot__brand, .fb-foot__fam { grid-column: 1 / -1; }
  .fb-foot a { min-height: 44px; }
}

/* ── 스크롤 등장 ─────────────────────────────────────────────────
   CSS 스크롤 타임라인만(JS 없음). 모르는 브라우저·동작 줄이기 설정에서는 그냥 보인다. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fb-reveal { animation: fb-reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes fb-reveal { from { opacity: 0; transform: translateY(28px) scale(.98); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fb-hero__art img { animation: none; }
  .fb-btn, .fb-card, .fb-nav__links a { transition: none; }
}

:where(.fb-nav, .fb-hero, .fb-cta, .fb-foot, .fb-card) :focus-visible { outline: 2px solid var(--fb-accent); outline-offset: 2px; }