/* =========================
   Anabada App – Home Layout
========================= */

/* =========================
   Side Menu
========================= */

#ab-menu-panel[hidden] {
  display: none !important;
}

#ab-menu-panel {
  position: absolute;
 
 
  top: 65px;     
  left: 12px;
  
  width: 140px;
  padding: 4px 0; 
  
  height: auto;
  max-height: calc(100vh - 80px); /* 화면 넘기지 않게 안전장치 */
 
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;

 pointer-events: auto;
 
  z-index: 2000;
}

#ab-menu-panel a {
  display: block;
  border-radius: 8px;
}


#ab-menu-panel a:hover {
  background: rgba(0,0,0,0.04);
}

#ab-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  pointer-events: auto;
}

.ab-header {
   position: relative;
  top: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  z-index: 100;   /* 너무 높지 않게 */
  /* pointer-events: none; */
  pointer-events: auto;   /* 전체 허용 */
}

.ab-header-inner {
  display: flex;
  align-items: center;
  height: 100%;
}


.ab-menu-overlay[hidden] {
  display: none !important;
  
}


body.menu-open {
  overflow: hidden;
}

.ab-menu-list {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  gap: 4px;
}

.ab-menu-list li {
  margin-bottom: 6px;
}

.ab-menu-list a {
  display: flex;
  align-items: center;
  gap: 8px;

  width: 140px;
  padding: 12px 14px;
  border-radius: 0px;
  font-size: 15px;
  color: #111;
  text-decoration: none;
  cursor: pointer;
   background: #fff;
  min-height: 48px;              /* ⭐ 핵심 */
  box-sizing: border-box;
}


.ab-menu-list a:hover {
   background: #f3f4f6;
}

.ab-menu-list a:focus,
.ab-menu-list a:active {
 
  outline: none;
}

.ab-menu-list a:hover:not(.is-active) {
  background: #f3f4f6;
}

/* ✅ 현재 선택된 메뉴 */
.ab-menu-list a.is-active {
  background: #fff3eb;
  color: #ff7a3d;
  font-weight: 600;
  border-left: 3px solid #ff7a3d;
  padding-left: 13px; /* 기존 16px에서 -3px */
}

/* 🔥 메뉴 리스트 간격 제거 */
.ab-menu-list {
  gap: 0;              /* flex gap 제거 */
}

/* li 여백 제거 */
.ab-menu-list li {
  margin: 0;
}

/* 🔥 모든 메뉴 카드 통일 */
.ab-menu-list a {
  background: #fff;
  border-radius: 0;          /* 기본은 각지게 */
  padding: 14px 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

/* 첫 번째 카드 (Logout) */
.ab-menu-list li:first-child a {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* 마지막 카드 */
.ab-menu-list li:last-child a {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* hover 효과 */
.ab-menu-list a:hover {
  background: #f3f4f6;
}




/* =========================
  Hero / Slogan
========================= */
.ab-hero {
  position: relative;
  padding-bottom: 12px;
  z-index: 1;
}

.ab-hero .ab-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ab-slogan-ko {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ab-slogan-en {
  text-align: center;
  font-size: 14px;
  color: #777;
  margin-bottom: 20px;
}

/* =========================
Header (Sticky 헤더)
========================= */

.ab-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;   /* 🔥 클릭 통과 */
  z-index: 5;
}

.ab-brand-name {
 pointer-events: auto;   /* 링크만 클릭 가능 */
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ff7a00;
  text-decoration: none;
  pointer-events: none; /* 🔥 클릭 가로채지 않게 */
}
.ab-brand-name:first-letter {
  color: #ff7a00;
}


/* ZIP / 유저는 오른쪽 고정 */
.ab-location {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-left: auto !important;
  display: flex;
 
  font-size: 13px;   /* 명확히 지정 */
  align-items: center;
  gap: 6px;
}

#ab-user-label {
  font-size: 12px;      /* ← 여기서 조절 */
  font-weight: 500;
  color: #555;
}

/* 햄버거 */
.ab-menu-btn {
  position: relative;
  left: 12px;
   top: 15px; /* ← 이 값을 늘리면 아래로 내려감 */
  transform: translateY(-50%);
   z-index: 1100;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  pointer-events: auto !important;
}

.ab-message-btn,
.ab-message-btn * {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 3000;
}

/* =========================
Search 영역
========================= */
.ab-main-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 14px;
  padding: 0 16px;
}

/* 메인 검색 input */
.ab-main-search {
  width: 100%;
  height: 40px;
  padding: 0 16px;

  border-radius: 12px;
  border: 1.5px solid #ffd9c2;
  background: #fff;

  font-size: 14px;
  outline: none;
}
.ab-main-search::placeholder {
  color: #aaa;
}

.ab-main-search:focus {
  border-color: #ff9a3c;
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.15);
}


