@charset "utf-8";

/* ==========================================================================
   Design System: Kolive (SaaS Edition)
   Reference: Dio.so / Notion
   Units: REM (Root Em defaults to 16px)
   ========================================================================== */

:root {
    /* 1. Colors (Royal Blue & Slate - Single Source of Truth) */
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #EFF6FF;
    --primary-dark: #1D4ED8;
    --accent: #0284c7;
    --accent-hover: #0369a1;

    --text-main: #0F172A;
    --text-sub: #334155;
    --text-muted: #64748B;

    --bg-page: #F8FAFC;
    --bg-body: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-white: #FFFFFF;
    --bg-light: #F1F5F9;

    --border: #E2E8F0;
    --border-color: #E2E8F0;
    --border-hover: #CBD5E1;

    --status-success: #10B981;
    --status-warning: #F59E0B;
    --status-error: #EF4444;

    /* Auth & Member Specific Tokens */
    --auth-primary: #2563eb;
    --auth-primary-hover: #1d4ed8;
    --auth-bg: #f8fafc;
    --auth-card-bg: #ffffff;
    --auth-border: #e2e8f0;
    --auth-text-main: #0f172a;
    --auth-text-sub: #64748b;

    /* 2. Spacing (Base 4px = 0.25rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* 3. Radius */
    --radius-sm: 0.38rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;

    /* 4. Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* 5. Layout (1080px = 67.5rem) */
    --container-width: 67.5rem;
    --container-padding: 0 1.25rem;
    --header-height: 4rem;
    --sidebar-width: 15rem;

    /* 6. Section Specific Color Tokens */
    /* 생활법률 (Law) */
    --sec-law-primary: #1e3a8a;
    --sec-law-accent: #d97706;
    --sec-law-bg: #f0f7ff;

    /* 지역정보 (Local) */
    --sec-local-primary: #047857;
    --sec-local-accent: #10b981;
    --sec-local-bg: #f0fdf4;

    /* 지역 O2O (O2O) */
    --sec-o2o-primary: #0d9488;
    --sec-o2o-accent: #f97316;
    --sec-o2o-bg: #f0fdfa;

    /* 쇼핑/마켓 (Shop) */
    --sec-shop-primary: #4f46e5;
    --sec-shop-accent: #f43f5e;
    --sec-shop-bg: #f5f3ff;

    /* 오리지널 컨텐츠 (Contents) */
    --sec-contents-primary: #7c3aed;
    --sec-contents-accent: #ec4899;
    --sec-contents-bg: #faf5ff;

    /* 집 & 부동산 (Real Estate) */
    --sec-estate-primary: #78350f;
    --sec-estate-accent: #b45309;
    --sec-estate-bg: #fffbeb;

    /* 구인구직 & 커리어 (Career) */
    --sec-career-primary: #0284c7;
    --sec-career-accent: #84cc16;
    --sec-career-bg: #f0f9ff;

    /* 7. Typography (Pretendard First) */
    --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* Base */
html {
    font-size: 16px;
    box-sizing: border-box;
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    font-family: inherit;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

input, button, select, textarea {
    font-family: var(--font-family);
}

/* ==========================================================================
   표준 공통 단일 라인 폼 요소 (Single-line Form Controls)
   - 사용자 지침: 높이 2.35rem, r값 0.35rem, 보더 컬러 #cbd5e1 통일
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
.frm_input {
    height: 2.35rem;
    line-height: 2.35rem;
    padding: 0 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    font-size: 0.81rem;
    color: #0f172a;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
.frm_input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

h1,
h2,
h3 {
    font-weight: 700;
    color: var(--text-main);
    margin-top: 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

/* Mobile Navigation */
.layout-sidebar.active {
    display: block;
    width: 80%;
    max-width: 18.75rem;
    box-shadow: 6.25rem 0 0 rgba(0, 0, 0, 0.5);
    /* Fake backdrop */
}

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 var(--space-4);
    position: sticky;
    top: 0;
    z-index: 40;
}

h3 {
    font-size: 1.25rem;
}

p {
    color: var(--text-sub);
}

/* ==========================================================================
   KOLIVE Unified Core Component System (표준 컴포넌트 단일 소스)
   ========================================================================== */

/* 1. 단일 표준 메인 컨테이너 (1080px = 67.5rem) */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
    box-sizing: border-box;
}

.kol-container {
    width: 100%;
    max-width: var(--container-width);
    margin: 1.5rem auto;
    box-sizing: border-box;
}

/* 2. 표준 통합 히어로 카드 */
.kol-hero-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kol-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.kol-hero-info {
    flex: 1;
}
.kol-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.25rem 0.63rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    margin-bottom: 0.5rem;
}

.kol-hero-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a; /* 묻히지 않는 고대비 진한 슬레이트 네이비 */
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kol-hero-desc {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
}

/* 표준 통합 헤더 검색창 (모든 섹션 메인 & 게시판 리스트 공통) */
.kol-hero-search-form {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin: 0;
    flex-shrink: 0;
}
.kol-hero-search-input {
    height: 2.35rem;
    padding: 0 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.35rem;
    font-size: 0.81rem;
    width: 14rem;
    outline: none;
    background: #ffffff;
    color: #0f172a;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.kol-hero-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.kol-hero-search-btn {
    height: 2.35rem;
    padding: 0 1.13rem;
    border: none;
    border-radius: 0.35rem;
    background: #2563eb; /* 사용자 지시: 프라이머리 컬러 */
    color: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.kol-hero-search-btn:hover {
    background: #1d4ed8;
}

/* 헤더 우측 액션 버튼 및 그룹 */
.kol-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.kol-btn-debate-write {
    height: 2.35rem;
    padding: 0 1rem;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    background: #2563eb;
    color: #ffffff;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.kol-btn-debate-write:hover {
    background: #1d4ed8;
    color: #ffffff;
    text-decoration: none;
}
.kol-clean-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* 3. 표준 통합 탭 네비게이션 (1차 대분류 - 메인 & 게시판 공통) */
.kol-hero-nav, .kol-header-main-nav, .ds-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.kol-hero-tab, .kol-nav-item, .ds-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.35rem;
    text-decoration: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.kol-hero-tab:hover, .kol-nav-item:hover, .ds-tab-item:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
    text-decoration: none;
}

