/* 주차전쟁 주차 현황 v1 — "따뜻한 프렌들리 프리미엄" (막판캐리 직계)
 * 밝은 크림/오프화이트, 파스텔 카드, 보라/블루 그라디언트, 둥글둥글, 친근 대화체.
 */
:root {
  /* 따뜻한 베이스 */
  --bg:        #fbf4ea;        /* 크림 오프화이트 */
  --bg-grad-1: #fdf6ee;
  --bg-grad-2: #f6efe6;
  --panel:     #ffffff;
  --panel-soft:#fff8f0;
  --ink:       #2c2a3a;        /* 따뜻한 잉크 (살짝 보라끼) */
  --ink-soft:  #6f6a82;
  --ink-faint: #a8a2b8;
  --line:      #efe7dd;

  /* 보라/블루 그라디언트 악센트 */
  --accent-1:  #7c5cff;        /* 보라 */
  --accent-2:  #4f7bff;        /* 블루 */
  --accent-grad: linear-gradient(135deg, #8b6bff 0%, #5b86ff 100%);
  --accent-soft: #efeaff;

  /* 상태색 (파스텔 + 진한 잉크) */
  --green:      #1f9d5c;
  --green-ink:  #137a45;
  --green-soft: #e3f7ec;
  --yellow:     #d98a17;
  --yellow-ink: #a9670a;
  --yellow-soft:#fdf0d9;
  --red:        #e0574f;
  --red-ink:    #c23b33;
  --red-soft:   #fde6e4;
  --gray:       #b3acbf;
  --gray-ink:   #8b859a;
  --gray-soft:  #f1edf4;

  --radius:    22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow:    0 10px 30px rgba(72, 50, 120, 0.10);
  --shadow-sm: 0 4px 14px rgba(72, 50, 120, 0.08);
  --shadow-hero: 0 14px 36px rgba(96, 70, 200, 0.28);
  --tap: 56px;
  --tabbar-h: 70px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.2px;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0) + 14px);
}

/* ── 헤더 ─────────────────────────────────────────── */
.app-header {
  background: var(--accent-grad);
  color: #fff;
  padding: 18px 20px 20px;
  padding-top: calc(18px + env(safe-area-inset-top, 0));
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: 0 10px 28px rgba(96, 70, 200, 0.22);
  position: relative;
  overflow: hidden;
}
.app-header::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 150px; height: 150px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 50%;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative; z-index: 1;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  border-radius: 15px;
  font-size: 24px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-weight: 900; font-size: 20px; letter-spacing: -0.5px; }
.brand-sub { font-size: 13px; color: rgba(255, 255, 255, 0.86); margin-top: 1px; }
.data-badge {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800;
  color: #7a4a00;
  background: #ffe49b;
  padding: 6px 11px;
  border-radius: 999px;
  position: relative; z-index: 1;
}
.anon-notice {
  margin: 15px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 11px 14px;
  border-radius: 16px;
  position: relative; z-index: 1;
}
.anon-notice b { font-weight: 800; }

/* ── 뷰 컨테이너 ──────────────────────────────────── */
.view { padding: 0; }

