/* 섹션 앵커 복사 칩 — main.js initAnchorLinks()가 id를 가진 섹션·조문의 제목 끝에 붙인다(2026-09-06).
   평소에는 보이지 않고 제목 hover 또는 버튼 자체 포커스일 때만 나타난다.
   시네마틱 홈 `/`·`/brand-story` 는 대상 밖(JS 가드) — 필름형 연출에 칩이 끼어들지 않게. */
.c-anchor-link {
  /* 제목 마지막 글자 뒤에 붙는 인라인 칩. 제목 크기가 페이지마다 달라(detail-h2 는 clamp,
     법정 조문은 --font-size-xl) em 기준으로 스케일한다 — button 은 UA 폰트 크기(13px)를
     쓰므로 font-size: inherit 가 없으면 em 이 제목을 따라가지 않는다. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  width: 0.85em;
  height: 0.85em;
  margin-inline-start: 0.3em;
  translate: 0 0.12em;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.16s ease,
    color 0.16s ease,
    background-color 0.16s ease;
}

.c-anchor-link svg {
  width: 0.45em;
  height: 0.45em;
  display: block;
}

/* 노출 조건 — 제목 hover(칩 위로 마우스를 옮기는 동안에도 유지) · 키보드 포커스 · 복사 직후 확인 표시 */
.has-anchor-link:hover > .c-anchor-link,
.c-anchor-link:focus-visible,
.c-anchor-link.is-copied {
  opacity: 1;
}

.c-anchor-link:hover {
  color: var(--color-primary-deep);
  background: var(--color-primary-soft);
}

.c-anchor-link.is-copied {
  color: var(--color-primary-deep);
}

/* 다크 챕터(.detail-dark — 예: /about #history) 위에서는 밝은 쪽으로 뒤집는다 */
.detail-dark .c-anchor-link {
  color: rgba(248, 250, 252, 0.6);
}

.detail-dark .c-anchor-link:hover,
.detail-dark .c-anchor-link.is-copied {
  color: var(--color-ink);
  background: var(--color-glow);
}

/* hover 가 없는 기기에서는 아예 감춘다 — "평소엔 안 보인다"는 규약을 지키려면
   상시 노출(모바일 전 제목에 흐린 칩)이 아니라 비노출이 맞다. 되돌리려면 이 블록만 지우고
   opacity 를 0.45 로 주면 상시 노출이 된다. */
@media (hover: none) and (pointer: coarse) {
  .c-anchor-link {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-anchor-link {
    transition: none;
  }
}