:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface2: #f2f3f5; /* Edits 회색 서피스 */
  --line: #ececf0;
  --ink: #111318;
  --ink2: #5c626f;
  --ink3: #8a8f98;
  --accent: #4f8dff; /* 데이터 색(DM·링)에만 — 크롬 액센트는 검정 */
  --accent2: #38bdf8;
  --radius: 20px;
  --header-h: 60px;
  --sab: env(safe-area-inset-bottom, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* display 를 지정한 요소에도 hidden 속성이 항상 이기게 */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- splash ---------- */
#splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity 0.35s ease;
}
#splash.out {
  opacity: 0;
  pointer-events: none;
}
.splash-logo {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  animation: breathe 1.6s ease-in-out infinite;
}
.splash-logo img {
  display: block;
  height: 44px;
  width: auto;
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- frame ---------- */
#topbar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg);
  position: sticky; /* 홈을 스크롤해도 상단바가 남아야 다른 탭(고정 뷰) 위로 홈 내용이 새지 않음 (2026-09-05 대표님 신고) */
  top: 0;
  z-index: 30;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.brand-logo {
  display: block; /* 홈 탭 = 로고 워드마크, 다른 탭 = 텍스트 (서버 flags.brand.logo) */
  height: 26px;
  width: auto;
}
.top-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--surface2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  padding: 0;
}
.top-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-note {
  font-size: 12.5px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface2);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
  white-space: nowrap;
}
.lang-btn:hover {
  color: var(--ink);
  border-color: rgba(17, 19, 26, 0.15);
}

#layout {
  display: grid;
  grid-template-columns: 1fr 404px;
  height: calc(100dvh - var(--header-h) - 58px - var(--sab)); /* 하단 탭바 공간 */
}

/* ---------- map ---------- */
#mapWrap {
  isolation: isolate; /* 지도 오버레이(hero·재생 버튼 등 z 1300)가 sticky 상단바 위로 못 올라오게 자체 stacking context */
  position: relative;
  min-width: 0;
}
#map {
  position: absolute;
  inset: 0;
  background: #eef0f4;
}
.maplibregl-map {
  font-family: inherit;
}
.maplibregl-popup-content {
  background: var(--surface2);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 10px;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface2); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface2); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface2); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface2); }
.maplibregl-ctrl-group {
  background: var(--surface2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.maplibregl-ctrl-group button {
  background: transparent;
}
.maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--line);
}
.maplibregl-ctrl button .maplibregl-ctrl-icon {
  filter: invert(1) opacity(0.85);
}
.maplibregl-canvas:focus {
  outline: none;
}
.session-pop-title {
  font-weight: 700;
}
.session-pop-sub {
  color: var(--ink2);
  font-size: 12.5px;
}

/* 내 기록 아바타 — 인스타 스토리 링 느낌 */
.me-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.me-avatar svg,
.me-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--ink2);
  padding: 5px;
  box-sizing: border-box;
}
.me-avatar img {
  padding: 0;
  object-fit: cover;
}

/* ---------- hero overlay ---------- */
.hero {
  position: absolute;
  inset: 0;
  z-index: 1300; /* Leaflet 컨트롤(1000)보다 위 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s ease;
}
.hero.out {
  opacity: 0;
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero .hero-sub {
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--ink2);
  max-width: 420px;
  line-height: 1.65;
}
.hero-actions {
  margin-top: 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-privacy {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink3);
}
/* 홈 버튼 = 세로 한 줄 스택 (2026-09-03 대표님: 시작하기 크게 한 줄 → 타임라인 올리기 → 구글 로그인) */
.hero-stack {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 340px;
  gap: 10px;
  margin-top: 24px;
}
.btn.btn-hero {
  width: 100%;
  min-height: 54px;
  font-size: 16.5px;
  border-radius: 999px;
}
.gsi-btn.btn-hero {
  width: 100%;
  min-height: 50px;
  font-size: 15px;
  border-radius: 999px;
}
@media (max-width: 880px) {
  .hero {
    padding: 22px 22px 18px;
  }
  .hero h1 {
    font-size: 27px;
  }
  .hero .hero-sub {
    margin-top: 10px;
    font-size: 14.5px;
  }
  .hero-stack {
    margin-top: 18px;
    gap: 9px;
  }
  .btn.btn-hero {
    min-height: 50px;
    font-size: 16px;
  }
}

/* 홈 쇼케이스 — 업로드 전 빈 자리에 랜덤 동선 자동재생 (서버 flags.showcase) */
.showcase-card {
  position: relative;
  padding: 0;
  height: 320px;
  overflow: hidden;
  background: #eef0f4;
}
.showcase-map {
  position: absolute;
  inset: 0;
}
.showcase-fade {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 3;
}
.showcase-card.fading .showcase-fade {
  opacity: 1;
}
.showcase-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
@media (max-width: 880px) {
  .showcase-card {
    height: max(240px, calc(100dvh - var(--header-h) - 47vh - 58px - var(--sab) - 44px));
  }
}
.hero-help {
  margin-top: 10px;
  max-width: 430px;
  text-align: left;
}
.hero-help summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ink2);
  text-align: center;
  padding: 8px;
}
.hero-help ol {
  margin-top: 8px;
  padding: 14px 16px 14px 34px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.8;
}
.hero-help-actions {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-top: 0;
  padding: 0 16px 14px;
  border-radius: 0 0 14px 14px;
  display: flex;
}
.hero-help-note {
  padding: 0 16px 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.6;
}

