/* 주차전쟁 주차 현황 v1 — "따뜻한 프렌들리 프리미엄" (막판캐리 직계)
 * 밝은 크림/오프화이트, 파스텔 카드, 보라/블루 그라디언트, 둥글둥글, 친근 대화체.
 */
:root {
  /* 따뜻한 베이스 */
  --bg:        #fbf4ea;        /* 크림 오프화이트 */
  --bg-grad-1: #fdf6ee;
  --bg-grad-2: #f6efe6;
  --panel:     #ffffff;
  --panel-soft:#fff8f0;
  --ink:       #2c2a3a;        /* 따뜻한 잉크 (살짝 보라끼) */
  --ink-soft:  #6f6a82;
  --ink-faint: #645e78;        /* ★v145 인터뷰 P0 접근성 — 크림 배경 대비 WCAG AA 확보(고령/저시력 가독). 기존 #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;
  -webkit-text-size-adjust: 100%; /* iOS가 글자를 임의 확대해 레이아웃이 화면 밖으로 넘치는 것 방지 */
  text-size-adjust: 100%;
  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; }
/* ★v126 도보 분(제목 결합) + 곧 전망(약 1시간 뒤) */
.hero-walk { display: inline-block; font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.95); white-space: nowrap; }
.hero-soon { margin-top: 11px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: #fff;
  background: rgba(255,255,255,0.16); border-radius: 12px; padding: 8px 11px; line-height: 1.4; }
.hero-soon .hero-samp { color: rgba(255,255,255,0.78); font-weight: 600; }
.hero-soon-fill { background: rgba(224,87,79,0.32); }
.hero-soon-free { background: rgba(31,157,92,0.34); }
.hero-soon-same { background: rgba(255,255,255,0.16); }
/* ★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); }

/* ── 지오펜스 자동 입·출차 opt-in 토글 ─────────────── */
.geo-optin { margin-top: 10px; }
.geo-optin-btn {
  width: 100%;
  border: 1.5px solid var(--accent-1);
  background: var(--accent-soft);
  color: var(--accent-1);
  font-size: 14px; font-weight: 800;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: transform .1s ease;
}
.geo-optin-btn:active { transform: scale(.98); }
.geo-optin-btn.on { background: var(--accent-1); color: #fff; }
.geo-optin-state { margin: 6px 2px 0; font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.geo-optin-note { margin: 4px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }

/* ── 만차 알림 배너 (내 동이 거의 만차일 때) ─────────── */
.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; }
/* ★v164 신선도 캡션 — 켜진 동의 '몇 분 전 갱신·제보 기반' 신뢰 표시(인터뷰 #6). 가독 위해 12px·--ink-muted(11px 저대비 금지). */
.dcard-fresh { width: 100%; font-size: 12px; color: var(--ink-faint); margin: 1px 0 5px; padding: 0 2px; font-weight: 600; }

/* ★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; }
/* ★비-시드 단지 동 자유입력(201-215 하드코딩 대체) */
.car-dong-text { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); background: #fff; }
.car-dong-text[hidden] { display: none; }
.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;
}

