:root {
  /* 어두운 화면(🗺️ 어둡게) — 밝은 바탕(일반·밝게·바다)은 아래 body[data-base] 가 덮는다(2026-10-28 사용자 「지도에 맞게 UI 스킴도」) */
  --bg: #0b0d10; --ink: #e9ecef; --mute: #8a929b; --line: #1f242a;
  --panel: #14181d; --chip: #1f252c; --edge: #2c333b; --edge2: #4a535d; --field: #0f1216; --glass: rgba(20, 24, 29, .85);
  --link: #9fc0e8; --shadow: rgba(0, 0, 0, .6); --attr: #555;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: Pretendard, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
/* 지구본(2026-10-28) — 지구 둘레는 옅은 하늘(밝은 바탕) · 밤하늘(어둡게) · 넓은 화면은 오른쪽 칸을 뺀 자리만 지도(지구가 칸 가운데에) */
#map { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, #eef3f8 0%, #dfe7f0 60%, #cfd9e5 100%); }
body[data-base="dark"] #map { background: radial-gradient(circle at 50% 50%, #0d1424 0%, #070a12 60%, #020306 100%); }
@media (min-width: 900px) { #map { right: 340px; } }
.maplibregl-ctrl-attrib { background: transparent !important; color: var(--attr) !important; font-size: 9px; }
.maplibregl-ctrl-attrib a { color: var(--attr) !important; }

/* 상단 */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 20px 40px;
  background: linear-gradient(var(--bg) 30%, transparent); pointer-events: none; }
.top h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  display: inline-block; pointer-events: auto; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.top p { margin: 4px 0 0; font-size: 13px; color: var(--mute); }

.shot { position: relative; aspect-ratio: 16 / 9; background: #000 center/cover; border-radius: 12px; }
.say { padding: 12px 14px 14px; }
.say .who { font-size: 12px; color: var(--mute); }
.say .line { font-size: 16px; font-weight: 700; margin: 3px 0 8px; line-height: 1.35; letter-spacing: -0.01em; }

/* 하단 피드 */
.feed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 50px 0 calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--bg) 45%); pointer-events: none; }
/* scroll-padding 이 없으면 스냅이 첫 카드를 화면 끝(0)에 붙인다 — 모바일 실측 */
.cards { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory;
  scrollbar-width: none; pointer-events: auto; }
.card { flex: 0 0 260px; scroll-snap-align: start; display: flex; gap: 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; cursor: pointer;
  text-align: left; color: inherit; font: inherit; }
.card.on { border-color: var(--c); }
.card .th { flex: 0 0 64px; height: 64px; border-radius: 10px; background: #000 center/cover; position: relative; }
.card .k { font-size: 12px; color: var(--mute); }
.card .v { font-size: 14px; font-weight: 700; margin-top: 2px; line-height: 1.3; }
.card .ago { font-size: 11px; color: var(--mute); margin-top: 3px; }

@media (min-width: 900px) {
  .top { right: 340px; }
  .feed { left: auto; top: 0; width: 340px; padding: 16px 0 20px; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line); }
  .cards { flex-direction: column; overflow: visible; }
  .card { flex: none; width: 300px; }
}

/* 꼬리말 — 의견·문의 · conchiz 제품군 */
.foot { pointer-events: auto; padding: 8px 20px 0; font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* 링크는 탭 자리 32px 이상 · 구분점과 한 덩어리로 줄바꿈 */
.foot a { color: var(--mute); text-decoration: none; display: inline-block; min-height: 32px; line-height: 32px; padding: 0 2px; }
.foot a:hover { color: var(--ink); }
.foot .ft { white-space: nowrap; }
.foot b[aria-current] { color: var(--ink); display: inline-block; line-height: 32px; font-weight: inherit; }
#fb-open { font: inherit; font-size: 13px; color: var(--ink); background: var(--chip); border: 1px solid var(--edge); border-radius: 16px; padding: 0 14px; min-height: 32px; cursor: pointer; }
#fb { border: 0; border-radius: 16px; padding: 0; width: min(420px, 92vw); background: var(--panel); color: var(--ink); }
#fb::backdrop { background: rgba(0,0,0,.6); }
.fb-form { padding: 20px; display: grid; gap: 12px; }
.fb-form h2 { margin: 0; font-size: 17px; }
.fb-form label { display: grid; gap: 4px; font-size: 12px; color: var(--mute); }
/* 16px 미만이면 iOS 가 입력칸을 누를 때 화면을 확대한다 */
.fb-form select, .fb-form textarea, .fb-form input { font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--edge); border-radius: 8px; padding: 8px; }
.fb-msg { margin: 0; font-size: 12px; min-height: 1.2em; color: var(--link); }
.fb-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fb-actions button { font: inherit; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 0; background: #0E8C9A; color: #fff; }
.fb-actions .plain { background: transparent; color: var(--mute); }
@media (min-width: 900px) { .foot { padding: 14px 20px 0; width: 340px; } }
.foot nav { min-width: 0; flex: 1 1 100%; max-width: calc(100vw - 40px); }
/* 넓은 화면: 피드가 길어도 꼬리말은 오른쪽 패널 아래에 붙어 있다 */
@media (min-width: 900px) {
  .feed { padding-bottom: 0; }  /* 아래 여백이 있으면 붙은 꼬리말 밑으로 카드가 비친다 */
  .foot { position: sticky; bottom: 0; background: var(--bg); box-shadow: 0 -16px 16px var(--bg); padding-bottom: 14px; }
  .foot nav { max-width: 300px; }
}

/* 좁은 화면: 피드는 지도 아래 띠(지도가 그 위에서 끝난다 — JS 가 높이를 맞춘다) */
@media (max-width: 899px) {
  .feed { padding-top: 12px; background: var(--bg); border-top: 1px solid var(--line); }
}


/* 보는 자리의 작은 글(출처·링크) */
.ev-s { font-size: 11px; color: var(--mute); }
.ev-s a { color: var(--link); }

/* 좁은 화면 — 꼬리말 링크는 접어 두고 「conchiz 제품 ▾」로 펼친다(지도가 작아지던 것 · 2026-10-27) */
#foot-more { display: none; font: inherit; font-size: 13px; color: var(--mute); background: transparent; border: 1px solid var(--edge);
  border-radius: 16px; padding: 0 14px; min-height: 32px; cursor: pointer; }
@media (max-width: 899px) {
  #foot-more { display: inline-block; }
  .foot:not(.open) nav { display: none; }
  .foot { padding-top: 6px; }
}

/* 의견·문의 창 — 휴대폰에서 가로로 넘친다는 보고(2026-10-27 · 흉내로는 재현 못 함): 창은 화면 폭 안 · 입력칸은 창 폭에 맞춘다 */
#fb { max-width: calc(100vw - 24px); box-sizing: border-box; overflow-x: hidden; }
.fb-form { min-width: 0; }
.fb-form label { min-width: 0; }
.fb-form select, .fb-form textarea, .fb-form input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.fb-form textarea { resize: vertical; }
.fb-msg { overflow-wrap: anywhere; }

/* 거르기 칩 · 지도 바탕 — 제목 아래 한 줄(2026-10-28 · 한국 | 세계 버튼은 없앴다) */
.tools { display: flex; gap: 6px; align-items: center; margin-top: 10px; pointer-events: none; }
/* 단추 줄은 단추만 누를 수 있게 — 줄 전체가 화면 폭을 막아 그 높이의 이야기 핀이 안 눌렸다(2026-10-28 모바일 실측) */
.tools > * { pointer-events: auto; }

.card .t2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.feed-empty { margin: 0; padding: 12px 0; font-size: 13px; color: var(--mute); pointer-events: auto; }

/* 유튜브 — 보는 자리의 사진 자리를 덮는다 */
.shot { overflow: hidden; }
.shot iframe.yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }


/* ── 밝은 화면 — 지도 바탕이 일반·밝게·바다일 때(map.js setBase 가 body[data-base] 를 단다) ── */
body[data-base="street"], body[data-base="light"], body[data-base="ocean"] {
  --bg: #f6f7f8; --ink: #1d2126; --mute: #5f6872; --line: #dde1e6;
  --panel: #ffffff; --chip: #eef1f4; --edge: #cfd5dc; --edge2: #9aa4ae; --field: #ffffff; --glass: rgba(255, 255, 255, .9);
  --link: #1f5fa8; --shadow: rgba(20, 30, 40, .22); --attr: #666;
  color-scheme: light;
}