/* ---------- buttons ---------- */
.btn {
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover {
  background: #24262e;
}
.btn-ghost {
  background: var(--surface2);
  border: 0;
  color: var(--ink);
}
.btn-ghost:hover {
  background: #e7e9ed;
}
.btn-small {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 13px;
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- panel ---------- */
#panel {
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px calc(28px + var(--sab));
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}
.card {
  background: var(--surface2);
  border: 0;
  border-radius: var(--radius);
  padding: 18px;
}
.card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.card-empty {
  font-size: 13.5px;
  color: var(--ink3);
  line-height: 1.7;
}

/* me card */
.me-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.person-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
.me-name {
  font-weight: 800;
  font-size: 16px;
}
.me-period {
  font-size: 12.5px;
  color: var(--ink3);
  margin-left: auto;
  white-space: nowrap;
}
.me-stats {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
.me-stat b {
  display: block;
  font-size: 17px;
  font-weight: 800;
}
.me-stat span {
  font-size: 12px;
  color: var(--ink3);
}

/* friends chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 0;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip.on {
  background: var(--ink);
  color: #fff;
}
.chip.on .chip-x {
  color: rgba(255, 255, 255, 0.7);
}
.chip .chip-x {
  color: var(--ink3);
  font-size: 15px;
  line-height: 1;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.chip .chip-x:hover {
  background: rgba(17, 19, 26, 0.07);
}
.chip .chip-x:hover {
  color: var(--ink);
}
.friends-hint {
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 10px;
  line-height: 1.6;
}

/* together stats */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat {
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  padding: 14px 15px;
  min-width: 0;
}
.stat.wide {
  grid-column: 1 / -1;
}
.stat-label {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.4;
}
.stat-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.stat-value.grad {
  color: var(--ink);
}
.stat-sub {
  font-size: 12px;
  color: var(--ink3);
  margin-top: 3px;
}
.together-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* 등급 세그먼트 */
.tier-seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.tier-seg button {
  min-height: 38px;
  border-radius: 999px;
  border: 0;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink2);
  padding: 6px 4px;
}
.tier-seg button.on {
  background: var(--ink);
  color: #fff;
}
.tier-desc {
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 마이페이지 */
.profile-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.avatar {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-mid {
  flex: 1;
  min-width: 0;
}
.intro-input {
  margin-top: 6px;
  width: 100%;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 0;
  background: var(--surface2);
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}
.intro-input:focus {
  box-shadow: 0 0 0 1.5px var(--ink) inset;
}
.share-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
}
.share-toggle input {
  display: none;
}
.share-toggle-ui {
  width: 46px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  background: #e2e4e9;
  border: 0;
  position: relative;
  transition: background 0.2s ease;
}
.share-toggle-ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 19, 24, 0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.share-toggle input:checked + .share-toggle-ui {
  background: var(--ink);
}
.share-toggle input:checked + .share-toggle-ui::after {
  transform: translateX(18px);
  background: #fff;
}
.share-toggle-label {
  font-size: 14px;
  font-weight: 700;
}
.share-state {
  font-size: 12.5px;
  color: var(--ink2);
  margin: 4px 0 8px;
  line-height: 1.5;
}

/* 친구 추가 시트 */
.sheet {
  width: min(94vw, 420px);
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sheet-x {
  position: static;
  width: 36px;
  height: 36px;
}
.sheet-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sheet-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
  margin-bottom: 10px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
}
.contact-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.contact-mid {
  flex: 1;
  min-width: 0;
}
.contact-name {
  font-size: 14px;
  font-weight: 700;
}
.contact-sub {
  font-size: 12px;
  color: var(--ink3);
  margin-top: 1px;
}

/* 재생 하단 */
.play-sub {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.view-seg {
  display: inline-flex;
  gap: 5px;
}
.view-seg button {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 0;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink3);
  white-space: nowrap;
}
.view-seg button.on {
  background: var(--ink);
  color: #fff;
}
.follow-btn {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 0;
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink3);
  white-space: nowrap;
}
.follow-btn.on {
  background: var(--ink);
  color: #fff;
}
.play-hint {
  font-size: 12.5px;
  color: var(--ink3);
}

/* sessions */
.session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface);
  border: 0;
  border-radius: 14px;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease;
}
.session-item:hover {
  background: #fafbfc;
}
.session-date {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.session-meta {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 2px;
}
.session-go {
  margin-left: auto;
  color: var(--ink3);
  font-size: 12px;
  white-space: nowrap;
}

/* ranking */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rank-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 4px 2px;
  border-radius: 10px;
}
.rank-row:hover {
  background: rgba(17, 19, 26, 0.04);
}
.rank-no {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink3);
  text-align: center;
}
.rank-no.top {
  color: var(--ink);
}
.rank-mid {
  min-width: 0;
}
.rank-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}
.rank-bar {
  margin-top: 5px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.05);
  overflow: hidden;
}
.rank-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.rank-val {
  text-align: right;
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.45;
  white-space: nowrap;
}
.rank-val b {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

/* playback */
.play-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.play-btn {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-slider {
  flex: 1;
  accent-color: var(--ink);
  min-width: 0;
  height: 24px;
}
.play-speed {
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
}
.play-hint {
  font-size: 12.5px;
  color: var(--ink3);
}

/* 깜짝 발견 배너 */
.surprise {
  position: absolute;
  top: 76px; /* 재생 HUD(상단 중앙) 아래 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200; /* Leaflet 컨트롤(1000)보다 위 */
  width: min(92%, 460px);
  background: rgba(255, 255, 255, 0.97);
  border: 0;
  border-radius: 18px;
  padding: 13px 40px 13px 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(17, 19, 24, 0.18);
  animation: slideDown 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slideDown {
  from { transform: translate(-50%, -24px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.surprise-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.03em;
}
.surprise-body {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.6;
}
.surprise-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink3);
  font-size: 17px;
}
.surprise-x:hover {
  color: var(--ink);
  background: rgba(17, 19, 26, 0.05);
}

/* 순위 감성 멘트 */
.rank-quote {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
  line-height: 1.5;
}

/* 지도 중앙 재생 버튼 (업로드 후 눌러서 시작) */
.big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1250;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(17, 19, 24, 0.35), 0 0 0 0 rgba(17, 19, 24, 0.3);
  animation: bigPulse 1.8s ease-out infinite;
}
.big-play svg {
  margin-left: 5px;
}
.big-play:active {
  transform: translate(-50%, -50%) scale(0.94);
}
@keyframes bigPulse {
  0% { box-shadow: 0 10px 40px rgba(17, 19, 24, 0.35), 0 0 0 0 rgba(17, 19, 24, 0.3); }
  70% { box-shadow: 0 10px 40px rgba(17, 19, 24, 0.35), 0 0 0 26px rgba(17, 19, 24, 0); }
  100% { box-shadow: 0 10px 40px rgba(17, 19, 24, 0.35), 0 0 0 0 rgba(17, 19, 24, 0); }
}

.playhud-dist {
  font-size: 12.5px;
  color: var(--ink2);
  margin-top: 3px;
  font-weight: 600;
}

/* on-map play HUD — 레퍼런스 05: 상단 중앙 카드 (제목 + 기간·누적거리) */
.playhud {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  border-radius: 18px;
  padding: 10px 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(17, 19, 24, 0.12);
  pointer-events: none;
  text-align: center;
  max-width: min(86%, 420px);
}
.playhud-title {
  font-size: 15px;
  font-weight: 800;
}
.playhud-sub {
  font-size: 12.5px;
  color: var(--ink2);
  margin-top: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.playhud-badge {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 700;
}
.playhud-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* play markers */
.play-marker {
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

/* session map marker */
.session-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #38bdf8;
  border: 2px solid #fff;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.9));
  cursor: pointer;
}

/* 인사이트 */
.insights {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.insight {
  font-size: 13.5px;
  line-height: 1.5;
}
.insight b {
  color: var(--ink);
  font-weight: 800;
}

/* SNS 공유 카드 */
.sns-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-progress {
  margin-top: 12px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.06);
  overflow: hidden;
}
.video-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.2s linear;
}

/* 친구 초대 CTA */
.invite-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* 하단 탭바 (앱 스타일) */
#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  display: flex;
  height: calc(58px + var(--sab));
  padding-bottom: var(--sab); /* 안드로이드 3버튼/제스처 내비와 겹침 방지 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}
#tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b5bac4;
}
#tabbar .tab span {
  display: none; /* Edits — 아이콘 전용 탭바 (서버 flags.menu.showLabels 로 라벨 켜기) */
}
#tabbar.labels .tab span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
}
#tabbar.labels .tab svg {
  width: 22px;
  height: 22px;
}
#tabbar .tab svg {
  width: 26px;
  height: 26px;
}
#tabbar .tab.on {
  color: var(--ink);
}
#tabbar .tab.on svg {
  stroke-width: 2.5;
}

/* 마이페이지 뷰 (하단 탭) */
.my-view {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: calc(58px + var(--sab));
  z-index: 1450;
  background: var(--bg);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* footer */
.foot-note {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.7;
  padding: 2px 6px 0;
}
/* 홈 맨 위 꾸미기 (마이페이지 꾸미기 DOM 이동) */
#cardDeco {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#cardDeco .deco-home-title {
  padding: 2px 4px 0;
}
/* 내 uid + 친구 uid 입력 (2026-09-05 대표님) */
.uid-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink2);
  flex-wrap: wrap;
}
/* uid = 평범한 폰트 + 노란 형광 배경 (2026-09-05 대표님) */
.uid-hl {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fff3a3;
  border-radius: 6px;
  padding: 2px 8px;
}
/* 내 기록 이름 옆 uid 동그라미 박스 */
.uid-pill {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  background: #fff3a3;
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.uid-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.uid-input-row .dlg-input {
  margin-top: 0;
  min-height: 44px;
  padding: 10px 14px;
  flex: 1;
  min-width: 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 15px;
}
/* 홈 꾸미기 카드 접기/펼치기 — 기본 접힘 */
.deco-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--surface2);
  border: 0;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.deco-toggle .deco-caret {
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
  transition: transform 0.2s ease;
}
#cardDeco.collapsed .deco-caret {
  transform: rotate(-90deg);
}
#cardDeco.collapsed #decoHome {
  display: none;
}
/* 마이페이지 하단 = [로그아웃] [계정 삭제] 나란히 */
.account-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
}
/* 겹친 유저 카드 하단 액션 */
.enc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
/* 영상 저장 중 상태 — 지도 위 하단 (앱 전체화면 재생 중에도 보임) */
.fs-video-status {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(24px + var(--sab));
  z-index: 1400;
  background: rgba(17, 19, 24, 0.84);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.fs-video-status .video-progress {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.18);
}
.fs-video-status .video-progress i {
  background: #fff;
}
/* 채팅 빈 상태 — 제목 + 초대 안내 (2026-09-05 대표님 문구) */
.dm-empty {
  text-align: center;
  padding: 44px 20px 24px;
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.7;
}
.dm-empty b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ---------- dialog (Edits — 모바일 = 바텀시트, 데스크탑 = 센터 카드) ---------- */
dialog {
  margin: auto;
  border: 0;
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  padding: 24px;
  width: min(92vw, 360px);
}
dialog::backdrop {
  background: rgba(15, 17, 24, 0.45);
  backdrop-filter: blur(3px);
}
@media (max-width: 880px) {
  dialog {
    width: 100vw;
    max-width: 100vw;
    margin: auto 0 0;
    border-radius: 26px 26px 0 0;
    padding: 26px 20px calc(22px + var(--sab));
    max-height: calc(100dvh - 16px); /* 내용이 길어도 시트 안에서 스크롤 (85차) */
    overflow-y: auto;
  }
  dialog::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #d7d9df;
    margin: -12px auto 16px;
  }
}
.dlg-title {
  font-size: 17px;
  font-weight: 800;
}
.dlg-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink2);
}
.dlg-input {
  margin-top: 16px;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border-radius: 16px;
  border: 0;
  background: var(--surface2);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.dlg-input:focus {
  box-shadow: 0 0 0 1.5px var(--ink) inset;
}
.dlg-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* 앱 다운로드 창 — 스토어 두 버튼 세로로 (내 폰 쪽이 위) */
.appdl-stores {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appdl-stores.android-first .appdl-android {
  order: -1;
}
.appdl-store {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #111318;
  color: #fff;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.appdl-store:hover {
  background: #22252d;
}
.appdl-store:active {
  transform: scale(0.98);
}
.appdl-store svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.appdl-store span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.appdl-store small {
  font-size: 11px;
  opacity: 0.75;
}
.appdl-store b {
  font-size: 17px;
  font-weight: 700;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--sab));
  transform: translateX(-50%);
  z-index: 2100;
  background: #1c1e24;
  border: 0;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 86vw;
  text-align: center;
}