/* ── ★v127 내 주차위치 메모 (pk_my_spot · 로컬 전용) ───────── */
.car-spot {
  margin: 16px 16px 0;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-sm);
}
.cs-head { display: flex; align-items: flex-start; gap: 11px; }
.cs-ico { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
.cs-head-text { display: flex; flex-direction: column; gap: 3px; }
.cs-head-text b { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px; }
.cs-head-text span { font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; }
.cs-saved {
  display: flex; align-items: center; gap: 11px;
  background: var(--accent-soft); border: 1.5px solid var(--accent-1);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 13px 0 0;
}
.cs-saved-row { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.cs-saved-ico { font-size: 20px; flex: 0 0 auto; }
.cs-saved-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-saved-note { font-size: 15px; font-weight: 900; color: var(--accent-1); letter-spacing: -0.2px; word-break: break-word; }
.cs-saved-age { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.cs-clear {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
  border-radius: 999px; padding: 7px 13px;
}
.cs-clear:active { transform: scale(.97); }
.cs-quick { margin-top: 13px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.cs-chip {
  border: 1.5px solid var(--line); background: var(--panel-soft); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 800; cursor: pointer;
  border-radius: 999px; padding: 7px 13px; transition: all .12s ease;
}
.cs-chip:active { transform: scale(.95); }
.cs-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line); background: var(--panel-soft);
  border-radius: 14px; padding: 13px 14px; font: inherit; font-size: 14.5px; color: var(--ink);
  margin-bottom: 10px;
}
.cs-input:focus { outline: none; border-color: var(--accent-1); background: var(--panel); }
.cs-save {
  width: 100%; min-height: var(--tap); border: none; border-radius: 16px;
  background: var(--accent-grad); color: #fff; font-size: 15.5px; font-weight: 800;
  cursor: pointer; box-shadow: 0 8px 18px rgba(96, 70, 200, 0.26); transition: transform .1s ease;
}
.cs-save:active { transform: scale(.98); }
.cs-note { margin: 12px 2px 0; text-align: center; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }

/* ── ★v127 차빼주세요 (익명 연락 · 서버 미전송) ─────────────── */
.car-move {
  margin: 16px 16px 22px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-sm);
}
.cm-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; }
.cm-ico { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
.cm-head-text { display: flex; flex-direction: column; gap: 3px; }
.cm-head-text b { font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px; }
.cm-head-text span { font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; }
.cm-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line); background: var(--panel-soft);
  border-radius: 14px; padding: 13px 14px; font: inherit; font-size: 15px; color: var(--ink);
  letter-spacing: 0.3px; margin-bottom: 10px;
}
.cm-input:focus { outline: none; border-color: var(--accent-1); background: var(--panel); }
.cm-input-err { border-color: var(--red, #e0463f); background: var(--red-soft, #fdeceb); animation: cmShake .3s; }
@keyframes cmShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.cm-call {
  width: 100%; min-height: var(--tap); border: none; border-radius: 16px;
  background: var(--accent-grad); color: #fff; font-size: 15.5px; font-weight: 800;
  cursor: pointer; box-shadow: 0 8px 18px rgba(96, 70, 200, 0.26); transition: transform .1s ease;
}
.cm-call:active { transform: scale(.98); }

/* ── 익명 신고 핵심 액션 버튼 강조 (큰 사이즈 · 대비 · 반짝임) ───────────── */
/* 적용: #cmCall(차빼주세요) · #rpSubmit(주차위반 신고) · #cpSubmit(생활민원). 익명 액션을 분명히 부각 */
.anon-emph {
  position: relative;
  min-height: 60px;
  font-size: 16.5px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: anonGlow 2.1s ease-in-out infinite;
}
/* '익명' 배지 — 버튼 우상단에 항상 노출 */
.anon-emph::after {
  content: "익명";
  position: absolute;
  top: -9px; right: 12px;
  background: #fff; color: var(--red-ink, #c23b33);
  font-size: 10.5px; font-weight: 900; letter-spacing: 0.2px;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
@keyframes anonGlow {
  0%, 100% { box-shadow: 0 6px 16px rgba(224, 87, 79, 0.30), 0 0 0 0 rgba(255, 215, 0, 0.0); }
  50%      { box-shadow: 0 8px 22px rgba(224, 87, 79, 0.45), 0 0 18px 4px rgba(255, 196, 0, 0.55); }
}
/* 차빼주세요(보라 버튼)는 글로우를 보라 톤으로. ★배지 글자색은 흰색 유지(보라 배경+보라 글자=안 보이던 진범 수정). */
.cm-call.anon-emph { animation-name: anonGlowPurple; }
.cm-call.anon-emph::after { color: #fff; }
@keyframes anonGlowPurple {
  0%, 100% { box-shadow: 0 8px 18px rgba(96, 70, 200, 0.30), 0 0 0 0 rgba(124, 92, 255, 0.0); }
  50%      { box-shadow: 0 10px 24px rgba(96, 70, 200, 0.45), 0 0 18px 4px rgba(124, 92, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .anon-emph { animation: none; }
}

/* ★전달 상태 경고 — '보내기' 누르기 전 현재 상태를 또렷이(작은 회색 금지). 거짓 기대 차단(정직). */
.send-state { margin: 4px 0 8px; padding: 11px 13px; font-size: 13px; font-weight: 800; line-height: 1.5; color: #8a5a00; background: #fff6e2; border: 1.5px solid #f0c24a; border-radius: 11px; }
.send-state b { color: #6b4500; }
/* ★방문차 익명 명확화 — '익명인데 전체 번호 요구' 모순 해소 */
.vf-anon { margin: 6px 0 10px; padding: 8px 11px; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #2b5dd0; background: #eef3ff; border: 1px solid #c7d6fb; border-radius: 9px; }
/* ★익명 보장 공지 — 새 민원/새 신고 위 강조(빨강 테두리·밑줄) */
.anon-guarantee { margin: 2px 16px 14px; padding: 14px 16px; border: 2px solid #e0483d; border-radius: 14px; background: #fff5f4; box-shadow: 0 4px 14px rgba(224,72,61,.14); }
.ag-top { font-size: 16px; font-weight: 900; color: #c92d22; letter-spacing: -0.3px; text-align: center; }
.ag-top u { text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ag-body { margin: 7px 0 0; font-size: 12.5px; font-weight: 700; color: #9a3128; line-height: 1.55; text-align: center; }
.ag-body b { color: #c92d22; }

.cm-result {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--green-soft); border: 1px solid rgba(31, 157, 92, 0.28);
  border-radius: var(--radius-sm); padding: 13px 15px; margin-top: 12px;
}
.cm-result-ico { font-size: 19px; line-height: 1.2; flex: 0 0 auto; }
.cm-result-text { display: flex; flex-direction: column; gap: 3px; }
.cm-result-text b { font-size: 13.5px; font-weight: 900; color: var(--green-ink); }
.cm-result-text span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.cm-result-demo { color: var(--ink-faint) !important; font-weight: 600 !important; }
.cm-note { margin: 12px 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; }
/* ★v114 푸터 법적 링크 + 약관 모달 본문 */
.foot-legal { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
/* ★버전 표기 — 작고 고퀄(은은·자간) · div라 기본크기 커지던 것 보정 */
.foot-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink-soft, #6b6258); text-decoration: underline; cursor: pointer; }
.foot-link:hover { color: var(--ink, #2c2620); }
.legal-body { padding: 4px 2px 8px; }
.legal-sec { padding: 12px 0; border-top: 1px solid var(--line, #ece4d8); }
.legal-sec:first-child { border-top: 0; }
.legal-sec-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--ink, #2c2620); }
.legal-sec-p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft, #5a5249); }

/* ── 하단 탭바 ────────────────────────────────────── */
.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;
}
/* ★v230 측정 전 안내 메시지 = 24열 그리드 한 칸에 뭉개지던 버그 수정 — 전폭 스팬 + 높이 자동(관저동 도면 세로 깨짐 진범). */
.heat-strip:has(.heat-measuring) { height: auto; }
.heat-measuring { grid-column: 1 / -1; }
.heat-cell { border-radius: 4px; background: var(--gray-soft); box-sizing: border-box; cursor: pointer; }
/* ★BUG4: 선택 시각 프레임을 두껍고 또렷하게(테두리+외곽선 이중) — 칸에 정확히 정렬. */
.heat-cell.now {
  border: 3px solid var(--accent-1);
  outline: 1.5px solid #fff;
  outline-offset: -3px;
  border-radius: 5px;
  z-index: 1; position: relative;
  box-shadow: 0 0 0 1px var(--accent-1);
}
.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;
}

/* ★v126 단지 단위 '오늘 시간대별 혼잡(추정)' 미니 추세 — 현황 탭 fold-stats 내. */
.day-trend {
  margin: 12px 16px 0;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 13px 11px;
  box-shadow: var(--shadow-sm);
}
.day-trend[hidden] { display: none; }
.dt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.dt-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.dt-label { font-size: 11.5px; font-weight: 700; color: var(--accent-1); white-space: nowrap; }
.day-trend-strip {
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 26px;
}
.dt-cell { border-radius: 4px; background: var(--gray-soft); box-sizing: border-box; cursor: pointer; align-self: stretch; }
.dt-cell.e-여유 { background: var(--green); }
.dt-cell.e-보통 { background: var(--yellow); }
.dt-cell.e-혼잡 { background: var(--red); }
.dt-cell.now { border: 3px solid var(--accent-1); outline: 1.5px solid #fff; outline-offset: -3px; border-radius: 5px;
  z-index: 1; position: relative; box-shadow: 0 0 0 1px var(--accent-1); }
/* ★v144 스와이프로 선택한 시간 */
.dt-cell.sel { transform: scaleY(1.18); box-shadow: 0 0 0 2px var(--ink); z-index: 2; position: relative; }
#dtStrip { touch-action: pan-y; cursor: ew-resize; }
.dt-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--ink-faint); font-weight: 600; }
.dt-tip { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.45; }
.dt-tip b { color: var(--ink); }

/* 등록 버튼 — 위계: 입/출차(주요) / 제보(보조) */
.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; }
/* ★v127 방문 상태 — 관리실 안내 감 · 출입 빨라져요 */
.vi-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; color: var(--green-ink); background: var(--green-soft); border-radius: 999px; padding: 3px 9px; align-self: flex-start; margin-top: 3px; }
.vi-status em { font-style: normal; font-weight: 700; opacity: .7; }
.vi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink, #137a45); box-shadow: 0 0 0 3px rgba(31, 157, 92, 0.18); }
.vl-cap { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-left: 6px; }
.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; }
/* ★v127 방문 등록 직후 확인 카드 */
.visit-confirm {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--green-soft); border: 1px solid rgba(31, 157, 92, 0.28);
  border-radius: var(--radius-sm); padding: 13px 15px; margin: 4px 2px 12px;
}
.vc-ico { font-size: 19px; line-height: 1.2; }
.vc-text { display: flex; flex-direction: column; gap: 3px; }
.vc-text b { font-size: 13.5px; font-weight: 900; color: var(--green-ink); }
.vc-text span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }

/* ── 알림 센터 시트 ─────────────────────────────────── */
.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; }
/* ★v172 정직: 칸별 점유 측정 안 됨 → 중립(측정 전) 칸. 지어낸 사용중/빈 색칠 대체. */
.pmap-stall-na    { fill: #dfe4ec; stroke: #c4ccd8; stroke-width: .4; }
.lot-stall-na     { fill: #e9edf3; stroke: #c4ccd8; stroke-width: .9; }
.spot-dot.na      { background: #dfe4ec; border: 1px solid #c4ccd8; }

/* 시트 층 토글(지상/지하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; }
.tabbar.tabbar-6 { grid-template-columns: repeat(6, 1fr); }   /* ★v315 탭 6개(🏠 첫화면 탭 추가) */
.tabbar-6 .tab-txt { font-size: 10px; letter-spacing: -0.5px; }
.tabbar-6 .tab-ico { font-size: 20px; }

/* 거대 신호등 히어로 — 첫 화면 상단 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; }
/* ★온보딩(비시드) 요약 카운트 래퍼 — body.no-layout 의 '.fold-stats display:none' 을 피하는 별도 래퍼. .summary/.sum-chip/.legend 는 전역 CSS 재사용. */
.ob-summary { margin: 16px 0 6px; }

/* 방문 흡수 — [내 차] 탭 하위 동작 */
.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-minimal-intro { display:flex; flex-direction:column; gap:3px; margin:2px 0 12px; color:#13213a; }
.ad-minimal-intro b { font-size:19px; font-weight:900; }
.ad-minimal-intro span { font-size:13px; color:#5b687c; }
.ad-minimal-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
.ad-minimal-actions button { min-height:88px; border:1px solid #d9e4f2; border-radius:18px; background:#fff; color:#14223a; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; align-items:center; text-align:left; padding:13px; box-shadow:0 6px 18px rgba(28,61,103,.08); cursor:pointer; }
.ad-minimal-actions button span { grid-row:1/3; font-size:25px; }
.ad-minimal-actions button b { font-size:16px; font-weight:900; }
.ad-minimal-actions button small { font-size:12px; color:#637087; }
.ad-field { display:flex; flex-direction:column; gap:6px; margin-top:10px; font-size:12px; font-weight:800; color:#34445d; }
.ad-field input { width:100%; min-height:46px; box-sizing:border-box; border:1px solid #d6e0ed; border-radius:12px; padding:0 13px; background:#fff; color:#14223a; font:inherit; font-size:14px; }
.ad-field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ad-visitor-row { display:grid; grid-template-columns:minmax(92px,auto) 1fr auto; gap:8px; align-items:center; padding:12px 2px; border-bottom:1px solid #e6edf5; color:#1b2a41; }
.ad-visitor-row:last-child { border-bottom:0; }
.ad-visitor-row b { font-size:14px; }
.ad-visitor-row span,.ad-visitor-row small { font-size:12px; color:#68758a; }
@media (max-width:390px) { .ad-field-row { grid-template-columns:1fr; } .ad-visitor-row { grid-template-columns:1fr; gap:3px; } }
.mm-official-pay { margin:0 0 14px; padding:15px; border:1px solid #bcd9f7; border-radius:16px; background:#f3f9ff; display:grid; gap:9px; color:#17263e; }
.mm-official-pay div { display:flex; flex-direction:column; gap:4px; }
.mm-official-pay b { font-size:15px; font-weight:900; }
.mm-official-pay span,.mm-official-pay small { font-size:12px; line-height:1.5; color:#52627a; }
.mm-official-pay a { display:flex; min-height:44px; align-items:center; justify-content:center; border-radius:12px; background:#1268d8; color:#fff; text-decoration:none; font-size:14px; font-weight:900; }
.mm-official-pay a.secondary { background:#fff; border:1px solid #bfd2ea; color:#23548e; }
.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:
    radial-gradient(130% 80% at 15% -15%, rgba(255,255,255,.40), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #9a7bff 0%, #6f87ff 55%, #5b86ff 100%);
  box-shadow: var(--shadow-hero), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -22px 46px rgba(38,16,108,.22);
  border: 1px solid rgba(255,255,255,.16);
}
.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: linear-gradient(180deg, #ffffff 0%, #f1eeff 100%); color: var(--accent-1);
  font: inherit; font-size: 15px; font-weight: 900; cursor: pointer;
  box-shadow: 0 6px 16px rgba(38,16,108,.18), inset 0 1px 0 #fff;
}
.isc-btn:active { transform: scale(.99); }
/* ★구독 카드(관리소 구독) — 보라 일색에서 분리: 딥 틸(B2B·절약 톤) + 버튼 대비 변경 */
.sub-card {
  background:
    radial-gradient(130% 80% at 15% -15%, rgba(255,255,255,.40), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #15b8a3 0%, #0ea59a 52%, #0c8a78 100%);
}
.sub-card .isc-badge { background: rgba(0,0,0,.18); color: #fff; }   /* ★틸 배경 위 흰26%→대비 약함 수정 */
/* ★틸 카드에선 파랑 강조문(.ir-em.b=#2f6bdd)이 안 보임 → 이 카드 한정 흰색(전역 .ir-em.b는 흰배경 카드용이라 그대로 둠) */
.sub-card .ir-em.b { color: #fff; text-decoration-color: rgba(255,255,255,.7); }
.sub-card .isc-btn {
  background: #ffffff; color: #0b8a76;
  box-shadow: 0 6px 16px rgba(6,60,52,.22), inset 0 1px 0 #fff;
}

/* ② 정보 블록 */
.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: 12.5px; color: var(--ink-faint); line-height: 1.55; }
.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); }

/* ★v128 공지·연락 — 카테고리 칩 + 빈상태(측정 전) + 관리소 연락처 카드 */
.nt-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); }
.nt-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--accent-1); background: var(--accent-soft); white-space: nowrap; }
.nt-chip.nt-urgent { color: #c0392b; background: #fdeaea; }
.nt-chip.nt-work   { color: #b5781a; background: #fdf2e0; }
.nt-chip.nt-water  { color: #1f6fb8; background: #e6f3ff; }
.nt-chip.nt-event  { color: #b5398f; background: #fbe8f5; }
.nt-chip.nt-etc    { color: var(--accent-1); background: var(--accent-soft); }
.info-notice.nt-row { align-items: flex-start; }
.info-notice.nt-row .in-go { align-self: center; }
/* 좌측 색띠(카테고리) */
.info-notice.nt-row { border-left: 4px solid transparent; }
.info-notice.nt-urgent { border-left-color: #e0574f; }
.info-notice.nt-work   { border-left-color: #d99a2b; }
.info-notice.nt-water  { border-left-color: #1f8fe0; }
.info-notice.nt-event  { border-left-color: #d6489a; }
.nt-empty { padding: 22px 16px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-md); background: var(--panel-soft); }
.nt-empty-ico { font-size: 30px; margin-bottom: 6px; }
.nt-empty-h { font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 6px; }
.nt-empty-p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }
.nt-cats-legend { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mgmt-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.mgmt-line .mgmt-k { font-size: 12px; }
.mgmt-empty { padding: 18px 16px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-md); background: var(--panel-soft); }
.mgmt-empty-ico { font-size: 26px; margin-bottom: 5px; }
.mgmt-empty-h { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 5px; }
.mgmt-empty-p { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ══════════════════════════════════════════════════════
 *  ★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-home-mount { margin-top:18px; }
.signage-home-mount .signage { margin-left:0; margin-right:0; }
.signage-model { width:100%; min-height:46px; margin-top:8px; border:1px solid #c9d8e8; border-radius:14px; background:#fff; color:#174f83; font-weight:900; }
.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 불법주차 신고 탭 */
/* ★v311 신고 유형 버튼 정렬(대장 지시) — 가변폭 알약 flex → 2열 균일 그리드(크기 동일·가지런히) */
.rp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rp-type { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 46px; padding: 9px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: center; line-height: 1.25; }
.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 관리사무소 서브탭(세그먼트) */
/* ★v119 6탭 한눈에 — 2열 그리드(가로 스크롤 폐기). 긴 라벨(입주자대표회의)도 들어가게. */
.mseg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 14px; padding: 6px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.mseg-btn { position: relative; white-space: nowrap; padding: 10px 4px; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 11px; font-weight: 800; color: var(--ink-soft); cursor: pointer; text-align: center; letter-spacing: -0.3px; }
.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; }
/* ★관리사무소 칩 = 2줄 4칸(2x4). rpseg(신고 2칸)는 영향 없음 */
#mgmtSeg { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* ★minmax(0,…)=무공백 라벨(입주자대표회의)이 트랙 못 늘려 오버플로우 방지 */
/* ★대장 지시 — 관리소 서브탭 버튼 3D 입체화(평면 2D → 앞으로 튀어나오고 누르는 맛). */
/*   위=밝은 그라데이션+상단 하이라이트, 아래=두꺼운 border-bottom+단색 그림자(다리) → 볼록. :active=translateY로 눌림. */
#mgmtSeg .mseg-btn { white-space: normal; font-size: 13px; font-weight: 700; line-height: 1.28; padding: 7px 3px; word-break: keep-all; overflow-wrap: anywhere; min-height: 50px; display: flex; align-items: center; justify-content: center; letter-spacing: -0.1px; background: linear-gradient(180deg, #ffffff 0%, #efe9fb 100%); border: 1.5px solid #c4b6ee; border-bottom: 4px solid #a68fe0; color: var(--ink); box-shadow: 0 5px 10px rgba(80, 60, 160, .22), inset 0 1.5px 0 rgba(255, 255, 255, .95); transition: transform .09s ease, box-shadow .09s ease, border-bottom-width .09s ease; }
#mgmtSeg .mseg-btn:active { transform: translateY(3px); border-bottom-width: 1.5px; box-shadow: 0 1px 4px rgba(80, 60, 160, .2), inset 0 1.5px 0 rgba(255, 255, 255, .9); }
#mgmtSeg .mseg-btn.on { background: linear-gradient(180deg, #f4efff 0%, #e4d9fb 100%); border-color: var(--accent-1); border-bottom: 4px solid #5b3fd6; color: var(--accent-1); box-shadow: 0 5px 13px rgba(108, 78, 220, .32), inset 0 1.5px 0 rgba(255, 255, 255, .95); }
#mgmtSeg .mseg-pay { color: var(--accent-1); }  /* 관리비 보라 강조 유지(새 흰배경 규칙에 안 묻히게) */
#mgmtSeg .mseg-btn[hidden] { display: none; }  /* ★ID 특이도(1,1,0)가 [hidden] 덮는 잠복버그 방어 */

/* ★v123 신고 탭 세그(2열) + 생활 민원 통계 */
.rpseg { grid-template-columns: repeat(2, 1fr); font-size: 15.5px; }
.rpseg .mseg-btn { font-size: 15.5px; font-weight: 900; padding: 13px 4px; }
.cp-bars { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.cp-bar-row { display: flex; align-items: center; gap: 9px; }
.cp-bar-label { flex: 0 0 96px; font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-bar-track { flex: 1 1 auto; height: 14px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; }
.cp-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2, var(--accent-1))); min-width: 3px; transition: width .4s ease; }
.cp-bar-num { flex: 0 0 auto; font-size: 13px; font-weight: 900; color: var(--ink); min-width: 18px; text-align: right; }
.cp-total { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cp-total b { font-size: 16px; font-weight: 900; color: var(--ink); }
.cp-demo-pill, .cp-stats .cp-demo-pill { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fff2d6; color: #a9720a; font-size: 10.5px; font-weight: 800; vertical-align: middle; }
.cp-submit { background: linear-gradient(135deg, #4b8f6f, #2f7a55); box-shadow: 0 6px 16px rgba(47,122,85,.28); }

/* ★v125 월간 노동절감 리포트(계약 무기) — 정량화 카드 + 시간·인건비 환산 */
.lr-block .info-block-h { margin-bottom: 8px; }
.lr { display: flex; flex-direction: column; gap: 12px; }
/* 헤드라인 — "이번 달 관리소가 약 N시간 덜 일했어요" */
.lr-headline { font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--ink); letter-spacing: -0.3px; }
.lr-headline b { font-size: 22px; font-weight: 900; color: var(--accent-1); }
.lr-est { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.lr-pill { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #fff2d6; color: #a9720a; font-size: 10.5px; font-weight: 800; vertical-align: middle; }
/* 지표 카드 2×2 그리드 */
.lr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lr-card { padding: 11px 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 3px; }
.lr-c-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.lr-c-ico { font-size: 17px; line-height: 1; }
.lr-c-num { font-size: 21px; font-weight: 900; color: var(--ink); letter-spacing: -0.5px; }
.lr-c-num small { font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-left: 1px; }
.lr-c-label { font-size: 14.5px; font-weight: 900; color: var(--ink); }
.lr-c-sub { font-size: 12px; font-weight: 600; color: var(--ink-faint); line-height: 1.45; }
/* 환산 강조 — 시간 + 인건비 */
.lr-conv { padding: 13px 14px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(79,123,255,.10)); border: 1.5px solid var(--accent-soft, #ece6ff); }
.lr-conv-row { display: flex; gap: 10px; }
.lr-conv-item { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lr-conv-k { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.lr-conv-v { font-size: 22px; font-weight: 900; color: var(--accent-1); letter-spacing: -0.5px; line-height: 1.1; }
.lr-conv-v small { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); margin-left: 2px; }
.lr-delta { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.lr-delta b.up { color: #1f9d57; font-weight: 900; }
.lr-delta.neutral { color: var(--ink-faint); }
/* 자동 발송 안내 */
.lr-send { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; padding: 9px 11px; background: var(--panel-soft); border-radius: var(--radius-sm); }
.lr-send b { font-weight: 800; color: var(--ink); }
.lr-foot { margin: 10px 0 0; font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
/* 측정 전 빈상태(그 외 단지) */
.lr-empty { text-align: center; padding: 8px 6px 4px; }
.lr-empty-ico { font-size: 32px; line-height: 1; }
.lr-empty-h { margin-top: 8px; font-size: 15px; font-weight: 900; color: var(--ink); }
.lr-empty-p { margin: 7px 4px 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.lr-empty-p b { font-weight: 800; color: var(--ink); }
.lr-empty-rows { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.lr-er { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lr-er span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lr-er b { font-size: 11.5px; font-weight: 800; color: var(--accent-1); white-space: nowrap; }

/* ★v123 건물 유형 태그(검색 카드·온보딩) */
.cg-type { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-1); font-size: 10.5px; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.cg-type[data-t="오피스텔"] { background: #e6effd; color: #2f6bdd; }
.cg-type[data-t="주상복합"] { background: #efeaff; color: #6a4cf0; }
.cg-type[data-t="빌라"] { background: #d9f3e3; color: #1f9d57; }
.ob-typeline { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.ob-typecap { font-size: 11px; font-weight: 600; color: var(--ink-faint); }

/* ★v90 관리소 알림방송 */
/* ★대장 지시 — 안내 글상자에 테두리를 한 겹 올려 또렷한 입체 박스로(배경에 묻히지 않게). */
.bc-intro { padding: 15px 16px; margin-bottom: 12px; border-radius: var(--radius-md); background: #fff; border: 1.6px solid #d6ccf1; box-shadow: 0 3px 12px rgba(80, 60, 160, .12); }
.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); }
/* ★v128 긴급 방송 강조 — 카드 자체를 더 또렷이(붉은 배경 살짝 + 굵은 좌측띠) */
.bc-card.bc-alert.bc-urgent { border-left-width: 6px; background: #fff6f5; }
.bc-card.bc-alert.bc-urgent.unread { background: #fff0ee; box-shadow: 0 2px 12px rgba(224,72,61,.16); }
.bc-card.bc-alert.bc-urgent .bc-title { color: #c0392b; }
/* ★v128 긴급 미읽음 배너(목록 최상단) */
.bc-urgent-banner { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; padding: 11px 14px; border-radius: var(--radius-md); background: #fdeaea; border: 1.5px solid #f4b6b0; color: #c0392b; font-size: 13px; font-weight: 700; }
.bc-urgent-banner b { font-weight: 900; }
.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.6; white-space: pre-line; }   /* ★v119 줄바꿈 보존 */
.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; }
/* ★v232 번호판·방문차 섹션 밖 테두리 또렷하게(대장 지시) — 2px + 진한 색으로 카드 경계 명확화. */
.veh-sec { padding: 14px; margin-bottom: 14px; border-radius: var(--radius-md); border: 2px solid var(--line); }
.veh-sec.veh-guard { background: #f3f8ff; border-color: #5ea8d8; }
.veh-sec.veh-visitor { background: #f1fbf5; border-color: #3fb581; }
.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; }
/* ★v128 입대의 — 데모 태그 + 빈상태(연동 후 실제) */
.idae-demo-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; color: var(--ink-faint); background: #f1edfb; vertical-align: middle; }
.idae-empty { padding: 20px 16px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--radius-md); background: var(--panel-soft); }
.idae-empty-ico { font-size: 26px; margin-bottom: 5px; }
.idae-empty-h { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 5px; }
.idae-empty-p { font-size: 12px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* ★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; }

/* ═══════════════════════════════════════════════════════
   v329 PRODUCT RESET — 핵심 흐름 중심 모바일 UI
   단지 선택 → 현황 → 내 차 → 기록/신고. 장식·데모 패널은 홈에서 격리한다.
   ═══════════════════════════════════════════════════════ */
:root {
  --bg: #f4f6f8;
  --bg-grad-1: #f7f9fb;
  --bg-grad-2: #eef2f5;
  --panel-soft: #f7f8fa;
  --ink: #17202a;
  --ink-soft: #536171;
  --ink-faint: #687687;
  --line: #dfe5eb;
  --accent-1: #315efb;
  --accent-2: #2347d8;
  --accent-grad: linear-gradient(135deg, #172a52 0%, #244a8f 100%);
  --accent-soft: #eaf0ff;
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 11px;
  --shadow: 0 10px 28px rgba(18, 35, 58, .08);
  --shadow-sm: 0 3px 12px rgba(18, 35, 58, .07);
  --tabbar-h: 68px;
}

html, body { background: #e9edf2; }
#app { background: var(--bg); }

.app-header {
  padding: calc(12px + env(safe-area-inset-top, 0)) 16px 13px;
  border-radius: 0 0 20px 20px;
  background: var(--accent-grad);
  box-shadow: 0 5px 18px rgba(18, 42, 82, .18);
}
.app-header::after { display: none; }
.brand { gap: 10px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 20px; }
.brand-name { font-size: 17px; }
.brand-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 205px; }
.notify-btn { width: 38px; height: 38px; }
.anon-notice {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.35;
  background: rgba(255,255,255,.1);
}

.home-row { margin: 12px 16px 0; }
.home-chip { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); box-shadow: none; }
.hero {
  margin: 12px 16px 0;
  min-height: 128px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, #14264a 0%, #254f97 100%);
  box-shadow: 0 10px 24px rgba(20, 50, 100, .2);
}
.hero-kicker { color: #cbd9ff; }
.hero-title { font-size: 22px; line-height: 1.3; }
.hero::after { opacity: .09; }

.legacy-panel { display: none !important; }
.now-hooks { margin-top: 12px; }
.ob-now { padding: 0 16px; }
.ob-now-h { margin-bottom: 9px; color: var(--ink-soft); font-size: 12px; }
.ob-now-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.ob-now-btn {
  min-height: 86px;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
  align-items: flex-start;
}
.ob-now-btn .onb-ic { font-size: 21px; }
.ob-now-btn b { font-size: 14px; color: var(--ink); }
.ob-now-btn small { color: var(--ink-soft); font-size: 11.5px; }
.nh-report-big {
  margin-top: 10px;
  border-radius: 15px;
  border: 1px solid #f2c6c2;
  background: #fff5f4;
  box-shadow: none;
}
.ob-seg { margin: 12px 16px 0; padding: 13px; border: 1px solid var(--line); background: #fff; border-radius: 15px; }
.viewseg-row { margin-top: 14px; }
.plan-wrap, .map-wrap { margin-top: 10px; }

.tabbar.tabbar-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0));
  padding: 7px 9px env(safe-area-inset-bottom, 0);
  background: rgba(255,255,255,.96);
  border-top: 1px solid #dce2e8;
  box-shadow: 0 -4px 18px rgba(18,35,58,.08);
  backdrop-filter: blur(14px);
}
.tabbar-4 .tab-btn { min-width: 0; border-radius: 12px; gap: 3px; color: #687687; }
.tabbar-4 .tab-btn.on { color: #244fbe; background: #edf2ff; }
.tabbar-4 .tab-ico { font-size: 20px; }
.tabbar-4 .tab-txt { font-size: 11px; font-weight: 750; }

/* v337 — 주차 레이더가 가운데 핵심, 단지소식은 보조 탭 */
.tabbar.tabbar-5 {
  grid-template-columns:repeat(5,minmax(0,1fr));
  height:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom,0));
  padding:8px 5px env(safe-area-inset-bottom,0);
  overflow:visible;
  background:rgba(255,255,255,.97) !important;
  border-top:1px solid #dce2e8 !important;
  box-shadow:0 -6px 24px rgba(15,41,71,.10);
}
.tabbar-5 .tab-btn { min-width:0; border-radius:12px; gap:3px; color:#687687; }
.tabbar-5 .tab-btn:not(.tab-btn-main).on { color:#244fbe; background:#edf2ff; }
.tabbar-5 .tab-btn:not(.tab-btn-main) .tab-ico { font-size:19px; }
.tabbar-5 .tab-txt { font-size:10.5px; font-weight:800; white-space:nowrap; }
.tab-btn-main { z-index:2; overflow:visible; padding-top:1px; color:#174b7e !important; }
.tab-btn-main::before { display:none !important; }
.tab-main-orb {
  width:58px; height:58px; margin-top:-27px;
  display:grid; place-items:center; position:relative;
  border:5px solid rgba(255,255,255,.98); border-radius:22px;
  background:linear-gradient(145deg,#1559b7,#0f2947);
  box-shadow:0 9px 20px rgba(15,66,132,.30),inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .16s ease,box-shadow .16s ease;
}
.tab-btn-main .tab-main-orb .tab-ico { font-size:25px; filter:none; transform:none; }
.tab-btn-main .tab-txt { margin-top:0; color:#174b7e; font-size:11px; font-weight:950; }
.tab-btn-main.on .tab-main-orb { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 25px rgba(15,66,132,.36),0 0 0 3px #dfeaff; }
.tab-btn-main:active .tab-main-orb { transform:translateY(-1px) scale(.97); }
.tab-main-badge { position:absolute; top:-5px; right:-5px; min-width:21px; height:21px; padding:0 5px; display:grid; place-items:center; border:2px solid #fff; border-radius:999px; background:#e8473f; color:#fff; font-style:normal; font-size:10px; font-weight:950; }
.tab-main-badge[hidden] { display:none; }
.tab-news-badge { position:absolute; top:5px; right:calc(50% - 24px); min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border:2px solid #fff; border-radius:999px; background:#e8473f; color:#fff; font-style:normal; font-size:9px; font-weight:950; }
.tab-news-badge[hidden] { display:none; }
.mgmt-intro { padding-top:16px; }
.mgmt-eyebrow { display:block; margin-bottom:4px; color:#1559b7; font-size:11px; font-weight:950; letter-spacing:.04em; }
.signage-mount-late { margin-top:24px; padding-top:18px; border-top:1px solid #e3e9f1; }

@media (max-width:350px) {
  .tabbar-5 .tab-txt { font-size:9.5px; }
  .tab-main-orb { width:54px; height:54px; }
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible { outline: 3px solid rgba(49,94,251,.38); outline-offset: 2px; }

@media (max-width: 370px) {
  .brand-sub { max-width: 160px; }
  .ob-now-row { gap: 8px; }
  .ob-now-btn { min-height: 82px; padding: 11px 10px; }
}

/* ★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 {
  color: var(--ink);
  border: 1px solid #f6c87a;
  background:
    radial-gradient(130% 80% at 15% -15%, rgba(255,206,128,.32), rgba(255,255,255,0) 58%),
    linear-gradient(165deg, #fffdf8 0%, #fff2dd 100%);
  box-shadow: 0 10px 26px rgba(245,158,11,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
.info-sub-card.linchpin .isc-title { color: var(--ink); }
.info-sub-card.linchpin .isc-desc { color: var(--ink-soft); }
.info-sub-card.linchpin .isc-desc b { color: var(--ink); }
.info-sub-card.linchpin .isc-btn {
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 7px 18px rgba(124,92,255,.34), inset 0 1px 0 rgba(255,255,255,.3);
}
.isc-badge.warn { background: #f59e0b; color: #fff; }
.isc-brand { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,.85); }
.isc-brand b { color: #fff; }
.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); }

/* ★전국화 온보딩 카드 — 검색 입장 단지(도면/실데이터 없음)의 정직한 '데이터 수집 중' 상태.
 *  HARD 정직: 점유율·여유대수·가짜 도면 없음. 측정 전 칩 + 안내 + 실행 2개. (프리미엄 토큰) */
.onboarding-card {
  margin: 4px 0 2px;
  padding: 26px 22px 22px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.onboarding-card .ob-back {
  display: block; width: fit-content; margin: -10px 0 12px;
  background: rgba(0,0,0,.05); border: 0; border-radius: 999px;
  padding: 7px 13px; font-size: 13px; font-weight: 700; color: var(--ink-2, #667); cursor: pointer;
}
.onboarding-card .ob-back:active { transform: scale(.97); }
.onboarding-card .ob-head {
  display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 12px;
}
.onboarding-card .ob-title {
  font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; line-height: 1.35;
}
.onboarding-card .ob-chip {
  display: inline-block; font-size: 12px; font-weight: 800;
  color: var(--yellow-ink); background: var(--yellow-soft);
  border: 1px solid #f0d9a8; padding: 4px 11px; border-radius: 999px;
}
.onboarding-card .ob-body {
  margin: 6px auto 18px; max-width: 320px;
  font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--ink-soft);
}
.onboarding-card .ob-cta {
  display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto;
}
.onboarding-card .ob-btn {
  min-height: var(--tap); padding: 0 16px;
  border: 1.5px solid var(--accent-soft); border-radius: var(--radius-md);
  background: var(--panel-soft); color: var(--accent-1);
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.onboarding-card .ob-btn:active { transform: scale(.98); }
.onboarding-card .ob-btn-primary {
  background: var(--accent-grad); color: #fff; border-color: transparent;
  box-shadow: 0 7px 18px rgba(124,92,255,.30), inset 0 1px 0 rgba(255,255,255,.3);
}
.onboarding-card .ob-foot {
  margin: 16px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-faint);
}

/* ★v124 온보딩 실측 지도 — 검색 단지의 실제 위치·동 배치(카카오 2D 지도). 가짜 archetype 배치도 폐기. */
.onboarding-card .ob-plan {
  margin: 4px auto 14px; max-width: 440px;
}
.onboarding-card .ob-map {
  display: block; width: 100%; height: 220px;
  border-radius: 14px; border: 1.5px solid var(--line); overflow: hidden;
  background: #f3ede3;   /* 지도 로드 전 배경(실측 도면과 동일 계열) */
}
.onboarding-card .ob-map.ob-map-fallback {
  display: flex; align-items: center; justify-content: center;
}
.onboarding-card .ob-map-fb {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px; text-align: center;
}
.onboarding-card .ob-map-fb-ico { font-size: 30px; opacity: .8; }
.onboarding-card .ob-map-fb-msg {
  margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--ink-soft);
}
.onboarding-card .ob-map-fb-btn {
  min-height: 38px; padding: 0 15px;
  border: 1.5px solid var(--accent-soft); border-radius: var(--radius-md);
  background: var(--panel); color: var(--accent-1);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.onboarding-card .ob-map-fb-btn:active { transform: scale(.98); }
.onboarding-card .ob-plan-cap {
  margin: 8px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.5;
  color: var(--ink-faint); text-align: center;
}

/* ★전국화: 측정 전(no-layout) 단지에선 현황(주차현황) 탭의 '도면 전용' 컨트롤만 숨긴다.
 *  ※ 전광판(.signage)·관리소 게시판은 view-parking/view-mgmt 에 있어 절대 영향받지 않음. */
body.no-layout #view-map .floorseg,
body.no-layout #view-map .viewseg-row,
body.no-layout #view-map #timeSlider,
body.no-layout #view-map .gate-band,
body.no-layout #view-map .fold-stats { display: none; }

/* ════ ★v118 전기·관리비 (전기 누진세 계산기 + 관리소 운영 투명성) ════ */
.cost-card {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 16px 15px; margin: 0 0 16px; box-shadow: var(--shadow-sm);
}
.cost-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cost-h-ico { font-size: 18px; }
.cost-h b { font-size: 16px; font-weight: 900; color: var(--ink); letter-spacing: -0.3px; }
.cost-h-sub { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); flex-basis: 100%; }
/* ★v149 관리비 납부 강조(최상단 카드 + 칩) */
.cost-pay-card { border: 2px solid var(--accent-1); background: linear-gradient(180deg, #f4f1ff, #ffffff); box-shadow: 0 6px 18px rgba(108,92,231,.14); }
.cost-pay-badge { font-size: 11px; font-weight: 800; color: #fff; background: var(--accent-1); border-radius: 999px; padding: 3px 10px; margin-left: auto; }
.mseg-pay { color: var(--accent-1); font-weight: 900; }
.mseg-pay.on { color: var(--accent-1); }   /* ★활성 배경이 흰색이라 흰 글자=안보임 버그 수정 */

/* ── 전기 계산기 입력 ── */
.elec-in { margin: 0 0 12px; }
.elec-l { display: block; font-size: 13px; font-weight: 800; color: var(--ink-soft); margin: 0 0 8px; }
.elec-l b { color: var(--accent-1); font-size: 16px; }
.elec-slider { width: 100%; accent-color: var(--accent-1); height: 28px; }
.elec-num-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.elec-kwh-num { width: 110px; }
.elec-num-unit { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.elec-toggles { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 12px; background: var(--panel-soft); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.elec-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.elec-chk input { width: 18px; height: 18px; accent-color: var(--yellow); }
.elec-chk em { font-style: normal; font-weight: 600; color: var(--ink-faint); font-size: 11.5px; }
.elec-prev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.elec-prev-l { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.elec-prev-in { width: 110px; }

/* ── 전기 계산기 출력 ── */
.elec-total-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-sm); margin: 0 0 10px; }
.elec-total-card.cool { background: var(--green-soft); }
.elec-total-card.warm { background: var(--yellow-soft); }
.elec-total-card.hot  { background: var(--red-soft); }
.elec-total-l { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.elec-total-l em { font-style: normal; font-weight: 700; color: var(--ink-faint); }
.elec-total-v { font-size: 28px; font-weight: 900; letter-spacing: -0.6px; color: var(--ink); }
.elec-diff { font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: var(--radius-sm); margin: 0 0 10px; }
.elec-diff.up   { background: var(--red-soft);   color: var(--red-ink); }
.elec-diff.down { background: var(--green-soft); color: var(--green-ink); }
.elec-diff.same { background: var(--gray-soft);  color: var(--gray-ink); }
.elec-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--gray-soft); margin: 4px 0 6px; }
.elec-bar .eb { display: block; height: 100%; }
.elec-bar .eb.t1 { background: var(--green); }
.elec-bar .eb.t2 { background: var(--yellow); }
.elec-bar .eb.t3 { background: var(--red); }
.elec-bar-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.elec-bar-legend .ebl { font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.elec-bar-legend .ebl::before { content: ''; width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.elec-bar-legend .ebl.t1 { color: var(--green-ink); } .elec-bar-legend .ebl.t1::before { background: var(--green); }
.elec-bar-legend .ebl.t2 { color: var(--yellow-ink); } .elec-bar-legend .ebl.t2::before { background: var(--yellow); }
.elec-bar-legend .ebl.t3 { color: var(--red-ink); } .elec-bar-legend .ebl.t3::before { background: var(--red); }
.elec-tbl { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 12.5px; }
.elec-tbl th { text-align: left; font-weight: 800; color: var(--ink-faint); padding: 6px 6px; border-bottom: 1.5px solid var(--line); font-size: 11px; }
.elec-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-weight: 700; }
.elec-tbl td:last-child, .elec-tbl th:last-child { text-align: right; }
.elec-tbl tr.on td { color: var(--ink); background: var(--accent-soft); }
.elec-bd { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1.5px dashed var(--line); }
.elec-bd li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.elec-bd li span { color: var(--ink-soft); font-weight: 700; }
.elec-bd li b { color: var(--ink); font-weight: 800; }
.elec-cap { margin-top: 12px; }

/* ── 관리소 운영 투명성 ── */
.cost-databar { font-size: 12px; font-weight: 800; color: var(--yellow-ink); background: var(--yellow-soft);
  border: 1.5px solid rgba(217,138,23,.40); border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 14px; line-height: 1.5; }
.mc-total { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--accent-soft); border-radius: var(--radius-sm); margin: 0 0 14px; }
.mc-total-l { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.mc-total-v { font-size: 26px; font-weight: 900; letter-spacing: -0.6px; color: var(--ink); }
.mc-total-diff { font-size: 12.5px; font-weight: 800; }
.mc-total-diff.up   { color: var(--red-ink); }
.mc-total-diff.down { color: var(--green-ink); }
.mc-total-diff.same { color: var(--gray-ink); }
.mc-list { display: flex; flex-direction: column; gap: 11px; margin: 0 0 16px; }
.mc-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 5px; }
.mc-row-k { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mc-row-v { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.mc-row-v em { font-style: normal; color: var(--ink-faint); font-weight: 700; font-size: 11px; }
.mc-row-bar { height: 9px; border-radius: 999px; background: var(--gray-soft); overflow: hidden; }
.mc-bar-fill { display: block; height: 100%; border-radius: 999px; }
.mc-bar-fill.c-a { background: #7c5cff; } .mc-bar-fill.c-b { background: #4f7bff; }
.mc-bar-fill.c-c { background: #1f9d5c; } .mc-bar-fill.c-d { background: #d98a17; }
.mc-bar-fill.c-e { background: #e0574f; } .mc-bar-fill.c-f { background: #2bb3a3; }
.mc-bar-fill.c-g { background: #b06bff; } .mc-bar-fill.c-h { background: #6f7bd6; }
.mc-bar-fill.c-i { background: #c47d2c; } .mc-bar-fill.c-j { background: #8b859a; }
.mc-sub { margin: 0 0 16px; padding: 14px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mc-sub-h { font-size: 13.5px; font-weight: 900; color: var(--ink); margin: 0 0 10px; }
.mc-sub-cap { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.mc-labor { display: flex; flex-direction: column; gap: 8px; }
.mc-labor-row { display: grid; grid-template-columns: 1.3fr 0.6fr 1fr; align-items: baseline; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mc-labor-role { font-size: 13px; font-weight: 800; color: var(--ink); }
.mc-labor-n { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.mc-labor-total { font-size: 13px; font-weight: 800; color: var(--ink); text-align: right; }
.mc-labor-avg { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.mc-labor-avg em { font-style: normal; }
.mc-note { margin-top: 10px; }
.mc-pay { margin: 4px 0 14px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card-soft, #fafafa); }
.mc-pay-btn { width: 100%; padding: 14px; 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; }
.mc-pay-head { margin-bottom: 11px; }
.mc-pay-head b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); }
.mc-pay-sub { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.45; }
/* ★ 한큐 납부 — 이번달 우리집 금액 크게 + 항목내역 토글 */
.mc-pay-amt { margin: 10px 0 8px; }
.mc-pay-amt-lbl { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.mc-pay-amt-big { font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.mc-pay-amt-big em { font-size: 16px; font-weight: 800; font-style: normal; color: var(--ink-soft); margin-left: 3px; }
.mc-pay-amt-empty { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); padding: 9px 11px; background: var(--panel-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); line-height: 1.5; }
.mc-pay-reglink { font: inherit; font-size: 12.5px; font-weight: 900; color: var(--accent-1); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.mc-pay-bd-toggle { display: block; width: 100%; margin: 0 0 10px; padding: 8px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent-1); background: #f4f1ff; border: 1px solid #d7cdef; border-radius: var(--radius-sm); cursor: pointer; }
.mc-pay-bd-toggle:active { transform: scale(.99); }
.mc-pay-bd-toggle[hidden] { display: none; }
.mc-pay-bd { margin-bottom: 6px; }
.mc-pay-bd[hidden] { display: none; }
.mc-pay-methods { margin-bottom: 12px; }
.mc-pay-mtag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.mc-pay-detail { margin-bottom: 13px; }
.mc-pay-detail:empty { display: none; }
.mc-pay-go { margin-top: 2px; }
.mc-pay-note { text-align: center; margin-top: 9px; line-height: 1.45; }

/* ════ ★v122 우리집 관리비 (동·호 + 동의 · 로컬전용 · 주차와 분리) ════ */
/* ── 등록 폼 ── */
.mm-reg { display: flex; flex-direction: column; gap: 11px; }
.mm-reg-h { font-size: 14.5px; font-weight: 900; color: var(--ink); }
.mm-reg-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mm-in { width: 92px; }
.mm-in-suf { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-left: -2px; }
.mm-consent { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.mm-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-1); flex: 0 0 auto; }
.mm-consent span { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.mm-consent em { font-style: normal; font-weight: 600; color: var(--ink-faint); }
.mm-reg-btn { width: 100%; }
.mm-reg-btn:disabled { opacity: .5; cursor: not-allowed; }
.mm-cap { margin-top: 2px; line-height: 1.5; }
/* ★v134 원탭 납부정보(payee) 폼 — 관리소 발급분만, 이 기기에만 */
.mm-payee { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mm-payee-h { font-size: 13.5px; font-weight: 900; color: var(--ink); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mm-payee-cap { font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.mm-payee-row { display: flex; align-items: center; gap: 7px; }
.mm-in-wide { flex: 1 1 auto; min-width: 0; width: auto; }
.mm-payee-w { width: 100%; }
.mm-payee-save { width: 100%; }
.mm-payee-note { margin-top: 2px; line-height: 1.5; }
.mc-pay-amtq { font-weight: 700; color: var(--ink-faint); }
/* ★v151 우리집 관리비 내역서(추정) — 단지 차트처럼 우리집 것도 한눈에 */
.hh-bd { margin: 4px 0 12px; padding: 13px 14px; background: #f4f1ff; border: 1.5px solid #d7cdef; border-radius: 14px; display: flex; flex-direction: column; gap: 7px; }
.hh-bd-empty { margin: 4px 0 12px; padding: 13px 14px; background: var(--panel-soft); border: 1px dashed var(--line); border-radius: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.5; }
.hh-bd-h { font-size: 13.5px; font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.hh-bd-tag { font-size: 10.5px; font-weight: 800; color: #8a5a08; background: #ffe6a6; border-radius: 999px; padding: 2px 8px; }
.hh-bd-total { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.hh-bd-total b { font-size: 17px; color: var(--ink); }
.hh-row { display: flex; flex-direction: column; gap: 3px; }
.hh-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hh-k { font-size: 12px; font-weight: 700; color: var(--ink); }
.hh-v { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.hh-v em { font-style: normal; font-weight: 600; color: var(--ink-faint); font-size: 11px; }
.hh-bar { height: 7px; background: #e8e3f5; border-radius: 999px; overflow: hidden; }
.hh-bar-f { display: block; height: 100%; border-radius: 999px; }
.hh-bd-note { margin-top: 3px; line-height: 1.5; }
/* ★v151 전기 IoT 실시간 연동 안내 */
.elec-iot { margin: 9px 0 0; padding: 10px 12px; font-size: 12px; font-weight: 700; color: #2b5dd0; background: #eef3ff; border: 1px solid #c7d6fb; border-radius: 11px; line-height: 1.55; }

/* ── 등록 후: 우리집 카드 ── */
.mm-home { display: flex; flex-direction: column; gap: 13px; }
.mm-home-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mm-home-id { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.mm-home-id b { color: var(--ink); font-weight: 900; }
.mm-home-mine { font-size: 11px; font-weight: 800; color: var(--accent-1); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.mm-home-acts { display: flex; gap: 12px; }
.mm-link { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink-faint); cursor: pointer; }
.mm-link.danger { color: var(--red-ink); }

.mm-bill { padding: 14px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.mm-bill-h { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); margin: 0 0 6px; }
.mm-amt { margin: 0 0 12px; }
.mm-amt-v { font-size: 26px; font-weight: 900; letter-spacing: -0.6px; color: var(--ink); }
.mm-amt-empty { font-size: 13.5px; font-weight: 700; color: var(--ink-faint); }
.mm-diff { font-size: 12.5px; font-weight: 800; margin-top: 7px; }
.mm-diff.up   { color: var(--red-ink); }
.mm-diff.down { color: var(--green-ink); }
.mm-diff.same { color: var(--gray-ink); }
.mm-diff em { font-style: normal; opacity: .85; }
.mm-bill-in { display: flex; gap: 8px; align-items: stretch; }
.mm-amt-in { flex: 1 1 auto; min-width: 0; }
/* ★v135 저장 버튼이 .pay-submit(width:100%)를 물려받아 flex 행에서 카드 밖으로 넘치던 버그 수정 — 콘텐츠 폭 고정 */
.mm-amt-save { flex: 0 0 auto; width: auto; padding: 13px 20px; }

.mm-avg { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 12px; background: var(--panel-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.mm-avg-l { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.mm-avg-v { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-align: right; }
.mm-note { line-height: 1.5; margin-top: 2px; }
.mc-foot { text-align: center; margin-top: 4px; }

/* ★ 전국 실측 멀티소스 도면 — 검색 단지 온보딩 오버레이(동이름/주차/등급/거리뷰).
   measuring 단지에는 절대 렌더되지 않음(real/partial 일 때만 .ob-meta-info 생성). */
.ob-dong-label {
  background: rgba(43,108,255,.92); color: #fff; font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 8px; white-space: nowrap; box-shadow: 0 1px 4px rgba(43,108,255,.4);
}
.ob-dong-label b { font-weight: 800; }
.onboarding-card .ob-meta-info { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ob-meta-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-grade {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: #fff;
}
.ob-grade.gb-on { color: #1c7c46; border-color: #bfe6cf; background: #effaf3; }
.ob-grade.gb-est { color: #9a6b00; border-color: #f2dca0; background: #fff7e4; }
.ob-grade.gb-none { color: var(--ink-faint); background: #f6f4f0; }
.ob-grade.gb-rv { color: #2b5dd0; border-color: #c7d6fb; background: #eef3ff; }
.ob-meta-line { font-size: 12.5px; color: var(--ink); margin: 0; }
.ob-meta-line.muted { color: var(--ink-soft); }
.ob-meta-line b { font-weight: 800; }
.ob-rv-btn {
  margin-top: 4px; align-self: flex-start; font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 10px; border: 1px solid #c7d6fb; background: #eef3ff;
  color: #2b5dd0; cursor: pointer;
}
.ob-rv-btn:active { transform: scale(.98); }
.ob-rv-btn-wide { align-self: stretch; width: 100%; text-align: center; margin-top: 8px; }
/* ★v135 OSM 자동 배치도(전 단지·키 불필요) */
.ob-autolot { margin: 6px 0 12px; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: #f7f5ef; }
.ob-autolot .al-load { padding: 26px 16px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.ob-autolot .al-cap { padding: 9px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--panel-soft); border-bottom: 1px solid var(--line); line-height: 1.45; }
.ob-autolot .al-svg { display: block; width: 100%; height: auto; }
/* ★v190 배치도 핀치줌+팬 스테이지 (2손가락 핀치·1손가락 드래그·+/-·더블탭) */
.ob-autolot .al-stage { position: relative; overflow: hidden; touch-action: none; background: #f6f3ec; }
.ob-autolot .al-svgwrap { width: 100%; transform-origin: 0 0; will-change: transform; }
.ob-autolot .al-svgwrap .al-svg { width: 100%; }
.ob-autolot .al-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; }
.ob-autolot .al-zoom button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.94); font-size: 21px; font-weight: 800; line-height: 1; color: var(--ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.ob-autolot .al-zoom button:active { transform: scale(.94); }
/* ★v137 동 클릭(신선마을처럼 동 눌러 확인) */
.al-dong { cursor: pointer; }
.al-dong rect { transition: fill .12s; }
.al-dong:hover rect, .al-dong:focus rect { fill: #d6f3dc; outline: none; }
.al-dong:focus { outline: none; }
.al-dong.on rect { fill: #ffe6a6; stroke: #e0a32a; stroke-width: 2.6; }
/* ★v143 동 번호 칩(대단지=동마다 잘라보기) */
.ob-autolot .al-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--line); max-height: 132px; overflow-y: auto; }
.al-chip { padding: 6px 11px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink); cursor: pointer; white-space: nowrap; }
.al-chip:active { transform: scale(.96); }
.al-chip.on { background: #ffe6a6; border-color: #e0a32a; color: #8a5a08; }
.ob-autolot .al-info { padding: 11px 13px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--panel-soft); border-top: 1px solid var(--line); line-height: 1.5; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.al-info-st { color: #c98a1a; font-weight: 800; }
/* ★측정-전 단지 동 클릭 → 그 동 아키타입 주차 도면(P칸·입구) */
.al-lot { padding: 12px 13px; border-top: 1px solid var(--line); background: #fffdf9; }
.al-lot[hidden] { display: none; }
.al-lot-h { font-size: 14px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.al-lot-tag { display: inline-block; margin-left: 5px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; color: #c98a1a; background: #fff4d9; border-radius: 999px; vertical-align: middle; }
.al-lot .lot-svg { display: block; width: 100%; max-width: 360px; margin: 0 auto; }
.al-lot-foot { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--ink-faint); line-height: 1.5; text-align: center; }
/* ★전 단지 공통 — 도면/목록 + 지상/지하 토글 */
.al-views { display: flex; gap: 8px; padding: 10px 13px 0; }
.al-vtog { display: flex; flex: 1; gap: 4px; padding: 4px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; }
.al-vbtn, .al-fbtn { flex: 1; padding: 8px 4px; border: none; border-radius: 999px; background: transparent; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.al-vbtn.on, .al-fbtn.on { background: #fff; color: var(--accent-1); box-shadow: 0 1px 4px rgba(80,60,160,.16); }
.al-list { max-height: 320px; overflow-y: auto; padding: 10px 13px 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.al-list[hidden] { display: none; }
.al-lrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.al-lrow:active { transform: scale(.99); }
.al-lrow-d { font-size: 13px; font-weight: 900; color: var(--ink); }
.al-lrow-s { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.al-under { margin: 10px 13px 12px; padding: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; background: var(--panel-soft); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.al-under[hidden] { display: none; }
.al-rep { padding: 7px 12px; border: none; border-radius: 999px; background: var(--accent-grad, #6c5ce7); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.al-rep:active { transform: scale(.97); }
.al-rep-g { background: #2f9e54; }
.al-rep-r { background: #d9534f; }
/* ★v138 위성 위 동 번호 라벨(Leaflet divIcon) — 위성 배경에서도 읽히게 흰글자+검정외곽 */
.lot-dong-label { font-size: 12px; font-weight: 900; color: #fff; text-align: center; line-height: 16px; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; pointer-events: none; }
.ob-rv-pane { margin-top: 8px; width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: #eee; }
.ob-rv-fb { font-size: 12px; color: var(--ink-soft); padding: 16px; text-align: center; }
/* ★핵심 후크 정적 블록(라이브 단지 주차현황) — gate-band(좌우16)와 정렬 */
.now-hooks { padding: 0 16px; margin-top: 6px; }
.now-hooks[hidden] { display: none; }
/* ★v146 측정 전 즉시작동 킬러 후크 행(콜드스타트 우회) */
.ob-now { margin: 6px 0 12px; }
.ob-now-h { font-size: 13px; font-weight: 900; color: var(--ink); margin: 0 0 8px; }
.ob-now-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-now-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border: 1.5px solid #c7d6fb; border-radius: 14px; background: #f3f7ff; cursor: pointer; text-align: center; }
.ob-now-btn .onb-ic { font-size: 22px; line-height: 1; }
.ob-now-btn b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.ob-now-btn small { font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; }
.ob-now-btn:active { transform: scale(.97); }
/* ★v150 세그먼트 특수칸 제보(전기차·장애인·임산부·노상) */
.ob-seg { margin: 6px 0 12px; }
.ob-seg-h { font-size: 13px; font-weight: 900; color: var(--ink); margin: 0 0 8px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.ob-seg-cap { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.ob-seg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ob-seg-btn { padding: 11px 4px; border: 1.5px solid #d7cdef; border-radius: 12px; background: #fff; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink); cursor: pointer; }
.ob-seg-btn:active { transform: scale(.96); }
.ob-seg-btn.done { background: #d6f3dc; border-color: #3ba14f; color: #1f7a3a; }
/* ★v147 빈상태(측정전) 신호등 점등 행동유도 */
.ob-wake { margin: 6px 0 12px; padding: 13px 14px; background: #fff7e8; border: 1.5px solid #f0d79a; border-radius: 14px; }
.ob-wake-h { font-size: 13.5px; font-weight: 900; color: #8a5a08; margin: 0 0 6px; }
.ob-wake-p { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; margin: 0 0 9px; }
.ob-wake-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--ink); }
.ob-wake-steps span { background: #fff; border: 1px solid #f0d79a; border-radius: 999px; padding: 4px 9px; }
.ob-wake-steps .ob-wake-arr { background: none; border: none; padding: 0; color: #c08a2a; }

/* ★v130 구독 도입 안내(개인 송금 외형 제거 · 인터뷰 P0) — 개인 계좌/QR 대신 정식 계약·세금계산서 안내 블록. */
.pay-contract { background: #f6f8ff; border: 1px solid #dbe4ff; border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.pay-contract-h { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: #1a2b4a; }
.pay-contract-p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #54617a; }

/* ★v183 자리 현황 카드(비-시드 전 단지) — K-apt 실측 총면수 + 층별 혼잡/여유(측정전) + 제보로 켜짐. */
.cc-card { margin: 8px 0 12px; padding: 13px 14px; background: #fbfaff; border: 1.5px solid #e2dbf6; border-radius: 15px; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.cc-h-title { font-size: 15px; font-weight: 900; color: var(--ink); }
.cc-h-badge { font-size: 11.5px; font-weight: 800; color: #8b93a3; background: #f0eef7; border-radius: 999px; padding: 4px 10px; }
.cc-h-badge.live { color: #1f7a3a; background: #d6f3dc; }
.cc-meta { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 10px; }
.cc-row { padding: 11px 12px; border-radius: 13px; border: 1.5px solid #e7e2f2; background: #fff; margin: 0 0 9px; }
.cc-row.s-green { border-color: #bfe6cd; background: #f1fbf5; }
.cc-row.s-yellow { border-color: #f0dca6; background: #fdf7ea; }
.cc-row.s-red { border-color: #f2c3c3; background: #fdeeee; }
.cc-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; }
.cc-fl { font-size: 15px; font-weight: 900; color: var(--ink); }
.cc-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 900; color: #8b93a3; }
.cc-st i { width: 8px; height: 8px; border-radius: 50%; background: #b7bccb; display: inline-block; }
.cc-st.s-green { color: #2f9e5f; } .cc-st.s-green i { background: #2f9e5f; }
.cc-st.s-yellow { color: #c9871a; } .cc-st.s-yellow i { background: #e0a52d; }
.cc-st.s-red { color: #d64a4a; } .cc-st.s-red i { background: #d64a4a; }
.cc-row-v { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.cc-row-v b { font-size: 20px; color: var(--accent-1); }
.cc-cap-big { font-size: 18px; font-weight: 900; color: var(--ink); }
.cc-of { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.cc-msr { font-size: 12px; font-weight: 700; color: #8b93a3; }
.cc-fresh { display: block; font-size: 11px; font-weight: 700; color: #2f9e5f; margin: -4px 0 8px; }
.cc-row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-btn { padding: 11px 4px; border: 1.5px solid #d7cdef; border-radius: 11px; background: #fff; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer; }
.cc-btn:active { transform: scale(.96); }
.cc-btn.cc-empty.done { background: #d6f3dc; border-color: #3ba14f; color: #1f7a3a; }
.cc-btn.cc-full.done { background: #fde0e0; border-color: #d64a4a; color: #b23636; }
.cc-foot { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; margin: 2px 0 0; }
.cc-live-note { font-size: 11.5px; font-weight: 700; color: #2f9e5f; }
.cc-live-note b { color: #2f9e5f; }
.cc-struct { font-size: 12.5px; font-weight: 800; color: #1d5e4f; background: #e9f5f0; border: 1px solid #cfe6dd; border-radius: 10px; padding: 8px 11px; margin: 0 0 9px; }
.cc-note { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin: 2px 0 8px; line-height: 1.5; }

/* ★v189 키불요 실지도 링크 버튼 — 네이버/카카오 지도로 이 단지 바로 열기 */
.ob-maplinks { display:flex; gap:8px; margin:8px 0 6px; }
.ob-maplink { flex:1; text-align:center; padding:11px 8px; border-radius:11px; font-size:13.5px; font-weight:800; text-decoration:none; border:1.5px solid transparent; }
.ob-maplink.naver { background:#03c75a; color:#fff; }
.ob-maplink.kakao { background:#fee500; color:#3c1e1e; }
.ob-maplink:active { opacity:.85; }

/* ★v190 동 신호등 정보바 정렬 — 비었어요/꽉찼어요 2칸 균등 (기존 flex-wrap로 버튼 삐뚤던 것 수정) */
.ob-autolot .al-info { display: block; }
.al-info-sig { margin-bottom: 4px; }
.al-info-guide { font-size: 12px; color: #645e78; margin-bottom: 9px; line-height: 1.45; }
.al-rep-row { display: flex; gap: 8px; }
.al-rep-row .al-rep { flex: 1; padding: 13px 8px; font-size: 14px; border-radius: 12px; }

/* ★v192 실측 랭킹 캡션 + 전광판 정직 라벨 */
.cg-listhead-cap { display:block; font-size:11px; color:#8890a0; font-weight:700; margin-top:2px; }
.signage-label-cap { font-size:10.5px; color:#9aa3b1; font-weight:700; margin-left:6px; }
/* ★v192 전국 주차 여유 랭킹(실측) 라인 */
.cc-rank { margin:4px 0 2px; padding:8px 11px; background:#fff8e6; border:1px solid #f3e3b3; border-radius:10px; font-size:12.5px; color:#7a5a12; }
.cc-rank b { color:#b07a00; }
.cc-rank-sub { color:#a08a4e; font-size:11.5px; }
/* ★v193 통합지하 매트릭스(동 엘베코어 × 지하층) — 신축 전면지하 단지 */
.al-ux-head { font-size:14px; color:#2b3240; margin:2px 0 4px; }
.al-ux-src { font-size:11px; color:#8890a0; font-weight:700; margin-left:4px; }
.al-ux-cap { font-size:12px; color:#645e78; line-height:1.6; margin-bottom:8px; }
.al-mx { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:4px 0 2px; }
.al-mxt { border-collapse:separate; border-spacing:3px; width:100%; }
.al-mxh { font-size:11px; color:#645e78; font-weight:700; padding:2px 3px; text-align:center; white-space:nowrap; }
.al-mxh-d { text-align:left; color:#8890a0; }
.al-mxd { font-size:12px; color:#2b3240; font-weight:700; padding:2px 6px 2px 2px; white-space:nowrap; }
.al-mxc { display:block; width:100%; min-width:52px; height:34px; border-radius:9px; border:1.5px solid #b7bec9; font-size:13px; line-height:1; cursor:pointer; color:#8890a0; }
.al-mxc.on { box-shadow:0 0 0 2px rgba(106,90,223,.35); }
.al-mx-add { border:1.5px dashed #b7bec9; background:#fff; border-radius:9px; font-size:11px; color:#645e78; padding:6px 8px; cursor:pointer; white-space:nowrap; }
.al-mx-leg { font-size:11px; color:#8890a0; margin:6px 0 8px; }
.al-mx-info { background:#f7f8fc; border:1px solid #e7e9f2; border-radius:12px; padding:12px 13px; font-size:13px; color:#645e78; margin-top:6px; }
.al-flchips { display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
.al-flchip { border:1.5px solid #d9dce8; background:#fff; border-radius:999px; padding:5px 12px; font-size:12px; color:#645e78; cursor:pointer; }
.al-flchip.on { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   ★v197 탭 4개 대수술 — 출입기록부·내차 실속화·관리소 채움·신고 하이라이트
   (분쟁PDF·외부차대장·방문링크·채증·차빼 3단계·카메라 원탭·QR·브리핑·슬롯)
   ═══════════════════════════════════════════════════════════════ */
/* ── 탭③ 분쟁 증거 PDF 폼 ── */
.dp-form { margin-top:10px; }
.dp-row { display:flex; gap:6px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.dp-in { flex:1 1 auto; min-width:0; }
.dp-in.dp-time { flex:0 1 108px; }
.dp-tilde { color:#8890a0; font-weight:700; }
/* ── 탭③ 외부차 신고 누적 대장 ── */
.ol-list { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.ol-row { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7e9f2; border-radius:12px; padding:10px 12px; cursor:pointer; text-align:left; width:100%; }
.ol-row.on { border-color:#d9534f; background:#fff5f4; }
.ol-plate { font-weight:800; font-size:15px; color:#2b2540; letter-spacing:.5px; }
.ol-cnt { margin-left:auto; font-size:12px; font-weight:800; color:#d9534f; background:#fbe3e1; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.ol-meta { font-size:11.5px; color:#8890a0; }
.ol-empty { font-size:12.5px; color:#8890a0; background:#f7f8fc; border:1px dashed #d9dce8; border-radius:12px; padding:14px 12px; text-align:center; }
.ol-actions { display:flex; gap:6px; margin-top:8px; }
.ol-btn { flex:1; }
.ol-btn.ol-ghost { background:#fff; color:#4a3fb5; border:1.5px solid #cfc7f5; }
.ol-btn:disabled { opacity:.45; cursor:not-allowed; }
/* ── 탭③ 채증 모드(관리소 PIN 인증 시에만) ── */
.gc-zone { display:none; }
body.admin-auth .gc-zone { display:block; margin-top:12px; border:1.5px dashed #6a5adf; border-radius:14px; padding:12px; background:#f8f6ff; }
.gc-head { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.gc-head b { font-size:14.5px; color:#2b2540; }
.gc-head span { font-size:12px; color:#645e78; }
.gc-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.gc-chip { border:1.5px solid #d9dce8; background:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; color:#645e78; cursor:pointer; }
.gc-chip.on { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; font-weight:700; }
.gc-shot { border-color:#6a5adf; }
.gc-last { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7e9f2; border-radius:12px; padding:9px 11px; margin-top:8px; font-size:12.5px; color:#2b2540; }
.gc-last img { width:52px; height:40px; object-fit:cover; border-radius:8px; }
.gc-guard-note { margin-top:8px; }
/* ── 탭② 카메라 원탭 내차위치 ── */
.cs-photo { border:1.5px solid #e2e5f0; border-radius:14px; padding:11px; margin:10px 0; background:#fbfbfe; }
.cs-photo-btn { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; border:none; border-radius:12px; padding:14px 12px; background:linear-gradient(135deg,#6a5adf,#8a7bf0); color:#fff; font-size:15.5px; font-weight:800; cursor:pointer; }
.cs-photo-btn small { font-size:11.5px; font-weight:500; opacity:.9; }
.cs-photo-view { margin-top:8px; }
.cs-photo-view img { width:100%; max-height:190px; object-fit:cover; border-radius:12px; display:block; }
.cs-photo-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:#645e78; margin-top:6px; }
.cs-photo-meta b { color:#4a3fb5; }
.cs-photo-del { margin-left:auto; border:1px solid #e6c9c6; background:#fff5f4; color:#b0433f; border-radius:999px; padding:3px 10px; font-size:11.5px; cursor:pointer; }
.csp-floors { margin-top:8px; }
.cs-chip.csp-floor.on { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; font-weight:800; }
/* ── 탭② 차빼 3단계 상태 바 + EV + 조용시간 ── */
/* ★대장 지시 ④ — 충전 버튼이 차빼 버튼에 붙어 위로 쏠려 보이던 것: 간격 넓혀 균형. */
.cm-ev { background:#eafaf3; border:1.5px solid #bfe8d2; color:#1e7a4e; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; margin-top:16px; min-height:60px; }
.cm-ev small { font-size:11px; font-weight:500; color:#4a9a72; }
.cm-qr { background:#fff; border:1.5px dashed #cfc7f5; color:#4a3fb5; }
.cm-steps { display:flex; align-items:center; gap:0; margin:10px 0 4px; }
.cm-step { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; color:#a8a2b8; position:relative; }
.cm-step i { width:22px; height:22px; border-radius:50%; background:#eef1f5; border:2px solid #d9dce8; display:flex; align-items:center; justify-content:center; font-size:11px; font-style:normal; color:#8890a0; }
.cm-step.done { color:#1e7a4e; font-weight:700; }
.cm-step.done i { background:#d6f3dc; border-color:#3ba14f; color:#1e7a4e; }
.cm-step.cur { color:#4a3fb5; font-weight:800; }
.cm-step.cur i { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; animation:pulse 1.6s infinite; }
.cm-step + .cm-step::before { content:''; position:absolute; left:-50%; top:11px; width:100%; height:2px; background:#e2e5f0; z-index:-1; }
.cm-steps-note { font-size:11.5px; color:#8890a0; margin:2px 0 6px; }
.cm-sms-fb { display:block; width:100%; text-align:center; background:#fff8ec; border:1.5px solid #f0d9a8; color:#8a6116; border-radius:12px; padding:10px; font-size:13px; font-weight:700; text-decoration:none; margin-top:6px; }
.cm-quiet { background:#fff8ec; border:1.5px solid #f0d9a8; border-radius:12px; padding:11px 12px; margin-top:8px; font-size:12.5px; color:#645e78; }
.cm-quiet b { color:#8a6116; }
.cm-quiet-btns { display:flex; gap:6px; margin-top:8px; }
.cm-quiet-btns .cm-call { margin:0; flex:1; font-size:12.5px; padding:9px 6px; }
/* ── 탭② 자동입출차 신뢰 장치 ── */
.geo-optin-fixed { font-size:12px; color:#4a3fb5; background:#f4f1ff; border-radius:10px; padding:8px 10px; margin-top:8px; }
.geo-data-btns { display:flex; gap:6px; margin-top:8px; }
.geo-mini-btn { flex:1; border:1.5px solid #d9dce8; background:#fff; border-radius:10px; padding:8px; font-size:12.5px; color:#645e78; cursor:pointer; font-weight:700; }
.geo-mini-btn.geo-danger { border-color:#e6c9c6; color:#b0433f; background:#fff8f7; }
.geo-data-panel { background:#f7f8fc; border:1px solid #e7e9f2; border-radius:12px; padding:10px 12px; margin-top:8px; font-size:12px; color:#645e78; }
.geo-data-panel .gd-row { display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px dashed #e7e9f2; }
.geo-data-panel .gd-row:last-child { border-bottom:none; }
.geo-data-panel .gd-k { font-weight:700; color:#2b2540; }
/* ── 탭④ 출근길 30초 브리핑 ── */
.bc-brief { background:#fff; border:1.5px solid #e7e9f2; border-radius:14px; padding:11px 12px; margin:10px 0; }
.bc-brief-h { font-size:14px; font-weight:800; color:#2b2540; display:flex; flex-direction:column; gap:1px; margin-bottom:7px; }
.bc-brief-cap { font-size:11.5px; font-weight:500; color:#8890a0; }
.bc-brief-list { display:flex; flex-direction:column; gap:5px; }
.bcb-row { display:flex; align-items:center; gap:8px; background:#f7f8fc; border-radius:10px; padding:8px 10px; font-size:13px; color:#2b2540; }
.bcb-row.urgent { background:#fff1f0; border:1px solid #f2c7c4; }
.bcb-row.urgent .bcb-t { color:#b0433f; font-weight:800; }
.bcb-ico { flex:0 0 auto; }
.bcb-t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.bcb-when { font-size:11px; color:#a8a2b8; white-space:nowrap; }
.bcb-listen { border:1px solid #cfc7f5; background:#f4f1ff; color:#4a3fb5; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.bcb-empty { font-size:12.5px; color:#8890a0; text-align:center; padding:10px 6px; }
/* ── 탭④ 게시판 정렬·아카이브 ── */
.bd-controls { display:flex; gap:6px; margin:8px 0; align-items:center; }
.bd-sort { border:1.5px solid #d9dce8; background:#fff; border-radius:999px; padding:6px 12px; font-size:12px; color:#645e78; cursor:pointer; }
.bd-sort.on { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; font-weight:800; }
.bd-archive { margin-left:auto; border:none; background:none; color:#6a5adf; font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; }
/* ── 탭④ 점검 방문 슬롯 ── */
.slot-label { font-size:13px; font-weight:800; color:#2b2540; margin:8px 0 6px; }
.slot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; }
.slot-chip { border:1.5px solid #d9dce8; background:#fff; border-radius:10px; padding:9px 4px; font-size:12.5px; color:#645e78; cursor:pointer; font-weight:600; }
.slot-chip.on { background:#efeaff; border-color:#6a5adf; color:#4a3fb5; font-weight:800; }
/* ── 탭④ 대형폐기물 ── */
.bulky-form { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bulky-gov { display:block; text-align:center; border:none; background:linear-gradient(135deg,#12b886,#0ca678); color:#fff; border-radius:12px; padding:13px 10px; font-size:14px; font-weight:800; text-decoration:none; box-shadow:0 3px 10px rgba(16,150,110,.28); }
/* ── 탭④ 입대의 안건 3줄 요약 양식(미리보기) ── */
.idae-tmpl { background:#fbfbfe; border:1.5px dashed #cfc7f5; border-radius:14px; padding:12px; margin-top:8px; }
.idae-tmpl-tag { display:inline-block; font-size:10.5px; font-weight:800; color:#8a6116; background:#fff3d6; border-radius:999px; padding:2px 9px; margin-bottom:6px; }
.idae-tmpl-t { display:block; font-size:14px; color:#2b2540; margin-bottom:4px; }
.idae-tmpl-3l { margin:0 0 6px; padding-left:18px; font-size:12.5px; color:#645e78; }
.idae-tmpl-3l li { margin:2px 0; }
.idae-tmpl-won { display:inline-block; font-size:12px; font-weight:800; color:#4a3fb5; background:#f4f1ff; border-radius:999px; padding:3px 10px; }
/* ── 탭⑤ 생활민원 타임라인(주차 타임라인 재사용 보조) ── */
.cp-tl-note { font-size:11px; color:#8890a0; margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════
   ★v198 — 전 단지 동별 카드 · P 펄스 · 유형 배지 · 트레이싱 스튜디오
   ═══════════════════════════════════════════════════════════════════ */
/* 유형 배지(검색 행·단지 헤더) — 실측(K-apt) 출처 라벨 동봉 */
.cg-ptype { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:#4a3fb5; background:#f4f1ff; border:1px solid #e2dcf9; border-radius:999px; padding:2px 8px; white-space:nowrap; vertical-align:middle; }
.cg-ptype .cg-ptype-src { font-style:normal; font-size:9.5px; font-weight:700; color:#8a83b8; }
.cg-ptype[data-pt="지상형"] { color:#8a6d1a; background:#fdf6e3; border-color:#f1e4bb; }
.cg-ptype[data-pt="혼합형"] { color:#1f6d43; background:#eaf7ef; border-color:#cfe9da; }
.cg-ptype[data-pt="미상"] { color:#645e78; background:#f4f6fa; border-color:#e3e6ee; }
.ob-ptype-cap { font-size:12px; font-weight:700; color:#645e78; margin:4px 0 8px; padding:0 2px; }

/* 전 단지 동별 카드(목록 뷰 일반화) — 신선마을 dcard 스타일 재사용 + 행/버튼 보강 */
.al-cards-cap { font-size:12px; color:#645e78; line-height:1.5; padding:6px 2px; }
.al-dong-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; margin-top:6px; }
.al-dong-grid .dcard-namebtn { background:none; border:none; padding:0; cursor:pointer; text-align:left; }
.dcg-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 4px; border-top:1px dashed var(--line, #e3e6ee); font-size:12px; }
.dcg-row .dcg-k { font-weight:800; color:#2b3240; flex:0 0 auto; }
.dcg-row .dcg-cap { color:#645e78; font-size:11px; }
.dcg-row .dcg-st { margin-left:auto; font-weight:800; font-size:11px; color:#645e78; }
.dcg-row .dcg-st.s-green { color:#1f6d43; }
.dcg-row .dcg-st.s-yellow { color:#8a6d1a; }
.dcg-row .dcg-st.s-red { color:#a13a33; }
.dcg-btns { display:flex; gap:4px; flex:0 0 auto; }
.dcg-rep { font-size:10.5px; font-weight:800; border-radius:999px; padding:3px 8px; border:1px solid var(--line, #e3e6ee); background:#fff; cursor:pointer; }
.dcg-rep.g { color:#1f6d43; border-color:#cfe9da; }
.dcg-rep.r { color:#a13a33; border-color:#f3c8c3; }
.al-dongfb { margin-top:8px; padding:10px 12px; font-size:12.5px; line-height:1.6; color:#645e78; background:#f4f6fa; border-radius:12px; }

/* ★v198 GPS 주차 P 펄스(과제 C) — 최근 2h 반짝, 오래될수록 흐림(정직 감쇠·opacity 인라인) */
.pk-ppulse-wrap { background:none; border:none; }
.pk-ppulse { display:flex; width:18px; height:18px; align-items:center; justify-content:center; border-radius:50%; background:#2f6fe0; color:#fff; font-size:11px; font-weight:900; box-shadow:0 0 0 2px rgba(47,111,224,.25); }
.pk-ppulse.fresh { animation: pkPulse 1.6s ease-out infinite; }
@keyframes pkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,111,224,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(47,111,224,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,111,224,0); }
}

/* ★v198 트레이싱 스튜디오(과제 B) */
.ad-trace-tools { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.ts-tool { font-size:12px; font-weight:800; border-radius:999px; padding:6px 12px; border:1px solid var(--line, #e3e6ee); background:#fff; cursor:pointer; color:#2b3240; }
.ts-tool.on { color:#fff; background:#6a5adf; border-color:#6a5adf; }
.ts-tool.aux { color:#645e78; }
.ts-name { margin:4px 0 8px; }
.ad-trace-map { height:320px; border-radius:12px; overflow:hidden; border:1px solid var(--line, #e3e6ee); }
.ts-json-wrap { margin:8px 0; }
.ts-json { max-height:180px; overflow:auto; font-size:10.5px; background:#f4f6fa; border-radius:8px; padding:8px; }
.ts-ent { font-size:14px; }
.ob-traced .ts-stage { background:#f6f3ec; border-radius:12px; overflow:hidden; }
/* ★v198 도면 위 P 펄스(SVG 스테이지 오버레이) — 줌·팬(transform)과 함께 이동 */
.pk-onplan { position:absolute; transform:translate(-50%,-50%); cursor:pointer; z-index:5; }

/* ★v201 프리미엄 입체화 — 색 팔레트 불변·깊이/질감만(그림자·그라데이션·radius·transition·transform 한정).
 * 레이아웃 속성(display/position/width/height/margin/padding) 무변경. 기존 규칙 삭제 없음(추가 오버라이드 전용).
 * ①주요 CTA 수직광 그라데이션+이중 섀도 ②버튼류 공통 눌림/상승 ③카드 레이어드 섀도 ④입력 포커스 링 ⑤크롬(헤더·탭바·시트) 광택 */

/* ── ① 주요 CTA(보라 그라디언트 계열) — 은은한 수직광 + 이중 box-shadow(근거리 진한 + 원거리 부드러운) ── */
.pay-submit, .car-save, .cs-save, .cm-call, .vf-send, .ab-yes, .fb-go,
.admin-pin-go, .act-in, .onboarding-card .ob-btn-primary, .car-visit-btn.on {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 46%, rgba(20,8,60,.06) 100%),
    linear-gradient(135deg, #8b6bff 0%, #5b86ff 100%);
  box-shadow:
    0 2px 4px rgba(76, 54, 150, 0.26),
    0 10px 24px rgba(96, 70, 200, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(38, 22, 100, 0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pay-submit:active, .car-save:active, .cs-save:active, .cm-call:active, .vf-send:active,
.ab-yes:active, .fb-go:active, .admin-pin-go:active, .act-in:active,
.onboarding-card .ob-btn-primary:active, .car-visit-btn.on:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 1px 2px rgba(76, 54, 150, 0.30),
    0 3px 8px rgba(96, 70, 200, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 1px 3px rgba(38, 22, 100, 0.16);
}
.pay-submit:disabled, .car-save:disabled, .cs-save:disabled, .cm-call:disabled,
.vf-send:disabled, .admin-pin-go:disabled {
  transform: none;
  box-shadow: 0 2px 6px rgba(96, 70, 200, 0.10);
}

/* ── ①-b 유색 솔리드/글로시 버튼(흰·카카오·그린 등) — 배경 불변, 광택 인셋 + 이중 섀도만 ── */
.hero-go, .car-find, .ps-out, .isc-btn, .pay-go, .mgmt-call, .cs-photo-btn,
.ob-maplink, .lot-map, .al-rep, .mc-pay-btn, .geo-optin-btn {
  box-shadow:
    0 2px 4px rgba(44, 42, 58, 0.14),
    0 8px 20px rgba(44, 42, 58, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero-go:active, .car-find:active, .ps-out:active, .isc-btn:active, .pay-go:active,
.mgmt-call:active, .cs-photo-btn:active, .ob-maplink:active, .lot-map:active,
.al-rep:active, .mc-pay-btn:active, .geo-optin-btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 1px 2px rgba(44, 42, 58, 0.16),
    0 3px 8px rgba(44, 42, 58, 0.08),
    inset 0 1px 2px rgba(20, 12, 50, 0.12);
}

/* ── ② 보조 버튼·칩류 공통 — 미세 수직광 인셋 + 근/원 이중 섀도 + 눌림 ── */
.ab-no, .fb-close, .car-clear, .home-clear, .home-cancel, .cs-clear, .vi-cancel,
.notify-clear, .car-kind, .car-dong, .home-dong, .floorseg-btn, .sheet-floor-btn,
.vf-dong, .vf-stay, .cs-chip, .home-chip, .cg-region, .cg-row,
.onboarding-card .ob-btn, .cc-btn, .ob-seg-btn, .ob-now-btn, .geo-mini-btn,
.slot-chip, .gc-chip, .bd-sort, .ts-tool, .al-chip, .al-lrow, .al-flchip, .dcg-rep,
.act-out, .act-empty, .act-full, .ad-report-btn, .cg-postcode-btn,
.ob-map-fb-btn, .ob-rv-btn, .bulky-gov, .cm-sms-fb, .auto-demo-chip, .frow {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 1px 2px rgba(72, 50, 120, 0.09),
    0 4px 10px rgba(72, 50, 120, 0.05);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ab-no:active, .fb-close:active, .car-clear:active, .home-clear:active, .home-cancel:active,
.cs-clear:active, .vi-cancel:active, .notify-clear:active, .car-kind:active, .car-dong:active,
.home-dong:active, .floorseg-btn:active, .sheet-floor-btn:active, .vf-dong:active, .vf-stay:active,
.cs-chip:active, .home-chip:active, .cg-region:active, .cg-row:active,
.onboarding-card .ob-btn:active, .cc-btn:active, .ob-seg-btn:active, .ob-now-btn:active,
.geo-mini-btn:active, .slot-chip:active, .gc-chip:active, .bd-sort:active, .ts-tool:active,
.al-chip:active, .al-lrow:active, .al-flchip:active, .dcg-rep:active,
.act-out:active, .act-empty:active, .act-full:active, .ad-report-btn:active,
.cg-postcode-btn:active, .ob-map-fb-btn:active, .ob-rv-btn:active, .bulky-gov:active,
.cm-sms-fb:active, .auto-demo-chip:active, .frow:active {
  transform: translateY(1px) scale(.975);
  box-shadow:
    inset 0 1px 2px rgba(72, 50, 120, 0.10),
    0 1px 2px rgba(72, 50, 120, 0.06);
}
/* 세그먼트 활성 탭 — 살짝 떠 있는 느낌(비활성은 평면 유지) */
.viewseg-btn.on, .al-vbtn.on, .al-fbtn.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 3px rgba(80, 60, 160, 0.18),
    0 4px 10px rgba(80, 60, 160, 0.10);
}
/* 측정 전 칩·데이터 배지 — 배지류 미세 광택(호버/눌림 없음) */
.onboarding-card .ob-chip, .data-badge, .status-chip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(72, 50, 120, 0.08);
}

/* ── ②-b 데스크탑 호버 미세 상승(터치 스티키 호버 방지: hover 기기 한정) ── */
@media (hover: hover) and (pointer: fine) {
  .pay-submit:hover, .car-save:hover, .cs-save:hover, .cm-call:hover, .vf-send:hover,
  .ab-yes:hover, .fb-go:hover, .admin-pin-go:hover, .act-in:hover,
  .onboarding-card .ob-btn-primary:hover, .car-visit-btn.on:hover {
    transform: translateY(-1px);
    box-shadow:
      0 3px 6px rgba(76, 54, 150, 0.28),
      0 14px 30px rgba(96, 70, 200, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }
  .hero-go:hover, .car-find:hover, .ps-out:hover, .isc-btn:hover, .pay-go:hover,
  .mgmt-call:hover, .cs-photo-btn:hover, .ob-maplink:hover, .al-rep:hover, .mc-pay-btn:hover {
    transform: translateY(-1px);
    box-shadow:
      0 3px 6px rgba(44, 42, 58, 0.16),
      0 12px 26px rgba(44, 42, 58, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }
  .ab-no:hover, .fb-close:hover, .car-clear:hover, .cs-clear:hover, .cg-row:hover,
  .onboarding-card .ob-btn:hover, .cc-btn:hover, .ob-now-btn:hover, .al-chip:hover,
  .al-lrow:hover, .home-chip:hover, .cg-region:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 2px 4px rgba(72, 50, 120, 0.12),
      0 8px 18px rgba(72, 50, 120, 0.08);
  }
}

/* ── ③ 카드류 — 레이어드 섀도(0 1px 2px 근거리 + 0 8px 24px 원거리 저투명) ── */
.onboarding-card, .car-picker, .car-spot, .car-move, .fc-card, .visit-form,
.park-idle, .home-picker, .time-slider, .day-trend, .cost-card, .info-block,
.cc-card, .visit-item, .bc-brief, .plan-grid, #map, .dcard, .sum-chip,
.notify-item, .ad-card, .ad-block, .mc-pay {
  box-shadow:
    0 1px 2px rgba(72, 50, 120, 0.05),
    0 8px 24px rgba(72, 50, 120, 0.09);
  transition: box-shadow .2s ease;
}
/* 카드 테두리 미세화 — 반투명 보라끼 헤어라인(상태색 테두리 있는 카드는 제외) */
.onboarding-card, .car-picker, .car-spot, .car-move, .fc-card, .visit-form,
.park-idle, .home-picker, .time-slider, .day-trend, .info-block, .bc-brief {
  border-color: rgba(101, 78, 163, 0.13);
}
/* radius 일관화 — 홀수 하드코딩 카드만 토큰으로(레이아웃 무영향) */
.cc-card, .bc-brief { border-radius: var(--radius-md); }

/* ── ④ 입력 필드 — 포커스 시 부드러운 보라 저투명 ring ── */
.cs-input, .cm-input, .vf-input, .pay-in, .car-dong-text, .cg-search-input,
.admin-pin-input, .mm-in, .dp-in {
  transition: box-shadow .18s ease, border-color .18s ease;
  box-shadow: inset 0 1px 2px rgba(72, 50, 120, 0.05);
}
.cs-input:focus, .cm-input:focus, .vf-input:focus, .pay-in:focus, .car-dong-text:focus,
.cg-search-input:focus, .admin-pin-input:focus, .mm-in:focus, .dp-in:focus {
  box-shadow: 0 0 0 3.5px rgba(124, 92, 255, 0.16), inset 0 1px 2px rgba(72, 50, 120, 0.04);
}
/* 오류 상태 입력은 링도 붉게(포커스 링과 충돌 방지) */
.cm-input-err:focus, .vf-input-err:focus {
  box-shadow: 0 0 0 3.5px rgba(224, 87, 79, 0.15);
}

/* ── ⑤ 앱 크롬(다크/브랜드 영역) — 대비 유지 + 광택 한 겹 ── */
.app-header {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(76, 54, 150, 0.14),
    0 12px 30px rgba(96, 70, 200, 0.24);
}
.hero {
  box-shadow:
    var(--shadow-hero),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.car-saved, .park-session, .info-sub-card {
  box-shadow:
    var(--shadow-hero),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.tabbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 -2px 6px rgba(72, 50, 120, 0.05),
    0 -10px 30px rgba(72, 50, 120, 0.12);
}
.sheet {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 -4px 12px rgba(44, 42, 58, 0.10),
    0 -18px 52px rgba(44, 42, 58, 0.28);
}
.toast {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 10px rgba(44, 42, 58, 0.24),
    0 14px 36px rgba(44, 42, 58, 0.30);
}
.auto-banner, .full-banner {
  box-shadow:
    0 2px 5px rgba(72, 50, 120, 0.10),
    0 14px 34px rgba(72, 50, 120, 0.22);
}

/* ★v202 동별 카드 배열 수술(대장 지시 "누가 저딴식으로 봐") —
   .al-list 가 2열 그리드라 캡션(.al-cards-cap)이 왼쪽 칸, 카드 그리드 전체가 오른쪽 칸에
   좌우로 쪼개져 세로로 길게 늘어지던 사고. 캡션·카드그리드·폴백은 전폭 사용 + 카드 압축. */
.al-list .al-cards-cap, .al-list .al-dong-grid, .al-list .al-dongfb { grid-column: 1 / -1; }
.al-list { max-height: 480px; }
.al-dong-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; }
.al-dong-grid .dcard { padding: 9px 11px; }
.dcg-row { padding: 4px 2px; gap: 5px; }
.dcg-rep { padding: 2px 7px; font-size: 10px; }
.al-cards-cap { padding: 4px 2px 8px; }

/* ★v206 가독성·색 결 수술(대장 지시 2026-07-03) —
   ①빈 초록 막대 정체: .cm-result/.cm-steps 의 display:flex 가 [hidden]을 이겨 빈 채로 상시 노출되던 버그 → 전역 [hidden] 강제.
   ②v201 프리미엄 그라데이션이 .cm-call 전체에 깔려 EV(초록 글씨)·QR(보라 글씨)이 파란 배경에 묻힘 → 의미색 복원(버튼 결). */
[hidden] { display: none !important; }
.cm-call.cm-ev, .cm-call.cm-ev:hover {
  background: linear-gradient(180deg, #f2fbf6 0%, #e3f5ea 100%);
  border: 1.5px solid #bfe8d2; color: #1e7a4e;
  box-shadow: 0 1px 2px rgba(31, 122, 78, 0.12), 0 6px 16px rgba(31, 122, 78, 0.10);
  text-shadow: none;
}
.cm-call.cm-ev small { color: #4a9a72; }
.cm-call.cm-qr, .cm-call.cm-qr:hover {
  background: #fff; border: 1.5px dashed #cfc7f5; color: #4a3fb5;
  box-shadow: 0 1px 2px rgba(74, 63, 181, 0.08);
  text-shadow: none;
}

/* ★v207 입체감 강화(대장 지시 "전부 2D 평면 — 입체감 없다") + 반짝임 + 차빼 카드 정리 */
@keyframes pkShine {
  0%   { left: -60%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}
.ob-shine { position: relative; overflow: hidden; }
.ob-shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  animation: pkShine 3.2s ease-in-out infinite; pointer-events: none;
}
/* 주 CTA — 더 깊은 이중 그림자 + 상단 광택 + 또렷한 눌림 */
.pay-submit, .cm-call, .cs-save, .ab-yes, .ob-btn-primary {
  box-shadow: 0 2px 4px rgba(58, 48, 120, 0.30), 0 14px 30px rgba(88, 74, 190, 0.32), inset 0 1.5px 0 rgba(255, 255, 255, 0.40);
}
.pay-submit:active, .cm-call:active, .cs-save:active, .ab-yes:active, .ob-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(58, 48, 120, 0.28), 0 5px 12px rgba(88, 74, 190, 0.24), inset 0 1.5px 0 rgba(255, 255, 255, 0.25);
}
/* 카드 — 떠 있는 느낌(근거리 선명 + 원거리 부드러움) */
.info-block, .onboarding-card, .car-move, .car-reg, .car-spot, .cc-card, .dcard, .ob-reco {
  box-shadow: 0 1.5px 3px rgba(43, 37, 64, 0.10), 0 16px 38px rgba(43, 37, 64, 0.12);
}
/* 차빼 카드 정리 — EV 버튼 간격 분리(대장: "너무 붙어있다") + 보조 위계 */
.cm-call.cm-ev { margin-top: 12px; }
.cm-call.cm-qr { margin-top: 10px; box-shadow: 0 1px 2px rgba(74, 63, 181, 0.10), 0 8px 18px rgba(74, 63, 181, 0.10); }
/* 관리소 전용 배지 — 공개 저격이 아닌 비공개 처리 흐름을 표시 */
.anon-emph { position: relative; }
.anon-emph::after {
  content: '🔐 관리소 전용';
  position: absolute; top: -12px; right: 10px;
  background: linear-gradient(135deg, #1478d4, #0f4f91); color: #fff;
  font-size: 11.5px; font-weight: 900; letter-spacing: .2px;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(43, 37, 64, .4), inset 0 0 0 1px rgba(255, 255, 255, .5);
  text-shadow: 0 1px 2px rgba(30, 20, 70, .6);
}
/* 3번탭 새 카드 입력줄 정돈 */
#gateCheckBlock .dp-row { display: flex; gap: 8px; align-items: stretch; }
#gateCheckBlock .pay-in { flex: 1; }
#gcResult { font-size: 13px; line-height: 1.7; padding: 9px 11px; background: #f4f6fa; border-radius: 10px; }

/* ═══════════════════════════════════════════════════════════
   ★v209 버튼 시스템 전면 개편 (대장 "버튼 죄다 파란색·촌스럽고 구려·2배 퀄리티")
   — 색 위계 4단(주/보조/위험/은은) + 과한 글로우·이중그림자·반짝임 제거 + 세로 간격 표준.
   팔레트 불변(보라 #7c5cff·크림 #fbf4ea). 하네스 정의(pkShine·anon-emph::after·[hidden]) 유지.
   ═══════════════════════════════════════════════════════════ */

/* 세로로 쌓인 버튼은 항상 간격(붙음 방지) — 대장: "버튼 붙어있는거 완벽하게 떼어라" */
.btn-stack { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.btn-row { display: flex; gap: 10px; }
.btn-row > * { flex: 1; }
.info-block .pay-submit + .pay-submit,
.info-block .pay-submit + .btn-secondary,
.car-move .cm-call + .cm-call { margin-top: 12px; }

/* 4단 위계 — 신규 클래스 */
.btn-primary, .btn-secondary, .btn-danger, .btn-quiet {
  width: 100%; border: none; border-radius: 15px; padding: 15px 16px; font: inherit;
  font-size: 15px; font-weight: 800; cursor: pointer; min-height: 54px; line-height: 1.35;
  text-align: center; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary  { background: linear-gradient(180deg, #8b6bff 0%, #6a4fe6 100%); color: #fff; box-shadow: 0 5px 16px rgba(96,70,200,.26); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 7px rgba(96,70,200,.22); }
.btn-secondary { background: #f4f1ff; color: #6a4fe6; border: 1.5px solid #ddd3ff; }
.btn-secondary:active { transform: translateY(1px); background: #ece5ff; }
.btn-danger  { background: linear-gradient(180deg, #f4776b 0%, #e0574f 100%); color: #fff; box-shadow: 0 5px 16px rgba(210,70,60,.24); }
.btn-danger:active { transform: translateY(1px); }
.btn-quiet   { background: #fff8f0; color: #8a6d3a; border: 1.5px solid #efe4d4; }
.btn-quiet:active { transform: translateY(1px); }
.btn-secondary.on { background: linear-gradient(180deg, #35c07a 0%, #1f9d5c 100%); color: #fff; border-color: transparent; box-shadow: 0 5px 16px rgba(31,157,92,.26); }

/* 기존 CTA 정돈 — 과한 글로우/이중그림자/inset 광택을 단일 모던 그림자로(촌스러움 제거) */
.pay-submit, .cm-call, .cs-save, .ab-yes, .ob-btn-primary, .car-save, .mc-pay-btn, .vf-send, .isc-btn {
  box-shadow: 0 5px 16px rgba(96,70,200,.22) !important;
}
.pay-submit:active, .cm-call:active, .cs-save:active, .ab-yes:active, .ob-btn-primary:active {
  transform: translateY(1px) !important; box-shadow: 0 2px 7px rgba(96,70,200,.2) !important;
}
/* 세로 인접 두 버튼이 같은 색이라 '붙은 하나'로 보이던 문제 — 보조 버튼은 소프트 보라로 확실히 구분 */
.pay-submit.ol-ghost { background: #f4f1ff !important; color: #6a4fe6 !important; border: 1.5px solid #ddd3ff !important; box-shadow: none !important; }
.pay-submit.ol-ghost:active { background: #ece5ff !important; transform: translateY(1px); }

/* 차빼(익명) = 반짝임 정지(촌스러움) + 배지만 유지 · EV 초록 · QR 점선 (색 다양성) */
.cm-call.anon-emph { animation: none !important; }
.anon-emph { animation: none !important; }

/* 첫화면 4버튼 — 모던 카드감(평면 탈피, 과하지 않게) */
.ob-now-btn { box-shadow: 0 2px 9px rgba(43,37,64,.09) !important; border-color: #e3e0f4 !important; background: linear-gradient(180deg,#fdfcff 0%,#f4f1ff 100%) !important; border-radius: 15px !important; }
.ob-now-btn:active { transform: translateY(1px); }

/* 카드 컨테이너 — 은은한 부상감 표준화 */
.info-block { box-shadow: 0 1.5px 3px rgba(43,37,64,.07), 0 14px 34px rgba(43,37,64,.10) !important; border-radius: 18px; }

/* ═══ ★v211 (대장 지시 8건) — 서브탭 5열·보조버튼·재난문자 입체 프레임·브리핑 입체 카드 ═══ */

/* F. 관리사무소 서브탭 1열당 4개 2줄(★v214 대장 원복) */
.mseg4 { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; }
#mgmtSeg.mseg4 .mseg-btn { font-size: 13px !important; font-weight: 700 !important; line-height: 1.28 !important; padding: 7px 3px !important; min-height: 50px !important; letter-spacing: -0.1px !important; }

/* A. 방문자 입장 보조 버튼 — 주(초록 solid)와 구분되는 아웃라인 초록 */
.ps-cam.visitor.ps-cam-alt { background: #f1fbf5 !important; color: #137a45 !important; border: 1.5px solid #a6ddbb !important; box-shadow: 0 2px 8px rgba(19,122,69,.10) !important; }
.ps-cam.visitor.ps-cam-alt small { color: #2f9c68 !important; opacity: 1; }

/* G. 관리소 알림방송 — 재난문자 스타일 입체 프레임(프레임 한 겹 덧댐) */
.bcd-demo { margin: 12px 0 4px; }
.bcd-phone {
  background: linear-gradient(180deg,#eef0f6 0%,#e4e7f0 100%);
  border-radius: 18px; padding: 12px;
  box-shadow: 0 2px 6px rgba(43,37,64,.10), 0 14px 30px rgba(43,37,64,.12);
}
.bcd-alert {
  background: linear-gradient(180deg,#fff9e8 0%,#fef3d0 100%);
  border: 1.6px solid #f0d68a; border-radius: 13px; padding: 13px 14px;
  box-shadow: 0 1px 2px rgba(160,120,20,.14), 0 6px 16px rgba(160,120,20,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
.bcd-alert-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.bcd-tag { font-size: 12px; font-weight: 900; color: #a5751a; letter-spacing: -.2px; }
.bcd-time { font-size: 11.5px; font-weight: 800; color: #b79237; }
.bcd-alert-body { font-size: 13.5px; line-height: 1.6; color: #4a3c14; font-weight: 600; }
.bcd-cap { font-size: 11.5px; color: #8a84a8; margin: 8px 2px 0; text-align: center; }

/* H. 출근길 30초 브리핑 — 사각형 한 겹 위에 올린 입체 예시 카드 */
.bcb-demo {
  background: linear-gradient(180deg,#fbfaff 0%,#f4f1ff 100%);
  border: 1.5px solid #e3e0f4; border-radius: 15px; padding: 12px 13px; margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(43,37,64,.08), 0 12px 26px rgba(43,37,64,.10);
}
.bcb-demo-h { font-size: 12px; font-weight: 900; color: #6a4fe6; margin-bottom: 8px; }
.bcb-demo .bcb-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(120,110,160,.16); font-size: 13px; }
.bcb-demo .bcb-row:last-child { border-bottom: none; }
.bcb-demo .bcb-ico { flex: 0 0 auto; }
.bcb-demo .bcb-t { flex: 1; color: #2b2540; font-weight: 700; }
.bcb-demo .bcb-when { flex: 0 0 auto; font-size: 11px; color: #8a84a8; }
.bcb-demo .bcb-row.urgent .bcb-t { color: #c0392b; }

/* I. 인테리어 공사 예시 행 여백 */
.iv-row .iv-row-foot { margin-top: 5px; }

/* ★v214 목록 = 전체화면 슬라이드 시트(대장 지시 — 작은 목록은 동 찾다 이탈) */
.al-list-sheet {
  position: fixed; inset: 0; z-index: 99997; background: var(--cream, #fbf4ea);
  display: flex; flex-direction: column;
  animation: allsIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes allsIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.alls-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(120,110,160,.12); }
.alls-title { flex: 1; font-size: 15.5px; font-weight: 900; color: var(--ink, #2c2a3a); letter-spacing: -.3px; }
.alls-cap { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft, #8a84a8); margin-top: 2px; }
.alls-close { flex: 0 0 auto; border: 1.5px solid #ddd3ff; background: #f4f1ff; color: #6a4fe6; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.alls-search { margin: 10px 16px 6px; padding: 13px 14px; border: 1.6px solid #d9dce8; border-radius: 13px; font-size: 16px; background: #fff; box-sizing: border-box; width: calc(100% - 32px); }
.alls-search:focus { outline: none; border-color: #b9a9ff; box-shadow: 0 0 0 3.5px rgba(124,92,255,.14); }
.alls-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 12px 24px; }
.al-list-sheet .al-list { max-height: none !important; padding: 0 !important; grid-template-columns: 1fr !important; }
.al-list-sheet .al-list .dcard { padding: 13px 14px; }
.al-list-sheet .al-list .al-cards-cap { position: sticky; top: 0; background: var(--cream, #fbf4ea); z-index: 1; padding: 8px 2px 10px; }

/* ★v214 관리사무소 전화 버튼(분홍) · ★v225 최상단 상시노출 · ★v232 전화걸기/위치보기 별도 2버튼(둘 다 분홍) */
.mgmt-call-top { margin: 2px 0 14px; }
.mgmt-call-row { display: flex; gap: 10px; }
/* ★대장 지시 — 관리사무소 바로가기 버튼(관리비·건의·오늘의 알림 바로듣기) */
.mgmt-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.mgmt-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border: 1.5px solid #e2dcf0; background: #f6f4fc; border-radius: 13px; cursor: pointer; text-align: center; box-shadow: 0 1px 4px rgba(90,70,180,.06); }
.mgmt-quick-btn:active { transform: translateY(1px); }
.mgmt-quick-btn .mq-ic { font-size: 20px; line-height: 1; }
.mgmt-quick-btn b { font-size: 12.5px; color: #2b2540; font-weight: 800; line-height: 1.2; }
.mgmt-quick-btn small { font-size: 10.5px; color: #8a84a8; }
.mgmt-call-btn {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none;
  box-sizing: border-box; padding: 15px 12px; margin-top: 0;
  border-radius: 16px; border: 2.5px solid #f6a5c0; background: linear-gradient(180deg,#fff5f9 0%,#ffe9f1 100%);
  color: #c2185b; font-size: 16.5px; font-weight: 900; cursor: pointer; text-align: center;
  box-shadow: 0 6px 18px rgba(214,80,130,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
.mgmt-call-btn small { font-size: 11.5px; font-weight: 700; color: #d47a9a; margin-top: 2px; line-height: 1.3; word-break: keep-all; }
.mgmt-call-btn:active { transform: translateY(2px); }
/* 위치 보기 = 분홍 아웃라인(흰 배경) — 전화걸기(채움)와 구분 */
.mgmt-call-btn.loc { background: #fff; box-shadow: 0 3px 12px rgba(214,80,130,.14); }
.mgmt-call-btn.loc small { color: #cd7a97; }
.mgmt-call-btn.find { border-color: #b9a9ff; background: linear-gradient(180deg,#faf8ff 0%,#f0ebff 100%); color: #6a4fe6; }
.mgmt-call-btn.find small { color: #9a8fd0; }

/* ★v214 예시 공지 배너 */
.nt-ex-banner { padding: 8px 12px; margin: 2px 0 10px; border: 1.5px dashed #d8a53a; background: #fff7e6; border-radius: 10px; font-size: 12px; font-weight: 800; color: #8a6116; text-align: center; }

/* ★v222 목록 바텀시트 슬라이드 업 — @keyframes(인라인 animation 로 참조). 아래서 위로 길게. */
@keyframes allsFade { from { opacity: 0; } to { opacity: 1; } }  /* ★v223 transform 없이 페이드만(환경상 transform 깨짐) */

/* ════════════════════════════════════════════════════════════════
 * ★v228 관리사무소 탭 가독성 — 어르신(노인 입주민)이 읽게 폰트 키움 + 색 진하게 + 재난문자·브리핑 카드 프레임.
 *   (대장 반복 지시: "어른들이 이 폰트들이 다 보여? 이모지 넣어 가독성 올리고 폰트 크기 키워라")
 *   override 블록(파일 뒤·동일 특이도로 앞 규칙을 덮음).
 * ════════════════════════════════════════════════════════════════ */
/* 설명/캡션 = 14px·진한 색 */
.info-cap { font-size: 14px; color: var(--ink-soft); line-height: 1.65; }
.bc-intro span { font-size: 14px; color: var(--ink); line-height: 1.6; font-weight: 600; }
.iv-cap { font-size: 14px; color: var(--ink-soft); line-height: 1.65; font-weight: 600; }
.bcd-cap { font-size: 13.5px; color: #5c5470; line-height: 1.55; }
.bc-brief-cap { font-size: 13px; color: #6b6a7e; font-weight: 600; }
/* 본문/예시 = 14.5px */
.bc-body { font-size: 14.5px; color: var(--ink); line-height: 1.6; }
.iv-desc { font-size: 14.5px; color: var(--ink); line-height: 1.65; }
.iv-company { font-size: 14px; color: var(--accent-1); font-weight: 800; }
/* 재난문자 예시 = 또렷한 카드 프레임 + 본문 크게 */
.bcd-demo { margin: 12px 0 6px; padding: 14px 15px; border: 2px solid #ecd9a8; border-radius: 14px; background: #fffdf5; box-shadow: 0 3px 12px rgba(180,150,60,.12); }
.bcd-tag { font-size: 13.5px; font-weight: 900; color: #6b4f1f; }
.bcd-time { font-size: 13px; font-weight: 800; color: #8a6d1a; }
.bcd-alert-body { font-size: 15px; line-height: 1.7; color: #2c2a3a; font-weight: 700; }
/* 출근길 브리핑 = 카드 프레임 + 행 크게 */
.bc-brief-h { font-size: 15.5px; font-weight: 900; margin-bottom: 10px; }
.bcb-demo { padding: 13px 14px; border: 2px solid #e2e0f0; border-radius: 14px; background: #fbfaff; box-shadow: 0 3px 12px rgba(90,70,160,.10); }
.bcb-demo-h { font-size: 13.5px; }
.bcb-row { font-size: 14.5px; padding: 11px 12px; border-radius: 12px; line-height: 1.55; }
.bcb-demo .bcb-row { font-size: 14.5px; padding: 10px 2px; }
.bcb-t { font-weight: 700; }
.bcb-demo .bcb-t { font-weight: 800; }
.bcb-when, .bcb-demo .bcb-when { font-size: 12.5px; color: #7a7488; font-weight: 600; }
.bcb-listen { font-size: 13px; font-weight: 800; padding: 7px 13px; }

/* ★v228 보라 남발 완화(대장: "보라돌이냐") — 내 차 탭 색 위계로 분산.
 *   핵심(차빼주세요·사진 기억)만 보라 유지 · 자동 입출차 ON=초록 · 저장류=연보라 · 지우기=아이보리. */
.geo-optin-btn.on { background: linear-gradient(180deg, #35c07a 0%, #1f9d5c 100%); color: #fff; border-color: transparent; box-shadow: 0 5px 16px rgba(31,157,92,.26); }
.cs-save.btn-secondary { background: #f4f1ff; color: #6a4fe6; border: 1.5px solid #ddd3ff; box-shadow: none; }
.cs-save.btn-secondary:active { transform: translateY(1px); background: #ece5ff; }
.car-clear.btn-quiet, .cs-clear.btn-quiet { background: #fff8f0; color: #8a6d3a; border: 1.5px solid #efe4d4; box-shadow: none; }

/* ★v233 인테리어 공사 신고 정리(대장 지시 "정리해") — 설명 3줄 이모지 + 예시를 또렷한 카드로. */
/* ★대장 지시 — 인테리어 안내 글을 박스 테두리 카드로(퀄리티). iv-row 카드와 톤 맞춤. */
.iv-cap-group { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 13px 15px; border: 1.5px solid #e7dcc9; background: #fbf9f4; border-radius: 13px; box-shadow: 0 1px 4px rgba(150,120,50,.06); }
.iv-cap-item { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.iv-cap-item b { color: var(--ink); font-weight: 800; }
.iv-list .iv-row { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1.5px solid #e7dcc9; border-radius: 14px; background: #fffdf7; box-shadow: 0 2px 8px rgba(150,120,50,.08); }
.iv-list .iv-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.iv-list .iv-row-top b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.iv-list .iv-when { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #b5781a; background: #f6ecd6; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.iv-list .iv-row-body { font-size: 13.5px; color: #4a4560; line-height: 1.6; }
.iv-list .iv-row-foot { margin-top: 2px; font-size: 12px !important; color: #8a84a8 !important; line-height: 1.5; }

/* ★대장 지시 — 모든 탭(1~5) 주요 버튼 입체감·글로시(상단 광택 하이라이트 + 그림자). */
.ob-now-btn, .ob-btn, .mgmt-quick-btn, .al-rep, .pay-submit, .pay-method, .cm-call, .btn-primary, .btn-secondary, .ob-seg-btn, .mgmt-call-btn, .car-kind, .al-vbtn, .al-fbtn, .viewseg-btn, .floorseg-btn, .mseg-btn, .sum-chip {
  box-shadow: 0 2px 8px rgba(60, 40, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ob-now-btn:active, .mgmt-quick-btn:active, .cm-call:active, .btn-primary:active, .al-rep:active, .pay-submit:active, .pay-method:active, .car-kind:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(60, 40, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ★② 지로 QR — 지로 전자납부번호를 QR로 만들어 은행 앱 스캔으로 바로 납부. */
.mm-giro-qr { width: 100%; margin: 8px 0 0; padding: 12px 14px; border: 1.5px solid #d6cbf5; border-radius: 13px; background: linear-gradient(135deg, #f4f0ff, #ece5ff); color: #4a3fb5; font-size: 14.5px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; box-shadow: 0 2px 8px rgba(60, 40, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .5); }
.mm-giro-qr small { font-size: 11.5px; font-weight: 600; color: #8a84a8; }
.mm-giro-qr:active { transform: translateY(1px); }
.mm-giro-qrbox { margin: 12px 0 4px; padding: 16px; border: 1.5px solid #ece5ff; border-radius: 14px; background: #fbfaff; text-align: center; }
.mm-giro-loading, .mm-giro-fail { font-size: 13px; color: #8a84a8; padding: 24px 0; }
.mm-giro-fail { color: #c0392b; }
.mm-giro-img { width: 208px; height: 208px; border: 1px solid #eee; border-radius: 12px; background: #fff; }
.mm-giro-cap { margin: 12px 0 0; font-size: 13.5px; color: #4a4560; line-height: 1.5; }
.mm-giro-cap b { color: #4a3fb5; font-weight: 800; }
.mm-giro-num { margin: 6px 0 0; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: var(--ink); font-family: monospace; }
.mm-giro-note { margin: 8px 0 0; font-size: 11.5px; color: #8a84a8; line-height: 1.4; }

/* ★신선마을 동 클릭 인라인 패널(관저동식 통일) — 도면 아래 그 자리에서 신호등+제보+실측 도면. */
.seed-dong-lot { position: relative; margin: 10px 0 4px; padding: 14px; border: 1.5px solid #e6e2ef; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(60, 40, 120, .10); }
.seed-dong-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: #f4f1fb; color: #645e78; font-size: 15px; border-radius: 999px; cursor: pointer; line-height: 1; }
.seed-dong-close:active { transform: scale(.94); }
.sdl-sig { padding-right: 34px; }
.sdl-badge { font-size: 15px; font-weight: 800; color: var(--ink); }
.sdl-sub { margin-top: 3px; font-size: 12.5px; color: #645e78; }
.sdl-rep-row { display: flex; gap: 8px; margin: 12px 0 4px; }
.sdl-rep-row .sdl-rep { flex: 1; padding: 13px 8px; font-size: 14px; border-radius: 12px; }
.sdl-lot-h { margin: 12px 0 6px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.sdl-real { margin-left: 4px; font-size: 11px; font-weight: 800; color: #2f9e54; background: #e7f6ec; padding: 2px 8px; border-radius: 999px; }
.sdl-svg { border: 1px solid #ece7f7; border-radius: 12px; overflow: hidden; background: #f7f5fc; }
.sdl-svg .lot-svg { display: block; width: 100%; }
.sdl-measuring { margin: 12px 0 4px; font-size: 13px; color: #645e78; line-height: 1.5; }
.seed-dong-more { width: 100%; margin-top: 12px; padding: 11px; border: 1.5px solid #d6cbf5; border-radius: 12px; background: #f7f4ff; color: #4a3fb5; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.seed-dong-more:active { transform: translateY(1px); }

/* ★기압 추정 지하층 칩 강조(오너 지시 — 가속도/기압 지하 감지) · '추정' 라벨 = 정직(사람 정정 가능). */
.ab-flchip-est { background: linear-gradient(180deg, #f0ebff, #e2d6fb); border-color: var(--accent-1, #7c5cff); color: var(--accent-1, #7c5cff); box-shadow: 0 3px 9px rgba(108, 78, 220, .25); font-weight: 800; }
.ab-est-tag { font-size: 10px; font-weight: 800; color: #fff; background: #7c5cff; padding: 1px 5px; border-radius: 999px; margin-left: 3px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════
 *  ★v253 주민투표(입주민 투표) — 관리소/입대의 안건 표결. 실 집계·정족수·통과/부결.
 * ══════════════════════════════════════════════════════ */
.vote-intro { padding: 15px 16px; margin-bottom: 12px; border-radius: var(--radius-md); background: #fff; border: 1.6px solid #d6ccf1; box-shadow: 0 3px 12px rgba(80, 60, 160, .12); }
.vote-intro b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.vote-intro span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; }
.vote-list { display: flex; flex-direction: column; gap: 12px; }
.vote-loading { padding: 22px; text-align: center; color: var(--ink-faint); font-size: 13px; font-weight: 700; }

.vote-card { padding: 15px 16px; border-radius: var(--radius-md); background: #fff; border: 1.5px solid var(--line); box-shadow: 0 2px 10px rgba(80, 60, 160, .07); }
.vote-card.vc-open { border-color: #cdbcff; box-shadow: 0 3px 14px rgba(124, 92, 255, .14); }
.vote-card.vc-closed { background: #faf8f4; }

.vc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vc-title { font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.4; }
.vc-chip { flex: none; font-size: 11px; font-weight: 900; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.vc-chip-open { background: var(--accent-grad); color: #fff; }
.vc-chip-soon { background: #fff2d6; color: #9a6b00; }
.vc-chip-closed { background: #ece8f6; color: var(--ink-soft); }
.vc-dday { margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--accent-1); }
.vc-closed .vc-dday { color: var(--ink-faint); }
.vc-body { margin: 9px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }
.vc-quorum { margin-top: 10px; font-size: 12px; font-weight: 800; color: #5b3fd6; background: var(--accent-soft); padding: 6px 10px; border-radius: 10px; display: inline-block; }

.vc-bar { position: relative; height: 12px; margin: 12px 0 8px; border-radius: 999px; background: #ece7f7; overflow: hidden; }
.vc-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-grad); transition: width .4s ease; }
.vc-closed .vc-bar-fill { background: linear-gradient(135deg, #9a93ad, #7d768f); }
/* ★v258 투표 방향성(찬성↔반대 대비 막대 + 우세 라벨) */
.vc-dir { margin: 11px 0 3px; }
.vc-dir-bar { display: flex; height: 15px; border-radius: 999px; overflow: hidden; background: #ece7f7; box-shadow: inset 0 1px 2px rgba(80, 60, 160, .09); }
.vc-dir-bar.vc-dir-empty { background: repeating-linear-gradient(45deg, #ece7f7, #ece7f7 6px, #e3ddf1 6px, #e3ddf1 12px); }
.vc-dir-yes { height: 100%; background: linear-gradient(90deg, #5b86ff, #4f7bff); transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.vc-dir-no { height: 100%; background: linear-gradient(90deg, #ff7a90, #ff5c78); transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.vc-dir-label { margin-top: 7px; font-size: 12.5px; font-weight: 800; text-align: center; color: var(--ink); }
.vc-dir-label.vc-dir-none { color: var(--ink-faint); font-weight: 700; }
.vote-demo-reset { display: block; margin: 11px auto 0; border: 1.4px solid #ddd3ff; background: #f4f1ff; color: #6a4fe6; border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.vote-demo-reset:active { transform: translateY(1px); }

.vc-stat { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.vc-stat b { color: var(--ink); font-weight: 900; }
.vc-note { color: #9a6b00; font-weight: 800; }

.vc-actions { display: flex; gap: 10px; margin-top: 13px; }
.vc-btn { flex: 1; padding: 13px 10px; border-radius: 14px; border: none; font-size: 14px; font-weight: 900; cursor: pointer; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .10); }
.vc-btn:disabled { opacity: .5; cursor: default; }
.vc-yes { background: linear-gradient(135deg, #4f7bff, #5b86ff); }
.vc-no { background: linear-gradient(135deg, #ff7a90, #ff5c78); }
.vc-btn:not(:disabled):active { transform: translateY(1px); }

.vc-mine { margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--ink); background: #eef6ee; border: 1.4px solid #cbe6c9; padding: 9px 12px; border-radius: 12px; }
.vc-mine b { color: #2e7d32; }
.vc-mine.vc-soon { background: #fff2d6; border-color: #f2dca0; color: #9a6b00; }
.vc-result { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-verdict { font-size: 15px; font-weight: 900; padding: 6px 14px; border-radius: 999px; }
.vc-pass { background: #e7f6e8; color: #2e7d32; }
.vc-fail { background: #fdecec; color: #d0362b; }
.vc-hold { background: #ece8f6; color: var(--ink-soft); font-size: 13px; }
.vc-mine-inline { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }

.vote-empty { padding: 22px 16px; text-align: center; border: 1.5px dashed #d6ccf1; border-radius: var(--radius-md); background: var(--accent-soft); }
.ve-ico { font-size: 34px; }
.ve-h { margin-top: 8px; font-size: 15px; font-weight: 900; color: var(--ink); }
.ve-p { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.55; }

.vote-tmpl { margin-top: 12px; border-style: dashed; border-color: #d6ccf1; background: #faf8ff; }
.vt-tag { display: inline-block; font-size: 11px; font-weight: 900; color: #9a6b00; background: #fff2d6; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }

/* ★v277 주민 안건 제안(공론화) — 입주민이 직접 안건 올리기 */
.vc-chip-resident { background: #e8f1ff; color: #2a6fd6; }
.vp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vp-open { flex: none; font-size: 14px; font-weight: 900; color: #fff; background: var(--accent-grad); border: none; padding: 11px 16px; border-radius: 12px; cursor: pointer; box-shadow: 0 3px 10px rgba(124, 92, 255, .18); }
.vp-open:active { transform: translateY(1px); }
.vp-hint { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.vp-form { margin-bottom: 14px; padding: 15px; border-radius: var(--radius-md); border: 1.5px solid #cdbcff; background: #faf8ff; }
.vp-title, .vp-body { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; }
.vp-title { font-weight: 800; margin-bottom: 9px; }
.vp-body { resize: vertical; line-height: 1.5; }
.vp-title:focus, .vp-body:focus { outline: none; border-color: #a98cff; }
.vp-btns { display: flex; gap: 10px; margin-top: 11px; }
.vp-cancel, .vp-submit { flex: 1; padding: 12px; border-radius: 12px; border: none; font-size: 14px; font-weight: 900; cursor: pointer; }
.vp-cancel { background: #efeaf8; color: var(--ink-soft); }
.vp-submit { background: var(--accent-grad); color: #fff; box-shadow: 0 3px 10px rgba(124, 92, 255, .18); }
.vp-submit:disabled { opacity: .55; cursor: default; }
.vp-submit:not(:disabled):active { transform: translateY(1px); }
.vp-note { margin: 11px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; }

/* ══ ★v254 대장 지시 4종(내차 층 가변·안전신문고·대형폐기물 선택·방송 강조) ══ */
/* 긴급/위험 키워드 = 빨간 밑줄(재난문자 가독성) */
.bc-hot { color: #d0362b; font-weight: 900; text-decoration: underline; text-decoration-color: #d0362b; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bcd-alert-body .bc-hot { color: #c0281d; }
/* 내차 위치 '➕ 더 깊이' 칩 — 지하 층 확장(가변) */
.car-kind.car-kind-more { color: var(--accent-1, #7c5cff); border: 1.5px dashed #cdbcff; background: #faf8ff; font-weight: 800; }
.car-kind.car-kind-more:active { transform: translateY(1px); }
/* 외부차 신고 버튼 2개 동일 크기 */
.ol-actions-2 .ol-btn { flex: 1 1 0; min-height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; padding: 10px 8px; white-space: nowrap; }
/* ★진범: .info-block .pay-submit + .pay-submit { margin-top:12px }(styles 4074)가 두번째 버튼에 상단여백 → flex 행에서 첫 버튼이 더 커보임. 같은 특이도로 무효화. */
.ol-actions-2 .pay-submit + .pay-submit { margin-top: 0; }
/* 대형폐기물 시도→시군구 선택(은행 선택식) */
.bulky-picker { display: flex; gap: 8px; margin-bottom: 8px; }
.bulky-sel { flex: 1 1 0; min-width: 0; }
select.bulky-sel { appearance: none; -webkit-appearance: none; }
.bulky-note { margin: 7px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.55; }

/* ★v259 게이트 슬라이드 직접 시연 버튼(자동 입·출차 섹션) */
.geo-demo-btn { display:block; width:100%; margin-top:9px; border:1.5px dashed #cdbcff; background:linear-gradient(180deg,#faf8ff,#f3efff); color:#6a4fe6; border-radius:14px; padding:11px 12px; font-size:13.5px; font-weight:800; cursor:pointer; text-align:center; line-height:1.3; }
.geo-demo-btn small { display:block; font-size:11px; font-weight:700; color:#9a8fc0; margin-top:2px; }
.geo-demo-btn:active { transform:translateY(1px); }

/* ★v260 레이더 리빌 오버레이 — 스캔→동호수 락온→(지하)엘베 하강. 변수는 .rs-overlay 로컬 스코프(앱 :root 불간섭). */
.rs-overlay{
  --cream-a:#fdf6ee; --cream-b:#f6efe6; --cream:#fbf4ea;
  --ink:#2c2a3a; --soft:#6f6a82;
  --violet:#12b886; --blue:#4f7bff; --violet-soft:#d7f5ea;
  --grad:linear-gradient(135deg,#8b6bff,#5b86ff);
  --green:#1f9d5c; --green-soft:#e3f7ec;
  --red:#e05555; --red-soft:#fdeaea;
  --yellow:#e0a92a; --yellow-soft:#fdf3dc;
  --rs-shadow:0 20px 60px -18px rgba(60,40,120,.4);
  position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(44,42,58,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease}
.rs-overlay.on{display:flex;opacity:1}
.rs-card{width:100%;max-width:340px;background:linear-gradient(160deg,#fff,#fdf7ef);border-radius:26px;
  padding:20px 20px 22px;box-shadow:var(--rs-shadow);position:relative;overflow:hidden;text-align:center;
  transform:translateY(14px);transition:transform .3s cubic-bezier(.2,.8,.3,1);color:var(--ink)}
.rs-overlay.on .rs-card{transform:translateY(0)}
.rs-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;background:transparent;
  color:var(--soft);font-size:20px;line-height:1;cursor:pointer;border-radius:50%;opacity:.7}
.rs-close:active{background:var(--cream-b)}
.rs-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;min-height:18px}
.rs-dot{width:8px;height:8px;border-radius:50%;background:var(--violet);animation:rsPulse 1.1s ease-in-out infinite}
@keyframes rsPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.rs-cap{font-size:13px;font-weight:700;color:var(--soft);letter-spacing:.2px}
.rs-demo{font-size:11px;font-weight:800;color:var(--violet);background:var(--violet-soft);padding:3px 8px;border-radius:999px}
.rs-scopeWrap{position:relative;width:224px;height:224px;margin:2px auto 4px}
.scope{position:relative;width:224px;height:224px;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(18,184,134,.16),0 8px 26px -12px rgba(18,184,134,.45)}
.scope-svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .35s ease}
.scope.descending .scope-svg{opacity:.12}
#rsSweepG{}  /* ★v264 회전=JS attribute transform(rotate N 112 112)로만 구동 — transform-box/origin/animation 제거(속성 transform에 origin 이중적용됼 버그 수정) */
@keyframes sweepSpin{to{transform:rotate(360deg)}}
.rs-scopeWrap .ping{position:absolute;top:46%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  border:2px solid var(--violet);opacity:0;animation:pingOut 1.6s ease-out infinite;pointer-events:none}
.rs-scopeWrap .ping.p2{animation-delay:.53s}.rs-scopeWrap .ping.p3{animation-delay:1.06s}
@keyframes pingOut{0%{transform:scale(.2);opacity:.55}70%{opacity:.16}100%{transform:scale(7);opacity:0}}
.scope.locked .ping,.scope.descending .ping{animation:none;opacity:0}
.pin{position:absolute;top:0;left:0;width:34px;height:44px;margin:-42px 0 0 -17px;
  opacity:0;transform:translate(0,-40px) scale(.4);transform-origin:50% 100%;pointer-events:none;z-index:4}
.pin svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 8px rgba(18,184,134,.4))}
.pin.drop{animation:pinDrop .5s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes pinDrop{
  0%{transform:translate(0,-44px) scale(.4);opacity:0}
  55%{transform:translate(0,4px) scale(1.12);opacity:1}
  75%{transform:translate(0,-2px) scale(.94);opacity:1}
  100%{transform:translate(0,0) scale(1);opacity:1}}
.impact{position:absolute;top:0;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid var(--violet);opacity:0;pointer-events:none;z-index:3}
.impact.go{animation:impactOut .55s ease-out forwards}
@keyframes impactOut{0%{transform:scale(.3);opacity:.55}100%{transform:scale(4.6);opacity:0}}
.shaft{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:2}
.shaft.on{opacity:1}
.shaft-bg{position:absolute;inset:0;background:linear-gradient(180deg,#d7f5ea 0%,#b6e8d1 55%,#9adcbc 100%)}
.floors-rail{position:absolute;left:16px;top:0;bottom:0;width:46px}
.f-row{position:absolute;left:0;font-size:11px;font-weight:800;color:#86c9ad;letter-spacing:.5px;
  transition:color .22s,transform .22s;transform-origin:left center}
.f-row.lit{color:#0b8f68;transform:scale(1.18)}
.cage{position:absolute;left:50%;top:6px;width:92px;height:60px;transform:translateX(-50%);background:#fff;
  border:2px solid var(--violet);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(18,184,134,.28)}
.cage-car{font-size:22px;line-height:1}
.cage-fl{font-size:12px;font-weight:800;color:#0b8f68;margin-top:2px}
.floornum{position:absolute;top:10px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--ink);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:20px;
  opacity:0;transition:opacity .25s,transform .25s;letter-spacing:.5px;z-index:5;pointer-events:none}
.floornum.show{opacity:1;transform:translateX(-50%) translateY(0)}
.rs-result{margin-top:16px;opacity:0;transform:translateY(8px);transition:opacity .38s,transform .38s;max-height:0;overflow:hidden}
.rs-result.show{opacity:1;transform:translateY(0);max-height:360px}
.rc{background:#fff;border:.5px solid var(--violet-soft);border-radius:18px;padding:15px 16px;box-shadow:0 6px 18px rgba(18,184,134,.08);text-align:left}
.rc-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.rc-sig{width:10px;height:10px;border-radius:50%;flex:none}
.rc-loc{font-size:17px;font-weight:800;color:var(--ink)}
.rc-chip{margin-left:auto;font-size:12px;font-weight:800;border-radius:20px;padding:4px 11px}
.chip-green{background:var(--green-soft);color:var(--green)}
.chip-red{background:var(--red-soft);color:var(--red)}
.chip-yellow{background:var(--yellow-soft);color:var(--yellow)}
.chip-violet{background:var(--violet-soft);color:var(--violet)}
.rc-sub{font-size:13.5px;color:#4a4560;line-height:1.5;margin:0 0 10px}
.rc-foot{display:flex;align-items:center;gap:8px}
.rc-fl{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:8px;padding:3px 9px}
.fl-under{color:#0b8f68;background:var(--violet-soft)}
.fl-ground{color:var(--green);background:var(--green-soft)}
.rc-src{font-size:11px;color:#a8a2b8;margin-left:auto}
.rc-actions{display:flex;gap:8px;margin-top:12px}
.rc-actions button{flex:1;border:0;border-radius:11px;padding:10px;font-size:13.5px;font-weight:800;cursor:pointer}
.btn-yes{background:var(--grad);color:#fff}
.btn-no{background:#fff;color:var(--soft);box-shadow:inset 0 0 0 1px rgba(111,106,130,.18)}
.rc-note{font-size:11px;color:var(--soft);margin:10px 2px 0;line-height:1.4}
@media (prefers-reduced-motion:reduce){
  .rs-overlay,.rs-card,.rs-result{transition:none!important}
  #rsSweepG{animation:none;opacity:.28}
  .rs-scopeWrap .ping,.rs-dot{animation:none!important}
  .rs-scopeWrap .ping{opacity:0}
  .pin{transition:opacity .2s}.pin.drop{animation:none;opacity:1;transform:translate(0,0) scale(1)}
  .impact{display:none}
  .scope-svg,.shaft,.cage,.f-row,.floornum{transition:none!important}
}

/* ★v261 전 층(지상·지하) 스캔 층수판 — 스코프 왼쪽 세로 층 칩. 스캔 중 순차 점등·최적 강조. 스코프 224px 불변. */
.rs-overlay { --rs-fl-idle:#d7f5ea; --rs-fl-idle-tx:#86c9ad; }
.rs-scopeWrap { width:auto; display:flex; align-items:center; justify-content:center; gap:10px; }
.rs-floors { display:flex; flex-direction:column; justify-content:center; gap:4px; width:52px; height:210px; flex:none; }
.rs-fl { display:flex; align-items:center; gap:5px; height:100%; min-height:0; padding:0 4px; border-radius:9px;
  background:var(--rs-fl-idle); color:var(--rs-fl-idle-tx); font-size:10px; font-weight:800; letter-spacing:.3px;
  opacity:.5; transform:translateX(0) scale(.96); transform-origin:right center;
  transition:opacity .22s,transform .22s,background .22s,color .22s; overflow:hidden; white-space:nowrap; }
.rs-fl .fl-lab { flex:none; }
.rs-fl .fl-dot { width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.4; flex:none; margin-left:auto;
  transition:opacity .2s,transform .2s; }
.rs-fl .fl-pre { font-size:8px; font-weight:700; opacity:.85; }
.rs-fl.lit { opacity:1; transform:translateX(-3px) scale(1); }
.rs-fl.lit .fl-dot { opacity:1; transform:scale(1.15); }
.rs-fl.st-green.lit { background:var(--green-soft,#e3f7ec); color:var(--green,#1f9d5c); }
.rs-fl.st-yellow.lit { background:var(--yellow-soft,#fdf3dc); color:var(--yellow,#e0a92a); }
.rs-fl.st-red.lit { background:var(--red-soft,#fdeaea); color:var(--red,#e05555); }
.rs-fl.st-gray.lit { background:#e6efe9; color:#7c8a83; }
.rs-fl.dim { opacity:.42; filter:saturate(.6); }
.rs-fl.best { opacity:1; filter:none; box-shadow:0 0 0 2px var(--violet,#12b886),0 6px 14px rgba(18,184,134,.28);
  transform:translateX(-4px) scale(1.04); position:relative; z-index:2; }
.rs-fl.best::before { content:'\25C0'; position:absolute; right:-11px; color:var(--violet,#12b886); font-size:9px; line-height:1;
  top:50%; transform:translateY(-50%); }
.rs-fl.best.pulse { animation:rsBestPulse 1s ease 2; }
@keyframes rsBestPulse { 0%,100%{box-shadow:0 0 0 2px var(--violet,#12b886),0 6px 14px rgba(18,184,134,.28)}
  50%{box-shadow:0 0 0 4px var(--violet,#12b886),0 8px 20px rgba(18,184,134,.5)} }
.scope .rs-floorline { position:absolute; left:0; right:0; height:2px; top:50%; pointer-events:none; opacity:0; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(18,184,134,.55),transparent); transition:top .2s linear,opacity .25s; }
.rs-floorline.on { opacity:.9; }
@media (prefers-reduced-motion:reduce) {
  .rs-fl { transition:none!important; } .rs-fl.best.pulse { animation:none!important; } .rs-floorline { display:none; }
}
@media (max-width:360px) { .rs-floors { width:46px; height:196px; } .rs-fl { font-size:9px; } }

/* ★v264 회전 혜성 빔(대장 "돌아가는 게 보여야") — 회전은 JS spinTo(rAF)가 구동, CSS는 성능힌트+선단 반짝만 */
#rsSweepG > circle:nth-of-type(2) { animation: rsHeadPulse 2.8s ease-in-out infinite; }
@keyframes rsHeadPulse { 0%,100% { opacity:1 } 50% { opacity:.7 } }
@media (prefers-reduced-motion: reduce) { #rsSweepG > circle:nth-of-type(2) { animation: none; } }

/* ★v265 버튼 글로시+고급(대장 지시·soopvault 프리미엄 참고) — 크림/보라 기본 테마 유지, 볼드 CTA에만 유리광택+볼록 베벨.
   광택=배경에 화이트 반투명 그라디언트 레이어로 구워넣음(텍스트 안 가림·원색 보존). 색 background 원본 그대로 뒤에 유지. */
.pay-submit, .req-submit, .resident-go, .act-in, .car-visit-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 28%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0) 82%),
    var(--accent-grad) !important;
  box-shadow:
    0 1px 2px rgba(60,40,120,0.14),
    0 9px 22px rgba(95,70,190,0.24),
    inset 0 1px 0 rgba(255,255,255,0.66),
    inset 0 0 0 1px rgba(255,255,255,0.17),
    inset 0 -3px 7px rgba(50,30,110,0.20) !important;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .18s ease;
}
.bulky-gov {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 28%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0) 82%),
    linear-gradient(135deg,#12b886,#0ca678) !important;
  box-shadow:
    0 1px 2px rgba(10,80,55,0.16),
    0 9px 22px rgba(16,150,110,0.26),
    inset 0 1px 0 rgba(255,255,255,0.64),
    inset 0 0 0 1px rgba(255,255,255,0.17),
    inset 0 -3px 7px rgba(8,80,55,0.22) !important;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .18s ease;
}
.rp-verify-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 28%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0) 82%),
    var(--accent-1) !important;
  box-shadow:
    0 1px 2px rgba(60,40,120,0.14),
    0 9px 22px rgba(95,70,190,0.24),
    inset 0 1px 0 rgba(255,255,255,0.66),
    inset 0 0 0 1px rgba(255,255,255,0.17),
    inset 0 -3px 7px rgba(50,30,110,0.20) !important;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, filter .18s ease;
}
.pay-submit:hover, .req-submit:hover, .resident-go:hover, .act-in:hover, .car-visit-btn:hover, .bulky-gov:hover, .rp-verify-btn:hover {
  transform: translateY(-1.5px); filter: brightness(1.04);
}
.pay-submit:active, .req-submit:active, .resident-go:active, .act-in:active, .car-visit-btn:active, .bulky-gov:active, .rp-verify-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 1px 2px rgba(40,20,90,0.24), inset 0 2px 5px rgba(40,20,90,0.26), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
@media (prefers-reduced-motion:reduce){
  .pay-submit,.req-submit,.resident-go,.act-in,.car-visit-btn,.bulky-gov,.rp-verify-btn{transition:none}
  .pay-submit:hover,.req-submit:hover,.resident-go:hover,.act-in:hover,.car-visit-btn:hover,.bulky-gov:hover,.rp-verify-btn:hover{transform:none}
}

/* ★v265-b 카드형 연한 버튼 — 은은한 볼록 베벨+부드러운 그림자(색·테두리 유지·라이트 테마 프리미엄). 작은 칩/탭 제외. */
.mgmt-quick-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 52%), #f6f4fc;
  box-shadow: 0 1px 1px rgba(70,50,130,0.05), 0 5px 14px rgba(95,70,175,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform .16s ease, box-shadow .18s ease, filter .16s ease;
}
.ob-now-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.0) 52%), #f3f7ff;
  box-shadow: 0 1px 1px rgba(40,70,160,0.05), 0 5px 14px rgba(60,100,220,0.13), inset 0 1px 0 rgba(255,255,255,0.95);
  transition: transform .16s ease, box-shadow .18s ease, filter .16s ease;
}
.mgmt-quick-btn:hover, .ob-now-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 2px 3px rgba(70,50,130,0.07), 0 8px 18px rgba(95,70,175,0.18), inset 0 1px 0 rgba(255,255,255,0.96);
}
.mgmt-quick-btn:active, .ob-now-btn:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: 0 1px 2px rgba(70,50,130,0.10), inset 0 1px 3px rgba(70,50,130,0.12);
}
@media (prefers-reduced-motion:reduce){
  .mgmt-quick-btn,.ob-now-btn{transition:none}
  .mgmt-quick-btn:hover,.ob-now-btn:hover{transform:none}
}

/* ★v266 (대장) ① 오버스크롤 시 하단 탭바 딸려올라감 방지 ② 주요탭 내용 볼 때 헤더 스크롤 접힘(소형폰 공간확보) */
/* ① iOS 러버밴드 차단 — fixed 탭바가 최상단 오버스크롤 때 끌려올라가는 것 방지(iOS 16.4+/26 지원) */
html, body { overscroll-behavior: none; }
body { overscroll-behavior-y: none; }
/* ② 헤더 접힘 — 스크롤 내리면 개인정보 안내배너 접고 헤더 패딩 축소 → 콘텐츠 공간 확보(소형폰 절실). 스크롤 최상단 복귀 시 펼침. */
.app-header { transition: padding-top .22s ease, padding-bottom .22s ease; }
.anon-notice { max-height: 140px; overflow: hidden;
  transition: max-height .24s ease, opacity .18s ease, margin-top .24s ease, padding .2s ease, border-width .2s ease; }
.app-header.hdr-collapsed { padding-top: calc(9px + env(safe-area-inset-top, 0)); padding-bottom: 11px; }
.app-header.hdr-collapsed .anon-notice { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
@media (prefers-reduced-motion: reduce){ .app-header, .anon-notice { transition: none; } }

/* ★v267 (대장) 콘텐츠 탭/스크롤 시 헤더 위로 눌러담기(슬라이드업) + 명시적 ⌄ 펼침. v266 hdr-collapsed 확장. 색/accent-grad/radius 전부 불변. */
/* 브랜드행 요소도 부드럽게 축소되도록 트랜지션(색·배경 불변, 크기만) */
.brand-mark { transition: width .22s ease, height .22s ease, flex-basis .22s ease, font-size .22s ease; }
.brand-name { transition: font-size .22s ease; }
.brand-sub  { display: inline-block; max-height: 30px; overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease; }

/* 접힘 시: 브랜드행 자체를 눌러담아 '위로 슬라이드업'을 체감시킨다(소형폰 +30~40px 추가확보) */
.app-header.hdr-collapsed .brand-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
.app-header.hdr-collapsed .brand-name { font-size: 15.5px; }
.app-header.hdr-collapsed .brand-sub  { max-height: 0; opacity: 0; margin-top: 0; }

/* 접힘 시에만 나타나는 ⌄ 펼침 캐럿(되돌리기 어포던스). 스크롤 없는 탭에서도 탭으로 작동. accent-grad 헤더 위 흰 글리프라 색/테마 불변. */
.hdr-expand-caret {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  z-index: 2; width: 46px; height: 16px; display: grid; place-items: center;
  color: rgba(255,255,255,0.92); font-size: 13px; line-height: 1;
  background: rgba(255,255,255,0.16); border-radius: 999px;
  opacity: 0; pointer-events: none;              /* 펼친 상태에선 완전 비활성(레이아웃/탭 방해 0) */
  transition: opacity .18s ease;
}
.app-header.hdr-collapsed .hdr-expand-caret { opacity: 1; pointer-events: auto; }

/* 접힌 상태에서 헤더 바탕은 '펼치기' 커서 힌트. 브랜드/컨트롤 위에서는 기존 기능이라 커서 원복. */
.app-header.hdr-collapsed { cursor: pointer; }
.app-header.hdr-collapsed .brand,
.app-header.hdr-collapsed .header-actions { cursor: auto; }

@media (prefers-reduced-motion: reduce){
  .brand-mark, .brand-name, .brand-sub, .hdr-expand-caret { transition: none; }
}

/* ── ★v268 헤더 뒤 배경 — 꼬마 자동차 병정 행렬(창·깃발 선봉). styles.css 기존 규칙 삭제 없이 append만. ── */
/* .cg-bridge-bg(z-index:0) 자식 → 형제 .cg-inner(z-index:1)의 흰 브랜드보다 항상 뒤. transform/opacity만·seamless 루프. */
.cgb-march { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* seamless: 동일 10기 세트를 정확히 2벌(width:max-content) · 한 벌 폭(-50%)만 이동. 한 세트≈498px≥폰 뷰포트라 어느 프레임도 안 빔. */
.cgb-col { position: absolute; top: 44px; left: 0; width: max-content; height: 34px;
  display: flex; align-items: flex-end; gap: 22px; padding-left: 8px;
  will-change: transform; animation: cgbMarch 11s linear infinite; }
.cgb-unit { position: relative; flex: 0 0 auto; }
.cgb-unit svg { display: block; overflow: visible; }
.cgb-b { display: block; will-change: transform; animation: cgbBounce .64s ease-in-out infinite; } /* 발맞춘 상하 바운스 */
/* 발맞춤 스태거 — phase 클래스로 어긋난 delay(개수 무관·2벌 모두 적용) */
.cgb-p0 .cgb-b { animation-delay: 0s; }
.cgb-p1 .cgb-b { animation-delay: -.16s; }
.cgb-p2 .cgb-b { animation-delay: -.32s; }
.cgb-p3 .cgb-b { animation-delay: -.48s; }
/* 선두 붉은 깃발 펄럭임 */
.cgb-flag { transform-origin: left center; will-change: transform; animation: cgbFlag 1.15s ease-in-out infinite; }
/* 오른쪽(전진) 행진 — 차가 바라보는 방향으로 진군(치르러 가는). 2벌 동일이라 -50%→0도 seamless. */
@keyframes cgbMarch { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes cgbBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes cgbFlag { 0%, 100% { transform: skewX(0deg) scaleX(1); } 50% { transform: skewX(-10deg) scaleX(.95); } }
/* reduced-motion: 행진·바운스·깃발 정지 · 정적 종대는 그대로 노출(숨기지 않음) */
@media (prefers-reduced-motion: reduce) {
  .cgb-col { animation: none; }
  .cgb-b, .cgb-flag { animation: none; }
}

/* ══════════════ ★v269 (대장) 시간·날씨 동적 하늘 + 단지헤더 병정 ══════════════ */
/* html[data-sky=dawn|day|dusk|night] · html[data-wx=clear|clouds|rain|snow|fog] 를 JS가 토글.
   두 헤더(.cg-bridge-bg 랜딩 · .app-header 단지) 하늘을 시간대로 통일 + 병정 복제 + 날씨 오버레이. */

/* ── 시간대 하늘 : 랜딩 브릿지 씬 (night=기존 기본 유지) ── */
html[data-sky="dawn"] .cg-bridge-bg { background: linear-gradient(180deg,#243357 0%,#5b4a80 46%,#c98a6a 82%,#e6a575 100%); }
html[data-sky="day"]  .cg-bridge-bg { background: linear-gradient(180deg,#5a93da 0%,#84b4e8 52%,#bcd8f2 100%); }
html[data-sky="dusk"] .cg-bridge-bg { background: linear-gradient(180deg,#1b2650 0%,#6a4180 48%,#d47048 86%,#e88a4a 100%); }
/* 낮/새벽엔 별 흐리게 */
html[data-sky="day"]  .cg-bridge-bg::before { opacity: 0; }
html[data-sky="dawn"] .cg-bridge-bg::before,
html[data-sky="dusk"] .cg-bridge-bg::before { opacity: .35; }
/* 달 → 낮/노을/새벽엔 해(같은 자리) */
html[data-sky="day"]  .cgb-moon,
html[data-sky="dawn"] .cgb-moon,
html[data-sky="dusk"] .cgb-moon { background: radial-gradient(circle at 42% 40%, #fff4c8, #ffcf62 70%); box-shadow: 0 0 20px 7px rgba(255,206,98,.55); }

/* ── 시간대 하늘 : 단지 보라 헤더도 통일(브랜드 흰텍스트+그림자로 가독) ── */
.app-header { transition: background .8s ease, padding-top .22s ease, padding-bottom .22s ease; }
html[data-sky="night"] .app-header { background: linear-gradient(135deg,#1b1656 0%,#2b2380 55%,#3c3094 100%); }
html[data-sky="dawn"]  .app-header { background: linear-gradient(135deg,#39406f 0%,#8a6a9c 52%,#dc9d73 100%); }
html[data-sky="day"]   .app-header { background: linear-gradient(135deg,#5f89d6 0%,#7ba2e6 55%,#a9c8f0 100%); }
html[data-sky="dusk"]  .app-header { background: linear-gradient(135deg,#28285f 0%,#7a4f8c 50%,#df8a58 100%); }
/* 낮에도 흰 브랜드 또렷하게 */
.brand-name, .brand-sub { text-shadow: 0 1px 5px rgba(20,20,50,.38); }

/* ── 병정 행렬을 단지 헤더에도(JS 복제 .cgb-march). 브랜드행 뒤(z0), 은은하게. ── */
.app-header .cgb-march { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.app-header .cgb-march .cgb-col { top: calc(env(safe-area-inset-top, 0px) + 24px); bottom: auto; }   /* safe-area 아래 브랜드행 뒤에 정렬(상태바 침범 방지) */
.app-header .cgb-march .cgb-b svg { opacity: .62; }           /* 보라/하늘 위 은은 */
.app-header .header-row, .app-header .anon-notice, .app-header .hdr-expand-caret { position: relative; z-index: 1; }  /* 병정보다 위 */
/* 접힘 시엔 병정 숨겨 얇은 바 깔끔하게 */
.app-header.hdr-collapsed .cgb-march { opacity: 0; transition: opacity .18s; }

/* ── 날씨 오버레이(JS 주입 .wx-fx) : 비 · 눈 · 구름 · 안개 ── */
.wx-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.cg-bridge-bg .wx-fx { z-index: 2; }
.app-header .wx-fx { z-index: 1; border-radius: inherit; }
html[data-wx="rain"]  .wx-fx.wx-rain  { opacity: 1; }
html[data-wx="snow"]  .wx-fx.wx-snow  { opacity: 1; }
html[data-wx="clouds"] .wx-fx.wx-cloud { opacity: 1; }
html[data-wx="fog"]   .wx-fx.wx-fog   { opacity: 1; }
/* 비 — 대각 빗줄기 낙하 */
.wx-rain { background-image: repeating-linear-gradient(100deg, transparent 0 7px, rgba(190,210,255,.30) 7px 8px, transparent 8px 15px); background-size: 100% 46px; animation: wxRain .55s linear infinite; }
@keyframes wxRain { to { background-position: -12px 46px; } }
/* 눈 — 점 낙하(2겹) */
.wx-snow { background-image:
    radial-gradient(2px 2px at 12% 20%, #fff 60%, transparent), radial-gradient(2px 2px at 34% 60%, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 58% 30%, #fff 60%, transparent), radial-gradient(2px 2px at 78% 70%, #fff 60%, transparent),
    radial-gradient(1.6px 1.6px at 90% 15%, #fff 60%, transparent);
  background-size: 140px 120px; animation: wxSnow 5.5s linear infinite; }
@keyframes wxSnow { to { background-position: 18px 120px; } }
/* 구름 — 드리프트 */
.wx-cloud { background-image:
    radial-gradient(60px 22px at 20% 30%, rgba(255,255,255,.20), transparent 70%),
    radial-gradient(80px 26px at 62% 22%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(50px 20px at 88% 38%, rgba(255,255,255,.18), transparent 70%);
  background-repeat: repeat-x; background-size: 380px 100%; animation: wxCloud 26s linear infinite; }
@keyframes wxCloud { to { background-position: 380px 0; } }
/* 안개 — 은은한 하양 헤이즈 */
.wx-fog { background: linear-gradient(180deg, rgba(210,215,230,.22), rgba(210,215,230,.10)); }

@media (prefers-reduced-motion: reduce) {
  .wx-rain, .wx-snow, .wx-cloud { animation: none; }
}
/* ══════════════ ★v269 끝 ══════════════ */

/* ══════════════ ★v270 (대장) 병정 대비색(낮·밤 모두 잘 보이게) + 브랜드 폰트색 하늘따라 ══════════════ */
/* 병정: 헤더 워시 제거 + 어두운 하늘=밝은 병정 / 밝은 하늘=진한 병정 (반대 대비). filter만 하늘따라. */
.app-header .cgb-march .cgb-b svg { opacity: .95; }                 /* v269 .62 워시 제거 */
.cgb-b svg { transition: filter .6s ease; }
/* ★v272 (대장 미검증항목·4종 정적렌더로 발견) dawn 재분류 — 새벽 하늘도 상단(병정·브랜드 위치 top44px)은 어두운 남색(#243357)이라 dusk/night와 동일 취급. day만 상단부터 밝음. */
html[data-sky="night"] .cgb-b svg,
html[data-sky="dusk"]  .cgb-b svg,
html[data-sky="dawn"]  .cgb-b svg { filter: brightness(2.2) saturate(.8); }   /* 밤·노을·새벽 어두운 상단 → 밝은 병정 */
html[data-sky="day"]   .cgb-b svg { filter: brightness(.62) contrast(1.2); }  /* 낮만 밝은 하늘 → 진한 병정 */

/* 브랜드 폰트색 — ★v272: 밝은 하늘(낮)만 진한 남색+흰그림자 / 어두운 상단 하늘(새벽·노을·밤)=흰색(기본) */
html[data-sky="day"]  .brand-name,
html[data-sky="day"]  .cg-bname {
  color: #16223f; text-shadow: 0 1px 3px rgba(255,255,255,.55); }
html[data-sky="day"]  .brand-sub {
  color: #2b3760; text-shadow: 0 1px 2px rgba(255,255,255,.45); }
/* ★v272: 낮만 안내배너 글씨 진하게(밝은 하늘 위 흰글씨 보완). 새벽은 어두운 상단이라 기본 흰글씨(밤·노을과 동일). */
html[data-sky="day"]  .app-header .anon-notice { color: #1c2748; background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.6); }
html[data-sky="day"]  .app-header .anon-notice b { color: #101a36; }
/* ══════════════ ★v270 끝 ══════════════ */

/* ══════════════ ★v271 (대장) 병정 가변 움직임 — 균일 기계행진 → 유닛마다 바운스 높이·리듬·미세 틸트 다르게(살아있는 진군) ══════════════ */
/* 유닛별 서로 다른 바운스(높이·주기·기울기). v268 균일 cgbBounce 대체(append=우선). seamless 가로행진은 그대로 linear. */
@keyframes cgbBob1 { 0%,100% { transform: translateY(0) rotate(0deg); }   50% { transform: translateY(-3.4px) rotate(-1.6deg); } }
@keyframes cgbBob2 { 0%,100% { transform: translateY(0) rotate(0deg); }   47% { transform: translateY(-1.5px) rotate(1.2deg); } }
@keyframes cgbBob3 { 0%,100% { transform: translateY(0) rotate(0deg); }   53% { transform: translateY(-2.7px) rotate(-0.9deg); } }
@keyframes cgbBob4 { 0%,100% { transform: translateY(0) rotate(0deg); }   45% { transform: translateY(-2.1px) rotate(1.5deg); } }
.cgb-p0 .cgb-b { animation: cgbBob1 .60s ease-in-out infinite 0s; }
.cgb-p1 .cgb-b { animation: cgbBob2 .82s ease-in-out infinite -.21s; }
.cgb-p2 .cgb-b { animation: cgbBob3 .53s ease-in-out infinite -.34s; }
.cgb-p3 .cgb-b { animation: cgbBob4 .71s ease-in-out infinite -.47s; }
/* 깃발 기수(선두)는 조금 더 크게 출렁 — 존재감 */
.cgb-unit:first-child .cgb-b { animation: cgbBob1 .58s ease-in-out infinite 0s; }
@media (prefers-reduced-motion: reduce) {
  .cgb-p0 .cgb-b, .cgb-p1 .cgb-b, .cgb-p2 .cgb-b, .cgb-p3 .cgb-b, .cgb-unit:first-child .cgb-b { animation: none; }
}
/* ══════════════ ★v271 끝 ══════════════ */

/* ══════════════ ★v273 자리 사진(내 차) — 카메라 촬영 미리보기·저장 표시 ══════════════ */
.car-photo-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 11px 16px;
  border-radius: 12px; border: 1.5px dashed var(--line, #d8d3e0); background: var(--card, #fff);
  color: var(--ink, #2c2a3a); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.car-photo-btn:active { transform: scale(.98); }
.car-photo-wrap { position: relative; margin-top: 10px; width: 100%; max-width: 340px; }
.car-photo-preview, .car-photo-saved { display: block; width: 100%; max-width: 340px; max-height: 230px;
  border-radius: 12px; object-fit: cover; background: #eee; }
.car-photo-saved { margin: 10px 0 2px; box-shadow: 0 2px 9px rgba(0,0,0,.14); }
.car-photo-del { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.62); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
/* ══════════════ ★v273 끝 ══════════════ */

/* ══════════════ ★v279 유도 슬라이드 · 첫 실행 위저드 · 브리핑 듣기 확대 ══════════════ */
/* 유도 슬라이드 — 앱 열면 제보 프롬프트가 탭바 위로 슬라이드 업 */
.nudge-slide { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 70; background: #fff; border: 1.5px solid rgba(20,20,40,.10); border-radius: 18px;
  box-shadow: 0 16px 44px rgba(10,10,30,.26); padding: 14px 16px 15px;
  transform: translateY(140%); opacity: 0; transition: transform .34s cubic-bezier(.2,.8,.25,1), opacity .3s; }
.nudge-slide.up { transform: none; opacity: 1; }
.ns-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 17px; color: #98a; padding: 6px; cursor: pointer; }
.ns-h { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin-right: 26px; }
.ns-p { margin: 4px 0 8px; font-size: 13px; color: #667; line-height: 1.45; }
.ns-where { font-size: 13.5px; font-weight: 800; margin-bottom: 9px; color: #334; }
.ns-row { display: flex; gap: 9px; }
.ns-row .al-rep { flex: 1; font-size: 15px; padding: 12px 8px; }

/* 첫 실행 3단계 위저드 — 큰 글씨·큰 버튼(어르신 배려) */
.onboard-veil { position: fixed; inset: 0; z-index: 90; background: rgba(12,12,26,.52);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .3s; }
.onboard-veil.up { opacity: 1; }
.obw-card { width: 100%; max-width: 460px; background: #fff; border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(30%); transition: transform .34s cubic-bezier(.2,.8,.25,1); }
.onboard-veil.up .obw-card { transform: none; }
.obw-h { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.obw-step { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1.5px solid #e6e4f2;
  border-radius: 14px; margin-bottom: 9px; background: #fbfaff; }
.obw-step.key { border-color: #6a5ae0; background: #f2efff; }
.obw-n { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #241d4f; color: #fff;
  font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.obw-step.key .obw-n { background: #6a5ae0; }
.obw-t { flex: 1; min-width: 0; }
.obw-t b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.obw-t small { display: block; font-size: 12.5px; color: #667; margin-top: 2px; line-height: 1.4; }
.obw-go { flex: none; border: 0; border-radius: 12px; background: #241d4f; color: #fff;
  font-size: 14px; font-weight: 800; padding: 11px 14px; cursor: pointer; }
.obw-step.key .obw-go { background: #6a5ae0; }
.obw-done { display: block; width: 100%; margin-top: 6px; border: 0; border-radius: 14px;
  background: #eef0f5; color: #223; font-size: 16px; font-weight: 800; padding: 14px; cursor: pointer; }

/* 출근길 30초 브리핑 [듣기] — 손가락 크기 확대(대장 지시 '버튼 조정') */
.bcb-row { flex-wrap: wrap; row-gap: 6px; }
.bcb-listen { font-size: 14px; font-weight: 800; padding: 9px 16px; min-height: 38px; border-radius: 12px; }

/* ══════════════ ★v280 클릭 확실성·브리핑 레이아웃·감지속도(대장 지시) ══════════════ */
/* 자동 입·출차 배너 버튼 — "확실히 클릭할 수 있게" 확대 */
.ab-btn { min-height: 56px; font-size: 17px; border-radius: 16px; }
.al-flchips button, .al-flchips .al-flchip { min-height: 48px; font-size: 16px; padding: 10px 16px; }
.ns-row .al-rep { font-size: 16px; padding: 14px 8px; min-height: 52px; }

/* 출근길 30초 브리핑 — [듣기]를 오른쪽 고정 큰 버튼으로(제목 2줄 허용) */
.bcb-row { display: grid; grid-template-columns: 30px 1fr 96px; grid-template-areas: "ico t btn" "ico when btn";
  align-items: center; column-gap: 10px; row-gap: 3px; }
.bcb-ico { grid-area: ico; }
.bcb-t { grid-area: t; white-space: normal; line-height: 1.35; }
.bcb-when { grid-area: when; }
.bcb-listen { grid-area: btn; min-height: 48px; font-size: 15px; font-weight: 800; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; }

/* ★v280 면수 확보 줄(시트) + 특수칸 존재이유 캡션 */
.sheet-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 10px 0 2px; padding: 11px 13px; border: 1.5px dashed var(--line); border-radius: 13px; background: var(--panel); }
.sheet-cap-t { font-size: 14.5px; color: var(--ink-soft); }
.sheet-cap-t b { color: var(--ink); }
.sheet-cap-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 11px;
  font-size: 13.5px; font-weight: 800; padding: 9px 13px; min-height: 40px; cursor: pointer; }
.sheet-cap-btn.save { background: var(--accent-grad); color: #fff; border-color: transparent; }
.sheet-cap-form { display: flex; gap: 8px; align-items: center; }
.sheet-cap-form input { width: 90px; min-height: 40px; border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 15px; font-weight: 700; padding: 6px 10px; }
.ob-seg-why { margin: 6px 2px 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ══════════════ ★v281 어르신 편의(3칸 그림식·접기·가족초대·한줄듣기) ══════════════ */
.cm-3step { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 12px; }
.cm-3step .c3 { flex: 1; text-align: center; background: #f4f1ff; border: 1.5px solid #ddd6f8; border-radius: 13px;
  padding: 10px 6px; font-size: 13px; line-height: 1.45; color: #3a3560; font-weight: 700; }
.cm-3step .c3 b { display: block; width: 26px; height: 26px; margin: 0 auto 5px; border-radius: 9px;
  background: #6a5ae0; color: #fff; font-size: 14px; line-height: 26px; }
.cm-3step .c3a { align-self: center; font-size: 16px; color: #8b84b8; font-weight: 800; }
.cm-more { margin: 10px 0 2px; }
.cm-more summary { cursor: pointer; font-size: 13.5px; font-weight: 800; color: #5b54a8; padding: 9px 4px; list-style: none; }
.cm-more summary::-webkit-details-marker { display: none; }
.cm-more[open] summary { color: #3a3560; }
.bc-brief-readall { margin-left: auto; }
.bc-brief-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ★v282 내 아파트 바로 가기 — 게이트 최상단 원탭 복귀 */
#cgMyApt { margin: 0 0 14px; }
.cg-myapt { display: block; width: 100%; border: 0; border-radius: 18px; padding: 22px 20px; min-height: 72px;
  background: linear-gradient(135deg, #6a5ae0, #4a3fb5); color: #fff; font-size: 20px; font-weight: 800;
  text-align: center; cursor: pointer; box-shadow: 0 10px 26px rgba(74, 63, 181, .34); }   /* ★v284 어르신 확대(대장) */
.cg-myapt b { text-decoration: underline; }

/* ★v289 합의 대기 배지 — 신호 수신됨·점등 전(정직 게이트 유지) */
.pcell-agree { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 800; color: #7a5b12;
  background: #fdf3dc; border: 1px solid #efd9a4; border-radius: 999px; padding: 3px 9px; }

/* ★비콘 실측 화면(2026-07-07 대장 파일럿 도구) — #beacon 진입 오버레이 */
.bm-veil { position: fixed; inset: 0; z-index: 9600; background: rgba(20,26,32,.55);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .28s ease; }
.bm-veil.up { opacity: 1; }
.bm-card { width: 100%; max-width: 460px; background: #fff; border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(24px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1); max-height: 82vh; overflow-y: auto; }
.bm-veil.up .bm-card { transform: translateY(0); }
.bm-h { display: flex; align-items: center; justify-content: space-between; }
.bm-h b { font-size: 18px; }
.bm-x { border: none; background: #f0f2f4; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.bm-uuid { margin: 8px 0 4px; font-size: 12px; color: #7a828a; }
.bm-uuid code { background: #f2f4f6; padding: 2px 6px; border-radius: 6px; }
.bm-stat { margin: 10px 0; padding: 12px; background: #eef4ff; border-radius: 12px; font-size: 14px; font-weight: 700; color: #1f3a63; }
.bm-list { display: flex; flex-direction: column; gap: 8px; }
.bm-row { border: 1px solid #e6e9ec; border-radius: 12px; padding: 10px 12px; }
.bm-id { font-weight: 800; font-size: 15px; }
.bm-m { margin-top: 3px; font-size: 13px; color: #4a525a; }
.bm-note { margin-top: 12px; font-size: 12px; color: #8a929a; line-height: 1.5; }

/* ★#5 외부차 억제 실적(2026-07-07) — 관리소 게시용 */
.ad-deter-grid { display: flex; gap: 8px; margin: 8px 0; }
.ad-deter-grid .adt { flex: 1; background: #f6f8fa; border-radius: 12px; padding: 12px 8px; text-align: center; }
.ad-deter-grid .adt b { display: block; font-size: 24px; color: #1f3a63; }
.ad-deter-grid .adt span { font-size: 12px; color: #6a727a; }
.ad-deter-break { font-size: 13px; color: #4a525a; margin: 6px 2px 10px; }
.ad-deter-post { background: #fff8ec; border: 1px solid #f0d9a8; border-radius: 12px; padding: 12px; }
.ad-deter-post .adp-label { font-size: 12px; font-weight: 700; color: #8a6d2a; margin-bottom: 6px; }
.ad-deter-post .adp-box { font-size: 14px; color: #2a2f35; background: #fff; border-radius: 8px; padding: 10px; line-height: 1.5; }
.ad-deter-post .adp-copy { margin-top: 8px; border: none; background: #3a6ea5; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ★v303 앱스토어 리더앱 게이트 — 네이티브(iOS/안드)에선 유료 구독가격·"유료 구독 시작" CTA·구매조건(세금계산서·청약철회) 숨김(Apple 3.1.1). 무료 파일럿·도입 문의 리드폼·웹은 그대로 */
.pk-native .sub-or,
.pk-native .pay-amount,
.pk-native .pay-trust,
.pk-native .sp-after,
.pk-native .sp-brand { display: none !important; }
.pk-native .brand-app.brand-admission { display:none !important; }
.pk-native .pay-foot .pk-web-only { display: none; }

/* ★v304 전기차 충전 알림 — 시작 버튼·점유 현황·슬라이드 */
.ev-charge-btn { display: block; width: 100%; margin: 10px 0 4px; border: none; border-radius: 14px; padding: 14px 16px; background: linear-gradient(180deg,#2f9e6e,#1f7d55); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(31,125,85,.28); text-align: center; }
.ev-charge-btn small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; opacity: .92; }
.ev-occ { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.ev-occ-row { font-size: 13.5px; color: #2a3a34; background: #eef7f1; border: 1px solid #cfe7da; border-radius: 10px; padding: 8px 11px; }
.ev-occ-row.over { background: #fdeeee; border-color: #f2c9c6; color: #8a2b26; }
.ev-occ-row .ev-over { font-weight: 800; color: #c0392b; }
.ev-slide .al-rep { background: linear-gradient(180deg,#2f9e6e,#1f7d55); color: #fff; }
.ev-slide .al-rep.ev-dur { background: #eef7f1; color: #1f7d55; border: 1.5px solid #cfe7da; font-weight: 800; }

/* ★v306 전기차 충전 바로가기 — 유형 미등록 시 전기차 탭 강조 플래시 */
.nh-flash { animation: nhFlash 1.5s ease-in-out; }
@keyframes nhFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(47,158,110,0); } 30%,60% { box-shadow: 0 0 0 4px rgba(47,158,110,.55); } }

/* ★v309 신고 보완(대장 지시 — 단톡방 저격 대체·버튼 부각) */
.rp-why { background: #fdf1ee; border: 1.5px solid #f3d2c9; border-radius: 12px; padding: 10px 12px; color: #8a3a28; font-size: 13.5px; }
.rp-firelaw { background: #fff7ed; border: 1.5px solid #f0ddc2; border-radius: 14px; padding: 12px 14px; margin: 4px 0 14px; }
.rp-firelaw .rfl-h { font-weight: 900; font-size: 14.5px; color: #9a4a12; margin-bottom: 8px; }
.rp-firelaw .rfl-list { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.rp-firelaw .rfl-list li { font-size: 13px; line-height: 1.55; color: #6b4a2a; }
.rp-firelaw .rfl-list b { color: #9a4a12; }
.rp-quiet { margin-top: 10px; background: #f2f7ff; border: 1.5px solid #d5e4f7; border-radius: 12px; padding: 9px 11px; }
.nh-report-big { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #f0b9ad; background: linear-gradient(135deg, #fff2ee, #ffe3dc); cursor: pointer; text-align: left; box-shadow: 0 3px 10px rgba(200, 60, 30, .10); }
.nh-report-big:active { transform: scale(.985); }
.nh-report-big .nrb-ic { font-size: 26px; flex: 0 0 auto; }
.nh-report-big .nrb-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.nh-report-big .nrb-t b { font-size: 15px; color: #8a2a18; font-weight: 900; }
.nh-report-big .nrb-t small { font-size: 12px; color: #a05a48; line-height: 1.4; }
.nh-report-big .nrb-go { font-size: 18px; font-weight: 900; color: #c04a30; flex: 0 0 auto; }

/* ═══ ★v311 주소검색 인앱 임베드 오버레이 — 팝업 차단(네이티브 웹뷰) 무관 ═══ */
#pcOverlay { position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 40, .55); display: flex; align-items: flex-end; justify-content: center; }
#pcOverlay .pc-sheet { width: 100%; max-width: 520px; height: min(78vh, 640px); background: #fff; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
#pcOverlay .pc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; flex: 0 0 auto; }
#pcOverlay .pc-close { border: 0; background: none; font-size: 18px; padding: 4px 10px; cursor: pointer; color: var(--ink); }
#pcOverlay .pc-body { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0); }

/* ★v315 — v311 플로팅 홈 버튼 제거(하단 🏠 첫화면 탭으로 대체 · 대장 지시) */

/* ═══ ★v313 설명서(가이드 사이트) 버튼 — 홈 푸터(대장 지시 2026-07-15) ═══ */
.foot-guide { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 0 0 12px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 2px 8px rgba(40, 34, 80, .06); }
.foot-guide .foot-guide-sub { font-size: 12px; font-weight: 700; color: #6d5df6; }
.foot-guide:active { transform: scale(.985); }

/* ═══ ★v318 자동감지 상태 진단 카드(내 차 탭 하단) — 실측 전용·네이티브에서만 표시 ═══ */
.gd-card { margin: 14px 0 4px; padding: 13px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 2px 8px rgba(40, 34, 80, .06); }
.gd-title { font-weight: 900; font-size: 14px; color: var(--ink); margin-bottom: 7px; }
.gd-title small { font-weight: 700; font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.gd-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.gd-row b { font-weight: 800; }
.gd-row .gd-ico { flex: 0 0 auto; font-size: 13px; }
.gd-row small { flex-basis: 100%; margin-left: 24px; color: var(--ink-faint); font-size: 11.5px; line-height: 1.4; }
.gd-row.gd-bad b { color: #c04a30; }
.gd-btn { display: block; width: 100%; margin-top: 9px; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.gd-btn:active { transform: scale(.985); }
.gd-btn-hot { background: #6d5df6; border-color: #6d5df6; color: #fff; }

/* v329 final cascade lock — legacy sections below the reset block must not restore the old six-action home. */
.legacy-panel { display: none !important; }
.ob-now-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.ob-now-btn { min-height: 86px !important; padding: 13px 12px !important; border: 1px solid var(--line) !important; border-radius: 15px !important; background: #fff !important; box-shadow: var(--shadow-sm) !important; }
.nh-report-big { margin-top: 10px !important; border-radius: 15px !important; border: 1px solid #f2c6c2 !important; background: #fff5f4 !important; box-shadow: none !important; }
.tabbar.tabbar-4 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.tabbar [hidden] { display: none !important; }
.app-header .cgb-march, .app-header .wx-fx { display: none !important; }

/* v330 — entry-first parking radar and concise resident actions */
.parking-radar { margin: 12px 0 16px; padding: 18px; border: 1px solid #dfe6f1; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(19,45,84,.08); }
.pr-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pr-kicker { color:#2563eb; font-size:12px; font-weight:900; letter-spacing:.08em; }
.pr-head h2 { margin:3px 0 0; font-size:21px; letter-spacing:-.04em; }
.pr-basis { flex:none; padding:6px 9px; border-radius:999px; background:#eff6ff; color:#315ca8; font-size:11px; font-weight:800; }
.pr-reco { margin:14px 0; padding:13px 14px; border-radius:14px; background:#f4f7fb; color:#43516a; font-size:14px; line-height:1.5; }
.pr-reco b { color:#14223a; }
.pr-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.pr-card { min-width:0; min-height:116px; padding:12px 6px; border:1.5px solid #dce3ee; border-radius:16px; background:#f8fafc; color:#27364d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; }
.pr-card .pr-icon { display:grid; place-items:center; min-width:34px; height:30px; padding:0 6px; border-radius:9px; background:#e9eef6; font-size:13px; font-weight:900; }
.pr-card b { font-size:14px; }.pr-card .pr-state { font-size:17px; font-weight:900; }.pr-card small { font-size:10.5px; color:#718096; }
.pr-card.green { background:#f0fbf5; border-color:#94d7b3; }.pr-card.green .pr-state{color:#087443}
.pr-card.yellow { background:#fff9e9; border-color:#edce74; }.pr-card.yellow .pr-state{color:#9a6510}
.pr-card.red { background:#fff3f2; border-color:#e9aaa4; }.pr-card.red .pr-state{color:#b43a30}
.pr-map-toggle { width:100%; margin-top:12px; min-height:44px; border:0; border-radius:13px; background:#eef3fa; color:#263e66; font-size:14px; font-weight:800; cursor:pointer; }
.car-move,.car-reg { padding:18px !important; }
.car-move .cm-head-text span,.car-reg .cm-head-text span { font-size:13.5px !important; line-height:1.4 !important; }
.car-move .cm-note,.car-reg .cm-note { margin:9px 2px 0 !important; font-size:12px !important; line-height:1.45 !important; color:#69778d !important; }
.car-move .cm-more { margin-top:4px; }
.signage-value { margin:0 0 12px; color:#667085; font-size:13px; line-height:1.5; }
.signage-stage { height:360px !important; }
.signage-stage .signboard:nth-child(2) { display:none !important; }
.signage-stage .signboard { width:100% !important; }
.pr-unknown { margin:9px 2px 0; color:#8a651f; font-size:11.5px; line-height:1.4; }

.utility-sheet { padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
.utility-label { margin:15px 0 8px; color:#60738a; font-size:11px; font-weight:900; letter-spacing:.04em; }
.utility-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0 14px; }
.utility-btn { min-height:106px; border:1px solid #dfe6f1; border-radius:17px; background:#fff; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:15px; text-align:left; cursor:pointer; box-shadow:0 4px 14px rgba(20,45,80,.06); }
.utility-btn span { font-size:23px; }.utility-btn b { font-size:15px;color:#17243a; }.utility-btn small { font-size:11.5px;color:#708096; }
.utility-profile { grid-column:1/-1; min-height:82px; border-color:#b8d3f2; background:#eef6ff; }
.utility-admin { width:100%; min-height:44px; border:0; border-radius:13px; background:#eef2f7; color:#526177; font-size:13px; font-weight:800; }

/* v356 — 브랜드 생태계: 같은 정보 궤, 서비스별 분위기, 홈에 펼친 구조 */
.brand-hub { margin:18px 14px 0; }
.brand-network { margin:18px 0 12px; padding:15px; border:1px solid #dce5ef; border-radius:20px; background:#f7fafc; }
.brand-network-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.brand-network-head span,.brand-channels>div>span { display:block; color:#2870ba; font-size:10.5px; font-weight:900; }
.brand-network-head h3,.brand-channels h3 { margin:3px 0 0; color:#152b46; font-size:18px; line-height:1.2; }
.brand-network-head>small { max-width:125px; color:#77869a; font-size:10px; line-height:1.35; text-align:right; }
.brand-current { display:flex; align-items:center; gap:10px; min-height:62px; margin-bottom:9px; padding:9px 11px; border-radius:16px; background:#102f55; color:#fff; }
.brand-current img,.brand-app img { width:43px; height:43px; flex:none; border-radius:12px; object-fit:cover; box-shadow:0 2px 8px rgba(15,41,71,.15); }
.brand-current>span,.brand-app>span { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.brand-current b,.brand-app b { font-size:14px; font-weight:900; }
.brand-current small { color:#c9daec; font-size:10.5px; }
.brand-current em { flex:none; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.13); color:#fff; font-size:9px; font-style:normal; font-weight:900; }
.brand-app-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.brand-app { display:grid; grid-template-columns:43px minmax(0,1fr) 10px; align-items:center; gap:8px; min-height:67px; padding:9px; border:1px solid #dce5ef; border-radius:15px; background:#fff; color:#172c45; text-decoration:none; }
.brand-app.brand-kids-move { background:#fff8f3; border-color:#f6d8c8; }
.brand-app.brand-outing { background:#f5fbf1; border-color:#d3e8c8; }
.brand-app.brand-study { background:#f7f5ff; border-color:#ddd6ff; }
.brand-app.brand-archive { background:#fffdf6; border-color:#ece2c9; }
.brand-app.brand-care { background:#f1f6e7; border-color:#d8e3c4; }
.brand-app.brand-care i { color:#6f7b68; font-size:8px; }
.brand-app.brand-admission { grid-column:1/-1; background:linear-gradient(135deg,#f1f7ff 0%,#fff9e9 100%); border-color:#bcd7fa; }
.brand-app.brand-admission i { color:#2476ed; }
.brand-app small { overflow:hidden; color:#718095; font-size:9.5px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.brand-app i { color:#276cba; font-size:18px; font-style:normal; font-weight:900; }
.brand-app:active,.brand-social:active,.foot-network:active { transform:scale(.98); }
.brand-channels { margin:0 0 12px; padding:15px; border:1px solid #e0e7ef; border-radius:20px; background:#fff; }
.brand-channels nav { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }
.brand-social { display:flex; min-height:66px; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid #e0e6ee; border-radius:14px; background:#f8fafc; color:#25364b; font-size:9.5px; font-weight:850; text-decoration:none; }
.brand-social svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.brand-social img { width:25px; height:25px; object-fit:contain; }
.brand-social .fill { fill:currentColor; stroke:none; }.brand-social .white { fill:#fff; }
.brand-social.instagram { color:#b33170; }.brand-social.youtube { color:#e1261c; }.brand-social.threads { color:#121212; }
.brand-channels>p { margin:10px 0 0; color:#7b8899; font-size:10px; text-align:center; }
.foot-network { display:flex; align-items:center; gap:10px; width:100%; min-height:62px; margin:0 0 12px; padding:10px 13px; border:1px solid #d8e2ee; border-radius:16px; background:#f8fafc; color:#233b58; font:inherit; text-align:left; }
.foot-network-mark { display:grid; width:36px; height:36px; flex:none; place-items:center; border-radius:11px; background:#e8f2fd; color:#1768b4; font-size:21px; font-weight:500; }
.foot-network>span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }.foot-network b { font-size:13px; }.foot-network small { color:#718095; font-size:10px; }.foot-network i { color:#2870ba; font-size:18px; font-style:normal; font-weight:900; }
@media(max-width:360px){.brand-app-grid{grid-template-columns:1fr}.brand-network-head>small{display:none}.brand-app.brand-admission{grid-column:auto}}
.rp-official { display:flex; align-items:center; justify-content:center; min-height:50px; margin-top:9px; border:1.5px solid #cfdcf0; border-radius:14px; background:#f5f8fd; color:#244f91; font-size:14px; font-weight:850; text-decoration:none; }

/* 핵심 화면에서는 설명을 접고, 기능은 그대로 보존한다. */
#view-car .geo-optin-note,#view-car .geo-optin-fixed,#view-car .geo-data-btns { display:none !important; }
#view-car .car-dong-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:visible !important; padding-bottom:0; }
#view-car .car-dong-grid > * { width:100%; min-width:0; min-height:52px; }
#view-car .radar-auto-guide { margin:0 16px 12px; padding:15px 16px; border:1px solid #cfe0f5; border-radius:17px; background:#f5f9ff; color:#33465f; }
#view-car .radar-auto-guide b { display:block; margin-bottom:7px; color:#17396b; font-size:15px; }
#view-car .radar-auto-guide span { display:block; font-size:12.5px; line-height:1.5; }
#view-car .zone-learn-card { margin:0 16px 12px; padding:15px 16px; border:1px solid #cfe6d8; border-radius:17px; background:#f4fbf7; color:#315241; }
#view-car .zone-learn-card b { display:block; margin-bottom:5px; color:#11603b; font-size:15px; }
#view-car .zone-learn-card p { margin:0; font-size:12.5px; line-height:1.5; }
#view-car .zone-learn-card .zlc-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
#view-car .zone-learn-card .zlc-chip { padding:6px 9px; border-radius:999px; background:#fff; border:1px solid #cfe6d8; font-size:11.5px; font-weight:800; }
#view-car .zone-learn-card .zlc-reset { margin-top:9px; padding:7px 9px; border:0; background:transparent; color:#687c70; font-size:11.5px; text-decoration:underline; }
#view-car .gd-card-top { margin:0 16px 12px; }
.zone-learn-backdrop { position:fixed; inset:0; z-index:1800; background:rgba(10,22,40,.42); }
.zone-learn-sheet { position:fixed; z-index:1801; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,560px); max-height:82dvh; overflow-y:auto; box-sizing:border-box; padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px)); border-radius:24px 24px 0 0; background:#fff; box-shadow:0 -16px 42px rgba(16,35,65,.22); }
.zone-learn-handle { width:42px; height:4px; margin:0 auto 13px; border-radius:99px; background:#d5dce6; }
.zone-learn-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.zone-learn-head small { color:#2364aa; font-size:11px; font-weight:850; }
.zone-learn-head h3 { margin:3px 0 0; color:#17243a; font-size:21px; line-height:1.25; }
.zone-learn-head button { width:42px; height:42px; border:0; border-radius:50%; background:#eef2f7; color:#4c5b70; font-size:18px; }
.zone-learn-sheet > p { margin:12px 0 14px; color:#627086; font-size:13px; line-height:1.5; }
.zone-learn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.zone-learn-grid button,.zone-learn-unknown { min-height:52px; border:1.5px solid #dce4ee; border-radius:14px; background:#f8fafc; color:#26364d; font-size:14px; font-weight:850; }
.zone-learn-grid button:active,.zone-learn-unknown:active { transform:scale(.98); }
.zone-learn-unknown { width:100%; margin-top:10px; background:#fff8eb; border-color:#ead5a9; color:#76551f; }
#view-parking #signageMountParking,#view-parking #gateFamBlock,#view-parking #ledgerBlock,#view-parking .lr-block,#view-parking .linchpin,#view-parking .sub-card,#view-parking .record-surveillance { display:none !important; }
#view-parking .tab-intro .tab-p br { display:none; }
#view-parking .tab-intro .tab-p { font-size:13.5px; }

/* v332 — 첫 화면은 전국 순위가 아니라 즉시 행동하는 주차 홈 */
#complexGate .cg-bridge-bg,#complexGate .cg-brand { display:none !important; }
#complexGate .cg-inner { padding-top:max(24px,env(safe-area-inset-top)); }
#complexGate .cg-title { margin-top:4px; font-size:32px; line-height:1.12; letter-spacing:-.055em; }
#complexGate .cg-sub { margin:10px 0 16px; font-size:14px; }
#cgMyApt { margin:0 0 12px; }
.cg-myapt { position:relative; display:flex !important; flex-direction:column; align-items:flex-start !important; gap:3px; min-height:132px !important; padding:20px !important; text-align:left !important; background:linear-gradient(135deg,#17396b,#2563b8) !important; border-radius:22px !important; }
.cg-myapt .cg-myapt-k { font-size:12px; font-weight:850; color:#b9d6ff; letter-spacing:.04em; }
.cg-myapt b { font-size:25px; color:#fff; text-decoration:none !important; }
.cg-myapt small { font-size:12.5px; color:#dbe9ff; font-weight:650; }
.cg-myapt i { position:absolute; right:18px; bottom:18px; color:#fff; font-size:14px; font-weight:850; font-style:normal; }
.cg-quick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.cg-quick-btn { min-width:0; min-height:94px; padding:11px 6px; border:1px solid #dfe6f1; border-radius:16px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; cursor:pointer; box-shadow:0 4px 14px rgba(23,57,107,.06); }
.cg-quick-btn span{font-size:21px}.cg-quick-btn b{font-size:13px;color:#18253a}.cg-quick-btn small{font-size:10px;color:#738096;line-height:1.3}
.cg-search-label { margin:0 2px 8px; font-size:15px; font-weight:900; color:#17243a; }
#complexGate .cg-postcode-btn { margin-top:8px; }
#complexGate .cg-list { max-height:none; overflow:visible; }
#complexGate .cg-list:empty { display:none; }
#complexGate .cg-foot { margin-top:14px; }

/* ═══ v335 — 귀가 추천 중심 제품 개편 ═══ */
:root {
  --pk-navy:#0f2947;
  --pk-blue:#1768e5;
  --pk-sky:#eaf3ff;
  --pk-mint:#dff7ec;
  --pk-green:#087443;
  --pk-bg:#f4f7fb;
  --pk-text:#101c2d;
  --pk-muted:#637187;
  --pk-line:#dfe6ef;
}
.obw-skip { display:block; width:100%; min-height:48px; margin-top:8px; border:0; background:transparent; color:#526176; font-size:15px; font-weight:800; }
body { background:var(--pk-bg) !important; color:var(--pk-text); }
#app { background:var(--pk-bg); }
.app-header { background:rgba(244,247,251,.94) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:0 !important; }
.anon-notice { display:none !important; }
.brand-name { color:var(--pk-navy) !important; }

/* 오래된 '지금 가도 되나요' 답안과 통계는 새 레이더와 중복이므로 주민 홈에서 제거. */
#view-map > .home-row,
#view-map > #homePicker,
#view-map > #heroCard,
#view-map > .fold-stats,
#view-map > #nowHooks { display:none !important; }
#view-map { padding-top:6px; }

.arrival-ready { margin:8px 0 12px; padding:24px 20px 18px; border-radius:26px; color:#fff; background:linear-gradient(145deg,#102d50 0%,#16487b 68%,#1768e5 140%); box-shadow:0 16px 34px rgba(15,41,71,.22); overflow:hidden; position:relative; }
.arrival-ready::after { content:""; position:absolute; width:180px; height:180px; right:-92px; top:-78px; border:28px solid rgba(255,255,255,.08); border-radius:50%; }
.ar-copy,.ar-setup,.ar-trust { position:relative; z-index:1; }
.ar-kicker { display:block; margin-bottom:8px; color:#9dc9ff; font-size:12px; font-weight:900; letter-spacing:.08em; }
.ar-copy h1 { margin:0; font-size:27px; line-height:1.18; letter-spacing:-.055em; }
.ar-copy p { margin:11px 0 18px; max-width:330px; color:#d8e7f7; font-size:13px; line-height:1.55; font-weight:600; }
.ar-setup { width:100%; min-height:72px; border:0; border-radius:18px; padding:13px 14px; display:flex; align-items:center; gap:12px; text-align:left; background:#fff; color:var(--pk-text); box-shadow:0 8px 22px rgba(4,21,40,.16); cursor:pointer; }
.ar-setup-icon { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--pk-sky); color:var(--pk-blue); font-size:24px; font-weight:900; }
.ar-setup-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.ar-setup-copy b { font-size:15.5px; font-weight:900; }
.ar-setup-copy small { color:var(--pk-muted); font-size:11.5px; line-height:1.35; font-weight:650; }
.ar-setup-go { color:var(--pk-blue); font-size:19px; font-weight:900; }
.ar-setup.ready .ar-setup-icon { background:var(--pk-mint); color:var(--pk-green); }
.ar-setup.ready .ar-setup-icon::before { content:"✓"; font-size:20px; }
.ar-setup.ready .ar-setup-icon { font-size:0; }
.ar-trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:13px; }
.ar-trust span { color:#c5d9ee; font-size:9.5px; font-weight:750; text-align:center; white-space:nowrap; }

/* v354 — 시작 화면 사용설명서: 첫 진입과 주민 홈에서 스크롤 없이 찾을 수 있게 한다. */
.start-guide { display:flex; align-items:center; gap:11px; min-height:68px; margin:0 0 12px; padding:12px 14px; border:1px solid #cad9eb; border-radius:18px; background:#fff; color:var(--pk-text); text-decoration:none; box-shadow:0 6px 18px rgba(15,41,71,.06); }
.start-guide-icon { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:13px; background:var(--pk-sky); font-size:21px; }
.start-guide-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.start-guide-copy b { color:#183b65; font-size:14.5px; font-weight:900; line-height:1.3; }
.start-guide-copy small { color:var(--pk-muted); font-size:11px; font-weight:650; line-height:1.4; }
.start-guide-go { color:var(--pk-blue); font-size:19px; font-weight:900; }
.start-guide:active,.cg-guide:active { transform:scale(.985); }

.parking-radar { margin:12px 0 !important; padding:19px !important; border:1px solid var(--pk-line) !important; border-radius:22px !important; box-shadow:0 8px 24px rgba(15,41,71,.07) !important; }
.pr-kicker { color:var(--pk-blue) !important; }
.pr-head h2 { font-size:22px !important; color:var(--pk-text); }
.pr-basis { background:#eef2f7 !important; color:#657287 !important; }
.pr-reco { margin:13px 0 !important; padding:14px !important; border-radius:15px !important; background:#f3f7fc !important; color:#526178 !important; }
.pr-grid { grid-template-columns:1fr !important; gap:8px !important; }
.pr-card { min-height:68px !important; padding:10px 12px !important; display:grid !important; grid-template-columns:42px 1fr auto !important; grid-template-rows:auto auto !important; column-gap:10px !important; justify-items:start !important; text-align:left !important; border-radius:15px !important; }
.pr-card .pr-icon { grid-row:1 / 3; align-self:center; width:42px; height:42px !important; }
.pr-card b { align-self:end; font-size:14px !important; }
.pr-card .pr-state { grid-column:3; grid-row:1 / 3; align-self:center; font-size:16px !important; }
.pr-card small { align-self:start; font-size:11px !important; }
.pr-map-toggle { background:#eef3f9 !important; color:#28466c !important; }

.home-tools { margin:12px 0 18px; padding:19px; background:#fff; border:1px solid var(--pk-line); border-radius:22px; box-shadow:0 8px 24px rgba(15,41,71,.06); }
.home-tools-head span { color:#dc5a4d; font-size:11px; font-weight:900; letter-spacing:.05em; }
.home-tools-head h2 { margin:3px 0 13px; font-size:21px; letter-spacing:-.04em; }
.home-tool { width:100%; min-height:86px; border:1px solid var(--pk-line); border-radius:16px; background:#fff; padding:13px; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.home-tool-main { border-color:#f0c9c4; background:#fff7f5; }
.home-tool span:not(.ht-icon) { display:flex; min-width:0; flex-direction:column; gap:3px; }
.home-tool .ht-icon { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; background:#f0f4f8; font-size:20px; }
.home-tool b { color:var(--pk-text); font-size:14px; line-height:1.3; }
.home-tool small { color:var(--pk-muted); font-size:10.5px; line-height:1.35; }
.home-tool i { margin-left:auto; color:#d84c3f; font-style:normal; font-weight:900; }
.home-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.home-tool-grid .home-tool { min-height:104px; flex-direction:column; align-items:flex-start; }

/* 첫 진입: 검색 포털이 아니라 제품 가치를 먼저 보여준다. */
#complexGate { background:linear-gradient(180deg,#edf5ff 0,#f7f9fc 48%,#fff 100%) !important; }
#complexGate .cg-inner { padding:calc(24px + env(safe-area-inset-top)) 18px 22px !important; }
.cg-eyebrow { margin-bottom:9px; color:var(--pk-blue); font-size:11px; line-height:1.4; font-weight:900; letter-spacing:.04em; }
#complexGate .cg-title { margin:0 !important; color:var(--pk-navy) !important; font-size:31px !important; line-height:1.17 !important; }
#complexGate .cg-sub { margin:12px 0 18px !important; max-width:360px; color:#5b6d84 !important; font-size:13.5px !important; line-height:1.55; font-weight:650; }
#complexGate .cg-quick { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
#complexGate .cg-quick-btn { min-height:108px !important; padding:14px !important; align-items:flex-start !important; text-align:left !important; box-shadow:0 6px 18px rgba(15,41,71,.07) !important; }
#complexGate .cg-quick-primary { grid-column:1 / -1; min-height:92px !important; position:relative; flex-direction:row !important; align-items:center !important; gap:11px !important; color:#fff; border:0 !important; background:linear-gradient(135deg,#1559b7,#1768e5) !important; }
#complexGate .cg-quick-primary span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(255,255,255,.15); }
#complexGate .cg-quick-primary b,#complexGate .cg-quick-primary small { color:#fff !important; }
#complexGate .cg-quick-primary small { opacity:.8; }
#complexGate .cg-quick-primary i { margin-left:auto; font-size:13px; font-style:normal; font-weight:900; white-space:nowrap; }
.cg-promise { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 22px; }
.cg-promise span { padding:6px 8px; border-radius:999px; background:#e9f1fb; color:#526c8c; font-size:9.5px; font-weight:800; }
.cg-guide { display:flex; align-items:center; gap:10px; min-height:62px; margin:-9px 0 18px; padding:11px 13px; border:1px solid #cbd9ea; border-radius:17px; background:#fff; color:var(--pk-text); text-decoration:none; box-shadow:0 6px 18px rgba(15,41,71,.06); }
.cg-guide > span:first-child { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--pk-sky); font-size:20px; }
.cg-guide > span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }
.cg-guide b { color:#183b65; font-size:14px; font-weight:900; }
.cg-guide small { color:var(--pk-muted); font-size:10.5px; line-height:1.35; font-weight:650; }
.cg-guide i { color:var(--pk-blue); font-size:18px; font-style:normal; font-weight:900; }
#complexGate .cg-search-label { margin-top:0 !important; }
#complexGate .cg-search { border-color:#d7e0eb !important; box-shadow:none !important; }
#complexGate .cg-postcode-btn { background:#eef3f8 !important; color:#455c78 !important; }
#complexGate .cg-foot { color:#79869a; font-size:10.5px; line-height:1.5; }
.cg-myapt { background:linear-gradient(135deg,#0f2947,#174b7e) !important; }

.tabbar { border-top:1px solid rgba(204,214,226,.9) !important; background:rgba(255,255,255,.94) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.tab-btn.on { color:var(--pk-blue) !important; }
.tab-btn[data-tab="map"] .tab-txt { font-size:11px; }
.tab-btn[data-tab="map"] .tab-txt::after { content:none; }

@media (max-width:370px) {
  .arrival-ready { padding:21px 16px 16px; }
  .ar-copy h1 { font-size:24px; }
  .ar-trust span { font-size:8.5px; }
  #complexGate .cg-title { font-size:28px !important; }
}

/* v335 — 내 차는 설정 폼이 아니라 세 가지 행동에서 시작 */
#view-car .tab-intro,#view-parking .tab-intro { padding:15px 4px 8px; }
#view-car .tab-h,#view-parking .tab-h { font-size:27px; letter-spacing:-.05em; }
#view-car .tab-p,#view-parking .tab-p { margin-top:5px; color:var(--pk-muted); font-size:13px; }
.car-command { margin:4px 0 12px; padding:15px; border:1px solid var(--pk-line); border-radius:21px; background:#fff; box-shadow:0 7px 22px rgba(15,41,71,.06); }
.car-command button { cursor:pointer; }
.car-command-main { width:100%; min-height:78px; padding:13px; display:flex; align-items:center; gap:11px; border:0; border-radius:16px; background:linear-gradient(135deg,#1559b7,#1768e5); color:#fff; text-align:left; }
.car-command-main > span:first-child { width:42px; height:42px; display:grid; place-items:center; flex:none; border-radius:13px; background:rgba(255,255,255,.15); font-size:22px; }
.car-command-main > span:nth-child(2) { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.car-command-main b { font-size:15px; }.car-command-main small { color:#dceaff; font-size:11px; }.car-command-main i { font-style:normal; font-weight:900; }
.car-command-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.car-command-grid button { min-height:104px; padding:13px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:1px solid var(--pk-line); border-radius:15px; background:#f8fafc; color:var(--pk-text); text-align:left; }
.car-command-grid button > span { font-size:21px; margin-bottom:4px; }.car-command-grid b { font-size:13.5px; }.car-command-grid small { color:var(--pk-muted); font-size:10.5px; line-height:1.35; }
#view-car .car-task-panel { display:none !important; }
#view-car .car-task-panel.task-open { display:block !important; animation:taskOpen .2s ease-out; }
@keyframes taskOpen { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
#view-car .radar-auto-guide { margin:0 0 12px !important; }
#view-car .car-picker,#view-car .car-move,#view-car .car-reg { border:1px solid var(--pk-line) !important; border-radius:21px !important; background:#fff !important; box-shadow:0 7px 22px rgba(15,41,71,.06) !important; }
#view-car .picker-label { margin-top:16px; color:#31435b; font-size:13px; }

/* 기록 탭은 관리 사업 설명이 아니라 사용자의 실제 기록과 방문차 업무만 표시 */
.resident-history { margin:4px 0 12px; padding:17px; border:1px solid var(--pk-line); border-radius:21px; background:#fff; box-shadow:0 7px 22px rgba(15,41,71,.06); }
.rh-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rh-head span { color:var(--pk-blue); font-size:10px; font-weight:900; letter-spacing:.05em; }.rh-head h3 { margin:3px 0 0; font-size:20px; }
.rh-head button { min-height:38px; padding:0 12px; border:0; border-radius:12px; background:var(--pk-sky); color:#245995; font-size:12px; font-weight:900; }
.rh-list { margin-top:10px; }.rh-row { min-height:64px; display:flex; align-items:center; gap:10px; border-top:1px solid #edf1f5; }.rh-row:first-child{border-top:0}
.rh-icon { width:36px; height:36px; display:grid; place-items:center; flex:none; border-radius:11px; background:#edf3fa; color:#28578e; font-size:9px; font-weight:900; }
.rh-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:2px; }.rh-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.rh-copy small { color:var(--pk-muted); font-size:10px; }
.rh-row time { color:#8793a3; font-size:9.5px; white-space:nowrap; }.rh-empty { margin:16px 0 3px; padding:20px 10px; border-radius:15px; background:#f6f8fb; color:#748196; font-size:12px; line-height:1.6; text-align:center; }
#view-parking #visitLinkBlock { margin-top:12px; border:1px solid var(--pk-line); border-radius:21px; box-shadow:0 7px 22px rgba(15,41,71,.06); }
#view-parking #gateCheckBlock { display:none !important; }
#view-parking #visitLinkBlock .btn-stack { gap:8px; }
#view-parking #visitLinkBlock .btn-primary,#view-parking #visitLinkBlock .btn-secondary { min-height:50px; border-radius:14px; font-size:13px; }

/* 신고는 유형→사진→위치→접수 순서만 남긴다. 반복 설명과 통계는 결과 화면에서만 필요하다. */
#view-report { padding-top:8px; }
#view-report .rpseg { margin-bottom:8px; }
#rpanel-park > .tab-intro .rp-why,
#rpanel-park > #rpStats,
#rpanel-park > .anon-guarantee,
#rpanel-park > .info-foot,
#rpanel-park .rp-guide { display:none !important; }
#rpanel-park > .tab-intro .tab-h { font-size:27px; letter-spacing:-.05em; }
#rpanel-park > .tab-intro .tab-p { color:var(--pk-muted); font-size:13px; }
#rpanel-park > .info-block { border:1px solid var(--pk-line); border-radius:21px; background:#fff; box-shadow:0 7px 22px rgba(15,41,71,.06); }
#rpanel-park .rp-types { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#rpanel-park .rp-type { min-height:58px; border-radius:14px; }
#rpanel-park .rp-photo { border-radius:15px; background:#f6f9fc; }
#rpanel-park .rp-submit { min-height:54px; border-radius:15px; }
#rpanel-park .rp-official { min-height:50px; }

/* v345 — 아이출발·아이나들이형 통합 내 정보 설정. 한 화면·한 손·단계별 저장. */
.profile-setup-sheet { position:fixed; z-index:1851; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,560px); max-height:94dvh; overflow-y:auto; overscroll-behavior:contain; padding:10px 16px calc(24px + env(safe-area-inset-bottom,0px)); border-radius:26px 26px 0 0; background:#f4f7fb; box-shadow:0 -18px 50px rgba(14,35,65,.25); }
.pset-handle { width:44px; height:5px; margin:0 auto 13px; border-radius:99px; background:#ccd5e0; }
.pset-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 3px 13px; }
.pset-head span { color:#2664aa; font-size:11.5px; font-weight:900; }.pset-head h2 { margin:3px 0 0; color:#17243a; font-size:27px; letter-spacing:-.055em; }
.pset-head button { width:44px; height:44px; flex:none; border:0; border-radius:50%; background:#fff; color:#536278; font-size:17px; box-shadow:0 3px 10px rgba(20,45,80,.08); }
.pset-progress { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:10px 12px; border-radius:14px; background:#e7f1fd; color:#235b9a; font-size:12px; font-weight:900; }
.pset-progress > i { height:7px; flex:1; overflow:hidden; border-radius:99px; background:#c9d9ea; }.pset-progress > i > b { display:block; width:0; height:100%; border-radius:inherit; background:#1768e5; transition:width .22s ease; }
.pset-step { margin-top:9px; padding:15px; border:1px solid #dce5ef; border-radius:19px; background:#fff; box-shadow:0 4px 14px rgba(20,45,80,.045); }
.pset-step-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }.pset-step-head em { display:grid; width:32px; height:32px; place-items:center; flex:none; border-radius:10px; background:#1768e5; color:#fff; font-size:14px; font-style:normal; font-weight:900; }.pset-step-head b { display:block; color:#17243a; font-size:16px; }.pset-step-head small { display:block; margin-top:2px; color:#718095; font-size:11.5px; line-height:1.35; }
.pset-current { display:flex; min-height:56px; align-items:center; gap:10px; padding:9px 10px; border-radius:14px; background:#f4f7fb; }.pset-current > span { font-size:22px; }.pset-current > b { flex:1; font-size:15px; }.pset-current button { min-height:38px; padding:0 12px; border:1px solid #cad8e8; border-radius:11px; background:#fff; color:#245995; font-size:12px; font-weight:900; }
.pset-wide-btn { width:100%; min-height:52px; padding:10px 12px; border:1.5px solid #b9d1ee; border-radius:14px; background:#edf5ff; color:#174f88; font-size:14px; font-weight:900; }.pset-wide-btn.ok { border-color:#a4d9bd; background:#eaf8f1; color:#08734e; }
.pset-note { margin:8px 2px 0; color:#6b788b; font-size:11.5px; line-height:1.5; }
.pset-dong-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-height:172px; overflow-y:auto; }.pset-dong-grid button { min-height:46px; border:1px solid #d8e1eb; border-radius:12px; background:#f8fafc; color:#405067; font-size:13px; font-weight:850; }.pset-dong-grid button.on { border:2px solid #1768e5; background:#eaf3ff; color:#125bc4; }
.pset-input { width:100%; min-height:52px; padding:0 14px; border:1.5px solid #d6e0eb; border-radius:14px; background:#fff; color:#17243a; font-size:16px; font-weight:800; outline:none; }.pset-input:focus { border-color:#1768e5; box-shadow:0 0 0 3px rgba(23,104,229,.1); }
.pset-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:12px; }.pset-types button { min-height:67px; padding:8px 4px; border:1px solid #d8e1eb; border-radius:13px; background:#f8fafc; color:#405067; font-size:21px; }.pset-types button b { display:block; margin-top:3px; font-size:11.5px; }.pset-types button.on { border:2px solid #1768e5; background:#eaf3ff; color:#125bc4; }
.pset-label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 2px 7px; color:#34465e; font-size:12px; font-weight:900; }.pset-label small { color:#7b8798; font-size:10.5px; font-weight:700; }
.pset-switch { display:flex; min-height:61px; align-items:center; justify-content:space-between; gap:12px; padding:10px 11px; border-radius:15px; background:#f4f7fb; }.pset-switch span b { display:block; color:#26384f; font-size:13.5px; }.pset-switch span small { display:block; margin-top:3px; color:#718095; font-size:10.5px; }.pset-switch input { position:absolute; opacity:0; pointer-events:none; }.pset-switch > i { position:relative; width:52px; height:31px; flex:none; border-radius:99px; background:#bdc8d5; transition:.2s; }.pset-switch > i:after { content:''; position:absolute; top:4px; left:4px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.16); transition:.2s; }.pset-switch input:checked + i { background:#13845d; }.pset-switch input:checked + i:after { transform:translateX(21px); }
.pset-switch-sub { margin-top:8px; border:1px solid #d7e6f8; background:#edf5ff; }
.pset-save { position:sticky; bottom:0; width:100%; min-height:58px; margin-top:12px; border:0; border-radius:16px; background:linear-gradient(135deg,#102f55,#1768e5); color:#fff; font-size:16px; font-weight:900; box-shadow:0 9px 22px rgba(15,73,145,.24); }.pset-privacy { margin:9px 4px 0; color:#718095; font-size:10.5px; line-height:1.45; text-align:center; }
@media(max-width:390px){.profile-setup-sheet{padding-left:12px;padding-right:12px}.pset-step{padding:13px}.pset-dong-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pset-types button{font-size:19px}.pset-types button b{font-size:10.5px}}

/* v338 — 보라색 레거시 전면 퇴장. 주차 제품 팔레트 = 네이비·블루·스카이. */
:root {
  --accent-1:#1559b7;
  --accent-2:#1768e5;
  --accent-grad:linear-gradient(135deg,#0f2947 0%,#1768e5 100%);
  --accent-soft:#eaf2fb;
  --shadow-hero:0 10px 24px rgba(15,73,145,.22);
}

/* 핵심 CTA */
.btn-primary,.ps-cam,.cs-photo-btn,.ts-tool.on,.gd-btn-hot,
.obw-step.key .obw-go,.cm-3step .c3 i,.cm-recv-go {
  color:#fff !important;
  border-color:#1559b7 !important;
  background:linear-gradient(135deg,#0f2947,#1768e5) !important;
  box-shadow:0 7px 18px rgba(15,73,145,.20) !important;
}

/* 보조 CTA와 선택 상태 */
.btn-secondary,.pay-submit.ol-ghost,.cs-save.btn-secondary,.alls-close,
.ol-btn.ol-ghost,.cm-qr,.bcb-listen,.vote-demo-reset,.geo-demo-btn,
.mc-pay-bd-toggle,.mm-giro-qr,.car-kind.car-kind-more,.gd-btn,
.al-flchip.on,.gc-chip.on,.cs-chip.csp-floor.on,.bd-sort.on,.slot-chip.on {
  color:#245995 !important;
  border-color:#bdd0e8 !important;
  background:#edf4fb !important;
  box-shadow:none !important;
}
.btn-secondary:active,.pay-submit.ol-ghost:active,.cs-save.btn-secondary:active {
  background:#e2edf8 !important;
}

/* 카드·배지·입력 포커스 */
.notify-bcast,.bc-intro,.bc-compose-btn,.bc-card.unread,.rp-verify,
.idae-nolive,.cost-pay-card,.hh-bd,.cc-card,.idae-tmpl,.bcb-demo,
.vote-intro,.vote-card.vc-open,.vote-empty,.vote-tmpl,.vp-form,
.mm-giro-qrbox,.obw-step.key,.cm-3step .c3,.pay,
.cg-row.request,.bd-write-btn,.req-guide {
  border-color:#c7d7e9 !important;
  background:#f5f8fc !important;
  box-shadow:0 3px 12px rgba(15,73,145,.08) !important;
}
.nb-card.unread,.bc-card.bc-alert.unread { border-color:#9fbee2 !important; background:#f1f6fc !important; }
.bc-cat.on,.rp-type.tone-purple.on,.cg-type[data-t="주상복합"] {
  color:#245995 !important; border-color:#9fbee2 !important; background:#eaf2fb !important;
}
.ir-em.p,.bd-archive,.idae-tmpl-won,.cg-ptype,.bcb-demo-h,
.foot-guide .foot-guide-sub,.geo-optin-fixed { color:#245995 !important; }
.idae-tmpl-won,.cg-ptype,.geo-optin-fixed { background:#eaf2fb !important; border-color:#c7d7e9 !important; }

/* 지도·그래프·학습 배지 */
.pmap-ent-dot,.lot-ent2 { fill:#1768e5 !important; }
.pmap-ramp { stroke:#1768e5 !important; }
.mc-bar-fill.c-a,.vc-dir-yes,.vc-yes,.ab-est-tag { background:#1768e5 !important; }
.idae-thumb,.ab-flchip-est {
  color:#245995 !important; border-color:#9fbee2 !important;
  background:linear-gradient(135deg,#eaf2fb,#dceafb) !important;
  box-shadow:0 3px 10px rgba(15,73,145,.12) !important;
}
.ab-est-tag { color:#fff !important; }
.gc-zone { border-color:#9fbee2 !important; background:#f5f8fc !important; }
.gc-shot { border-color:#1559b7 !important; }
.mgmt-call-btn.find { color:#245995 !important; border-color:#bdd0e8 !important; background:linear-gradient(180deg,#f7faff,#eaf2fb) !important; }
.zone-learn-unknown { color:#665020 !important; border-color:#ead5a9 !important; background:#fff8eb !important; }

/* v339 — 남아 있던 보라 그림자·탭 테두리까지 제거 */
.app-header {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(15,41,71,.09),0 12px 30px rgba(15,73,145,.14) !important;
}
.onboarding-card,.car-picker,.car-spot,.car-move,.fc-card,.visit-form,
.park-idle,.home-picker,.time-slider,.day-trend,.cost-card,.info-block,
.cc-card,.visit-item,.bc-brief,.plan-grid,#map,.dcard,.sum-chip,
.notify-item,.ad-card,.ad-block,.mc-pay {
  border-color:#dce5ef !important;
  box-shadow:0 1px 2px rgba(15,41,71,.04),0 8px 24px rgba(15,73,145,.07) !important;
}
.foot-guide { box-shadow:0 2px 8px rgba(15,41,71,.06) !important; }
.cs-input:focus,.cm-input:focus,.vf-input:focus,.pay-in:focus,.car-dong-text:focus,
.cg-search-input:focus,.admin-pin-input:focus,.mm-in:focus,.dp-in:focus,.alls-search:focus {
  border-color:#6f9bc9 !important;
  box-shadow:0 0 0 3.5px rgba(23,104,229,.14),inset 0 1px 2px rgba(15,41,71,.04) !important;
}
.ob-now-btn,.ob-btn,.mgmt-quick-btn,.al-rep,.pay-submit,.pay-method,.cm-call,
.btn-primary,.btn-secondary,.ob-seg-btn,.mgmt-call-btn,.car-kind,.al-vbtn,
.al-fbtn,.viewseg-btn,.floorseg-btn,.mseg-btn,.sum-chip {
  box-shadow:0 2px 8px rgba(15,41,71,.09),inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.mgmt-quick-btn {
  border-color:#d5e0ec !important;
  background:linear-gradient(180deg,#fff,#f1f6fb) !important;
  box-shadow:0 1px 2px rgba(15,41,71,.04),0 6px 15px rgba(15,73,145,.08),inset 0 1px 0 #fff !important;
}
.mgmt-quick-btn b { color:#1d2d42 !important; }
.mgmt-quick-btn small { color:#64748b !important; }
.mgmt-call-btn {
  color:#245995 !important; border-color:#bdd0e8 !important;
  background:linear-gradient(180deg,#f8fbff,#eaf2fb) !important;
  box-shadow:0 5px 15px rgba(15,73,145,.10),inset 0 1px 0 #fff !important;
}
.mgmt-call-btn small { color:#647b96 !important; }
#mgmtSeg .mseg-btn {
  color:#33465f !important; border-color:#c7d7e9 !important; border-bottom-color:#9fbee2 !important;
  background:linear-gradient(180deg,#fff,#edf4fb) !important;
  box-shadow:0 4px 9px rgba(15,73,145,.10),inset 0 1px 0 #fff !important;
}
#mgmtSeg .mseg-btn.on {
  color:#1559b7 !important; border-color:#6f9bc9 !important; border-bottom-color:#1559b7 !important;
  background:linear-gradient(180deg,#edf5ff,#dceafb) !important;
  box-shadow:0 5px 12px rgba(15,73,145,.16),inset 0 1px 0 #fff !important;
}
.rpseg .mseg-btn { box-shadow:0 2px 7px rgba(15,41,71,.07) !important; }
.rpseg .mseg-btn.on { color:#1559b7 !important; background:#eaf2fb !important; box-shadow:0 3px 9px rgba(15,73,145,.12) !important; }
.rp-type.tone-purple { border-color:#bdd0e8 !important; }
.rp-verify-btn {
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0)),#1559b7 !important;
  box-shadow:0 1px 2px rgba(15,41,71,.12),0 8px 20px rgba(15,73,145,.18),inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* v340 — 밝은 면에서 흐려지는 작은 글자 제거(WCAG AA 목표) */
:root {
  --ink-soft:#43546b;
  --ink-faint:#596a7f;
  --pk-muted:#50627a;
}
.brand-sub {
  color:#50627a !important;
  font-weight:750 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
.tab-p,.info-cap,.info-foot,.app-footer p,.foot-legal,
.rh-copy small,.rh-row time,.rh-empty,.cm-note,.cs-note,.vf-note,
.resident-note,.req-note,.geo-optin-note,.geo-optin-state {
  color:#586a80 !important;
  opacity:1 !important;
}
input::placeholder,textarea::placeholder { color:#66768a !important; opacity:1 !important; }

/* v342 — 단톡방에 흩어진 민원을 공식 처리 흐름으로 바꾸는 주민용 단지 이슈 보드 */
.issue-desk {
  margin:14px 0 16px; padding:18px; border:1px solid #cbd9e8; border-radius:24px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%); box-shadow:0 10px 28px rgba(15,73,145,.10);
}
.issue-desk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.issue-kicker { display:block; margin-bottom:4px; color:#1559b7; font-size:12px; font-weight:900; letter-spacing:.02em; }
.issue-desk h3 { margin:0; color:#152337; font-size:23px; line-height:1.2; letter-spacing:-.04em; }
.issue-refresh { flex:0 0 auto; min-height:38px; padding:0 12px; border:1px solid #c3d4e7; border-radius:13px; background:#fff; color:#3e536c; font-size:13px; font-weight:850; }
.issue-counts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:16px 0 12px; }
.issue-count { min-width:0; padding:10px 4px 9px; border:1px solid #d6e1ed; border-radius:14px; background:#fff; text-align:center; }
.issue-count b { display:block; color:#17263a; font-size:21px; line-height:1; }
.issue-count span { display:block; margin-top:5px; color:#52647a; font-size:11px; font-weight:800; white-space:nowrap; }
.issue-count.received { border-top:3px solid #7d8da1; }
.issue-count.confirmed { border-top:3px solid #1768e5; }
.issue-count.in_progress { border-top:3px solid #e29b20; }
.issue-count.done { border-top:3px solid #15915b; }
.issue-list { display:flex; flex-direction:column; gap:8px; }
.issue-row { display:flex; align-items:center; gap:10px; min-height:62px; padding:11px 12px; border:1px solid #dde6ef; border-radius:16px; background:#fff; }
.issue-main { min-width:0; flex:1; }
.issue-main b { display:block; overflow:hidden; color:#1b2b3f; font-size:15px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.issue-main span { display:block; margin-top:4px; overflow:hidden; color:#586a80; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.issue-status { flex:0 0 auto; padding:7px 9px; border-radius:999px; font-size:12px; font-weight:900; }
.issue-status.received { color:#4b5d72; background:#e9eef4; }
.issue-status.confirmed { color:#1559b7; background:#e5f0ff; }
.issue-status.progress { color:#8a5800; background:#fff1d4; }
.issue-status.done { color:#087346; background:#dcf6e9; }
.issue-empty { margin:0; padding:17px 12px; border:1px dashed #c4d4e5; border-radius:16px; color:#53657a; background:#fbfdff; text-align:center; }
.issue-empty b,.issue-empty span { display:block; }
.issue-empty span { margin-top:5px; font-size:12px; line-height:1.45; }
.issue-actions { display:flex; flex-direction:column; align-items:stretch; gap:7px; margin-top:12px; }
.issue-submit { min-height:50px; border:0; border-radius:16px; background:#1559b7; color:#fff; font-size:16px; font-weight:900; box-shadow:0 8px 18px rgba(21,89,183,.20); }
.issue-actions span { color:#596a7f; font-size:11px; font-weight:700; text-align:center; }
.rp-zones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 16px; }
.rp-zone { min-height:46px; padding:8px; border:1px solid #cbd9e8; border-radius:14px; background:#fff; color:#33465f; font-size:14px; font-weight:800; }
.rp-zone.on { border-color:#1768e5; background:#eaf3ff; color:#1559b7; box-shadow:0 0 0 2px rgba(23,104,229,.10); }
.ar-note { display:block; margin-top:5px; color:#42556d; font-size:12px; line-height:1.4; }
@media (max-width:360px) {
  .issue-desk { padding:15px; }
  .issue-counts { gap:5px; }
  .issue-count span { font-size:10px; }
}

/* v343 — 구봉8단지 등 인접 단지 사용자의 실시간 정보 도용을 막는 주차 인증 게이트 */
.resident-parking-gate { margin:14px 0 16px; padding:22px 18px; border:1px solid #b8cce3; border-radius:24px; background:linear-gradient(150deg,#10294b,#174f8c); color:#fff; box-shadow:0 12px 28px rgba(15,52,96,.22); }
.rpg-kicker { display:block; margin-bottom:7px; color:#9fcbff; font-size:12px; font-weight:900; }
.resident-parking-gate h2 { margin:0; color:#fff; font-size:24px; line-height:1.18; letter-spacing:-.045em; }
.resident-parking-gate p { margin:12px 0 16px; color:#dceafb; font-size:13px; font-weight:700; line-height:1.55; }
.resident-parking-gate button { width:100%; min-height:54px; border:1px solid rgba(255,255,255,.48); border-radius:17px; background:#fff; color:#124b88; font-size:16px; font-weight:950; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.rpg-rule { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:13px; }
.rpg-rule span { min-width:0; padding:7px 3px; border-radius:10px; background:rgba(255,255,255,.10); color:#eaf4ff; font-size:10px; font-weight:800; text-align:center; white-space:nowrap; }
.resident-parking-gate small { display:block; margin-top:10px; color:#c7daef; font-size:10.5px; font-weight:700; text-align:center; }
body.resident-locked #parkingRadar,
body.resident-locked #nowHooks,
body.resident-locked .radar-detail,
body.resident-locked .fold-stats { display:none !important; }