/* Nezapp BIZ Demo — sandboxed static styles. */
/* Fallback tokens (override by ../shared/tokens.css if present). */
:root {
  --demo-bg: #F4F6FB;
  --demo-surface: #FFFFFF;
  --demo-text: #111827;
  --demo-text-soft: #4B5563;
  --demo-text-muted: #9CA3AF;
  --demo-border: #E5E7EB;
  --demo-border-strong: #D1D5DB;
  --demo-primary: #2563EB;
  --demo-primary-soft: #DBEAFE;
  --demo-primary-dark: #1D4ED8;
  --demo-accent: #F59E0B;
  --demo-success: #10B981;
  --demo-danger: #EF4444;
  --demo-warning: #F59E0B;
  --demo-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --demo-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --demo-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --demo-radius-sm: 6px;
  --demo-radius-md: 10px;
  --demo-radius-lg: 16px;
  --demo-radius-pill: 999px;
  --demo-font: var(--demo-font-sans);

  --demo-header-h: 56px;
  --demo-appbar-h: 62px;
  --demo-content-max: 640px;
  --demo-content-min: 320px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--demo-bg);
  color: var(--demo-text);
  font-family: var(--demo-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
input, textarea, select { font-family: inherit; font-size: 16px; }

.demo-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: var(--demo-content-max);
  margin: 0 auto;
  background: var(--demo-bg);
  position: relative;
}

/* ============ HEADER ============ */
.demo-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--demo-header-h);
  background: var(--demo-surface);
  border-bottom: 1px solid var(--demo-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  /* title 절대 정렬 기준점 */
}
.demo-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  color: var(--demo-text);
}
.demo-header__brand .logo-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--demo-primary), var(--demo-primary-dark));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
/* admin 브랜드 설정에서 업로드된 로고 이미지
   실테넌트 TenantLogo.vue의 .logo-image와 동일: max-height + width auto + contain */
.demo-header__brand .demo-header__brand-logo {
  max-height: 28px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}
.demo-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--demo-text-soft);
  transition: background-color 0.15s;
  position: relative;
}
.demo-icon-btn:hover { background: var(--demo-primary-soft); color: var(--demo-primary); }
.demo-icon-btn svg { width: 22px; height: 22px; }
.demo-icon-btn .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--demo-danger);
  border-radius: 50%;
  border: 2px solid var(--demo-surface);
}
.demo-header__back {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--demo-text);
}
.demo-header__back:hover { background: var(--demo-bg); }
.demo-header__title {
  /* 좌우 요소와 무관하게 헤더 정중앙 고정 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 15px;
  pointer-events: none; /* 뒤 버튼 클릭 영역 방해 X */
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ MAIN ============ */
.demo-main {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(var(--demo-appbar-h) + 32px);
  min-height: 0;
}

.demo-section {
  margin-bottom: 20px;
}
.demo-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.demo-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--demo-text);
  margin: 0;
}
.demo-section__more {
  font-size: 12px;
  color: var(--demo-text-muted);
}

/* ============ HERO BANNER ============ */
.demo-hero {
  background: linear-gradient(135deg, var(--demo-primary) 0%, var(--demo-primary-dark) 100%);
  color: #fff;
  border-radius: var(--demo-radius-lg);
  padding: 20px 18px;
  margin-bottom: 20px;
  box-shadow: var(--demo-shadow-md);
  position: relative;
  overflow: hidden;
}
.demo-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
}
.demo-hero__eyebrow {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.demo-hero__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}
.demo-hero__desc {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;
}

/* ============ CATEGORY GRID ============ */
.demo-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.demo-cat-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: var(--demo-surface);
  border-radius: var(--demo-radius-md);
  border: 1px solid var(--demo-border);
  transition: all 0.15s;
  cursor: pointer;
}
.demo-cat-grid__item:hover {
  border-color: var(--demo-primary);
  background: var(--demo-primary-soft);
}
.demo-cat-grid__item.is-selected {
  border-color: var(--demo-primary);
  background: var(--demo-primary-soft);
  box-shadow: 0 0 0 2px var(--demo-primary) inset;
}
.demo-cat-grid__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}
.demo-cat-grid__label {
  font-size: 11px;
  color: var(--demo-text-soft);
  text-align: center;
  font-weight: 500;
}

