/* ================================================================
   댕댕서울 — FoodDash Design System 기반
   Font : Poppins (headings) + DM Sans (body) + Roboto Mono
   Color: FoodDash Semantic Tokens — primary red #DC2626
   Type : FoodDash Typography Scale (h1 28 / h2 22 / h3 18 / body 14)
   Grid : 6pt base (mobile-optimized)
================================================================ */

/* ─── Design tokens (FoodDash DS) ─────────────────────────────── */
:root {
  /* ── FoodDash Surfaces ── */
  --bg:           #FFFFFF;   /* Page background */
  --surface:      #FFFFFF;   /* Cards, sheets */
  --surface-2:    #FAFAFA;   /* Hover / alt bg */
  --surface-3:    #F5F5F5;   /* Pressed / muted */
  --separator:    #E5E5E5;   /* Default border */
  --separator-2:  #F5F5F5;   /* Divider */

  /* ── FoodDash Text ── */
  --text-1:       #171717;   /* Primary */
  --text-2:       #404040;   /* Secondary */
  --text-3:       #525252;   /* Tertiary */
  --text-4:       #737373;   /* Muted / disabled */
  --text-strong:  #000000;

  /* ── FoodDash Brand: Red primary ── */
  --brand:        #DC2626;
  --brand-dark:   #B91C1C;   /* pressed */
  --brand-light:  #FEF2F2;   /* soft bg */
  --secondary:    #EA580C;   /* promotions / deals */
  --tertiary:     #16A34A;   /* available / open */

  /* ── FoodDash Semantic ── */
  --success:      #16A34A;
  --success-bg:   #DCFCE7;
  --warning:      #D97706;
  --warning-bg:   #FEF3C7;
  --danger:       #EF4444;
  --danger-bg:    #FEE2E2;
  --info:         #2563EB;
  --info-bg:      #DBEAFE;

  /* ── 카테고리 색상 (FoodDash 팔레트로 재매핑) ── */
  --park:         #16A34A;
  --park-bg:      #DCFCE7;
  --restaurant:   #DC2626;
  --restaurant-bg:#FEE2E2;
  --cafe:         #8E6A4B;
  --cafe-bg:      rgba(142,106,75,0.10);
  --pf-cafe:      #2563EB;
  --pf-cafe-bg:   #DBEAFE;
  --vet:          #EF4444;
  --vet-bg:       #FEE2E2;
  --playground:   #EA580C;
  --playground-bg:#FFEDD5;

  /* ── FoodDash Border Radius ── */
  --radius-xs:    6px;    /* sm — tags */
  --radius-sm:    6px;
  --radius-md:    12px;   /* cards, inputs */
  --radius-lg:    16px;   /* sheets, modals */
  --radius-xl:    16px;
  --radius-pill:  9999px; /* CTA buttons, search */

  /* ── FoodDash Shadows (Material-style) ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.16);
  --shadow-xl:    0 12px 32px rgba(0,0,0,0.20);

  /* ── Wanted DS: Typography Scale ── */
  --fs-display1:  56px;   /* Display 1 */
  --fs-display2:  40px;   /* Display 2 */
  --fs-display3:  36px;   /* Display 3 */
  --fs-title1:    32px;   /* Title 1 */
  --fs-title2:    28px;   /* Title 2 */
  --fs-title3:    24px;   /* Title 3 */
  --fs-heading1:  22px;   /* Heading 1 */
  --fs-heading2:  20px;   /* Heading 2 */
  --fs-headline1: 18px;   /* Headline 1 */
  --fs-headline2: 17px;   /* Headline 2 */
  --fs-body1:     16px;   /* Body 1 */
  --fs-body2:     15px;   /* Body 2 */
  --fs-label1:    14px;   /* Label 1 */
  --fs-label2:    13px;   /* Label 2 */
  --fs-caption1:  12px;   /* Caption 1 */
  --fs-caption2:  11px;   /* Caption 2 */

  /* ── Wanted DS: Letter Spacing ── */
  --ls-display1:  -0.0319em;
  --ls-display2:  -0.0282em;
  --ls-display3:  -0.027em;
  --ls-title1:    -0.0253em;
  --ls-title2:    -0.0236em;
  --ls-title3:    -0.023em;
  --ls-heading1:  -0.0194em;
  --ls-heading2:  -0.012em;
  --ls-headline1: -0.002em;
  --ls-headline2: 0em;
  --ls-body1:     0.0057em;
  --ls-body2:     0.0096em;
  --ls-label1:    0.0145em;
  --ls-label2:    0.0194em;
  --ls-caption1:  0.0252em;
  --ls-caption2:  0.0311em;

  /* ── Wanted DS: Line Height ── */
  --lh-display1:  1.286;
  --lh-display2:  1.300;
  --lh-display3:  1.334;
  --lh-title1:    1.375;
  --lh-title2:    1.358;
  --lh-title3:    1.334;
  --lh-heading1:  1.364;
  --lh-heading2:  1.400;
  --lh-headline1: 1.445;
  --lh-headline2: 1.412;
  --lh-body1:     1.500;
  --lh-body2:     1.467;
  --lh-label1:    1.429;
  --lh-label2:    1.385;
  --lh-caption1:  1.334;
  --lh-caption2:  1.273;

  --sidebar-w:    340px;
  --header-h:     64px;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; }
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; }

/* ─── Wanted DS Typography — 전역 적용 ───────────────────────── */
/* Heading 계열: negative letter-spacing */
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: 'ss10' 1;
  letter-spacing: var(--ls-heading1);
  line-height: var(--lh-heading1);
}
/* 카드/섹션 타이틀 패턴 */
[class*="-title"]:not(.event-card-title):not(.adopt-skeleton-title):not(.karma-skeleton-title) {
  letter-spacing: var(--ls-headline1);
  font-feature-settings: 'ss10' 1;
}
/* 본문/설명 패턴 */
[class*="-desc"], [class*="-msg"], [class*="-sub"]:not(.merch-title-sub) {
  letter-spacing: var(--ls-body2);
  line-height: var(--lh-body2);
  font-feature-settings: 'ss10' 1;
}
/* 라벨/칩/뱃지 패턴 */
[class*="-chip"], [class*="-badge"], [class*="-label"], [class*="-tag"] {
  letter-spacing: var(--ls-label1);
  font-feature-settings: 'ss10' 1;
}
/* 캡션 패턴 */
[class*="-caption"], [class*="-meta"], [class*="-date"] {
  letter-spacing: var(--ls-caption1);
  font-feature-settings: 'ss10' 1;
}
/* 버튼 패턴 */
button, .btn, [class*="-btn"] {
  letter-spacing: var(--ls-label1);
  font-feature-settings: 'ss10' 1;
}

body {
  font-family: 'DM Sans', 'Pretendard JP', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text-1);
  font-size: var(--fs-body2);
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* 모바일에서 어떤 자식 요소도 디바이스 가로 너비를 넘지 못하게 막음 */
  overflow-x: hidden;
  max-width: 100vw;
}

/* 모든 요소를 box-sizing border-box로 강제해 padding/border 때문에 가로 삐침 방지 */
*, *::before, *::after { box-sizing: border-box; }

/* 모바일 전역 가드: html/body 가로 스크롤 차단 + 이미지/캔버스/iframe 최대폭 제한 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
  }
  img, canvas, video, iframe, svg { max-width: 100%; height: auto; }
  table, pre { max-width: 100%; overflow-x: auto; }
}

/* FoodDash: 헤딩은 Poppins */
h1, h2, h3, h4, h5, h6,
[class*="page-title"], [class*="-title"]:not(.event-card-title):not(.adopt-skeleton-title):not(.karma-skeleton-title),
.logo-text {
  font-family: 'Poppins', 'DM Sans', 'Pretendard JP', 'Pretendard', sans-serif;
}

/* FoodDash: 모노는 Roboto Mono */
code, pre, .mono, [class*="-mono"], [class*="-code"] {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE TITLE BLOCK — 컨텐츠 영역 최상단 페이지 타이틀
═══════════════════════════════════════════════════════════════ */
.page-title-block {
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--separator);
  margin-bottom: 24px;
}
.page-title {
  font-size: var(--fs-heading2);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: var(--ls-heading2);
  line-height: var(--lh-heading2);
}
.page-title-sub {
  font-size: var(--fs-body2);
  color: var(--text-3);
  letter-spacing: var(--ls-body2);
  line-height: var(--lh-body2);
  margin-top: 5px;
}
/* aiw-wrap은 flex gap으로 간격 관리하므로 margin-bottom 제거 */
.aiw-header.page-title-block {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — Apple 스타일 컴팩트 (height: 64px)
═══════════════════════════════════════════════════════════════ */
.header {
  height: var(--header-h);
  /* Apple의 유리 효과 내비게이션 바 */
  background: rgba(255,255,255,0.80);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 32px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 로고 — Apple 로고 크기에 맞게 컴팩트하게 */
.header-logo { display: flex; align-items: center; flex-shrink: 0; }

.logo-img {
  height: 53px;   /* 헤더 64px에 비례한 로고 높이 (+20%) */
  width: auto;
  object-fit: contain;
}

/* ── 탭 네비게이션 — Apple macOS 스타일 텍스트 링크 ─────────── */
.tab-nav {
  display: flex;
  gap: 28px;   /* Apple 스타일의 적당한 간격 */
}

.tab-btn {
  padding: 4px 0;
  border: none;
  background: transparent;
  font-size: var(--fs-body2);
  font-weight: 500;
  line-height: var(--lh-body2);
  letter-spacing: var(--ls-body2);
  color: var(--text-3);
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
  white-space: nowrap;
}

.tab-btn:hover { color: var(--text-1); }

.tab-btn.active {
  color: var(--text-1);
  font-weight: 600;
}

/* 활성 탭 하단 인디케이터 — Apple 스타일 얇은 오렌지 선 */
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}


/* ═══════════════════════════════════════════════════════════════
   APP BODY
═══════════════════════════════════════════════════════════════ */
.app-body {
  flex: 1;
  display: flex;
  overflow: visible;
}

.tab-content {
  display: none;
  flex: 1;
  position: relative;
  overflow: visible;
  min-height: calc(100dvh - var(--header-h));
}

.tab-content.active {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#tab-map       { position: relative; overflow: hidden; height: calc(100dvh - var(--header-h)); min-height: unset; }
#tab-recommend { overflow: visible; background: var(--bg); }
#tab-dashboard { overflow: visible; background: var(--bg); }


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 0.5px solid var(--separator);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 8px;
  /* iOS 검색창 스타일: 밝은 회색 배경, 더 둥근 모서리 */
  background: var(--surface-3);
  border-radius: var(--radius-md);   /* 더 둥글게 */
  padding: 9px 12px;
  transition: background 0.15s;
}

/* 검색창 포커스 시 살짝 밝아지는 Apple 효과 */
.sidebar-search:focus-within {
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(255,140,66,0.14);
}

.search-icon { width: 15px; height: 15px; opacity: 0.32; flex-shrink: 0; }

#search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-label1);
  color: var(--text-1);
  outline: none;
}

#search-input::placeholder { color: var(--text-4); }

.search-clear { background: none; border: none; padding: 0; display: flex; }
.search-clear img  { width: 14px; height: 14px; opacity: 0.35; }
.search-clear.hidden { display: none; }

/* ── 구 드롭다운 ── */
.gu-dropdown-wrap {
  padding: 0 12px 8px;
  position: relative;
  z-index: 50;
}
.gu-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font-size: var(--fs-label2);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s;
}
.gu-dropdown-btn:hover { background: var(--surface-2); }
.gu-dropdown-btn[aria-expanded="true"] {
  border-color: var(--brand);
  background: var(--surface);
}
.gu-dropdown-pin { color: var(--brand); flex-shrink: 0; }
.gu-dropdown-text { flex: 1; text-align: left; }
.gu-dropdown-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.2s ease;
}
.gu-dropdown-btn[aria-expanded="true"] .gu-dropdown-arrow {
  transform: rotate(180deg);
}

.gu-dropdown-panel {
  position: absolute;
  top: calc(100% - 2px);
  left: 12px;
  right: 12px;
  background: var(--surface);
  border: 0.5px solid var(--separator);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.gu-dropdown-panel.hidden { display: none; }

.gu-option {
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: var(--fs-label2);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 0.5px solid var(--separator-2);
}
.gu-option:last-child { border-bottom: none; }
.gu-option:hover { background: var(--surface-2); }
.gu-option.active {
  color: var(--brand);
  font-weight: 700;
  background: var(--brand-light);
}

.filter-chips {
  display: flex;
  gap: 6px;
  padding: 4px 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar { display: none; }

.chip {
  display: flex;
  align-items: center;
  gap: 4px;
  /* iOS 스타일 필터 칩: 배경 + 테두리 없음, 알약 형태 */
  padding: 5px 12px;
  border: none;
  background: var(--surface-3);    /* Apple의 secondarySystemFill */
  color: var(--text-2);
  border-radius: 20px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-caption1);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.chip:hover { background: rgba(0,0,0,0.08); color: var(--text-1); }

/* 활성 칩: Apple 오렌지 tint */
.chip.active {
  background: var(--brand);
  color: white;
  box-shadow: 0 2px 8px rgba(255,140,66,0.30);
}

.chip-icon { width: 13px; height: 13px; }
.chip.active .chip-icon { filter: brightness(0) invert(1); }
.chip:not(.active) .chip-icon { opacity: 0.55; }

.sidebar-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding: 0 12px 10px;
  border-bottom: 0.5px solid var(--separator);
}

.count-left          { display: flex; align-items: baseline; gap: 3px; }
.sidebar-count-label { font-size: var(--fs-caption1); color: var(--text-4); }
.sidebar-count-num   { font-size: var(--fs-body2); font-weight: 700; color: var(--brand); }

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238E8E93'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 24px 5px 10px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s;
}
.sort-select:hover { background-color: var(--surface-3); }

.place-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.place-list::-webkit-scrollbar { width: 3px; }
.place-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

.place-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;   /* Apple 리스트 아이템 내부 여백 */
  border-bottom: 0.5px solid var(--separator-2);
  cursor: pointer;
  transition: background 0.12s;
}

/* Apple 리스트 hover: 아주 연한 회색 */
.place-item:hover  { background: rgba(0,0,0,0.03); }
.place-item.active { background: var(--brand-light); }

.place-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.place-item-thumb.park       { background: var(--park-bg); }
.place-item-thumb.restaurant { background: var(--restaurant-bg); }
.place-item-thumb.cafe       { background: var(--cafe-bg); }
.place-item-thumb.pf-cafe    { background: var(--pf-cafe-bg); }
.place-item-thumb.vet        { background: var(--vet-bg); }
.place-item-thumb.playground { background: var(--playground-bg); }
.place-item-thumb.public-parking { background: var(--surface-3); }