/* 거르기 칩 — 제목 아래 한 줄 */
.layers { display: flex; gap: 6px; pointer-events: auto; }
.layers button { font: inherit; font-size: 13px; color: var(--ink); background: var(--glass); border: 1px solid var(--edge);
  border-radius: 16px; padding: 0 11px; min-height: 32px; cursor: pointer; white-space: nowrap; }

.vlist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.vlist button { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; font: inherit; font-size: 12px; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px; cursor: pointer; }
.vlist button.on { border-color: #3b82f6; background: var(--chip); }
.vlist img { flex: 0 0 64px; height: 36px; object-fit: cover; border-radius: 4px; }
.vlist span { min-width: 0; line-height: 1.3; }
.vlist i { font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vlist small { display: block; color: var(--mute); font-size: 11px; }
/* 다녀왔어요 · 영상의 동선(2026-10-28) */
.pv .been { margin-top: 8px; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--ink); background: var(--chip);
  border: 1px solid var(--edge); border-radius: 999px; cursor: pointer; }
.pv .been.on { border-color: #16a34a; color: #16a34a; font-weight: 700; }
.route:empty { display: none; }
.route { margin-top: 8px; }
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; }
.rfit { font: inherit; font-size: 11px; font-weight: 400; color: var(--mute); background: none; border: 1px solid var(--edge); border-radius: 8px; padding: 2px 7px; cursor: pointer; }
.rlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.rlist button { display: flex; align-items: center; gap: 4px; white-space: nowrap; font: inherit; font-size: 11.5px; color: var(--ink);
  background: var(--chip); border: 1px solid var(--edge); border-radius: 999px; padding: 3px 9px 3px 4px; cursor: pointer; }
.rlist button.on { border-color: #e0573e; box-shadow: 0 0 0 1px #e0573e inset; }
.rlist b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 50%; background: #e0573e; color: #fff; font-size: 10px; }
.rlist time { color: var(--mute); font-variant-numeric: tabular-nums; }
.rnote { margin-top: 4px; font-size: 11px; color: var(--mute); }
.rstop { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #e0573e;
  border: 2px solid #e0573e; font: 700 11px/1 Pretendard, system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.rstop.on { background: #e0573e; color: #fff; transform: scale(1.2); }
/* 거르기 · 위치가 틀려요(2026-10-28) */
.layers .fchip.on { border-color: #3b82f6; color: #3b82f6; font-weight: 700; }
.filterbox { pointer-events: auto; margin-top: 8px; max-width: 340px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); font-size: 12px; }
.filterbox[hidden] { display: none; }
.filterbox label { display: grid; gap: 3px; color: var(--mute); }
.filterbox select { font: inherit; font-size: 13px; color: var(--ink); background: var(--field); border: 1px solid var(--edge); border-radius: 8px; padding: 5px 6px; min-width: 0; }
.filterbox .fx { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.filterbox .fx a { color: var(--ink); font-size: 12px; }
.filterbox .plain { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--mute); cursor: pointer; text-decoration: underline; }
.lists .sec { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; color: var(--mute); }
.lists .sec:first-child { margin-top: 0; }
.vlist b.lv { display: inline-block; padding: 0 4px; border-radius: 3px; background: #e0573e; color: #fff; font-size: 9.5px; line-height: 14px; }
/* 지점 한 모양(2026-10-28 사용자 「기본 화면에는 구분하지 말고」 — 라이브·여행 영상 구분은 말풍선에서) */
.spin { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  background: var(--glass); border: 1.5px solid #0e8c9a; box-shadow: 0 0 0 3px rgba(14, 140, 154, .18); }
.spin b { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #0e8c9a; color: #fff; font: 700 10px/16px Pretendard, system-ui, sans-serif; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.card.spc { --c: #0e8c9a; }

/* ── 오른쪽 칸 · 아래 판 — 찾기 · 둘러보기 탭 · 보는 자리(2026-10-28 · 말풍선 대신) ── */
.feed { pointer-events: auto; }
#q { display: block; width: calc(100% - 40px); margin: 0 20px 8px; font: inherit; font-size: 16px; color: var(--ink); background: var(--field);
  border: 1px solid var(--edge); border-radius: 12px; padding: 8px 12px; }  /* 16px — iOS 가 누를 때 확대하지 않게 */
.tabs { display: flex; gap: 6px; padding: 0 20px 10px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 0 0 auto; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--chip); border: 1px solid var(--edge);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: #0e8c9a; border-color: #0e8c9a; color: #fff; font-weight: 700; }
@media (min-width: 900px) { .tabs { flex-wrap: wrap; } }
.csec { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--mute); }
/* 좁은 화면 — 가로로 넘기는 카드 줄 맨 앞의 작은 제목 칸(세로 글씨는 왼쪽 끝에서 잘렸다) */
@media (max-width: 899px) { .csec { flex: 0 0 72px; align-self: center; margin: 0; font-size: 11px; line-height: 1.35; word-break: keep-all; scroll-snap-align: start; } }
.card.cc { justify-content: center; font-size: 13px; font-weight: 700; color: var(--link); min-height: 48px; }
.tool { font: inherit; font-size: 13px; color: var(--ink); background: var(--glass); border: 1px solid var(--edge); border-radius: 16px;
  padding: 0 11px; min-height: 32px; cursor: pointer; white-space: nowrap; pointer-events: auto; }
.pane-list[hidden], .pane-view[hidden] { display: none; }
.pv { padding: 0 16px 16px; }
.pv-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pv-top button { font: inherit; font-size: 13px; color: var(--ink); background: var(--chip); border: 1px solid var(--edge); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; }
.pv .say { padding: 10px 0 0; }
.pv .say .line { font-size: 18px; }
.pv .lists { margin-top: 10px; }
.pv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pv .share { font: inherit; font-size: 13px; color: var(--ink); background: var(--chip); border: 1px solid var(--edge); border-radius: 10px;
  padding: 8px 16px; cursor: pointer; }
.spin.sel { border-width: 3px; border-color: #e0573e; box-shadow: 0 0 0 5px rgba(224, 87, 62, .25); transform: scale(1.15); }
/* 좁은 화면 — 보는 자리는 아래 판(화면의 56%까지 · 위에 지도가 남는다) · 꼬리말은 접는다 */
@media (max-width: 899px) {
  #q { width: calc(100% - 32px); margin: 0 16px 8px; }
  .tabs { padding: 0 16px 8px; }
  .feed.viewing { padding-top: 10px; }
  .feed.viewing .foot { display: none; }
}

/* ── 빛나는 점 · 스티커 · 반응 · 한 줄 이야기 · 내 위치(2026-10-28 · FlareSpot 참고) ── */
.spin { overflow: visible; }
.spin.h1 { box-shadow: 0 0 0 4px rgba(14, 140, 154, .22), 0 0 12px rgba(14, 140, 154, .45); }
.spin.h2 { box-shadow: 0 0 0 6px rgba(14, 140, 154, .25), 0 0 22px rgba(14, 140, 154, .6); }
.spin.h3 { box-shadow: 0 0 0 8px rgba(14, 140, 154, .28), 0 0 34px 6px rgba(14, 140, 154, .7); }
.spin.live::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(224, 87, 62, .85); animation: livepulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes livepulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spin.live::after { animation: none; opacity: .6; } }
body[data-base="dark"] .spin.h2, body[data-base="dark"] .spin.h3 { background: rgba(14, 140, 154, .25); }
.spin .stk { position: absolute; left: -10px; top: -9px; font-style: normal; font-size: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.spin .tk { position: absolute; right: -9px; bottom: -6px; text-decoration: none; font-size: 11px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.acts .been { margin-top: 0; }
.reacts { display: inline-flex; gap: 4px; }
.reacts button { font: inherit; font-size: 15px; line-height: 1; background: var(--chip); border: 1px solid var(--edge); border-radius: 999px; padding: 4px 8px; cursor: pointer; }
.reacts button.on { border-color: #0e8c9a; box-shadow: 0 0 0 1px #0e8c9a inset; }
.reacts small { font-size: 11px; margin-left: 2px; color: var(--mute); }
.talk { margin-top: 14px; }
.st-form { display: flex; gap: 6px; margin-top: 6px; }
.st-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: var(--field); border: 1px solid var(--edge); border-radius: 10px; padding: 7px 10px; }
.st-form button { font: inherit; font-size: 13px; border: 0; border-radius: 10px; padding: 0 14px; background: #0e8c9a; color: #fff; cursor: pointer; }
.st-form button:disabled { opacity: .6; }
.re-form { margin: 4px 0 6px 28px; }
.st-note { margin: 4px 0 0; font-size: 11px; color: var(--mute); }
.st-note a { color: var(--mute); }
.st-msg { margin: 4px 0 0; min-height: 1em; font-size: 12px; color: var(--link); }
.stories, .replies { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.replies { margin-left: 28px; gap: 6px; }
.st { font-size: 13px; }
.st-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.st-h b { color: var(--ink); font-weight: 700; }
.st-h .face { font-size: 16px; }
.st-h .lg, .st-h .me { font-size: 10px; border: 1px solid var(--edge); border-radius: 4px; padding: 0 4px; }
.st p { margin: 2px 0 0 22px; line-height: 1.4; overflow-wrap: anywhere; }
.st-a { margin-left: 22px; display: flex; gap: 10px; }
.st-a button { font: inherit; font-size: 11px; color: var(--mute); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.st-empty { font-size: 12px; color: var(--mute); }
/* 이야기 핀 · 말풍선(2026-10-28 · FlareSpot 참고) — 현장 = 보라 빛기둥 · 멀리서 = 옅은 빛 · 말풍선은 어느 바탕에서나 어두운 칸 */
.fpin { position: relative; width: 14px; height: 14px; display: grid; place-items: center; overflow: visible; }
.fpin .dot { position: relative; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 6px 2px rgba(168,85,247,.55); }
.fpin.on .dot { width: 11px; height: 11px; background: #f5f3ff; box-shadow: 0 0 10px 4px rgba(192,132,252,.85); }
.fpin .pool { position: absolute; left: 50%; top: 50%; width: 44px; height: 16px; transform: translate(-50%, -30%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(192,132,252,.45) 0%, rgba(147,51,234,0) 70%); }
.fpin.on .pool { width: 64px; height: 22px; background: radial-gradient(ellipse at center, rgba(216,180,254,.7) 0%, rgba(168,85,247,.3) 40%, rgba(147,51,234,0) 70%); animation: poolpulse 3s ease-in-out infinite; }
.fpin .beam { position: absolute; left: 50%; bottom: 50%; width: 14px; height: 60px; transform: translateX(-50%); z-index: 1; pointer-events: none;
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(2px);
  background: linear-gradient(to top, rgba(216,180,254,.8), rgba(168,85,247,.25) 55%, rgba(168,85,247,0)); animation: beamflicker 2.6s ease-in-out infinite; }
@keyframes poolpulse { 0%, 100% { opacity: .85; transform: translate(-50%, -30%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -30%) scale(1.12); } }
@keyframes beamflicker { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fpin.on .pool, .fpin.on .beam { animation: none; } }
/* 어두운 바탕(🗺️ 어둡게)에서는 빛을 더해 FlareSpot 처럼 */
body[data-base="dark"] .fpin .pool, body[data-base="dark"] .fpin .beam { mix-blend-mode: screen; }
body[data-base="dark"] .fpin.on .beam { height: 80px; }
.fbub { position: absolute; left: 22px; bottom: 20px; z-index: 3; width: max-content; max-width: 210px; padding: 7px 11px 6px; border-radius: 14px;
  background: rgba(30, 32, 40, .94); color: #f1f5f9; box-shadow: 0 6px 18px rgba(0,0,0,.35); font: 12px/1.35 Pretendard, system-ui, sans-serif; cursor: pointer; }
.fbub::before { content: ""; position: absolute; left: -6px; bottom: 6px; border: 7px solid transparent; border-right-color: rgba(30, 32, 40, .94); border-left: 0; }
.fbub.on { box-shadow: 0 0 0 1px rgba(192,132,252,.7), 0 6px 18px rgba(88,28,135,.45); }
.fbub .fb-h { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #cbd5e1; }
.fbub .fb-h .av { font-size: 13px; }
.fbub .fb-h b { margin-left: 2px; font-size: 10px; color: #e9d5ff; font-weight: 700; white-space: nowrap; }
.fbub .fb-h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.fbub p { margin: 2px 0 1px; font-size: 13px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fbub time { font-size: 10px; color: #94a3b8; }
.st-gps { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--mute); }
.st-h .on { font-size: 10px; color: #7c3aed; border: 1px solid #c4b5fd; border-radius: 4px; padding: 0 4px; }
@media (max-width: 899px) { .tools { flex-wrap: wrap; } }

/* ── ⭐ 내 지도 · 🖼️ 히어 카드(2026-10-28) ── */
.card.mine-tools { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.mine-tools .per, .mine-tools .go { display: flex; gap: 6px; }
.mine-tools button { flex: 1; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--chip); border: 1px solid var(--edge); border-radius: 999px; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
.mine-tools .per button.on { background: #7c3aed; border-color: #7c3aed; color: #fff; font-weight: 700; }
.mine-tools .go button { background: #7c3aed; border-color: #7c3aed; color: #fff; font-weight: 700; }
.mybar { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #7c3aed; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(124, 58, 237, .4); }
.mybar[hidden] { display: none; }
.mybar button { font: inherit; color: #fff; background: rgba(255,255,255,.2); border: 0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }
.glow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 18px 6px rgba(168,85,247,.45);
  background: radial-gradient(circle, rgba(216,180,254,.95) 0 30%, rgba(168,85,247,.5) 55%, rgba(168,85,247,0) 72%); }
#card { border: 0; border-radius: 16px; padding: 0; background: var(--panel); color: var(--ink); width: min(420px, 94vw); max-width: calc(100vw - 24px); }
#card::backdrop { background: rgba(0,0,0,.65); }
.card-box { padding: 14px; display: grid; gap: 10px; }
.card-box img { width: 100%; border-radius: 12px; background: #0b1020; aspect-ratio: 1080 / 1350; }
.card-box img:not([src]) { display: none; }
.card-msg { margin: 0; font-size: 13px; color: var(--mute); }
.card-msg:empty { display: none; }
.card-acts { display: flex; gap: 8px; align-items: center; }
.card-acts .card-share, .card-acts .card-save { flex: 1; text-align: center; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 0; border-radius: 10px;
  border: 0; background: #7c3aed; color: #fff; text-decoration: none; cursor: pointer; }
.card-acts .card-save { background: var(--chip); color: var(--ink); border: 1px solid var(--edge); }
.card-acts .plain { font: inherit; font-size: 13px; background: none; border: 0; color: var(--mute); cursor: pointer; }
/* 아이콘만 단추(📍·🎲) · 💬 단계 · 현장 범위 글자(2026-10-28) */
.tool.ico { padding: 0; width: 34px; font-size: 15px; }
#talkmode.off { opacity: .55; border-style: dashed; }
.ring-tip { background: rgba(30, 32, 40, .9); color: #e9d5ff; border: 1px solid rgba(192,132,252,.6); border-radius: 999px; font: 600 11px/1.2 Pretendard, system-ui, sans-serif;
  padding: 3px 9px; box-shadow: none; }
.ring-tip::before { display: none; }

/* 영상 핀 — 기준이라 가장 크게(2026-10-28 사용자) · 청록 빛 웅덩이 + 빛기둥 · 라이브는 더 높게 */
.spw { position: relative; width: 34px; height: 34px; }
.spw .spin { position: relative; z-index: 2; width: 34px; height: 34px; font-size: 16px; }
.spw .spool { position: absolute; left: 50%; top: 50%; width: 110px; height: 38px; transform: translate(-50%, -25%); z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(45,212,191,.55) 0%, rgba(14,140,154,.28) 40%, rgba(14,140,154,0) 70%); }
.spw .sbeam { position: absolute; left: 50%; bottom: 50%; width: 30px; height: 120px; transform: translateX(-50%); z-index: 1; pointer-events: none;
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); filter: blur(2.5px);
  background: linear-gradient(to top, rgba(94,234,212,.85), rgba(14,140,154,.35) 45%, rgba(14,140,154,0)); }
.spw.live .sbeam { height: 170px; background: linear-gradient(to top, rgba(253,186,116,.9), rgba(224,87,62,.45) 40%, rgba(224,87,62,0)); animation: beamflicker 2.2s ease-in-out infinite; }
.spw.live .spool { background: radial-gradient(ellipse at center, rgba(253,186,116,.6) 0%, rgba(224,87,62,.3) 40%, rgba(224,87,62,0) 70%); }
body[data-base="dark"] .spw .spool, body[data-base="dark"] .spw .sbeam { mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .spw.live .sbeam { animation: none; } }
/* 칩 줄 — 아이콘만 · 거르기 수 배지 · 이야기 단계 표시 */
.fchip.ico { position: relative; }
.fchip.ico b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: #3b82f6; color: #fff; font: 700 10px/16px Pretendard, system-ui, sans-serif; }
#talkmode[data-mode="pins"] { opacity: .7; border-style: dashed; }
#talkmode[data-mode="off"] { opacity: .45; position: relative; }
#talkmode[data-mode="off"]::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; background: var(--mute); transform: rotate(-35deg); }

/* ── 빛기둥만(2026-10-28 사용자 「핀 모양하고 점 모양을 없애고 기둥 색으로 구분」) — 영상 위치 청록(가장 높게) · GPS(현장) 이야기 보라 · 일반 이야기 주황 ── */
.spw .spin { display: none; }
.spw { width: 28px; height: 28px; }
.spw .hit, .fpin .hit { position: absolute; inset: -6px; border-radius: 50%; z-index: 3; cursor: pointer; }
.spw .sbeam { width: 34px; height: 140px; background: linear-gradient(to top, rgba(165,243,252,.95), rgba(34,211,238,.6) 25%, rgba(14,140,154,.25) 60%, rgba(14,140,154,0)); }
.spw .spool { width: 96px; height: 34px; background: radial-gradient(ellipse at center, rgba(165,243,252,.85) 0%, rgba(34,211,238,.45) 30%, rgba(14,140,154,0) 70%); }
.spw.live .sbeam { height: 190px; background: linear-gradient(to top, rgba(207,250,254,1), rgba(34,211,238,.7) 25%, rgba(14,140,154,.3) 60%, rgba(14,140,154,0)); animation: beamflicker 2.2s ease-in-out infinite; }
.spw.live .spool { background: radial-gradient(ellipse at center, rgba(207,250,254,.95) 0%, rgba(34,211,238,.5) 30%, rgba(14,140,154,0) 70%); animation: poolpulse 2.2s ease-in-out infinite; }
.spw.h2 .spool { width: 120px; height: 40px; } .spw.h3 .spool { width: 150px; height: 48px; }
.spw.sel .sbeam { width: 46px; height: 230px; background: linear-gradient(to top, #fff, rgba(165,243,252,.9) 20%, rgba(34,211,238,.4) 60%, rgba(34,211,238,0)); }
.spw.sel .spool { width: 160px; height: 52px; }
/* 이야기 — GPS(현장) 보라 · 일반 주황 · 영상보다 낮게 */
.fpin .dot { display: none; }
.fpin { width: 18px; height: 18px; }
.fpin .pool { width: 46px; height: 16px; background: radial-gradient(ellipse at center, rgba(253,186,116,.8) 0%, rgba(249,115,22,.35) 40%, rgba(249,115,22,0) 70%); animation: none; }
.fpin .beam { width: 16px; height: 50px; animation: none; background: linear-gradient(to top, rgba(254,215,170,.95), rgba(249,115,22,.45) 45%, rgba(249,115,22,0)); }
.fpin.on .pool { width: 62px; height: 20px; background: radial-gradient(ellipse at center, rgba(233,213,255,.9) 0%, rgba(168,85,247,.45) 40%, rgba(147,51,234,0) 70%); animation: poolpulse 3s ease-in-out infinite; }
.fpin.on .beam { width: 20px; height: 85px; background: linear-gradient(to top, rgba(243,232,255,1), rgba(192,132,252,.6) 35%, rgba(168,85,247,.2) 70%, rgba(168,85,247,0)); animation: beamflicker 2.6s ease-in-out infinite; }
body[data-base="dark"] .fpin.on .beam { height: 95px; }
/* 📍 내 위치 — 파란 빛기둥 + 가운데 점 · 알림 */
.mepin { position: relative; width: 20px; height: 20px; }
.mepin .pool { position: absolute; left: 50%; top: 50%; width: 70px; height: 24px; transform: translate(-50%, -30%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(147,197,253,.9) 0%, rgba(37,99,235,.4) 40%, rgba(37,99,235,0) 70%); animation: poolpulse 2s ease-in-out infinite; }
.mepin .beam { position: absolute; left: 50%; bottom: 50%; width: 22px; height: 110px; transform: translateX(-50%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: blur(2px);
  background: linear-gradient(to top, #dbeafe, rgba(59,130,246,.6) 35%, rgba(37,99,235,0)); }
.mepin b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #2563eb; border: 2px solid #fff; box-shadow: 0 0 8px #3b82f6; }
#locate.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.3); }
.toast { pointer-events: none; margin-top: 8px; display: inline-block; padding: 7px 12px; border-radius: 999px; background: rgba(30,32,40,.92); color: #fff; font-size: 13px; font-weight: 600; }
.toast[hidden] { display: none; }

/* ── 자연스러운 빛(2026-10-28 사용자 「빛기둥이 부자연스러워 · FlareSpot 은 매우 자연스러워」) ──
   예전: 위로 뾰족한 원뿔 + 딱딱한 가장자리 → 교통 콘처럼 보였다.
   이제: 곧은 기둥(가운데 밝고 양옆으로 부드럽게 사라짐 · 위로 갈수록 투명) + 바닥의 둥근 안개 후광 + 가운데 작은 광원 · 겹치면 더 밝게(어두운 바탕) · 천천히 숨 쉬듯 */
.spw .sbeam, .fpin .beam, .mepin .beam {
  clip-path: none; filter: blur(.6px); border-radius: 50% 50% 0 0 / 12% 12% 0 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 58%, transparent 100%);
  animation: breathe 4.5s ease-in-out infinite; }
.spw .spool, .fpin .pool, .mepin .pool { border-radius: 50%; filter: blur(3px); transform: translate(-50%, -50%); animation: none; }
.spw::after, .fpin::after, .mepin::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 2; }
@keyframes breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spw .sbeam, .fpin .beam, .mepin .beam { animation: none; } }

/* 영상 위치 — 청록 · 가장 높게 */
.spw .sbeam { width: 26px; height: 150px; background: linear-gradient(to top, rgba(186,250,255,.9) 0%, rgba(103,232,249,.55) 18%, rgba(34,211,238,.22) 55%, rgba(34,211,238,0) 100%); }
.spw .spool { width: 72px; height: 72px; background: radial-gradient(circle, rgba(165,243,252,.75) 0%, rgba(34,211,238,.35) 30%, rgba(34,211,238,.1) 55%, rgba(34,211,238,0) 72%); }
.spw::after { width: 7px; height: 7px; background: #ecfeff; box-shadow: 0 0 6px 2px rgba(165,243,252,.95), 0 0 16px 6px rgba(34,211,238,.6); }
.spw.live .sbeam { height: 200px; background: linear-gradient(to top, rgba(224,252,255,.95) 0%, rgba(103,232,249,.62) 18%, rgba(34,211,238,.26) 55%, rgba(34,211,238,0) 100%); animation-duration: 3s; }
.spw.live .spool { width: 88px; height: 88px; background: radial-gradient(circle, rgba(207,250,254,.85) 0%, rgba(34,211,238,.4) 30%, rgba(34,211,238,.12) 55%, rgba(34,211,238,0) 72%); animation: none; }
.spw.h2 .spool { width: 100px; height: 100px; } .spw.h3 .spool { width: 124px; height: 124px; }
.spw.sel .sbeam { width: 36px; height: 250px; background: linear-gradient(to top, rgba(255,255,255,.98) 0%, rgba(165,243,252,.75) 15%, rgba(34,211,238,.32) 55%, rgba(34,211,238,0) 100%); }
.spw.sel .spool { width: 130px; height: 130px; }
.spw.sel::after { width: 10px; height: 10px; }
/* GPS(현장) 이야기 — 보라 · 중간 */
.fpin.on .beam { width: 20px; height: 95px; background: linear-gradient(to top, rgba(243,232,255,.92) 0%, rgba(216,180,254,.55) 20%, rgba(168,85,247,.22) 58%, rgba(168,85,247,0) 100%); }
.fpin.on .pool { width: 54px; height: 54px; background: radial-gradient(circle, rgba(233,213,255,.75) 0%, rgba(168,85,247,.35) 32%, rgba(168,85,247,.1) 55%, rgba(168,85,247,0) 72%); animation: none; }
.fpin.on::after { width: 5px; height: 5px; background: #faf5ff; box-shadow: 0 0 5px 2px rgba(216,180,254,.95), 0 0 12px 4px rgba(168,85,247,.6); }
/* 일반 이야기 — 주황 · 가장 낮게 · 옅게 */
.fpin .beam { width: 16px; height: 55px; background: linear-gradient(to top, rgba(255,237,213,.85) 0%, rgba(253,186,116,.45) 22%, rgba(249,115,22,.16) 60%, rgba(249,115,22,0) 100%); }
.fpin .pool { width: 40px; height: 40px; background: radial-gradient(circle, rgba(254,215,170,.65) 0%, rgba(249,115,22,.28) 32%, rgba(249,115,22,.08) 55%, rgba(249,115,22,0) 72%); animation: none; }
.fpin::after { width: 4px; height: 4px; background: #fff7ed; box-shadow: 0 0 4px 2px rgba(254,215,170,.9), 0 0 10px 3px rgba(249,115,22,.5); }
body[data-base="dark"] .fpin.on .beam { height: 105px; }
/* 📍 내 위치 — 파랑 */
.mepin .beam { width: 18px; height: 110px; background: linear-gradient(to top, rgba(219,234,254,.95) 0%, rgba(147,197,253,.55) 20%, rgba(59,130,246,.22) 58%, rgba(59,130,246,0) 100%); }
.mepin .pool { width: 64px; height: 64px; background: radial-gradient(circle, rgba(191,219,254,.8) 0%, rgba(59,130,246,.35) 32%, rgba(59,130,246,0) 72%); }
/* 겹치면 더 밝게 — 어두운 바탕에서는 더하기(screen), 밝은 바탕에서는 조금 진하게 */
body[data-base="dark"] .spw .sbeam, body[data-base="dark"] .spw .spool, body[data-base="dark"] .fpin .beam, body[data-base="dark"] .fpin .pool,
body[data-base="dark"] .mepin .beam, body[data-base="dark"] .mepin .pool { mix-blend-mode: screen; }
body:not([data-base="dark"]) .spw .sbeam { filter: blur(.6px) saturate(1.4) brightness(.92); }
/* 바닥 후광을 크고 진하게 — FlareSpot 처럼 빛이 땅에 번지게(2026-10-28 · 처음엔 너무 작고 옅었다) */
.spw .spool { width: 130px; height: 130px; filter: blur(4px); background: radial-gradient(circle, rgba(165,243,252,.7) 0%, rgba(34,211,238,.42) 18%, rgba(34,211,238,.18) 42%, rgba(34,211,238,0) 68%); }
.spw.live .spool { width: 150px; height: 150px; background: radial-gradient(circle, rgba(207,250,254,.8) 0%, rgba(34,211,238,.45) 18%, rgba(34,211,238,.2) 42%, rgba(34,211,238,0) 68%); }
.spw.h2 .spool { width: 170px; height: 170px; } .spw.h3 .spool { width: 200px; height: 200px; } .spw.sel .spool { width: 210px; height: 210px; }
.fpin.on .pool { width: 96px; height: 96px; filter: blur(4px); background: radial-gradient(circle, rgba(233,213,255,.7) 0%, rgba(168,85,247,.42) 18%, rgba(168,85,247,.16) 42%, rgba(168,85,247,0) 68%); }
.fpin .pool { width: 64px; height: 64px; filter: blur(3px); background: radial-gradient(circle, rgba(254,215,170,.6) 0%, rgba(249,115,22,.32) 20%, rgba(249,115,22,.1) 45%, rgba(249,115,22,0) 68%); }
/* 후광은 더하기(screen)로 섞으면 어두운 지도에서 너무 옅다 — 일반으로 섞고 가운데를 진하게(빛기둥만 screen) */
body[data-base="dark"] .spw .spool, body[data-base="dark"] .fpin .pool, body[data-base="dark"] .mepin .pool { mix-blend-mode: normal; }
.spw .spool { background: radial-gradient(circle, rgba(165,243,252,.55) 0%, rgba(34,211,238,.38) 16%, rgba(34,211,238,.16) 40%, rgba(34,211,238,0) 66%); }
.spw.live .spool { background: radial-gradient(circle, rgba(207,250,254,.65) 0%, rgba(34,211,238,.42) 16%, rgba(34,211,238,.18) 40%, rgba(34,211,238,0) 66%); }
.fpin.on .pool { background: radial-gradient(circle, rgba(233,213,255,.6) 0%, rgba(168,85,247,.42) 16%, rgba(168,85,247,.16) 40%, rgba(168,85,247,0) 66%); }
.fpin .pool { background: radial-gradient(circle, rgba(254,215,170,.5) 0%, rgba(249,115,22,.32) 18%, rgba(249,115,22,.12) 42%, rgba(249,115,22,0) 66%); }

/* ── 바닥은 타원 · 기둥 아래는 부드럽게(2026-10-28 사용자 「빛기둥하고 바닥이 닿는 부분이 어색 · 가로로 선이 잘려 보여 · FlareSpot 은 바닥이 둥그런 타원」) ──
   기둥: 가로(양옆)와 세로(아래 끝) 둘 다 마스크로 사라지게(intersect) · 끝을 타원 가운데보다 조금 아래로 내려 타원에서 솟게.
   바닥: 비스듬히 본 땅처럼 가로로 긴 타원 빛 + 가장자리의 옅은 고리 · 가운데 광원도 납작한 타원. */
.spw .sbeam, .fpin .beam, .mepin .beam {
  bottom: calc(50% - 6px); border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 60%, transparent 100%), linear-gradient(to top, transparent 0%, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 60%, transparent 100%), linear-gradient(to top, transparent 0%, #000 14%, #000 100%);
  mask-composite: intersect; }
/* 타원 바닥 — 안쪽 빛 + 가장자리 고리(두 겹) */
.spw .spool { width: 120px; height: 40px; filter: blur(2px);
  background: radial-gradient(ellipse 50% 50% at center, rgba(207,250,254,.7) 0%, rgba(34,211,238,.42) 22%, rgba(34,211,238,.14) 52%, rgba(34,211,238,.24) 62%, rgba(34,211,238,.06) 72%, rgba(34,211,238,0) 82%); }
.spw.live .spool { width: 140px; height: 46px; background: radial-gradient(ellipse 50% 50% at center, rgba(236,254,255,.8) 0%, rgba(34,211,238,.46) 22%, rgba(34,211,238,.16) 52%, rgba(34,211,238,.28) 62%, rgba(34,211,238,.07) 72%, rgba(34,211,238,0) 82%); }
.spw.h2 .spool { width: 160px; height: 52px; } .spw.h3 .spool { width: 185px; height: 60px; } .spw.sel .spool { width: 190px; height: 62px; }
.fpin.on .pool { width: 84px; height: 28px; filter: blur(1.5px);
  background: radial-gradient(ellipse 50% 50% at center, rgba(243,232,255,.75) 0%, rgba(168,85,247,.42) 22%, rgba(168,85,247,.14) 52%, rgba(168,85,247,.24) 62%, rgba(168,85,247,.06) 72%, rgba(168,85,247,0) 82%); }
.fpin .pool { width: 56px; height: 19px; filter: blur(1.5px);
  background: radial-gradient(ellipse 50% 50% at center, rgba(255,237,213,.7) 0%, rgba(249,115,22,.36) 24%, rgba(249,115,22,.12) 55%, rgba(249,115,22,0) 78%); }
.mepin .pool { width: 80px; height: 27px; background: radial-gradient(ellipse 50% 50% at center, rgba(219,234,254,.85) 0%, rgba(59,130,246,.42) 24%, rgba(59,130,246,.14) 55%, rgba(59,130,246,0) 78%); }
/* 가운데 광원 — 납작한 타원 */
.spw::after { width: 12px; height: 5px; } .spw.sel::after { width: 16px; height: 6px; }
.fpin.on::after { width: 9px; height: 4px; } .fpin::after { width: 7px; height: 3px; }
/* 말풍선이 왼쪽에 뜰 때(오른쪽이 막혔을 때) — 꼬리도 오른쪽에 */
.fbub.left { left: auto; right: 22px; }
.fbub.left::before { left: auto; right: -6px; border-right-color: transparent; border-left: 7px solid rgba(30, 32, 40, .94); border-right: 0; }

/* ── 빛기둥 네 종류 · 밝은 테마에서도 보이게(2026-10-28 사용자 「선택된 영상 · 선택되지 않은 영상 · 좌표 있는 메시지 · 좌표 없는 메시지 —
   영상 둘은 유사하면서 다르게 · 화이트 계열 테마에서는 눈에 잘 안 들어와」) ──
   색은 변수로: --hi(바닥 쪽 밝은 빛) · --c(본색) · 어두운 테마는 빛(screen 더하기), 밝은 테마는 짙은 색 + 옅은 그림자로 */
.spw { --hi: 207,250,254; --c: 34,211,238; }
.fpin.on { --hi: 243,232,255; --c: 168,85,247; }
.fpin:not(.on) { --hi: 255,237,213; --c: 249,115,22; }
.spw .sbeam, .fpin .beam { background: linear-gradient(to top, rgba(var(--hi),.92) 0%, rgba(var(--c),.6) 18%, rgba(var(--c),.24) 55%, rgba(var(--c),0) 100%); }
.spw .spool, .fpin .pool { background: radial-gradient(ellipse 50% 50% at center, rgba(var(--hi),.7) 0%, rgba(var(--c),.44) 22%, rgba(var(--c),.15) 52%, rgba(var(--c),.26) 62%, rgba(var(--c),.06) 72%, rgba(var(--c),0) 82%); }
.fpin:not(.on) .pool { background: radial-gradient(ellipse 50% 50% at center, rgba(var(--hi),.7) 0%, rgba(var(--c),.38) 24%, rgba(var(--c),.12) 55%, rgba(var(--c),0) 78%); }
.spw::after { background: rgb(var(--hi)); box-shadow: 0 0 6px 2px rgba(var(--hi),.95), 0 0 16px 6px rgba(var(--c),.6); }
.fpin::after { background: rgb(var(--hi)); box-shadow: 0 0 5px 2px rgba(var(--hi),.9), 0 0 12px 4px rgba(var(--c),.55); }
/* 선택되지 않은 영상 — 청록 · 높게(라이브는 조금 더 높고 천천히 맥박) */
.spw .sbeam { width: 26px; height: 150px; }
.spw.live .sbeam { height: 185px; }
/* 선택된 영상 — 같은 청록에 흰 심지 · 가장 높고 굵게 · 바닥에서 물결 고리가 퍼진다 */
.spw.sel { --hi: 255,255,255; --c: 34,211,238; z-index: 5; }
.spw.sel .sbeam { width: 40px; height: 260px; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(165,243,252,.85) 14%, rgba(var(--c),.4) 50%, rgba(var(--c),0) 100%); }
.spw.sel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 20px; border-radius: 50%; border: 2px solid rgba(var(--c),.9);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0; animation: ripple 2.2s ease-out infinite; }
@keyframes ripple { 0% { width: 40px; height: 13px; opacity: .95; } 100% { width: 220px; height: 72px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spw.sel::before { animation: none; width: 140px; height: 46px; opacity: .6; } }

/* 밝은 테마(일반·밝게) — 흰 바탕에서 빛이 묻히지 않게 짙은 색 + 옅은 그림자 */
body:not([data-base="dark"]) .spw { --hi: 103,232,249; --c: 8,145,178; }
body:not([data-base="dark"]) .spw.sel { --hi: 34,211,238; --c: 14,116,144; }
body:not([data-base="dark"]) .fpin.on { --hi: 192,132,252; --c: 124,58,237; }
body:not([data-base="dark"]) .fpin:not(.on) { --hi: 253,186,116; --c: 234,88,12; }
body:not([data-base="dark"]) .spw .sbeam, body:not([data-base="dark"]) .fpin .beam {
  background: linear-gradient(to top, rgba(var(--c),.95) 0%, rgba(var(--c),.72) 22%, rgba(var(--c),.32) 60%, rgba(var(--c),0) 100%);
  filter: blur(.4px) drop-shadow(0 0 1.5px rgba(0,0,0,.28)); }
body:not([data-base="dark"]) .spw .spool, body:not([data-base="dark"]) .fpin .pool { filter: blur(1.5px);
  background: radial-gradient(ellipse 50% 50% at center, rgba(var(--c),.6) 0%, rgba(var(--c),.38) 24%, rgba(var(--c),.14) 52%, rgba(var(--c),.3) 62%, rgba(var(--c),.06) 72%, rgba(var(--c),0) 82%); }
body:not([data-base="dark"]) .spw::after, body:not([data-base="dark"]) .fpin::after { background: #fff; box-shadow: 0 0 0 2px rgba(var(--c),.95), 0 0 8px 3px rgba(var(--c),.6); }
body:not([data-base="dark"]) .spw.sel .sbeam { background: linear-gradient(to top, rgba(var(--c),1) 0%, rgba(var(--hi),.85) 16%, rgba(var(--c),.4) 55%, rgba(var(--c),0) 100%); }

/* ── 테마별 말풍선 · 빛기둥 높이(2026-10-28 사용자 「화이트 계열 테마일 때 검은색 메시지 창이 맞나 · 테마별로 · 알아서 진행」) ──
   어둡게 = 검은 칸(FlareSpot) 그대로 · 일반·밝게 = 흰 칸 + 그림자 + 왼쪽 띠 색으로 종류(GPS 보라 · 일반 주황) · 빛기둥은 2/3 높이(진한 색이라 빽빽해 보였다) */
body:not([data-base="dark"]) .fbub { background: rgba(255,255,255,.97); color: #1d2126; border-left: 3px solid #ea580c;
  box-shadow: 0 6px 18px rgba(20,30,40,.22), 0 0 0 1px rgba(20,30,40,.08); }
body:not([data-base="dark"]) .fbub.on { border-left-color: #7c3aed; box-shadow: 0 6px 18px rgba(76,29,149,.22), 0 0 0 1px rgba(124,58,237,.25); }
body:not([data-base="dark"]) .fbub::before { border-right-color: rgba(255,255,255,.97); }
body:not([data-base="dark"]) .fbub.left::before { border-right-color: transparent; border-left-color: rgba(255,255,255,.97); }
body:not([data-base="dark"]) .fbub .fb-h { color: #5f6872; }
body:not([data-base="dark"]) .fbub .fb-h b { color: #7c3aed; }
body:not([data-base="dark"]) .fbub time { color: #8a929b; }
/* 빛기둥 2/3 — 밝은 테마 */
body:not([data-base="dark"]) .spw .sbeam { height: 100px; }
body:not([data-base="dark"]) .spw.live .sbeam { height: 124px; }
body:not([data-base="dark"]) .spw.sel .sbeam { height: 175px; }
body:not([data-base="dark"]) .fpin.on .beam { height: 64px; }
body:not([data-base="dark"]) .fpin .beam { height: 38px; }
body:not([data-base="dark"]) .mepin .beam { height: 74px; }


/* ── 지구본 — 빛기둥은 그 자리 지면에 수직(2026-10-28 사용자 「구 모양에 맞게 빛기둥이 지면에 수직으로 세워져야 해」) ──
   globe.js 가 점마다 --rot(기울기) · --len(기둥 길이 비) · --flat(바닥 타원 납작함 · 예전 = 1)을 준다. 기둥은 바닥 가운데(아래에서 6px)를 축으로 돈다
   --zs = 멀리 볼수록 작게(지구 전체 45% → 7단계부터 그대로) */
.spw .sbeam, .fpin .beam, .mepin .beam { transform-origin: 50% calc(100% - 6px); transform: translateX(-50%) rotate(var(--rot, 0deg)) scale(var(--zs, 1), calc(var(--len, 1) * var(--zs, 1))); }
.spw .spool, .fpin .pool, .mepin .pool, .spw::after, .fpin::after, .spw.sel::before { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--zs, 1)) scaleY(var(--flat, 1)); }
/* 바닥 가운데의 흰 광원(작은 타원)은 없앴다(2026-10-28 사용자 「가운데 빛기둥의 지면 중심의 흰색 원을 없애 줘」) — 바닥 타원 빛·기둥만 */
.spw::after, .fpin::after { content: none; }
/* 묶음도 빛기둥 — 숫자 없이 수가 클수록 굵고 높게 · 바닥 타원도 크게(2026-10-28 사용자 「숫자를 보이지 말고 모두 빛기둥으로 · 숫자가 크면 빛기둥도 크게」) · 밝은 테마는 2/3 높이 */
.spw.clu.c1 .sbeam { width: 30px; } .spw.clu.c1 .spool { width: 140px; height: 46px; }
.spw.clu.c2 .sbeam { width: 36px; } .spw.clu.c2 .spool { width: 165px; height: 54px; }
.spw.clu.c3 .sbeam { width: 44px; } .spw.clu.c3 .spool { width: 190px; height: 62px; }
.spw.clu.c4 .sbeam { width: 54px; } .spw.clu.c4 .spool { width: 220px; height: 72px; }
/* 높이는 수에 따라 이어서(--hb · map.js) — 낱낱의 점(어둡게 150px · 밝게 100px)의 1.35~4.3배 */
.spw.clu .sbeam { height: calc(150px * var(--hb, 1)); }
body:not([data-base="dark"]) .spw.clu .sbeam { height: calc(100px * var(--hb, 1)); }
/* 가늘고 또렷하게 — 모든 단계에서(2026-10-28 사용자 「지구본일 때 흐린 굵은 빛기둥 → 좀 작지만 강한 빛」 → 「가까울 때도 동일하게 · 모바일로 보니 너무 흐릿해」)
   기둥 굵기는 35%(사용자 「더 가늘고 더 밝게」) · 흐림 없이 어두운 테마는 더 밝게 / 밝은 테마는 짙고 선명하게 · 바닥 빛도 작고(65%) 진하게 */
.spw .sbeam, .fpin .beam, .mepin .beam { transform: translateX(-50%) rotate(var(--rot, 0deg)) scale(calc(var(--zs, 1) * .35), calc(var(--len, 1) * var(--zs, 1) * var(--hk, 1))); }
/* 멀리서는 낱낱의 영상 점을 더 낮게(지구 전체 55% · 7단계부터 그대로) — 몰린 곳(묶음)과의 높이 차이가 뚜렷하게(사용자 「좀 더 극명하게」) */
.spw:not(.clu) { --hk: calc(1 - .45 * var(--far, 0)); }
.spw .spool, .fpin .pool, .mepin .pool, .spw.sel::before { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(calc(var(--zs, 1) * .65)) scaleY(var(--flat, 1)); }
body[data-base="dark"] .spw .sbeam, body[data-base="dark"] .fpin .beam, body[data-base="dark"] .mepin .beam { filter: brightness(2.5); }
body[data-base="dark"] .spw .spool, body[data-base="dark"] .fpin .pool, body[data-base="dark"] .mepin .pool { filter: blur(.6px) brightness(1.9); }
body:not([data-base="dark"]) .spw .sbeam, body:not([data-base="dark"]) .fpin .beam { filter: saturate(1.9) brightness(1.2) contrast(1.3) drop-shadow(0 0 1.5px rgba(0,0,0,.25)); }
body:not([data-base="dark"]) .spw .spool, body:not([data-base="dark"]) .fpin .pool { filter: blur(.5px) saturate(1.8) brightness(1.15); }
/* 더 밝게 — 기둥 빛을 덜 투명하게(밝기 필터만으로는 반투명이라 옅었다 · 2026-10-28 모바일 실측) · 가장자리를 좁게 깎아 심지가 또렷하게 */
.spw .sbeam, .fpin .beam, .mepin .beam {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%), linear-gradient(to top, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%), linear-gradient(to top, transparent 0%, #000 14%, #000 100%); }
body[data-base="dark"] .spw .sbeam, body[data-base="dark"] .fpin .beam {
  background: linear-gradient(to top, rgba(var(--hi),1) 0%, rgba(var(--hi),.9) 14%, rgba(var(--c),.75) 38%, rgba(var(--c),.35) 72%, rgba(var(--c),0) 100%); }
body[data-base="dark"] .spw.sel .sbeam { background: linear-gradient(to top, #fff 0%, rgba(255,255,255,.95) 20%, rgba(165,243,252,.8) 45%, rgba(var(--c),.4) 75%, rgba(var(--c),0) 100%); }
body:not([data-base="dark"]) .spw .sbeam, body:not([data-base="dark"]) .fpin .beam {
  background: linear-gradient(to top, rgba(var(--c),1) 0%, rgba(var(--hi),.95) 18%, rgba(var(--c),.8) 42%, rgba(var(--c),.4) 75%, rgba(var(--c),0) 100%); }
body:not([data-base="dark"]) .spw.sel .sbeam { background: linear-gradient(to top, rgba(var(--c),1) 0%, rgba(var(--hi),1) 18%, rgba(var(--c),.85) 45%, rgba(var(--c),.45) 78%, rgba(var(--c),0) 100%); }

/* 누른 이야기 — 잠깐 빛나게 */
.st.hl { animation: sthl 2.6s ease-out; border-radius: 8px; }
@keyframes sthl { 0%, 45% { background: rgba(168, 85, 247, .2); } 100% { background: transparent; } }

/* ── 말풍선 더 많이(2026-10-28 사용자 「화면이 작으면 메시지가 제대로 다 안 보이고 몇 개만 보여」) ──
   아래쪽 자리(.down — 꼬리가 위) · 좁은 화면은 작은 말풍선(한 줄 · 최대 150px) · 자리가 없으면 동물 얼굴만(.mini) */
.fbub.down { bottom: auto; top: 16px; }
.fbub.down::before { bottom: auto; top: 6px; }
.fbub.mini { left: 8px; bottom: 12px; padding: 2px 5px; border-radius: 10px; max-width: none; }
.fbub.mini .av { font-size: 14px; line-height: 1.2; }
.fbub.mini::before { bottom: 3px; }
.fbub.mini.left { left: auto; right: 8px; }
body:not([data-base="dark"]) .fbub.mini { border-left-width: 2px; }
@media (max-width: 899px) {
  .fbub:not(.mini) { max-width: 150px; padding: 5px 8px 4px; border-radius: 11px; }
  .fbub:not(.mini) .fb-h { font-size: 10px; max-width: 134px; }
  .fbub:not(.mini) .fb-h .av { font-size: 12px; }
  .fbub:not(.mini) p { font-size: 12px; -webkit-line-clamp: 1; margin: 1px 0 0; }
  .fbub:not(.mini) time { font-size: 9px; }
}
/* 떨어진 말풍선 — 꼬리 대신 핀에서 가는 선 */
.fbub.far::before { display: none; }
.fpin .lead { position: absolute; left: 9px; top: 9px; height: 1.5px; transform-origin: 0 50%; z-index: 2; pointer-events: none; background: rgba(226, 232, 240, .55); }
.fpin.on .lead { background: rgba(216, 180, 254, .7); }
body:not([data-base="dark"]) .fpin .lead { background: rgba(234, 88, 12, .55); }
body:not([data-base="dark"]) .fpin.on .lead { background: rgba(124, 58, 237, .6); }

/* ── 좁은 화면 — 끌어서 세 높이의 아래 판 · 보는 자리 탭 · 작은 재생 창 · 지도 정리(2026-10-29 사용자 「모바일은 UI 여유가 없어 조작성이 매우 안 좋아 → 알아서 진행」) ── */
.m-only, .grip { display: none; }
@media (max-width: 899px) {
  .m-only { display: revert; }
  .m-only[hidden] { display: none; }
  /* 판 — peek·half 는 내용만큼 · full 은 화면 거의 전부 · 끄는 동안은 손가락을 따라 */
  #panel { display: flex; flex-direction: column; padding-top: 0; max-height: calc(100dvh - 40px); transition: height .2s ease; }
  #panel.dragging { overflow: hidden; transition: none; }
  #panel[data-sheet="full"] { height: calc(100dvh - 56px); }
  .grip { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; padding: 8px 0 6px; touch-action: none; cursor: grab; pointer-events: auto; }
  .grip::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--edge2); }
  .grip button { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 0 16px; min-height: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grip button:empty { display: none; }
  /* 목록 — peek 은 찾기 칸만 · full 은 카드 세로로 넘기고 꼬리말 */
  #panel[data-sheet="peek"] .pane-list .tabs, #panel[data-sheet="peek"] .pane-list .cards { display: none; }
  #panel:not([data-sheet="full"]) .foot { display: none; }
  #panel[data-sheet="full"] .pane-list:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #panel[data-sheet="full"] .cards { flex: 1; min-height: 0; flex-direction: column; overflow: hidden auto; scroll-snap-type: none; padding-bottom: 12px; overscroll-behavior: contain; }
  #panel[data-sheet="full"] .card { flex: 0 0 auto; }
  #panel[data-sheet="full"] .csec { flex: none; }
  /* 보는 자리 — 위는 영상·이름·반응·탭(고정) · 아래는 고른 탭만 넘긴다 */
  .feed.viewing { padding-top: 0; }
  .pv { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0 12px 8px; }
  .pv > * { flex: 0 0 auto; }
  .pv-top { margin-bottom: 6px; }
  .pv .say { padding-top: 8px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }  /* 목록·동선·이야기는 .say 안에 있다 */
  .pv .say > * { flex: 0 0 auto; }
  .pv .say .line { font-size: 16px; margin-bottom: 4px; }
  .acts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .acts .been { flex: 0 0 auto; white-space: nowrap; }
  .acts .share { flex: 0 0 auto; padding: 4px 10px; font-size: 15px; border-radius: 999px; }
  .reacts button { padding: 6px 9px; }
  .vtabs { display: flex; gap: 6px; margin-top: 8px; }
  .vtabs button { flex: 1; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--chip); border: 1px solid var(--edge); border-radius: 10px; min-height: 38px; cursor: pointer; }
  .vtabs button.on { background: #0e8c9a; border-color: #0e8c9a; color: #fff; }
  .vtabs button[hidden] { display: none; }
  .vtabs small { font-size: 11px; font-weight: 600; opacity: .8; }
  #panel[data-sheet="half"] .pv .route, #panel[data-sheet="half"] .pv .lists, #panel[data-sheet="half"] .pv .talk, #panel[data-sheet="half"] .pv .pv-foot,
  #panel[data-sheet="full"] .pv .pv-foot { display: none; }
  #panel[data-sheet="full"] #pane-view:not([data-vt="list"]) .lists, #panel[data-sheet="full"] #pane-view:not([data-vt="talk"]) .talk,
  #panel[data-sheet="full"] #pane-view:not([data-vt="route"]) .route { display: none; }
  #panel[data-sheet="full"] .pv .lists, #panel[data-sheet="full"] .pv .route { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; }
  /* 이야기 탭 — 글 목록이 넘기고 입력칸은 판 바닥 */
  #panel[data-sheet="full"] .pv .talk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 10px; }
  .talk .sec { order: 0; } .talk .stories { order: 1; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 8px; }
  .talk .st-msg { order: 2; } .talk > .st-form { order: 3; margin-top: 0; } .talk .st-gps { order: 4; } .talk .st-note { order: 5; margin: 4px 0 0; font-size: 10.5px; }
  .st-form input, .st-form button { min-height: 42px; }
  .rlist button { min-height: 36px; }
  /* peek — 보는 자리는 이름 한 줄(손잡이) + 지도 위 작은 재생 창 · ✕ 로 닫으면 영상 멈춤(손잡이 「▶ 이름」을 누르면 이어서) */
  #panel[data-sheet="peek"].viewing .pv { flex: 0 0 0; padding: 0; }
  #panel[data-sheet="peek"].viewing .pv > :not(.shot):not(.mini-open):not(.mini-x) { display: none; }
  #panel[data-sheet="peek"].viewing .shot { position: fixed; right: 12px; bottom: calc(var(--sheet-h, 48px) + 12px); width: 176px; z-index: 5;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
  #panel.mini-off .shot { display: none; }
  .mini-open, .mini-x { display: none !important; }
  #panel[data-sheet="peek"].viewing:not(.mini-off) .mini-open { display: block !important; position: fixed; right: 12px; bottom: calc(var(--sheet-h, 48px) + 12px);
    width: 176px; height: 99px; z-index: 6; border: 0; background: transparent; cursor: pointer; }
  #panel[data-sheet="peek"].viewing:not(.mini-off) .mini-x { display: grid !important; place-items: center; position: fixed; right: 4px; bottom: calc(var(--sheet-h, 48px) + 95px);
    width: 30px; height: 30px; z-index: 7; border-radius: 50%; border: 0; background: rgba(20, 24, 29, .9); color: #fff; font-size: 14px; cursor: pointer; }
  /* 머리글 — 단추 줄을 제목 옆으로(지도가 위로 넓어진다) · 단추는 손가락 크기 */
  .top { padding: 12px 12px 26px; }
  .top .tools { position: absolute; top: 10px; right: 10px; margin: 0; flex-wrap: nowrap; gap: 5px; }
  .tool.ico { width: 40px; min-height: 40px; font-size: 17px; border-radius: 20px; }
  .top h1 { font-size: 20px; }
  .top p { font-size: 12px; }
  /* 누르는 칸 넓게(보이는 크기는 그대로) — 이야기 핀 · 얼굴 말풍선 · 동선 번호 */
  .fpin .hit { inset: -11px; }
  .fbub.mini { padding: 4px 7px; }
  .rstop { position: relative; }
  .rstop::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
}

/* ── 앱 안 브라우저 — 가벼운 모드(html.lite · index.html)(2026-10-29 사용자 「핸드폰 브라우저는 잘 되는데 임베디드 브라우저가 문제」) ──
   Meta 앱 안 브라우저(안드로이드 WebView)는 그리기가 느리다 — 빛의 흐림·가리개·섞기·숨쉬기를 끄고(기둥은 위로 갈수록 옅어지는 색만) · 안내 줄 */
html.lite .spw .sbeam, html.lite .fpin .beam, html.lite .mepin .beam, html.lite .spw .spool, html.lite .fpin .pool, html.lite .mepin .pool {
  filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: normal !important; animation: none !important; }
html.lite .spw .sbeam, html.lite .fpin .beam, html.lite .mepin .beam { border-radius: 999px 999px 0 0; opacity: .8; }
html.lite .spw.sel::before { animation: none; width: 120px; height: 40px; opacity: .7; }
html.lite .fbub { box-shadow: none !important; }
.inapp { pointer-events: auto; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 6px 6px 12px; max-width: 360px; border-radius: 999px;
  background: rgba(30, 32, 40, .92); color: #fff; font-size: 12.5px; }
.inapp[hidden] { display: none; }
.inapp span { flex: 1; min-width: 0; }
.inapp .ia-open { font: inherit; font-size: 12.5px; font-weight: 700; border: 0; border-radius: 999px; padding: 6px 12px; background: #0e8c9a; color: #fff; cursor: pointer; white-space: nowrap; }
.inapp .ia-x { font: inherit; border: 0; background: none; color: #cbd5e1; padding: 4px 8px; cursor: pointer; }
/* 앱 안 브라우저 — 눌러서 재생 · 처음 고르는 창 */
.shot .tap-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 26px; padding-left: 5px; cursor: pointer; z-index: 2; }
.inapp-dlg { border: 0; border-radius: 16px; padding: 20px; width: min(340px, 88vw); background: var(--panel); color: var(--ink); text-align: center; }
.inapp-dlg::backdrop { background: rgba(0, 0, 0, .55); }
.iad-t { margin: 0; font-size: 16px; font-weight: 800; }
.iad-how { margin: 8px 0 16px; font-size: 13.5px; color: var(--mute); line-height: 1.5; word-break: keep-all; }
.iad-acts { display: grid; gap: 8px; }
.iad-acts button { font: inherit; font-size: 15px; border-radius: 12px; min-height: 46px; cursor: pointer; }
.iad-open { border: 0; background: #0e8c9a; color: #fff; font-weight: 800; }
.iad-open[hidden] { display: none; }
.iad-stay { border: 1px solid var(--edge); background: var(--chip); color: var(--ink); }