.kol-hero-tab.active, .kol-nav-item.active, .ds-tab-item.active {
    background: var(--primary, #2563eb);
    color: #ffffff;
    border-color: var(--primary, #2563eb);
    font-weight: 700;
}

/* 4. 표준 통합 서브 카테고리 칩 바 (2차 중분류 / 3차 소분류)
   - 하위 분류로 갈수록 게시물과 가까워지므로 채도/명도를 더 진하게 강화 */
.kol-header-sub-nav, .ds-sub-tab-nav, .ds-chip-group, .law-sub-tabs, .law-chips-list, .comm-cat-subtabs-row, .comm-sub-filter-row, .comm-cat-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
    width: 100%;
    clear: both;
    list-style: none;
    padding-left: 0;
}

.kol-sub-chip, .ds-sub-item, .comm-cat-tab-btn, .comm-sub-filter-btn, .ds-chip-item, .law-sub-chip, .law-chip-item, .law-nav-chip, .kol-clean-chip, .comm-cat-chips li a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: #1e293b; /* 상위 탭(#475569)보다 더 진한 텍스트 */
    background: #ffffff;
    border: 1px solid #cbd5e1; /* 상위 탭(#e2e8f0)보다 더 또렷한 보더 */
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.kol-sub-chip:hover, .ds-sub-item:hover, .comm-cat-tab-btn:hover, .comm-sub-filter-btn:hover, .ds-chip-item:hover, .law-sub-chip:hover, .law-chip-item:hover, .law-nav-chip:hover, .kol-clean-chip:hover, .comm-cat-chips li a:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
    text-decoration: none;
}

.kol-sub-chip.active, .ds-sub-item.active, .comm-cat-tab-btn.active, .comm-sub-filter-btn.active, .ds-chip-item.active, .law-sub-chip.active, .law-sub-chip.active-parent, .law-chip-item.active, .law-nav-chip.active, .kol-clean-chip.active, .comm-cat-chips li a#bo_cate_on {
    background: #1d4ed8 !important; /* 상위 탭(#2563eb)보다 더 딥하고 진한 프라이머리 */
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    font-weight: 700;
}

.kol-sub-chip.active span, .ds-sub-item.active span, .ds-chip-item.active span, .law-sub-chip.active span, .law-sub-chip.active-parent span {
    color: #ffffff !important;
}

/* 관리자(is_admin) 로그인 시 칩 내 카운트 표시 스타일 */
.tab-cnt, .chip-cnt, .tab-sub-cnt, .sub-filter-cnt {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
}
.kol-sub-chip.active .chip-cnt, .ds-sub-item.active .chip-cnt, .ds-chip-item.active .chip-cnt {
    color: #ffffff;
    opacity: 0.95;
}

.kol-sub-chip.compact {
    padding: 0.25rem 0.63rem;
    font-size: 0.75rem;
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}
.kol-sub-chip.compact.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

/* ==========================================================================
   7대 섹션별 특화 테마 컬러 (Theme Classes)
   ========================================================================== */