/* 기본 카테고리 아이콘 */
.place-item-thumb-icon { width: 18px; height: 18px; }

.place-item-thumb.park       .place-item-thumb-icon { filter: invert(56%) sepia(60%) saturate(500%) hue-rotate(88deg) brightness(88%); }
.place-item-thumb.restaurant .place-item-thumb-icon { filter: invert(28%) sepia(90%) saturate(2000%) hue-rotate(344deg); }
.place-item-thumb.cafe       .place-item-thumb-icon { filter: invert(40%) sepia(20%) saturate(800%) hue-rotate(10deg) brightness(70%); }
.place-item-thumb.pf-cafe    .place-item-thumb-icon { filter: invert(29%) sepia(80%) saturate(1500%) hue-rotate(228deg) brightness(90%); }
.place-item-thumb.vet        .place-item-thumb-icon { filter: invert(20%) sepia(90%) saturate(2500%) hue-rotate(335deg); }
.place-item-thumb.playground .place-item-thumb-icon { filter: invert(48%) sepia(60%) saturate(600%) hue-rotate(164deg); }

/* 사진 로드 성공 시: 이미지 꽉 채우기 */
.place-item-thumb.has-photo { background: var(--surface-3); }
.place-item-thumb .place-item-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 하위호환: 기존 place-item-icon 클래스 */
.place-item-icon { display: none; }

.place-item-info { flex: 1; min-width: 0; }

.place-item-name {
  font-size: var(--fs-label2);
  font-weight: 600;
  letter-spacing: var(--ls-headline1);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-item-addr {
  font-size: var(--fs-caption1);
  color: var(--text-4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.place-item-dist {
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.place-item-arrow { width: 13px; height: 13px; opacity: 0.18; flex-shrink: 0; }

.place-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-4);
  font-size: var(--fs-label2);
  line-height: var(--lh-body1);
}

.skeleton-item {
  height: 62px;
  margin: 0 14px 1px;
  background: linear-gradient(90deg, var(--surface-2) 25%, #EBEBF0 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════
   MAP
═══════════════════════════════════════════════════════════════ */
#map { width: 100%; height: 100%; }

/* 로딩 오버레이 */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242,242,247,0.90);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: var(--fs-label2);
  font-weight: 500;
}

.loading-dog {
  width: 90px;
  height: 90px;
  object-fit: contain;
  transform-origin: center bottom;
  animation: dog-run-wobble 0.6s ease-in-out infinite;
}

@keyframes dog-run-wobble {
  0%   { transform: rotate(-15deg); }
  25%  { transform: rotate(0deg);   }
  50%  { transform: rotate(15deg);  }
  75%  { transform: rotate(0deg);   }
  100% { transform: rotate(-15deg); }
}

.loading-overlay.hidden { display: none; }

/* ── 미세먼지 플로팅 카드 — Apple 위젯 스타일 ──────────────── */
.air-banner {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* Apple 유리 카드 효과 */
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border: 0.5px solid rgba(255,255,255,0.60);
  border-radius: var(--radius-lg);   /* 조금 더 둥글게 */
  padding: 10px 14px 10px 36px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-caption1);
  font-weight: 600;
  color: var(--text-2);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}

/* 미세먼지 dot — 절대 위치로 왼쪽에 고정 */
.air-banner::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
  transition: background 0.3s;
}

/* 날씨 경고 라인 */
.weather-line {
  font-size: var(--fs-caption1);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-1);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--separator);
  width: 100%;
}
.weather-line.hidden { display: none; }
.weather-line.normal { color: var(--text-2); }
.weather-line.rain   { color: #007AFF; }
.weather-line.hot    { color: #FF3B30; }
.weather-line.cold   { color: #5856D6; }

.air-banner.good     { color: #1A7F37; }
.air-banner.good::before     { background: #34C759; }
.air-banner.normal   { color: #0055CC; }
.air-banner.normal::before   { background: #007AFF; }
.air-banner.bad      { color: #C45000; }
.air-banner.bad::before      { background: #FF9500; }
.air-banner.very-bad { color: #CC0000; }
.air-banner.very-bad::before { background: #FF3B30; }

/* ── 지도 우측 하단 워터마크 로고 ───────────────────────────── */
.map-watermark {
  position: absolute;
  bottom: 24px;
  right: 20px;
  z-index: 200;
  pointer-events: none;
}

.map-watermark-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════
   커스텀 마커 — 원형 핀
═══════════════════════════════════════════════════════════════ */
.custom-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.custom-marker:hover {
  transform: scale(1.14);
  box-shadow: 0 4px 14px rgba(0,0,0,0.26);
}

.custom-marker.park       { background: var(--park); }
.custom-marker.restaurant { background: var(--restaurant); }
.custom-marker.cafe       { background: var(--cafe); }
.custom-marker.pf-cafe    { background: var(--pf-cafe); }
.custom-marker.vet        { background: var(--vet); }
.custom-marker.playground     { background: var(--playground); }
.custom-marker.public-parking { background: #1565C0; }

.custom-marker .marker-icon { width: 14px; height: 14px; filter: brightness(0) invert(1); }


/* ═══════════════════════════════════════════════════════════════
   인포 팝업
═══════════════════════════════════════════════════════════════ */
.info-popup {
  background: var(--surface);
  /* Apple 카드: 크고 둥근 라운드 + 섬세한 그림자 */
  border-radius: var(--radius-xl);
  padding: 16px 16px 12px;
  min-width: 220px;
  max-width: 270px;
  box-shadow: var(--shadow-lg);
  position: relative;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
}

.info-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  /* Apple의 cirular close button: 회색 채움 원 */
  background: var(--surface-3);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.info-close-btn:hover { background: rgba(0,0,0,0.10); }
.info-close-btn img { width: 10px; height: 10px; opacity: 0.50; }

.info-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: white;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 6px;
  letter-spacing: var(--ls-label1);
}

.info-source-note {
  font-size: 10px;
  color: var(--text-4);
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--separator-2);
  line-height: 1.4;
  opacity: 0.85;
}

.info-tag.park       { background: var(--park); }
.info-tag.restaurant { background: var(--restaurant); }
.info-tag.cafe       { background: var(--cafe); }
.info-tag.pf-cafe    { background: var(--pf-cafe); }
.info-tag.vet        { background: var(--vet); }
.info-tag.playground { background: var(--playground); }
/* PetTourService(공공데이터포털) 신규 카테고리 */
.info-tag.tour       { background: #FF9500; }
.info-tag.culture    { background: #34C759; }
.info-tag.leports    { background: #0A84FF; }
.info-tag.lodging    { background: #AF52DE; }
.info-tag.shopping   { background: #5AC8FA; }

.info-name {
  font-size: var(--fs-label1);
  font-weight: 700;
  letter-spacing: var(--ls-heading2);
  color: var(--text-1);
  margin-bottom: 5px;
  padding-right: 20px;
}

.info-addr {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  line-height: var(--lh-headline2);
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.info-addr img { width: 11px; margin-top: 1px; opacity: 0.4; }

.info-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.info-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  border-radius: var(--radius-md);  /* Apple 스타일 더 둥글게 */
  font-size: var(--fs-caption1);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
  border: none;
}
.info-btn img { width: 12px; height: 12px; flex-shrink: 0; }
.info-btn:hover { opacity: 0.80; }

/* Apple tinted 버튼: 오렌지 틴트 배경 */
.info-btn-map  {
  background: var(--brand-light);
  color: var(--brand-dark);
}
.info-btn-map img  { filter: invert(45%) sepia(80%) saturate(700%) hue-rotate(5deg); }

/* 보조 버튼: Apple tertiary 스타일 */
.info-btn-navi {
  background: var(--surface-3);
  color: var(--text-2);
}

/* 정정 요청 버튼 */
.info-report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-3);
  font-size: var(--fs-caption2);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.info-report-btn img { width: 12px; height: 12px; filter: invert(50%); }
.info-report-btn:hover { background: rgba(255,45,85,0.06); color: var(--restaurant); border-color: var(--restaurant); }
.info-report-btn:hover img { filter: invert(30%) sepia(90%) saturate(700%) hue-rotate(320deg); }

/* 기존 단일 버튼 (하위호환) */
.info-naver-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 0;
  background: #03C75A;
  color: white;
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption1);
  font-weight: 700;
  transition: opacity 0.15s;
}

.info-naver-btn:hover { opacity: 0.85; }

.info-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}


/* ═══════════════════════════════════════════════════════════════
   맞춤 추천 탭
═══════════════════════════════════════════════════════════════ */
.recommend-wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  width: 100%;
}

.ai-upload-zone {
  background: var(--surface);
  border: 1.5px dashed var(--surface-3);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 24px;
}

.ai-upload-zone:hover,
.ai-upload-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-light);
}

.ai-upload-inner {
  padding: 52px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-upload-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ai-upload-icon img { width: 28px; height: 28px; opacity: 0.7; }

.ai-upload-title { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-headline2); line-height: var(--lh-headline2); color: var(--text-1); margin-bottom: 6px; }
.ai-upload-sub   { font-size: var(--fs-caption1); color: var(--text-4); margin-bottom: 18px; }

.ai-upload-btn {
  background: #FFF0E6;
  color: #E06800;
  border: 1.5px solid rgba(224,104,0,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 28px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: var(--fs-label2);
  font-weight: 700;
  transition: opacity 0.15s;
}

.ai-upload-btn:hover { background: #FFE4CC; opacity: 1; }

.ai-upload-preview {
  width: 580px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: calc(var(--radius-xl) - 1.5px);
}

.recommend-result.hidden { display: none; }

.breed-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 16px;
}

.breed-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.breed-card-icon img { width: 28px; height: 28px; opacity: 0.7; }
.breed-card-name { font-size: var(--fs-headline1); font-weight: 700
  font-weight: 700; letter-spacing: var(--ls-heading1); color: var(--text-1); }
.breed-card-size { font-size: var(--fs-caption1); font-weight: 600; margin-top: 4px; }
.breed-card-msg  { font-size: var(--fs-label2); color: var(--text-2); margin-top: 6px; line-height: var(--lh-body2); }

.recommend-list-title {
  font-size: var(--fs-label1);
  font-weight: 700;
  letter-spacing: var(--ls-heading2);
  color: var(--text-1);
  margin-top: 16px;
  margin-bottom: 12px;
}

.recommend-place-list { display: flex; flex-direction: column; gap: 8px; }

.recommend-place-item {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.recommend-place-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }

.recommend-place-item .place-item-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recommend-place-item .place-item-info { flex: 1; min-width: 0; }
.recommend-place-item .place-item-name { font-size: var(--fs-label2); font-weight: 600; letter-spacing: var(--ls-headline1); }
.recommend-place-item .place-item-addr { font-size: var(--fs-caption1); color: var(--text-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* AI 결과 아이콘 */
.ai-result-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-result-icon.size-small  { background: rgba(142,106,75,0.10); }
.ai-result-icon.size-medium { background: rgba(0,122,255,0.10); }
.ai-result-icon.size-large  { background: rgba(52,199,89,0.10); }

.ai-icon-img { width: 22px; height: 22px; opacity: 0.75; }

.ai-result-icon.size-small  .ai-icon-img { filter: invert(40%) sepia(20%) saturate(800%) hue-rotate(10deg) brightness(70%); }
.ai-result-icon.size-medium .ai-icon-img { filter: invert(30%) sepia(90%) saturate(1500%) hue-rotate(205deg); }
.ai-result-icon.size-large  .ai-icon-img { filter: invert(56%) sepia(60%) saturate(500%) hue-rotate(88deg) brightness(88%); }


/* ═══════════════════════════════════════════════════════════════
   대시보드
═══════════════════════════════════════════════════════════════ */
.dashboard-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  width: 100%;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--surface);
  /* Apple 카드: 라운드 + 초미세 그림자 (Float 느낌 없음) */
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  /* Apple 카드 하단 구분선 대신 border 없이 배경 대비로 분리 */
  border: 0.5px solid rgba(0,0,0,0.06);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.stat-icon img { width: 18px; height: 18px; opacity: 0.75; }

.stat-label { font-size: var(--fs-caption2); color: var(--text-3); line-height: var(--lh-headline2); }
.stat-value { font-size: var(--fs-label1); font-weight: 800; letter-spacing: var(--ls-heading2); color: var(--brand); margin-top: 4px; }

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.chart-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-xs);
  border: 0.5px solid rgba(0,0,0,0.06);
}

.chart-title { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-headline2); line-height: var(--lh-headline2); color: var(--text-1); margin-bottom: 3px; }
.chart-desc  { font-size: var(--fs-caption2); color: var(--text-4); margin-bottom: 12px; }
.chart-source-note { font-size: 11px; color: var(--text-4); margin-top: 10px; line-height: 1.5; opacity: 0.85; }
.chart-box   { height: 700px; position: relative; }
.chart-box canvas { cursor: pointer; }

/* 코로플레스 지도 — 카드 없이 배경 위에 직접 노출 */
.choropleth-section {
  margin-bottom: 4px;
  padding: 0 4px;
}
.choropleth-guide-text {
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 10px;
  padding: 0 4px;
}
.comm2-rank-guide {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  margin-bottom: 10px;
}

.district-map-box {
  height: 460px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  background: transparent;
}

/* 지도 위 타이틀 오버레이 */
.choropleth-title-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  padding-top: 8px;
}
.choropleth-map-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: var(--ls-heading2);
  line-height: var(--lh-title3);
}
.choropleth-map-desc {
  font-size: var(--fs-caption2);
  color: var(--text-3);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   강아지 맞춤 분석 — 2분할 통합 카드
═══════════════════════════════════════════════════════════════ */
.analyzer-card {
  background: var(--surface);
  /* Apple 그룹 카드 스타일 */
  border-radius: var(--radius-xl);
  padding: 22px 20px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border: 0.5px solid rgba(0,0,0,0.06);
}

.analyzer-header { margin-bottom: 18px; }
.analyzer-title  { font-size: var(--fs-body1); font-weight: 700
  font-weight: 700; letter-spacing: var(--ls-heading2); color: var(--text-1); margin-bottom: 4px; }
.analyzer-desc   { font-size: var(--fs-caption1); color: var(--text-3); line-height: var(--lh-body2); }

.analyzer-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.analyzer-photo-side { display: flex; flex-direction: column; gap: 6px; }

/* 업로드 존 — 2분할 안에서 정사각형 느낌으로 */
.analyzer-photo-side .ai-upload-zone {
  margin-bottom: 0;
  min-height: 220px;
  display: flex;
  align-items: stretch;
}
.analyzer-photo-side .ai-upload-inner {
  padding: 28px 16px;
  flex: 1;
}
.analyzer-photo-side .ai-upload-preview {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - 1.5px);
}

.analyzer-photo-hint {
  font-size: var(--fs-caption2);
  color: var(--text-4);
  text-align: center;
  min-height: 18px;
}

.analyzer-info-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analyzer-field { display: flex; flex-direction: column; gap: 6px; }
.analyzer-label { font-size: var(--fs-caption1); font-weight: 700; color: var(--text-2); }

.analyzer-submit-btn {
  width: 100%;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px;
  font-family: inherit;
  font-size: var(--fs-label1);
  font-weight: 700
  font-weight: 700;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.analyzer-submit-btn:hover { opacity: 0.88; }
.analyzer-submit-btn:disabled { opacity: 0.5; cursor: wait; }

/* 산책 시간 결과 카드 */
.walk-result-card {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
}
.walk-result-card.hidden { display: none; }

@media (max-width: 640px) {
  .analyzer-split { grid-template-columns: 1fr; }
  .analyzer-photo-side .ai-upload-zone { min-height: 160px; }
}

/* ═══════════════════════════════════════════════════════════════
   산책 가능도 카드 (analyzer-card 동일 스타일)
═══════════════════════════════════════════════════════════════ */
.walk-index-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 22px 20px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  border: 0.5px solid rgba(0,0,0,0.06);
}

/* 본문: 좌우 분할 */
.walk-index-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}

.walk-index-left { flex: 1; min-width: 0; }

/* 카드 상단 섹션 레이블 ("미세먼지 현황") */
.walk-card-label {
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: var(--ls-label2);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* 뱃지 + PM10 수치 한 줄 */
.walk-index-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.walk-index-badge {
  display: inline-block;
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: var(--ls-label1);
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-3);
  flex-shrink: 0;
}
.walk-index-badge.good     { background: #E9F9EE; color: #1A7F37; }
.walk-index-badge.normal   { background: #FFF8E1; color: #B06000; }
.walk-index-badge.bad      { background: #FFF0E8; color: #C0400A; }
.walk-index-badge.very-bad { background: #FFECEC; color: #C0000A; }

/* PM10 인라인 텍스트 */
.walk-pm10-inline {
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

.walk-index-sub { font-size: var(--fs-caption1); color: var(--text-3); line-height: var(--lh-headline2); }

/* 우측: 산책 가능도 수직 정렬 */
.walk-index-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
  gap: 4px;
}
.walk-index-score-label {
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: var(--ls-label1);
  color: var(--text-3);
  text-transform: uppercase;
  line-height: var(--lh-headline2);
}
.walk-index-score-val {
  font-size: var(--fs-headline1);
  font-weight: 700;
  letter-spacing: var(--ls-title3);
  color: var(--text-1);
}
.walk-index-score-val.good     { color: #1A7F37; }
.walk-index-score-val.normal   { color: #B06000; }
.walk-index-score-val.bad      { color: #C0400A; }
.walk-index-score-val.very-bad { color: #C0000A; }

/* 날씨 섹션 */
.walk-weather-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--separator);
  display: flex;
  align-items: center;
  gap: 10px;
}
.walk-weather-label {
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: var(--ls-label2);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.walk-weather-info {
  font-size: var(--fs-label2);
  color: var(--text-1);
  font-weight: 500;
  line-height: var(--lh-headline2);
}

/* 하위호환 — 사용 안 하는 구 클래스 */
.walk-index-top  { display: none; }
.walk-index-info { display: none; }
.walk-pm10-badge { display: none; }

.walk-modal-open-btn {
  width: 100%;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: var(--fs-label2);
  font-weight: 700;
  text-align: center;
  transition: background 0.15s;
}
.walk-modal-open-btn:hover { background: rgba(255,140,66,0.18); }

/* 산책 모달 */
.walk-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.46);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.walk-modal-backdrop.hidden { display: none; }

.walk-modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: var(--shadow-lg);
}

.walk-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--surface-2);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.walk-modal-close img { width: 12px; height: 12px; opacity: 0.5; }

.walk-modal-title { font-size: var(--fs-headline2); font-weight: 700
  font-weight: 700; letter-spacing: var(--ls-heading1); color: var(--text-1); margin-bottom: 6px; }
.walk-modal-desc  { font-size: var(--fs-caption1); color: var(--text-3); line-height: var(--lh-body1); margin-bottom: 22px; }

.walk-modal-field { margin-bottom: 16px; }
.walk-modal-label {
  display: block;
  font-size: var(--fs-caption1);
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 7px;
}

.walk-weight-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.walk-weight-input {
  width: 110px;
  padding: 9px 12px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface-2);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.walk-weight-input:focus {
  border-color: rgba(255,140,66,0.6);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255,140,66,0.12);
}
.walk-weight-unit { font-size: var(--fs-label2); font-weight: 600; color: var(--text-3); }

.walk-breed-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface-2);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.walk-breed-input:focus {
  border-color: rgba(255,140,66,0.6);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255,140,66,0.12);
}

.walk-neuter-row {
  display: flex;
  gap: 20px;
}
.walk-neuter-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-label2);
  color: var(--text-2);
  cursor: pointer;
}

/* ── Apple iOS 세그먼트 컨트롤 — 중성화 여부 ────────────────── */
.neuter-seg-ctrl {
  display: flex;
  width: 100%;
  background: var(--surface-2);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  border: 0.5px solid var(--separator);
}
.neuter-seg-opt {
  position: relative;
  cursor: pointer;
  flex: 1;
}
.neuter-seg-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.neuter-seg-opt span {
  display: block;
  padding: 6px 0;
  text-align: center;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-3);
  border-radius: 7px;
  transition: color 0.18s, background 0.18s,
              box-shadow 0.22s cubic-bezier(0.34, 1.26, 0.64, 1);
  user-select: none;
  white-space: nowrap;
}
.neuter-seg-opt input:checked + span {
  background: #fff;
  color: var(--text-1);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0.5px 1px rgba(0,0,0,0.05);
}
.neuter-seg-opt:active span {
  opacity: 0.75;
}

.walk-modal-submit {
  width: 100%;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 13px;
  font-family: inherit;
  font-size: var(--fs-label1);
  font-weight: 700
  font-weight: 700;
  margin-top: 6px;
  transition: opacity 0.15s;
}
.walk-modal-submit:hover { opacity: 0.88; }

.walk-modal-result {
  margin-top: 18px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.walk-modal-result.hidden { display: none; }

.wmr-head   { font-size: var(--fs-caption1); font-weight: 700; color: var(--text-3); margin-bottom: 8px; }
.wmr-time   { font-size: var(--fs-display3); font-weight: 900; letter-spacing: -1px; color: var(--brand); line-height: 1; margin-bottom: 4px; }
.wmr-unit   { font-size: var(--fs-caption1); font-weight: 600; color: var(--text-3); }
.wmr-tips   { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.wmr-tip    { font-size: var(--fs-caption1); color: var(--text-2); line-height: 1.5; padding-left: 12px; position: relative; }
.wmr-tip::before { content: '·'; position: absolute; left: 2px; color: var(--brand); font-weight: 700; }
.wmr-air-note { font-size: var(--fs-caption1); color: var(--text-3); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--separator); }

/* 공원 상세 stat (팝업 내) */
.info-park-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--park-bg);
  border-radius: var(--radius-xs);
  padding: 5px 8px;
  margin-top: 6px;
}
.info-park-stat-label { font-size: var(--fs-caption2); color: var(--park); font-weight: 600; }
.info-park-stat-val   { font-size: var(--fs-caption2); color: var(--text-2); font-weight: 700; }

/* 동물병원 응급 배지 */
.info-vet-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vet-bg);
  color: var(--vet);
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 6px;
}