/* ============ CARD LIST ============ */
.demo-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.demo-card {
  background: var(--demo-surface);
  border-radius: var(--demo-radius-md);
  border: 1px solid var(--demo-border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.demo-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--demo-shadow-md);
}
.demo-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #E5E7EB;
  position: relative;
  overflow: hidden;
}
.demo-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.demo-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--demo-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.demo-card__body { padding: 12px 14px 14px; }
.demo-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--demo-radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.demo-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--demo-text);
  margin: 0 0 6px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.demo-card__desc {
  font-size: 13px;
  color: var(--demo-text-soft);
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.demo-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--demo-text-muted);
}
.demo-card__meta-left,
.demo-card__meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.demo-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.demo-card__meta-item svg { width: 13px; height: 13px; }
.demo-card__author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.demo-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============ APPBAR (bottom nav) ============ */
.demo-appbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  height: var(--demo-appbar-h);
  background: var(--demo-surface);
  border-top: 1px solid var(--demo-border);
  display: flex;
  box-shadow: 0 -2px 12px rgba(15,23,42,0.04);
}
.demo-appbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--demo-text-muted);
  font-size: 11px;
  font-weight: 500;
  transition: color 0.15s;
}
.demo-appbar a svg { width: 22px; height: 22px; }
.demo-appbar a.is-active { color: var(--demo-primary); font-weight: 700; }
.demo-appbar a:hover { color: var(--demo-primary); }

/* ============ FOOTER ============ */
.demo-footer {
  text-align: center;
  padding: 16px;
  color: var(--demo-text-muted);
  font-size: 11px;
  border-top: 1px solid var(--demo-border);
  background: var(--demo-surface);
}

/* ============ SEARCH / MAP ============ */
.demo-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.demo-search-bar input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--demo-radius-md);
  border: 1px solid var(--demo-border);
  background: var(--demo-surface);
  outline: none;
  transition: border-color 0.15s;
}
.demo-search-bar input:focus { border-color: var(--demo-primary); }
.demo-search-bar button {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--demo-radius-md);
  background: var(--demo-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.demo-chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.demo-chip-row::-webkit-scrollbar { display: none; }
.demo-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--demo-radius-pill);
  border: 1px solid var(--demo-border);
  background: var(--demo-surface);
  color: var(--demo-text-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.demo-chip.is-active {
  background: var(--demo-primary);
  color: #fff;
  border-color: var(--demo-primary);
}

.demo-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #D9E4F5;
  border-radius: var(--demo-radius-lg);
  overflow: hidden;
  box-shadow: var(--demo-shadow-md);
  border: 1px solid var(--demo-border);
  margin-bottom: 14px;
}
.demo-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.35) 1px, transparent 1px),
    linear-gradient(135deg, rgba(59,130,246,0.08), rgba(147,197,253,0.18));
  background-size: 40px 40px, 40px 40px, 100% 100%;
}
.demo-map-road {
  position: absolute;
  background: rgba(255,255,255,0.75);
  border-radius: 4px;
}
.demo-map-road.h1 { left: 0; right: 0; top: 28%; height: 14px; }
.demo-map-road.h2 { left: 0; right: 0; top: 62%; height: 10px; }
.demo-map-road.v1 { top: 0; bottom: 0; left: 34%; width: 12px; }
.demo-map-road.v2 { top: 0; bottom: 0; left: 72%; width: 9px; }
.demo-map-label {
  position: absolute;
  font-size: 11px;
  color: #64748B;
  background: rgba(255,255,255,0.7);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}
.demo-map-marker {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -100%) rotate(-45deg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s;
  border: 2px solid #fff;
}
.demo-map-marker:hover,
.demo-map-marker.is-active {
  transform: translate(-50%, -100%) rotate(-45deg) scale(1.15);
  z-index: 10;
}
.demo-map-marker__inner {
  transform: rotate(45deg);
  color: #fff;
  font-size: 14px;
}

