/* 채팅알바 목록 (모바일 우선) */
.chl{max-width:720px;margin:0 auto;padding:0 0 80px;background:#fff;font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#212124}
.chl-top{position:sticky;top:0;z-index:5;background:#fff;padding:12px 16px 8px;border-bottom:1px solid #eee}
.chl-top h2{margin:0;font-size:19px;font-weight:800;display:flex;align-items:center;gap:6px}
.chl-loc{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.chl-loc button,.chl-loc select{height:34px;border:1px solid #dfe3ea;border-radius:17px;background:#fff;padding:0 12px;font-size:13px;color:#333}
.chl-loc button.on{background:#ff6f0f;border-color:#ff6f0f;color:#fff;font-weight:700}
.chl-loc .chl-basis{font-size:12px;color:#868b94}
.chl-safe{margin:10px 16px 0;padding:9px 12px;border-radius:10px;background:#fff4e8;color:#a64b00;font-size:12.5px;line-height:1.45}
.chl-safe b{color:#d9480f}
.chl-cats{display:flex;gap:6px;overflow-x:auto;padding:10px 16px 4px;scrollbar-width:none}
.chl-cats::-webkit-scrollbar{display:none}
.chl-cats a{flex:none;padding:6px 12px;border-radius:16px;background:#f2f3f6;color:#4d5159;font-size:13px;text-decoration:none}
.chl-cats a.on{background:#212124;color:#fff}
.chl-list{list-style:none;margin:0;padding:0 16px}
.chl-item{border-bottom:1px solid #f0f1f4}
.chl-item a{display:flex;gap:14px;padding:16px 0;text-decoration:none;color:inherit}
.chl-thumb{flex:none;width:92px;height:92px;border-radius:12px;background:#f2f3f6 center/cover no-repeat;overflow:hidden}
.chl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chl-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.chl-title{font-size:16px;line-height:1.35;margin:0 0 4px;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chl-meta{font-size:12.5px;color:#868b94;display:flex;flex-wrap:wrap;gap:0 4px}
.chl-meta span+span:before{content:"·";margin-right:4px}
.chl-meta .chl-dist{color:#ff6f0f;font-weight:700}
.chl-cat{display:inline-block;margin-top:6px;font-size:11.5px;color:#4d5159;background:#f2f3f6;border-radius:4px;padding:2px 6px;align-self:flex-start}
.chl-ex{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:#8b95a1;border-radius:4px;padding:1px 5px;margin-right:4px;vertical-align:2px}
.chl-more{display:block;margin:16px auto;padding:10px 24px;border:1px solid #dfe3ea;border-radius:20px;background:#fff;font-size:14px}
.chl-empty{padding:48px 16px;text-align:center;color:#868b94}
.chl-fab{position:fixed;right:18px;bottom:22px;z-index:9;background:#ff6f0f;color:#fff;border-radius:28px;padding:14px 20px;font-weight:800;text-decoration:none;box-shadow:0 4px 14px rgba(255,111,15,.35)}
/* 글쓰기 추가 필드 */
.chl-wf{display:grid;gap:8px;margin:10px 0}
.chl-wf .chl-photo{display:flex;align-items:center;gap:10px}
.chl-wf .chl-photo img{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#f2f3f6}
.chl-wf input[type=text]{height:42px;border:1px solid #dfe3ea;border-radius:10px;padding:0 10px}
.chl-wf small{color:#868b94}
@media (min-width:768px){
  .chl{border:1px solid #eee;border-radius:16px;margin:24px auto;padding-bottom:24px}
  .chl-top{border-radius:16px 16px 0 0}
  .chl-thumb{width:110px;height:110px}
  .chl-title{font-size:17px}
  .chl-fab{right:calc(50% - 340px)}
}

/* 채팅하기 버튼 (카드 탭=상세, 버튼=채팅방) */
.chl-item{position:relative}
.chl-item a.chl-chatbtn{position:absolute;right:0;bottom:16px;display:inline-block;padding:7px 14px;gap:0;border-radius:18px;background:#ff6f0f;color:#fff;font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;z-index:1}
.chl-item a.chl-chatbtn:active{background:#e45f00}