/* 1) 생활법률 (Theme Law) */
.theme-law {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    border-color: #bfdbfe !important;
}
.theme-law .kol-hero-badge {
    background: #dbeafe !important;
    color: var(--sec-law-primary, #1e3a8a) !important;
}
.theme-law .kol-hero-title {
    color: var(--sec-law-primary, #1e3a8a) !important;
}
.theme-law .kol-hero-tab.active {
    background: var(--sec-law-primary, #1e3a8a) !important;
    border-color: var(--sec-law-primary, #1e3a8a) !important;
}

/* 2) 지역 O2O (Theme O2O) */
.theme-o2o {
    background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%) !important;
    border-color: #99f6e4 !important;
}
.theme-o2o .kol-hero-badge {
    background: #ccfbf1 !important;
    color: var(--sec-o2o-primary, #0d9488) !important;
}
.theme-o2o .kol-hero-title {
    color: var(--sec-o2o-primary, #0d9488) !important;
}
.theme-o2o .kol-hero-tab.active {
    background: var(--sec-o2o-primary, #0d9488) !important;
    border-color: var(--sec-o2o-primary, #0d9488) !important;
}

/* 3) 오리지널 컨텐츠 (Theme Contents) */
.theme-contents {
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%) !important;
    border-color: #e9d5ff !important;
}
.theme-contents .kol-hero-badge {
    background: #f3e8ff !important;
    color: var(--sec-contents-primary, #7c3aed) !important;
}
.theme-contents .kol-hero-title {
    color: var(--sec-contents-primary, #7c3aed) !important;
}
.theme-contents .kol-hero-tab.active {
    background: var(--sec-contents-primary, #7c3aed) !important;
    border-color: var(--sec-contents-primary, #7c3aed) !important;
}

/* 4) 쇼핑/마켓 (Theme Shop) */
.theme-shop {
    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%) !important;
    border-color: #ddd6fe !important;
}
.theme-shop .kol-hero-badge {
    background: #ede9fe !important;
    color: var(--sec-shop-primary, #4f46e5) !important;
}
.theme-shop .kol-hero-title {
    color: var(--sec-shop-primary, #4f46e5) !important;
}
.theme-shop .kol-hero-tab.active {
    background: var(--sec-shop-primary, #4f46e5) !important;
    border-color: var(--sec-shop-primary, #4f46e5) !important;
}

/* 5) 집 & 부동산 (Theme Estate) */
.theme-estate {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
    border-color: #fde68a !important;
}
.theme-estate .kol-hero-badge {
    background: #fef3c7 !important;
    color: var(--sec-estate-primary, #78350f) !important;
}
.theme-estate .kol-hero-title {
    color: var(--sec-estate-primary, #78350f) !important;
}
.theme-estate .kol-hero-tab.active {
    background: var(--sec-estate-primary, #78350f) !important;
    border-color: var(--sec-estate-primary, #78350f) !important;
}

/* 6) 구인구직 & 커리어 (Theme Career) */
.theme-career {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
    border-color: #bae6fd !important;
}
.theme-career .kol-hero-badge {
    background: #e0f2fe !important;
    color: var(--sec-career-primary, #0284c7) !important;
}
.theme-career .kol-hero-title {
    color: var(--sec-career-primary, #0284c7) !important;
}
.theme-career .kol-hero-tab.active {
    background: var(--sec-career-primary, #0284c7) !important;
    border-color: var(--sec-career-primary, #0284c7) !important;
}

/* 7) 지역정보 (Theme Local) */
.theme-local {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border-color: #bbf7d0 !important;
}
.theme-local .kol-hero-badge {
    background: #dcfce7 !important;
    color: var(--sec-local-primary, #047857) !important;
}
.theme-local .kol-hero-title {
    color: var(--sec-local-primary, #047857) !important;
}
.theme-local .kol-hero-tab.active {
    background: var(--sec-local-primary, #047857) !important;
    border-color: var(--sec-local-primary, #047857) !important;
}

/* Components */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.btn {
    display: inline-flex;
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-secondary {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-sub);
}

/* Layout */
.wrapper {
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
    padding-top: 2rem;
}

.layout-sidebar {
    width: var(--sidebar-width);
    border-right: 1px solid var(--border);
    position: fixed;
    height: 100vh;
    display: none;
    /* Mobile default */
}

@media (min-width: 64rem) {
    .layout-sidebar {
        display: block;
    }

    .layout-main {
        margin-left: var(--sidebar-width);
    }
}

/* PayPal 결제 아이콘 */
.paypal_icon {
    background: #ffc439;
    color: #003087;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

.paypal_icon:hover {
    background: #f0b429;
}

/* Utilities (Tailwind-like) */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

@media (min-width: 48rem) {

    /* md */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {

    /* lg */
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.p-4 {
    padding: 1rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-12 {
    margin-bottom: 3rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.items-end {
    align-items: flex-end;
}

.gap-2 {
    gap: 0.5rem;
}

.text-center {
    text-align: center;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.font-bold {
    font-weight: 700;
}

.text-gray-500 {
    color: #64748B;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.aspect-ratio-16\/9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-square {
    aspect-ratio: 1 / 1;
}

.hover-lift {
    transition: transform 0.2s;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-outline {
    border: 1px solid var(--border);
    color: var(--text-sub);
}

/* Header Styles (Naver-style) */
/* .kol-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
} */

.kol-header-top {
    height: 4rem;
    display: flex;
    align-items: center;
}

.kol-header-top.section-mode {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.kol-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-main);
    text-decoration: none;
}

.service-switcher {
    position: relative;
}

.service-switcher .divider {
    color: var(--border);
    font-size: 0.75rem;
}

.service-dropdown-layer {
    position: absolute;
    top: 100%;
    left: 0;
    width: 18.75rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none;
    margin-top: 0.5rem;
}

.service-dropdown-layer.active {
    display: block;
}

.sch-input-wrap {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid var(--primary);
    border-radius: 9999px;
    padding: 0 1rem;
    width: 25rem;
}

.sch-input-wrap input {
    border: none;
    background: transparent;
    padding: 0.5rem 0;
    width: 100%;
    font-weight: 500;
    outline: none;
}

.sch-input-wrap button {
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-size: 1.125rem;
}

.kol-header-gnb {
    border-top: 1px solid #f1f5f9;
    height: 3rem;
    display: flex;
    align-items: center;
}

.kol-gnb-item {
    padding: 0 1rem;
}

.kol-gnb-link {
    font-weight: 700;
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.9375rem;
}

.kol-gnb-link:hover {
    color: var(--primary);
}

.btn-all-services-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-sub);
}

.all-services-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: none;
}

.all-services-overlay.active {
    display: block;
}

.overlay-content {
    position: absolute;
    top: 4rem;
    right: 2rem;
    width: 20rem;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.service-mega-grid h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.service-mega-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-mega-grid li {
    margin-bottom: 0.25rem;
}

.service-mega-grid a {
    text-decoration: none;
    color: var(--text-sub);
    font-size: 0.875rem;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ==========================================================================
   [코라이브] 표준 토론광장형 통합 헤더 (Unified Section Header)
   ========================================================================== */
.ds-header-box,
header.ds-header-box,
.kol-header-unified,
header.kol-header-unified {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05);
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    position: relative;
}

.ds-header-top,
.kol-header-top,
.ds-header-box .ds-header-top,
.kol-header-unified .kol-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.13rem;
    /* border-bottom: 1px solid #f1f5f9; */
    /* margin-bottom: 1.13rem; */
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    height: auto;
    background: transparent;
}

.ds-header-top > div:first-child,
.kol-header-top > div:first-child,
.ds-header-top .header-title-area,
.kol-header-top .header-title-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 20rem;
    min-width: 16rem;
}

.header-title-area .ds-badge-top,
.header-title-area .kol-badge-top {
    margin: 0 0 0.25rem 0;
}

.header-title-area .ds-title,
.header-title-area .kol-header-title {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.header-title-area .ds-subtitle,
.header-title-area .kol-header-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* 헤더 타이틀 우측 반응형 광고 배너 영역 */
.header-banner-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 32rem;
    flex: 1 1 20rem;
}
.header-banner-area:empty {
    display: none;
}
.header-banner-area .kol-ad-banner,
.header-banner-area .ad-zone,
.header-banner-area img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}
@media (max-width: 768px) {
    .header-banner-area {
        max-width: 100%;
        justify-content: center;
        width: 100%;
    }
}

.ds-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: #e0e7ff;
    color: #4338ca;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.63rem;
}

.ds-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.63rem 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.63rem;
    flex-wrap: wrap;
}

.ds-title .total-count-pill {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 0.19rem 0.63rem;
    border-radius: 1.25rem;
}

.ds-subtitle {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    display: block;
}

/* 헤더 검색 폼 */
.ds-search-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.ds-search-input {
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 0.56rem 1rem;
    font-size: 0.84rem;
    width: 13.75rem;
    max-width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
    background: #ffffff;
    height: 2.5rem;
    box-sizing: border-box;
}

.ds-search-input:focus {
    border-color: #4338ca;
}

.ds-search-btn {
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0 1.13rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    height: 2.5rem;
    box-sizing: border-box;
}

.ds-search-btn:hover {
    background: #4338ca;
}

/* 글로벌 헤더 상단 우측 콤팩트 광고 배너 */
.header-compact-ad-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.88rem;
    max-width: 28.75rem;
    flex: 0 1 28.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: auto;
}
.header-compact-ad-box .compact-ad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.69rem;
}
.header-compact-ad-box .compact-ad-tag {
    color: #64748b;
    font-weight: 600;
}
.header-compact-ad-box .compact-ad-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
}
.header-compact-ad-box .compact-ad-body {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    text-decoration: none;
    color: inherit;
}
.header-compact-ad-box .compact-ad-icon {
    width: 2rem;
    height: 2rem;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.81rem;
    flex-shrink: 0;
}
.header-compact-ad-box .compact-ad-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.header-compact-ad-box .compact-ad-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-compact-ad-box .compact-ad-desc {
    font-size: 0.69rem;
    color: #64748b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 1뎁스 / 대분류 탭 네비게이션 */
.ds-tab-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.38rem;
    margin-bottom: 0;
    width: 100%;
    clear: both;
}

/* Legacy ds-tab-item / ds-sub-item unified into standard tokens above */
/*
.ds-tab-item { ... }
.ds-sub-item { ... }
*/

/* ==========================================================================
   [쇼핑몰] 모던 프리미엄 상품 상세페이지 UI (Shop Product Detail)
   ========================================================================== */
.shop-item-container {
    max-width: 75rem;
    margin: 1.88rem auto 5rem;
    padding: 0 1.25rem;
}

#sit_ov_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
    margin-bottom: 3.13rem;
}

@media (max-width: 900px) {
    #sit_ov_wrap {
        grid-template-columns: 1fr;
        gap: 1.88rem;
        padding: 1.5rem;
    }
}

#sit_pvi {
    width: 100%;
}

#sit_pvi_big {
    position: relative;
    border-radius: 1.13rem;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sit_pvi_big img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

#sit_pvi_thumb {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    list-style: none;
    padding: 0;
}

#sit_pvi_thumb li img {
    width: 4rem;
    height: 4rem;
    border-radius: 0.63rem;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

#sit_pvi_thumb li img:hover {
    border-color: #0284c7;
    transform: translateY(-2px);
}

#sit_ov {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sit_title {
    font-size: 1.63rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
}

#sit_desc {
    font-size: 0.91rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

#sit_star_sns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1.25rem;
}

.sit_ov_tbl {
    width: 100%;
    margin-bottom: 1.5rem;
}

.sit_ov_tbl tr th {
    font-size: 0.84rem;
    color: #64748b;
    padding: 0.63rem 0;
    text-align: left;
    width: 6.25rem;
}

.sit_ov_tbl tr td {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 600;
    padding: 0.63rem 0;
}

.sit_ov_tbl tr td strong {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0284c7;
}

#sit_ov_btn {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

#sit_btn_buy {
    flex: 2;
    background: #0f172a;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem 0;
    border-radius: 0.88rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

#sit_btn_buy:hover {
    background: #0284c7;
}

#sit_btn_cart {
    flex: 1;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
    padding: 1rem 0;
    border-radius: 0.88rem;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
}

#sit_btn_cart:hover {
    background: #e2e8f0;
}

/* 탭 네비게이션 */
.shop-item-tabs {
    display: flex;
    border-bottom: 2px solid #0f172a;
    margin-bottom: 2.5rem;
    gap: 0.5rem;
}

.shop-item-tabs a {
    padding: 0.88rem 1.75rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: #64748b;
    text-decoration: none;
    border-radius: 0.75rem 0.75rem 0 0;
    transition: all 0.2s ease;
}

.shop-item-tabs a.active,
.shop-item-tabs a:hover {
    background: #0f172a;
    color: #ffffff;
}

/* ==========================================================================
   [Kolive UI Core] Global Toast Notification Component
   ========================================================================== */
.kol-toast-container {
    position: fixed;
    bottom: 2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.kol-toast {
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    padding: 0.69rem 1.38rem;
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.63rem;
    pointer-events: auto;
    animation: kolToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    white-space: nowrap;
    max-width: 90vw;
}

.kol-toast i {
    font-size: 1.06rem;
    flex-shrink: 0;
}

.kol-toast.is-hiding {
    animation: kolToastOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes kolToastIn {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kolToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(0.5rem) scale(0.95);
    }
}

/* ==========================================================================
   KOLIVE Global Post View Action Bar (공통 뷰 하단 액션 & 댓글 상단 바)
   ========================================================================== */
.view-sns-share {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.btn-action-good {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.44rem 0.88rem;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: #e11d48;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-good:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

.btn-action-scrap {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.44rem 0.88rem;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: #b45309;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-scrap:hover {
    background: #fef3c7;
    border-color: #fde68a;
}

.btn-action-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.44rem 0.88rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-action-copy:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-sns-fb {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.44rem 0.88rem;
    background: #1877f2;
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}
.btn-sns-fb:hover {
    background: #166fe5;
}

.btn-sns-tw {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.44rem 0.88rem;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}
.btn-sns-tw:hover {
    background: #1e293b;
}

/* 댓글 상단 액션 바 (추천하기 & 열람취소) */
/* .view-cmt-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 0.75rem;
} */
.cmt-tab-active {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    position: relative;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid #2563eb;
}
.cmt-action-buttons {
    display: flex;
    gap: 0.63rem;
    align-items: center;
}
.btn-shoutout {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    padding: 0.5rem 1.13rem;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}
.btn-shoutout:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.btn-read-cancel {
    background: #fff;
    color: #ef4444;
    border: 1px solid #fca5a5;
    padding: 0.5rem 1rem;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    transition: all 0.15s ease;
}
.btn-read-cancel:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* ==========================================================================
   글로벌 게시판 본문 단락 및 토론 뷰 시맨틱 클래스 복원
   ========================================================================== */
.comm-para-block {
    font-size: 1rem;
    line-height: 1.8;
    color: #1e293b;
    margin-bottom: 1.25rem;
    word-break: break-word;
}

.debate-view-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 1.5rem;
}

.debate-plain-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #1e293b;
    min-height: 8rem;
    word-break: break-word;
}
.debate-plain-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* 사이드바 표준 광고 카드 */
.news-sidebar-ad {
    margin-bottom: 1.25rem;
}
.kol-sidebar-ad-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kol-sidebar-ad-card .ad-label {
    display: block;
    font-size: 0.69rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 0.38rem;
}
.kol-sidebar-ad-card .ad-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0.38rem 0;
}
.kol-sidebar-ad-card .ad-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}
.kol-sidebar-ad-card .kol-ads-link {
    font-size: 0.81rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}
.total-count-pill {
    font-size: 0.81rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
    margin-left: 0.5rem;
}

/* ==========================================================================
   KOLIVE Modern Tag Input & Keyword Autocomplete System
   ========================================================================== */
.kol-tag-field-group {
    position: relative;
}
.kol-tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.75rem;
    padding: 0.38rem 0.63rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.kol-tag-container:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.kol-tags-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    align-items: center;
}
.kol-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 0.2rem 0.5rem;
    border-radius: 0.38rem;
    font-size: 0.81rem;
    font-weight: 700;
}
.kol-tag-chip .btn-del-tag {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 0.13rem;
    transition: color 0.1s ease;
}
.kol-tag-chip .btn-del-tag:hover {
    color: #dc2626;
}
.kol-tag-inner-input {
    flex: 1;
    min-width: 6.5rem;
    border: none !important;
    outline: none !important;
    padding: 0.25rem !important;
    font-size: 0.88rem !important;
    color: #0f172a !important;
    background: transparent !important;
}
.kol-kw-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    margin-top: 0.25rem;
    max-height: 14rem;
    overflow-y: auto;
}
.kw-auto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.63rem 0.88rem;
    font-size: 0.84rem;
    color: #334155;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}
.kw-auto-item:last-child {
    border-bottom: none;
}
.kw-auto-item:hover {
    background: #f8fafc;
    color: #2563eb;
}
.kw-auto-item .kw-tag-badge {
    font-size: 0.69rem;
    font-weight: 700;
    background: #eff6ff;
    color: #2563eb;
    padding: 0.15rem 0.38rem;
    border-radius: 0.25rem;
}
.kol-kw-suggest-bar {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.suggest-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}
.suggest-chips {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.btn-suggest-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.38rem;
    cursor: pointer;
    transition: all 0.1s ease;
}
.btn-suggest-chip:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

/* 헤더 상단 통합 검색창 자동완성 드롭다운 */
.header-search-box {
    position: relative;
}
.head-search-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.63rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    margin-top: 0.38rem;
    overflow: hidden;
}
.head-auto-header {
    background: #f8fafc;
    padding: 0.5rem 0.88rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}
.head-auto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.63rem 0.88rem;
    font-size: 0.84rem;
    color: #1e293b;
    text-decoration: none;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s ease;
}
.head-auto-item:last-child {
    border-bottom: none;
}
.head-auto-item:hover {
    background: #eff6ff;
    color: #2563eb;
}
.head-auto-badge {
    font-size: 0.69rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    padding: 0.15rem 0.38rem;
    border-radius: 0.25rem;
}
.head-auto-item:hover .head-auto-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ==========================================================================
   KOLIVE Universal Design System Components (버튼, 테이블, 폼, 배지 공용화)
   ========================================================================== */

/* 1. Universal Buttons (공용 버튼) */
.kol-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 0.38rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.kol-btn-primary {
    background: #2563eb;
    color: #ffffff !important;
    border-color: #2563eb;
}
.kol-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}
.kol-btn-secondary {
    background: #475569;
    color: #ffffff !important;
    border-color: #475569;
}
.kol-btn-secondary:hover {
    background: #334155;
    border-color: #334155;
}
.kol-btn-outline {
    background: #ffffff;
    color: #334155 !important;
    border-color: #cbd5e1;
}
.kol-btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a !important;
}
.kol-btn-danger {
    background: #dc2626;
    color: #ffffff !important;
    border-color: #dc2626;
}
.kol-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}
.kol-btn-success {
    background: #16a34a;
    color: #ffffff !important;
    border-color: #16a34a;
}
.kol-btn-success:hover {
    background: #15803d;
    border-color: #15803d;
}
.kol-btn-sm {
    padding: 0.31rem 0.63rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}
.kol-btn-lg {
    padding: 0.69rem 1.38rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

/* 2. Universal Table System (공용 테이블) */
.kol-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}
.kol-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.kol-table th {
    background: #f8fafc;
    padding: 0.88rem 1rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.kol-table td {
    padding: 0.88rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.kol-table tbody tr:hover td {
    background: #f8fafc;
}
.kol-table tbody tr:last-child td {
    border-bottom: none;
}
.kol-td-num {
    text-align: center;
    color: #64748b;
    font-size: 0.81rem;
    width: 4rem;
}
.kol-td-chk {
    text-align: center;
    width: 2.5rem;
}
.kol-td-date {
    text-align: center;
    color: #64748b;
    font-size: 0.81rem;
    white-space: nowrap;
    width: 6rem;
}
.kol-td-center {
    text-align: center;
}
.kol-table .post-title-link {
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.1s ease;
}
.kol-table .post-title-link:hover {
    color: #2563eb;
}
.kol-table .post-cate-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    padding: 0.15rem 0.44rem;
    border-radius: 0.25rem;
    margin-right: 0.38rem;
    text-decoration: none;
}

/* 3. Universal Toolbar & Search (공용 툴바 및 검색) */
.kol-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.kol-toolbar-info {
    font-size: 0.88rem;
    color: #475569;
}
.kol-toolbar-info strong {
    color: #0f172a;
    font-weight: 800;
}
.kol-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kol-search-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.kol-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.kol-search-input {
    border: none !important;
    outline: none !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.81rem !important;
    color: #0f172a !important;
    background: transparent !important;
    width: 13rem;
}
.kol-search-btn {
    border: none !important;
    background: #f8fafc !important;
    color: #475569 !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.81rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-left: 1px solid #e2e8f0 !important;
    transition: background 0.1s ease;
}
.kol-search-btn:hover {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* 4. Universal Form Elements (공용 폼 인풋) */
.kol-input, .kol-select, .kol-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    color: #0f172a;
    background: #ffffff;
    transition: all 0.15s ease;
}
.kol-input:focus, .kol-select:focus, .kol-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 5. Clean Header Card (특수 게시판용 클린 헤더) */
.kol-clean-header-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.kol-clean-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    padding: 0.25rem 0.63rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}
.kol-clean-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    display: flex;
    align-items: center;
    gap: 0.63rem;
}
.kol-clean-desc {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}
.kol-clean-nav {
    display: flex;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}
.kol-clean-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.38rem 0.75rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.kol-clean-chip:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
.kol-clean-chip.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    font-weight: 700;
}
.kol-clean-chip .chip-cnt {
    font-size: 0.72rem;
    opacity: 0.85;
}