/* 놀이터 예약 링크 */
.info-reservation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 12px;
  background: var(--playground-bg);
  color: var(--playground);
  border-radius: var(--radius-xs);
  font-size: var(--fs-caption1);
  font-weight: 700;
  transition: opacity 0.15s;
}
.info-reservation-btn:hover { opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════
   입양 연계 섹션
═══════════════════════════════════════════════════════════════ */
.adoption-section {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 22px 20px 18px;
  margin-top: 28px;
  box-shadow: var(--shadow-sm);
}

.adoption-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.adoption-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--vet-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adoption-icon-img { width: 22px; height: 22px; filter: invert(20%) sepia(90%) saturate(2500%) hue-rotate(335deg); }

.adoption-title { font-size: var(--fs-body2); font-weight: 700; letter-spacing: var(--ls-body2); line-height: var(--lh-body2); color: var(--text-1); }
.adoption-sub   { font-size: var(--fs-caption1); color: var(--text-3); margin-top: 3px; }

.adoption-loading { font-size: var(--fs-caption1); color: var(--text-4); padding: 8px 0; }

.adoption-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: background 0.15s;
}
.adoption-card:hover { background: var(--surface-3); }

.adoption-card-photo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.adoption-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--vet-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adoption-card-icon img { width: 22px; height: 22px; filter: invert(20%) sepia(90%) saturate(2500%) hue-rotate(335deg); }

.adoption-card-info { flex: 1; min-width: 0; }
.adoption-card-name { font-size: var(--fs-label2); font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adoption-card-sub  { font-size: var(--fs-caption2); color: var(--text-3); margin-top: 2px; }
.adoption-card-care { font-size: var(--fs-caption2); color: var(--text-4); margin-top: 4px; }

/* 임시보호·입양문의 뱃지 */
.adoption-badges { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.adoption-badge {
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.badge-ok  { background: rgba(52,199,89,0.12);  color: #248a3d; }
.badge-ask { background: rgba(255,140,66,0.12); color: var(--brand-dark); }

/* 전화번호 링크 */
.adoption-tel-link {
  font-size: var(--fs-caption2);
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.adoption-tel-link:hover { text-decoration: underline; }

/* "더 많은 아이들 보기" — Apple pill CTA */
.adoption-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 13px 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;        /* pill */
  font-size: var(--fs-label1);
  font-weight: 600;
  letter-spacing: -0.1px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255,140,66,0.36);
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.adoption-more-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,140,66,0.44);
}
.adoption-more-btn:active {
  transform: translateY(0);
  opacity: 0.78;
}

/* ═══════════════════════════════════════════════════════════════
   우리동네 반려생활 리포트 (대시보드 인사이트)
═══════════════════════════════════════════════════════════════ */
.insights-section {
  margin-bottom: 16px;
}
.insights-title { font-size: var(--fs-body2); font-weight: 700; letter-spacing: var(--ls-body2); line-height: var(--lh-body2); color: var(--text-1); margin-bottom: 3px; }
.insights-sub   { font-size: var(--fs-caption2); color: var(--text-3); margin-bottom: 12px; }

.insights-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.insight-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
}

.insight-card-label { font-size: var(--fs-caption2); font-weight: 700; color: var(--text-4); letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 4px; }
.insight-card-val   { font-size: var(--fs-label1); font-weight: 700; color: var(--text-1); letter-spacing: var(--ls-headline1); line-height: var(--lh-headline2); }
.insight-card-sub   { font-size: var(--fs-caption2); color: var(--text-3); margin-top: 4px; line-height: var(--lh-headline2); }

.dashboard-note { font-size: var(--fs-caption2); color: var(--text-4); text-align: center; margin-top: 4px; }

/* 구 툴팁 (SVG 코로플레스 절대위치 오버레이) */
.district-tooltip {
  position: absolute;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 16px 8px;
  box-shadow: var(--shadow-md);
  text-align: center;
  font-family: 'Pretendard', -apple-system, sans-serif;
  min-width: 110px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, calc(-100% - 10px));
}
.district-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid white;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.08));
}

.district-tooltip .dt-gu    { font-size: var(--fs-caption1); font-weight: 700; letter-spacing: var(--ls-headline1); color: var(--text-1); margin-bottom: 4px; }
.district-tooltip .dt-count { font-size: var(--fs-body1); font-weight: 900; letter-spacing: var(--ls-heading1); color: var(--brand); margin-bottom: 2px; }
.district-tooltip .dt-score { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-heading1); color: var(--brand); }