/* ── 새 기능 1) 히어로 "지금 추천 자리" ─────────────── */
.hero {
  margin: 16px 16px 0;
  background: linear-gradient(135deg, #2b2247 0%, #4a3a82 60%, #6a52c4 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-hero);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "🅿️";
  position: absolute;
  right: 14px; bottom: -10px;
  font-size: 78px;
  opacity: 0.14;
  transform: rotate(-8deg);
}
.hero-kicker {
  font-size: 12.5px; font-weight: 800;
  color: #d9ccff;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.hero-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.4px;
}
.hero-title b {
  font-weight: 900;
  color: #ffe8a8;
  background: linear-gradient(transparent 62%, rgba(255, 213, 128, 0.28) 62%);
  padding: 0 2px;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 13px;
}
.hero-pill {
  font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.hero-pill.ghost { background: transparent; color: rgba(255, 255, 255, 0.78); }
/* ★v59 '지도에서 보기' 버튼 — 글로시 CTA(신호 배지와 명확히 구분) */
.hero-go {
  margin-top: 14px;
  width: 100%;
  min-height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f1ebfb 100%);
  color: #4a3a82;
  font-size: 16px; font-weight: 900; letter-spacing: -0.3px;
  cursor: pointer;
  position: relative; z-index: 1; overflow: hidden;
  box-shadow: 0 8px 18px rgba(43, 34, 71, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform .1s ease;
}
.hero-go::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hero-go:active { transform: scale(.98); }
.hero.hero-empty { background: linear-gradient(135deg, #57506e 0%, #6f6488 100%); }

.hero-meta .hero-pill.ghost { margin-top: 11px; }
/* ★v59 신호등 답안 배지 — 색이 꽉 찬 글로시 배지(가독성·위계 개선). 구 .hero-nums/.hero-num/.hero-go(상태) 대체 */
.hero-signal {
  display: flex; align-items: center; gap: 13px;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 16px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.50);
}
.hero-signal::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hs-emoji { font-size: 27px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28)); }
.hs-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.hs-text { font-size: 22px; font-weight: 900; letter-spacing: -0.6px; line-height: 1.08; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); }
.hs-when { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.hs-num { flex: 0 0 auto; text-align: right; line-height: 1; }
.hs-num b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -1px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); }
.hs-num span { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.hero-signal.go-yes   { background: linear-gradient(135deg, #25b06e 0%, #149158 100%); }
.hero-signal.go-maybe { background: linear-gradient(135deg, #eba12b 0%, #c47d10 100%); }
.hero-signal.go-no    { background: linear-gradient(135deg, #e8645c 0%, #cc433a 100%); }
/* ★v53 추천 — 우리 동 근처 태그 + 차선 */
.hero-near { display: inline-block; font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(255,255,255,0.22); padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-right: 4px; }
.hero-alt { margin-top: 11px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }
.hero-alt b { color: #fff; }
/* ★v54 출처 배지 + 빈도(정직함=프리미엄) · ★v82 가독성 위해 키움 */
.hero-src { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.9); line-height: 1.5; }
.hero-src b { color: #fff; }
.hero-samp { color: rgba(255,255,255,0.7); font-weight: 600; }
/* ★v51 예측 탭 — 실행 안내 + 시간 탭 */
.fc-guide { display: inline-block; margin-top: 7px; font-size: 14px; font-weight: 800; color: #2f6b46; }
.fc-pick { margin: 12px 0 4px; padding: 9px 12px; border-radius: 12px; background: rgba(99,102,241,0.08); font-size: 13px; font-weight: 700; color: #4b4f72; text-align: center; }
.fc-pick b { color: #5b5fd6; }

/* 동 총 면수 (V3 그래프트) */
.dong-cap { font-size: 11px; font-weight: 700; fill: var(--ink-faint); }

/* ── 자동 입·출차 감지 배너 ───────────────────────── */
/* ★v60 자동 입출차 배너 — 화면 하단 고정, 아래→위 슬라이드. 미응답 시 깜빡→아래로. */
.auto-banner {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0) + 12px);
  width: calc(100% - 28px); max-width: 492px;
  background: linear-gradient(135deg, #fff8f0 0%, #fdf2e3 100%);
  border: 1.5px solid var(--accent-soft);
  border-left: 5px solid var(--accent-1);
  border-radius: var(--radius);
  padding: 15px 16px 13px;
  box-shadow: 0 12px 30px rgba(72, 50, 120, 0.24);
  z-index: 49;
  animation: abSlideUp .42s cubic-bezier(.16, 1, .3, 1);
}
@keyframes abSlideUp {
  from { opacity: 0; transform: translate(-50%, 130%); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.auto-banner .ab-ico { animation: abIcoPulse 1.2s ease-in-out infinite; display: inline-block; }   /* ★v82 주목 애니메이션 */
@keyframes abIcoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.auto-banner.ab-blink { animation: abBlink .42s ease-in-out 3; }
@keyframes abBlink {
  0%, 100% { opacity: 1; transform: translate(-50%, 0); }
  50%      { opacity: 0.28; transform: translate(-50%, 0); }
}
.auto-banner.ab-down { animation: abSlideDown .36s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes abSlideDown {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 130%); }
}
.ab-row { display: flex; align-items: center; gap: 11px; }
.ab-ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border-radius: 13px;
  font-size: 22px;
}
.ab-text {
  margin: 0;
  font-size: 14.5px; font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.ab-actions {
  display: grid; grid-template-columns: 2fr 1fr; gap: 9px;
  margin-top: 13px;
}
.ab-btn {
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: transform .1s ease;
}
.ab-btn:active { transform: scale(.98); }
.ab-yes {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 6px 15px rgba(96, 70, 200, 0.22);
}
.ab-no {
  background: var(--panel);
  color: var(--ink-soft);
  border-color: var(--line);
}
.ab-note {
  margin: 11px 2px 0;
  font-size: 11px; color: var(--ink-faint); line-height: 1.5;
}

/* 자동감지 시연 칩 */
.auto-demo-row {
  display: flex; justify-content: flex-end; flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 0;
}
.auto-demo-chip {
  border: 1.5px dashed var(--accent-1);
  background: var(--accent-soft);
  color: var(--accent-1);
  font-size: 12.5px; font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: transform .1s ease;
}
.auto-demo-chip:active { transform: scale(.97); }

/* ── 만차 알림 배너 (내 동이 거의 만차일 때) ─────────── */
.full-banner {
  margin: 16px 16px 0;
  background: linear-gradient(135deg, #fdeeec 0%, #fde6e4 100%);
  border: 1.5px solid rgba(224, 87, 79, 0.28);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 15px 16px 13px;
  box-shadow: var(--shadow-sm);
  animation: abSlide .32s cubic-bezier(.16, 1, .3, 1);
}
.fb-row { display: flex; align-items: center; gap: 11px; }
.fb-ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  background: var(--red-soft);
  border-radius: 13px;
  font-size: 22px;
}
.fb-text {
  margin: 0;
  font-size: 14.5px; font-weight: 800;
  line-height: 1.45;
  color: var(--red-ink);
  letter-spacing: -0.3px;
}
.fb-rec {
  margin: 11px 0 0;
  font-size: 13px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 9px 12px;
}
.fb-actions {
  display: grid; grid-template-columns: 2fr 1fr; gap: 9px;
  margin-top: 13px;
}
.fb-btn {
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: transform .1s ease;
}
.fb-btn:active { transform: scale(.98); }
.fb-go {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 6px 15px rgba(96, 70, 200, 0.22);
}
.fb-close {
  background: var(--panel);
  color: var(--ink-soft);
  border-color: var(--line);
}
/* 추천줄 숨김 시 버튼이 1개만 남으면 닫기 버튼이 전폭을 쓰게 */
.fb-go[hidden] + .fb-close { grid-column: 1 / -1; }
.fb-note {
  margin: 11px 2px 0;
  font-size: 11px; color: var(--ink-faint); line-height: 1.5;
}

/* ── 거주 등록 (내 동) ─────────────────────────────── */
.home-row {
  display: flex; justify-content: flex-start;
  padding: 12px 16px 0;
}
.home-chip {
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 13px; font-weight: 800;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.2px;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease;
}
.home-chip:active { transform: scale(.97); }
.home-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.home-chip b { font-weight: 900; }
.home-chip-edit {
  font-size: 11.5px; font-weight: 800;
  color: var(--accent-1);
  opacity: .8;
  margin-left: 2px;
}
.home-picker {
  margin: 12px 16px 0;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-sm);
  animation: abSlide .28s cubic-bezier(.16, 1, .3, 1);
}
.home-picker-label {
  font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}
.home-dong-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.home-dong {
  min-height: 46px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  border-radius: 13px;
  font-size: 13.5px; font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .12s ease;
}
.home-dong:active { transform: scale(.96); }
.home-dong.on {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.home-picker-actions {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 14px;
}
.home-clear, .home-cancel {
  min-height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 13.5px; font-weight: 800;
  padding: 0 16px;
  cursor: pointer;
}
.home-clear:active, .home-cancel:active { transform: scale(.97); }

/* ── 뷰 토글 (도면 / 목록) ────────────────────────── */
.viewseg-row { padding: 12px 16px 0; }
.viewseg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 4px;
}
.viewseg-btn {
  min-height: 40px;
  border: none; background: transparent;
  border-radius: 11px;
  font-size: 14px; font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: -0.3px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.viewseg-btn.on {
  background: var(--panel);
  color: var(--accent-1);
  box-shadow: var(--shadow-sm);
}
.viewseg-btn:active { transform: scale(.98); }

/* ── 도면 뷰 (top-view 직사각형) ──────────────────── */
.plan-wrap { padding: 12px 16px 6px; }
.floorseg {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.floorseg-btn {
  min-height: 44px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  border-radius: 13px;
  font-size: 13.5px; font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: all .12s ease;
}
.floorseg-btn:active { transform: scale(.97); }
.floorseg-btn.on {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.plan-grid {
  background: linear-gradient(180deg, #ffffff 0%, #fff8f0 100%);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
/* 지상 = 실측 좌표 SVG 맵 (블록) */
.plan-grid.plan-map { padding: 8px; }
/* 지하 = 공유 그룹 칸 (2열 균일 그리드) */
.plan-grid.plan-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;          /* 모든 카드 높이 균일 */
  gap: 10px;
}
.pcell {
  position: relative;
  min-height: 86px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font: inherit;
  padding: 10px 6px;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.pcell:active { transform: scale(.97); }
.pcell-name { font-size: 14px; font-weight: 900; letter-spacing: -0.3px; line-height: 1.1; }
.pcell-num { display: inline-flex; align-items: baseline; gap: 1px; }
.pcell-num b { font-size: 22px; font-weight: 900; letter-spacing: -0.6px; line-height: 1; }
.pcell-unit { font-size: 11px; font-weight: 800; }
.pcell-na { font-size: 12px; font-weight: 800; opacity: .85; }
.pcell.green  { background: var(--green-soft);  border-color: rgba(31, 157, 92, 0.32);   color: var(--green-ink); }
.pcell.yellow { background: var(--yellow-soft); border-color: rgba(217, 138, 23, 0.34);  color: var(--yellow-ink); }
.pcell.red    { background: var(--red-soft);    border-color: rgba(224, 87, 79, 0.36);   color: var(--red-ink); }
.pcell.gray   { background: var(--gray-soft);   border-color: rgba(179, 172, 191, 0.50); color: var(--gray-ink); }
/* 게이트 미달 지하 — 흐린 상태색(완전 회색 아님) + "확인 전" 작은 라벨 */
.pcell.pcell-unconf {
  opacity: 0.62;
  filter: saturate(0.7);
  border-style: dashed;
}
.pcell-unconf-tag {
  font-size: 9.5px; font-weight: 900;
  color: var(--yellow-ink);
  background: var(--yellow-soft);
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
  letter-spacing: -0.2px;
}
.pcell.sel { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.45); border-color: var(--accent-1); }
.pcell.mycar { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(79, 123, 255, 0.40); }
.pcell.pulse { animation: pulse .6s ease; }
.pcell-car {
  position: absolute; top: 4px; right: 6px;
  font-size: 16px; line-height: 1;
}
/* ── 지하 공유 그룹 칸 (그룹 전용 추가 요소) ───────────── */
.pcell-group { padding-top: 11px; }
.pcell-grp-badge {
  font-size: 9.5px; font-weight: 900;
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: -0.2px;
}
.pcell-grp-badge.share { color: var(--accent-1); background: var(--accent-soft); }
.pcell-grp-badge.solo  { color: var(--ink-soft); background: var(--panel-soft); border: 1px solid var(--line); }
.pcell-est-tag {
  font-size: 9px; font-weight: 800;
  color: var(--ink-faint);
  background: var(--panel-soft);
  border-radius: 999px;
  padding: 1px 7px;
  letter-spacing: -0.2px;
}
.pcell-est-tag.warn { color: var(--yellow-ink); background: var(--yellow-soft); }
.pcell-est-tag.ok   { color: var(--green-ink);  background: var(--green-soft); }
/* 애매 그룹에서 매달린(추정) 동 — 코어보다 흐리게 "+210?" */
.pcell-tent { font-size: 11px; font-weight: 800; opacity: .5; margin-left: 1px; letter-spacing: -0.3px; }

/* ── 지상 실측 좌표 맵 (SVG top-view) ──────────────────── */
.pmap-svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.pmap-bg { fill: #f3ede3; }                  /* 단지 바닥 톤 */
/* 단지 내부 도로(차선) — 동 박스 뒤. 경계(연함) → 도로(회색) → 중앙 점선. */
.pmap-road-edge {
  fill: none; stroke: #e7ddcf; stroke-width: 32;
  stroke-linecap: round; stroke-linejoin: round;
}
.pmap-road {
  fill: none; stroke: #ece4d7; stroke-width: 26;
  stroke-linecap: round; stroke-linejoin: round;
}
.pmap-road-dash {
  fill: none; stroke: #d8cbb6; stroke-width: 1.8;
  stroke-dasharray: 9 9; stroke-linecap: round;
  opacity: 0.85;
}
/* 중앙 녹지(어린이공원) — 잔디 결 + 작은 나무 */
.pmap-green { fill: #d6efd0; stroke: #aed4a4; stroke-width: 2; }
.pmap-green-inner { fill: none; stroke: #bfe1b6; stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.7; }
.pmap-tree-trunk { fill: #9c7a4f; }
.pmap-tree-top  { fill: #5fae5a; }
.pmap-tree-top2 { fill: #74bd6b; }
.pmap-green-tag {
  fill: var(--green-ink); font-size: 16px; font-weight: 800;
  letter-spacing: -0.4px; opacity: 0.78;
}
.pmap-dong { cursor: pointer; }
.pmap-box {
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(72, 50, 120, 0.10));
  transition: filter .15s ease;
}
.pmap-num { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; }
.pmap-val { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.pmap-car { font-size: 18px; }
.pmap-dong.green  .pmap-box { fill: var(--green-soft);  stroke: var(--green); }
.pmap-dong.green  .pmap-num,  .pmap-dong.green  .pmap-val  { fill: var(--green-ink); }
.pmap-dong.yellow .pmap-box { fill: var(--yellow-soft); stroke: var(--yellow); }
.pmap-dong.yellow .pmap-num, .pmap-dong.yellow .pmap-val { fill: var(--yellow-ink); }
.pmap-dong.red    .pmap-box { fill: var(--red-soft);    stroke: var(--red); }
.pmap-dong.red    .pmap-num,    .pmap-dong.red    .pmap-val   { fill: var(--red-ink); }
.pmap-dong.gray   .pmap-box { fill: var(--gray-soft);   stroke: var(--gray); }
.pmap-dong.gray   .pmap-num,   .pmap-dong.gray   .pmap-val  { fill: var(--gray-ink); }
.pmap-dong.gray   .pmap-val { font-size: 13px; }
.pmap-dong.sel   .pmap-box { stroke: var(--accent-1); stroke-width: 4; filter: drop-shadow(0 4px 8px rgba(124, 92, 255, 0.35)); }
.pmap-dong.mycar .pmap-box { stroke: var(--accent-2); stroke-width: 4; }
/* ★v52: 내 동(home) 강조 — 굵은 보라 테두리 + 글로우 + 🏠 */
.pmap-dong.home .pmap-box { stroke: #6b5bff; stroke-width: 4.5; filter: drop-shadow(0 0 6px rgba(107, 91, 255, 0.55)); }
.pmap-home { font-size: 15px; }
/* ★v82 내 차 동 — 크게 + 반짝(글로우 깜빡) + 차 아이콘 늘었다 줄었다 펄스 */
.pmap-dong.mycar .pmap-box, .pmap-dong.home .pmap-box { animation: pdMineGlow 1.3s ease-in-out infinite; }
@keyframes pdMineGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(124, 92, 255, 0.45)); stroke-width: 4; }
  50%      { filter: drop-shadow(0 0 13px rgba(124, 92, 255, 0.95)); stroke-width: 5.5; }
}
.pmap-car { transform-box: fill-box; transform-origin: center; animation: pdCarPulse 1s ease-in-out infinite; }
.pmap-dong.mycar .pmap-car { font-size: 40px; }   /* ★v84 내 차 크게(완벽히 보이게) */
@keyframes pdCarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.pmap-dong:focus { outline: none; }
.pmap-dong:focus-visible .pmap-box { stroke: var(--accent-1); stroke-width: 4; }
.pmap-dong.pulse { animation: pulse .6s ease; transform-box: fill-box; transform-origin: center; }
.pmap-dong:active .pmap-box { filter: none; opacity: .9; }
/* 방문자(정문·후문) — 작게 */
.pmap-visitor { cursor: pointer; }
.pmap-vdot { fill: var(--panel); stroke: var(--ink-faint); stroke-width: 2; }
.pmap-visitor.green  .pmap-vdot { fill: var(--green-soft);  stroke: var(--green); }
.pmap-visitor.yellow .pmap-vdot { fill: var(--yellow-soft); stroke: var(--yellow); }
.pmap-visitor.red    .pmap-vdot { fill: var(--red-soft);    stroke: var(--red); }
.pmap-visitor.gray   .pmap-vdot { fill: var(--gray-soft);   stroke: var(--gray); }
.pmap-vtag { fill: var(--ink-soft); font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }

.plan-hint {
  margin: 11px 6px 2px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}
.plan-hint b { color: var(--yellow-ink); font-weight: 800; }

/* ── 칸 그리드 (바텀시트 안 · 빈/찬 사각형 칸) ─────── */
.spotgrid-wrap {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 14px;
}
.spotgrid-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 11px; flex-wrap: wrap;
}
.spotgrid-title { font-size: 13.5px; font-weight: 900; color: var(--ink); }
.spotgrid-legend {
  font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.spot-dot {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  vertical-align: -1px;
}
.spot-dot.empty { background: var(--green-soft); border: 1.5px solid var(--green); }
.spot-dot.taken { background: var(--accent-2); }
.spotgrid-legend .spot-dot.taken { margin-left: 8px; }

/* realistic 주차장 top-view (SVG 도면) */
.spotgrid { display: block; }
.lot-svg {
  display: block;
  width: 100%; height: auto;
  border-radius: 10px;
}
.lot-bg { fill: #efe9e0; }                 /* 아스팔트 베이스 */
/* 빈 칸 — 옅은 초록 틴트 + 점선 윤곽(한눈에 비었다) */
.lot-stall-empty {
  fill: var(--green-soft);
  stroke: var(--green);
  stroke-width: 1.2;
  stroke-dasharray: 3 2.5;
  opacity: 0.92;
}
.lot-p {
  fill: var(--green-ink);
  font-size: 12px; font-weight: 800;
  opacity: 0.55;
}
/* 사용중 칸 — top-view 차 아이콘 */
.lot-car { filter: drop-shadow(0 1px 1.5px rgba(44, 42, 58, 0.22)); }
/* 주행 차선(lane) — 흰색 ㄴ/T자 통로 + 가운데 점선 + 화살표 */
.lot-lane { fill: #ffffff; stroke: #e7ddcf; stroke-width: 1; }
.lot-lane-dash {
  stroke: #d6b955; stroke-width: 1.6;
  stroke-dasharray: 6 6; stroke-linecap: round;
}
.lot-arrow {
  fill: none; stroke: #b9962f; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* "입구" 진입로(점선) + 라벨 */
.lot-entry-dash {
  stroke: #9c8a6a; stroke-width: 2;
  stroke-dasharray: 3 3; stroke-linecap: round;
}
.lot-entry-tag {
  fill: var(--ink-soft);
  font-size: 9.5px; font-weight: 900;
  letter-spacing: -0.2px;
}
/* capacity 초과 시 "외 N면" 안내(도면 우하단) */
.lot-over-tag {
  fill: var(--ink-faint);
  font-size: 10px; font-weight: 800;
  letter-spacing: -0.2px;
}
/* 내 차 — 또렷한 링 + 라벨 */
.lot-mycar-ring {
  fill: none;
  stroke: var(--accent-1);
  stroke-width: 2.5;
}
.lot-mycar-tag {
  fill: var(--accent-1);
  font-size: 9px; font-weight: 900;
}
/* 신뢰도 90% 미만 지하 — realistic 도면을 흐리게(정직): 채도↓·투명도↓ */
.spotgrid .lot-svg.lot-unconfirmed {
  opacity: 0.55;
  filter: grayscale(0.55) saturate(0.7) blur(0.3px);
}
/* "추정 · 확인 전" 배지 — 도면 위(상단)에 또렷하게 */
.spotgrid-unconf {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 0 9px;
  background: var(--yellow-soft);
  border: 1.5px solid rgba(217, 138, 23, 0.40);
  color: var(--yellow-ink);
  font-size: 12.5px; font-weight: 800;
  padding: 8px 12px;
  border-radius: 12px;
  letter-spacing: -0.2px;
}
.spotgrid-unconf b { font-weight: 900; }

.spotgrid-na {
  margin: 4px 0 0;
  font-size: 13px; font-weight: 700; color: var(--gray-ink);
  text-align: center;
}
.spotgrid-foot {
  margin: 9px 2px 0;
  font-size: 11px; color: var(--ink-faint);
  text-align: center; line-height: 1.5;
}

/* ── 동별 카드 그리드 (HTML · 가독성 우선, SVG 대체) ──── */
.dong-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 12px 13px;
}
.dcard.wide { grid-column: 1 / -1; }
.dcard-head { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
.dcard-pin { font-size: 14px; flex: 0 0 auto; }
.dcard-name { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px; white-space: nowrap; flex: 0 0 auto; }
.dcard-cap { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; flex: 0 0 auto; }

/* ★v71 동 종합 신호등 — 자연스러운 글로시 + 은은한 반짝임(극단적 입체 복구) */
.dcard.s-green, .dcard.s-yellow, .dcard.s-red, .dcard.s-gray { border-width: 1.5px; }
.dcard.s-green  { border-color: #c4e7d2; background: linear-gradient(180deg, #fcfefd 0%, #f5faf7 100%); --dc-glow: rgba(31, 157, 92, 0.20); }
.dcard.s-yellow { border-color: #f1dcab; background: linear-gradient(180deg, #fffdf8 0%, #fdf8ee 100%); --dc-glow: rgba(217, 138, 23, 0.20); }
.dcard.s-red    { border-color: #f3c8c3; background: linear-gradient(180deg, #fffcfb 0%, #fdf4f3 100%); --dc-glow: rgba(224, 87, 79, 0.22); }
.dcard.s-gray   { border-color: var(--line); }
/* 글로시(상단 하이라이트) + 은은한 색 반짝임 */
.dcard.s-green, .dcard.s-yellow, .dcard.s-red {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px var(--dc-glow);
  animation: dcardGlow 3.2s ease-in-out infinite;
}
@keyframes dcardGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px var(--dc-glow); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 7px 22px var(--dc-glow); }
}
.dcard-sig { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 900; padding: 2px 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap; flex: 0 0 auto; }
.dcard-sig .dcard-dot { width: 6px; height: 6px; border-radius: 50%; }
.dcard-sig.s-green  { background: var(--green-soft);  color: var(--green-ink); }
.dcard-sig.s-green  .dcard-dot { background: var(--green); }
.dcard-sig.s-yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.dcard-sig.s-yellow .dcard-dot { background: var(--yellow); }
.dcard-sig.s-red    { background: var(--red-soft);    color: var(--red-ink); }
.dcard-sig.s-red    .dcard-dot { background: var(--red); }
.dcard-sig.s-gray   { background: var(--gray-soft);   color: var(--gray-ink); }
.dcard-sig.s-gray   .dcard-dot { background: var(--gray); }
.frow {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 11px 14px;
  cursor: pointer;
  font: inherit; text-align: left;
  transition: transform .1s ease, box-shadow .15s ease;
}
.frow + .frow { margin-top: 8px; }
.frow:active { transform: scale(.985); }
.frow-k { font-size: 14.5px; font-weight: 800; }
.frow-v { display: inline-flex; align-items: baseline; gap: 2px; font-size: 13px; font-weight: 700; }
.frow-v b { font-size: 24px; font-weight: 900; letter-spacing: -0.6px; }
.frow-na { font-size: 22px; font-weight: 900; letter-spacing: -0.6px; opacity: .7; }
.frow-car { font-size: 17px; margin-right: 5px; }
.frow.green  { background: var(--green-soft);  border-color: rgba(31, 157, 92, 0.28);   color: var(--green-ink); }
.frow.yellow { background: var(--yellow-soft); border-color: rgba(217, 138, 23, 0.30);  color: var(--yellow-ink); }
.frow.red    { background: var(--red-soft);    border-color: rgba(224, 87, 79, 0.32);   color: var(--red-ink); }
.frow.gray   { background: var(--gray-soft);   border-color: rgba(179, 172, 191, 0.45); color: var(--gray-ink); }
.frow.sel { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.30); }
.frow.hl  { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.55); border-color: var(--accent-1); }
.frow.pulse { animation: pulse 0.55s ease; }

/* ── 단지 요약 칩 ─────────────────────────────────── */
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 16px 16px 4px;
}
.sum-chip {
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 11px 6px 9px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
}
.sum-chip b { font-size: 22px; font-weight: 900; line-height: 1; }
.sum-chip span { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.sum-chip.green  { border-color: var(--green-soft); }
.sum-chip.green  b { color: var(--green); }
.sum-chip.yellow { border-color: var(--yellow-soft); }
.sum-chip.yellow b { color: var(--yellow); }
.sum-chip.red    { border-color: var(--red-soft); }
.sum-chip.red    b { color: var(--red); }
.sum-chip.gray   { border-color: var(--gray-soft); }
.sum-chip.gray   b { color: var(--gray-ink); }

/* ── 범례 ─────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  padding: 12px 18px 2px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 600;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.green { background: var(--green); }
.dot.yellow { background: var(--yellow); }
.dot.red { background: var(--red); }
.dot.gray { background: var(--gray); }

/* ── 도면 (프리미엄 센터피스) ─────────────────────── */
.map-wrap { padding: 10px 16px 6px; }
#map {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f0 100%);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
}
.map-hint {
  margin: 11px 6px 2px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}
.map-hint b { color: var(--ink-soft); font-weight: 700; }

/* SVG 동 카드/구역 — 카드형 + 소프트 섀도 느낌 */
.dong-card {
  fill: #fffdfa;
  stroke: #ece3d8;
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 6px rgba(72, 50, 120, 0.06));
}
.dong-pin { font-size: 17px; }
.dong-label {
  font-size: 17px; font-weight: 900; fill: var(--ink);
  letter-spacing: -0.4px;
}

.zone-rect {
  cursor: pointer;
  stroke-width: 2;
  transition: opacity .15s ease, transform .12s ease, filter .15s ease;
}
.zone-rect:active { opacity: .85; }
.zone-rect.sel { stroke: var(--accent-1); stroke-width: 3.5; filter: drop-shadow(0 4px 8px rgba(124, 92, 255, 0.35)); }
.zone-rect.hl  { stroke: var(--accent-2); stroke-width: 3.5; }
.zone-rect.green  { fill: var(--green-soft);  stroke: var(--green); }
.zone-rect.yellow { fill: var(--yellow-soft); stroke: var(--yellow); }
.zone-rect.red    { fill: var(--red-soft);    stroke: var(--red); }
.zone-rect.gray   { fill: var(--gray-soft);   stroke: var(--gray); }

.zone-name { font-size: 14.5px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.zone-est  { font-size: 13px; font-weight: 600; fill: var(--ink-soft); pointer-events: none; }
.zone-est .num { font-weight: 900; fill: var(--ink); }
.zone-mycar { font-size: 18px; pointer-events: none; }
.zone-g.hl .zone-name { fill: var(--accent-2); }
.pulse { animation: pulse .6s ease; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%{transform:scale(1)} 45%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* ── 탭 공통 인트로 ───────────────────────────────── */
.tab-intro { padding: 18px 20px 4px; }
.tab-h { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
.tab-p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.tab-p b { color: var(--ink); font-weight: 800; }

/* ── 새 기능 2) 내 차 (car-finder) ────────────────── */
.car-saved {
  margin: 14px 16px 0;
  display: flex; align-items: center; gap: 13px;
  background: var(--accent-grad);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-hero);
}
.car-saved-icon {
  width: 50px; height: 50px; flex: 0 0 50px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 15px;
  font-size: 26px;
}
.car-saved-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.car-saved-label { font-size: 18px; font-weight: 900; letter-spacing: -0.4px; }
.car-saved-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; }
.car-status-chip {
  font-size: 11.5px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.car-status-chip.green  { background: var(--green-soft);  color: var(--green-ink); }
.car-status-chip.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.car-status-chip.red    { background: var(--red-soft);    color: var(--red-ink); }
.car-status-chip.gray   { background: rgba(255,255,255,0.25); color: #fff; }
.car-find {
  flex: 0 0 auto;
  border: none;
  background: #fff;
  color: #4a3a82;
  font-size: 14px; font-weight: 800;
  padding: 11px 15px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 5px 13px rgba(0,0,0,0.16);
}
.car-find:active { transform: scale(.97); }

.car-picker {
  margin: 16px 16px 0;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
}
.picker-label {
  font-size: 13px; font-weight: 800; color: var(--ink);
  margin: 0 0 10px;
}
.picker-label + .picker-label { margin-top: 18px; }
.car-dong-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.car-dong {
  min-height: 46px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  border-radius: 13px;
  font-size: 13.5px; font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .12s ease;
}
.car-dong:active { transform: scale(.96); }
.car-dong.on {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.car-kind-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.car-kind {
  min-height: var(--tap);
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  border-radius: 15px;
  font-size: 14px; font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .12s ease;
}
.car-kind:active { transform: scale(.97); }
.car-kind.on {
  background: var(--accent-soft);
  border-color: var(--accent-1);
  color: var(--accent-1);
}
.car-actions {
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
  margin-top: 18px;
}
.car-save {
  min-height: var(--tap);
  border: none;
  border-radius: 16px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(96, 70, 200, 0.28);
  transition: transform .1s ease;
}
.car-save:active { transform: scale(.98); }
.car-clear {
  min-height: var(--tap);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.car-clear:active { transform: scale(.97); }
.car-note {
  margin: 14px 2px 0;
  text-align: center;
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.5;
}

/* ── 새 기능 3) 예측 탭 ───────────────────────────── */
.fc-card {
  margin: 16px 16px 0;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
}
.fc-summary {
  margin: 0 0 16px;
  font-size: 17px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.fc-summary b { font-weight: 900; }
.fc-summary .e-여유 { color: var(--green); }
.fc-summary .e-보통 { color: var(--yellow); }
.fc-summary .e-혼잡 { color: var(--red); }
.fc-summary .muted { color: var(--ink-faint); font-weight: 600; font-size: 13px; }
.fc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}
.fc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-top: 2px;
}
.fc-bar {
  width: 100%; height: 30px;
  border-radius: 7px;
  background: var(--gray-soft);
}
.fc-cell.e-여유 .fc-bar { background: var(--green); }
.fc-cell.e-보통 .fc-bar { background: var(--yellow); }
.fc-cell.e-혼잡 .fc-bar { background: var(--red); }
.fc-hr { font-size: 9.5px; color: var(--ink-faint); font-weight: 700; }
.fc-cell.now .fc-bar { outline: 2.5px solid var(--accent-1); outline-offset: 1px; }
.fc-cell.now .fc-hr { color: var(--accent-1); }
.fc-legend {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 16px;
  font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
}
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-note {
  margin: 14px 2px 0;
  text-align: center;
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.5;
}

/* ── 푸터 ─────────────────────────────────────────── */
.app-footer { padding: 20px 18px 14px; text-align: center; }
.app-footer p { margin: 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.55; }

/* ── 하단 탭바 ────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 520px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1.5px solid var(--line);
  box-shadow: 0 -6px 24px rgba(72, 50, 120, 0.08);
  z-index: 30;
}
.tab-btn {
  border: none; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 11.5px; font-weight: 800;
  position: relative;
  transition: color .15s ease;
}
.tab-ico { font-size: 23px; line-height: 1; filter: grayscale(0.5) opacity(0.7); transition: filter .15s ease, transform .15s ease; }
.tab-txt { letter-spacing: -0.3px; }
.tab-btn.on { color: var(--accent-1); }
.tab-btn.on .tab-ico { filter: none; transform: translateY(-1px) scale(1.06); }
.tab-btn.on::before {
  content: "";
  position: absolute; top: 6px;
  width: 34px; height: 4px;
  border-radius: 999px;
  background: var(--accent-grad);
}
.tab-badge {
  position: absolute; top: 11px; right: calc(50% - 22px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid #fff;
}

/* ── 바텀시트 ─────────────────────────────────────── */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(44, 42, 58, 0.45);
  z-index: 40;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 520px;
  background: var(--panel);
  z-index: 50;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  padding: 8px 20px calc(22px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -12px 44px rgba(44, 42, 58, 0.26);
  animation: slideUp .26s cubic-bezier(.16, 1, .3, 1);
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.sheet-grip {
  width: 44px; height: 5px;
  background: var(--line);
  border-radius: 999px;
  margin: 4px auto 14px;
}
.sheet-close {
  position: absolute; top: 14px; right: 16px;
  width: 38px; height: 38px;
  border: none; background: var(--panel-soft);
  border-radius: 50%;
  font-size: 23px; line-height: 1; color: var(--ink-soft);
  cursor: pointer;
}

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  padding-right: 46px;        /* 우상단 닫기(X) 버튼 자리 확보 */
}
.sheet-head-text { min-width: 0; }
.sheet-zone { margin: 0; font-size: 23px; font-weight: 900; letter-spacing: -0.6px; }
.sheet-floor { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }

/* 빈자리 히어로 — 큰 숫자 + 상태색 통합 */
.avail-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.avail-num { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.avail-num b { font-size: 46px; font-weight: 900; letter-spacing: -1.6px; }
.avail-unit { font-size: 18px; font-weight: 800; }
.avail-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.avail-status { font-size: 15px; font-weight: 800; line-height: 1.3; }
.avail-tag { font-size: 11.5px; font-weight: 700; opacity: .72; }
.avail-hero.green  { background: var(--green-soft);  border-color: rgba(31, 157, 92, 0.22);  color: var(--green-ink); }
.avail-hero.yellow { background: var(--yellow-soft); border-color: rgba(217, 138, 23, 0.24); color: var(--yellow-ink); }
.avail-hero.red    { background: var(--red-soft);    border-color: rgba(224, 87, 79, 0.26);  color: var(--red-ink); }
.avail-hero.gray   { background: var(--gray-soft);   border-color: rgba(179, 172, 191, 0.40); color: var(--gray-ink); }

.status-chip {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-chip.green  { background: var(--green-soft);  color: var(--green-ink); }
.status-chip.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.status-chip.red    { background: var(--red-soft);    color: var(--red-ink); }
.status-chip.gray   { background: var(--gray-soft);   color: var(--gray-ink); }

.sheet-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.meta-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.meta-k { font-size: 12px; color: var(--ink-faint); font-weight: 700; }
.meta-v { font-size: 14.5px; font-weight: 800; color: var(--ink); }

/* 신뢰도 행 (라벨 + 바) */
.confidence-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.confidence-cap { font-size: 12px; font-weight: 700; color: var(--ink-faint); flex: 0 0 auto; }
.confidence-bar {
  height: 8px; flex: 1 1 auto;
  background: var(--line); border-radius: 999px;
  overflow: hidden;
}
.confidence-fill {
  height: 100%; width: 0%;
  background: var(--accent-grad);
  border-radius: 999px;
  transition: width .4s ease;
}
.confidence-fill.green  { background: linear-gradient(90deg, #34c97c, #1f9d5c); }
.confidence-fill.yellow { background: linear-gradient(90deg, #f0b04a, #d98a17); }
.confidence-fill.red    { background: linear-gradient(90deg, #f0817a, #e0574f); }
.confidence-fill.gray   { background: linear-gradient(90deg, #c8c2d2, #b3acbf); }

/* 예측 자리 / heat strip */
.forecast {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 14px 14px;
  margin-bottom: 18px;
}
.forecast-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.forecast-title { font-size: 14px; font-weight: 900; color: var(--ink); }
.forecast-label { font-size: 12px; color: var(--ink-soft); text-align: right; font-weight: 600; }
.heat-strip {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px; height: 24px;
}
.heat-cell { border-radius: 4px; background: var(--gray-soft); }
.heat-cell.now { outline: 2.5px solid var(--accent-1); outline-offset: 1px; }
.heat-cell.e-여유 { background: var(--green); }
.heat-cell.e-보통 { background: var(--yellow); }
.heat-cell.e-혼잡 { background: var(--red); }
.heat-axis {
  display: flex; justify-content: space-between;
  margin-top: 7px; font-size: 10.5px; color: var(--ink-faint); font-weight: 600;
}

/* 등록 버튼 — 위계: 입/출차(주요) / 제보(보조) */
.actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.actions-sub { margin-top: 10px; }
.act-btn {
  min-height: 52px;
  border: 1.5px solid transparent;
  border-radius: 15px;
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.3px;
  cursor: pointer;
  transition: transform .1s ease, opacity .15s ease, box-shadow .15s ease;
  display: flex; align-items: center; justify-content: center;
}
.act-btn:active { transform: scale(.98); }
.act-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* 주요: 입차 = 보라 그라디언트 / 출차 = 차분한 솔리드 */
.act-primary { color: #fff; box-shadow: 0 7px 16px rgba(96, 70, 200, 0.18); }
.act-in  { background: var(--accent-grad); }
.act-out {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(72, 50, 120, 0.08);
}

/* 보조: 제보 = 조용한 틴트 아웃라인 */
.act-ghost {
  min-height: 48px;
  font-size: 14.5px; font-weight: 800;
  background: var(--panel-soft);
  box-shadow: none;
}
.act-empty { color: var(--green-ink); border-color: rgba(31, 157, 92, 0.30);  background: var(--green-soft); }
.act-full  { color: var(--red-ink);   border-color: rgba(224, 87, 79, 0.30);  background: var(--red-soft); }

.actions-note {
  margin: 14px 2px 0;
  text-align: center;
  font-size: 11.5px; color: var(--ink-faint);
}

/* 토스트 */
.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  background: #2c2a3a; color: #fff;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(44, 42, 58, 0.32);
  max-width: 90%;
  text-align: center;
  animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 데스크탑 */
@media (min-width: 640px) {
  #app { box-shadow: var(--shadow); }
  .app-header { border-radius: 0 0 28px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════
 *  신규 기능 골격 (2026-06-19) — 알림센터 / 차단기·주차시간 / 방문예약
 * ══════════════════════════════════════════════════════════ */

/* ── 헤더 알림 버튼 ─────────────────────────────────── */
.header-actions { display: flex; align-items: center; gap: 8px; }
.notify-btn {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.notify-btn:active { transform: scale(.94); }
.notify-dot {
  position: absolute; top: 7px; right: 8px;
  width: 9px; height: 9px;
  background: var(--red); border: 2px solid var(--panel);
  border-radius: 999px;
}
/* ★v93 헤더 벨 — 관리소 알림방송 미읽음 숫자 뱃지(전역 노출) */
.notify-count {
  position: absolute; top: 1px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  border: 2px solid var(--panel); border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 1;
}
.notify-count[hidden] { display: none; }
/* ★v93 알림 시트 안 관리소 방송 섹션 */
.notify-bcast { margin: 2px 0 12px; padding: 11px 12px; border: 1.5px solid #e7e0fb; border-radius: var(--radius-md); background: #faf8ff; }
.notify-bcast[hidden] { display: none; }
.nb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.nb-title { font-size: 12.5px; font-weight: 900; color: var(--accent-1); }
.nb-all { border: none; background: none; font: inherit; font-size: 12px; font-weight: 800; color: var(--accent-1); cursor: pointer; padding: 2px 4px; }
.nb-list { display: flex; flex-direction: column; gap: 7px; }
.nb-card { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.nb-card.unread { border-color: #c9bdf0; }
.nb-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; background: var(--accent-soft); }
.nb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-t { font-size: 13px; font-weight: 800; color: var(--ink); }
.nb-new { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; vertical-align: middle; }
.nb-meta { font-size: 11px; color: var(--ink-soft); }

/* ── 주차 세션 (주차 시간 추적 + 차단기 대체) ────────── */
.park-session {
  background: var(--accent-grad);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-hero);
}
.ps-top { display: flex; align-items: center; gap: 10px; }
.ps-ico { font-size: 24px; }
.ps-top-text { display: flex; flex-direction: column; }
.ps-title { font-size: 12px; font-weight: 800; opacity: .85; }
.ps-where { font-size: 17px; font-weight: 900; letter-spacing: -0.4px; }
.ps-timer { margin: 14px 0 4px; display: flex; align-items: baseline; gap: 7px; }
.ps-time { font-size: 34px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.ps-cap { font-size: 12px; font-weight: 700; opacity: .85; }
.ps-out {
  width: 100%; margin-top: 12px;
  padding: 13px; border: none; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.95); color: var(--accent-1);
  font: inherit; font-weight: 900; font-size: 15px; cursor: pointer;
}
.ps-out:active { transform: scale(.98); }
.ps-note { margin-top: 11px; font-size: 10.5px; line-height: 1.5; opacity: .85; }
.ps-note b { font-weight: 800; }

.park-idle {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.pi-head { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px; }
.pi-text { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.pi-text b { color: var(--accent-1); font-weight: 800; }

/* ── 방문 예약 폼 ───────────────────────────────────── */
.visit-form {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.vf-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 14px 0 7px; }
.vf-label:first-child { margin-top: 0; }
.vf-opt { font-weight: 700; color: var(--ink-faint); font-size: 11px; }
/* ★v105 필수 배지 — 방문 차량 연락처 */
.vf-req { font-weight: 800; color: #fff; font-size: 10px; background: var(--red); padding: 2px 7px; border-radius: 999px; letter-spacing: 0; vertical-align: middle; }
.vf-input {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 18px; font-weight: 800; letter-spacing: 2px;
  color: var(--ink); background: var(--panel-soft);
}
.vf-input:focus { outline: none; border-color: var(--accent-1); }
/* ★v105 필수 누락 강조(연락처) */
.vf-input-err { border-color: var(--red) !important; background: var(--red-soft); animation: vfShake .4s; }
@keyframes vfShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.vf-dong-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vf-dong {
  padding: 9px 0; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-soft); color: var(--ink-soft);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.vf-dong.on { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-1); }
.vf-stay-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vf-stay {
  padding: 11px 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-soft); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.vf-stay.on { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-1); }
.vf-send {
  width: 100%; margin-top: 18px; padding: 15px;
  border: none; border-radius: var(--radius-sm);
  background: var(--accent-grad); color: #fff;
  font: inherit; font-weight: 900; font-size: 15.5px; cursor: pointer;
  box-shadow: var(--shadow-hero);
}
.vf-send:active { transform: scale(.98); }
.vf-note { margin-top: 11px; font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); }
.vf-note b { color: var(--yellow-ink); font-weight: 800; }
/* ★v105 알림 끄기 금지 안내 — 개별 연락이 앱 알림으로 옴 */
.vf-keepon {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--yellow-soft); border: 1px solid rgba(217,138,23,.32);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 600;
}
.vf-keepon b { color: var(--yellow-ink); font-weight: 800; }

.visit-list-wrap { padding: 0 2px; }
.vl-head { font-size: 13px; font-weight: 900; color: var(--ink); margin-bottom: 10px; }
.visit-list { display: flex; flex-direction: column; gap: 9px; }
.visit-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.vi-ico { font-size: 19px; }
.vi-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vi-plate { font-size: 14.5px; font-weight: 900; color: var(--ink); letter-spacing: -0.2px; }
.vi-tel { font-size: 11.5px; font-weight: 800; color: var(--accent-1); }   /* ★v105 방문 연락처 */
.vi-sub { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.vi-sent { font-size: 10px; font-weight: 800; color: var(--green-ink); background: var(--green-soft); border-radius: 999px; padding: 2px 8px; align-self: flex-start; margin-top: 2px; }
.vi-cancel {
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink-soft);
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  border-radius: 999px; padding: 6px 12px;
}
.visit-empty { text-align: center; font-size: 12.5px; color: var(--ink-faint); padding: 20px 0; }

/* ── 알림 센터 시트 ─────────────────────────────────── */
.notify-clear {
  border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink-soft);
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  border-radius: 999px; padding: 7px 13px; white-space: nowrap;
}
.notify-list { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 10px; max-height: 52vh; overflow-y: auto; }
.notify-item {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--panel-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.ni-ico { font-size: 18px; line-height: 1.2; }
.ni-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ni-text { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.ni-time { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.notify-empty { text-align: center; font-size: 13px; color: var(--ink-faint); padding: 26px 0; }
.notify-foot { margin-top: 6px; font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); text-align: center; }

/* ── 지상 맵 랜드마크 (네이버 2D 트레이스) ───────────── */
.pmap-lm rect { fill: #ffffff; stroke: #e4dacb; stroke-width: 1.5; }
.pmap-lm-welfare rect { fill: #fbece9; stroke: #e6bdb6; }
.pmap-lm-play    rect { fill: #eaf6e6; stroke: #bedcb1; }
.pmap-lm-court   rect { fill: #d7eccf; stroke: #a3d094; }
.pmap-lm-tag { fill: #948da0; font-size: 11px; font-weight: 800; letter-spacing: -0.3px; }
.pmap-lm-welfare .pmap-lm-tag { fill: #b06a61; }
.pmap-lm-court   .pmap-lm-tag { fill: #4f8a3c; }
.pmap-lmp-dot { fill: #4f7bff; }
.pmap-lmp-p   { fill: #fff; font-size: 12px; font-weight: 900; }
.pmap-dc { fill: #4f7bff; opacity: .85; }   /* 동 1층 어린이집/학원 마커 */

/* 주차칸 빗살(노외주차) */
.pmap-park { stroke: #d6ccb8; stroke-width: 1.4; }
.pmap-park-base { stroke: #cbbfa9; stroke-width: 1.6; }

/* 지하주차장 입구(램프) 마커 */
.pmap-ent-dot { fill: #7c5cff; }
.pmap-ent-ico { fill: #fff; font-size: 13px; font-weight: 900; }
.pmap-ent-tag { fill: #6a4cf0; font-size: 10px; font-weight: 800; letter-spacing: -0.3px; }

/* 전체 동을 한 화면에 — 가로 스크롤 폐기. 확대는 핀치 줌. */
.plan-grid.plan-map { overflow: visible; touch-action: pinch-zoom; }
.plan-grid.plan-map .pmap-svg { width: 100%; }

/* 지하주차장 진입 램프(곡선 점선 진입로) */
.pmap-ramp { fill: none; stroke: #8b6bff; stroke-width: 6; stroke-dasharray: 1.5 5.5; stroke-linecap: round; opacity: .8; }

/* 빈자리(주차 안 한 라인) 반짝임 — 주차중(정적)과 한눈에 구분 */
@keyframes lotEmptyBlink { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* 빈칸 rect — 색까지 펄스(밝은 초록↔진초록)로 '주차 가능'을 또렷이 */
@keyframes lotEmptyShine { 0%, 100% { opacity: .82; fill: #9be8b8; } 50% { opacity: 1; fill: #3fc778; } }
.lot-stall-empty { animation: lotEmptyShine 1.1s ease-in-out infinite; }
.lot-p { animation: lotEmptyBlink 1.1s ease-in-out infinite; }

/* 주차장 섹션(구역) 라벨 + 빈칸 색 과감 */
.lot-section-tag { fill: #5b5470; font-size: 10px; font-weight: 900; letter-spacing: -0.3px; }
/* 주차 가능(빈칸) — 밝은 초록 + 점선 테두리 + 초록 글로우(반짝) */
.lot-stall-empty { fill: #7ddaa1; stroke: #137a42; stroke-width: 1.8; stroke-dasharray: 3 2; filter: drop-shadow(0 0 1.6px rgba(31,155,86,.6)); }
.lot-p { fill: #0c5e31; font-weight: 900; }

/* 주차칸 개별(차/빈자리) — 전체 도면·확대 뷰 공용. 빈자리는 반짝임으로 구분 */
.pmap-stall-car   { fill: #ccb99d; stroke: #b09d7e; stroke-width: .4; }
.pmap-stall-empty { fill: #b6ecc8; stroke: #2f9c5e; stroke-width: .6; animation: lotEmptyBlink 1.5s ease-in-out infinite; }

/* 시트 층 토글(지상/지하1/지하2 — 단지별 가변) */
.sheet-floorseg { display: flex; gap: 8px; margin: 2px 0 14px; }
.sheet-floorseg[hidden] { display: none; }
.sheet-floor-btn { flex: 1; padding: 11px 6px; border: 1.5px solid var(--line); background: var(--panel-soft); color: var(--ink-soft); font: inherit; font-weight: 800; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; }
.sheet-floor-btn.on { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-1); }
.sheet-floor-btn:active { transform: scale(.97); }

/* 지하 — 평면도 준비중 안내(빈자리 요약) */
.ug-pending { padding: 26px 18px 22px; text-align: center; }
.ug-pending-ico { font-size: 34px; }
.ug-pending-num { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.ug-pending-num b { font-size: 27px; color: var(--accent-1); }
.ug-pending-num span { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.ug-bar { height: 10px; background: var(--gray-soft); border-radius: 999px; margin: 14px auto 6px; max-width: 240px; overflow: hidden; }
.ug-bar span { display: block; height: 100%; background: var(--accent-grad); }
.ug-bar-cap { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ug-pending-msg { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.ug-pending-msg b { color: var(--yellow-ink); font-weight: 800; }

/* 동별 실제 네이버 캡쳐 배경(시트 도면) */
.lot-photo { width: 100%; display: block; border-radius: 8px; }

/* 우리 주차장 도면(캡쳐 참고 — 네이버 이미지 직접사용 X) */
.lot-ramp2 { fill: none; stroke: #cfc4b0; stroke-width: 9; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7; }
.lot-ent2 { fill: #7c5cff; }
.lot-ent2-t { fill: #fff; font-size: 10px; font-weight: 900; }
.lot-pmark { fill: #0c5e31; font-size: 9.5px; font-weight: 900; animation: lotEmptyBlink 1.1s ease-in-out infinite; }
.lot-mine { fill: none; stroke: var(--accent-2); stroke-width: 2.5; }
.lot-mine-t { fill: var(--accent-1); font-size: 10px; font-weight: 900; }

/* 주차 불가(사용중) — 무광 회갈색 + 정적(반짝임 없음)으로 빈칸과 명확히 대비 */
.lot-stall-car { fill: #c3b39a; stroke: #94815c; stroke-width: 1; }
/* 건물 footprint(주차가 건물 면 따라 있다는 맥락) */
.lot-bldg { fill: #d9d0c1; stroke: #c2b6a2; stroke-width: 1; }
.lot-bldg-t { fill: #8a7f6c; font-size: 11px; font-weight: 900; letter-spacing: -0.3px; }
/* 주행 드라이브 레인(흰 도로) */
.lot-drive { fill: none; stroke: #fbf8f2; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
/* 노상 부채꼴 */
.lot-fan { fill: #e7decd; stroke: #c9bca4; stroke-width: 1; }
.lot-fan-line { stroke: #c9bca4; stroke-width: 1; fill: none; }
.lot-sub-t { fill: #8a7f6c; font-size: 9px; font-weight: 800; }
/* 놀이터 등 비주차 영역(맥락) */
.lot-play { fill: #e3ecdd; stroke: #c4d3b6; stroke-width: 1; }
.lot-play-t { fill: #7e9168; font-size: 9px; font-weight: 800; }

/* ══════════════════════════════════════════════════════
 *  ★v55 대공사 스타일 — 2탭 IA · 거대 신호등 · 시간 슬라이더 ·
 *  도면 주인공 · 통계 fold 강등 · 방문 흡수 · 관리소 모드(PIN)
 * ══════════════════════════════════════════════════════ */

/* 헤더 ⋮ 더보기(관리소 진입) — notify-btn 스타일 재사용 */
#adminEntryBtn span { font-size: 20px; line-height: 1; }

/* 2탭 탭바 — grid 2칸으로 */
.tabbar.tabbar-2 { grid-template-columns: repeat(2, 1fr); }
/* ★v57 3탭 탭바 — [지금]·[내 차]·[정보] */
.tabbar.tabbar-3 { grid-template-columns: repeat(3, 1fr); }
.tabbar.tabbar-4 { grid-template-columns: repeat(4, 1fr); }   /* ★v76 탭 4개 */
.tabbar-4 .tab-txt { font-size: 11px; letter-spacing: -0.4px; }
.tabbar.tabbar-5 { grid-template-columns: repeat(5, 1fr); }   /* ★v77 탭 5개 */
.tabbar-5 .tab-txt { font-size: 10.5px; letter-spacing: -0.5px; }
.tabbar-5 .tab-ico { font-size: 21px; }

/* 거대 신호등 히어로 — 첫 화면 상단 1/3, 위계 강화 */
.hero.hero-lg { margin-top: 14px; padding: 22px 22px 24px; }
.hero.hero-lg .hero-kicker { font-size: 13px; margin-bottom: 10px; }
.hero.hero-lg .hero-title { font-size: 24px; line-height: 1.28; }
.hero.hero-lg .hs-text { font-size: 25px; }
.hero.hero-lg .hs-num b { font-size: 30px; }

/* 예측 흡수 — 시간 슬라이더 */
.time-slider {
  margin: 12px 16px 0;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 15px 14px;
  box-shadow: var(--shadow-sm);
}
.ts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ts-title { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.ts-when { font-size: 13px; font-weight: 900; color: var(--accent-1); }
.ts-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 55%, var(--red) 100%);
  outline: none; margin: 4px 0 2px;
}
.ts-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent-1);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.ts-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent-1); cursor: pointer;
}
.ts-ticks { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin: 2px 2px 8px; }
.ts-readout { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.ts-readout b { font-weight: 900; }
.ts-readout .e-여유 { color: var(--green); }
.ts-readout .e-보통 { color: var(--yellow); }
.ts-readout .e-혼잡 { color: var(--red); }
.ts-readout .muted { color: var(--ink-faint); font-weight: 600; font-size: 12.5px; }

/* 도면 미래 톤(슬라이더로 시간 이동 시) — 살짝 색 오버레이로 "그 시각 분위기" */
.plan-grid.tint-future { transition: box-shadow .2s ease; position: relative; }
.plan-grid.tint-future.tint-여유 { box-shadow: inset 0 0 0 3px rgba(31,157,92,0.30); }
.plan-grid.tint-future.tint-보통 { box-shadow: inset 0 0 0 3px rgba(217,138,23,0.32); }
.plan-grid.tint-future.tint-혼잡 { box-shadow: inset 0 0 0 3px rgba(224,87,79,0.34); }

/* 통계·범례 fold 강등 — 도면 아래 옅게 */
.fold-stats { margin-top: 6px; opacity: 0.96; }

/* 방문 흡수 — [내 차] 탭 하위 동작 */
.car-visit-entry { margin: 16px 16px 0; }
.car-visit-btn {
  width: 100%;
  background: var(--accent-soft);
  color: var(--accent-1);
  border: 1.5px solid #e2d9ff;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.car-visit-btn:active { transform: scale(.98); }
.car-visit-btn.on { background: var(--accent-grad); color: #fff; border-color: transparent; }
.car-visit-cap { margin: 8px 4px 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.visit-mount { margin: 12px 16px 0; }
.visit-mount .visit-form, .visit-mount .visit-list-wrap { margin-left: 0; margin-right: 0; }

/* ── 관리소 모드: PIN 시트 ── */
.admin-pin-sheet .admin-pin-body { padding: 4px 4px 8px; text-align: center; }
.admin-pin-input {
  width: 160px; max-width: 70%;
  text-align: center; letter-spacing: 12px;
  font-size: 28px; font-weight: 900;
  padding: 12px 8px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-soft); color: var(--ink);
  margin: 8px auto 6px; display: block;
}
.admin-pin-input:focus { outline: none; border-color: var(--accent-1); }
.admin-pin-err { color: var(--red); font-size: 13px; font-weight: 800; margin: 4px 0; }
.admin-pin-go {
  width: 100%; margin-top: 8px;
  background: var(--accent-grad); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: 14px; font-size: 16px; font-weight: 800; cursor: pointer;
}
.admin-pin-go:active { transform: scale(.98); }
.admin-pin-note { margin-top: 10px; font-size: 12px; color: var(--ink-faint); }
.admin-pin-note b { color: var(--ink-soft); }

/* ── 관리소 대시보드 (풀스크린) ── */
.admin-dash {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  z-index: 60; overflow-y: auto;
  max-width: 520px; margin: 0 auto;
}
body.admin-open { overflow: hidden; }
.admin-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  background: var(--accent-grad); color: #fff;
}
.admin-dash-title { margin: 0; font-size: 19px; font-weight: 900; }
.admin-dash-sub { margin: 4px 0 0; font-size: 12px; color: rgba(255,255,255,0.85); }
.admin-dash-exit {
  background: rgba(255,255,255,0.18); color: #fff;
  border: none; border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.admin-dash-body { padding: 16px; }
.ad-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ad-card {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ad-card .ad-k { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ad-card .ad-v { font-size: 28px; font-weight: 900; color: var(--accent-1); line-height: 1; }
.ad-block {
  margin-top: 16px; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 15px;
}
.ad-block-h { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.ad-heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 30px; }
.ad-heat-cell { border-radius: 3px; background: var(--gray-soft); }
.ad-heat-cell.e-여유 { background: var(--green); }
.ad-heat-cell.e-보통 { background: var(--yellow); }
.ad-heat-cell.e-혼잡 { background: var(--red); }
.ad-heat-cell.now { outline: 2px solid var(--accent-1); outline-offset: 1px; }
.ad-heat-axis { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--ink-faint); margin-top: 5px; }
.ad-cover-list { display: flex; flex-direction: column; gap: 8px; }
.ad-cover-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.ad-cover-k { font-weight: 800; color: var(--ink); flex: 0 0 auto; }
.ad-cover-d { color: var(--ink-soft); font-weight: 600; flex: 1 1 auto; text-align: center; font-size: 12px; }
.ad-cover-v { color: var(--accent-1); font-weight: 800; flex: 0 0 auto; }
.ad-demo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-demo-note { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.ad-report-btn {
  width: 100%; background: var(--panel-soft); color: var(--accent-1);
  border: 1.5px dashed #cfc3f5; border-radius: var(--radius-sm);
  padding: 13px; font-size: 14px; font-weight: 800; cursor: pointer;
}
.ad-report-btn:active { transform: scale(.99); }

/* ══════════════════════════════════════════════════════
 *  ★v57 런칭 골격 3종 — 초입 단지 검색 / 정보 탭 / 구독 시트
 * ══════════════════════════════════════════════════════ */

/* ① 헤더 단지 전환 어포던스 */
#brandSwitch { cursor: pointer; }
#brandSwitch:active { transform: scale(.99); }
.brand-caret { font-size: 12px; opacity: 0.8; margin-left: 1px; }
body.gate-open { overflow: hidden; }

/* ① 초입 아파트 검색 오버레이 (멀티단지 진입) */
.complex-gate {
  position: fixed; inset: 0; z-index: 55;
  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  display: flex; justify-content: center; overflow: hidden;
}
.complex-gate[hidden] { display: none; }
.cg-inner {
  position: relative; z-index: 1;            /* ★v95 후면주차 배경 위로 콘텐츠 */
  width: 100%; max-width: 520px; height: 100%;
  display: flex; flex-direction: column;
  padding: 0 18px calc(env(safe-area-inset-bottom, 0) + 8px);
}
.cg-head { flex: 0 0 auto; padding-top: 24px; }

/* ★v103 배경 — 한강 다리 밤 + 다리 위를 지나가는 차들(헤드라이트/미등). 상단 배너로 또렷하게. */
.cg-bridge-bg { position: absolute; top: 0; left: 0; right: 0; height: 138px; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #0a1230 0%, #13204d 48%, #1b2c61 80%, #233879 100%); }
/* 별 */
.cg-bridge-bg::before { content: ''; position: absolute; inset: 0 0 60px 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.9) 50%, transparent),
    radial-gradient(1px 1px at 28% 13%, rgba(255,255,255,.7) 50%, transparent),
    radial-gradient(1px 1px at 47% 27%, rgba(255,255,255,.6) 50%, transparent),
    radial-gradient(1.2px 1.2px at 64% 15%, rgba(255,255,255,.8) 50%, transparent),
    radial-gradient(1px 1px at 83% 24%, rgba(255,255,255,.6) 50%, transparent); }
.cgb-moon { position: absolute; top: 13px; right: 26px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fdf6d8, #efe09a); box-shadow: 0 0 16px 4px rgba(253,246,216,.45); }
/* 케이블 스테이드 다리 — 탑2 + 상판 + 사선 케이블 + 상판 조명 */
.cgb-bridge { position: absolute; left: 0; right: 0; top: 56px; height: 40px; }
.cgb-deck { position: absolute; left: 0; right: 0; top: 16px; height: 7px; background: linear-gradient(180deg, #33488a, #1a2950); box-shadow: 0 2px 0 #0c1530; }
.cgb-pylon { position: absolute; top: -30px; width: 5px; height: 46px; background: linear-gradient(180deg, #445aa0, #1e2c58); border-radius: 1px; }
.cgb-pylon-l { left: 27%; }
.cgb-pylon-r { left: 69%; }
.cgb-pylon::before, .cgb-pylon::after { content: ''; position: absolute; top: 2px; width: 52px; height: 1.4px; background: rgba(150,180,255,.4); }
.cgb-pylon::before { left: 3px; transform-origin: left center; transform: rotate(26deg); }
.cgb-pylon::after { right: 3px; transform-origin: right center; transform: rotate(-26deg); }
.cgb-lights { position: absolute; left: 0; right: 0; top: 13px; height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(255,233,150,.95) 0 2px, transparent 2px 20px); }
/* 다리 위를 지나가는 차 — 오른쪽行=헤드라이트(흰), 왼쪽行=미등(빨강) */
.cgb-car { position: absolute; width: 13px; height: 6px; border-radius: 2px; will-change: transform; }
.cgb-car.cgb-r { top: 64px; background: linear-gradient(90deg, #3a3f4d, #6b7280); animation: cgbRight linear infinite; }
.cgb-car.cgb-r::after { content: ''; position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; border-radius: 2px; background: #fff; box-shadow: 0 0 9px 2px rgba(255,250,210,.9); }
.cgb-car.cgb-l { top: 72px; background: linear-gradient(90deg, #6b7280, #3a3f4d); animation: cgbLeft linear infinite; }
.cgb-car.cgb-l::after { content: ''; position: absolute; left: -3px; top: 1px; bottom: 1px; width: 5px; border-radius: 2px; background: #ff584a; box-shadow: 0 0 8px 1px rgba(255,88,74,.85); }
.cgb-r1 { animation-duration: 5.5s; animation-delay: 0s; }
.cgb-r2 { animation-duration: 7s;   animation-delay: 2.2s; }
.cgb-r3 { animation-duration: 6.2s; animation-delay: 4.1s; }
.cgb-l1 { animation-duration: 6s;   animation-delay: 1.1s; }
.cgb-l2 { animation-duration: 7.6s; animation-delay: 3.6s; }
@keyframes cgbRight { from { transform: translateX(-26px); } to { transform: translateX(560px); } }
@keyframes cgbLeft  { from { transform: translateX(560px); } to { transform: translateX(-26px); } }
/* 강물 + 불빛 반영 */
.cgb-river { position: absolute; left: 0; right: 0; top: 96px; height: 42px; background: linear-gradient(180deg, #15214a, #0d1631); box-shadow: inset 0 6px 14px rgba(0,0,0,.45); }
.cgb-river::before { content: ''; position: absolute; left: 27%; top: 2px; width: 3px; height: 26px; background: linear-gradient(180deg, rgba(255,235,150,.55), transparent); filter: blur(.6px); }
.cgb-river::after { content: ''; position: absolute; left: 69%; top: 2px; width: 3px; height: 26px; background: linear-gradient(180deg, rgba(150,180,255,.45), transparent); filter: blur(.6px); }
/* 하단 페이드 → 본문(라이트) 가독성 확보 */
.cgb-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, transparent, var(--bg-grad-1, #f6f1ea)); }
/* 배너 위 브랜드 가독성 — 흰색 + 기존 차 스트립 숨김 */
.complex-gate .cg-bname { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.complex-gate .cg-brand .cg-anim { display: none; }
@media (prefers-reduced-motion: reduce) { .cgb-car { animation: none; } }

/* ★v95 왼쪽 상단 지역 표시 */
.cg-regiontag { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px 2px;
  padding: 5px 11px 5px 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--accent-1);
  box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--ink); }
.cg-regiontag-ico { font-size: 13px; }
.cg-regiontag b { font-weight: 900; color: var(--accent-1); }
.cg-regiontag-sub { color: var(--ink-soft); font-weight: 600; font-size: 11.5px; }

/* ★v60 브랜드 + 주차장 애니메이션 배경(자동차·주차선) */
.cg-brand {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 9px;
  height: 56px; margin-bottom: 14px; padding: 0 6px; border-radius: 16px;
}
.cg-anim { position: absolute; inset: 0; z-index: 0; opacity: 0.55; pointer-events: none; }
.cga-lines {
  position: absolute; left: 0; right: 0; bottom: 7px; height: 14px;
  background-image: repeating-linear-gradient(90deg, var(--accent-1) 0 3px, transparent 3px 26px);
  opacity: 0.32; animation: cgaLines 3.4s linear infinite;
}
@keyframes cgaLines { from { background-position-x: 0; } to { background-position-x: 26px; } }
.cga-car { position: absolute; bottom: 3px; font-size: 20px; will-change: transform; }
.cga-car1 { animation: cgaDrive 5.5s linear infinite; }
.cga-car2 { animation: cgaDrive 7s   linear infinite 1.6s; }
.cga-car3 { animation: cgaDrive 6.2s linear infinite 3.4s; }
@keyframes cgaDrive { from { transform: translateX(-44px); } to { transform: translateX(560px); } }
.cg-mark { position: relative; z-index: 1; font-size: 26px; line-height: 1; }
.cg-bname { position: relative; z-index: 1; font-weight: 900; font-size: 20px; letter-spacing: -0.5px; color: var(--ink); }

.cg-title { margin: 0 0 7px; font-size: 24px; font-weight: 900; line-height: 1.26; letter-spacing: -0.7px; color: var(--ink); }
.cg-sub { margin: 0 0 13px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.cg-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.cg-search-ico { position: absolute; left: 15px; font-size: 16px; opacity: 0.7; pointer-events: none; }
.cg-search-input {
  width: 100%; padding: 14px 42px; border: 1.5px solid var(--line);
  border-radius: var(--radius-md); background: var(--panel);
  font: inherit; font-size: 15px; color: var(--ink);
}
.cg-search-input:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); }
.cg-clear-btn {
  position: absolute; right: 10px; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: var(--gray-soft);
  color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer;
}

/* ★v60 지역 카테고리 칩(가로 스크롤) */
.cg-regions {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px;   /* ★v86 줄바꿈 — 세종 등 모든 지역 보이게 */
}
.cg-region {
  flex: 0 0 auto; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 13px;
  font-weight: 800; cursor: pointer; white-space: nowrap;
}
.cg-region.on { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
/* ★v86 주소·아파트 검색(Daum) 버튼 */
.cg-postcode-btn { width: 100%; margin-bottom: 11px; padding: 11px; border: 1.5px dashed #b9d0f5; border-radius: var(--radius-sm); background: #eef4fe; color: #2f6bdd; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.cg-postcode-btn:active { transform: scale(.99); }

.cg-listhead { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 8px; }
.cg-listhead-t { font-size: 13px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px; }
.cg-listhead-tag { font-size: 10.5px; font-weight: 800; color: var(--ink-faint); background: var(--gray-soft); padding: 2px 8px; border-radius: 999px; }

/* ★v60 단지 리스트 = 세로 스크롤(스크롤바 노출) */
.cg-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 2px 5px 6px 2px; scrollbar-width: thin; scrollbar-color: #d9cff0 transparent;
}
.cg-list::-webkit-scrollbar { width: 7px; }
.cg-list::-webkit-scrollbar-thumb { background: #d9cff0; border-radius: 999px; }
.cg-list::-webkit-scrollbar-track { background: transparent; }
.cg-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 13px 15px; text-align: left; flex: 0 0 auto;
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); cursor: pointer; font: inherit;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.cg-row:active { transform: scale(.99); }
.cg-row.live { border-color: #bfe6cf; }

/* 순위 배지 */
.cg-rank { flex: 0 0 auto; width: 28px; text-align: center; font-size: 15px; font-weight: 900; color: var(--ink-faint); letter-spacing: -0.5px; }
.cg-rank.top { font-size: 20px; }

.cg-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cg-row-name { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.cg-row-addr { font-size: 11.5px; color: var(--ink-faint); }
.cg-row-meta { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }
.cg-row-cta {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--green-ink);
  background: var(--green-soft); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.cg-row.soon { opacity: 0.92; }
.cg-row-soon {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--ink-faint);
  background: var(--gray-soft); padding: 7px 10px; border-radius: 999px; white-space: nowrap;
}

/* ★v60 만족도 높은 단지 = 골드 테두리 + 반짝임 */
.cg-row.hot { border-color: #f0d27a; animation: cgGlow 2.4s ease-in-out infinite; }
@keyframes cgGlow {
  0%, 100% { box-shadow: 0 0 0 1px #f0d27a, 0 5px 16px rgba(214, 170, 40, 0.14); }
  50%      { box-shadow: 0 0 0 1.5px #f3c948, 0 8px 24px rgba(214, 170, 40, 0.34); }
}
.cg-spark { display: inline-block; animation: cgSpark 1.6s ease-in-out infinite; }
@keyframes cgSpark { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.18); } }

/* ★v58 전국 자유검색 — 시드에 없는 단지 오픈 신청 행 */
.cg-row.request { border-style: dashed; border-color: #cfc3f5; background: var(--panel-soft); }
.cg-row.request .cg-row-name { color: var(--accent-1); }
/* ★v74 카카오 전국 검색 결과 행(실제 아파트) */
.cg-row.remote .cg-rank { color: #2f6bdd; font-size: 15px; }
.cg-remote-meta { color: #2f6bdd; }
.cg-row-req {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--accent-1);
  background: var(--accent-soft); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.cg-empty { margin: 14px 2px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.cg-foot { flex: 0 0 auto; margin: 8px 2px 0; font-size: 11px; color: var(--ink-faint); line-height: 1.55; text-align: center; }

/* ② 정보 탭 — 구독 CTA 카드 */
.info-sub-card {
  margin: 4px 16px 14px; padding: 18px 20px; border-radius: var(--radius);
  color: #fff; background: var(--accent-grad); box-shadow: var(--shadow-hero);
}
.isc-badge {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  background: rgba(255, 255, 255, 0.22); padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.isc-title { margin: 0 0 7px; font-size: 19px; font-weight: 900; letter-spacing: -0.5px; }
.isc-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.isc-btn {
  width: 100%; padding: 13px; border: none; border-radius: var(--radius-sm);
  background: #fff; color: var(--accent-1); font: inherit; font-size: 15px; font-weight: 900; cursor: pointer;
}
.isc-btn:active { transform: scale(.99); }

/* ② 정보 블록 */
.info-block {
  margin: 0 16px 14px; padding: 16px 18px; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: var(--radius-md);
}
.info-block-h { font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.3px; }
.info-rows { display: flex; flex-direction: column; gap: 13px; }
.info-row { display: flex; gap: 11px; align-items: flex-start; }
.ir-ico { font-size: 19px; line-height: 1.25; flex: 0 0 auto; }
.ir-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-text b { font-size: 14px; font-weight: 800; color: var(--ink); }
.ir-text span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
/* ★v73 주차 안내 중요 문구 강조 — 밑줄 + 색(파랑=기능·동작 / 초록=개인정보·안심) */
.ir-em { font-style: normal; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.ir-em.b { color: #2f6bdd; }   /* 파랑 */
.ir-em.g { color: #1f9d57; }   /* 초록 */
.ir-em.o { color: #d98a17; }   /* 주황 — ★v78 색 다양화 */
.ir-em.p { color: #7c5cff; }   /* 보라 */
.ir-em.r { color: #d64550; }   /* 레드(강한 강조) */
.info-notices { display: flex; flex-direction: column; gap: 10px; }
/* ★v76 관리소 공지 = 클릭형(상세 뷰어 팝업) */
.info-notice { display: flex; gap: 11px; align-items: center; padding: 12px 13px; background: var(--panel-soft); border-radius: var(--radius-sm); width: 100%; border: 1px solid transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.info-notice:hover { border-color: var(--line); }
.info-notice:active { transform: scale(.995); }
.in-go { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--accent-1); white-space: nowrap; }
.nv-ico { font-size: 30px; flex: 0 0 auto; }
.nv-body { white-space: pre-line; font-size: 14px; line-height: 1.7; color: var(--ink); margin: 8px 2px 4px; }
.in-ico { font-size: 17px; flex: 0 0 auto; line-height: 1.3; }
.in-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.in-text b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.in-text span { font-size: 12px; color: var(--ink-faint); }
.info-cap { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
.info-foot { margin: 4px 18px 8px; font-size: 11.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ★v62 생활 정보 — 인근 공영주차장(지도 연동) + 관리사무소(전화) */
.life-sub { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 900; color: var(--ink); margin: 2px 0 9px; }
.life-sub.mt { margin-top: 16px; }
.life-cap { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.public-lots { display: flex; flex-direction: column; gap: 8px; }
.lot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; background: var(--panel-soft); border-radius: var(--radius-sm); }
.lot-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lot-info b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.lot-info span { font-size: 11.5px; color: var(--ink-faint); }
.lot-maps { display: flex; gap: 6px; flex: 0 0 auto; }
.lot-map { padding: 8px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.lot-map:active { transform: scale(.97); }
.lot-map.kakao { background: #fee500; color: #3c1e1e; }
.lot-map.tmap { background: #e8f0ff; color: #1f5fd1; border: 1px solid #cfe0ff; }
.mgmt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--panel-soft); border-radius: var(--radius-sm); }
.mgmt-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mgmt-info b { font-size: 14px; font-weight: 800; color: var(--ink); }
.mgmt-info span { font-size: 12px; color: var(--ink-soft); }
.mgmt-call { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; background: var(--green); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mgmt-call:active { transform: scale(.98); }

/* ══════════════════════════════════════════════════════
 *  ★v63 방문자 밴드 + 동 도면 반짝임 + 디지털 광고판
 * ══════════════════════════════════════════════════════ */

/* ① 정문/후문 방문자 현황 밴드(도면·목록 위) */
.gate-band { margin: 12px 16px 0; }
.gate-band-h { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin: 0 2px 8px; }
.gate-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.gate-card {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); cursor: pointer; font: inherit;
}
.gate-card:active { transform: scale(.99); }
.gate-card-top { display: flex; align-items: center; gap: 7px; }
.gate-ico { font-size: 17px; }
.gate-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.gate-card-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.gate-stat-k { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.gate-stat-v { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.gate-stat-v b { font-size: 24px; font-weight: 900; letter-spacing: -0.6px; color: var(--ink); }
.gate-unit { font-size: 12px; }
.gate-na { font-size: 22px; font-weight: 900; opacity: .55; }
.gate-card.s-green, .gate-card.s-yellow, .gate-card.s-red, .gate-card.s-gray { border-width: 1.5px; }
.gate-card.s-green  { border-color: #c4e7d2; background: linear-gradient(180deg, #fcfefd 0%, #f5faf7 100%); --dc-glow: rgba(31, 157, 92, 0.20); }
.gate-card.s-yellow { border-color: #f1dcab; background: linear-gradient(180deg, #fffdf8 0%, #fdf8ee 100%); --dc-glow: rgba(217, 138, 23, 0.20); }
.gate-card.s-red    { border-color: #f3c8c3; background: linear-gradient(180deg, #fffcfb 0%, #fdf4f3 100%); --dc-glow: rgba(224, 87, 79, 0.22); }
.gate-card.s-gray   { border-color: var(--line); }
.gate-card.s-green  .gate-stat-k { color: var(--green-ink); }
.gate-card.s-yellow .gate-stat-k { color: var(--yellow-ink); }
.gate-card.s-red    .gate-stat-k { color: var(--red-ink); }
.gate-card.s-green, .gate-card.s-yellow, .gate-card.s-red {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px var(--dc-glow);
  animation: dcardGlow 3.2s ease-in-out infinite;
}

/* ② 도면 동 박스 신호등 반짝임(테두리 펄스) — 선택/내차/내동 제외 */
.pmap-dong.green:not(.sel):not(.mycar):not(.home)  .pmap-box { animation: pdGlowG 2.8s ease-in-out infinite; }
.pmap-dong.yellow:not(.sel):not(.mycar):not(.home) .pmap-box { animation: pdGlowY 2.8s ease-in-out infinite; }
.pmap-dong.red:not(.sel):not(.mycar):not(.home)    .pmap-box { animation: pdGlowR 2.8s ease-in-out infinite; }
@keyframes pdGlowG { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(31, 157, 92, 0.55)); } }
@keyframes pdGlowY { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(217, 138, 23, 0.55)); } }
@keyframes pdGlowR { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(224, 87, 79, 0.6)); } }

/* ③ 단지 전광판 — ★v70 실제 LED 전광판 2개(독립 베젤·각자 포스터+시계·날씨·안내) */
.signage { margin: 0 16px 14px; }
.signage-label { font-size: 12.5px; font-weight: 900; color: var(--ink-soft); margin: 2px 2px 9px; }
.signage-stage { height: 470px; display: flex; flex-direction: row; gap: 10px; }

/* 독립 전광판 1개 = 다크 베젤 + 화면 + 시계·날씨 미니바 + 안내 티커 */
.signboard {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #15141f 0%, #26243a 100%);
  border-radius: 18px; padding: 8px 8px 9px;
  border: 1px solid rgba(140, 180, 255, 0.18);   /* ★v73 네온 베젤 */
  animation: sgNeon 4.5s ease-in-out infinite;    /* ★v73 은은한 네온 점멸 */
}
@keyframes sgNeon {
  0%, 100% { box-shadow: 0 14px 34px rgba(20, 16, 40, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(90, 140, 255, 0.22), 0 0 0 1px rgba(120, 170, 255, 0.14); }
  50%      { box-shadow: 0 14px 34px rgba(20, 16, 40, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 28px rgba(120, 160, 255, 0.36), 0 0 0 1px rgba(150, 190, 255, 0.26); }
}
.sg-screen { position: relative; flex: 1 1 0; min-height: 0; border-radius: 12px; overflow: hidden; }
.sg-screen::after {   /* ★v73 LED 픽셀·스캔라인 텍스처 (실제 전광판 느낌) */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(255, 255, 255, 0.06) 0.6px, transparent 1px);
  background-size: 100% 3px, 5px 5px;
  opacity: 0.45;
}
.sg-slot {
  position: absolute; inset: 0; color: #fff; text-align: center;
  /* ★v73 전광판 완전 일정화: 3행 고정 그리드 + 상단정렬(top-anchor) → 줄 수 무관 이모지·제목·설명이 항상 같은 Y */
  display: grid; grid-template-rows: 60px 54px 36px; align-content: center; align-items: start; gap: 8px;
  padding: 16px 12px;
  animation: sgIn .5s cubic-bezier(.16, 1, .3, 1);
}
.sg-slot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0));
  pointer-events: none;
}
@keyframes sgIn { from { opacity: 0.45; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }   /* ★v73 전환 중에도 글자 읽히게(가독성): 0→0.45 */
.sg-emoji { font-size: 56px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)); }
.sg-big { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; line-height: 1.22; text-shadow: 0 0 8px rgba(255, 255, 255, 0.55), 0 0 18px rgba(255, 255, 255, 0.28), 0 2px 7px rgba(0, 0, 0, 0.40); word-break: keep-all; }   /* ★v73 네온 글로우 */
.sg-by { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.96); line-height: 1.35; }
.sg-by b { font-weight: 900; }
.sg-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, 0.9); animation: sgProg 15s linear; }
@keyframes sgProg { from { width: 0; } to { width: 100%; } }

/* 각 전광판 하단: 시계·날씨 + 안내 티커 */
.sgb-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 6px 0; }
.sgb-clock { font-size: 17px; font-weight: 900; color: #fff; letter-spacing: 0.5px; }
.sgb-wx { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.sgb-ticker {
  margin: 6px 6px 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 41px;   /* ★v72 안내문 1줄/2줄 무관 항상 2줄 높이 고정 → 화면 출렁임 제거 */
}

.signage-inquiry {
  width: 100%; margin-top: 10px; padding: 13px; border: 1.5px dashed #cfc3f5; border-radius: var(--radius-sm);
  background: var(--panel-soft); color: var(--accent-1); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.signage-inquiry:active { transform: scale(.99); }
/* ★v75 전광판 광고 문의 시트 — 인스타 / 이메일 / 전화(번호 비노출) */
.ad-contacts { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.ad-contact { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-md); border: 1.5px solid #e7ddcb; background: #fff; text-decoration: none; color: var(--ink); }
.ad-contact:active { transform: scale(.99); }
.ad-contact.ig { border-color: #f0b3d0; background: linear-gradient(120deg, #fff5fa, #fff); }
.ad-contact.mail { border-color: #b9d0f5; }
.ad-contact.tel { border-color: #b6e3c6; }
.ad-c-ico { font-size: 22px; flex: 0 0 auto; }
.ad-c-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ad-c-text b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.ad-c-text span { font-size: 12px; color: var(--ink-soft); }
.ad-c-go { flex: 0 0 auto; font-size: 18px; font-weight: 900; color: var(--ink-faint); }

/* ★v77 불법주차 신고 탭 */
.rp-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rp-type { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.rp-type .rp-type-ico { font-size: 15px; }
.rp-type.on { border-color: var(--accent-1); background: var(--accent-soft); color: var(--accent-1); font-weight: 800; }
/* ★v78 신고 유형칩 6색 — 파랑/초록 일색 탈피 */
.rp-type.tone-red { border-color: #f1bdb7; }
.rp-type.tone-amber { border-color: #ecd49a; }
.rp-type.tone-blue { border-color: #b9d0f5; }
.rp-type.tone-purple { border-color: #cabdf7; }
.rp-type.tone-teal { border-color: #aee0c4; }
.rp-type.tone-gray { border-color: #d6d6d6; }
.rp-type.tone-red.on { border-color: #e0574f; background: #fde8e6; color: #c23b33; }
.rp-type.tone-amber.on { border-color: #d98a17; background: #fff2d6; color: #a9720a; }
.rp-type.tone-blue.on { border-color: #2f6bdd; background: #e6effd; color: #2f6bdd; }
.rp-type.tone-purple.on { border-color: #7c5cff; background: #efeaff; color: #6a4cf0; }
.rp-type.tone-teal.on { border-color: #1f9d57; background: #d9f3e3; color: #1f9d57; }
.rp-type.tone-gray.on { border-color: #8a8a8a; background: #ededed; color: #555; }
.rp-photo { display: block; margin-bottom: 10px; cursor: pointer; }
.rp-photo-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; border: 2px dashed #d8cdb8; border-radius: var(--radius-md); background: var(--panel-soft); font-size: 14px; font-weight: 800; color: var(--ink-soft); text-align: center; padding: 12px; }
.rp-photo-inner small { font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.rp-preview { max-width: 100%; max-height: 240px; border-radius: var(--radius-sm); }
.rp-input, .rp-note { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); margin-bottom: 10px; }
.rp-note { resize: vertical; line-height: 1.5; }
.rp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 9px; cursor: pointer; }
.rp-check input { margin-top: 2px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent-1); }
.rp-check b { color: var(--ink); font-weight: 800; }
.rp-submit { width: 100%; padding: 14px; border: none; border-radius: var(--radius-md); background: linear-gradient(135deg, #e0574f, #c23b33); color: #fff; font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: 0 6px 16px rgba(224, 87, 79, 0.3); }
.rp-submit:active { transform: scale(.99); }
.rp-guide { margin-top: 12px; padding: 12px 13px; background: var(--panel-soft); border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.7; color: var(--ink-soft); }
.rp-guide b { color: var(--ink); font-weight: 800; }
.rp-h-cap { font-size: 11px; font-weight: 700; color: var(--ink-faint); margin-left: 6px; }
.rp-list { display: flex; flex-direction: column; gap: 10px; }
.rp-empty { font-size: 13px; color: var(--ink-soft); text-align: center; padding: 16px 8px; }
.rp-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--panel-soft); border-radius: var(--radius-sm); }
.rp-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: #e7ddcb; }
.rp-thumb.noimg { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.rp-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.rp-card-main b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rp-card-sub { font-size: 11.5px; color: var(--ink-faint); }
.rp-st { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.rp-st.new { background: #fde8e6; color: #c23b33; }
.rp-st.mid { background: #fff2d6; color: #a9720a; }
.rp-st.done { background: #d9f3e3; color: #1f9d57; }
/* ★v79 신고탭 확장 — 라벨/통계/구역/사진다중/타임라인 */
.rp-label { font-size: 13px; font-weight: 800; color: var(--ink); margin: 16px 0 8px; }
.rp-label-cap { font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-left: 4px; }
.rp-stats { display: flex; gap: 9px; margin: 0 0 14px; }
.rp-stat { flex: 1 1 0; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 12px 8px; text-align: center; }
.rp-stat b { display: block; font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.rp-stat span { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.rp-stat.prog b { color: #a9720a; }
.rp-stat.done b { color: #1f9d57; }
.rp-zones { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.rp-zone { padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.rp-zone.on { border-color: var(--accent-1); background: var(--accent-soft); color: var(--accent-1); font-weight: 800; }
.rp-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M1 1l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.rp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rp-thumb-wrap { position: relative; width: 72px; height: 72px; }
.rp-thumb-wrap img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.rp-thumb-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #333; color: #fff; font-size: 14px; font-style: normal; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rp-thumb-add { width: 50px; height: 50px; border-radius: 8px; border: 2px dashed #d8cdb8; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--ink-faint); }
.rp-card2 { background: var(--panel-soft); border-radius: var(--radius-sm); padding: 11px 12px; }
.rp-card-top { display: flex; align-items: center; gap: 11px; }
.rp-card-meta { font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; }
.rp-tl { display: flex; align-items: flex-start; margin-top: 12px; }
.rp-tl-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--ink-faint); position: relative; text-align: center; }
.rp-tl-step i { width: 14px; height: 14px; border-radius: 50%; background: #d9d3c5; border: 2px solid #d9d3c5; z-index: 1; }
.rp-tl-step::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: #e2dccd; z-index: 0; }
.rp-tl-step:first-child::before { display: none; }
.rp-tl-step.done i { background: #1f9d57; border-color: #1f9d57; }
.rp-tl-step.done::before { background: #1f9d57; }
.rp-tl-step.cur i { background: #fff; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-tl-step.cur { color: var(--accent-1); font-weight: 900; }
.rp-tl-step.cur::before { background: #1f9d57; }

/* ★v80 관리사무소 — 신고 진입 / 뒤로 / 스피커 / 건의게시판 */
.mgmt-report-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 16px 14px; box-sizing: border-box; width: calc(100% - 32px); padding: 15px 16px; border: none; border-radius: var(--radius-md); background: linear-gradient(135deg, #e0574f, #c23b33); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 6px 16px rgba(224, 87, 79, 0.28); text-align: left; }
.mgmt-report-btn:active { transform: scale(.99); }
.mrb-ico { font-size: 24px; flex: 0 0 auto; }
.mrb-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.mrb-text b { font-size: 15px; font-weight: 900; }
.mrb-text span { font-size: 11.5px; font-weight: 600; opacity: .92; }
.mrb-go { font-size: 20px; font-weight: 900; flex: 0 0 auto; }
.report-back { margin: 0 0 12px; padding: 8px 13px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink); cursor: pointer; }
.bd-h-cap { font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-left: 4px; }
.bd-speaker { display: flex; flex-direction: column; gap: 9px; }
.bd-spk-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #fff4e0, #fff); border: 1.5px solid #f0d28a; }
.bd-spk-ico { font-size: 18px; flex: 0 0 auto; }
.bd-spk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-spk-main b { font-size: 12.5px; font-weight: 800; color: #a9720a; }
.bd-spk-main span { font-size: 12.5px; color: var(--ink); line-height: 1.5; }
.bd-spk-likes { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #c23b33; white-space: nowrap; }
.bd-write-btn { width: 100%; margin-bottom: 12px; padding: 13px; border: 1.5px dashed #cfc3f5; border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--accent-1); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.bd-write-btn:active { transform: scale(.99); }
.bd-list { display: flex; flex-direction: column; gap: 10px; }
.bd-card { position: relative; padding: 13px 13px 11px; border-radius: var(--radius-sm); background: var(--panel-soft); border: 1.5px solid transparent; }
.bd-card.spk { border-color: #f0d28a; background: linear-gradient(135deg, #fffaf0, var(--panel-soft)); }
.bd-spk-badge { display: inline-block; font-size: 10px; font-weight: 800; color: #a9720a; background: #fff1cf; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
.bd-tag { font-size: 12px; font-weight: 800; color: var(--accent-1); margin-bottom: 5px; }
.bd-eg { font-size: 10px; font-weight: 700; color: var(--ink-faint); background: #ece7da; padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.bd-body { font-size: 13.5px; color: var(--ink); line-height: 1.6; }
.bd-body.bold { font-weight: 800; }   /* ★v81 주요(스피커) 글 볼드 */
.bd-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.bd-like { font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.bd-like b { color: var(--ink); }
.bd-like.on { border-color: #e0574f; background: #fde8e6; color: #c23b33; }
.bd-like.on b { color: #c23b33; }
.bd-when { font-size: 11px; color: var(--ink-faint); }
/* ★v83 실제 게시판형 컴팩트 리스트(1행=1글, 공감 우측 요약) */
.bd-list { border-top: 1px solid var(--line); }
.bd-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.bd-row.spk { background: linear-gradient(90deg, #fff6e6, transparent 70%); }
.bd-row-ico { flex: 0 0 auto; width: 22px; text-align: center; font-size: 17px; }
.bd-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-row-title { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row.spk .bd-row-title { font-weight: 800; }
.bd-row-meta { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row-like { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.bd-row-like b { color: #c23b33; }
.bd-row-like.on { border-color: #e0574f; background: #fde8e6; color: #c23b33; }
/* ★v85 글 클릭 → 뷰어 */
.bd-row { cursor: pointer; }
.bd-row:active { background: var(--panel-soft); }
.bd-spk-item { cursor: pointer; }
.bd-view-like { margin-top: 16px; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink-soft); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.bd-view-like b { color: #c23b33; }
.bd-view-like.on { border-color: #e0574f; background: #fde8e6; color: #c23b33; }
/* ★v87 댓글 + 대댓글(뷰어 안) */
.bv-comments { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.bv-c-head { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 11px; }
.bv-c-list { display: flex; flex-direction: column; gap: 13px; }
.bv-c { display: flex; flex-direction: column; gap: 3px; }
.bv-c-text { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.bv-c-when { font-size: 11px; color: var(--ink-faint); }
.bv-c-replybtn { font: inherit; font-size: 11px; font-weight: 800; color: var(--accent-1); background: none; border: none; padding: 0; cursor: pointer; }
.bv-c-reply-item { display: flex; gap: 6px; margin: 7px 0 0 16px; padding: 9px 11px; background: var(--panel-soft); border-radius: 10px; }
.bv-c-arrow { color: var(--ink-faint); flex: 0 0 auto; }
.bv-c-rtext { min-width: 0; }
.bv-c-rform { display: flex; gap: 6px; margin: 8px 0 0 16px; }
.bv-c-rform[hidden] { display: none; }   /* ★v87 답글 누를 때만 열림(hidden이 display:flex에 먹히던 버그 수정) */
.bv-c-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.bv-c-submit, .bv-c-rsend { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--accent-1); border: none; border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.bv-c-form { display: flex; gap: 6px; margin-top: 12px; }
.bv-c-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 0; }
.bd-empty { font-size: 12.5px; color: var(--ink-soft); text-align: center; padding: 12px 8px; }
.bd-loc-row { display: flex; gap: 8px; }
.bd-loc-row .rp-input { margin-bottom: 10px; }
.bd-loc-row #bdDong { flex: 0 0 42%; }
.bd-loc-row #bdLine { flex: 1 1 auto; }
/* 관리소 대시보드 — 신고 접수 현황 */
.admin-reports { display: flex; flex-direction: column; gap: 9px; }
.ar-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ar-thumb { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; background: #e7ddcb; }
.ar-thumb.noimg { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ar-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ar-main b { font-size: 13px; font-weight: 800; }
.ar-main span { font-size: 11px; color: var(--ink-faint); }
.ar-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.ar-btn { font: inherit; font-size: 11.5px; font-weight: 800; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.ar-btn.primary { border-color: #c23b33; background: #e0574f; color: #fff; }

/* ② 광고 슬롯 (단지 인근 로컬 광고 자리) */
.ad-slot {
  margin: 0 16px 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed #cfc3f5; border-radius: var(--radius-md);
  background: var(--panel-soft); position: relative;
}
.ad-slot-tag {
  position: absolute; top: -9px; left: 16px; font-size: 10.5px; font-weight: 800;
  color: var(--ink-faint); background: var(--bg); padding: 1px 8px; border-radius: 999px; letter-spacing: 0.5px;
}
.ad-slot-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ad-slot-body b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ad-slot-body span { font-size: 12px; color: var(--ink-soft); }
.ad-slot-btn {
  flex: 0 0 auto; padding: 9px 13px; border: 1.5px solid var(--accent-1); border-radius: 999px;
  background: none; color: var(--accent-1); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.ad-slot-btn:active { transform: scale(.98); }

/* ③ 구독 시트 */
.sub-plan {
  margin: 6px 0 16px; padding: 18px; border: 1.5px solid #d8ccf7;
  border-radius: var(--radius-md); background: var(--accent-soft); position: relative;
}
.sp-tag {
  position: absolute; top: -10px; left: 16px; font-size: 11px; font-weight: 800;
  color: #fff; background: var(--accent-grad); padding: 3px 11px; border-radius: 999px;
}
.sp-name { margin: 2px 0 8px; font-size: 18px; font-weight: 900; color: var(--ink); }
.sp-price { margin: 0 0 14px; font-size: 15px; color: var(--ink); }
.sp-price b { font-size: 22px; font-weight: 900; color: var(--accent-1); }
.sp-after { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.sp-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sp-bullets li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.sp-bullets li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-ink); font-weight: 900; }
.sub-cta-wrap { margin-bottom: 12px; }
.sub-cta {
  width: 100%; padding: 16px; border: none; border-radius: var(--radius-sm);
  background: var(--accent-grad); color: #fff; font: inherit; font-size: 16px; font-weight: 900;
  cursor: pointer; box-shadow: var(--shadow-hero);
}
.sub-cta:active { transform: scale(.99); }
.sub-foot { margin: 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ★v89 구독 결제 모듈 (soopvault 결제 흐름 참고 · 주차전쟁 라이트 테마) */
.sub-or { margin: 12px 2px; text-align: center; position: relative; }
.sub-or span { position: relative; z-index: 1; background: var(--card, #fff); padding: 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.sub-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line, #ece6f7); }
.pay { margin: 0 0 14px; padding: 16px; border: 1.5px solid #e3dbf6; border-radius: var(--radius-md); background: #faf8ff; }
.pay-amount { padding: 13px 15px; border-radius: var(--radius-sm); background: var(--accent-grad); color: #fff; margin-bottom: 12px; }
.pay-amount-label { display: block; font-size: 12px; font-weight: 700; opacity: .92; }
.pay-amount-val { display: block; font-size: 21px; font-weight: 900; margin: 2px 0 3px; }
.pay-amount-sub { display: block; font-size: 11.5px; opacity: .9; line-height: 1.5; }
.pay-trust { display: block; padding: 10px 13px; margin-bottom: 14px; border-radius: var(--radius-sm); background: var(--green-soft, #e9f7ef); color: var(--green-ink, #1f8a4c); font-size: 12px; line-height: 1.6; word-break: keep-all; }
.pay-trust b { font-weight: 800; }
.pay-step { margin: 0 0 9px; font-size: 14px; font-weight: 900; color: var(--ink); }
.pay-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 13px; }
.pay-method {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 13px 14px; cursor: pointer;
  border: 1.5px solid #ddd; border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--ink); text-align: left;
}
.pay-method .pay-rec { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--accent-1); }
.pay-method.kakao.on { border-color: #f9d000; background: #fffbe6; }
.pay-method.bank.on { border-color: #2bb673; background: #eafaf1; }
.pay-method.toss.on { border-color: #3182f6; background: #eaf2ff; }
.pay-method:not(.on) { opacity: .72; }
.pay-detail { margin-bottom: 16px; }
.pay-steps { margin: 0 0 11px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pay-steps li { font-size: 13px; color: var(--ink); line-height: 1.5; }
.pay-steps b { font-weight: 800; }
.pay-acct { border: 1.5px dashed #cdbff0; border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.pay-acct-row { display: flex; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.pay-acct-row span { width: 60px; color: var(--ink-soft); font-weight: 600; flex: none; }
.pay-acct-row b { font-weight: 800; color: var(--ink); }
.pay-go { display: block; width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; text-align: center; text-decoration: none; }
.pay-go.kakao { background: #fee500; color: #3c1e1e; }
.pay-go.bank { background: #2bb673; color: #fff; }
.pay-go.toss { background: #3182f6; color: #fff; }
.pay-go:active { transform: scale(.99); }
.pay-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 11px; }
.pay-in { width: 100%; padding: 13px 14px; border: 1.5px solid #e0d8f2; border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 14.5px; color: var(--ink); }
.pay-in::placeholder { color: var(--ink-faint); }
.pay-in:focus { outline: none; border-color: var(--accent-1); }
.pay-ta { min-height: 64px; resize: vertical; }
.pay-submit { width: 100%; padding: 15px; border: none; border-radius: var(--radius-sm); background: var(--accent-grad); color: #fff; font: inherit; font-size: 15.5px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-hero); }
.pay-submit:active { transform: scale(.99); }
.pay-foot { margin: 11px 2px 0; font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; text-align: center; }

/* ★v90 관리사무소 서브탭(세그먼트) */
.mseg { display: flex; gap: 6px; margin: 0 0 14px; padding: 4px; background: var(--accent-soft); border-radius: 999px; overflow-x: auto; }
.mseg-btn { position: relative; flex: 1 0 auto; white-space: nowrap; padding: 9px 12px; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); cursor: pointer; }
.mseg-btn.on { background: #fff; color: var(--accent-1); box-shadow: 0 1px 4px rgba(80,60,160,.14); }
.mseg-badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 999px; background: var(--danger, #e6483d); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; vertical-align: top; }
.mseg-badge[hidden] { display: none; }
.mpanel[hidden] { display: none; }

/* ★v90 관리소 알림방송 */
.bc-intro { padding: 13px 14px; margin-bottom: 12px; border-radius: var(--radius-md); background: var(--accent-soft); }
.bc-intro b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 3px; }
.bc-intro span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.bc-toggle-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 11px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.bc-toggle-text { flex: 1; }
.bc-toggle-text b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.bc-toggle-text span { font-size: 11.5px; color: var(--ink-soft); }
.sw { flex: none; width: 46px; height: 27px; border: none; border-radius: 999px; background: #cfc8dd; position: relative; cursor: pointer; transition: background .16s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .16s; }
.sw.on { background: var(--green-ink, #137a45); }
.sw.on i { left: 22px; }
.bc-cats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.bc-cat { padding: 7px 11px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-faint); cursor: pointer; }
.bc-cat.on { color: var(--ink); border-color: #c9bdf0; background: var(--accent-soft); }
.bc-compose-btn { width: 100%; padding: 12px; margin-bottom: 11px; border: 1.5px dashed #c9bdf0; border-radius: var(--radius-md); background: #faf8ff; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--accent-1); cursor: pointer; }
.bc-compose-wrap { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; padding: 13px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.bc-list { display: flex; flex-direction: column; gap: 9px; }
.bc-card { display: flex; gap: 11px; padding: 13px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.bc-card.unread { border-color: #c9bdf0; background: #fbfaff; }
.bc-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--accent-soft); }
.bc-ico.bc-urgent { background: #fdeaea; } .bc-ico.bc-work { background: #fdf2e0; } .bc-ico.bc-life { background: #e6f3ff; }
.bc-ico.bc-parcel { background: #eef0f4; } .bc-ico.bc-event { background: #fde9f3; } .bc-ico.bc-etc { background: var(--accent-soft); }
.bc-main { flex: 1; min-width: 0; }
.bc-top { display: flex; align-items: center; gap: 7px; }
.bc-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.bc-new { font-size: 9.5px; font-weight: 900; color: #fff; background: var(--danger, #e6483d); border-radius: 999px; padding: 1px 6px; }
.bc-body { display: block; margin: 3px 0 6px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.bc-meta { display: block; font-size: 11.5px; color: var(--ink-faint); }
.bc-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--accent-1); background: var(--accent-soft); }
.bc-chip.bc-urgent { color: #c0392b; background: #fdeaea; } .bc-chip.bc-life { color: #1f6fb8; background: #e6f3ff; } .bc-chip.bc-work { color: #b5781a; background: #fdf2e0; }
.bc-empty { padding: 22px 10px; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* ★v94 음성 읽기(TTS) */
.bc-read { margin-left: auto; flex: none; border: none; background: var(--accent-soft); color: var(--accent-1); width: 28px; height: 28px; border-radius: 8px; font-size: 14px; cursor: pointer; line-height: 1; }
.bc-read:active { transform: scale(.92); }
.bc-tts { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.bc-tts-btn { flex: none; padding: 10px 14px; border: none; border-radius: 999px; background: var(--accent-1); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.bc-tts-btn:disabled { background: #cfc8dd; cursor: default; }
.bc-tts-btn:active { transform: scale(.96); }
.bc-tts-voice { flex: 1; min-width: 0; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 12.5px; color: var(--ink); }

/* ★v94 이달의 인테리어 공사 신고 */
.iv-sec { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--line); }
.iv-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.iv-head b { font-size: 15px; font-weight: 900; color: var(--ink); }
.iv-month { font-size: 12px; font-weight: 800; color: var(--accent-1); }
.iv-cap { margin: 0 0 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.55; }
.iv-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 11px; }
.iv-card { display: flex; gap: 11px; padding: 13px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.iv-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: #fdf2e0; }
.iv-main { flex: 1; min-width: 0; }
.iv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iv-where { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.iv-period { flex: none; font-size: 11.5px; font-weight: 700; color: #b5781a; background: #fdf2e0; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.iv-company { display: block; margin: 3px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--accent-1); }
.iv-desc { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.iv-empty { padding: 18px 10px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.iv-add-btn { width: 100%; padding: 12px; margin-bottom: 11px; border: 1.5px dashed #e3b877; border-radius: var(--radius-md); background: #fffaf2; font: inherit; font-size: 13.5px; font-weight: 800; color: #b5781a; cursor: pointer; }
.iv-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; padding: 13px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.iv-form[hidden] { display: none; }
.iv-row2 { display: flex; gap: 9px; }
.iv-row2 .pay-in { flex: 1; min-width: 0; }

/* ★v96 차량 확인(경비·관리소) — 번호판 스캔 */
.ps-intro { padding: 13px 14px; margin-bottom: 12px; border-radius: var(--radius-md); background: var(--accent-soft); }
.ps-intro b { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.ps-staff { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--accent-1); padding: 1px 7px; border-radius: 999px; }
.ps-intro span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.ps-cam { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 16px; margin-bottom: 11px; border: none; border-radius: var(--radius-md); background: var(--accent-1); color: #fff; font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm); }
.ps-cam small { font-size: 11px; font-weight: 600; opacity: .92; }
.ps-cam:active { transform: scale(.985); }
.ps-manual { display: flex; gap: 8px; margin-bottom: 10px; }
.ps-plate { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: 2px; text-align: center; }
.ps-check { flex: none; width: 84px; padding: 0; }
.ps-status { margin: 0 2px 10px; font-size: 12.5px; color: var(--ink-soft); }
.ps-status[hidden] { display: none; }
.ps-result { padding: 14px; margin-bottom: 12px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: #fff; }
.ps-result[hidden] { display: none; }
.psr-top { display: flex; align-items: center; gap: 8px; }
.psr-ico { font-size: 20px; }
.psr-top b { font-size: 16px; font-weight: 900; color: var(--ink); }
.psr-plate { margin-left: auto; font-size: 16px; font-weight: 900; letter-spacing: 2px; color: var(--ink); background: var(--accent-soft); padding: 2px 10px; border-radius: 8px; }
.psr-sub { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.psr-act { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.ps-result.ok { border-color: #9ddcb4; background: #f0fbf4; }
.ps-result.ok .psr-top b { color: var(--green-ink, #137a45); }
.ps-result.home { border-color: #a9cdf5; background: #f0f7ff; }
.ps-result.home .psr-top b { color: #1f6fb8; }
.ps-result.warn { border-color: #f0cf8a; background: #fffaf0; }
.ps-result.warn .psr-top b { color: #b5781a; }
.ps-result.bad { border-color: #f1b6b1; background: #fdf2f1; }
.ps-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.ps-demo-l { font-size: 11.5px; color: var(--ink-faint); }
.ps-chip { padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--ink); cursor: pointer; }
.ps-chip:active { transform: scale(.95); }
.ps-vl { margin-bottom: 12px; }
.ps-vl-head { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.ps-vl-list { display: flex; flex-direction: column; gap: 7px; }
.ps-vl-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.ps-vl-plate { font-size: 15px; font-weight: 900; letter-spacing: 1.5px; color: var(--accent-1); }
.ps-vl-meta { font-size: 12px; color: var(--ink-soft); }
.ps-vl-empty { padding: 14px 10px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* ★v101 — 재난문자 알림방송 + 방송 관리소게이트 + 차량확인 두측면 + 신고 번호판확인 + 입주자대표회의 */
/* 점4: 재난문자형 알림방송 카드(왼쪽 색띠 + 정확한 시각) */
.bc-card.bc-alert { display: block; padding: 13px 14px 13px 16px; border-left: 5px solid var(--accent-1); }
.bc-card.bc-alert.bc-urgent { border-left-color: #e6483d; }
.bc-card.bc-alert.bc-work { border-left-color: #d99a2b; }
.bc-card.bc-alert.bc-life { border-left-color: #1f8fe0; }
.bc-card.bc-alert.bc-parcel { border-left-color: #8a93a5; }
.bc-card.bc-alert.bc-event { border-left-color: #d6489a; }
.bc-card.bc-alert.unread { background: #fbfaff; box-shadow: 0 2px 10px rgba(90,70,160,.10); }
.bc-alert-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.bc-alert-head .bc-ico { width: 26px; height: 26px; border-radius: 8px; font-size: 15px; }
.bc-time { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ink); background: #f1edfb; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.bc-card.bc-alert .bc-title { display: block; font-size: 15.5px; font-weight: 900; color: var(--ink); margin: 0 0 3px; line-height: 1.35; }
.bc-card.bc-alert .bc-body { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.bc-card.bc-alert .bc-read { margin-left: 0; }
/* 점3: 방송 보내기 = 관리소 인증 시에만 */
.bc-admin-zone { display: none; }
body.admin-auth .bc-admin-zone { display: block; }
.bc-admin-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 9px; border-radius: var(--radius-md); background: #ecfdf3; border: 1.5px solid #9ddcb4; font-size: 12.5px; color: var(--green-ink, #137a45); }
.bc-admin-banner b { font-weight: 900; }
.bc-admin-exit { margin-left: auto; padding: 5px 11px; border: 1.5px solid #9ddcb4; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 800; color: var(--green-ink, #137a45); cursor: pointer; }
/* 점2: 차량 확인 두 측면 */
.veh-split-cap { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.veh-sec { padding: 14px; margin-bottom: 14px; border-radius: var(--radius-md); border: 1.5px solid var(--line); }
.veh-sec.veh-guard { background: #f3f8ff; border-color: #b9d6f6; }
.veh-sec.veh-visitor { background: #f1fbf5; border-color: #a6ddbb; }
.veh-sec-h { margin-bottom: 11px; }
.veh-sec-badge { display: inline-block; padding: 4px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 900; }
.veh-sec-badge.guard { background: #1f6fb8; color: #fff; }
.veh-sec-badge.visitor { background: var(--green-ink, #137a45); color: #fff; }
.veh-sec .ps-intro { background: rgba(255,255,255,.6); }
.ps-cam.visitor { background: var(--green-ink, #137a45); margin-bottom: 0; }
/* 점1: 신고 번호판 내부/외부 확인 */
.rp-verify { padding: 13px; margin: 12px 0 18px; border-radius: var(--radius-md); border: 1.5px dashed #c9bdf0; background: #faf8ff; }
.rp-verify-h { font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.rp-verify-cap { margin: 0 0 9px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.rp-verify-row { display: flex; gap: 8px; }
.rp-verify-row .rp-input { flex: 1; min-width: 0; margin: 0; }
.rp-verify-btn { flex: none; padding: 0 16px; border: none; border-radius: 10px; background: var(--accent-1); color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.rp-verify-result { margin-top: 10px; padding: 11px 13px; border-radius: 10px; font-size: 13px; font-weight: 700; border: 1.5px solid var(--line); }
.rp-verify-result[hidden] { display: none; }
.rp-verify-result.inside { background: #f0f7ff; border-color: #a9cdf5; color: #1f6fb8; }
.rp-verify-result.outside { background: #fdf2f1; border-color: #f1b6b1; color: #c0392b; }
.rp-verify-result.bad { background: #fffaf0; border-color: #f0cf8a; color: #b5781a; }
.rpv-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
/* 점5: 입주자대표회의 */
.idae-lead { margin: 0 0 11px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.idae-next-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--accent-soft); }
.idae-next-ico { font-size: 20px; }
.idae-next-txt { font-size: 12.5px; color: var(--ink-soft); }
.idae-next-txt b { display: block; font-size: 14px; font-weight: 900; color: var(--accent-1); margin-bottom: 2px; }

/* ★v90 입대의·LIVE */
.idae-live { margin-top: 2px; }
.idae-nolive { padding: 24px 16px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-md); background: #faf8ff; }
.idae-nolive-ico { font-size: 30px; margin-bottom: 6px; }
.idae-nolive b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 6px; }
.idae-next { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent-1); margin-bottom: 8px; }
.idae-howto { display: block; font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }
.idae-player { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.idae-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.idae-livebadge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 11px; font-weight: 900; color: #fff; background: #e6483d; padding: 3px 9px; border-radius: 999px; }
.idae-live-cap { margin: 7px 2px 0; font-size: 12px; color: var(--ink-soft); }
.idae-vod { display: flex; flex-direction: column; gap: 9px; }
.idae-vcard { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: #fff; font: inherit; cursor: pointer; text-align: left; }
.idae-thumb { position: relative; flex: none; width: 76px; height: 48px; border-radius: 9px; background: linear-gradient(135deg,#5b86ff,#7c5cff); display: grid; place-items: center; }
.idae-play { color: #fff; font-size: 16px; }
.idae-dur { position: absolute; right: 4px; bottom: 4px; font-size: 9.5px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border-radius: 4px; padding: 0 4px; }
.idae-vmain { flex: 1; min-width: 0; }
.idae-vmain b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.idae-vmeta { font-size: 11.5px; color: var(--ink-faint); }
.idae-vtag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--accent-1); background: var(--accent-soft); }
.idae-vgo { flex: none; font-size: 12px; font-weight: 800; color: var(--accent-1); }
.idae-docs { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════════════════════
 *  ★v67 입주민 건의·문의 게시 (관리소 전달)
 * ══════════════════════════════════════════════════════ */
.req-open-btn {
  width: 100%; margin-top: 12px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  border: 1.5px solid var(--accent-1); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-1);
  font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
}
.req-open-btn:active { transform: scale(.99); }
.req-resident { font-size: 11px; font-weight: 800; color: var(--ink-soft); background: var(--panel); padding: 2px 8px; border-radius: 999px; }
.req-list-wrap { margin-top: 12px; }
.req-list-h { font-size: 12.5px; font-weight: 900; color: var(--ink-soft); margin-bottom: 8px; }
.req-list { display: flex; flex-direction: column; gap: 8px; }
.req-item { padding: 11px 13px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.req-item-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.req-badge { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.req-badge.b-q  { background: var(--accent-soft); color: var(--accent-1); }
.req-badge.b-sg { background: var(--yellow-soft); color: var(--yellow-ink); }
.req-who { font-size: 12px; font-weight: 800; color: var(--ink); }
.req-when { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.req-body { font-size: 13px; color: var(--ink); line-height: 1.45; }
.req-status { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--green-ink); }

/* 건의·문의 입력 시트 */
.req-gate { margin: 4px 0 14px; padding: 11px 13px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.req-gate-demo { color: var(--ink-faint); font-weight: 600; }
.req-field { margin-bottom: 14px; }
.req-label { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin-bottom: 7px; }
.req-type-tabs { display: flex; gap: 8px; }
.req-type { flex: 1; padding: 12px 6px; border: 1.5px solid var(--line); background: var(--panel-soft); color: var(--ink-soft); font: inherit; font-weight: 800; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; }
.req-type.on { background: var(--accent-soft); color: var(--accent-1); border-color: var(--accent-1); }
.req-dongho { display: flex; gap: 10px; }
.req-col { flex: 1; }
.req-input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font: inherit; font-size: 15px; color: var(--ink); }
.req-input:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); }
.req-select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.req-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.req-anon { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 16px; cursor: pointer; }
.req-anon input { width: 18px; height: 18px; accent-color: var(--accent-1); }
.req-submit { width: 100%; padding: 16px; border: none; border-radius: var(--radius-sm); background: var(--accent-grad); color: #fff; font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-hero); }
.req-submit:active { transform: scale(.99); }
.req-note { margin: 11px 2px 0; font-size: 11px; color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ★v68 입주민 인증 팝업(단지 코드) */
.req-resident.ok { color: var(--green-ink); background: var(--green-soft); }
.resident-body { padding-top: 4px; }
.resident-desc { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.resident-input { width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--panel); font: inherit; font-size: 18px; font-weight: 800; letter-spacing: 3px; text-align: center; color: var(--ink); }
.resident-input:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); }
.resident-err { margin: 9px 2px 0; font-size: 12.5px; font-weight: 700; color: var(--red-ink); }
.resident-go { width: 100%; margin-top: 14px; padding: 16px; border: none; border-radius: var(--radius-sm); background: var(--accent-grad); color: #fff; font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-hero); }
.resident-go:active { transform: scale(.99); }
.resident-note { margin: 12px 2px 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; }

/* ★v69 건의 카테고리 + 게시 전 안내 박스 */
.req-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.req-cat { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: var(--ink-soft); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.req-cat.on { background: var(--accent-soft); border-color: var(--accent-1); color: var(--accent-1); }
.req-cat-tag { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); padding: 2px 7px; border-radius: 999px; }
.req-guide { margin: 2px 0 16px; padding: 13px 14px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 8px; }
.req-guide-i { font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
.req-guide-i b { color: var(--ink); }

/* ★v107 — 무료/유료 경계선 + 등록 린치핀 (단지온 듀얼브랜드 제거·주차전쟁 단일) */
.info-sub-card.linchpin { border-color: #f59e0b; background: linear-gradient(180deg, rgba(245,158,11,.08), var(--panel)); }
.isc-badge.warn { background: #f59e0b; color: #fff; }
.isc-brand { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.isc-brand b { color: var(--accent-1); }
.sp-free { margin: 6px 0; padding: 8px 10px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 13px; color: var(--accent-1); font-weight: 700; }
.sp-paid-h { margin: 10px 0 4px; font-size: 13px; font-weight: 800; color: #b45309; }
.sp-brand { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.sp-brand b { color: var(--accent-1); }