/* ---------- mobile: 세로 1자 stack ---------- */
@media (max-width: 880px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  #layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100dvh - var(--header-h) - 58px - var(--sab));
    padding-bottom: calc(58px + var(--sab)); /* 탭바가 마지막 카드 가리지 않게 */
  }
  #mapWrap {
    height: 47vh;
    min-height: 300px;
    flex: none;
    position: relative;
  }
  #panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px 14px calc(30px + var(--sab));
    overflow: visible;
  }
  /* 마지막 카드(친구 초대)가 하단 탭바에 안 가리게 — 탭바 높이만큼 여백 (2026-09-05 대표님) */
  #panel::after {
    content: '';
    display: block;
    height: calc(58px + var(--sab) + 20px);
  }
  .topbar-note {
    font-size: 11.5px;
  }
  /* 터치 타겟 44px 보장 */
  .btn-small {
    min-height: 44px;
  }
  .chip {
    min-height: 44px;
  }
  .chip .chip-x {
    width: 40px;
    height: 40px;
    margin: -8px -10px -8px -4px;
  }
  .surprise {
    padding-right: 52px;
  }
  .surprise-x {
    width: 44px;
    height: 44px;
    top: 4px;
    right: 4px;
  }
  .lang-btn,
  .follow-btn {
    min-height: 44px;
  }
  .tier-seg button {
    min-height: 44px;
  }
  .sheet-x {
    width: 44px;
    height: 44px;
  }
  .hero {
    padding: 20px 16px;
  }
  .hero .hero-sub {
    font-size: 14px;
  }
  .session-list {
    max-height: none;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
}

/* ad slot (flags.ad) */
.ad-slot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(58px + var(--sab));
  z-index: 1400;
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--line);
}
.ad-slot img {
  max-width: 100%;
  max-height: 64px;
  display: block;
}

/* 앱 재생 전체화면 */
body.fs-play #mapWrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 1900;
}
body.fs-play .maplibregl-ctrl-top-right {
  display: none; /* 전체화면에선 줌버튼 숨김 — X 와 겹치지 않게 */
}
body.fs-play #topbar,
body.fs-play #panel,
body.fs-play #tabbar,
body.fs-play .ad-slot {
  display: none !important;
}
.fs-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 19, 26, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.avatar-caption {
  font-size: 12px;
  color: var(--ink3);
  margin: 2px 0 6px;
}
#meName {
  cursor: pointer;
  text-decoration: underline dotted rgba(17, 19, 26, 0.2);
  text-underline-offset: 3px;
}

/* 재생 마커 (DOM — 카메라와 동일 프레임 동기) */
.live-markers {
  position: absolute;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
}
.live-marker {
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--c, #2b6cff);
  box-sizing: border-box;
  will-change: transform;
}
.live-marker::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--c, #2b6cff);
  animation: livePulse 1s ease-out infinite;
}
/* 친구 마커 = 기록 공백 동안 마지막 위치에 흐리게 (사라졌다 나타나기 X, 2026-09-08 대표님) */
.live-marker.idle {
  opacity: 0.45;
}
/* 71차: 시점 대상 마커는 겹쳐도 항상 맨 위 */
.live-marker.lead {
  z-index: 2;
}
.live-marker.idle::after {
  animation: none;
}
@keyframes livePulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* 진한 최근 선 캔버스 (카메라와 동일 프레임) */
.head-canvas {
  position: absolute;
  inset: 0;
  z-index: 890;
  pointer-events: none;
}
/* ── 76차: 친구 시점·추억 재생 중 [기존 경로로] (지도 왼쪽 위) ── */
.home-route-btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 2000;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

/* ── 75차 (2026-09-09 대표님): 추억 탭 — 여행·친구와 겹친 지역 다이어리 ── */
.mem-empty {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 24px 8px;
  text-align: center;
}
.mem-card {
  background: var(--surface2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.mem-photo-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #ffe4ec, #e6ecff);
  overflow: hidden;
}
.mem-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mem-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff5c8a;
  opacity: 0.5;
}
.mem-photo-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.mem-body {
  padding: 12px 14px 14px;
}
.mem-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mem-title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mem-edit {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #e0518c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.mem-edit:active {
  background: var(--surface);
}
.mem-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.mem-by {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.mem-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
/* 77차: 사람 필터 + 공유 버튼 + 테마 섹션 + 자동 동선 썸네일 + 공개/비공개 토글 */
.mem-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mem-people {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.mem-people::-webkit-scrollbar {
  display: none;
}
.mem-person {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 4px;
  border: 0;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.mem-person.all {
  padding: 0 14px;
}
.mem-person.on {
  background: var(--ink);
  color: #fff;
}
.mem-person .mp-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dc, #4f8dff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.mem-person .mp-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mem-share-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mem-section {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mem-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mem-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 19, 26, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
.mem-photo-wrap.tap {
  cursor: pointer;
}
.mem-share {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.mem-share.on {
  color: #189d70;
}
.mem-share-opts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.mem-pin-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mem-pin-row .dlg-input {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.2em;
  font-weight: 800;
}
.mem-share-link {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface2);
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}
.mem-lbl {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.mem-dates {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mem-dates label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.mem-dates .dlg-input {
  width: 100%;
  min-width: 0;
}

/* 71차: 캔버스 선이 아래 GL 과거 선과 겹치면 섞인 색으로 (multiply) — 서버 flags.play.headCssBlend=false 면 body.no-head-blend (2026-09-08 대표님 "겹치면 겹친 색상") */
body:not(.no-head-blend) .head-canvas {
  mix-blend-mode: multiply;
}

/* 여정 결산 */
.summary-ov {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(15, 17, 24, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.summary-card {
  position: relative;
  width: min(92vw, 380px);
  background: var(--surface);
  border: 0;
  border-radius: 26px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
@media (max-width: 880px) {
  .summary-ov {
    align-items: flex-end;
    padding: 0;
  }
  .summary-card {
    width: 100vw;
    max-width: none;
    border-radius: 26px 26px 0 0;
    padding: 26px 20px calc(22px + var(--sab));
  }
  .summary-card::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #d7d9df;
    margin: -12px auto 16px;
  }
}
.summary-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
}
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink2);
}
.summary-row b {
  color: var(--ink);
  text-align: right;
}
.summary-replay-label {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink3);
}
.summary-replay {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.summary-replay button {
  flex: 1;
  min-height: 40px;
  border-radius: 999px;
  border: 0;
  background: var(--surface2);
  font-size: 13px;
  font-weight: 700;
}
.summary-replay button:hover {
  background: var(--ink);
  color: #fff;
}

/* 시작 가이드 */
/* 안내 모달 = 폴센트 "참여 방법" 캡쳐 느낌 (2026-09-03 대표님): 연파랑 번호원 + 세로 연결선 + 굵은 단계 제목(파랑 강조) + 회색 상세 박스 + 하단 고정 CTA */
.guide-card {
  max-height: 88vh;
  overflow-y: auto;
}
.guide-steps {
  margin-top: 6px;
}
.guide-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 12px 0 14px;
}
.guide-step::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 42px;
  bottom: -12px;
  width: 2px;
  background: #dbe7ff;
}
.guide-step:last-child::after {
  display: none;
}
.guide-no {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e9f1ff;
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-body {
  flex: 1;
  min-width: 0;
}
.guide-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.guide-text .hl {
  color: var(--accent);
}
.guide-mock {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
}
.guide-mock span { font-size: 18px; }
.guide-mock b { font-size: 14px; }
.guide-mock i { margin-left: auto; color: var(--ink3); font-style: normal; }
.guide-btn {
  margin-top: 10px;
}
.guide-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink3);
  line-height: 1.5;
}
.guide-cta {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding-top: 10px;
  background: var(--surface);
}

/* 기기 상단바(상태바) 회피 — 전체화면 재생 시 HUD·X 를 상태바 아래로 */
body.fs-play .playhud {
  top: calc(10px + max(env(safe-area-inset-top, 0px), 34px));
}
body.fs-play .fs-close {
  top: calc(8px + max(env(safe-area-inset-top, 0px), 34px));
}
/* 일반 화면 상단바도 노치·상태바만큼 내려앉게 */
#topbar {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
.kakao-btn {
  background: #fee500;
  color: #191919;
  font-weight: 800;
}
.kakao-btn:hover {
  box-shadow: 0 6px 20px rgba(254, 229, 0, 0.35);
}

/* 앱(WebView)에서 기기 상태바 회피 — 화면 최상단 요소 전역 */
.is-app #topbar {
  padding-top: max(env(safe-area-inset-top, 0px), 30px);
  height: calc(var(--header-h) + max(env(safe-area-inset-top, 0px), 30px));
}
.is-app .my-view {
  top: calc(var(--header-h) + max(env(safe-area-inset-top, 0px), 30px));
}
.is-app #layout {
  /* 고정 높이면 #app 이 콘텐츠보다 짧아져 sticky 상단바가 한 화면 뒤 떨어져 나감 → 최소 높이 (리뷰 확정 2026-09-05) */
  height: auto;
  min-height: calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab));
}