/* ═══════════════════════════════════════════════════════════════
   댕댕 점수 지도 범례
═══════════════════════════════════════════════════════════════ */
.score-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: var(--fs-caption1);
  font-weight: 600;
  color: var(--text-2);
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot.high { background: #34C759; }
.legend-dot.mid  { background: #FFB800; }
.legend-dot.low  { background: #FF453A; }


/* ═══════════════════════════════════════════════════════════════
   구 상세 카드
═══════════════════════════════════════════════════════════════ */
.district-detail-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
  overflow: hidden;
  animation: slide-in 0.3s ease;
}
.district-detail-card.hidden { display: none; }

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ddc-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 16px;
}

.ddc-top.score-high { border-left: 5px solid #34C759; }
.ddc-top.score-mid  { border-left: 5px solid #FFB800; }
.ddc-top.score-low  { border-left: 5px solid #FF453A; }

.ddc-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.ddc-score-num   { font-size: var(--fs-title2); font-weight: 900
  font-weight: 700; color: var(--brand); line-height: 1; }
.ddc-score-label { font-size: var(--fs-caption2); font-weight: 700; color: var(--text-3); margin-top: 2px; }

.ddc-info { flex: 1; }
.ddc-emoji { display: flex; align-items: center; margin-bottom: 6px; }
.ddc-emoji svg { width: 20px; height: 20px; flex-shrink: 0; }
.ddc-title { font-size: var(--fs-body2); font-weight: 700
  font-weight: 700; color: var(--text-1); margin-bottom: 4px; letter-spacing: var(--ls-headline1); }
.ddc-msg   { font-size: var(--fs-caption1); color: var(--text-3); line-height: var(--lh-body1); }

.ddc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--separator);
  border-top: 1px solid var(--separator);
}
.ddc-stat-item {
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ddc-stat-label { font-size: var(--fs-caption2); font-weight: 600; color: var(--text-3); }
.ddc-stat-val   { font-size: var(--fs-body2); font-weight: 800
  font-weight: 700; color: var(--text-1); }

.ddc-buttons {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.ddc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--brand-dark);
  font-size: var(--fs-label2);
  font-weight: 700;
  font-family: inherit;
  border: 1.5px solid var(--brand);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ddc-btn:hover { background: var(--brand-light); }


/* ── 점수 차트 전체 너비 + 높이 ─── */
.chart-card-full { grid-column: 1 / -1; }
.chart-box-tall  { height: 560px; }

/* ── 통계 카드 하이라이트 ─── */
.stat-card-highlight {
  background: linear-gradient(135deg, #FFF4E6, #FFF9F0);
  border: 1.5px solid var(--brand-light);
}
.stat-card-highlight .stat-icon { font-size: var(--fs-heading1); }

/* 모바일 ddc-stats */
@media (max-width: 768px) {
  .ddc-stats { grid-template-columns: repeat(2, 1fr); }
  .chart-box-tall { height: 700px; }
}


/* ═══════════════════════════════════════════════════════════════
   반응형 (≤ 768px) — iOS 스타일
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 100%;
    --header-h:  48px;

    /* 모바일: 래디우스 최소화 */
    --radius-xs:  2px;
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  8px;
    --radius-xl:  10px;

    /* 모바일: 카드 그림자 제거 — 라인 구분으로 대체 */
    --shadow-xs:  none;
    --shadow-sm:  none;
    --shadow-md:  none;
    --shadow-lg:  0 2px 8px rgba(0,0,0,0.08);
  }

  /* 카드들: 그림자 대신 border로 구분 */
  .stat-card,
  .chart-card,
  .insight-card,
  .aiw-form,
  .aiw-result,
  .analyzer-card {
    box-shadow: none;
    border: 1px solid var(--separator);
  }

  /* 미세먼지 현황: 모바일에서 카드 없이 플랫 레이아웃 */
  .walk-index-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
    margin-bottom: 8px;
  }
  .walk-card-label { margin-bottom: 4px; }
  .walk-weather-section { margin-top: 8px; padding-top: 8px; }

  /* 앱 본문: relative 기준점 (bottom sheet absolute 포지셔닝용) */
  .app-body {
    flex-direction: column;
    position: relative;
  }

  /* 지도 탭 활성 시: body + app-body 스크롤 잠금, 정확한 높이 확보 */
  body.tab-map-active {
    overflow: hidden;
    height: 100dvh;
  }
  body.tab-map-active .app-body {
    height: calc(100dvh - var(--header-h));
    overflow: hidden;
  }
  body.tab-map-active .main-content {
    flex: 1;
    min-height: 0;
  }

  /* 비지도 탭: main-content 자연 흐름 */
  .main-content { flex: 1; order: 1; min-height: calc(100dvh - var(--header-h)); }

  /* ── 바텀시트 — iOS Sheet 스타일 ─────────────────────────── */
  .sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 42dvh;
    border-right: none;
    border-top: none;
    order: 2;
    /* iOS 바텀시트 코너: 탑 좌우만 둥글게 */
    border-radius: 16px 16px 0 0;
    /* iOS 카드 그림자 패턴 */
    box-shadow: 0 -2px 20px rgba(0,0,0,0.08), 0 -1px 4px rgba(0,0,0,0.04);
    transition: height 0.32s cubic-bezier(0.34, 1.26, 0.64, 1);
    /* 미세먼지 카드(z-index:20) 위로 깔리도록 시트를 더 높게 */
    z-index: 30;
  }
  .sidebar.sheet-expanded { height: 82dvh; }

  /* 미세먼지 카드는 시트 아래로 깔리되 지도 위에는 떠있게 */
  .air-banner { z-index: 5; }

  /* ── iOS 핸들 바 ─────────────────────────────────────────── */
  .sidebar-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 6px;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
  }
  .sidebar-handle:active { cursor: grabbing; }
  .sidebar-handle-bar {
    /* iOS 정확한 핸들 사이즈 */
    width: 36px;
    height: 4px;
    background: var(--surface-3);   /* Apple의 연한 핸들 색 */
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
  }
  .sidebar-handle:hover .sidebar-handle-bar,
  .sidebar-handle:active .sidebar-handle-bar {
    background: var(--text-4);
    width: 44px;
  }

  /* 헤더: iOS 컴팩트 */
  .header       { padding: 0 16px; gap: 10px; }
  .logo-img     { height: 31px; }
  .tab-btn      { font-size: var(--fs-label2); }
  .tab-nav      { display: none; }

  .stat-cards     { grid-template-columns: 1fr 1fr; }
  .charts-grid    { grid-template-columns: 1fr; }
  .insights-list  { grid-template-columns: 1fr; }

  .map-watermark-img { height: 67px; }

  /* 헤더 인증 영역: 모바일에서 표시 (로그인 버튼 + 햄버거) */
  .header-auth { display: flex; }
  .auth-modal-box { width: calc(100vw - 32px); max-height: 90dvh; overflow-y: auto; }

  /* 페이지 타이틀 — 모바일 여백 축소 */
  .page-title-block { padding-bottom: 14px; margin-bottom: 18px; }
  .page-title       { font-size: var(--fs-headline1); }
}


/* ═══════════════════════════════════════════════════════════════
   헤더 인증 버튼
═══════════════════════════════════════════════════════════════ */
.header-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-login-btn {
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-label2);
  font-weight: 600;
  border: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  letter-spacing: -0.1px;
}
.header-login-btn:hover { color: var(--text-1); background: var(--surface-2); }

.header-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--separator);
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}
.header-user-chip .user-chip-icon { width: 14px; height: 14px; opacity: 0.6; }
.header-user-chip.hidden { display: none !important; }
.header-login-btn.hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   북마크 칩 배지
═══════════════════════════════════════════════════════════════ */
.bookmark-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-caption2);
  font-weight: 700;
  margin-left: 2px;
  line-height: 1;
}
.bookmark-badge.hidden { display: none; }


/* ═══════════════════════════════════════════════════════════════
   팝업 북마크 버튼
═══════════════════════════════════════════════════════════════ */
.info-bookmark-btn {
  position: absolute;
  top: 12px;
  right: 44px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.info-bookmark-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  filter: none;
  transition: opacity 0.15s, filter 0.15s;
}
.info-bookmark-btn:hover { background: var(--surface-2); }
.info-bookmark-btn:hover img { opacity: 0.7; }
.info-bookmark-btn.active img {
  opacity: 1;
  filter: invert(56%) sepia(80%) saturate(600%) hue-rotate(358deg) brightness(103%);
}


/* ═══════════════════════════════════════════════════════════════
   팝업 교통 혼잡도
═══════════════════════════════════════════════════════════════ */
.info-traffic {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 7px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: var(--fs-caption1);
}
.traffic-label  { font-weight: 700; color: var(--text-2); }
.traffic-dot    { font-size: var(--fs-caption2); }
.traffic-status { font-weight: 700; }
.traffic-note   { color: var(--text-3); }
.traffic-roads  { color: var(--text-3); margin-left: 2px; }

.info-cctv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s;
}
.info-cctv-btn:hover {
  background: var(--brand);
  color: #fff;
}
.info-cctv-btn--disabled,
.info-cctv-btn:disabled {
  background: var(--surface-2);
  color: var(--text-4);
  border-color: var(--separator);
  cursor: not-allowed;
  opacity: 0.7;
}
.info-cctv-btn--disabled:hover,
.info-cctv-btn:disabled:hover {
  background: var(--surface-2);
  color: var(--text-4);
}


/* ═══════════════════════════════════════════════════════════════
   모달 공통
═══════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Apple 모달 딤 처리: 약간 더 진하게 */
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.hidden { display: none; }

.modal-box {
  background: var(--surface);
  /* Apple 모달 시트: 크고 둥근 코너 + 섬세한 그림자 */
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  position: relative;
  box-shadow: var(--shadow-lg);
  width: 360px;
  max-width: calc(100vw - 32px);
}

.modal-close-x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: var(--fs-headline2);
  color: var(--text-3);
  line-height: 1;
  padding: 4px;
}
.modal-close-x:hover { color: var(--text-1); }


/* ═══════════════════════════════════════════════════════════════
   인증 모달
═══════════════════════════════════════════════════════════════ */
.auth-modal-box { max-height: 90dvh; overflow-y: auto; }

.auth-modal-title {
  font-size: calc(var(--fs-body1) + 1px);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 18px;
}

.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--separator);
  margin-bottom: 20px;
}
.auth-tab-btn {
  flex: 1;
  padding: 9px 0;
  background: none;
  border: none;
  font-size: var(--fs-label1);
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

.auth-panel { }
.auth-panel.hidden { display: none; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.auth-label {
  font-size: var(--fs-caption1);
  font-weight: 700;
  color: var(--text-3);
}
.auth-input {
  width: 100%;
  padding: 11px 14px;
  /* iOS 입력 필드: 배경 채움, 테두리 없음 */
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  font-size: var(--fs-body2);
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text-1);
  transition: border-color 0.15s, background 0.15s;
}
/* Apple focus ring: 오렌지 glow */
.auth-input:focus {
  outline: none;
  border-color: rgba(255,140,66,0.6);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255,140,66,0.12);
}

.auth-error {
  font-size: var(--fs-caption1);
  color: var(--restaurant);
  min-height: 16px;
  margin-bottom: 4px;
}
.auth-success {
  font-size: var(--fs-label2);
  color: var(--park);
  font-weight: 600;
  margin-bottom: 8px;
}
.auth-success.hidden { display: none; }

.auth-submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  /* Apple CTA 버튼: 더 둥근 모서리 */
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body2);
  font-weight: 600;
  font-family: inherit;
  transition: opacity 0.15s;
  margin-top: 4px;
  letter-spacing: -0.1px;
}
.auth-submit-btn:hover { opacity: 0.86; }
/* Apple 보조 버튼: 회색 배경, 테두리 없음 */
.auth-btn-secondary {
  background: var(--surface-3);
  color: var(--text-1);
  border: none;
}
.auth-btn-secondary:hover { background: rgba(0,0,0,0.08); }

/* ── 내 계정 ─── */
.account-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--separator);
}
.account-user-id { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-headline2); line-height: var(--lh-headline2); color: var(--text-1); }
.account-role-badge {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: var(--fs-caption2);
  font-weight: 700;
}

.account-section { margin-bottom: 16px; }
.account-section-label {
  font-size: var(--fs-caption1);
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 8px;
}
.account-section.hidden { display: none; }

.account-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.auth-logout-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-2);
  font-family: inherit;
}
.auth-logout-btn:hover { background: var(--surface-2); }
.auth-delete-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--restaurant);
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--restaurant);
  font-family: inherit;
}
.auth-delete-btn:hover { background: rgba(255,59,48,0.06); }

/* ── 관리자 패널 ─── */
.admin-panel.hidden { display: none; }

/* 가족을 찾아요 탭 */
#tab-adopt { overflow-y: auto; overflow-x: hidden; }
.adopt-tab-section { padding: 0; }
.adopt-tab-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}

/* ── 공유 배너 ──────────────────────────────────────────────────── */
.adopt-share-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.adopt-share-dog {
  display: block; /* 이미지 노출 보장 */
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
.adopt-share-text {
  font-size: 15px;     /* 15px 폰트 */
  font-weight: 600;    /* semibold */
  color: var(--text-1);
  line-height: 1.65;
  word-break: keep-all;
  margin: 0;
}
@media (max-width: 520px) {
  .adopt-share-banner { padding: 16px 16px; gap: 14px; }
  .adopt-share-dog { width: 56px; height: 56px; }
  .adopt-share-text { font-size: 13px; } /* 모바일은 조금 작게 */
  .adopt-share-br { display: none; }
}
.adoption-section--full {
  max-width: 100%;
  background: none;
  padding: 0;
  box-shadow: none;
}

/* ── 입양 로딩 ────────────────────────────────────────────────── */
.adoption-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 14px;
}
.adoption-loading-dog {
  width: 72px;
  animation: dog-run 0.55s steps(1) infinite;
}
@keyframes dog-run {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}
.adoption-loading-text {
  font-size: var(--fs-label2);
  color: var(--text-3);
}

/* ── 카르마 카드 ────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   입양 카드 — Apple 카드 디자인 전면 재설계
   세로 포토 카드 + 오버레이 뱃지 + 스프링 hover
═══════════════════════════════════════════════════════════════ */

/* ── 카드 베이스 ─────────────────────────────────────────────── */
.karma-card {
  background: var(--surface);
  border-radius: var(--radius-xl);    /* 22px — Apple 카드 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 0.5px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* 스프링 bounce 인터랙션 */
  transition: transform 0.30s cubic-bezier(0.34, 1.36, 0.64, 1),
              box-shadow 0.30s ease;
  will-change: transform;
}

.karma-card:hover {
  transform: translateY(-10px);  /* Apple 카드 float */
  box-shadow: 0 20px 48px rgba(0,0,0,0.14), 0 6px 16px rgba(0,0,0,0.06);
}

.karma-card:active {
  transform: translateY(-4px) scale(0.99);
  transition-duration: 0.12s;
}

/* ── 사진 영역 — 세로 4:5 비율 ──────────────────────────────── */
.karma-photo-wrap {
  width: 100%;
  aspect-ratio: 4/5;   /* 세로형: 강아지 포즈가 잘 나옴 */
  overflow: hidden;
  background: linear-gradient(160deg, #E8E8ED 0%, #D1D1D8 100%);
  flex-shrink: 0;
  position: relative;
}

.karma-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* 사진 zoom: 더 여유롭고 부드럽게 */
  transition: transform 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.karma-card:hover .karma-photo {
  transform: scale(1.08);  /* Apple 앱스토어 카드 zoom 수준 */
}

/* ── 상태 뱃지 — 사진 위 오버레이 (좌상단) ─────────────────── */
.karma-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  /* Apple Dynamic Island 뱃지 스타일 */
  background: rgba(52, 199, 89, 0.88);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  color: #fff;
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: 0.1px;
  padding: 4px 10px;
  border-radius: 20px;
  /* 뱃지 fade-in */
  animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── 사진 플레이스홀더 ───────────────────────────────────────── */
.karma-photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #E8E8ED 0%, #D1D1D8 100%);
}
.karma-photo-placeholder img {
  width: 44px; height: 44px;
  opacity: 0.20;
  filter: invert(0);
}