.demo-bottom-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--demo-surface);
  border-radius: var(--demo-radius-lg);
  padding: 12px;
  box-shadow: var(--demo-shadow-lg);
  cursor: pointer;
  display: none;
}
.demo-bottom-sheet.is-visible { display: block; }
.demo-bottom-sheet__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 3px;
}
.demo-bottom-sheet__desc {
  font-size: 12px;
  color: var(--demo-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ DETAIL ============ */
.demo-detail__hero {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #E5E7EB;
  border-radius: var(--demo-radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.demo-detail__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 이미지 없을 때 카메라 아이콘 (no-image placeholder) */
.demo-detail__hero-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
}
.demo-detail__hero-empty svg { width: 48px; height: 48px; }
.demo-detail__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--demo-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.demo-detail__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}
.demo-detail__author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--demo-border);
}
.demo-detail__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.demo-detail__author-name { font-weight: 600; font-size: 13px; }
.demo-detail__author-date { font-size: 11px; color: var(--demo-text-muted); }
.demo-detail__body {
  font-size: 14px;
  color: var(--demo-text);
  line-height: 1.7;
  white-space: pre-wrap;
  margin-bottom: 20px;
}
.demo-detail__loc {
  margin-bottom: 20px;
}
.demo-detail__loc-map {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--demo-radius-md);
  overflow: hidden;
  position: relative;
  background: #D9E4F5;
  margin-top: 8px;
}
.demo-detail__actions {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--demo-border);
}
.demo-action-btn {
  flex: 1;
  height: 44px;
  border-radius: var(--demo-radius-md);
  border: 1px solid var(--demo-border);
  background: var(--demo-surface);
  color: var(--demo-text-soft);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.demo-action-btn.is-liked { color: var(--demo-danger); border-color: var(--demo-danger); }
.demo-action-btn.primary {
  background: var(--demo-primary);
  color: #fff;
  border-color: var(--demo-primary);
}
.demo-action-btn svg { width: 16px; height: 16px; }

/* ============ REQUEST FORM ============ */
.demo-form { display: flex; flex-direction: column; gap: 18px; }
.demo-form__group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--demo-text);
}
.demo-form__group input[type="text"],
.demo-form__group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--demo-radius-md);
  border: 1px solid var(--demo-border);
  background: var(--demo-surface);
  outline: none;
  transition: border-color 0.15s;
}
.demo-form__group input[type="text"]:focus,
.demo-form__group textarea:focus { border-color: var(--demo-primary); }
.demo-form__group textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
.demo-photo-uploader {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-photo-uploader__slot {
  width: 80px;
  height: 80px;
  border-radius: var(--demo-radius-md);
  border: 2px dashed var(--demo-border-strong);
  background: var(--demo-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--demo-text-muted);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}
.demo-photo-uploader__slot:hover { border-color: var(--demo-primary); color: var(--demo-primary); }
.demo-photo-uploader__slot img { width: 100%; height: 100%; object-fit: cover; }

/* 빈 슬롯 — 카메라 아이콘 (no-image 상태), 중앙 정렬 */
.demo-photo-uploader__slot--empty {
  border-style: solid;
  border-color: #E5E7EB;
  background: #F3F4F6;
}
.demo-photo-uploader__slot--empty:hover {
  border-color: var(--demo-primary);
  background: #fff;
}
.demo-photo-uploader__slot--empty:hover .demo-photo-uploader__empty-icon path { fill: var(--demo-primary); }
/* 아이콘: 부모가 상대, 자식이 절대 중앙 — flex 보정 없이 픽셀 단위로 확실히 가운데 */
.demo-photo-uploader__empty-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  transition: fill 0.15s;
  pointer-events: none;
}
.demo-photo-uploader__slot .remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.demo-submit {
  width: 100%;
  height: 48px;
  background: var(--demo-primary);
  color: #fff;
  border-radius: var(--demo-radius-md);
  font-weight: 700;
  font-size: 15px;
  margin-top: 10px;
}
.demo-submit:hover { background: var(--demo-primary-dark); }