/* 재생 중 확대/축소 버튼 */
.zoom-ctrl {
  position: absolute;
  right: 12px;
  bottom: calc(90px + var(--sab));
  z-index: 1950;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zoom-ctrl button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(17, 19, 26, 0.14);
  box-shadow: 0 2px 8px rgba(17, 19, 26, 0.12);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
}

/* ---------- DM · 단톡방 (인스타 DM 다크 스타일) ---------- */
.dm-view.my-view {
  padding: 0;
  gap: 0;
}
#dmListWrap {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#tabbar .tab {
  position: relative;
}
.tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e23d3d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 채팅 목록 — 인스타 DM 리스트 */
.dm-room-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  cursor: pointer;
}
.dm-room-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex: none;
}
.dm-room-mid {
  flex: 1;
  min-width: 0;
}
.dm-room-name {
  font-weight: 600;
  font-size: 14.5px;
}
.dm-room-last {
  font-size: 13px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.dm-room-row.unread .dm-room-name {
  font-weight: 800;
}
.dm-room-row.unread .dm-room-last {
  color: var(--ink);
  font-weight: 600;
}
.dm-room-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.dm-room-time {
  font-size: 11.5px;
  color: var(--ink3);
}
.dm-unread {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* 채팅방 */
.dm-chat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.dm-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 6px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.dm-back {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  padding: 0 6px 3px 10px;
  cursor: pointer;
}
.dm-head-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex: none;
}
.dm-head-mid {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dm-head-mid b {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-head-sub {
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 1px;
}
.dm-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
}
.dm-date-sep {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink3);
  margin: 16px 0 8px;
}
.dm-date-sep:first-child {
  margin-top: 4px;
}
.dm-sender {
  font-size: 11px;
  color: var(--ink3);
  margin: 10px 0 3px 42px;
}
.dm-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 2px;
}
.dm-row.first {
  margin-top: 10px;
}
.dm-sender + .dm-row.first {
  margin-top: 0;
}
.dm-row.mine {
  justify-content: flex-end;
}
.dm-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
}
.dm-msg-avatar.ghost {
  background: transparent;
}
.dm-bubble {
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.dm-row.theirs .dm-bubble {
  background: #efefef;
  color: var(--ink);
}
.dm-row.mine .dm-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}
/* 같은 사람 연속 말풍선 = 쌓인 쪽 모서리만 살짝 (인스타 그룹핑) */
.dm-bubble.cont-top-l { border-top-left-radius: 6px; }
.dm-bubble.cont-bot-l { border-bottom-left-radius: 6px; }
.dm-bubble.cont-top-r { border-top-right-radius: 6px; }
.dm-bubble.cont-bot-r { border-bottom-right-radius: 6px; }
.dm-time {
  font-size: 10.5px;
  color: var(--ink3);
  margin-top: 3px;
}
.dm-time.mine {
  text-align: right;
  margin-right: 6px;
}
.dm-time.theirs {
  margin-left: 42px;
}

/* 입력줄 — 알약 입력 + 원형 전송 */
.dm-inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  flex: none;
  background: var(--bg);
}
.dm-inputrow input {
  flex: 1;
  background: #f1f2f6;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--ink);
  padding: 11px 16px;
  font-size: 14.5px;
  min-width: 0;
}
.dm-inputrow input:focus {
  outline: none;
  border-color: rgba(17, 19, 26, 0.18);
}
.dm-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dm-send-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.newchat-list {
  max-height: 40vh;
  overflow-y: auto;
  margin: 10px 0;
}
.newchat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14px;
  cursor: pointer;
}
.newchat-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

/* ---------- 재생 동그라미 꾸미기 ---------- */
.marker-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.marker-preview {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 7px solid var(--mc, #2b6cff);
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  flex: none;
}
.marker-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.marker-swatches {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}
.marker-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.marker-swatch.on {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--ink);
}
/* 무지개 = 고정 색 옵션 (자유 색상 선택기 제거, 2026-09-07 대표님) */
.marker-swatch.rainbow {
  background: conic-gradient(#ff4d4d, #ffb02e, #ffe600, #4cd964, #34aadc, #5856d6, #ff2d55, #ff4d4d);
}
.live-marker img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.live-marker.has-img {
  width: 36px;
  height: 36px;
  left: -18px;
  top: -18px;
  border-width: 3px;
}

/* ---------- 강제 업데이트 (뒤 화면 딤 + 카드 팝업 — 토스/스토어 패턴) ---------- */
.force-ov {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(15, 17, 24, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.force-card {
  max-width: 320px;
  width: 100%;
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(17, 19, 26, 0.07);
  border-radius: 26px;
  padding: 30px 24px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.force-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.25);
}
.force-logo {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: var(--ink3);
  margin-top: 14px;
}
.force-title {
  font-size: 19px;
  font-weight: 800;
  margin-top: 6px;
}
.force-msg {
  color: var(--ink2);
  font-size: 14px;
  margin-top: 9px;
  line-height: 1.6;
}

/* ---------- 기본 프로필(사진 없는 사람) · DM 사진 · 꾸미기 페이지 · 전화번호 행 ---------- */
.avatar-default {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8093;
}
.avatar-default svg {
  width: 55%;
  height: 55%;
}
.dm-bubble.img {
  padding: 0;
  background: none !important;
  max-width: 68%;
}
.dm-bubble.img img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 18px;
}
.dm-photo-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}
.dm-photo-btn:active {
  color: var(--ink);
}
.deco-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 4px;
  font-size: 16px;
}
.deco-nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  color: var(--ink);
  padding: 2px 0;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.deco-nav-label {
  flex: 1;
}
.deco-nav-arrow {
  font-style: normal;
  font-size: 20px;
  color: var(--ink3);
}
.marker-preview.mini {
  width: 18px;
  height: 18px;
  border-width: 5px;
}
.phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.phone-row .friends-hint {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
}
.phone-row .friends-hint.empty {
  color: var(--ink3);
  font-weight: 500;
}

/* ---------- 꾸미기 강화: 크기 슬라이더 · 저장된 사진 목록 · 테두리 OFF ---------- */
.marker-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink2);
}
.marker-size-row input[type='range'] {
  flex: 1;
  accent-color: var(--ink);
}
.marker-size-row b {
  font-size: 13px;
  color: var(--ink);
  min-width: 44px;
  text-align: right;
}
.marker-gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.marker-thumb {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: visible;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
}
.marker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.marker-thumb.on {
  border-color: var(--ink);
  box-shadow: none;
}
.marker-thumb .thumb-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7e9ef;
  color: var(--ink2);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.live-marker.no-ring {
  border-width: 0;
  background: transparent;
}
.marker-preview.no-ring {
  border-width: 0;
  background: transparent;
}

/* ---------- 법적 고지 footer (마이페이지 맨아래) ---------- */
.legal-foot {
  padding: 6px 6px 10px;
  text-align: left;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px; /* 이용약관 · 개인정보처리방침 띄어쓰기 (2026-09-07 대표님) */
  font-size: 12.5px;
  margin-bottom: 10px;
}
.legal-links a {
  color: var(--ink2);
  text-decoration: none;
  font-weight: 600;
}
.legal-links span {
  color: var(--ink3);
}
.legal-biz {
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.8;
}
.legal-copy {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 8px;
  opacity: 0.8;
}

/* ---------- 구글 로그인 ---------- */
.gsi-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 22px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: #3c4043;
  cursor: pointer;
}
.gsi-btn:active {
  background: #f4f5f8;
}
.auth-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.auth-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.auth-mid b {
  font-size: 14.5px;
}

