/* 탐색 기록 갈래선과 번호 배지(2026-10-15). 실앱 .fv-kids 엣지와 .addr-num 배지를 랜딩 크기로 키운 것.
   실앱 값: 엣지 1.5px #1e6e43 불투명도 .55, 배지 15px 높이 9.5px 글자 연초록 바탕(#d9e7d2) 초록 테두리. */
.br-host { position: relative; }
.br-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.br-svg path { fill: none; stroke-linecap: butt; }
.br-bed { stroke: rgba(30, 110, 67, .13); stroke-width: 2px; }
.br-ink { stroke: #1e6e43; stroke-opacity: .55; stroke-width: 2px; }
/* 팔꿈치는 줄기가 행 높이에 닿는 순간 짧게 뻗는다 */
.br-elbow { stroke-dashoffset: var(--len); transition: stroke-dashoffset .28s cubic-bezier(.23, 1, .32, 1); }
.br-elbow.on { stroke-dashoffset: 0; }

.addr-num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px;
  background: #d9e7d2; color: #1e6e43; border: 1.5px solid #1e6e43;
  font: 700 13.5px/1 "Jost", "Noto Sans KR", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  opacity: .38; transform: scale(.92);
  transition: opacity .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1);
}
/* 행(.br-node)은 서로 형제로 둔다(들여쓰기는 padding). 중첩하면 부모의 .reached 가 자식 배지까지 켠다 */
.br-node.reached .addr-num { opacity: 1; transform: scale(1); }
.addr-num svg { width: 15px; height: 15px; }
/* 닻 라벨 = 형광펜 밑칠(실앱 .tree-row.anchor-label .label, --hl #fff3c4) */
.br-anchor { background: linear-gradient(transparent 58%, #fff3c4 58%); border-radius: 3px; padding: 0 2px; margin: 0 -2px; }

/* 어두운 판(2026-10-15 20:08): 실앱 body.dark 문법. 엣지 = --accent #9bcca9(불투명도 .55 그대로), 배지 = accent-soft #1b2a20 바탕에
   #9bcca9 테두리와 글자, 닻 밑칠 = 밤 형광펜 --hl #453b17 */
html[data-theme="dark"] .br-bed { stroke: rgba(155, 204, 169, .14); }
html[data-theme="dark"] .br-ink { stroke: #9bcca9; }
html[data-theme="dark"] .addr-num { background: #1b2a20; color: #9bcca9; border-color: #9bcca9; }
html[data-theme="dark"] .br-anchor { background: linear-gradient(transparent 58%, #453b17 58%); }

@media (max-width: 560px) {
  .addr-num { min-width: 26px; height: 26px; padding: 0 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .br-elbow, .addr-num { transition: none; }
}