/* ============ MYPAGE ============ */
.demo-profile-card {
  background: var(--demo-surface);
  border-radius: var(--demo-radius-lg);
  padding: 20px 18px;
  box-shadow: var(--demo-shadow-sm);
  border: 1px solid var(--demo-border);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.demo-profile-card__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--demo-primary-soft);
  /* overflow: hidden 제거 — edit-badge가 원 밖으로 나와도 보이게 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--demo-primary);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
/* 이미지·SVG만 원형 clip 처리 */
.demo-profile-card__avatar img,
.demo-profile-card__avatar svg {
  border-radius: 50%;
}
.demo-profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.demo-profile-card__avatar svg { width: 40px; height: 40px; }
.demo-profile-card__avatar .edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: var(--demo-primary);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  border: 2px solid var(--demo-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  pointer-events: none; /* 클릭은 아바타 전체가 처리 */
}
.demo-profile-card__info h2 { font-size: 16px; font-weight: 700; margin: 0 0 3px; }
.demo-profile-card__info p { font-size: 12px; color: var(--demo-text-muted); margin: 0; }

.demo-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  background: var(--demo-surface);
  border-radius: var(--demo-radius-lg);
  border: 1px solid var(--demo-border);
  overflow: hidden;
}
.demo-menu-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--demo-border);
  cursor: pointer;
  font-size: 14px;
}
.demo-menu-list li:last-child { border-bottom: 0; }
.demo-menu-list li:hover { background: var(--demo-bg); }
.demo-menu-list li .arrow { color: var(--demo-text-muted); }
.demo-menu-list li .left { display: flex; align-items: center; gap: 10px; }
.demo-menu-list li .left svg { width: 18px; height: 18px; color: var(--demo-primary); }
.demo-menu-list li.is-disabled { color: var(--demo-text-muted); }

.demo-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.demo-activity-item {
  background: var(--demo-surface);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  padding: 12px 14px;
  cursor: pointer;
}
.demo-activity-item__cat {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.demo-activity-item__title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--demo-text);
}
.demo-activity-item__meta {
  font-size: 11px;
  color: var(--demo-text-muted);
  display: flex;
  gap: 10px;
}
.demo-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--demo-text-muted);
  font-size: 13px;
  background: var(--demo-surface);
  border: 1px dashed var(--demo-border);
  border-radius: var(--demo-radius-md);
}

/* ============ UTIL ============ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.demo-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--demo-text-muted);
  font-size: 13px;
}

/* =============================================================
   Search Page (실 biz .searchPage 스타일 포팅 — 풀스크린 지도 + 헤더 오버레이)
   ============================================================= */
.demo-search-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #E8EEF5;
}

