@charset "utf-8";
/* ============================================================
   user/board/list.php — 시민 의견 (카드 그리드)
   ============================================================ */
#main { padding:0; }

/* 히어로 */
.ls-hero {
    background:#1B4B9B;
    background-image:linear-gradient(135deg,#173F86 0%,#1F58B8 100%);
    color:#fff; text-align:center; padding:52px 0 48px;
}
.ls-hero-badge {
    display:inline-block; background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.30); border-radius:20px;
    font-size:13px; font-weight:700; padding:5px 16px; margin-bottom:14px;
}
.ls-hero-title { font-size:clamp(26px,4vw,36px); font-weight:900; letter-spacing:-.02em; margin-bottom:12px; }
.ls-hero-sub { font-size:15px; color:rgba(255,255,255,.85); word-break:keep-all; }

/* 본문 */
.ls-body { padding:32px 0 64px; background:var(--surface-soft,#F6F7F9); }

/* 필터 */
.ls-filter { display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.ls-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ls-chip {
    display:inline-flex; align-items:center; gap:5px;
    background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:20px;
    padding:7px 15px; font-size:13.5px; font-weight:600; color:#55607A;
    text-decoration:none; transition:all .15s; white-space:nowrap;
}
.ls-chip:hover { border-color:#1B4B9B; color:#1B4B9B; }
.ls-chip.on { background:#1B4B9B; border-color:#1B4B9B; color:#fff; }
.ls-chip-st.on { background:#16264D; border-color:#16264D; }
.ls-chip-div { width:1px; height:22px; background:var(--border-soft,#D3D7DE); margin:0 4px; }

.ls-search { display:flex; gap:8px; align-items:center; }
.ls-search .select { height:42px; min-width:110px; }
.ls-search-box { position:relative; flex:1; max-width:320px; }
.ls-search-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:13px; opacity:.5; }
.ls-search-box .input { height:42px; padding-left:34px; width:100%; }
@media(min-width:760px){
    .ls-filter { flex-direction:row; justify-content:space-between; align-items:flex-start; }
    .ls-chips { flex:1; }
    .ls-search { flex-shrink:0; }
}
/* 모바일: 필터 영역 아이콘 숨김 */
@media(max-width:759px){
    .ls-chip-ic { display:none; }
    .ls-search-ic { display:none; }
    .ls-search-box .input { padding-left:14px; }
}

/* 요약 */
.ls-summary {
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    font-size:14px; color:#55607A; margin-bottom:18px; padding:0 2px;
}
.ls-summary strong { color:#16264D; font-weight:800; }
.ls-summary-week { color:#7A8398; }

/* 카드 그리드 */
.ls-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:640px){ .ls-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .ls-grid{ grid-template-columns:repeat(3,1fr); } }

.ls-card {
    display:flex; flex-direction:column;
    background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:14px;
    padding:20px 20px 16px; box-shadow:0 2px 10px rgba(0,0,0,.04);
    transition:transform .2s, box-shadow .2s;
}
.ls-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,48,96,.10); }
.ls-card-link { text-decoration:none; color:inherit; flex:1; display:block; }
.ls-card-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.ls-bd-cat {
    font-size:12px; font-weight:700; color:#1D4ED8;
    background:#EFF4FF; border:1px solid #D7E3FB; border-radius:6px; padding:3px 9px; white-space:nowrap;
}
.ls-bd-region {
    font-size:12px; font-weight:600; color:#6B7283;
    background:#F3F4F6; border-radius:6px; padding:3px 9px; white-space:nowrap;
}
.ls-card .status { font-size:11px; padding:3px 9px; border-radius:6px; white-space:nowrap; }
.ls-card .status::before { display:none; }
.ls-card-title {
    font-size:20px; font-weight:600; color:#16264D; line-height:1.45; margin-bottom:8px; word-break:keep-all;
    overflow:hidden;
}
.ls-card-title svg{ vertical-align:-2px; }
.ls-card-excerpt {
    font-size:15px; color:#333; line-height:1.6; word-break:keep-all; margin-bottom:16px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ls-card-foot {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding-top:12px; border-top:1px solid var(--border-soft,#D3D7DE); font-size:12.5px; color:#8A93A6;
}
.ls-writer { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ls-stats { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ls-like { color:#E5446D; font-weight:700; }
.ls-cmt { color:#5A6473; font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:3px; }
.ls-cm, .ls-view { color:#8A93A6; }
.ls-card-foot .like-btn-mini { font-size:12.5px; background:transparent; border:0; padding:2px 0; color:#E5446D; }
/* 공감 있으면 빨강 하트, 공감 0이면 회색 */
.ls-card-foot .like-btn-mini .heart svg { stroke:#E5446D; fill:none; }
.ls-card-foot .like-btn-mini.ls-like-zero { color:#9AA0AE; }
.ls-card-foot .like-btn-mini.ls-like-zero .heart svg { stroke:#B4B9C4; }
/* 마우스 오버 시 아무 효과 없음 (정지 상태와 동일) */
.ls-card-foot .like-btn-mini:hover:not(:disabled) { background:transparent; transform:none; box-shadow:none; border:0; color:#E5446D; }
.ls-card-foot .like-btn-mini:hover:not(:disabled) .heart svg { fill:none; stroke:#E5446D; }
.ls-card-foot .like-btn-mini.ls-like-zero:hover:not(:disabled) { color:#9AA0AE; }
.ls-card-foot .like-btn-mini.ls-like-zero:hover:not(:disabled) .heart svg { stroke:#B4B9C4; fill:none; }
.ls-card-foot .like-btn-mini.liked .heart svg { fill:#E5446D; stroke:#E5446D; }

.ls-empty { text-align:center; padding:60px 20px; color:#8A93A6; background:#fff; border:1px solid var(--border-soft,#D3D7DE); border-radius:14px; }