/* 지도 저작권 고지 = 라이선스상 삭제 불가 → i 아이콘으로 최소화 */
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
  display: none;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
  display: block;
  font-size: 10px;
}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
  opacity: 0.55;
}

/* 5) 오버스크롤 때 뒤 레이어(지도)가 드러나는 것 차단 */
html,
body {
  overscroll-behavior-y: none;
}
.my-view {
  overscroll-behavior: contain;
}
.dm-msgs {
  overscroll-behavior: contain;
}

/* 친구 탭 빈 상태 */
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 2px 4px;
}

/* 결산 장소 = 구글맵식 핀 */
.sum-place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.place-pin {
  flex: none;
}

/* ---------- Edits 스타일 마이페이지 (프로필 헤더 + 설정 리스트) ---------- */
#myView {
  padding: 8px 20px calc(28px + var(--sab));
  gap: 0;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 18px;
}
.avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 30px;
  border: 0;
}
.profile-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-block {
  padding: 2px 0 16px;
}
.set-divider {
  height: 1px;
  background: var(--line);
  margin: 4px -20px 6px; /* 풀블리드 구분선 */
}
.settings-list {
  display: flex;
  flex-direction: column;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 58px;
  padding: 8px 0;
  width: 100%;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.set-row:active {
  opacity: 0.6;
}
.set-ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.set-ico svg {
  width: 24px;
  height: 24px;
}
.set-mid {
  flex: 1;
  min-width: 0;
}
.set-label {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
}
.set-sub {
  display: block;
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 2px;
  line-height: 1.5;
}
.set-end {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.set-value {
  font-size: 14px;
  color: var(--ink3);
}
/* 토글 행 — 토글은 우측 끝으로 */
.set-row .share-toggle {
  flex: 1;
  min-width: 0;
  gap: 0;
}
.set-row .share-toggle-label {
  font-size: 16.5px;
  font-weight: 500;
}
.set-row .share-toggle-ui {
  order: 2;
  margin-left: auto;
}
.set-row .share-toggle-label {
  order: 1;
}
.logout-row {
  padding: 8px 0 14px;
}
.logout-btn {
  color: #ff3b30;
  font-size: 16.5px;
  font-weight: 600;
  padding: 14px 0;
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
}
.logout-btn:active {
  opacity: 0.6;
}
.btn-danger {
  background: #ff3b30;
  color: #fff;
}
.btn-danger:hover {
  background: #e02f25;
}
/* 꾸미기 진입 행 — Edits 리스트 톤 */
.deco-nav-row {
  font-size: 16.5px;
  font-weight: 500;
  min-height: 58px;
  gap: 15px;
}
.deco-nav-arrow {
  display: none; /* Edits — 화살표 없이 행 전체 탭 */
}
/* DM 목록 — 인스타처럼 카드 없이 플랫 */
#dmListWrap .card {
  background: transparent;
  padding: 0 2px;
}
/* 친구 탭 카드 사이 간격 */
#friendsView {
  gap: 14px;
}

/* ── v0.35 (2026-09-07 대표님): 히어로 영상 먼저·한 줄 제목·보조 버튼 한 줄·인트로·서버 원격제어(공지바/팝업/점검/슬롯) ── */
.hero-visual {
  width: 100%;
  max-width: 360px;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  background: #eef0f4;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.hero-visual .showcase-card,
.intro-visual .showcase-card {
  height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
body.hero-nowrap .hero h1 {
  white-space: nowrap;
  font-size: clamp(19px, 6.1vw, 34px);
  letter-spacing: -0.035em;
}
body.hero-nosub .hero-sub {
  display: none;
}
.hero-secondary {
  display: flex;
  gap: 8px;
  width: 100%;
}
.hero-secondary .btn.btn-hero {
  flex: 1;
  min-height: 46px;
  font-size: 14.5px;
  padding: 0 10px;
}
.intro-card {
  text-align: center;
}
.intro-visual {
  width: 100%;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #eef0f4;
  margin: 8px 0 16px;
}
.intro-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  word-break: keep-all;
}
.intro-ok {
  width: 100%;
}
.notice-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.is-app .notice-bar {
  top: calc(var(--header-h) + max(env(safe-area-inset-top, 0px), 30px));
}
.notice-link {
  flex: 1;
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
}
.notice-x {
  background: none;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}
.popup-card {
  text-align: center;
}
.popup-img {
  width: 100%;
  border-radius: 16px;
  display: block;
  margin-bottom: 12px;
}
.popup-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 6px 0 14px;
  word-break: keep-all;
}
.maint-ov {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.maint-card b {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
}
.maint-card p {
  color: var(--ink2);
  line-height: 1.6;
  white-space: pre-line;
}
.rc-slot {
  margin: 0 0 12px;
}
.rc-slot img {
  width: 100%;
  display: block;
  border-radius: 14px;
}
.rc-slot a {
  display: block;
}
#hero .rc-slot {
  width: 100%;
  max-width: 360px;
  margin: 14px 0 0;
}
body.no-friend-hints #friendsView .friends-hint {
  display: none;
}
.friends-empty-msg {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.6;
  margin-bottom: 10px;
}
body.no-set-subs #myView .set-sub,
body.no-set-subs #myView .friends-hint[data-i18n="authHint"] {
  display: none;
}

/* 기록 없을 때(히어로 표시) = 지도 영역이 화면을 꽉 채워 아래 빈 공간이 없게 (2026-09-07 대표님 "디자인적으로 별로") */
@media (max-width: 880px) {
  body.hero-on #mapWrap {
    height: calc(100dvh - var(--header-h) - 58px - var(--sab));
    min-height: 480px;
  }
  body.is-app.hero-on #mapWrap {
    height: calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab));
  }
  body.hero-on .hero {
    justify-content: center;
    justify-content: safe center; /* 넘치면 위부터 (작은 폰), 여유 있으면 가운데 */
    padding-top: 22px;
    overflow-y: auto;
  }
  body.hero-on .hero-visual {
    height: clamp(180px, 34vh, 300px);
    flex: none;
  }
  body.hero-on #panel {
    min-height: 0;
  }
}

/* 리뷰 확정(59차): 공지바 높이(--notice-h) 를 레이아웃 공식에 반영 · 공지바는 고정 뷰 위 · hero-on min-height 가 화면을 넘지 않게 · 권한 안내는 설명문 숨김 예외 */
.notice-bar {
  z-index: 1460; /* .my-view(1450) 위, 오버레이(2100+) 아래 — 친구/DM/마이 탭에서도 공지 보임 */
}
body.has-notice .my-view {
  top: calc(var(--header-h) + var(--notice-h, 0px));
}
body.is-app.has-notice .my-view {
  top: calc(var(--header-h) + max(env(safe-area-inset-top, 0px), 30px) + var(--notice-h, 0px));
}
body.has-notice #layout {
  height: calc(100dvh - var(--header-h) - 58px - var(--sab) - var(--notice-h, 0px));
}
body.is-app.has-notice #layout {
  height: auto;
  min-height: calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab) - var(--notice-h, 0px));
}
@media (max-width: 880px) {
  body.has-notice #layout {
    height: auto;
    min-height: calc(100dvh - var(--header-h) - 58px - var(--sab) - var(--notice-h, 0px));
  }
  body.hero-on #mapWrap {
    height: calc(100dvh - var(--header-h) - 58px - var(--sab) - var(--notice-h, 0px));
    min-height: min(480px, calc(100dvh - var(--header-h) - 58px - var(--sab) - var(--notice-h, 0px)));
  }
  body.is-app.hero-on #mapWrap {
    height: calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab) - var(--notice-h, 0px));
    min-height: min(480px, calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab) - var(--notice-h, 0px)));
  }
}
body.no-set-subs #myView #locPermHelp .set-sub {
  display: block; /* 위치 권한 거부 시 안내는 남김 */
}