/* 검색 헤더 오버레이 */
.demo-search-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 16px 0;
  pointer-events: none; /* 자식 요소만 받도록 */
}
.demo-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}
.demo-search-input {
  flex: 1;
  padding: 0 0 0 15px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #111827;
  height: 38px;
}
.demo-search-input::placeholder { color: #9CA3AF; }
.demo-search-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: #F3F4F6;
  border: none;
  border-radius: 50%;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-search-btn:hover { background: #E5E7EB; }

/* 풀스크린 지도 */
.demo-map-view {
  position: absolute;
  inset: 0;
  padding-bottom: 56px; /* AppBar 높이 확보 */
}
.demo-map-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.demo-kakao-map {
  width: 100%;
  height: 100%;
}

/* 좌측 줌 컨트롤 */
.demo-map-controls {
  position: absolute;
  left: 12px;
  bottom: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.demo-map-ctrl-btn {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  color: #111827;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.15s;
}
.demo-map-ctrl-btn:hover { background: #F9FAFB; }
.demo-map-ctrl-btn:active { transform: scale(0.95); }

/* 우측 컨트롤 */
.demo-map-right-controls {
  position: absolute;
  right: 12px;
  bottom: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

/* 지도 내 바텀 시트 */
.demo-map-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 6;
  max-height: 50%;
  overflow-y: auto;
}
.demo-map-sheet[hidden] { display: none; }
.demo-map-sheet__close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-map-sheet__close:hover { background: rgba(0, 0, 0, 0.1); }
.demo-map-sheet__body .item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
}
.demo-map-sheet__body .item:last-child { border-bottom: none; }
.demo-map-sheet__body .item:hover { background: #F9FAFB; }

/* 원형 프로필 아바타 (마이페이지에서 등록한 사진) */
.demo-map-sheet__body .item__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #F3F4F6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E5E7EB;
}
.demo-map-sheet__body .item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-map-sheet__body .item__text { flex: 1; min-width: 0; }

/* 제목 + 카테고리 뱃지 한 줄 */
.demo-map-sheet__body .item__title {
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.demo-map-sheet__body .item__title-text {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
/* 카테고리 뱃지 — 텍스트만, 카테고리 색상 아웃라인 */
.demo-map-sheet__body .item__cat-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.demo-map-sheet__body .item__meta {
  font-size: 11px;
  color: #6B7280;
  margin: 0;
}

/* 지도 상태 안내 (위치 확인 중) */
.demo-map-status {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 7;
  pointer-events: none;
  white-space: nowrap;                 /* 기본은 한 줄 */
  text-align: center;
  max-width: calc(100vw - 24px);       /* 초협소 화면 오버플로 방지 */
  word-break: keep-all;                /* 혹시 두 줄이 되어도 한국어 단어 단위 개행 */
}
/* 너무 긴 메시지가 들어오면 두 줄 자연스럽게 허용 */
@media (max-width: 360px) {
  .demo-map-status {
    white-space: normal;
  }
}
.demo-map-status[hidden] { display: none; }

/* AppBar 시각적 정리 (검색 페이지 전용) */
.demo-search-page .demo-appbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8;
}

/* =============================================================
   Search Map — 실 biz KakaoMap.vue의 my-location-marker + marker-reqphoto
   클래스/구조 그대로 복제 (비스코프 CustomOverlay용)
   ============================================================= */
/* 방문자 현재 위치 — 실 biz my-location-marker */
.my-location-marker {
  position: relative;
  width: 40px;
  height: 40px;
}
.my-location-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #4285F4;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.my-location-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(66, 133, 244, 0.45);
  border-radius: 50%;
  z-index: 1;
  animation: my-loc-pulse 2s ease-out infinite;
}
@keyframes my-loc-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* 오버레이 마커 공통 */
.overlay-marker {
  --cat-color: #3B82F6;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: filter 0.15s, transform 0.15s;
  will-change: transform, filter;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}
.overlay-marker:hover { transform: translateY(-1px); }

/* 카드형 마커 — 실 biz marker-card 동일 (사진 + 제목 + 좋아요/조회수) */
.marker-card {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25));
}
.marker-card.selected {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  animation: bounce-overlay 0.7s ease-out;
}
.marker-card .card-body {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 8px;
  border: 3px solid #fff;
  overflow: hidden;
  transition: border-radius 0.15s;
}
.marker-card.selected .card-body { border-radius: 10px; }
.marker-card .card-photo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f0f0f0;
  transition: width 0.15s, height 0.15s;
}
.marker-card.selected .card-photo {
  width: 60px;
  height: 60px;
}
.marker-card .card-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.marker-card .card-photo-default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marker-card .card-photo-default svg {
  width: 22px;
  height: 22px;
}
.marker-card .card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  min-width: 0;
  gap: 2px;
}
.marker-card .card-title {
  font-size: 11px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  line-height: 1.3;
}
.marker-card.selected .card-title {
  font-size: 12px;
  max-width: 120px;
}
.marker-card .card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #888;
  line-height: 1;
}
.marker-card .card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.marker-card .card-meta-item .card-meta-icon {
  color: #888;
  vertical-align: middle;
}
.marker-card .card-tail {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
  margin-top: -1px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}