/* ==========================================================================
   KOLIVE Unified Board View Action Bar & Buttons (모든 섹션 뷰페이지 단일 소스)
   ========================================================================== */
.view-sns-share {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    margin: 1.5rem 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}
.view-sns-share button,
.view-sns-share a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.5rem 0.94rem;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.view-sns-share button:hover,
.view-sns-share a:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
}
.view-sns-share .btn-action-good {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}
.view-sns-share .btn-action-good:hover {
    background: #fee2e2;
    border-color: #f87171;
}
.view-sns-share .btn-action-good .good-cnt {
    background: #ef4444;
    color: #ffffff;
    padding: 0.13rem 0.38rem;
    border-radius: 9999px;
    font-size: 0.69rem;
}
.view-sns-share .btn-action-scrap {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}
.view-sns-share .btn-action-scrap:hover {
    background: #fef3c7;
}
.view-sns-share .btn-sns-fb {
    background: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}
.view-sns-share .btn-sns-fb:hover {
    background: #166fe5;
    color: #ffffff;
}
.view-sns-share .btn-sns-tw {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.view-sns-share .btn-sns-tw:hover {
    background: #262626;
    color: #ffffff;
}

/* 뷰페이지 2단 사이드바 위젯 공용 스타일 */
.kol-side-widget-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.kol-side-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.88rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.kol-side-widget-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}
.kol-side-widget-more {
    font-size: 0.75rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
}
.kol-side-widget-more:hover {
    color: #2563eb;
}
.kol-side-popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kol-side-popular-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.44rem 0;
    border-bottom: 1px solid #f8fafc;
}
.kol-side-popular-item:last-child {
    border-bottom: none;
}
.popular-rank-num {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.69rem;
    font-weight: 800;
    border-radius: 0.25rem;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}