/* ── 카드 바디 ───────────────────────────────────────────────── */
.karma-body {
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

/* 견종 — 메인 타이틀 */
.karma-breed {
  font-size: var(--fs-body1);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: var(--ls-heading2);
  line-height: var(--lh-title3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 구조 장소 — 서브타이틀 */
.karma-location {
  font-size: var(--fs-caption2);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -3px;  /* breed와 간격 압축 */
}

/* ── 핵심 정보 칩 (성별·나이·체중) ─────────────────────────── */
.karma-chips-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.karma-chip {
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-3);   /* iOS secondarySystemFill */
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── 상태 뱃지 행 (중성화·건강) ─────────────────────────────── */
.karma-badges-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.karma-badge {
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.karma-badge-green {
  background: rgba(52, 199, 89, 0.12);
  color: #1a7f37;
}

.karma-badge-blue {
  background: rgba(0, 122, 255, 0.10);
  color: #0055cc;
}

.karma-badge-gray {
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 600;
}

/* ── CCTV 모달 (국토부 ITS) ────────────────────────────── */
.cctv-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cctv-modal.hidden { display: none; }
.cctv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.cctv-modal-card {
  position: relative;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.cctv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cctv-modal-title {
  font-size: var(--fs-headline2);
  font-weight: 700;
  margin: 0;
}
.cctv-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cctv-modal-close img { width: 14px; height: 14px; }
.cctv-modal-sub {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  margin: 4px 0 16px;
}
.cctv-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cctv-item {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px;
}
.cctv-item-title {
  font-size: var(--fs-label1);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.cctv-item-dist {
  font-size: var(--fs-caption2);
  color: var(--text-3);
  font-weight: 400;
}
.cctv-item-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.cctv-loading,
.cctv-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: var(--fs-label1);
}

/* ── 데이터 출처 표시 (각 탭 하단 작은 글씨) ───────────────── */
.data-source-note {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
  padding: 12px 16px;
  margin-top: 24px;
  border-top: 1px solid var(--separator);
  word-break: keep-all;
}
.data-source-note strong {
  color: var(--text-3);
  font-weight: 600;
}
.data-source-note a {
  color: var(--text-3);
  text-decoration: underline;
}

/* ── 입양 신청 가능일 ────────────────────────────────────────── */
.karma-adopt-date {
  font-size: var(--fs-caption2);
  color: var(--brand-dark);
  font-weight: 600;
  background: var(--brand-light);
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  align-self: flex-start;
}

/* ── 카드 푸터 — "자세히 보기 →" ───────────────────────────── */
.karma-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 14px;
  margin-top: 8px;
}

.karma-view-hint {
  font-size: var(--fs-caption1);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.1px;
}

/* 화살표: hover 시 오른쪽으로 이동 */
.karma-arrow {
  color: var(--brand);
  opacity: 0.65;
  flex-shrink: 0;
  transition: transform 0.22s ease, opacity 0.22s;
}

.karma-card:hover .karma-arrow {
  transform: translateX(5px);
  opacity: 1;
}

/* ── 페이지네이션 ─────────────────────────────────────────────── */
.adopt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  margin-bottom: 8px;
}
.adopt-page-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--separator);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-label2);
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.adopt-page-btn:hover { border-color: var(--brand); color: var(--brand); }
.adopt-page-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.adopt-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* 추천장소 클릭 힌트 */
.recommend-place-item--clickable { cursor: pointer; }
.place-item-map-hint {
  font-size: var(--fs-caption2);
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
}

/* AI 추천 결과 — 인라인 장소 지도 버튼 */
.aiw-place-name { font-weight: 600; color: var(--text-1); }
.aiw-place-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--brand);
  background: rgba(255,140,66,0.10);
  border: 1px solid rgba(255,140,66,0.30);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  vertical-align: middle;
}
.aiw-place-btn:hover { background: rgba(255,140,66,0.22); }

/* AI 코스 본문 안의 인라인 장소 이름 버튼 ([MAP:장소명]) */
.aiw-place-name-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin: 1px 2px;
  font-size: var(--fs-label2);
  font-weight: 700;
  font-family: inherit;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid rgba(255,140,66,0.30);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  vertical-align: baseline;
  line-height: 1.4;
}
.aiw-place-name-btn:hover { background: rgba(255,140,66,0.22); }
.aiw-place-name-btn:active { transform: scale(0.97); }

/* 관리자 탭 섹션 */
.admin-tab-section { padding: 32px 24px; }
.admin-tab-inner {
  max-width: 720px;
  margin: 0 auto;
}
.admin-tab-title {
  font-size: var(--fs-heading1);
  font-weight: 700
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 24px;
}
.admin-panel-divider {
  height: 1px;
  background: var(--separator);
  margin: 20px 0 16px;
}
.admin-panel-title {
  font-size: var(--fs-label1);
  font-weight: 700
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}
.admin-section-label {
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 8px;
}
.admin-user-list { margin-bottom: 10px; }
.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--separator-2);
  font-size: var(--fs-label2);
}
.admin-user-id { font-weight: 600; color: var(--text-1); }
.admin-del-btn {
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--restaurant);
  background: none;
  color: var(--restaurant);
  font-size: var(--fs-caption1);
  font-weight: 700;
  font-family: inherit;
}
.admin-del-btn:hover { background: rgba(255,59,48,0.07); }
.admin-empty { font-size: var(--fs-label2); color: var(--text-3); padding: 8px 0; }
.admin-reset-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.admin-reset-row .auth-input { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════
   로그인 필요 모달
═══════════════════════════════════════════════════════════════ */
.login-required-box { text-align: center; padding: 36px 24px 28px; }
.lrm-icon  { display: flex; justify-content: center; margin-bottom: 10px; }
.lrm-title { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-headline2); line-height: var(--lh-headline2); color: var(--text-1); margin-bottom: 6px; }
.lrm-desc  { font-size: var(--fs-label2); color: var(--text-3); margin-bottom: 20px; }
.lrm-buttons { display: flex; flex-direction: column; gap: 8px; }
.lrm-cancel {
  padding: 10px;
  border: none;
  background: none;
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-3);
  font-family: inherit;
}
.lrm-cancel:hover { color: var(--text-1); }


/* ═══════════════════════════════════════════════════════════════
   모바일 하단 GNB
═══════════════════════════════════════════════════════════════ */
/* ─── 공통 아이콘 유틸 ──────────────────────────────────────── */
/* SVG 아이콘: 기본 black → CSS filter로 색상 변환 */
.btn-icon {
  width: 14px; height: 14px;
  vertical-align: middle;
  filter: invert(45%); /* 중간 회색 */
}
.btn-icon-white {
  width: 14px; height: 14px;
  vertical-align: middle;
  filter: invert(1); /* 흰색 (버튼 위) */
}
.icon-sm {
  width: 15px; height: 15px;
  vertical-align: middle;
  filter: invert(45%);
}
.stat-icon-img {
  width: 28px; height: 28px;
  filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%); /* brand orange */
}
.gnb-icon-img {
  width: 22px; height: 22px;
  display: block;
  filter: invert(45%); /* inactive 회색 */
}
.aiw-avatar-img {
  width: 32px; height: 32px;
  filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%);
}
.aiw-paw-img {
  width: 26px; height: 26px;
  filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%);
}
.aiw-result-icon-img {
  width: 20px; height: 20px;
  filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%);
}
.modal-close-img {
  width: 16px; height: 16px;
  filter: invert(45%);
}
.lrm-icon-img {
  width: 40px; height: 40px;
  filter: invert(45%);
}

/* GNB 활성 아이콘 orange 처리 */
.mobile-gnb .tab-btn.active .gnb-icon-img {
  filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%);
}

/* 모바일 GNB: 햄버거 사이드바로 대체되어 항상 숨김 */
.mobile-gnb { display: none !important; }

/* ─────────────────────────────────────────
   햄버거 버튼
───────────────────────────────────────── */
.hamburger-btn {
  display: none; /* 데스크탑 숨김 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-1);
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
}

/* ─────────────────────────────────────────
   내비게이션 드로어 (모바일 사이드바 메뉴)
───────────────────────────────────────── */
.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1100;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer-overlay.open { display: block; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* Apple 드로어: 좌측에 살짝 라운드 */
  width: 240px;
  height: 100dvh;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  /* Apple 드로어 그림자 */
  box-shadow: -1px 0 0 rgba(0,0,0,0.08), -4px 0 20px rgba(0,0,0,0.08);
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
}

.nav-drawer-item {
  display: block;
  width: 100%;
  padding: 14px 24px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--separator);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--fs-body2);
  font-weight: 500;        /* Apple은 500 weight 선호 */
  color: var(--text-1);    /* Apple primary text */
  cursor: pointer;
  letter-spacing: var(--ls-headline1);
  transition: background 0.12s, color 0.12s;
}
.nav-drawer-item:last-child { border-bottom: none; }
/* iOS 터치 피드백 */
.nav-drawer-item:active { background: rgba(0,0,0,0.05); }
.nav-drawer-item.active { color: var(--brand); font-weight: 600; }

/* 데스크탑에서 드로어 요소 숨김 */
@media (min-width: 769px) {
  .nav-drawer-overlay,
  .nav-drawer { display: none !important; }
}

@media (max-width: 768px) {
  /* 지도 워터마크 모바일 숨김 */
  .map-watermark { display: none; }

  /* 산책 가능도 카드 - 세로 정렬 */
  .walk-index-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* 대시보드 전체 가로 삐침 방지 */
  .dashboard-wrap {
    overflow-x: hidden;
    padding: 14px 12px 32px;
  }

  /* 스탯 카드 2열 */
  .stat-cards { grid-template-columns: 1fr 1fr; }

  /* 코로플레스 지도: 가로 스크롤 컨테이너 */
  .choropleth-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .district-map-box {
    min-width: 340px;
    width: 100%;
    height: 360px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   펫 상권 분석 탭 (개편)
═══════════════════════════════════════════════════════════════ */
#tab-commercial { overflow-y: auto; background: var(--bg); }

.comm2-page-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.comm2-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 0;
}

.comm2-data-source {
  flex-shrink: 0;
  margin: 0;
  padding: 16px 20px;
  border-top: 0.5px solid var(--separator);
  background: var(--surface);
}

/* 왼쪽 지도 컬럼 */
.comm2-map-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 20px 20px 20px;
  gap: 14px;
}

.comm2-map-header { flex-shrink: 0; }
.comm2-title { font-size: var(--fs-heading2); font-weight: 700; letter-spacing: var(--ls-heading2); line-height: var(--lh-heading2); color: var(--text-1); margin-bottom: 4px; }
.comm2-desc  { font-size: var(--fs-label2); color: var(--text-3); }

/* 필터 버튼 */
.comm2-filters {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.comm2-filter {
  padding: 6px 14px;
  border: 1.5px solid var(--separator);
  border-radius: 20px;
  background: var(--surface);
  font-size: var(--fs-caption1);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.comm2-filter:hover  { border-color: var(--brand); color: var(--brand); }
.comm2-filter:hover .btn-icon { filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%); }
.comm2-filter.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.comm2-filter.active .btn-icon { filter: invert(1); }

/* 히트맵 지도 */
.comm2-map-box {
  flex-shrink: 0;
  height: 540px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}

/* 카카오맵 라벨 오버레이 */
.comm2-map-label {
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--brand);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* 인사이트 카드 */
.comm2-insights { flex-shrink: 0; }
.comm2-insights-title {
  font-size: var(--fs-body2);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 10px;
}
.comm2-insights-list { display: flex; flex-direction: column; gap: 8px; }
.comm2-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--fs-label2);
  color: var(--text-2);
  line-height: 1.5;
  box-shadow: var(--shadow-xs);
}
.comm2-insight-icon { font-size: var(--fs-headline2); flex-shrink: 0; margin-top: 1px; }
.comm2-data-note {
  font-size: var(--fs-caption2);
  color: var(--text-4);
  margin-top: 8px;
}

/* 오른쪽 랭킹 컬럼 */
.comm2-rank-col {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 0.5px solid var(--separator);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 0;
  overflow-y: auto;
}

.comm2-rank-title { font-size: var(--fs-body1); font-weight: 700; letter-spacing: var(--ls-headline2); line-height: var(--lh-headline2); color: var(--text-1); margin-bottom: 4px; }
.comm2-rank-desc  { font-size: var(--fs-caption1); color: var(--text-3); margin-bottom: 14px; }

.comm2-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 4px;
}
.comm2-rank-item:hover { background: var(--surface-2); }

.comm2-rank-medal { font-size: var(--fs-heading1); flex-shrink: 0; }
.comm2-rank-info  { flex: 1; min-width: 0; }
.comm2-rank-name  { font-size: var(--fs-label2); font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm2-rank-sub   { font-size: var(--fs-caption2); color: var(--text-3); margin-top: 1px; }
.comm2-rank-score { font-size: var(--fs-caption1); font-weight: 700
  font-weight: 700; color: var(--brand); white-space: nowrap; flex-shrink: 0; }

/* 업종별 파이 */
.comm2-pie-section { margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--separator); }
.comm2-pie-title   { font-size: var(--fs-label2); font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
.comm2-pie-box     { height: 360px; } /* 기존 180px → 200% */

/* 인사이트 카드: 아이콘 제거 후 패딩 조정 */
.comm2-insight-card { padding: 11px 14px; }

@media (max-width: 768px) {
  .comm2-layout { flex-direction: column; }
  .comm2-rank-col { width: 100%; border-left: none; border-top: 0.5px solid var(--separator); }
  .comm2-map-box { height: 360px; }
  /* 모바일: 파이 차트를 가로 전체 활용하도록 높이 확보 */
  .comm2-pie-box { height: 300px; }
  /* 모바일: 파이 차트 범례 가로 배치로 공간 절약 — Chart.js legend position은 JS에서 조정 */
  .comm2-rank-col { padding-bottom: 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   AI 산책 추천 탭 (개편)
═══════════════════════════════════════════════════════════════ */
#tab-aichat { overflow-y: auto; background: var(--bg); }
#tab-aichat.active { display: flex; flex-direction: column; }

.aiw-wrap {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 헤더 */
.aiw-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aiw-title { font-size: var(--fs-heading2); font-weight: 700; color: var(--text-1); letter-spacing: var(--ls-heading2); }
.aiw-desc  { font-size: var(--fs-body2); color: var(--text-3); }

/* 입력 폼 */
.aiw-form {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  border: 0.5px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aiw-form.hidden { display: none; }

.aiw-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.aiw-field-label {
  font-size: var(--fs-label2);
  font-weight: 700;
  color: var(--text-2);
  min-width: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.aiw-field-label .icon-sm { flex-shrink: 0; }

.aiw-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.aiw-opt-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--separator);
  border-radius: 22px;
  background: var(--surface-2);
  font-size: var(--fs-label2);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.aiw-opt-btn:hover   { border-color: var(--brand); color: var(--brand); }
.aiw-opt-btn.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.aiw-select {
  width: 100%;
  padding: 10px 32px 10px 14px;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-family: inherit;
  font-size: var(--fs-label1);
  color: var(--text-1);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%238E8E93' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.aiw-select:focus { outline: none; border-color: var(--brand); background-color: var(--surface); }

.aiw-submit-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body1);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.aiw-submit-btn:hover    { background: var(--brand-dark); }
.aiw-submit-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* 로딩 */
.aiw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  text-align: center;
}
.aiw-loading.hidden { display: none; }
.aiw-loading .loading-dog { width: 80px; height: 80px; object-fit: contain; }
.aiw-loading-text { font-size: var(--fs-label1); color: var(--text-3); font-weight: 600; }

/* 결과 카드 */
.aiw-result {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 0.5px solid rgba(0,0,0,0.06);
  overflow: hidden;
  animation: slide-in 0.35s ease;
}
.aiw-result.hidden { display: none; }

.aiw-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--brand-light), transparent);
  border-bottom: 0.5px solid var(--separator);
}
.aiw-result-icon  { display: inline-flex; align-items: center; }
.aiw-result-label { font-size: var(--fs-label1); font-weight: 700; color: var(--brand-dark); }

.aiw-result-content { padding: 16px 20px; }

.aiw-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.aiw-tag {
  padding: 4px 10px;
  background: var(--brand-light);
  color: var(--brand-dark);
  border-radius: 12px;
  font-size: var(--fs-caption1);
  font-weight: 700;
}

.aiw-result-text {
  font-size: var(--fs-label1);
  line-height: 1.8;
  color: var(--text-1);
  word-break: keep-all;
}

.aiw-result-actions {
  display: flex;
  padding: 14px 20px;
  border-top: 0.5px solid var(--separator);
}
.aiw-retry-btn {
  width: 100%;
  padding: 13px;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-label1);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.aiw-retry-btn:hover { background: var(--surface-3); }

/* 지도 버튼: 인라인 대신 하단 버튼 목록 */
.aiw-place-list {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aiw-place-list-label {
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.aiw-map-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1.5px solid rgba(255,140,66,0.20);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label1);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.aiw-map-btn:hover { background: rgba(255,140,66,0.18); }
.aiw-map-btn:active { transform: scale(0.98); }

.aiw-notice {
  text-align: center;
  font-size: var(--fs-caption2);
  color: var(--text-4);
}


/* ═══════════════════════════════════════════════════════════════
   펫 상권 분석 탭
═══════════════════════════════════════════════════════════════ */
#tab-commercial { overflow-y: auto; background: var(--bg); }

.commercial-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.commercial-header {
  margin-bottom: 24px;
}
.commercial-title {
  font-size: var(--fs-title3);
  font-weight: 700
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: var(--ls-heading1);
  margin-bottom: 4px;
}
.commercial-desc {
  font-size: var(--fs-label2);
  color: var(--text-3);
}

.section-sub-title {
  font-size: var(--fs-body1);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
  letter-spacing: var(--ls-heading2);
}
.section-sub-desc {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  margin-bottom: 14px;
}

/* 순위 리스트 */
.commercial-top-section { margin-bottom: 28px; }

.commercial-ranking {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.commercial-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-label1);
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);
}

