/* ============================================================
   ThailandNightlife — 통합 검색 (Search)
   State A(입력 전: 최근·인기·카테고리) + State B(결과: 필터바 + 섹션)
   다크 + 오렌지(#ff6b00). 하단바는 includes/bottom-nav.php 담당.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: hidden; }
body {
    background: #0a0a0a;
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif;
    color: #f4eee7;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    min-height: 100vh;
}
a { text-decoration: none; color: inherit; }

/* ===== 검색 헤더 ===== */
.s-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    background: #0a0a0a;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.s-back { font-size: 21px; line-height: 1; color: #c9c1b6; width: 22px; flex: none; text-align: center; }
.s-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}
.s-field.active svg { color: #ff6b00; }
.s-field svg { width: 15px; height: 15px; color: #8b8272; flex: none; }
.s-field input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #f4eee7;
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
}
.s-field input::placeholder { color: #8b8272; }
.s-clear {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,255,255,0.12); color: #8b8272;
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    flex: none; border: none; cursor: pointer;
}
.s-cancel { font-size: 13px; font-weight: 700; color: #ff6b00; background: none; border: none; font-family: inherit; flex: none; cursor: pointer; }

/* ===== 섹션 공통 ===== */
.sec { padding: 0 15px; }
.sec-h { display: flex; align-items: center; gap: 7px; margin: 16px 0 10px; }
.sec-t { font-size: 15px; font-weight: 800; color: #f4eee7; }
.sec-t.sm { font-size: 14px; font-weight: 700; }
.sec-c { font-size: 12px; color: #8b8272; }
.sec-a, .sec-more { margin-left: auto; font-size: 11px; font-weight: 700; color: #ff6b00; background: none; border: none; font-family: inherit; cursor: pointer; }
.sec-a { color: #8b8272; font-weight: 400; }
.badge-live {
    font-size: 8.5px; font-weight: 800; color: #ff6b00;
    background: rgba(255,107,0,0.14); border: 1px solid rgba(255,107,0,0.4);
    border-radius: 20px; padding: 2px 7px; margin-left: 7px; vertical-align: middle;
}

/* ===== State A · 최근 검색어 ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; padding: 7px 11px; font-size: 11.5px; color: #c9c1b6;
}
.chip .x { color: #6e655a; font-size: 11px; cursor: pointer; }
.chips-empty { font-size: 12px; color: #6e655a; padding: 2px 0; }

/* ===== State A · 인기 검색어 ===== */
.rank { display: flex; align-items: center; gap: 11px; padding: 8px 0; }
.rank-n { font-size: 16px; font-weight: 800; width: 18px; text-align: center; color: #8b8272; flex: none; }
.rank-n.top { color: #ff6b00; }
.rank-kw { font-size: 13px; color: #f4eee7; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-up { color: #35d6a0; font-size: 12px; font-weight: 700; flex: none; }
.trend-new { color: #ff6b00; font-size: 9px; font-weight: 800; flex: none; }
.trend-dn { color: #6e655a; font-size: 12px; flex: none; }
.trend-flat { color: #6e655a; font-size: 12px; flex: none; }
/* 인기 검색어 2열(4×2) — 세로로 너무 길어지지 않게 */
#popularList { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: 18px; }

/* ===== State A · 카테고리 바로가기 ===== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.cat {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 16px 4px; text-align: center;
}
.cat-l { font-size: 12px; font-weight: 600; color: #c9c1b6; }

/* ===== State B · 필터 바 ===== */
.fbar { display: flex; gap: 8px; padding: 6px 14px 12px; overflow-x: auto; scrollbar-width: none; }
.fbar::-webkit-scrollbar { display: none; }
.fchip {
    flex: none;
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 8px 13px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.13); color: #c9c1b6; background: none;
    font-family: inherit; white-space: nowrap; cursor: pointer;
}
.fchip.solid { background: #ff6b00; border-color: #ff6b00; color: #160a03; font-weight: 700; }
.fchip.active { background: rgba(255,107,0,0.14); border-color: rgba(255,107,0,0.4); color: #ff6b00; }
.fchip .dot { width: 6px; height: 6px; border-radius: 50%; background: #35d6a0; box-shadow: 0 0 6px #35d6a0; }
.fchip svg { width: 13px; height: 13px; }
/* ===== State B · 필터 드롭다운 (fixed → 가로스크롤 필터바 overflow에 안 잘림. 위치는 JS 지정) ===== */
.fwrap { flex: none; }
.fmenu {
    display: none;
    position: fixed; z-index: 950;
    min-width: 150px; max-height: 62vh; overflow-y: auto;
    background: #141210; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.7); padding: 6px;
    -webkit-overflow-scrolling: touch;
}
.fmenu.open { display: block; }
.fmenu a {
    display: block; padding: 11px 13px; font-size: 13px; color: #c9c1b6;
    border-radius: 9px; white-space: nowrap; text-decoration: none;
}
.fmenu a.on { color: #ff6b00; background: rgba(255,107,0,0.14); font-weight: 700; }
.fmenu a:active { background: rgba(255,255,255,0.06); }

/* ===== State B · 결과 메타 ===== */
.r-meta { padding: 2px 15px 4px; font-size: 11.5px; color: #8b8272; }
.r-meta b { color: #c9c1b6; }

/* ===== State B · 업소 리스트 (섹션별 색상 카드) ===== */
.shop-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,107,0,0.10), rgba(255,107,0,0.03)); border: 1px solid rgba(255,107,0,0.22); }
.shop-th { width: 54px; height: 54px; border-radius: 12px; flex: none; overflow: hidden; background: #1a1210; }
.shop-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-info { flex: 1; min-width: 0; }
.shop-nm { font-size: 13px; font-weight: 700; color: #f4eee7; display: flex; align-items: center; gap: 5px; }
.shop-nm .nm-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbadge { font-size: 8px; font-weight: 800; color: #160a03; background: #ff8a3d; border-radius: 4px; padding: 2px 5px; flex: none; }
.vcheck { display: inline-flex; align-items: center; flex: none; }
.shop-m { font-size: 10.5px; color: #8b8272; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.shop-m .star { color: #ff8a3d; font-weight: 700; }
.shop-m .open { color: #35d6a0; font-weight: 700; }
.shop-m .closed { color: #a1554a; }
.shop-m .hours { color: #a79e92; }
.chev { color: #6e655a; font-size: 16px; flex: none; }

/* ===== State B · 가이드/리뷰 (바이올렛 카드) ===== */
.g-row { display: flex; gap: 11px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; align-items: center; background: linear-gradient(135deg, rgba(138,107,255,0.11), rgba(138,107,255,0.03)); border: 1px solid rgba(138,107,255,0.24); }
.g-th { width: 66px; height: 50px; border-radius: 10px; flex: none; overflow: hidden; background: #17131f; }
.g-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-info { min-width: 0; }
.g-lbl { font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; }
.g-lbl.master { color: #ff6b00; }
.g-lbl.pro { color: #ff8a3d; }
.g-lbl.guide { color: #8b8272; }
.g-tt { font-size: 12px; color: #e8e0d5; margin-top: 4px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== State B · 커뮤니티 (블루 카드) ===== */
.c-row { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(74,144,255,0.10), rgba(74,144,255,0.03)); border: 1px solid rgba(74,144,255,0.22); }
.c-tt { font-size: 12.5px; color: #e8e0d5; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-m { font-size: 10px; color: #8b8272; margin-top: 4px; }

/* ===== 빈 상태 ===== */
.empty { text-align: center; padding: 60px 30px; color: #8b8272; }
.empty svg { width: 40px; height: 40px; color: #3a352e; margin-bottom: 14px; }
.empty h2 { font-size: 15px; font-weight: 700; color: #c9c1b6; margin-bottom: 6px; }
.empty p { font-size: 12.5px; line-height: 1.5; }

/* ===== 데스크톱: 480px 중앙 컬럼(사이트 규격) ===== */
@media (min-width: 768px) {
    body { max-width: 480px; margin: 0 auto; }
    .s-head { max-width: 480px; margin: 0 auto; }
}