.popular-rank-num.top1 {
    background: #ef4444;
    color: #ffffff;
}
.popular-rank-num.top2 {
    background: #f97316;
    color: #ffffff;
}
.popular-rank-num.top3 {
    background: #f59e0b;
    color: #ffffff;
}
.kol-popular-link {
    font-size: 0.81rem;
    color: #334155;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.kol-popular-link:hover {
    color: #2563eb;
}
.kol-pop-cmt-cnt {
    color: #ef4444;
    font-size: 0.69rem;
    font-weight: 700;
    margin-left: 0.25rem;
}
.kol-side-ad-widget {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}
.kol-side-ad-badge {
    display: inline-block;
    padding: 0.19rem 0.5rem;
    font-size: 0.63rem;
    font-weight: 800;
    background: #2563eb;
    color: #ffffff;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}
.kol-side-ad-title {
    margin: 0 0 0.38rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: #1e3a8a;
}
.kol-side-ad-desc {
    margin: 0 0 0.88rem;
    font-size: 0.75rem;
    color: #3b82f6;
    line-height: 1.5;
}
.kol-side-ad-btn {
    display: inline-block;
    padding: 0.38rem 0.88rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.38rem;
    text-decoration: none;
    transition: background 0.15s;
}
.kol-side-ad-btn:hover {
    background: #1d4ed8;
    color: #ffffff;
}
.kol-side-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}
.kol-side-tag-chip {
    padding: 0.25rem 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.38rem;
    font-size: 0.75rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s;
}
/* ==========================================================================
   글쓰기 폼 (Write Form) 표준 통일 디자인 시스템
   ========================================================================== */
