/* 사이트 기능 "파크 골프장 - 내 주변 파크골프장 찾기"(/site/park-golf, 2026-11-06) 전용 스타일. 이 페이지에서만 싣는다
   (site_features/_park_golf 파셜이 head 에 dynamic 추적 스타일시트로 건다 - 운세와 같은 방식).

   **Tailwind 를 거치지 않는 순수 CSS 다**(Propshaft 가 그대로 내보낸다). dark: 변형을 쓸 수 없어 테마는 조상 셀렉터(.dark)로 가른다.

   무대와 찾기 막대는 **테마와 무관하게 낮의 골프장**(하늘·잔디·나무)이다 - 3D 장면이 낮이라 다크 모드에 맞춰 어둡히면 장면과 글자가
   따로 논다. 목록(스코어카드)은 사이트 테마를 따른다.

   글자 크기는 em 으로 적고 뿌리에서 큰글씨 모드의 배율(--silver-scale)을 한 번 곱한다 - 파크골프를 즐기는 분들이 큰글씨 모드를 많이
   쓸 자리라 특히 챙긴다(운세 화면과 같은 생각). */

.park-golf {
  --pg-sky: #cfeafd;
  --pg-sky-deep: #8fcaf2;
  --pg-grass: #4f9d3a;
  --pg-grass-deep: #2f6b25;
  --pg-fairway: #7cc35a;
  --pg-wood: #9a6a3c;
  --pg-wood-deep: #6b4524;
  --pg-cream: #fff8e7;
  --pg-flag: #e5483b;
  /* 글자를 얹는 자리의 색은 흰 글자와 4.5:1 이 넘게 짙게 둔다(검수 - 찾기 막대 안내 3.0:1, 번호 배지 3.9:1 이었다). */
  --pg-bar: #2f6b25;
  --pg-bar-deep: #23561b;
  --pg-badge: #c0392b;
  --pg-ink: #13361a;
  font-size: calc(1rem * var(--silver-scale, 1));
}

/* ── 무대 카드 ── */
.park-golf-card {
  border-radius: 1.25rem;
  background: var(--pg-grass-deep);
  box-shadow: 0 0 0 1px rgb(47 107 37 / 0.35), 0 18px 40px -18px rgb(15 23 42 / 0.45);
}

/* 무대 높이는 폭에 맞춘 최소 높이다(받침 ::before). 장면은 캔버스가 absolute 로 덮는다. 포스터(배경 그림)가 먼저 보이고, 3D 가 준비되면
   그 위로 떠오른다. WebGL 이 없거나(data-gl=none) 받지 못하면 포스터만 남는다. 포스터가 없을 때의 바탕은 하늘에서 잔디로 가는 띠다. */
.park-golf-stage {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  background-color: var(--pg-sky);
  background-image: linear-gradient(180deg, var(--pg-sky) 0%, var(--pg-sky-deep) 46%, var(--pg-fairway) 47%, var(--pg-grass) 100%);
  background-size: cover;
  background-position: center 60%;
  isolation: isolate;
  touch-action: none;
}
.park-golf-stage::before {
  content: "";
  display: block;
  padding-top: 62%;
}
@media (min-width: 1024px) {
  .park-golf-stage::before { padding-top: min(62%, calc(46vh - 4rem)); }
  .park-golf-stage { min-height: 17rem; }
}
/* 손가락 화면에서는 한 손가락 끌기를 페이지 스크롤로 넘긴다(두 손가락은 돌리기) - 조상이 none 이면 캔버스의 pan-y 가 먹지 않는다
   (오피스와 같은 함정 - touch-action 은 조상과 교집합이다). 주 포인터가 마우스인 터치 노트북도 손가락으로 스크롤하므로 any-pointer 로 본다(검수). */
@media (any-pointer: coarse) {
  .park-golf-stage { touch-action: pan-y; }
}
.park-golf-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.park-golf-stage[data-gl="gpu"] canvas,
.park-golf-stage[data-gl="software"] canvas { opacity: 1; }
.park-golf-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.park-golf-flag-label {
  pointer-events: none;
  transform: translateY(-0.6em);
  max-width: 15em;
  padding: 0.3em 0.65em;
  border-radius: 0.6em;
  background: rgb(255 255 255 / 0.95);
  color: var(--pg-ink);
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 16px -8px rgb(15 23 42 / 0.6);
}