/* =========================
Unread / Indicator (dot 시스템)
========================= */
.ab-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.ab-unread-dot {
  position: relative;
  display: none;  
  align-items: center;
  justify-content: center;

  margin-left: 6px;
  flex-shrink: 0;
  vertical-align: middle;

  font-size: 15px;
  line-height: 1;
  color: #333;

  background: none;
  width: auto;
  height: auto;
}
/* 💬 메시지 아이콘 (항상 표시) */
.ab-unread-dot.is-visible {
  display: inline-block;
}

/* 💬 메시지 아이콘 */
.ab-unread-dot.is-visible::before {
  content: "💬";
}


/* Guest면 무조건 숨김 */
body[data-user-id="0"] .ab-unread-dot {
  display: none !important;
}

.ab-fab-post {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ff7a00;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  line-height: 56px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ab-fab-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* =========================
글로벌 메시지 버튼
========================= */
.ab-message-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 1100;
}
#ab-global-unread {
  position: absolute;
  top: -6px;
  right: -6px;
}

#ab-unread-badge,
#ab-unread-badge-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  background: #ef4444;
  color: #fff;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  border-radius: 999px;

  position: relative;
}


.ab-menu-overlay { z-index: 1000; }
#ab-menu-panel { z-index: 2000; }


.ab-brand-name {
  display: inline-flex;
  align-items: center;
}

.ab-beta-badge {
  margin-left: 4px;      /* 간격 줄임 */
  font-size: 8px;        /* 살짝 더 작게 */
  font-weight: 600;
  letter-spacing: 0.5px;

  padding: 1px 4px;
  border-radius: 6px;

   background: #ffffff;   /* 흰색 */
  color: #ff7a00;

  line-height: 1;
}

.ab-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}


/* =========================
Home Content
========================= */

.post-grid {
  display: grid;
   grid-template-columns: repeat(5, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 8px;   
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  justify-content: center;
}


/* =========================
카테고리 탭
========================= */

.ab-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 8px;
}

.ab-category-tabs .tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #fffaf5;
  border: 1px solid #f1e6dc;
  cursor: pointer;
}

/* ACTIVE 기본 */
.ab-category-tabs .tab.active {
  color: #ffffff;
}

/* All */
.tab[data-category=""].active {
  background: #111827;
}

/* Electronics */
.tab[data-category="electronics"].active {
  background: #2563eb; /* blue */
}

/* Furniture */
.tab[data-category="furniture"].active {
  background: #92400e; /* wood brown */
}

/* Baby */
.tab[data-category="baby"].active {
  background: #ec4899; /* pink */
}

/* Clothing */
.tab[data-category="clothing"].active {
  background: #7c3aed; /* purple */
}

/* Daily */
.tab[data-category="daily"].active {
  background: #059669; /* green */
}

/* Pet */
.tab[data-category="pet"].active {
  background: #f97316; /* orange */
}

/* Group Buy */
.tab[data-category="groupbuy"].active {
  background: #0d9488; /* teal */
}

