/* ─── 기본 ─── */
:root {
    --lb-green:       #16A34A;
    --lb-green-light: #DCFCE7;
    --lb-green-dark:  #15803D;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    background: #F8FAFC;
    color: #1E293B;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── 네비바 ─── */
.lb-navbar {
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.lb-navbar .navbar-brand {
    color: var(--lb-green);
    font-size: 1.2rem;
}
.lb-logo-icon { width: 1.6rem; height: 1.6rem; }

.region-btn {
    font-size: .8rem;
    border-radius: 20px;
}

/* ─── 히어로 ─── */
.hero-section {
    background: linear-gradient(135deg, #DCFCE7 0%, #F0FDF4 100%);
    border: 1px solid #BBF7D0;
}
.hero-icon img { width: 2.5rem; height: 2.5rem; }

/* ─── 게시글 목록 ─── */
.post-list { border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; background: #fff; }

.post-item {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid #F1F5F9;
    transition: background .15s;
}
.post-item:last-child { border-bottom: none; }
.post-item:hover { background: #F8FAFC; }

.post-title {
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-stats { white-space: nowrap; }

/* ─── 카테고리 뱃지 ─── */
.cat-badge { font-size: .7rem; border-radius: 4px; padding: 2px 6px; }

/* ─── 게시글 본문 ─── */
.post-content {
    line-height: 1.8;
    font-size: .95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── 댓글 ─── */
.avatar-sm {
    width: 32px; height: 32px;
    font-size: .8rem;
    flex-shrink: 0;
}
.avatar-lg {
    width: 56px; height: 56px;
    flex-shrink: 0;
}
.comment-item:last-child { border-bottom: none !important; }

/* ─── 지역 표시 ─── */
.region-display {
    cursor: pointer;
    min-height: 38px;
    display: flex;
    align-items: center;
}
.region-verify-box { background: #F8FAFC; }

/* ─── 사이드바 지역 링크 ─── */
.region-link:hover span:first-child { color: var(--lb-green) !important; }

/* ─── 카드 ─── */
.card { border-radius: 12px !important; }

/* ─── 라디오 카테고리 ─── */
.cat-radio-label { cursor: pointer; }
.form-check-input:checked + .cat-radio-label .badge { box-shadow: 0 0 0 2px var(--lb-green); }

/* ─── 버튼 오버라이드 ─── */
.btn-success {
    background-color: var(--lb-green);
    border-color: var(--lb-green);
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--lb-green-dark);
    border-color: var(--lb-green-dark);
}
.btn-outline-success {
    color: var(--lb-green);
    border-color: var(--lb-green);
}
.btn-outline-success:hover {
    background-color: var(--lb-green);
    border-color: var(--lb-green);
}
.text-success { color: var(--lb-green) !important; }
.bg-success { background-color: var(--lb-green) !important; }
.bg-success.bg-opacity-10 { background-color: rgba(22,163,74,.1) !important; }
.bi.text-success { color: var(--lb-green) !important; }

/* ─── 푸터 ─── */
.lb-footer {
    background: #fff;
    border-top: 1px solid #E2E8F0;
    margin-top: auto;
}

/* ─── 이미지 업로드 ─── */
.image-dropzone {
    border: 2px dashed #CBD5E1;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.image-dropzone:hover,
.image-dropzone.dragover {
    border-color: var(--lb-green);
    background: rgba(22,163,74,.05);
}
.img-prev-wrap { display: inline-block; }

.img-remove-btn {
    position: absolute;
    top: -7px; right: -7px;
    width: 22px; height: 22px;
    background: #EF4444;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.img-remove-btn:hover { background: #DC2626; }

/* ─── 게시글 이미지 ─── */
.post-img-thumb { transition: opacity .15s; }
.post-img-thumb:hover { opacity: .88; }

/* ─── 반응형 ─── */
@media (max-width: 768px) {
    .hero-icon { font-size: 2.5rem; }
    .post-title { font-size: .85rem; }
}