.kol-write-container {
    max-width: 67.5rem;
    margin: 2rem auto 5rem auto;
    padding: 0 1rem;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    box-sizing: border-box;
}

.kol-write-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 0.63rem 1.88rem rgba(0, 0, 0, 0.04);
    padding: 2.5rem;
    box-sizing: border-box;
}

.kol-write-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.kol-write-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.63rem;
}

.kol-write-title i {
    color: #0284c7;
}

.kol-write-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
}

.kol-write-group {
    margin-bottom: 1.5rem;
}

.kol-form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
}

.kol-required-dot {
    color: #ef4444;
}

.kol-write-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    background: #f8fafc;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}

.kol-write-cat-group {
    flex: 1;
    min-width: 15rem;
    margin-bottom: 0;
}

.kol-write-opt-group {
    flex: 1;
    min-width: 17.5rem;
    margin-bottom: 0;
}

.kol-select-pair {
    display: flex;
    gap: 0.75rem;
}

.kol-select-pair select {
    flex: 1;
}

.kol-form-select, .kol-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    font-size: 0.91rem;
    color: #0f172a;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.kol-form-select:focus, .kol-form-input:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 0.19rem rgba(2, 132, 199, 0.15);
}

.kol-subject-input {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.88rem 1.13rem;
    border-radius: 0.63rem;
}