.park-golf-stage-head {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  right: 0.9em;
  z-index: 2;
  pointer-events: none;
}
.park-golf-eyebrow {
  display: inline-block;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.85);
  color: var(--pg-grass-deep);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.park-golf-title {
  margin-top: 0.35em;
  color: #fff;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
  text-shadow: 0 2px 0 rgb(19 54 26 / 0.55), 0 0 18px rgb(19 54 26 / 0.45);
}
.park-golf-legend {
  position: absolute;
  left: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.park-golf-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.85);
  color: var(--pg-ink);
  font-size: 0.68em;
  font-weight: 700;
}
.park-golf-legend-tee {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px #d9d9d9;
}
.park-golf-legend-flag {
  width: 0.75em;
  height: 0.55em;
  background: var(--pg-flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.park-golf-bubble {
  position: absolute;
  right: 0.9em;
  bottom: 0.8em;
  z-index: 2;
  max-width: 60%;
  padding: 0.35em 0.75em;
  border-radius: 0.8em;
  background: rgb(19 54 26 / 0.82);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  pointer-events: none;
}

/* 좁은 무대(폰)에서는 무대 위 말풍선을 쓰지 않는다 - 범례와 겹친다. 같은 글은 무대 아래 상태 줄이 보이고 읽어 준다. */
@media (max-width: 479px) {
  .park-golf-bubble { display: none !important; }
}

/* ── 찾기 막대(잔디 깎은 줄무늬) ── */
.park-golf-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 1em;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2.4em, rgb(0 0 0 / 0.05) 2.4em 4.8em),
    linear-gradient(180deg, var(--pg-bar) 0%, var(--pg-bar-deep) 100%);
  color: #fff;
}
.park-golf-tagline {
  font-size: 0.85em;
  line-height: 1.5;
  color: #f2fbec;
  word-break: keep-all;
}
.park-golf-locate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75em;
  padding: 0.55em 1.1em;
  border-radius: 0.8em;
  background: var(--pg-cream);
  color: var(--pg-ink);
  font-size: 0.95em;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--pg-wood-deep);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.park-golf-locate:hover { background: #fff; }
.park-golf-locate:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pg-wood-deep); }
.park-golf-locate:focus-visible,
.park-golf-search:focus-visible,
.park-golf-input:focus-visible { outline: 3px solid #ffe07a; outline-offset: 2px; }
.park-golf-locate[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.park-golf-ball-icon {
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 22%, #ff8a7a 23% 100%);
  box-shadow: inset -2px -2px 0 rgb(0 0 0 / 0.12);
}
.park-golf-or {
  align-self: center;
  font-size: 0.75em;
  font-weight: 700;
  color: #f2fbec;
}
.park-golf-input {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 2.75em;
  padding: 0.5em 0.8em;
  border: 0;
  border-radius: 0.7em;
  background: #fff;
  color: #111827;
  font-size: 0.95em;
}
.park-golf-search {
  flex: 0 0 auto;
  min-height: 2.75em;
  padding: 0.5em 1em;
  border-radius: 0.7em;
  background: var(--pg-wood);
  color: #fff;
  font-size: 0.95em;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--pg-wood-deep);
  cursor: pointer;
}
.park-golf-search:hover { background: #a8774a; }
.park-golf-note {
  font-size: 0.72em;
  line-height: 1.5;
  color: #e6f5dc;
  word-break: keep-all;
}

/* ── 상태 줄 ── */
.park-golf-status {
  font-size: 0.85em;
  color: #374151;
  word-break: keep-all;
}
/* 비어 있어도 숨기지 않는다(display:none 이면 접근성 트리에서 빠져, 처음 생긴 안내가 영역과 함께 나타나 읽히지 않을 수 있다 - 검수).
   빈 p 는 높이가 0 이다. */
.park-golf-status[data-tone="error"] { color: #b42318; font-weight: 600; }
.dark .park-golf-status { color: #d1d5db; }
.dark .park-golf-status[data-tone="error"] { color: #fca5a5; }

/* ── 스코어카드 ── */
.park-golf-scorecard,
.park-golf-articles {
  border-radius: 1rem;
  border: 1px solid rgb(47 107 37 / 0.22);
  background: #fbfdf7;
}
.park-golf-articles { padding: 0.9em 1em; }
.dark .park-golf-scorecard,
.dark .park-golf-articles {
  border-color: rgb(167 243 208 / 0.14);
  background: rgb(17 24 39 / 0.9);
}
.park-golf-row { padding: 0.65em 1em 0.7em; }
.park-golf-row[aria-current="true"] { background: rgb(124 195 90 / 0.16); }
.dark .park-golf-row[aria-current="true"] { background: rgb(124 195 90 / 0.14); }
.park-golf-row-main,
.park-golf-map-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75em;
  text-align: left;
  cursor: pointer;
}
.park-golf-map-row { padding: 0.65em 1em; }
.park-golf-map-row[aria-current="true"] { background: rgb(124 195 90 / 0.18); }
.park-golf-map-row:hover { background: rgb(124 195 90 / 0.1); }
.park-golf-hole {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: var(--pg-badge);
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18);
}
.park-golf-hole[data-extra] { background: #6b7280; }
.park-golf-distance {
  flex: 0 0 auto;
  color: var(--pg-grass-deep);
  font-size: 0.9em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dark .park-golf-distance { color: #a7f3a0; }
.park-golf-row-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.9em;
  margin-top: 0.35em;
  padding-left: 3.25em; /* 홀 배지(0.85em x 2.1em) + 사이 0.75em 을 이 글자 크기(0.78em)로 옮긴 값 - 이름 줄과 맞춘다 */
  font-size: 0.78em;
  font-weight: 600;
}
.park-golf-row-links a {
  color: #1d6b2e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.park-golf-row-links a[hidden] { display: none; }
.dark .park-golf-row-links a { color: #86efac; }

/* ── 지도 창 ── 카카오 지도는 테마와 무관하게 밝다. 깃발 오버레이는 우리 DOM 이다(CustomOverlay content). */
.park-golf-map { position: relative; background: #e5eadf; }
.park-golf-map-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em 0.2em 0.3em;
  border-radius: 999px;
  background: #fff;
  color: var(--pg-ink);
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgb(15 23 42 / 0.55);
  cursor: pointer;
  transform: translateY(-6px);
}
.park-golf-map-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
.park-golf-map-flag b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--pg-badge);
  color: #fff;
}
.park-golf-map-flag[aria-current="true"] { background: #ffe07a; z-index: 2; }
.park-golf-map-flag[aria-current="true"]::after { border-top-color: #ffe07a; }
.park-golf-map-flag span { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
.park-golf-map-me {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e8e8e8 31% 100%);
  box-shadow: 0 0 0 3px rgb(47 107 37 / 0.85), 0 4px 10px -2px rgb(15 23 42 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .park-golf-stage canvas { transition: none; }
  .park-golf-locate { transition: none; }
}

/* 큰글씨 3단에서는 무대 머리 글자가 장면을 덮지 않게 줄 간격만 줄인다. */
html.silver[data-silver-scale="3"] .park-golf-title { font-size: 1.15em; }