.rank-num {
  font-size: var(--fs-body1);
  font-weight: 700;
  color: var(--text-4);
  min-width: 24px;
  text-align: center;
}
.rank-item:nth-child(1) .rank-num { color: #FFB800; font-size: var(--fs-headline1); }
.rank-item:nth-child(2) .rank-num { color: #A0A0A0; }
.rank-item:nth-child(3) .rank-num { color: #C87941; }

.rank-gu {
  font-size: var(--fs-body2);
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
}

.rank-bar-wrap {
  flex: 2;
  background: var(--surface-2);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.rank-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #FFD700);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.rank-count {
  font-size: var(--fs-label2);
  font-weight: 700;
  color: var(--brand);
  min-width: 48px;
  text-align: right;
  white-space: nowrap;
}

/* 카테고리 차트 */
.commercial-chart-section { margin-bottom: 28px; }
.commercial-chart-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 구 상세 */
.commercial-detail-section { margin-bottom: 20px; }

.commercial-gu-select-wrap { margin-bottom: 14px; }
.commercial-gu-select {
  width: 100%;
  padding: 10px 32px 10px 14px;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-body2);
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%238E8E93' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.commercial-gu-select:focus { outline: none; border-color: var(--brand); }

.commercial-gu-detail {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.commercial-gu-detail.hidden { display: none; }

.gu-detail-name {
  font-size: var(--fs-headline2);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 14px;
}

.gu-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gu-category-item {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.gu-category-emoji { font-size: var(--fs-heading1); margin-bottom: 4px; }
.gu-category-label { font-size: var(--fs-caption2); color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
.gu-category-count { font-size: var(--fs-headline2); font-weight: 800; color: var(--brand); }


/* ═══════════════════════════════════════════════════════════════
   AI 산책 추천 탭
═══════════════════════════════════════════════════════════════ */
#tab-aichat {
  overflow: hidden;
  background: var(--bg);
  display: none; /* tab-content 기본 스타일로 display 제어 */
}
#tab-aichat.active {
  display: flex;
  flex-direction: column;
}

.aichat-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

.aichat-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
  background: var(--surface);
}
.aichat-avatar {
  font-size: var(--fs-display3);
  width: 52px;
  height: 52px;
  background: var(--brand-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aichat-title {
  font-size: calc(var(--fs-body1) + 1px);
  font-weight: 700
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 2px;
}
.aichat-desc {
  font-size: var(--fs-caption1);
  color: var(--text-3);
}

/* 메시지 영역 */
.aichat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.aichat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.aichat-msg-bot { flex-direction: row; }
.aichat-msg-user { flex-direction: row-reverse; }

.aichat-msg-avatar {
  font-size: var(--fs-heading1);
  width: 32px;
  height: 32px;
  background: var(--brand-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aichat-msg-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--fs-label1);
  line-height: var(--lh-body1);
  word-break: keep-all;
}

.aichat-msg-bot .aichat-msg-bubble {
  background: var(--surface);
  border-bottom-left-radius: 4px;
  color: var(--text-1);
  box-shadow: var(--shadow-xs);
}
.aichat-msg-user .aichat-msg-bubble {
  background: var(--brand);
  border-bottom-right-radius: 4px;
  color: #fff;
}

/* 로딩 점 애니메이션 */
.aichat-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  align-items: center;
}
.aichat-typing span {
  width: 7px;
  height: 7px;
  background: var(--text-4);
  border-radius: 50%;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.aichat-typing span:nth-child(2) { animation-delay: 0.2s; }
.aichat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* 빠른 버튼 */
.aichat-quick-btns {
  display: flex;
  gap: 6px;
  padding: 8px 20px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  background: var(--bg);
}
.aichat-quick-btns::-webkit-scrollbar { display: none; }
.aichat-quick-btn {
  white-space: nowrap;
  padding: 6px 12px;
  border: 1.5px solid var(--separator);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-caption1);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.aichat-quick-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 입력창 */
.aichat-input-area {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  background: var(--surface);
  border-top: 0.5px solid var(--separator);
  flex-shrink: 0;
  align-items: flex-end;
}
.aichat-input {
  flex: 1;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--fs-label1);
  color: var(--text-1);
  background: var(--surface-2);
  resize: none;
  line-height: 1.5;
  max-height: 100px;
  transition: border-color 0.15s;
}
.aichat-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.aichat-input::placeholder { color: var(--text-4); }

.aichat-send-btn {
  padding: 10px 18px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-label1);
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.aichat-send-btn:hover { background: var(--brand-dark); }
.aichat-send-btn:disabled { background: var(--text-4); cursor: not-allowed; }

.aichat-notice {
  text-align: center;
  font-size: var(--fs-caption2);
  color: var(--text-4);
  padding: 4px 20px 8px;
  background: var(--surface);
  flex-shrink: 0;
}


/* ================================================================
   정정 요청 모달
================================================================ */
.correction-modal-box { max-width: 400px; }
.corr-modal-desc { font-size: var(--fs-caption1); color: var(--text-3); margin: 6px 0 14px; line-height: 1.5; }
.corr-place-box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 4px;
}
.corr-place-name { font-size: var(--fs-label1); font-weight: 700; color: var(--text-1); }
.corr-place-addr { font-size: var(--fs-caption2); color: var(--text-3); margin-top: 2px; }
.corr-textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1.5px solid var(--separator);
  border-radius: var(--radius-sm);
  font-size: var(--fs-label2);
  font-family: 'Pretendard', sans-serif;
  color: var(--text-1);
  background: var(--surface);
  resize: vertical;
  box-sizing: border-box;
}
.corr-textarea:focus { outline: none; border-color: var(--brand); }

/* ================================================================
   관리자 패널 — 정정 요청 목록
================================================================ */
.admin-correction-list { max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.admin-correction-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.corr-name  { font-size: var(--fs-label2); font-weight: 700; color: var(--text-1); }
.corr-addr  { font-size: var(--fs-caption2); color: var(--text-3); margin-top: 2px; }
.corr-reason{ font-size: var(--fs-caption1); color: var(--text-2); margin: 6px 0 4px; background: var(--surface); padding: 6px 8px; border-radius: 6px; }
.corr-time  { font-size: var(--fs-caption2); color: var(--text-4); margin-bottom: 8px; }
.corr-actions { display: flex; gap: 6px; }
.corr-exclude-btn {
  flex: 1; padding: 6px; border: none; border-radius: 6px;
  background: rgba(255,59,48,0.10); color: var(--restaurant);
  font-size: var(--fs-caption1); font-weight: 700; cursor: pointer;
}
.corr-exclude-btn:hover { background: rgba(255,59,48,0.20); }
.corr-ignore-btn {
  flex: 1; padding: 6px; border: 1px solid var(--separator); border-radius: 6px;
  background: none; color: var(--text-3);
  font-size: var(--fs-caption1); font-weight: 600; cursor: pointer;
}
.corr-ignore-btn:hover { background: var(--surface-2); }
.corr-count-badge {
  display: inline-block; background: var(--restaurant); color: #fff;
  border-radius: 10px; font-size: var(--fs-caption2); font-weight: 700;
  padding: 1px 7px; margin-left: 4px; vertical-align: middle;
}

/* ================================================================
   입양 섹션 — 수평 리스트
================================================================ */
.adoption-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px; /* FAB 공간 확보 */
}

/* 수평 리스트 아이템 */
.adopt-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.adopt-list-item:first-child { border-top: 1px solid var(--separator); }
.adopt-list-item:active { background: var(--surface-2); }

/* 좌측 사진 */
.adopt-item-photo-wrap {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
  border-radius: 6px;
}
.adopt-item-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.adopt-item-photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
}
.adopt-item-photo-placeholder img { width: 28px; height: 28px; opacity: 0.30; }
.adopt-item-status {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(52,199,89,0.88);
  color: #fff;
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

/* 우측 정보 */
.adopt-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adopt-item-breed {
  font-size: var(--fs-body2);
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adopt-item-org {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adopt-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.adopt-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.adopt-item-date {
  font-size: var(--fs-caption2);
  color: var(--text-4);
}
.adopt-item-arrow {
  color: var(--text-4);
  flex-shrink: 0;
}

/* 스켈레톤 */
.adopt-skeleton-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
}
.adopt-skeleton-photo {
  width: 88px; height: 88px;
  flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}
.adopt-skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.adopt-skeleton-line {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}
.adopt-skeleton-title { height: 16px; width: 60%; }
.adopt-skeleton-sub   { height: 12px; width: 45%; }
.adopt-skeleton-chips { display: flex; gap: 6px; }
.adopt-skeleton-chip  {
  height: 20px; width: 44px; border-radius: 10px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}

/* 플로팅 더보기 버튼 */
.adopt-more-fab {
  position: sticky;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 48px auto 0;
  padding: 14px 28px;
  background: #1D1D1F;
  color: #fff;
  font-size: var(--fs-label1);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.12s;
  z-index: 20;
}
.adopt-more-fab:hover  { background: #424245; }
.adopt-more-fab:active { transform: scale(0.97); }

/* ================================================================
   반려견 행사·축제·교육 섹션
================================================================ */
.pet-events-section { margin-top: 32px; }
.pet-events-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.event-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.event-card:hover { box-shadow: var(--shadow-sm); }
.event-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.event-card-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--brand-light), rgba(52,199,89,0.10));
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-card-img-placeholder img { width: 28px; height: 28px; filter: invert(62%) sepia(79%) saturate(546%) hue-rotate(342deg) brightness(106%); }
.event-card-info { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.event-card-header { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.event-gu-badge {
  font-size: var(--fs-caption2); font-weight: 700;
  background: var(--brand-light); color: var(--brand-dark);
  padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.event-card-title { font-size: var(--fs-label2); font-weight: 700; color: var(--text-1); line-height: var(--lh-headline2); }
.event-card-date  { font-size: var(--fs-caption2); color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.event-card-place { font-size: var(--fs-caption2); color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.event-card-org   { font-size: var(--fs-caption2); color: var(--text-4); }
.event-card-link  {
  display: inline-block; margin-top: auto; padding-top: 8px;
  font-size: var(--fs-caption2); font-weight: 700; color: var(--brand); text-decoration: none;
}
.event-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .pet-events-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pet-events-list { grid-template-columns: 1fr; }
}

/* ── 장소 등록 제안 FAB ──────────────────────────────────────── */
/* PC: 우측 하단 워터마크(bottom:24 + height:100 + gap:16 = 140) 바로 위 */
/* FAB 그룹 (장소 등록 제안 + 내 위치) */
.map-fab-group {
  position: absolute;
  bottom: 148px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.map-location-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-label2);
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.map-location-btn:hover { background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.map-location-btn:active { transform: translateY(0); }
.map-location-btn.locating { color: var(--brand); border-color: var(--brand); }

.map-suggest-fab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--brand);
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(255,140,66,0.50), 0 2px 6px rgba(0,0,0,0.18);
  font-size: var(--fs-label2);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.map-suggest-fab img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.map-suggest-fab:hover { background: var(--brand-dark); transform: translateY(-2px); }
.map-suggest-fab:active { transform: translateY(0); opacity: 0.88; }

/* Mobile */
@media (max-width: 768px) {
  .map-fab-group {
    /* 바텀시트 Y축에 동기화 — JS가 --sidebar-h 변수 갱신 */
    bottom: calc(var(--sidebar-h, 42dvh) + 8px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* 시트(z:30) 위에 떠있도록 */
    z-index: 40;
    transition: bottom 0.32s cubic-bezier(0.34, 1.26, 0.64, 1);
  }
  /* 시트 펼침 상태: FAB도 같이 위로 */
  .sidebar.sheet-expanded ~ .map-fab-group,
  .main-content:has(.sidebar.sheet-expanded) ~ .map-fab-group,
  body:has(.sidebar.sheet-expanded) .map-fab-group {
    bottom: calc(82dvh + 8px);
  }
  .map-location-btn {
    font-size: var(--fs-caption1);
    padding: 9px 12px;
  }
  .map-suggest-fab {
    font-size: var(--fs-caption1);
    padding: 9px 18px;
  }
  .map-suggest-fab:hover { background: var(--brand-dark); transform: none; }
  .map-suggest-fab:active { opacity: 0.88; }
  .map-location-btn:hover { transform: none; }
}

/* ── 장소 등록 제안 모달 ────────────────────────────────────── */
.suggest-modal-box { max-width: 420px; width: 92%; }
.suggest-modal-box .auth-field { margin-bottom: 12px; }
.suggest-modal-box select.auth-input { cursor: pointer; }

/* ── 제안 카테고리 뱃지 ─────────────────────────────────────── */
.sugg-cat-badge {
  display: inline-block;
  font-size: var(--fs-caption2); font-weight: 700;
  background: var(--brand-light); color: var(--brand-dark);
  padding: 2px 7px; border-radius: 20px;
  margin-left: 6px; vertical-align: middle;
}
.sugg-kakao-link {
  display: inline-block; margin: 4px 0;
  font-size: var(--fs-caption1); font-weight: 700;
  color: var(--brand); text-decoration: none;
}
.sugg-kakao-link:hover { text-decoration: underline; }

/* ── 입양 카드 클릭 가능 스타일 ─────────────────────────────── */
a.adoption-thumb-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.adoption-thumb-card--link:hover .adoption-thumb-photo-wrap {
  opacity: 0.88;
}
a.adoption-thumb-card--link:hover {
  box-shadow: 0 4px 20px rgba(255,140,66,0.22);
  transform: translateY(-2px);
}
a.adoption-thumb-card--link { transition: transform 0.15s, box-shadow 0.15s; }
.adoption-detail-arrow {
  margin-left: 6px;
  font-size: var(--fs-caption1);
  color: var(--brand);
  font-weight: 700;
}

/* ── 주차 정보 뱃지 ─────────────────────────────────────────── */
.parking-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-caption2);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  margin: 4px 0 2px;
  letter-spacing: var(--ls-headline1);
}
.parking-free    { background: rgba(52,199,89,0.14);  color: #1A8A36; }
.parking-paid    { background: rgba(0,122,255,0.10);  color: #0055CC; }
.parking-none    { background: rgba(142,142,147,0.14); color: #636366; }
.parking-loading { background: var(--surface-2); color: var(--text-4); font-weight: 400; }

/* 팝업 내 주차 뱃지 */
.info-popup .parking-badge { margin: 2px 0 6px; }

/* 사이드바 아이템 내 주차 뱃지 */
.place-item-info .parking-badge { margin: 2px 0 0; font-size: var(--fs-caption2); }

/* ── 인근 공영주차장 섹션 ────────────────────────────────────── */
.nearby-parking-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.nearby-parking-title {
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nearby-parking-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 8px;
  margin-bottom: 5px;
}
.nearby-parking-item:last-child { margin-bottom: 0; }
.npk-name {
  font-size: var(--fs-caption1);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npk-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.npk-tag {
  font-size: var(--fs-caption2);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  width: fit-content;
}
.npk-free { background: #e8f5e9; color: #2e7d32; }
.npk-paid { background: #fff3e0; color: #e65100; }
.npk-cap  { font-size: var(--fs-caption2); color: var(--text-3); }
.npk-dist { font-size: var(--fs-caption2); color: var(--text-4); margin-left: auto; }
.npk-tel  { font-size: var(--fs-caption2); color: var(--text-4); }

/* 공영주차장 팝업 상세 정보 */
.parking-lot-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: var(--fs-caption1);
  color: var(--text-2);
}
.parking-lot-info .pli-row {
  display: flex;
  gap: 6px;
}
.parking-lot-info .pli-label {
  color: var(--text-4);
  min-width: 44px;
}

/* ══════════════════════════════════════════════════════════
   멍템추천 탭
══════════════════════════════════════════════════════════ */
.merch-tab-section { padding: 28px 20px 48px; }
.merch-tab-inner { max-width: 1100px; margin: 0 auto; }

.merch-header {
  margin-bottom: 24px;
}
.merch-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.merch-title-emoji { display: none; }
.merch-title {
  font-size: var(--fs-heading1);
  font-weight: 700
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: var(--ls-heading1);
  line-height: 1.2;
}
.merch-title-sub {
  font-size: var(--fs-label1);
  font-weight: 700;
  color: var(--text-2);
  line-height: var(--lh-headline2);
}
.merch-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  margin-top: 2px;
}

/* 카테고리 필터 아코디언 래퍼 */
.merch-filter-wrap {
  overflow: hidden;
}

/* 카테고리 필터 */
.merch-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  /* 접힌 상태: 버튼 1개 높이 ~34px + gap ~8px = 약 2줄 = ~76px */
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.merch-filter-row.expanded {
  max-height: 400px;
}

/* 더 보기 / 접기 토글 버튼 */
.merch-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  background: none;
  border: none;
  padding: 6px 0;
  margin-bottom: 12px;
  font-size: var(--fs-caption1);
  font-family: inherit;
  color: var(--text-3);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}
.merch-filter-toggle:hover { color: var(--text-2); }
.merch-filter-toggle-icon {
  transition: transform 0.25s;
  flex-shrink: 0;
}
.merch-filter-toggle[aria-expanded="true"] .merch-filter-toggle-icon {
  transform: rotate(180deg);
}
.merch-filter-btn {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--separator);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-label2);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
}
.merch-filter-btn.active,
.merch-filter-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* 상품 그리드 */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .merch-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* 상품 카드 */
.merch-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid var(--separator);
  transition: box-shadow 0.18s, transform 0.18s;
}
.merch-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.merch-card.hidden { display: none; }

.merch-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  overflow: hidden;
}
.merch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s;
}
.merch-card:hover .merch-img {
  transform: scale(1.04);
}

.merch-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.merch-name {
  font-size: var(--fs-label1);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.35;
}
.merch-price {
  font-size: var(--fs-label1);
  font-weight: 800
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: var(--ls-heading2);
  margin-top: 4px;
}
.merch-desc {
  font-size: var(--fs-caption1);
  color: var(--text-3);
  line-height: var(--lh-headline2);
}

/* 상품 이미지 wrap */
.merch-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f5f5;
  overflow: hidden;
  position: relative;
}
.merch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s;
  display: block;
}
.merch-card:hover .merch-img { transform: scale(1.04); }
/* 이미지 로딩 전 스켈레톤 */
.merch-img:not([src]) {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: merch-skeleton 1.4s ease infinite;
}
@keyframes merch-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 이미지 폴백 */
.merch-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-display1);
  background: #f5f5f5;
  position: absolute;
  top: 0; left: 0;
}

