/*
  볼트와너트 가족 줄 1판 — 2026-10-27 대표 지시
  셈·심·점 모든 공개 페이지 맨 위에 같은 모양으로 붙는 얇은 줄.
  왼쪽: 본 사이트(boltandnutt.com)로 가는 바로가기 / 오른쪽: 나머지 두 사이트로 가는 버튼.
  - 세 사이트(sem·sim·jeom)에 같은 파일을 둔다. 고칠 일이 생기면 v2/ 를 새로 만든다(세 곳 모두).
  - 사이트마다 색이 달라도 이 줄은 본 사이트 색(먹색 + 주황 점) 하나로 통일한다. 밝게·어둡게 모두 같은 색.
  - 가로 폭은 각 페이지의 .wrap 을 그대로 써서 아래 로고와 왼쪽 끝을 맞춘다.
*/
.fam {
  --fam-bg: #1b1d1a; --fam-ink: #b9b8b0; --fam-ink-hi: #f6f5f0; --fam-rule: #34372f; --fam-nut: #e0602f;
  position: relative; z-index: 12;
  background: var(--fam-bg); color: var(--fam-ink);
  font: 500 14px/1 "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: -0.01em; word-break: keep-all;
}
.fam-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.fam a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: inherit; text-decoration: none; border-radius: 4px; white-space: nowrap; }
.fam a:hover { color: var(--fam-ink-hi); }
.fam a:focus-visible { outline: 2px solid var(--fam-nut); outline-offset: -2px; }

/* 왼쪽: 본 사이트 */
.fam-home svg { width: 18px; height: 18px; flex: none; color: var(--fam-ink-hi); }
.fam-home b { font-weight: 800; color: var(--fam-ink-hi); letter-spacing: -0.02em; }
.fam-home:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* 오른쪽: 형제 사이트 두 개 */
.fam-sib { list-style: none; margin: 0 -8px 0 0; padding: 0; display: flex; align-items: center; }
.fam-sib li + li { border-left: 1px solid var(--fam-rule); }
.fam-sib a { padding: 0 10px; }
.fam-sib a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fam-dot, var(--fam-nut)); flex: none; }
.fam-sib b { font-weight: 800; font-size: 15px; color: var(--fam-ink-hi); }
.fam-sib a:hover span { color: var(--fam-ink-hi); }
.fam-sib .fam-go { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .14s ease; }
.fam-sib a:hover .fam-go { transform: translateX(2px); opacity: 1; }
.fam-sem { --fam-dot: #5cc596; }
.fam-sim { --fam-dot: #8fc4dd; }
.fam-jeom { --fam-dot: #d3b065; }

/* 좁은 화면: 설명 글을 접고 이름만 */
@media (max-width: 420px) {
  .fam-sib span, .fam-sib .fam-go { display: none; }
  .fam-sib a { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fam-sib .fam-go { transition: none; }
  .fam-sib a:hover .fam-go { transform: none; }
}
@media print { .fam { display: none; } }