/* bw-maplinks.css — 지도 링크 묶음 + 지도 앱 선택 시트 (2026-10-08 K1-maplinks)
 * 마크업: includes/_map_links.php (bw_map_links_render / bw_map_links_sheet / bw_map_links_trigger)
 * 동작:   assets/v2/bw-maplinks.js
 * 규칙: 로고 없음(글자 배지) · 터치 높이 44px · 글자 대비 4.5:1 이상(강조색 #C2410C = 흰 글자 5.2:1) · focus-visible 링 · 모션 줄이기 존중 · 라이트 전용.
 * 전역 토큰이 없는 페이지에서도 깨지지 않게 var(--토큰, 기본값) 형태로만 쓴다. */

.bw-ml, .bw-ml-sheet { --ml-accent: #C2410C; --ml-ink: var(--bw-ink-900, #0B0E14); --ml-ink2: var(--bw-ink-700, #2A2F38);
  --ml-mute: var(--bw-ink-500, #5B6470); --ml-line: var(--bw-line-strong, #CFCCBE); --ml-paper: var(--bw-paper, #fff); }
.bw-ml [hidden], .bw-ml-sheet [hidden] { display: none !important; }
.bw-ml *, .bw-ml-sheet * { box-sizing: border-box; }

/* ── 링크 묶음 ───────────────────────────────────────────────────────── */
.bw-ml { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; }
.bw-ml--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }

.bw-ml__a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--ml-ink);
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s; }
.bw-ml__a[hidden], .bw-ml__more[hidden] { display: none !important; }
.bw-ml__b { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bw-ink-100, #E8EAED); color: var(--ml-ink2); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.bw-ml__t { min-width: 0; overflow-wrap: anywhere; }

/* 알약(옆 카드·위치 섹션) */
.bw-ml__a--pill { padding: 0 14px 0 8px; border: 1px solid var(--ml-line); border-radius: 9999px; background: var(--ml-paper); }
.bw-ml__a--pill.is-primary { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }
.bw-ml__a--pill.is-primary .bw-ml__b { background: rgba(255, 255, 255, .22); color: #fff; }

/* 타일(빠른 길찾기 카드) */
.bw-ml__a--tile { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px; min-height: 68px; text-align: center;
  border: 1px solid #FFE9D9; border-radius: 10px; background: #FFF7F0; font-size: 12px; }
.bw-ml__a--tile.is-primary { border-color: var(--ml-accent); background: #FFF1E8; }
.bw-ml__a--tile .bw-ml__t { font-size: 12.5px; }

/* 글자 링크(행사장 줄) */
.bw-ml--compact { gap: 4px 14px; }
.bw-ml__a--text { min-height: 32px; padding: 4px 0; color: var(--ml-accent); font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bw-ml__a--text .bw-ml__t { overflow-wrap: normal; }
@media (pointer: coarse) { .bw-ml__a--text { min-height: 44px; } }

/* '다른 지도' / '택시 기사님께 보여주기' 버튼
 * 사이트 전역 `button:not(.bw-skip-link):not(.bw-card__fav):not(.bw-pin){min-height:36px}`(명시도 0,3,1)가 이 클래스의 44px 을 이겨 36px 로 줄었다 → !important (2026-10-08) */
.bw-ml__more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px !important; padding: 0 14px; border: 1px dashed var(--ml-line);
  border-radius: 9999px; background: transparent; color: var(--ml-ink2); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.bw-ml__more--grid { border-radius: 10px; min-height: 68px !important; padding: 8px; font-size: 12.5px; text-align: center; }

@media (hover: hover) {
  .bw-ml__a--pill:hover { border-color: var(--ml-ink2); background: var(--bw-ink-50, #F4F5F6); }
  .bw-ml__a--pill.is-primary:hover { background: #9A3412; border-color: #9A3412; }
  .bw-ml__a--tile:hover { border-color: var(--ml-accent); }
  .bw-ml__a--text:hover { text-decoration-thickness: 2px; }
  .bw-ml__more:hover { border-color: var(--ml-ink2); background: var(--bw-ink-50, #F4F5F6); }
}
.bw-ml a:focus-visible, .bw-ml button:focus-visible, .bw-ml-sheet a:focus-visible, .bw-ml-sheet button:focus-visible, .bw-ml-driver:focus-visible {
  outline: 3px solid var(--ml-accent); outline-offset: 2px; }

.bw-ml__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ml-mute); }
.bw-ml__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── 선택 시트(<dialog>) — 모바일은 아래에서 올라오고 넓은 화면은 가운데 ─────────────── */
.bw-ml-sheet { width: min(100%, 520px); max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0;
  background: transparent; color: var(--ml-ink); overflow: visible; font-family: inherit; }
.bw-ml-sheet:not([open]) { display: none; }                       /* dialog 를 모르는 오래된 브라우저에서 본문에 펼쳐지지 않게 */
.bw-ml-sheet.is-fallback[open] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; }
.bw-ml-sheet::backdrop { background: rgba(11, 14, 20, .52); }
.bw-ml-sheet__panel { position: relative; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: var(--ml-paper); box-shadow: 0 -10px 40px rgba(11, 14, 20, .18); }
@media (min-width: 640px) {
  .bw-ml-sheet { margin: auto; }
  .bw-ml-sheet__panel { padding-bottom: 20px; border-radius: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .bw-ml-sheet[open] .bw-ml-sheet__panel { animation: bw-ml-up .22s cubic-bezier(.22, 1, .36, 1); }
  .bw-ml-sheet[open]::backdrop { animation: bw-ml-fade .2s ease-out; }
}
@keyframes bw-ml-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes bw-ml-fade { from { opacity: 0; } to { opacity: 1; } }

.bw-ml-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bw-ml-sheet .bw-ml-sheet__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ml-ink); letter-spacing: 0; }   /* 전역 h2 규칙보다 앞서도록 한 단계 올림 */
.bw-ml-sheet__x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ml-ink2); cursor: pointer; }
.bw-ml-sheet__place { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ml-mute); overflow-wrap: anywhere; }
.bw-ml-sheet__ko { display: block; color: var(--ml-ink2); font-weight: 700; }
.bw-ml-sheet__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.bw-ml-sheet__list > li[hidden] { display: none !important; }
.bw-ml__a--row { display: flex; width: 100%; padding: 0 14px 0 10px; min-height: 52px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-paper); font-size: 15px; }
.bw-ml__a--row.is-primary { border-color: var(--ml-accent); box-shadow: inset 0 0 0 1px var(--ml-accent); }
.bw-ml__a--row .bw-ml__b { width: 28px; height: 28px; font-size: 13px; }
.bw-ml__a--row::after { content: "\2197"; margin-left: auto; padding-left: 8px; color: var(--ml-mute); font-size: 15px; }
@media (hover: hover) { .bw-ml__a--row:hover { background: var(--bw-ink-50, #F4F5F6); } }

.bw-ml-sheet__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bw-line, #E8E6DE); }
.bw-ml-sheet__btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px !important; padding: 8px 14px; border: 1px solid var(--ml-line);
  border-radius: 10px; background: var(--ml-paper); color: var(--ml-ink); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; }
@media (hover: hover) { .bw-ml-sheet__btn:hover { background: var(--bw-ink-50, #F4F5F6); } }

/* 택시 기사님께 보여주기 — 큰 글씨(한국어)
 * 휴대폰(폭 414px 이하)에서 전역 `@media (max-width:414px){body,p{font-size:14px !important;line-height:1.55 !important}}` 가 글줄(<p>)의 clamp() 크기를 14px 로 눌렀다.
 * → 마크업을 <div> 로 바꾸고, 그래도 비슷한 전역 규칙이 생길 때를 대비해 크기·줄간격은 명시도를 올려 !important 로 고정한다(2026-10-08). */
.bw-ml-driver { padding: 4px 2px 2px; text-align: center; outline-offset: 4px; }
.bw-ml-driver .bw-ml-driver__ask { margin: 0 0 6px; font-size: clamp(20px, 6vw, 28px) !important; font-weight: 800; line-height: 1.35 !important; color: var(--ml-ink); }
.bw-ml-driver .bw-ml-driver__name { margin: 0 0 12px; font-size: clamp(28px, 9.5vw, 46px) !important; font-weight: 800; line-height: 1.22 !important; color: var(--ml-ink); word-break: keep-all; overflow-wrap: anywhere; }
.bw-ml-driver .bw-ml-driver__addr { margin: 0 0 14px; font-size: clamp(18px, 5.4vw, 26px) !important; font-weight: 600; line-height: 1.45 !important; color: var(--ml-ink2); word-break: keep-all; overflow-wrap: anywhere; }
.bw-ml-driver .bw-ml-driver__tel { margin: 0 0 18px; }
.bw-ml-driver .bw-ml-driver__tel a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 10px; background: #FFF1E8; color: var(--ml-accent);
  font-size: clamp(20px, 6vw, 28px); font-weight: 800; text-decoration: none; letter-spacing: .01em; }
.bw-ml-driver .bw-ml-sheet__btn { width: 100%; }