/* ── 60차 (2026-09-07 대표님): 초대 카드 UID 박스·토스트 2줄·전체화면 X·결산 프로필·선 꾸미기·사진 자르기·모바일웹 안내·친구 요청·순간 더보기 ── */
.uid-lookup-box {
  background: #14161c;
  color: #fff;
  border-radius: 16px;
  padding: 14px 14px 12px;
  margin-top: 10px;
}
.uid-lookup-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}
.uid-lookup-box .uid-input-row {
  margin-top: 0;
}
.uid-lookup-box .uid-input {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.08em;
  font-weight: 700;
}
.uid-lookup-box .uid-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0;
  font-weight: 500;
}
.uid-lookup-box .btn-primary {
  background: var(--accent);
  color: #fff;
}
.invite-hint {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink2);
}
.toast {
  max-width: 92vw;
  white-space: normal;
  line-height: 1.45;
  border-radius: 16px;
  padding: 12px 16px;
  display: block;
}
/* 2줄 클램프는 안쪽 span 에 — 바깥 padding 으로 3번째 줄이 새던 것 방지 (2026-09-07 대표님) */
.toast .toast-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.fs-close {
  color: #111;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 26px;
  font-weight: 600;
}
.playhud {
  max-width: calc(100vw - 132px); /* 우측 상단 X 와 안 겹치게 */
}
.sum-me {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sum-me img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.15);
}
.sum-me span {
  font-size: 15px;
  font-weight: 800;
}
.line-style-title {
  margin: 16px 0 8px;
}
.line-style-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.session-more {
  width: 100%;
  margin-top: 8px;
}
.enc-empty {
  font-size: 13.5px;
  color: var(--ink2);
  line-height: 1.55;
  padding: 6px 0 2px;
}
.crop-card {
  text-align: center;
}
.crop-canvas {
  width: 280px;
  height: 280px;
  max-width: 100%;
  border-radius: 18px;
  touch-action: none;
  cursor: grab;
  background: #eef0f4;
  margin: 8px auto 0;
  display: block;
}
.crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink2);
}
.crop-zoom-row input {
  flex: 1;
}
.crop-bg-row {
  margin-top: 12px;
  justify-content: center;
}
.crop-actions {
  margin-top: 14px;
}
.mw-gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 28px;
  text-align: center;
}
.mw-logo {
  width: 180px;
  margin-bottom: 8px;
}
.mw-gate b {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.mw-gate p {
  margin: 0 0 12px;
  color: var(--ink2);
}
.mw-btn {
  max-width: 320px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#friendsCardRequests .contact-row .btn {
  background: var(--accent);
  color: #fff;
}

/* ── 61차 (2026-09-07 대표님): 이벤트 탭·하트·차단 ── */
.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.event-row:last-child {
  border-bottom: 0;
}
.event-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.event-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink);
  word-break: keep-all;
}
.event-sub {
  font-size: 12.5px;
  color: var(--ink3);
}
.event-badge {
  font-size: 12px;
  font-weight: 800;
  color: #ff4d6d;
  background: #ffe3ea;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.event-go {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.btn-heart {
  background: #ffe3ea !important;
  color: #ff4d6d !important;
  font-weight: 800;
}
.btn-heart:disabled {
  opacity: 0.6;
}
.dm-block {
  margin-left: auto;
  color: var(--ink3);
  font-size: 12px;
  padding: 6px 10px;
}

/* ── 62차 (2026-09-07 대표님): 재생 시간 칩·친구 시점 ── */
.speed-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
}
.speed-chips button {
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink2);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.speed-chips button.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
#btnViewAs.on {
  background: var(--accent);
  color: #fff;
}

/* ── 63차 (2026-09-07 대표님): 두 줄 깨짐 박멸·꾸미기 항상 펼침·무지개 색·초대 카드 친구 탭 고정·마이페이지 하단 세로 정렬·홈 빈 공간·이벤트 추천 카드 ── */
/* 내 기록 헤더 = 이름 한 줄(넘치면 …) + uid 알약, 기간은 아랫줄 — 이름이 세로로 한 글자씩 깨지던 사고 */
.me-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.me-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.me-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.uid-pill {
  margin-left: 0;
  flex: none;
}
.me-period {
  margin-left: 0;
}
/* 마이페이지 하단 = [로그아웃] [계정 삭제] + 약관 링크 전부 왼쪽 정렬, 한 줄에 하나씩 */
.account-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.legal-foot {
  padding: 0 0 12px;
}
.legal-links {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
}
.legal-links a {
  display: block;
  width: 100%;
  padding: 14px 0;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink2);
}
/* 재생 시간 칩 = 한 줄 가로 스크롤 (두 줄로 접히지 않게) */
.speed-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-left: -4px;
  margin-right: -4px;
  padding: 2px 4px;
}
.speed-chips::-webkit-scrollbar {
  display: none;
}
.speed-chips button {
  flex: none;
  white-space: nowrap;
}
/* 설정 라벨·토글 라벨 = 한 줄 (넘치면 …) */
.set-label,
.set-row .share-toggle-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.set-row .share-toggle-label {
  flex: 1;
}
/* 히어로 보조 버튼 두 개 = 한 줄 유지 (좁은 폰은 글자만 줄임) */
.hero-secondary .btn.btn-hero {
  white-space: nowrap;
  font-size: clamp(12.5px, 3.8vw, 14.5px);
}
/* 재생 HUD 기간·거리 = 좁은 폰에서 글자만 줄임 (줄바꿈·잘림 X) */
.playhud-sub {
  font-size: clamp(11px, 3.2vw, 12.5px);
}
/* 겹친 유저·친구 등 카드 안 버튼 라벨 한 줄 */
.tier-seg button,
.follow-btn,
.btn-small {
  white-space: nowrap;
}
/* 무지개 링 — 흰 안쪽 + conic 테두리 (background-clip 트릭) */
.marker-preview.rainbow,
.live-marker.rainbow {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(#ff4d4d, #ffb02e, #ffe600, #4cd964, #34aadc, #5856d6, #ff2d55, #ff4d4d) border-box;
}
.marker-preview.rainbow.no-ring,
.live-marker.rainbow.no-ring {
  background: transparent;
}
.live-marker.rainbow::after {
  border-color: #ff2d55;
}
/* 기록 없을 때(히어로·영상 먼저 레이아웃) = 지도 아래 빈 패널·탭바 여백 제거 → 스크롤 공백 없음 */
@media (max-width: 880px) {
  body.hero-on.hero-vf #panel {
    display: none;
  }
  body.hero-on.hero-vf #layout {
    padding-bottom: 0;
    min-height: 0;
  }
  /* 지도 영역 최소 높이 480px 에 상한 — 가로모드·낮은 화면에서 히어로 아래가 탭바 밑에 깔린 채 스크롤로도 못 꺼내는 일 방지 (리뷰 확정). 히어로 자체가 안에서 스크롤됨 */
  body.hero-on #mapWrap {
    min-height: min(480px, calc(100dvh - var(--header-h) - 58px - var(--sab) - var(--notice-h, 0px)));
  }
  body.is-app.hero-on #mapWrap {
    min-height: min(480px, calc(100dvh - var(--header-h) - max(env(safe-area-inset-top, 0px), 30px) - 58px - var(--sab) - var(--notice-h, 0px)));
  }
}
/* (전화번호 상태·uid 행은 문구 단축 + [복사] 제거로 360px 에서도 한 줄 — 예외 규칙 불필요) */
/* 저작권 고지 = 지도 load 전엔 펼쳐진 상태로 안 보이게 (MapLibre 가 첫 로드 때 펼침 → 접히는 깜빡임 제거, 리뷰 확정). collapseAttrib 이 tw-attrib-ready 를 붙인 뒤엔 ⓘ 탭으로 열림 */
.maplibregl-ctrl-attrib:not(.tw-attrib-ready) .maplibregl-ctrl-attrib-inner {
  display: none !important;
}
/* 이벤트(선물) 탭 = 추천 카드 */
#eventsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#eventsList .event-row {
  background: var(--surface2);
  border-radius: var(--radius);
  border-bottom: 0;
  padding: 14px 18px;
}
.event-promo {
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 28px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.event-promo-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.event-promo-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.55;
  word-break: keep-all;
}
.event-promo-btn {
  width: 100%;
  margin-top: 10px;
}
/* ── 64차 (2026-09-07 대표님): 인트로 = 타임라인 설정 스크린샷 + [타임라인 데이터 내보내기] 스포트라이트 ── */
.intro-visual.is-shot {
  height: auto;
  background: #0f1116;
  display: flex;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  margin: 8px 0 16px;
}
.intro-shot {
  position: relative;
  display: inline-block; /* 박스 = 이미지 박스 → 강조 영역 % 가 이미지 기준 */
  line-height: 0;
  overflow: hidden;
}
.intro-shot-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 44vh;
  height: auto;
}
/* 강조 박스 — 바깥은 큰 box-shadow 로 어둡게(스포트라이트), 테두리는 펄스 */
.intro-spot {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(15, 17, 22, 0.66);
  pointer-events: none;
}
.intro-spot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2.5px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(79, 141, 255, 0.22), 0 0 18px rgba(79, 141, 255, 0.55);
  animation: introSpotBreath 1.4s ease-in-out infinite;
}
.intro-spot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  opacity: 0;
  animation: introSpotRing 1.4s ease-out infinite;
}
@keyframes introSpotBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(79, 141, 255, 0.22), 0 0 18px rgba(79, 141, 255, 0.55); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(79, 141, 255, 0.3), 0 0 26px rgba(79, 141, 255, 0.8); }
}
@keyframes introSpotRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-spot::before,
  .intro-spot::after { animation: none; }
}