.kol-subject-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.kol-btn-autosave {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    padding: 0.25rem 0.63rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s;
}

.kol-btn-autosave:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.kol-autosave-popup {
    display: none;
    position: absolute;
    top: 1.88rem;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 0.63rem 1.56rem rgba(0,0,0,0.1);
    padding: 1rem;
    z-index: 100;
    width: 17.5rem;
}

.kol-checkbox-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 2.88rem;
    flex-wrap: wrap;
}

.kol-checkbox-bar label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.kol-checkbox-bar input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.kol-editor-box {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
}

.kol-editor-box textarea {
    width: 100%;
    min-height: 23.75rem;
    padding: 1rem;
    border: none;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.7;
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
}

.kol-editor-box textarea:focus {
    outline: none;
}

.kol-char-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.38rem;
}

.kol-char-count {
    text-align: right;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.38rem;
}

.kol-links-card, .kol-files-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-sizing: border-box;
}

.kol-link-row, .kol-file-row {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    margin-bottom: 0.63rem;
}

.kol-link-row:last-child, .kol-file-row:last-child {
    margin-bottom: 0;
}

.kol-link-icon {
    font-weight: 700;
    color: #64748b;
    font-size: 0.81rem;
    width: 1.5rem;
}

.kol-file-del-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.78rem;
    color: #ef4444;
}

.kol-write-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.kol-btn-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.63rem;
    border-radius: 0.5rem;
    font-size: 0.91rem;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    text-decoration: none;
    transition: all 0.2s;
}

.kol-btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.kol-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-size: 0.94rem;
    font-weight: 700;
    color: #ffffff;
    background: #0284c7;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.kol-btn-submit:hover {
    background: #0369a1;
    box-shadow: 0 0.25rem 0.75rem rgba(2, 132, 199, 0.25);
}

/* 글쓰기 모바일 반응형 */
@media (max-width: 768px) {
    .kol-write-container {
        margin: 1rem auto 3rem auto;
        padding: 0 0.63rem;
    }
    .kol-write-card {
        padding: 1.25rem 0.88rem;
    }
    .kol-write-header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.88rem;
    }
    .kol-write-title {
        font-size: 1.25rem;
    }
    .kol-write-meta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.88rem;
        padding: 0.88rem;
    }
    .kol-write-cat-group,
    .kol-write-opt-group {
        min-width: 100%;
        width: 100%;
    }
    .kol-select-pair {
        flex-direction: column;
        gap: 0.5rem;
    }
    .kol-write-bottom-bar {
        flex-direction: column-reverse;
        gap: 0.63rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    .kol-btn-submit,
    .kol-btn-cancel {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .kol-file-input {
        max-width: 100%;
    }
}

/* ==========================================================================
   게시판 목록 상단 표준 통일 툴바 (Top Toolbar)
   ========================================================================== */
.comm-board-top-toolbar,
.board-toolbar.comm-toolbar-unified,
.news-toolbar-wrap,
.law-toolbar-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
}

.comm-board-top-toolbar .toolbar-left,
.board-toolbar .comm-toolbar-left,
.news-toolbar-wrap .news-total-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #475569;
}

.comm-board-top-toolbar .toolbar-total-cnt strong,
.board-toolbar .comm-total-cnt strong,
.news-toolbar-wrap .news-total-count strong {
    color: #0284c7;
    font-weight: 800;
}

.comm-board-top-toolbar .toolbar-page-subtext,
.board-toolbar .comm-page-subtext {
    font-size: 0.81rem;
    color: #94a3b8;
    margin-left: 0.25rem;
}

.comm-board-top-toolbar .toolbar-right,
.board-toolbar .comm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    margin-left: auto;
}

/* 툴바 보기 모드 토글 (웹진 1열 vs 타일 4열) */
.comm-board-top-toolbar .toolbar-view-mode,
.news-toolbar-wrap .news-view-mode-toggle,
.law-toolbar-wrap .law-view-mode-toggle {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    padding: 0.19rem;
    border-radius: 0.5rem;
    gap: 0.19rem;
}

