/* =============================================================================
   지도 마커 — **앱과 같은 모양**이다 (2026-08-31 지시).
   마크업은 `public/js/map_marker.js` 한 곳이고, 이 파일이 그 옷이다.
   메인의 미리보기 지도와 촬영지 지도가 같이 싣는다.

   ── 왜 평범한 CSS 인가 ──────────────────────────────────────────────────────
   메인은 Tailwind 를 쓰지만 마커는 예외다. 마커 DOM 은 네이버 지도 SDK 가 만들고,
   Tailwind CDN 은 그때그때 클래스를 보고 스타일을 만들어 준다 — 마커 수백 개면
   그만큼 늦다. (이 판단은 옛 `landing.html` 의 `.fp-pin` 주석에 있던 것이고,
   여기로 옮겨 왔다.)

   ── 앱에서 옮겨 온 값 ───────────────────────────────────────────────────────
   원본은 `app/lib/core/ui/map/fr_cover_pin.dart`. 비율로 적혀 있어 크기만 바꿔
   그대로 옮겼다 — 한 변 44px 기준으로 액자 2px(×0.045) · 바깥 모서리 11px(×0.26).
   **안쪽 모서리는 적지 않는다** — CSS 가 `바깥 − 테두리 = 9px` 로 알아서 내는데,
   그 값이 앱의 `한 변 × 0.20 = 8.8px` 과 사실상 같다.

   **배지는 없다.** 앱이 배지를 다는 자리는 코스 순번 · 코스에 담김 · 곁들이는 장소
   (맛집·카페·관광지) · 줌아웃했을 때의 작품 커버 넷인데, 이 두 웹 지도에는 그중
   어느 것도 없다 — 촬영지 핀뿐이다. 그러니 배지를 다는 쪽이 앱과 덜 닮는다.
   ========================================================================== */

.fr-pin {
  --fr-brand: #14bced;
  /* 사진 없는 타일의 바탕 — 앱의 `_kPhotolessFill`. **브랜드색이 아니다**:
     그렇게 칠했더니 사진 없는 곳이 전국에 큼직한 하늘색 사각형으로 서서 사진
     있는 곳보다 더 눈에 띄었다(2026-08-20). 지도 스타일을 안 타는 중간 회색. */
  --fr-photoless: #94a3b8;
  --fr-brand-lit: #5ed1f3; /* 앱의 `frSelectedBorderColor` — 브랜드에 흰색 32% */
  --fr-frame: #fff;

  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  /* 그림자는 앱에 없다 — 지도 타일 위에서 흰 액자가 이미 사진을 떼어 놓는다.
     다만 웹 지도는 밝은 타일이라 액자만으로는 가장자리가 묻혀, 아주 옅게 깐다. */
  box-shadow: 0 2px 6px rgb(15 23 42 / 24%);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

/* ── 촬영지 핀 ────────────────────────────────────────────────────────────── */

.fr-pin {
  width: 44px;
  height: 44px;
  border: 2px solid var(--fr-frame);
  border-radius: 11px;
  /* 사진은 액자 **안쪽**에만 있어야 한다 — 기본값(border-box)이면 사진이 흰
     테두리 밑으로 깔려, 반투명 액자처럼 가장자리가 지저분해진다. */
  background-clip: padding-box;
  background-color: var(--fr-photoless);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

/* 사진이 없는 자리 — 앱의 자리표시 타일(회색 면 + 흰 사진 아이콘). */
.fr-pin--blank {
  background-color: var(--fr-photoless);
}

.fr-pin__glyph {
  display: grid;
  place-items: center;
  color: #fff;
}

/* ── 고른 것 ──────────────────────────────────────────────────────────────── */
/*
 * 앱은 1.25배로 **다시 굽고** 밝은 브랜드 테두리를 두르고 아래로 꼬리를 뻗는다.
 * 겹친 무리에서 테두리 색만으로는 찾기 어렵기 때문이다 — 한 치수 커지면 윤곽이
 * 먼저 눈에 들어온다. 여기는 **1.5배(66)** 다(위 `SELECTED_PX` 의 이유).
 *
 * ⚠️ **`transform: scale` 로 키우지 않는다.** 크기를 실제로 준다 — 네이버의
 *    `anchor` 는 변형 전 크기를 기준으로 잡아서, scale 로 키우면 꼬리 끝이 좌표를
 *    안 가리킨다(`map_marker.js` 의 그 주석).
 */
.fr-pin.is-on {
  width: 66px;
  height: 66px;
  border-width: 3px;
  border-radius: 16px;
  border-color: var(--fr-brand-lit);
  z-index: 2;
  box-shadow:
    0 4px 14px rgb(15 23 42 / 30%),
    0 0 0 4px color-mix(in srgb, var(--fr-brand-lit) 28%, transparent);
  /* 고른 순간 **좌표에서 튀어나온다** — 꼬리 끝(아래 가운데)을 축으로 삼아야
     그 끝이 제자리에 머문 채 액자만 커진다. */
  transform-origin: 50% calc(100% + 13px);
  animation: fr-pin-pop 0.26s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes fr-pin-pop {
  0% {
    transform: scale(0.62);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 사진 없는 자리를 골랐을 때도 회색으로 남지 않게 — 액자만 브랜드로 갈린다. */
.fr-pin.is-on .fr-pin__glyph svg {
  width: 28px;
  height: 28px;
}

/* 꼬리 — **밝은 브랜드색**이라 액자의 일부로 읽힌다. 꼭짓점이 좌표를 가리킨다.
   밑변 반폭은 앱과 같은 `꼬리 × 0.85`(13 × 0.85 ≈ 11). */
.fr-pin.is-on::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 13px solid var(--fr-brand-lit);
  transform: translateX(-50%);
}

/* 「동작 줄이기」면 튀어나오지 않는다 — 크기와 색은 그대로다(그것이 고른 표시다). */
@media (prefers-reduced-motion: reduce) {
  .fr-pin.is-on {
    animation: none;
  }
}

.fr-pin:hover,
.fr-pin:focus-visible {
  box-shadow: 0 4px 12px rgb(15 23 42 / 32%);
  outline: none;
  z-index: 3;
}

.fr-pin:not(.is-on):hover,
.fr-pin:not(.is-on):focus-visible {
  transform: scale(1.08);
}

/* 고른 것은 hover 로 더 커지지 않는다 — 이미 제일 큰 자리이고, 여기서 또 키우면
   팝 애니메이션이 끝나자마자 한 번 더 튄다. */
.fr-pin.is-on:hover,
.fr-pin.is-on:focus-visible {
  transform: none;
}

/* ── 점은 여기 없다 ──────────────────────────────────────────────────────── */
/*
 * 붐벼서 물러난 자리(`.fr-dot`)의 규칙이 여기 있었다. 2026-08-31 에 **캔버스**로
 * 옮겼다 — `public/js/map_dots.js` 가 지름·테두리·색·그림자·1.35배를 전부 갖는다.
 *
 * 옮긴 이유는 값이다: 점 하나가 마커 하나(=DOM 하나)이던 시절, 전국 뷰의 4,540개가
 * 줌 한 칸에 **13.4초**를 먹었다(그 파일 머리말에 실측 표가 있다).
 *
 * ⚠ 그러니 점의 모양은 **여기서 고치지 않는다.** CSS 로 되살리면 한 모양을 두 곳이
 *   갖게 되고, 캔버스 쪽만 고쳐지는 날 화면에서는 아무 일도 안 일어난다.
 */

@media (prefers-reduced-motion: reduce) {
  .fr-pin {
    transition: none;
  }
}