/* Others */
.tab[data-category="etc"].active {
 background: #374151; /* dark gray */
}

.ab-desktop-only { display: flex; }
.ab-mobile-only  { display: none; }



/* 아이템 영역 기본 */
#ab-items-wrap {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* 로딩 중 상태 */
#ab-items-wrap.is-loading {
  opacity: 0.6;
  transition: opacity 0.15s ease;
  pointer-events: none;
}


.ab-change-location {
 margin-left: 8px;
  font-size: 12px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  color: #555;
  box-shadow: none;
}

.ab-change-location:hover {
  background: #f6f6f6;
  color: #000;
}

.post-grid {
  
  row-gap: 18px;
}

.ab-empty-state {
    
  grid-column: 1 / -1;   /* ✅ 전체 grid 영역 사용 */
  
  min-height: 50vh;              /* 화면 중간 기준 */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* 세로 가운데 */
  align-items: center;           /* 가로 가운데 */
  text-align: center;
  color: #666;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}

/* 🔔 검색 확장 안내 */
.ab-search-hint {
  grid-column: 1 / -1;   /* ✅ grid 전체 폭 */
  
  margin-top: 12px;
  padding: 14px 16px;

  background: #f6f7ff;
  border-radius: 12px;

  font-size: 14px;
  color: #444;
  text-align: center;
}

/*****패널 열려 있을 때” search 비활성화  ****/

body.chat-room-open #ab-global-search {
  pointer-events: none;
}


/* =========================
   Footer
========================= */

.ab-footer {
  margin-top: 60px;
  padding: 28px 16px;
  background: #fafafa;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: #666;
}

.ab-footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.ab-footer-copy {
  margin-bottom: 8px;
  font-weight: 500;
  color: #777;
}

.ab-footer-note {
  margin-bottom: 12px;
  color: #999;
  font-size: 12px;
}

.ab-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.ab-footer-links a {
  color: #666;
  text-decoration: none;
}

.ab-footer-links a:hover {
  color: #ff7a3d;
  text-decoration: underline;
}

html, body {
  height: 100%;
}

.anabada-home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ab-home-items {
  flex: 1;
}

.ab-loading-spinner {
  text-align: center;
  padding: 24px 0;
  color: #999;
  font-size: 14px;
}

.ab-loading-spinner::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid #ddd;
  border-top-color: #555;
  border-radius: 50%;
  animation: ab-spin 0.8s linear infinite;
}

@keyframes ab-spin {
  to { transform: rotate(360deg); }
}

.ab-no-more-items {
  text-align: center;
  padding: 28px 0 36px;
  color: #9ca3af;
  font-size: 13px;
}


:root {
  --ab-bg: #FFF4EC;
}

body {
  background-color: var(--ab-bg);
  font-family: "Noto Sans KR", "Inter", system-ui, sans-serif;
  color: #111;
}

.ab-hero,
.anabada-home {
  background: #fff8f2;
}


#ab-items-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.post-grid {
  margin-top: 0 !important;
}

.cmplz-manage-consent {
  font-size: 10px;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  left: 16px;           /* 🔥 왼쪽 고정 */
}

#cmplz-manage-consent {
  display: none !important;
}

/* 📱 아주 작은 폰 */
@media (max-width: 360px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   📱 모바일 (≤768px)
   → 2컬럼
========================= */

@media (max-width: 768px) {

  .ab-desktop-only {
    display: none !important;
  }

  .ab-mobile-only {
    display: flex !important;
    justify-content: center;  /* 🔥 center → flex-start */
    gap: 6px;
    font-size: 13px;
    margin: 8px 0;
  }

  .post-grid {
     grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   📲 태블릿 (769–1024px)
   → 3컬럼 (자연스럽게)
========================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    max-width: 960px;   /* ⭐ 중요: 카드 숨 안 막히게 */
    gap: 18px;
  }
}