.comm-board-top-toolbar .toolbar-mode-btn,
.news-toolbar-wrap .news-mode-btn,
.law-toolbar-wrap .law-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.38rem;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.comm-board-top-toolbar .toolbar-mode-btn.active,
.news-toolbar-wrap .news-mode-btn.active,
.law-toolbar-wrap .law-mode-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 툴바 글쓰기 / 등록 버튼 통일 */
.comm-board-top-toolbar .toolbar-btn-write,
.board-toolbar .kol-btn-write-unified {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    height: 2.35rem;
    padding: 0 1rem;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 0.35rem;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.comm-board-top-toolbar .toolbar-btn-write:hover,
.board-toolbar .kol-btn-write-unified:hover {
    background: #0369a1;
    color: #ffffff;
}

/* ==========================================================================
   게시판 목록 하단 표준 통일 툴바, 버튼군, 페이징, 검색폼
   ========================================================================== */

/* 1. 하단 툴바 및 유틸리티 버튼 그룹 (패딩/보더/보더r 제거 플랫화) */
.comm-list-bottom-toolbar,
.kol-list-bottom-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 0.75rem;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* 관리자 액션 버튼군 (선택삭제, 선택복사, 선택이동) */
.comm-bottom-admin-btns,
.kol-bottom-admin-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-btn-adm-action,
.kol-btn-adm-action {
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    padding: 0.44rem 0.88rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
}

.comm-btn-adm-action:hover,
.kol-btn-adm-action:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.comm-btn-adm-action.del,
.kol-btn-adm-action.del {
    color: #dc2626;
    border-color: #fecaca;
    background: #fff5f5;
}

.comm-btn-adm-action.del:hover,
.kol-btn-adm-action.del:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #f87171;
}

/* 사용자 액션 버튼군 (목록, 글쓰기, 관리자 등) */
.comm-bottom-user-btns,
.kol-bottom-user-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.comm-btn-user-action,
.kol-btn-user-action {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.5rem 1.13rem;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
}

.comm-btn-user-action.list,
.kol-btn-user-action.list {
    background: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}

.comm-btn-user-action.list:hover,
.kol-btn-user-action.list:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.comm-btn-user-action.write,
.kol-btn-user-action.write {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.comm-btn-user-action.write:hover,
.kol-btn-user-action.write:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

.comm-btn-user-action.admin,
.kol-btn-user-action.admin {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
}

.comm-btn-user-action.admin:hover,
.kol-btn-user-action.admin:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* 2. 모던 프리미엄 페이징 네비게이션 (.pg_wrap 패딩/보더/보더r 제거 플랫화) */
.board-pagination-wrapper,
.board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    width: 100%;
}

.board-pagination-wrapper .pg_wrap,
.board-pagination .pg_wrap,
.pg_wrap {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
}

.board-pagination-wrapper .pg,
.board-pagination .pg,
.pg_wrap .pg {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.board-pagination-wrapper .pg_page,
.board-pagination-wrapper .pg_current,
.board-pagination .pg_page,
.board-pagination .pg_current,
.pg_wrap .pg_page,
.pg_wrap .pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.63rem;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
    line-height: 1;
}

.board-pagination-wrapper .pg_page,
.board-pagination .pg_page,
.pg_wrap .pg_page {
    color: #475569;
    background: transparent;
    border: 1px solid transparent;
}

.board-pagination-wrapper .pg_page:hover,
.board-pagination .pg_page:hover,
.pg_wrap .pg_page:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.board-pagination-wrapper .pg_current,
.board-pagination .pg_current,
.pg_wrap .pg_current {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 2px 0.25rem rgba(37,99,235,0.25);
}

.board-pagination-wrapper .pg_start,
.board-pagination-wrapper .pg_prev,
.board-pagination-wrapper .pg_next,
.board-pagination-wrapper .pg_end,
.board-pagination .pg_start,
.board-pagination .pg_prev,
.board-pagination .pg_next,
.board-pagination .pg_end,
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    color: #64748b;
    font-weight: 800;
    font-size: 0.75rem;
}

.board-pagination-wrapper .pg_start:hover,
.board-pagination-wrapper .pg_prev:hover,
.board-pagination-wrapper .pg_next:hover,
.board-pagination-wrapper .pg_end:hover,
.board-pagination .pg_start:hover,
.board-pagination .pg_prev:hover,
.board-pagination .pg_next:hover,
.board-pagination .pg_end:hover,
.pg_wrap .pg_start:hover,
.pg_wrap .pg_prev:hover,
.pg_wrap .pg_next:hover,
.pg_wrap .pg_end:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* 3. 게시판 하단 표준 통합 검색폼 */
.comm-bottom-search-wrap,
.kol-bottom-search-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0 2.5rem 0;
    width: 100%;
}

.comm-bottom-search-form,
.kol-bottom-search-form {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.25rem 0.38rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    box-sizing: border-box;
}

.comm-search-select,
.kol-search-select {
    border: none;
    background: transparent;
    font-size: 0.81rem;
    color: #475569;
    padding: 0.38rem 0.5rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

.comm-search-input-wrap,
.kol-search-input-wrap {
    display: inline-flex;
    align-items: center;
    border-left: 1px solid #e2e8f0;
    padding-left: 0.5rem;
    gap: 0.25rem;
}

.comm-search-input,
.kol-search-input {
    border: none;
    outline: none;
    padding: 0.38rem 0.5rem;
    font-size: 0.84rem;
    color: #0f172a;
    width: 15rem;
    background: transparent;
    font-family: inherit;
}

.comm-search-btn,
.kol-search-btn {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 0.38rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.84rem;
}

.comm-search-btn:hover,
.kol-search-btn:hover {
    background: #0284c7;
}

/* 하단 툴바 & 검색폼 모바일 반응형 */
@media (max-width: 768px) {
    .comm-list-bottom-toolbar,
    .kol-list-bottom-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .comm-bottom-admin-btns,
    .kol-bottom-admin-btns {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .comm-bottom-user-btns,
    .kol-bottom-user-btns {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    .comm-bottom-search-form,
    .kol-bottom-search-form {
        width: 100%;
        max-width: 100%;
    }
    .comm-search-input-wrap,
    .kol-search-input-wrap {
        flex: 1;
    }
    .comm-search-input,
    .kol-search-input {
        width: 100%;
        min-width: 0;
    }
}