/* 선택 시 바운스 (실 biz bounce-overlay) */
@keyframes bounce-overlay {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-14px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(-8px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* =============================================================
   알림 (헤더 종 + 뱃지 + 드롭다운 + 공지 상세 모달)
   ============================================================= */

/* 헤더 종 아이콘에 뱃지 표시 (앞쪽 .demo-icon-btn .badge 정의를 카운트형으로 확장) */
.demo-icon-btn { position: relative; }
.demo-icon-btn .badge {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--demo-surface, #fff);
  box-sizing: border-box;
  pointer-events: none;
  letter-spacing: -0.2px;
}
.demo-icon-btn .badge.is-visible { display: inline-flex; }

/* 드롭다운 컨테이너 */
.demo-notif-dropdown {
  position: fixed;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
  width: 320px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  z-index: 9000;
  overflow: hidden;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: demoNotifPop 0.15s ease-out;
}
@keyframes demoNotifPop {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.demo-notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #F3F4F6;
  background: #fff;
}
.demo-notif-dropdown__title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.demo-notif-dropdown__mark {
  background: none;
  border: none;
  color: var(--demo-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}
.demo-notif-dropdown__mark:hover { background: #F3F4F6; }

/* 목록 */
.demo-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.demo-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  transition: background 0.12s;
}
.demo-notif-item:last-child { border-bottom: none; }
.demo-notif-item:hover { background: #F9FAFB; }
.demo-notif-item.is-unread { background: #EFF6FF; }
.demo-notif-item.is-unread:hover { background: #DBEAFE; }
.demo-notif-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #DBEAFE;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.demo-notif-item__content {
  flex: 1;
  min-width: 0;
}
.demo-notif-item__title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
  word-break: keep-all;
  line-height: 1.4;
}
.demo-notif-item__msg {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  word-break: break-word;
}
.demo-notif-item__time {
  font-size: 11px;
  color: #9CA3AF;
}
.demo-notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563EB;
  flex-shrink: 0;
  margin-top: 14px;
}

/* 빈 상태 */
.demo-notif-empty {
  padding: 36px 24px;
  text-align: center;
  color: #9CA3AF;
}
.demo-notif-empty svg {
  margin: 0 auto 12px;
  display: block;
  opacity: 0.4;
}
.demo-notif-empty p {
  margin: 0 0 4px;
  font-size: 13px;
  color: #6B7280;
  font-weight: 600;
}
.demo-notif-empty__hint {
  font-size: 11px !important;
  color: #9CA3AF !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* 공지 상세 모달 */
.demo-notice-detail-bd {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: demoNotifFade 0.15s ease-out;
}
@keyframes demoNotifFade { from { opacity: 0; } to { opacity: 1; } }
.demo-notice-detail {
  width: 100%;
  max-width: 360px;
  max-height: 80vh;
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111827;
  animation: demoNotifPop 0.18s ease-out;
}
.demo-notice-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.demo-notice-detail__badge {
  display: inline-block;
  padding: 4px 10px;
  background: #DBEAFE;
  color: #1D4ED8;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: -0.2px;
}
.demo-notice-detail__close {
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-notice-detail__close:hover { background: #F3F4F6; color: #111827; }
.demo-notice-detail__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  line-height: 1.4;
  color: #111827;
  word-break: keep-all;
}
.demo-notice-detail__date {
  font-size: 12px;
  color: #9CA3AF;
  margin: 0 0 14px;
}
.demo-notice-detail__body {
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
  margin-bottom: 18px;
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.demo-notice-detail__ok {
  width: 100%;
  padding: 12px;
  background: #111827;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.demo-notice-detail__ok:hover { background: #000; }
.demo-notice-detail__ok:active { transform: translateY(1px); }

/* =============================================================
   매칭/비매칭 표시 (글 상세 + 글쓰기)
   ============================================================= */

/* 글 상세 — 카테고리 뱃지 옆 "모집중" 라벨 (한 줄에 정확히 같은 높이) */
.demo-detail__cat-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* 두 뱃지 모두 동일한 box 높이/폰트 메트릭 — 들쭉날쭉 방지 */
.demo-detail__cat-row .demo-detail__cat,
.demo-detail__cat-row .demo-detail__matching-badge {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--demo-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
  box-sizing: border-box;
}
.demo-detail__matching-badge {
  background: #10B981;
  color: #fff;
  letter-spacing: -0.2px;
}
.demo-detail__matching-badge svg,
.demo-detail__cat-row .demo-detail__cat > span {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* 글 상세 — 액션 위 매칭 안내 박스 */
.demo-detail__matching-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 12px 14px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  color: #065F46;
  font-size: 12px;
  line-height: 1.55;
}
.demo-detail__matching-info svg {
  flex-shrink: 0;
  color: #10B981;
  margin-top: 1px;
}
.demo-detail__matching-info strong {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: #065F46;
}
.demo-detail__matching-info p {
  margin: 0;
  color: #047857;
}

/* 글쓰기 — 카테고리 선택 후 매칭 안내 */
.demo-cat-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  color: #065F46;
  font-size: 12px;
  line-height: 1.5;
}
.demo-cat-hint svg {
  flex-shrink: 0;
  color: #10B981;
  margin-top: 1px;
}
.demo-cat-hint b { font-weight: 700; color: #065F46; }