/* 검색창 */
.merch-search-wrap {
  margin-bottom: 20px;
}
.merch-search {
  width: 100%;
  max-width: 360px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--separator);
  background: var(--surface);
  font-size: var(--fs-label1);
  color: var(--text-1);
  outline: none;
  font-family: inherit;
}
.merch-search:focus {
  border-color: var(--brand);
}

/* 카테고리 배지 */
.merch-cat-badge {
  display: inline-block;
  font-size: var(--fs-caption2);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 2px;
}
.merch-cat-badge[data-badge="사료"]    { background: #fff3e0; color: #e65100; }
.merch-cat-badge[data-badge="간식"]    { background: #fffde7; color: #f57f17; }
.merch-cat-badge[data-badge="화식"]    { background: #fce4ec; color: #ad1457; }
.merch-cat-badge[data-badge="개껌"]    { background: #e3f2fd; color: #1565c0; }
.merch-cat-badge[data-badge="장난감"]  { background: #ede7f6; color: #4527a0; }
.merch-cat-badge[data-badge="빗"]      { background: #fbe9e7; color: #bf360c; }
.merch-cat-badge[data-badge="눈세정제"] { background: #e0f7fa; color: #006064; }
.merch-cat-badge[data-badge="샴푸"]    { background: #e8f5e9; color: #1b5e20; }
.merch-cat-badge[data-badge="칫솔"]    { background: #e8eaf6; color: #283593; }
.merch-cat-badge[data-badge="치약"]    { background: #f3e5f5; color: #6a1b9a; }

/* 구매하기 버튼 */
.merch-buy-btn {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 10px 0;
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body2);
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
  letter-spacing: var(--ls-label1);
}
.merch-buy-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

/* 파트너스 고지 */
.merch-disclaimer {
  margin-top: 28px;
  font-size: var(--fs-caption2);
  color: var(--text-4);
  text-align: center;
  line-height: var(--lh-body1);
}

/* 멍템 탭 페이지 로딩 오버레이 */
#merch-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(242,242,247,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#merch-loading.hidden { display: none; }
#merch-loading .loading-dog { width: 90px; height: 90px; object-fit: contain; }
#merch-loading p { font-size: var(--fs-body2); font-weight: 500; color: var(--text-2); }

/* 펫 상권 분석 — 댕댕지도 이동 플로팅 버튼 */
#comm2-daeng-float {
  display: none;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  background: #1D1D1F;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: var(--fs-label2);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transition: background 0.15s, transform 0.12s;
}
#comm2-daeng-float:hover { background: #424245; transform: translateX(-50%) translateY(-2px); }


/* ═══════════════════════════════════════════════════════════════
   Apple Design System — 마무리 트윅
   (전체 컴포넌트 일관성 + iOS 감성 강화)
═══════════════════════════════════════════════════════════════ */

/* ── 선택 영역: Apple 오렌지 ::selection ─────────────────────── */
::selection {
  background: rgba(255,140,66,0.22);
  color: var(--text-1);
}

/* ── select 드롭다운 Apple 스타일 ──────────────────────────── */
select {
  -webkit-tap-highlight-color: transparent;
}

/* ── button 탭 하이라이트 제거 (iOS) ──────────────────────── */
button {
  -webkit-tap-highlight-color: transparent;
}

/* ── 스크롤바 Apple macOS 스타일 ────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.14) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.14);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }

/* ── insight-card border ─────────────────────────────────────── */
.insight-card {
  border: 0.5px solid rgba(0,0,0,0.06);
}

/* ── 입양 카드 로딩 스켈레톤 ────────────────────────────────── */
.karma-skeleton {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 0.5px solid rgba(0,0,0,0.06);
}

@keyframes karma-shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.karma-skeleton-photo {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}

.karma-skeleton-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.karma-skeleton-line {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}

.karma-skeleton-title { height: 16px; width: 70%; }
.karma-skeleton-sub   { height: 12px; width: 50%; }

.karma-skeleton-chips { display: flex; gap: 6px; }

.karma-skeleton-chip {
  height: 22px;
  width: 48px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: karma-shine 1.4s ease infinite;
}

/* ── 데스크탑 사이드바 헤더 핸들 바 숨김 ─────────────────────── */
@media (min-width: 769px) {
  .sidebar-handle { display: none; }  /* 데스크탑에서는 핸들 불필요 */
}

/* ── 모바일 추가 Apple 스타일 ────────────────────────────────── */
@media (max-width: 768px) {
  /* AI 기능 업로드존 모바일에서 여백 조정 */
  .recommend-wrap { padding: 20px 16px 40px; }
  .aiw-wrap        { padding: 20px 16px 40px; }

  /* 바텀시트 검색·칩 모바일 여백 */
  .sidebar-search  { margin: 10px 10px 6px; }
  .gu-select-wrap  { padding: 0 10px 6px; }
  .filter-chips    { padding: 4px 10px 8px; }

  /* 모달 하단 fixed 시트 — 선택적 */
  .walk-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .walk-modal {
    border-radius: 22px 22px 0 0;
    max-width: 100%;
    width: 100%;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}


/* ═══════════════════════════════════════════════════════════════
   375px 모바일 최적화 (iPhone SE · 12 mini 기준)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* ── 대시보드 (우리동네 댕댕) ────────────────────────────── */
  .dashboard-wrap {
    padding: 14px 12px 32px;
    overflow-x: hidden; /* 자식 요소 가로 삐침 방지 */
  }

  /* 스탯 카드: 2열 → 1열 세로 나열 */
  .stat-cards {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stat-card {
    padding: 14px 16px;
    flex-direction: row;    /* 아이콘 + 텍스트 가로 배치로 공간 절약 */
    align-items: center;
    gap: 14px;
  }
  .stat-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .stat-icon img  { width: 18px; height: 18px; }
  .stat-label     { font-size: var(--fs-caption2); }
  .stat-value     { font-size: var(--fs-label1); margin-top: 2px; }

  /* 인터랙션: 탭 피드백 */
  .stat-card:active {
    transform: scale(0.97);
    box-shadow: none;
    transition: transform 0.10s ease;
  }
  .insight-card:active {
    transform: scale(0.97);
    transition: transform 0.10s ease;
  }
  .karma-card:active,
  .merch-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.10s ease !important;
  }

  /* 댕댕 살기 좋은 점수 지도: 화면에 꽉 맞게 */
  .choropleth-section {
    overflow-x: hidden; /* 가로 스크롤 제거 */
    padding: 0;
  }
  .district-map-box {
    width: 100%;
    min-width: 0;        /* 768px에서 설정된 700px 고정 해제 */
    height: 280px;
  }

  /* 범례 글씨 줄임 */
  .score-legend { font-size: var(--fs-caption2); gap: 10px; }

  /* 차트·인사이트 카드: 100% 폭에 맞춤 */
  .charts-grid        { gap: 8px; }
  .chart-card         { padding: 14px 12px; min-width: 0; overflow: hidden; }
  .chart-box canvas   { max-width: 100%; }
  .insights-list      { grid-template-columns: 1fr; gap: 8px; }
  .insight-card       { padding: 14px 12px; min-width: 0; overflow: hidden; }

  /* 구 상세 카드 */
  .district-detail-card { margin-bottom: 12px; }
  .ddc-top              { padding: 14px 14px 10px; gap: 10px; }
  .ddc-stats            { gap: 6px; }

  /* ── 입양 탭 ─────────────────────────────────────────────── */
  #tab-adopt           { overflow-x: hidden; max-width: 100vw; }
  .adopt-tab-section   { padding: 0; max-width: 100vw; overflow-x: hidden; }
  .adopt-tab-inner     { width: 100%; max-width: 100%; padding: 16px 16px 24px; overflow-x: hidden; box-sizing: border-box; }
  #tab-adopt           { overflow-x: hidden; }
  .adopt-more-fab      { width: 100%; margin: 40px 0 0; border-radius: var(--radius-sm); }
  .adopt-share-banner  { padding: 12px; gap: 10px; max-width: 100%; box-sizing: border-box; }
  .adopt-share-dog     { width: 48px; height: 48px; }
  .adopt-share-text    { font-size: 12px; min-width: 0; flex: 1; }
  .adoption-list       { gap: 8px; width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .adoption-thumb-info { padding: 8px 10px 12px; }
  .adopt-list-item     { gap: 10px; max-width: 100%; box-sizing: border-box; min-width: 0; }
  .adopt-item-photo-wrap { width: 96px; height: 96px; flex-shrink: 0; }
  .adopt-item-body     { min-width: 0; overflow: hidden; max-width: 100%; }
  .adopt-item-chips    { max-width: 100%; overflow: hidden; }
  .adopt-item-badges   { max-width: 100%; overflow: hidden; }
  .adopt-pagination    { gap: 5px; flex-wrap: wrap; max-width: 100%; }
  .adopt-page-btn      { min-width: 28px; height: 28px; padding: 0 8px; font-size: var(--fs-caption1); border-radius: 4px; }
  .pet-events-section  { max-width: 100%; overflow-x: hidden; }

  /* 반려견 행사 여백 축소 */
  .pet-events-section { margin-top: 20px; }
  .pet-events-list    { gap: 8px; }

  /* ── 펫 상권분석 탭 ──────────────────────────────────────── */
  .comm2-map-col  { padding: 14px 12px; gap: 10px; }
  .comm2-rank-col { padding: 14px 12px; }
  .comm2-map-box  { height: 280px; }
  .comm2-title    { font-size: calc(var(--fs-body1) + 1px); }
  .comm2-filters  { gap: 4px; }
  .comm2-filter   { padding: 5px 10px; font-size: var(--fs-caption1); }

  /* ── AI 산책 추천 탭 ─────────────────────────────────────── */
  .aiw-wrap { padding: 14px 12px 32px; }
  .aiw-form { padding: 16px 14px; gap: 14px; }
  .aiw-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .aiw-field-label { min-width: auto; }
  .aiw-opt-btn     { padding: 7px 12px; font-size: var(--fs-caption1); }

  /* ── 강아지 맞춤 추천 탭 ─────────────────────────────────── */
  .recommend-wrap  { padding: 14px 12px 32px; }
  .ai-upload-inner { padding: 32px 14px; }

  /* ── 멍템추천 탭 ─────────────────────────────────────────── */
  .merch-tab-section { padding: 16px 12px 32px; }
  .merch-title       { font-size: var(--fs-headline2); }
  .merch-grid        { gap: 8px; }
  .merch-info        { padding: 8px 10px 10px; }
  .merch-name        { font-size: var(--fs-label2); }
  .merch-search      { max-width: 100%; }

  /* ── 관리자 탭 ───────────────────────────────────────────── */
  .admin-tab-section { padding: 16px 12px; }
  .admin-tab-inner   { max-width: 100%; }

  /* ── 바텀시트 사이드바 ───────────────────────────────────── */
  .sidebar-search { margin: 8px 8px 4px; }
  .gu-select-wrap { padding: 0 8px 4px; }
  .filter-chips   { padding: 3px 8px 6px; }
}

/* ================================================================
   댕댕그램·강아지프로필·참고하개·산책메이트 (4개 신규 기능)
================================================================ */

/* ── 공통 컨테이너 ─────────────────────────────────────────── */
.walkfeed-tab-section, .mate-tab-section { padding: 24px 16px 80px; }
.walkfeed-inner, .mate-inner { max-width: 720px; margin: 0 auto; }

/* ── 댕댕그램 상단 액션 ────────────────────────────────────── */
.walkfeed-actions { display: flex; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }
.walk-start-btn {
  flex: 1; min-width: 180px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: #fff; border: none; padding: 14px 20px; border-radius: 16px;
  font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(255,107,53,0.32);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.walk-start-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,107,53,0.4); }
.walk-start-icon { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.walk-mydog-btn {
  padding: 14px 18px; border-radius: 16px; border: 1.5px solid #E5E5E5;
  background: #fff; font-size: 15px; font-weight: 600; cursor: pointer; color: #404040;
}
.walk-mydog-btn:hover { background: #FAFAFA; border-color: #D4D4D4; }

/* ── 피드 카드 ─────────────────────────────────────────────── */
.walkfeed-list { display: flex; flex-direction: column; gap: 16px; }
.walkfeed-empty { padding: 60px 20px; text-align: center; color: #737373; font-size: 14px; }
.feed-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
.feed-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.feed-dog-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #F5F5F5; }
.feed-dog-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.feed-card-meta { display: flex; flex-direction: column; }
.feed-card-author { font-size: 14px; font-weight: 700; color: #171717; letter-spacing: -0.02em; }
.feed-card-date { font-size: 12px; color: #737373; margin-top: 2px; }

/* 본인/관리자에게만 노출되는 수정·삭제 버튼 — 카드 헤더 우측 정렬 */
.feed-card-actions { margin-left: auto; display: flex; gap: 6px; }
.feed-card-action-btn {
  font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  background: #fff; border: 1px solid #E5E5E5; color: #525252; font-weight: 600;
}
.feed-card-action-btn:hover { background: #FAFAFA; }
.feed-card-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.feed-card-delete-btn { color: #C44; border-color: #F4D0D0; }
.feed-card-delete-btn:hover { background: #FFF4F4; }

.feed-photo-carousel { position: relative; overflow: hidden; background: #F5F5F5; aspect-ratio: 5/3; }
.feed-carousel-track { display: flex; height: 100%; transition: transform 0.3s ease; }
.feed-carousel-slide { flex: 0 0 100%; height: 100%; }
.feed-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85);
  border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #171717;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18); z-index: 2;
}
.feed-carousel-prev { left: 10px; } .feed-carousel-next { right: 10px; }
.feed-carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; }
.feed-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.6); transition: background 0.2s; }
.feed-carousel-dot.active { background: #fff; }

.feed-card-stats { display: flex; gap: 14px; padding: 12px 16px 4px; font-size: 13px; color: #404040; flex-wrap: wrap; }
.feed-card-note { padding: 8px 16px 12px; font-size: 14px; line-height: 1.5; color: #171717; white-space: pre-wrap; }
.feed-card-footer { padding: 8px 16px 14px; border-top: 1px solid #F5F5F5; }
.feed-like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; padding: 6px 0; color: #404040; font-size: 13px;
}
.feed-like-btn.liked { color: #DC2626; font-weight: 600; }
.feed-like-icon { font-size: 18px; }

/* ── 강아지 프로필 모달 ─────────────────────────────────────── */
.dog-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dog-modal.hidden { display: none; }
.dog-modal-box {
  background: #fff; border-radius: 20px; width: 100%; max-width: 480px;
  max-height: 90dvh; overflow-y: auto; padding: 24px; position: relative;
}
.dog-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); font-size: 22px; line-height: 1; cursor: pointer; color: #404040;
}
.dog-modal-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.dog-photo-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.dog-photo-label {
  width: 96px; height: 96px; border-radius: 50%; background: #F5F5F5; border: 2px dashed #D4D4D4;
  display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative;
}
.dog-photo-preview { width: 100%; height: 100%; object-fit: cover; }
.dog-photo-placeholder { font-size: 12px; color: #737373; }
.dog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 18px; }
.dog-form-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #525252; }
.dog-form-row.dog-form-check { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; }
.dog-form-row input[type="text"],
.dog-form-row input[type="number"],
.dog-form-row select {
  padding: 10px 12px; border: 1px solid #E5E5E5; border-radius: 10px; font-size: 14px; background: #fff; color: #171717;
}
.dog-form-row input:focus, .dog-form-row select:focus { outline: none; border-color: #FF6B35; }

.dog-badge-section { margin-bottom: 18px; }
.dog-badge-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #404040; }
.dog-badge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dog-badge {
  text-align: center; padding: 14px 8px; border-radius: 14px; background: #FAFAFA;
  border: 1.5px solid #E5E5E5; opacity: 0.45; filter: grayscale(0.8);
  transition: all 0.3s ease;
}
.dog-badge.earned { opacity: 1; filter: none; border-color: #FF6B35; background: #FFF7F2; }
.dog-badge-emoji { font-size: 28px; margin-bottom: 4px; }
.dog-badge-label { font-size: 12px; font-weight: 700; color: #171717; }
.dog-badge-desc  { font-size: 10px; color: #737373; margin-top: 2px; }

.dog-save-btn, .dog-delete-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; margin-bottom: 8px;
}
.dog-save-btn { background: #FF6B35; color: #fff; }
.dog-save-btn:hover { background: #E5572A; }
.dog-delete-btn { background: #fff; color: #DC2626; border: 1.5px solid #FECACA; }

/* ── 산책 시작 체크리스트 모달 ───────────────────────────── */
.walk-checklist-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.walk-checklist-modal.hidden { display: none; }
.walk-checklist-box {
  background: #fff; border-radius: 20px; width: 100%; max-width: 400px; padding: 24px; position: relative;
}
.walk-checklist-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); font-size: 22px; line-height: 1; cursor: pointer;
}
.walk-checklist-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.walk-checklist-sub { font-size: 13px; color: #737373; margin-bottom: 16px; }
.walk-check-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: #FAFAFA; margin-bottom: 8px; font-size: 14px; cursor: pointer;
  transition: background 0.15s ease;
}
.walk-check-item:has(input:checked) { background: #FFF7F2; }
.walk-check-input { width: 18px; height: 18px; accent-color: #FF6B35; }
.walk-checklist-go {
  width: 100%; padding: 14px; border-radius: 12px; border: none; background: #FF6B35; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 12px;
  transition: opacity 0.2s ease;
}
.walk-checklist-go:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 산책 진행 오버레이 ─────────────────────────────────────── */
.walk-tracking-overlay {
  position: fixed; inset: 0; background: #fff; z-index: 9100;
  display: flex; flex-direction: column;
}
.walk-tracking-overlay.hidden { display: none; }
.walk-tracking-header {
  padding: 18px 20px; display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%); color: #fff;
}
.walk-tracking-time { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.walk-tracking-dist { font-size: 20px; font-weight: 600; opacity: 0.92; }
.walk-tracking-map { flex: 1; background: #F5F5F5; }
.walk-tracking-stop {
  margin: 16px; padding: 16px; border-radius: 14px; border: none; cursor: pointer;
  background: #DC2626; color: #fff; font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(220,38,38,0.32);
}

/* ── 피드 작성 모달 ────────────────────────────────────────── */
.feed-compose-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.feed-compose-modal.hidden { display: none; }
.feed-compose-box {
  background: #fff; border-radius: 20px; width: 100%; max-width: 520px;
  max-height: 92dvh; overflow-y: auto; padding: 24px; position: relative;
}
.feed-compose-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); font-size: 22px; cursor: pointer;
}
.feed-compose-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.feed-compose-summary {
  font-size: 14px; font-weight: 600; color: #FF6B35; margin-bottom: 12px;
  padding: 10px 14px; background: #FFF7F2; border-radius: 10px;
}
.feed-compose-thumb { width: 100%; border-radius: 14px; margin-bottom: 16px; background: #F5F5F5; display: block; }
.feed-compose-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: #525252; position: relative; }
.feed-compose-row input[type="text"],
.feed-compose-row textarea {
  padding: 10px 12px; border: 1px solid #E5E5E5; border-radius: 10px; font-size: 14px;
  font-family: inherit; resize: vertical;
}
.feed-compose-row input:focus, .feed-compose-row textarea:focus { outline: none; border-color: #FF6B35; }
.feed-photo-preview { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.feed-photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
/* 각 사진 썸네일 우상단의 X 제거 버튼 (수정 모달에서 사진 삭제용) */
.feed-photo-thumb-wrap { position: relative; width: 72px; height: 72px; }
.feed-photo-thumb-remove {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.7); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.feed-photo-thumb-remove:hover { background: #000; }
.feed-place-suggest {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff;
  border: 1px solid #E5E5E5; border-radius: 10px; margin-top: 4px;
  max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.feed-place-suggest:empty { display: none; }
.feed-place-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: none;
  background: #fff; cursor: pointer; font-size: 13px; color: #171717;
}
.feed-place-item:hover { background: #FAFAFA; }
.feed-compose-submit {
  width: 100%; padding: 14px; border-radius: 12px; border: none; background: #FF6B35;
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.feed-compose-submit:disabled {
  background: #d0d0d0; color: #fff; cursor: not-allowed; opacity: 0.7;
}

/* ── 참고하개 FAB + 모달 ────────────────────────────────── */
.report-fab {
  /* 미세먼지·날씨 카드(top:16px, 높이 ~80px)와 안 겹치게 충분히 아래로 */
  position: fixed; right: 16px; top: 140px; z-index: 50;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid #FF6B35; color: #FF6B35;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.report-fab.hidden { display: none; }
.report-fab-icon {
  width: 20px; height: 20px; border-radius: 50%; background: #FF6B35; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}

.report-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.report-modal.hidden { display: none; }
.report-modal-box {
  background: #fff; border-radius: 20px; width: 100%; max-width: 420px; padding: 24px; position: relative;
}
.report-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); font-size: 22px; cursor: pointer;
}
.report-modal-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.report-modal-sub { font-size: 13px; color: #737373; margin-bottom: 16px; }
.report-kind-row { display: flex; gap: 8px; margin-bottom: 14px; }
.report-kind-btn {
  flex: 1; padding: 12px; border-radius: 12px; border: 1.5px solid #E5E5E5;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 600;
}
.report-kind-btn.active.report-kind-good { background: #ECFDF5; border-color: #34C759; color: #15803D; }
.report-kind-btn.active.report-kind-bad  { background: #FEF2F2; border-color: #DC2626; color: #B91C1C; }
.report-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.report-tag-btn {
  padding: 8px 12px; border-radius: 999px; border: 1px solid #E5E5E5; background: #fff;
  cursor: pointer; font-size: 13px; color: #404040;
}
.report-tag-btn.active { background: #171717; color: #fff; border-color: #171717; }
.report-note-row textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #E5E5E5; border-radius: 10px;
  font-size: 14px; font-family: inherit; resize: vertical; margin-bottom: 14px;
}
.report-submit-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: none; background: #FF6B35;
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}

/* 지도 위 신고 핀 */
.report-pin {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; cursor: pointer; position: relative;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.report-pin-cnt {
  position: absolute; top: -4px; right: -4px;
  background: #171717; color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 8px; min-width: 14px; text-align: center;
}

/* ── 산책 메이트 ───────────────────────────────────────────── */
.mate-filter-row { display: flex; gap: 8px; margin: 16px 0 20px; flex-wrap: wrap; }
.mate-filter-select {
  flex: 1; min-width: 110px; padding: 10px 12px; border: 1px solid #E5E5E5;
  border-radius: 10px; font-size: 14px; background: #fff; color: #171717;
}
.mate-list { display: flex; flex-direction: column; gap: 10px; }
.mate-empty { padding: 60px 20px; text-align: center; color: #737373; font-size: 14px; }
.mate-card {
  display: flex; gap: 14px; padding: 14px; background: #fff; border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
}
.mate-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #F5F5F5; }
.mate-photo-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; }
.mate-info { flex: 1; min-width: 0; }
.mate-name { font-size: 15px; font-weight: 700; color: #171717; }
.mate-owner { font-size: 12px; color: #737373; font-weight: 500; margin-left: 4px; }
.mate-detail { font-size: 13px; color: #525252; margin: 4px 0; }
.mate-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.mate-tag {
  padding: 3px 8px; border-radius: 999px; background: #F5F5F5; font-size: 11px; color: #525252;
}

/* 모바일 미세조정 */
@media (max-width: 480px) {
  .walk-tracking-time { font-size: 26px; }
  .walk-tracking-dist { font-size: 16px; }
  .dog-form-grid { grid-template-columns: 1fr; }
  .dog-badge-emoji { font-size: 22px; }
  .report-fab { top: 120px; padding: 8px 12px; font-size: 12px; }
}