/**
 * v7/post/region.css - 지역 게시판 페이지 스타일
 *
 * v6 /post/region.php의 디자인을 v7 아키텍처로 100% 재구현.
 * Bootstrap 미사용 — v7 전용 CSS + Web Awesome CSS 변수 사용.
 * 장터 Masonry 스타일은 list.css의 v7-masonry-* 클래스를 재사용.
 */

/* === 페이지 헤더 === */
.region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 2px solid var(--wa-color-neutral-800, #1e293b);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.region-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--wa-color-neutral-900, #0f172a);
}

.region-title i {
    color: var(--wa-color-brand-600, #2563eb);
    margin-right: 0.35rem;
}

.region-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.region-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wa-color-brand-600, #2563eb);
    background: transparent;
    border: 1px solid var(--wa-color-brand-500, #3b82f6);
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.region-write-btn:hover {
    background: var(--wa-color-brand-600, #2563eb);
    border-color: var(--wa-color-brand-600, #2563eb);
    color: #fff;
    text-decoration: none;
}

/* === 2단 레이아웃 === */
.region-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 데스크톱: 좌(40%) + 우(60%) */
@media (min-width: 768px) {
    .region-layout {
        flex-direction: row;
        gap: 1rem;
    }

    .region-freetalk {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .region-buyandsell {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

/* === 섹션 제목 === */
.region-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wa-color-neutral-700, #334155);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--wa-color-neutral-200, #e2e8f0);
    margin-bottom: 0;
}

.region-section-title i {
    color: var(--wa-color-brand-600, #2563eb);
    margin-right: 0.3rem;
}

/* === 자유토론 텍스트 리스트 === */
.region-freetalk-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--wa-color-neutral-100, #f1f5f9);
    text-decoration: none;
    color: var(--wa-color-neutral-800, #1e293b);
    transition: background 0.15s;
    line-height: 1.4;
}

a.region-freetalk-link:hover {
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

.region-freetalk-subject {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.region-freetalk-comment {
    font-size: 0.75rem;
    color: var(--wa-color-brand-600, #2563eb);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* === 빈 상태 === */
.region-empty {
    padding: 3rem;
    text-align: center;
    color: var(--wa-color-neutral-400, #94a3b8);
}

.region-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.region-empty p {
    margin: 0;
    font-size: 0.85rem;
}

/* === 장터 Masonry: 항상 2단 (모바일에서도) === */
.region-buyandsell .v7-masonry-sizer,
.region-buyandsell .v7-masonry-item {
    width: 50%;
    padding: 4px;
}

/* 모바일에서도 2단 유지 */
@media (max-width: 767px) {
    .region-buyandsell .v7-masonry-sizer,
    .region-buyandsell .v7-masonry-item {
        width: 50%;
        padding: 3px;
    }
}