/* ── 64차 (2026-09-07 대표님): 사이페이 추천 카드 아이콘·여러 줄 문구, 재생 HUD 가운데 정렬·상태바 아래, 서버 제어 토글(legal-row·no-pulse) ── */
.event-promo-icon {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
  margin-bottom: 6px;
}
.event-promo-sub {
  white-space: pre-line; /* 서버 문구의 줄바꿈 그대로 (줄바꿈 없으면 이어서) */
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  text-align: left;
  width: 100%;
}
/* 홈(기록 있음) 하단 여백 = 탭바 높이 + 8px 만 (예전엔 패널 padding·::after·레이아웃 padding 3중으로 ~170px 비었음, 2026-09-07 대표님) */
@media (max-width: 880px) {
  #layout {
    padding-bottom: 0;
  }
  #panel {
    padding-bottom: 12px;
  }
  #panel::after {
    height: calc(58px + var(--sab) + 8px);
  }
}
/* 재생 HUD = 항상 화면 가운데 (거리 자릿수 늘어도) · 우측 X(44px+여백) 안쪽에서 중앙 · 상태바 아래 여유 */
.playhud {
  left: 66px;
  right: 66px;
  transform: none;
  width: fit-content;
  max-width: none;
  margin: 0 auto;
  padding: 11px 20px 10px;
}
.playhud-title {
  line-height: 1.3;
}
.playhud-sub {
  line-height: 1.35;
}
#hudDist {
  margin-left: 6px;
}
body.fs-play .playhud {
  top: calc(14px + max(env(safe-area-inset-top, 0px), 34px));
}
/* 서버 flags.my.legalLayout='row' = 예전처럼 가로 배치 */
body.legal-row .legal-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 12px;
}
body.legal-row .legal-links a {
  display: inline;
  width: auto;
  padding: 6px 0;
  font-size: 12.5px;
}
body.legal-row .account-actions {
  flex-direction: row;
  justify-content: center;
  gap: 18px;
}
/* 서버 flags.text.nowrap=false = 한 줄 강제(말줄임) 해제, 자연 줄바꿈 (65차 서버 제어) */
body.text-wrap .set-label,
body.text-wrap .set-row .share-toggle-label,
body.text-wrap .me-name,
body.text-wrap .tier-seg button,
body.text-wrap .follow-btn,
body.text-wrap .btn-small,
body.text-wrap .hero-secondary .btn.btn-hero,
body.text-wrap .speed-chips button {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
body.text-wrap .speed-chips {
  flex-wrap: wrap;
  overflow-x: visible;
}
/* 서버 flags.me.header='row' = 내 기록 헤더 예전처럼 이름·uid·기간 한 줄 */
body.me-inline .me-main {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
body.me-inline .me-period {
  margin-left: auto;
}
/* 서버 flags.guide.intro.pulse=false = 애니메이션 없이 스포트라이트만 */
.intro-spot.no-pulse::before,
.intro-spot.no-pulse::after {
  animation: none;
}

/* ── 68차 (2026-09-08 대표님): 탭 파란 하이라이트 제거 · 우측 하단 프로필 도크(시점 전환) ── */
* {
  -webkit-tap-highlight-color: transparent; /* 안드로이드 탭 시 연파랑 박스 제거 ("일반적인 색으로") */
}
.set-row:active,
.deco-nav-row:active,
.logout-btn:active,
.legal-links a:active {
  opacity: 1;
  background: var(--surface2);
  border-radius: 12px;
}
.view-dock {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
body.fs-play .view-dock {
  bottom: calc(200px + var(--sab)); /* 재생 확대/축소 버튼 위 */
}
.view-dock-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  background: var(--dc, #4f8dff);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  opacity: 0.55;
  box-shadow: 0 4px 12px rgba(17, 19, 26, 0.18);
  cursor: pointer;
}
.view-dock-item.on {
  opacity: 1;
  box-shadow: 0 0 0 2.5px var(--dc, #4f8dff), 0 4px 12px rgba(17, 19, 26, 0.22);
}
.view-dock-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 68차 (2026-09-08 대표님): DM 내 말풍선 검정·읽음·사진 간격·입력줄 여백 / 하트 아이콘 팝 / 남은 하트 ── */
.dm-row.mine .dm-bubble {
  background: #111318;
  color: #fff;
}
.dm-bubble.img {
  margin: 8px 0; /* 사진 메시지는 위아래로 띄움 */
}
.dm-inputrow {
  padding: 12px 12px 14px;
  gap: 10px;
}
.dm-read {
  align-self: flex-end;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  margin: -2px 6px 6px 0;
}
.enc-hearts {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: #ff4d6d;
  background: #ffe3ea;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.btn-heart-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.btn-heart-icon svg {
  width: 28px;
  height: 28px;
  fill: transparent;
  stroke: #ff4d6d;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.15s ease, transform 0.15s ease;
}
.btn-heart-icon.hearted svg {
  fill: #ff4d6d;
}
.btn-heart-icon:disabled {
  opacity: 1;
}
.btn-heart-icon.pop svg {
  animation: heartPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.btn-heart-icon.pop::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ff4d6d;
  animation: heartRing 0.5s ease-out forwards;
  pointer-events: none;
}
.btn-heart-icon {
  position: relative;
}
@keyframes heartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  65% { transform: scale(0.9); }
  100% { transform: scale(1.15); }
}
@keyframes heartRing {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── 68차 (2026-09-08 대표님): 상단 친구 아이콘 + 친구 신청 숫자 배지 ── */
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}
.top-friends {
  position: relative;
  overflow: visible;
}
.top-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e23d3d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}

/* uid 배지 탭 = 복사 — 텍스트 선택(시스템 툴바) 없이 JS 복사만, 보이는 크기는 그대로 두고 터치 영역만 44px 로 (리뷰 확정) */
.uid-tap {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.uid-tap::after {
  content: '';
  position: absolute;
  inset: -11px -8px;
}

/* ── 70차 (2026-09-08) HUD 제목 한 줄 · DM 말풍선 꾹 누르기 ── */
.playhud-title {
  white-space: nowrap;
  overflow: hidden;
  display: block;
  max-width: 100%;
}
.dm-bubble {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* DM 사진 확대 보기 */
.img-viewer {
  position: fixed;
  inset: 0;
  z-index: 2150;
  background: #000;
  display: flex;
  flex-direction: column;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.img-viewer-stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}
.img-viewer-x {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 26px;
  line-height: 40px;
  padding: 0;
  z-index: 2;
}
.img-viewer-bar {
  display: flex;
  justify-content: center;
  padding: 12px 16px calc(14px + var(--sab, env(safe-area-inset-bottom, 0px)));
  background: rgba(0, 0, 0, 0.6);
}
.img-viewer-bar .btn {
  min-width: 220px;
}

/* 77차 공유 창 상태줄 (비밀번호 걸림 · 없애기) */
.mem-share-state { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: #6b7280; }
.mem-share-state .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.mem-share-link { user-select: all; -webkit-user-select: all; } /* 복사 실패 시 길게 눌러 통째로 선택 */

/* 78차: 추억 카드 미리보기 배지 · 추억 상세(재생 미리보기·누구랑 어디·사진·댓글) */
.mem-play-badge { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(17, 19, 26, 0.55); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mem-detail-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.mem-back { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface2); color: var(--ink); font-size: 18px; cursor: pointer; flex: none; }
.mem-detail-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-detail-hero { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #fff1f5, #eef3ff); }
.mem-detail-hero canvas { width: 100%; height: 100%; display: block; }
.mem-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; background: rgba(17, 19, 26, 0.66); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mem-detail-who { margin-top: 14px; font-size: 16px; font-weight: 800; color: var(--ink); }
.mem-detail-meta { margin-top: 4px; color: var(--muted); font-size: 13px; }
.mem-detail-photo { position: relative; margin-top: 14px; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #ffe4ec, #e6ecff); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; cursor: pointer; }
.mem-detail-photo img { width: 100%; border-radius: 12px; display: block; }
.mem-detail-hint { font-size: 14px; font-weight: 800; color: #e0518c; }
.mem-comments { margin-top: 18px; }
.mem-comments-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.mem-comment { padding: 10px 12px; border-radius: 12px; background: var(--surface2); margin-bottom: 8px; }
.mem-comment-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mem-comment-head b { color: var(--ink); font-size: 13px; }
.mem-comment-x { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.mem-comment-text { margin-top: 4px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.mem-comments .dm-inputrow { padding: 8px 0 0; background: transparent; }
.mem-comments .dm-inputrow input { font-family: inherit; }
.mem-snap-map { position: fixed; left: -9999px; top: 0; width: 640px; height: 360px; pointer-events: none; }
.mem-comment-empty, .mem-comment-note { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* 앱 안 문서 화면 (약관 등) — 다른 탭 화면 위에 덮임 */
.doc-view { z-index: 1500; }
.doc-frame { width: 100%; height: calc(100vh - 150px); border: 0; border-radius: var(--radius); background: #fff; }

/* 추억 카드: 지도 앞 + 올린 사진 뒤(오른쪽 아래로 비껴) — 사진 탭 = 확대 (2026-09-10 대표님) */
.mem-card.has-photo { overflow: visible; margin-top: 22px; }
.mem-photo-wrap.has-photo { overflow: visible; margin-bottom: 14px; }
.mem-photo-wrap.has-photo .mem-thumb { position: absolute; left: -5px; top: -5px; width: 95%; height: 95%; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 8px 22px rgba(17, 19, 26, 0.22); z-index: 2; }
.mem-photo-wrap.has-photo .mem-photo { position: absolute; left: auto; right: -5px; top: auto; bottom: -5px; width: 95%; height: 95%; border-radius: 12px; box-shadow: 0 6px 18px rgba(17, 19, 26, 0.18); z-index: 1; cursor: zoom-in; }
.mem-photo-wrap.has-photo .mem-play-badge { z-index: 3; left: calc(95% - 52px); top: calc(95% - 52px); right: auto; bottom: auto; } /* 84차: 지도·사진 더 가깝게 (대표님) */
/* 도크 무지개 링 + 친구 꾸미기 ✎ */
.view-dock-item.rainbow { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(#ff4d4d, #ffb02e, #ffe600, #4cd964, #34aadc, #5856d6, #ff2d55, #ff4d4d) border-box; color: var(--ink); }
.view-dock-item.rainbow.on { box-shadow: 0 0 0 2.5px #ff2d55, 0 4px 12px rgba(17, 19, 26, 0.22); }
.view-dock-deco { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(17, 19, 26, 0.75); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(17, 19, 26, 0.18); }
@media (min-width: 881px) { .fdeco-dlg { width: min(92vw, 420px); } } /* 모바일은 바텀시트 전체 폭 (83차: 오른쪽 빈 곳 제거) */
.fdeco-preview-row { justify-content: center; margin: 10px 0 12px; }

/* 상세 화면(.my-view = flex column): 지도·사진·댓글이 세로로 줄어들지 않게 (댓글·사진 뒤 지도가 납작해지던 것) */
.mem-detail > * { flex: none; }
/* 친구 동선 랜덤재생 카드 (홈) */
.random-card { cursor: pointer; }
.random-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.random-meta { font-size: 12px; color: var(--muted); font-weight: 600; }
.random-hero { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #fff1f5, #eef3ff); margin-top: 8px; }
.random-hero canvas { width: 100%; height: 100%; display: block; }
/* 색 선택기 = 화면 밖 (버튼으로만 엶) */
.color-pick { position: fixed; left: -1px; top: -1px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 79차: 홈 친구 칩 체크(같이 볼 친구) · 도크 스크롤 · 초대 안내 */
.chip .chip-ck { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ink3); font-size: 12px; font-weight: 800; color: #fff; background: var(--ink); flex: none; }
.chip.off .chip-ck { background: transparent; }
.chip.off { opacity: 0.55; }
.chip.on .chip-ck { background: #fff; color: var(--ink); border-color: #fff; }
.view-dock { max-height: calc(100% - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px; }
.view-dock::-webkit-scrollbar { display: none; }
body.fs-play .view-dock { max-height: calc(100vh - 330px - var(--sab)); }
.invite-uid-box { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.invite-uid-box b { font-size: 18px; letter-spacing: 0.06em; }

/* 80차: 히어로 글자 링크 · 친구 꾸미기 창 정리 · 친구 칩 다중 선택 · 친구 관리 */
.hero-link { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: underline; padding: 6px 8px; font-family: inherit; cursor: pointer; }
.fdeco-dlg .marker-swatches { gap: 8px; flex-wrap: wrap; }
.fdeco-dlg .marker-swatch { width: 30px; height: 30px; }
.fdeco-dlg .marker-preview { width: 40px; height: 40px; border-width: 5px; }
.fdeco-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--ink); }
.fdeco-dlg .tier-seg button { font-size: 13px; padding: 9px 6px; }
.chip.focus { box-shadow: 0 0 0 2px rgba(17, 19, 26, 0.18); }
.friends-set-row { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.friends-set-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface2); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.friend-set-view { z-index: 1500; }
.fset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fset-row .contact-avatar { flex: none; }
.fset-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fset-name { font-size: 15px; font-weight: 800; }
.fset-sub { font-size: 12px; color: var(--muted); }
.fset-acts { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.profile-name { cursor: pointer; }

/* 82차: [직접 조정] 색 선택기 */
.cp-dlg { padding: 14px 16px 18px; }
@media (min-width: 881px) { .cp-dlg { width: min(92vw, 360px); } }
.cp-top { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 17px; font-weight: 800; }
.cp-back { border: 0; background: none; font-size: 28px; line-height: 1; padding: 0 8px 2px 2px; cursor: pointer; color: var(--ink); font-family: inherit; }
.cp-sv { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; touch-action: none; background: #f00; }
.cp-sv canvas { display: block; width: 100%; height: 100%; }
.cp-knob { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); pointer-events: none; }
.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 7px; margin: 14px 0 18px; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); outline: none; display: block; }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hue, #f00); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3); cursor: pointer; }
.cp-hue::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--hue, #f00); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); cursor: pointer; }
.cp-row { display: flex; align-items: center; gap: 12px; }
.cp-preview { width: 44px; height: 44px; border-radius: 10px; flex: none; border: 1px solid var(--line); }
.cp-hex { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface, #fff); }
.cp-dot { width: 22px; height: 22px; border-radius: 6px; flex: none; border: 1px solid var(--line); }
.cp-hex input { border: 0; outline: 0; width: 100%; min-width: 0; font: inherit; font-size: 15px; background: transparent; color: var(--ink); }
.cp-eye { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; flex: none; }

/* 83차: 홈 자동 기록 토글 */
.home-autotrack { margin-top: 14px; display: flex; }

/* 85차: [직접 조정] 판 높이 상한 + 갤럭시 하단 버튼 여백 · 위치 기록 없음 라벨 */
.cp-sv { width: min(100%, 38dvh); margin: 0 auto; }
@media (max-width: 880px) {
  .cp-dlg { padding-bottom: calc(22px + max(var(--sab), 44px)); }
  .fdeco-dlg { padding-bottom: calc(22px + max(var(--sab), 32px)); }
}
.nodata-label { position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); /* 위쪽 고정 (89차 대표님) */ background: rgba(17, 19, 26, 0.8); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; z-index: 6; pointer-events: none; white-space: nowrap; }

/* 87차: 추억 사진 확대 = 맨 위 제목 + 좌우 넘기기 */
.img-viewer-title { position: absolute; left: 16px; right: 72px; top: calc(14px + var(--sat, 0px)); color: #fff; font-weight: 800; font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 30px; line-height: 1; border-radius: 12px; z-index: 3; cursor: pointer; font-family: inherit; }
.img-viewer-nav.prev { left: 6px; }
.img-viewer-nav.next { right: 6px; }

/* 90차: 상단 여행 카드 접기(탭)/닫기(×) */
.playhud { cursor: pointer; padding-right: 34px; }
.playhud-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(17, 19, 26, 0.06); color: var(--ink2); font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0; }
.playhud.collapsed { padding: 6px 30px 6px 12px; border-radius: 999px; }
.playhud.collapsed .playhud-sub, .playhud.collapsed .playhud-badge { display: none; }
.playhud.collapsed .playhud-title { font-size: 12.5px; }
.playhud.collapsed .playhud-title::before { content: '▸ '; opacity: 0.6; }
.playhud.collapsed .playhud-x { top: 3px; }

/* 91차: 홈 지도 접기 */
.map-fold-btn { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1100; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 14px; box-shadow: 0 4px 14px rgba(17, 19, 26, 0.16); cursor: pointer; }
#mapWrap.folded { height: 46px !important; min-height: 46px !important; max-height: 46px; overflow: hidden; background: var(--surface2); }
#mapWrap.folded > *:not(.map-fold-btn) { visibility: hidden; pointer-events: none; }
#mapWrap.folded .map-fold-btn { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
/* 92차: 채팅 목록 알림 끄기 아이콘 + 꾹 메뉴 */
.dm-room-mute { display: inline-flex; width: 18px; height: 18px; color: var(--muted); margin-left: 6px; vertical-align: middle; }
.dm-room-dlg { width: min(92vw, 320px); }
.dm-room-act { display: block; width: 100%; margin-top: 8px; text-align: center; }