@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@media (max-width: 768px) {
    .law-scenario-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   2. 공통 유틸리티 & 컴포넌트 복구 시스템 (Semantic Restored Rules)
   ========================================================================== */

/* --- [A. 통합 헤더 & 네비게이션 칩 공통] --- */
.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);
}
.kol-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;
}
.kol-header-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 0.63rem 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.63rem;
    flex-wrap: wrap;
}
.kol-header-subtitle {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
.total-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 9999px;
}
.kol-header-main-nav, .kol-header-sub-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}
/* .kol-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
} */
/* .kol-nav-item:hover, .kol-nav-item.active {
    background: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
    color: #ffffff;
}
.chip-cnt {
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: 500;
} */

/* --- [B. 컨테이너 래퍼 (design.md 표준 동기화)] --- */
.comm-main-container, .news-main-container, .donation-main-container,
.debate-container, .comm-container, .board-list-container, .news-container {
    width: var(--container-width, 67.5rem);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    box-sizing: border-box;
}

/* --- [C. 회원 인증 / 로그인 / 가입 폼 (Auth Card)] --- */
.auth-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.auth-card {
    width: 100%;
    max-width: 27.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 2.25rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
}
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-header-logo {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--primary, #2563eb);
    margin-bottom: 0.5rem;
}
.auth-header-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.35rem;
}
.auth-header-sub {
    font-size: 0.9rem;
    color: #64748b;
}
.auth-field {
    margin-bottom: 1.25rem;
}
.auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.4rem;
}
.auth-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    font-size: 0.95rem;
    color: #0f172a;
    box-sizing: border-box;
    transition: all 0.15s ease;
}
.auth-input:focus {
    background: #ffffff;
    border-color: var(--primary, #2563eb);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* --- [D. 토론광장 (Discussion) 전용 컴포넌트] --- */
.ds-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ds-card-ca-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary, #2563eb);
}
.ds-card-badge-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #475569;
}
.ds-card-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.ds-card-preview {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.ds-progress-wrap {
    background: #f1f5f9;
    border-radius: 9999px;
    height: 0.5rem;
    overflow: hidden;
    margin: 0.5rem 0;
}
.ds-vote-station-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
}
.ds-vote-station-guide {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}
.ds-vote-station-labels {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.ds-label-agree { color: #2563eb; }
.ds-label-disagree { color: #ef4444; }

/* --- [F. 커뮤니티 피드 & 위젯 컴포넌트] --- */
.kol-main-wrapper {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}
.kol-main-wrapper > * {
    width: 100%;
    box-sizing: border-box;
}
.comm-header-box, .donation-header-box {
    margin-bottom: 1.5rem;
}
.comm-section-wrap {
    margin-bottom: 2.5rem;
}
.comm-sugg-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.comm-sugg-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1rem;
}
.comm-avatar {
    width: 2.38rem;
    height: 2.38rem;
    border-radius: 50%;
    object-fit: cover;
}
.comm-time {
    font-size: 0.8rem;
    color: #94a3b8;
}
.comm-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
}
.comm-feed-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334155;
    margin: 0.5rem 0;
}
.comm-sec-header, .section-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.section-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.section-badge-main {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: #eff6ff;
    color: var(--primary, #2563eb);
}
.section-sec-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}
/* .kol-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s ease;
} */
.kol-sub-chip:hover, .kol-sub-chip.active {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
.comm-slim-ad, .news-slim-ad {
    /* margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    text-align: center; */
}
.view-vote-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2.5rem 0;
}

/* --- [G. 토론 투표 바 & VS 그리드 컴포넌트] --- */
.ds-header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ds-sec-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}
.ds-sec-empty, .ds-comments-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
}
.ds-card-vote-box {
    margin-top: 1rem;
}
.ds-card-vote-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.ds-card-vote-bar {
    height: 0.5rem;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
}
.ds-bar-agree, .ds-vote-station-bar-pro {
    background: #2563eb;
    height: 100%;
}
.ds-bar-disagree, .ds-vote-station-bar-con {
    background: #ef4444;
    height: 100%;
}
.debate-vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}
.debate-pro-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 1rem;
    padding: 1.5rem;
}
.debate-con-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 1rem;
    padding: 1.5rem;
}
.debate-cta-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    border-radius: 1rem;
    padding: 1.75rem;
    text-align: center;
    margin: 2rem 0;
}

/* --- [H. 뉴스 & 기사 부가 컴포넌트] --- */
.kol-header-search-form {
    display: flex;
    max-width: 22.5rem;
    margin: 1rem 0;
}
.kol-header-search-input {
    width: 100%;
    height: 2.63rem;
    padding: 0 1rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    font-size: 0.9rem;
    outline: none;
}
.news-headline {
    margin-bottom: 2rem;
}
.headline-image,
.headline-image .no-image, 
.news-placeholder-box {
    width: 100%;
    height: 100%;
    /* border-radius: 0.75rem; */
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
}
.news-tag-box {
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.news-tag-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.75rem;
}
.news-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.news-tag-item {
    font-size: 0.85rem;
    color: #2563eb;
    background: #eff6ff;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    text-decoration: none;
}
.news-pop-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.news-pop-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

/* --- [I. 회원가입/로그인 보조 컴포넌트] --- */
.auth-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
}
.auth-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
}
.auth-links-row {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.85rem;
    margin-top: 1.5rem;
}
.auth-link-bold {
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}
.auth-link-sub {
    color: #64748b;
    text-decoration: none;
}
.auth-ad-box {
    margin-top: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
}
/* --- [J. 공통 텍스트 유틸리티 & 광고 영역] --- */
.text-muted { color: #64748b !important; }
.text-sub { color: #94a3b8 !important; }
.text-sm { font-size: 0.85rem !important; }
.text-sky-600 { color: #0284c7 !important; }
.header-ad-zone-wrap, .discussion-top-ad, .donation-header-ad, .debate-list-ad {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    flex: 1;
}

/* 코라이브 네이티브 광고 슬롯 공통 스타일 (인라인 style 100% 분리) */
.kol-ad-img-banner { max-width: 100%; height: auto; display: block; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
.kol-ad-banner-dark { background: linear-gradient(135deg, #1e293b, #0f172a); color: #ffffff; border-radius: 0.5rem; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.kol-ad-badge-group { display: flex; gap: 0.38rem; align-items: center; margin-bottom: 0.38rem; }
.kol-ad-badge-sp { background: #2563eb; color: #ffffff; font-size: 0.69rem; padding: 0.13rem 0.38rem; border-radius: 0.25rem; font-weight: 700; }
.kol-ad-badge-net { background: #475569; color: #f8fafc; font-size: 0.69rem; padding: 0.13rem 0.38rem; border-radius: 0.25rem; }
.kol-ad-slot-name { font-size: 0.69rem; color: #94a3b8; }
.kol-ad-title { font-size: 0.94rem; font-weight: 700; color: #ffffff; margin-bottom: 0.25rem; }
.kol-ad-desc { font-size: 0.81rem; color: #cbd5e1; }
.kol-ad-btn-action { display: inline-block; background: #0284c7; color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.38rem; font-size: 0.81rem; font-weight: 700; text-decoration: none; white-space: nowrap; }

.comm-voting-btn {
    display: block !important;
    width: 100% !important;
    padding: 0.63rem 0 !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    text-align: center !important;
    margin-top: 0.88rem !important;
    transition: background 0.15s ease !important;
}
.comm-voting-btn:hover {
    background: #1d4ed8 !important;
}
.board-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin: 1.5rem 0; */
}
.ds-debate-progress-wrap {
    height: 0.38rem;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}
.ds-empty-state {
    padding: 4rem 1rem;
    text-align: center;
    color: #94a3b8;
}
.ds-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.debate-context-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.debate-comments-wrap {
    margin-top: 3rem;
}
.donation-section-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}
.donation-sec-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}
.donation-auth-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    background: #f0fdf4;
    color: #16a34a;
    border-radius: 9999px;
}
.headline-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.headline-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.headline-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
/* --- [K. 회원 페르소나 미니 레이어 팝업] --- */
.btn-persona-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 0.38rem;
    font-size: 0.69rem;
    margin-left: 0.31rem;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.15s ease;
    padding: 0;
}
.btn-persona-badge:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* 페르소나 모달 레이어 */
.persona-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(0.19rem);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}
.persona-modal-card {
    background: #ffffff;
    border-radius: 1rem;
    width: 100%;
    max-width: 23.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    animation: personaPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes personaPop {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.persona-modal-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    padding: 1.25rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.94rem;
    position: relative;
}
.persona-modal-header .persona-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    background: #ffffff;
    flex-shrink: 0;
}
.persona-modal-header .persona-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.persona-modal-header .persona-title-box {
    flex: 1;
}
.persona-modal-header .persona-nick {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
}
.persona-modal-header .persona-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 0.5rem;
    border-radius: 9999px;
    font-size: 0.69rem;
    font-weight: 600;
}
.persona-modal-close {
    position: absolute;
    top: 0.94rem;
    right: 0.94rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.13rem;
    cursor: pointer;
}
.persona-modal-body {
    padding: 1.25rem;
}
.persona-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.persona-item {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 0.63rem;
    padding: 0.63rem 0.75rem;
}
.persona-item.full-width {
    grid-column: span 2;
}
.persona-item-label {
    font-size: 0.69rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
}
.persona-item-val {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0f172a;
}

/* ==========================================================================
   [L. 순정형 깔끔한 타이포그래피 스타일 (인위적 카드/보더박스 전면 제거)]
   ========================================================================== */



/* ==========================================================================
   전역 모달 기본 숨김 및 오버레이 규칙 (FOUC 방지)
   ========================================================================== */
.kol-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.38rem);
}
.kol-modal-overlay.is-active {
    display: flex;
}

/* ==========================================================================
   Kolive Design System v2.0 (Theme: kolive_new)
   ========================================================================== */

/* [Single Source of Truth: :root is unified in design_system.css] */

/* Reset & Base */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    /* font-size: 0.94rem; */
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

* {
    box-sizing: border-box;
}

/* Utilities - Strict Container Grid Alignment (No) */
.container,
.kol-header-top .container,
.kol-header-gnb .container,
.kol-header-shortcuts .container,
.ad-top-container,
.portal-layout,
.kol-main-wrap,
.kol-footer .container {
    width: 100%;
    max-width: var(--container-width);
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* padding: var(--container-padding); */
    box-sizing: border-box;
    margin:0 auto;
    padding:0;
}

.portal-layout {
    display: flex;
    gap: 1.88rem;
    align-items: flex-start;
}

.main-content-area {
    flex: 1;
    min-width: 0;
}

/* Law Section Utilities & Clean Classes */
.law-view-container { max-width: var(--container-width); margin: 0 auto; padding: 1.56rem 0.94rem 3.75rem; font-family: var(--font-family); }
.law-header-banner { background: linear-gradient(135deg, #0f172a, #1e293b); padding: 1.88rem; border-radius: 1.25rem; color: #ffffff; margin-bottom: 1.56rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); position: relative; z-index: 2; }
.law-header-badge-wrap { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.law-header-badge { font-size: 0.75rem; font-weight: 800; background: #0284c7; color: #fff; padding: 0.25rem 0.75rem; border-radius: 0.75rem; display: inline-block; }
.law-date { font-size: 0.75rem; color: #94a3b8; }
.law-mapping-tag { font-size: 0.75rem; color: #38bdf8; background: rgba(56,189,248,0.15); padding: 0.19rem 0.63rem; border-radius: 0.38rem; font-weight: 700; }
.law-header-title { font-size: 1.38rem; font-weight: 900; line-height: 1.5; margin: 0 0 0.75rem; color: #ffffff; display: block; }
.law-header-meta { font-size: 0.81rem; color: #94a3b8; display: flex; gap: 0.94rem; align-items: center; }
.law-body-wrapper { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.25rem; padding: 1.88rem; margin-bottom: 1.56rem; color: #1e293b; line-height: 1.8; position: relative; z-index: 1; clear: both; }
.law-body-wrapper table { width: 100%; border-collapse: collapse; margin: 0.94rem 0; font-size: 0.88rem; }
.law-body-wrapper th, .law-body-wrapper td { border: 1px solid #cbd5e1; padding: 0.63rem 0.88rem; text-align: left; }
.law-body-wrapper th { background: #f1f5f9; font-weight: 700; color: #0f172a; }
.law-body-wrapper img { max-width: 100%; height: auto; display: block; margin: 0.94rem 0; border-radius: 0.5rem; }
.law-breadcrumb { font-size: 0.81rem; color: #64748b; margin-bottom: 1.25rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.law-breadcrumb a { color: #0284c7; font-weight: 700; text-decoration: none; }
.law-current-cat { font-weight: 700; color: #0f172a; }
.law-current-title { color: #94a3b8; }
.law-view-grid { display: grid; grid-template-columns: 1fr 18.75rem; gap: 1.56rem; align-items: start; }
.law-source-box { padding: 1.25rem 1.5rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.56rem; }
.law-source-text { font-size: 0.81rem; color: #0369a1; font-weight: 700; }
.law-source-btn { background: #0284c7; color: #ffffff; font-size: 0.81rem; font-weight: 800; padding: 0.63rem 1.13rem; border-radius: 0.63rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.38rem; }
.law-footer-nav { padding: 1.13rem 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.81rem; }
.law-back-btn { font-weight: 700; color: #0284c7; text-decoration: none; }
.law-home-btn { color: #64748b; text-decoration: none; }
.law-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.law-rel-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.law-rel-title { font-size: 0.88rem; font-weight: 800; color: #0f172a; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.38rem; }
.law-rel-item { display: block; padding: 0.63rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.81rem; font-weight: 600; color: #334155; text-decoration: none; line-height: 1.4; }
.law-info-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.law-info-title { font-size: 0.88rem; font-weight: 800; color: #0f172a; margin: 0 0 0.63rem; }
.law-info-list { font-size: 0.81rem; color: #475569; display: flex; flex-direction: column; gap: 0.38rem; }

/* Real Article Content Body Clean Styles (Clean 2 Style) */
.law-real-content-body { font-family: var(--font-family); color: #1e293b; line-height: 1.8; }
.law-main-title { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin: 1.5rem 0 0.88rem; padding-bottom: 0; border-bottom: none; display: block; }
.law-notice-card { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.88rem; padding: 1.25rem 1.5rem; margin: 1.25rem 0; color: #0369a1; font-size: 0.88rem; line-height: 1.7; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.law-summary-card { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 0.88rem; padding: 1.25rem 1.5rem; margin-bottom: 1.56rem; }
.law-summary-badge { font-size: 0.81rem; font-weight: 800; color: #0284c7; background: #e0f2fe; padding: 0.19rem 0.63rem; border-radius: 1.25rem; display: inline-block; }
.law-summary-title { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin: 0.63rem 0 0.38rem; }
.law-summary-path { font-size: 0.88rem; color: #475569; margin: 0; }
.law-section-h3 { font-size: 1.13rem; font-weight: 800; color: #0f172a; margin: 1.5rem 0 0.88rem; padding-bottom: 0; border-bottom: none; display: flex; align-items: center; gap: 0.5rem; }
.law-paragraph { font-size: 0.94rem; color: #334155; margin-bottom: 1rem; line-height: 1.8; }
.law-paragraph-sub { font-size: 0.88rem; color: #475569; margin: 0.5rem 0 0.75rem 1rem; line-height: 1.7; }
.law-box-card { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 0.88rem; padding: 1.38rem; margin: 1.25rem 0; box-shadow: 0 2px 6px rgba(0,0,0,0.02); }
.law-box-title { font-size: 1rem; font-weight: 800; color: #0284c7; margin: 0 0 0.88rem; display: flex; align-items: center; gap: 0.38rem; }
.law-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 0.63rem; border-radius: 0.5rem; overflow: hidden; }
.law-table th { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 0.75rem 1rem; text-align: left; color: #0f172a; font-weight: 700; }
.law-table td { border-bottom: 1px solid #f1f5f9; padding: 0.75rem 1rem; color: #475569; }

.btn-primary {
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background: var(--primary-light);
}

.btn-outline {
    background: white;
    color: var(--text-main);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    background: var(--bg-light);
}

.btn-ghost {
    background: transparent;
    color: var(--text-sub);
}

.btn-ghost:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

.btn-sm {
    font-size: 0.81rem;
    padding: 0.38rem 0.75rem;
}

/* Components: Header */
/* .kol-header {
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
} */

.kol-gnb-bar-top {
    height: 4rem;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

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

.kol-logo svg {
    border-radius: 0.38rem;
}

.kol-header-sch {
    flex: 1;
    max-width: 30rem;
    margin: 0 2.5rem;
}

.sch-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 1.5rem;
    padding: 2px 0.25rem;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.sch-input-wrap:focus-within {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1);
}

.sch-input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.63rem 1rem;
    font-size: 0.88rem;
    outline: none;
}

.sch-input-wrap button {
    background: var(--primary);
    color: #fff;
    border: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.sch-input-wrap button:hover {
    transform: scale(1.05);
}

.kol-header-actions .btn-all-services-icon {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.2s;
}

.kol-header-actions .btn-all-services-icon:hover {
    background: #f1f5f9;
    color: var(--primary);
}

/* Shortcuts Slim */
.kol-header-shortcuts-slim {
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.5rem 0;
}

.shortcut-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.81rem;
    color: var(--text-sub);
    font-weight: 500;
    white-space: nowrap;
}

.shortcut-item:hover {
    color: var(--primary);
}

.shortcut-item i {
    color: var(--accent);
    font-size: 0.88rem;
}

/* Components: Footer (Modern Full-Responsive Design) */
.kol-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 3.5rem 0 2rem;
    margin-top: 5rem;
    color: #334155;
    display: block;
    position: relative;
    z-index: 10;
}

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

.kol-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr;
    gap: 2.5rem;
    margin-bottom: 2.25rem;
}

.kol-footer-brand .kol-logo {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0284c7;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.kol-footer-brand .desc {
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.cs-contact-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.1rem;
}

.cs-contact-box .cs-tel-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0284c7;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cs-contact-box .cs-hours {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.kol-social {
    display: flex;
    gap: 0.6rem;
}

.kol-social a {
    width: 2.1rem;
    height: 2.1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.kol-social a:hover {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
    transform: translateY(-2px);
}

.kol-footer-links h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.kol-footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.kol-footer-links ul li a {
    font-size: 0.83rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.kol-footer-links ul li a:hover {
    color: #0284c7;
}

.kol-footer-links .policy-highlight {
    color: #0284c7 !important;
}

.footer-badge-cashback {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
}

/* 푸터 사업자 정보 영역 */
.kol-footer-company-info {
    border-top: 1px solid #e2e8f0;
    padding: 1.25rem 0;
    margin-bottom: 1rem;
}

.kol-footer-company-info .info-row {
    font-size: 0.77rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kol-footer-company-info .sep {
    color: #cbd5e1;
    margin: 0 0.5rem;
}

.kol-footer-company-info .info-notice {
    font-size: 0.73rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.kol-footer-bottom {
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #64748b;
}

.kol-footer-bottom .bottom-safe-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #059669;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .kol-footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
    .kol-footer-brand {
        grid-column: span 3;
        margin-bottom: 0.5rem;
    }
}

/* Page: Home (Dio Style) */
.home-hero {
    background-color: #F8FAFC;
    padding: 5rem 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
    margin-bottom: 3.75rem;
}

.home-hero h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #111;
    letter-spacing: -1px;
}

.home-hero p {
    font-size: 1.13rem;
    color: var(--text-sub);
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.section-title a {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 5rem;
}

.feature-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-img {
    height: 10rem;
    background: #eee;
}

.feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-body {
    padding: 1.25rem;
}

.feature-tag {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.feature-title {
    font-size: 1.13rem;
    margin-bottom: 0.5rem;
}

.feature-desc {
    font-size: 0.88rem;
    color: var(--text-sub);
    line-height: 1.5;
}

/* Feed Layout (Mixed) */
.feed-section {
    margin-bottom: 5rem;
}

.feed-layout {
    display: flex;
    gap: 2rem;
}

.feed-highlight {
    flex: 7;
}

.feed-sidebar {
    flex: 5;
}

/* Highlight Card */
.hl-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    color: white;
    height: 26.25rem;
    box-shadow: var(--shadow-md);
}

.hl-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.hl-card:hover .hl-img {
    transform: scale(1.05);
}

.hl-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 2rem;
}

.hl-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.hl-meta {
    font-size: 0.88rem;
    opacity: 0.9;
}

/* List Items */
.feed-list {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0;
}

.feed-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.feed-row:last-child {
    border-bottom: none;
}

.feed-row:hover {
    background: var(--bg-light);
}

.feed-row-rank {
    font-weight: 700;
    color: var(--accent);
    width: 1.5rem;
    font-size: 1rem;
    margin-right: 0.75rem;
}

.feed-row-title {
    flex: 1;
    font-size: 0.94rem;
    font-weight: 600;
}

.feed-row-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feed-layout {
        flex-direction: column;
    }

    .header-gnb {
        display: none;
    }

    /* Mobile Menu implementation needed later */

}

/* Utilities */
.sound_only {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    border: 0;
    overflow: hidden;
}

/* ==========================================================================
   Board Layout & Sidebar (Added for Subpages)
   ========================================================================== */

/* Subpage Layout Container */
#wrapper>.container {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    padding-top: 2.5rem;
    padding-bottom: 3.75rem;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Main Content Area */
#main_content {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
    background: #fff;
    padding: 1.88rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border);
}

/* Sidebar Styling */
#aside {
    width: 18.75rem;
    /* var(--sidebar-width) replacement */
    flex-shrink: 0;
    display: block;
}

.aside_widget {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.aside_title {
    font-size: 1.13rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

.aside_links li {
    margin-bottom: 0.63rem;
}

.aside_links a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    transition: all 0.2s;
    background: var(--bg-light);
}

.aside_links a:hover {
    background: var(--primary);
    color: white;
}

/* Board Table Styling (tbl_head01) */
.tbl_head01 {
    margin-bottom: 1.25rem;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tbl_head01 table {
    width: 100%;
    border-top: 2px solid var(--primary);
}

.tbl_head01 th {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
    color: var(--text-main);
    font-weight: 600;
    font-size: 1rem;
}

.tbl_head01 td {
    padding: 0.75rem 0;
    /* border-bottom: 1px solid #eee; */
    color: var(--text-sub);
    font-size: 1rem;
    /* text-align: center; */
}

.tbl_head01 td.td_subject {
    text-align: left;
}
.bo_cate_link{display: none;}
.tbl_head01 tr:hover td {
    background: #fafafa;
}

/* Responsive Board Layout */
@media (max-width: 1024px) {
    #wrapper>.container {
        flex-direction: column;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #wrapper {
        min-width: 0;
    }

    #aside {
        width: 100%;
        margin-top: 2.5rem;
    }

    /* Global Responsive Reset */
    .container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    #ft,
    #hd {
        min-width: 0;
        width: 100%;
    }

    #hd_wrapper,
    #gnb {
        min-width: 0;
        width: 100%;
    }

    .gnb_wrap {
        overflow-x: auto;
        white-space: nowrap;
    }

    #gnb ul {
        display: inline-block;
        white-space: nowrap;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #main_content {
        width: 100%;
        padding: 0;
    }

    .tbl_head01 {
        overflow-x: auto;
        display: block;
    }

    .frm_input {
        width: 100%;
        max-width: 100%;
    }
}

/* Page: Login (MB Skin) */
#mb_login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 37.5rem;
    padding: 2.5rem 0;
}

.mbskin_box {
    background: #fff;
    width: 100%;
    max-width: 26.25rem;
    padding: 2.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
}

.mbskin_box h1 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.88rem;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: -0.0.31rem;
}

.mb_log_cate {
    display: none; /* Clean up old UI */
}

#login_fs {
    border: none;
    padding: 0;
    margin: 0;
}

#login_fs .frm_input {
    width: 100%;
    height: 3.25rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.63rem;
    padding: 0 1rem;
    font-size: 0.94rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

#login_fs .frm_input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.05);
}

#login_fs .btn_submit {
    width: 100%;
    height: 3.25rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0.63rem;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.63rem;
    cursor: pointer;
    transition: all 0.2s;
}

#login_fs .btn_submit:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

#login_info {
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem;
    font-size: 0.81rem;
    color: var(--text-sub);
}

.social_login_wrap {
    margin-top: 1.88rem;
    padding-top: 1.88rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

/* Shop List Refinement */
#sct {
    padding: 1.25rem 0;
}

.sct_li {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid #f1f5f9;
}

.sct_li:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.sct_img {
    aspect-ratio: 1/1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sct_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sct_txt {
    padding: 1.25rem;
}

.sct_txt .sct_subject {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
}

.sct_cost {
    font-size: 1.13rem;
    font-weight: 800;
    color: var(--primary);
}

.sct_icon {
    display: flex;
    gap: 0.38rem;
    margin-top: 0.75rem;
}

.sct_icon img {
    height: 1rem;
}

@media (max-width: 1024px) {
    #sct { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    #sct { grid-template-columns: repeat(2, 1fr); }
}

/* All Services Overlay Grid Fix */
.service-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding: 2.5rem 0;
}

.mega-column h3 {
    font-size: 1.13rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    padding-bottom: 0.63rem;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

.mega-column ul li {
    margin-bottom: 0.94rem;
}

.mega-column .m-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #334155;
    display: block;
    margin-bottom: 0.5rem;
}

.mega-column .m-small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.mega-column .m-small a {
    font-size: 0.81rem;
    color: #64748b;
}

.mega-column .m-small a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Personalization UI Styles */
.personalization-box {
    background: #f8fbff;
    padding: 1.56rem;
    border-radius: 0.75rem;
    border: 1px solid #e1e8f0;
}
.personalization-box h3 {
    margin-bottom: 1.25rem;
    color: var(--primary);
    font-size: 1.13rem;
}
.personal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.88rem;
}
.slider-item {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    margin-bottom: 0.63rem;
}
.slider-item span {
    width: 5rem;
    font-size: 0.81rem;
    color: #555;
}
.slider-item input[type="range"] {
    flex: 1;
}
.slider-item output {
    width: 1.88rem;
    font-size: 0.81rem;
    font-weight: bold;
    color: var(--primary);
    text-align: right;
}
.lifestage-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

@media (max-width: 768px) {
    .personal-grid {
        grid-template-columns: 1fr;
    }
}

/* GNB Submenu Styles */
.kol-gnb-item {
    position: relative;
    height: 100%;
}
.gnb-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 13.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    border-top: 2px solid var(--primary);
    display: none;
    flex-direction: column;
    padding: 0.94rem 0;
    z-index: 1100;
}
.kol-gnb-item:hover .gnb-submenu {
    display: flex;
}
.gnb-sub-group {
    padding: 0.63rem 1.25rem;
    border-bottom: 1px solid #f9f9f9;
}
.gnb-sub-group:last-child {
    border-bottom: none;
}
.gnb-sub-group .sub-title {
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 0.31rem;
    font-size: 0.94rem;
}
.gnb-small-list {
    display: flex;
    flex-direction: column;
    padding-left: 0.63rem;
}
.gnb-small-list a {
    padding: 0.25rem 0;
    font-size: 0.81rem;
    color: #777;
}
.gnb-small-list a:hover {
    color: var(--primary);
    background: none;
}
.all-services-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(0.31rem);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.all-services-overlay.active {
    display: flex;
}
.overlay-content {
    background: #fff;
    width: 90%;
    max-width: var(--container-width);
    max-height: 85vh;
    border-radius: 1.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    animation: fadeInScale 0.3s ease-out;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.overlay-header {
    padding: 1.25rem 1.88rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.overlay-header h2 { font-size: 1.25rem; margin: 0; }
.btn-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; }
.overlay-body { padding: 1.88rem; overflow-y: auto; }

.service-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.88rem;
}
.mega-column h3 { font-size: 1rem; margin-bottom: 0.94rem; border-bottom: 2px solid var(--primary); padding-bottom: 0.31rem; }
.mega-column ul { list-style: none; padding: 0; }
.mega-column li { margin-bottom: 0.94rem; }
.m-title { font-weight: 700; color: #333; font-size: 0.88rem; display: block; margin-bottom: 0.31rem; }
.m-small { display: flex; flex-wrap: wrap; gap: 0.31rem 0.63rem; }
.m-small a { font-size: 0.75rem; color: #888; }
.m-small a:hover { color: var(--primary); }

/* Slim Shortcut Menu (Top Bar) */
.kol-header-shortcuts-slim {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 0;
}
.kol-header-shortcuts-slim .shortcut-scroll {
    display: flex;
    justify-content: center;
    gap: 1.56rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kol-header-shortcuts-slim .shortcut-scroll::-webkit-scrollbar { display: none; }
.kol-header-shortcuts-slim .shortcut-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #475569;
    font-size: 0.81rem;
    font-weight: 600;
    transition: 0.2s;
    white-space: nowrap;
}
.kol-header-shortcuts-slim .shortcut-item i {
    font-size: 0.88rem;
    color: var(--primary);
}
.kol-header-shortcuts-slim .shortcut-item:hover {
    color: var(--primary);
}

/* Removal of old bulky shortcut styles */
.kol-header-shortcuts.is-index, .kol-header-shortcuts.is-sub { display: none; }

/* Header Layout Clean CSS (No Inline Styles in PHP) */
/* .kol-header-clean {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.kol-header-container,
header.kol-header .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--container-padding);
    box-sizing: border-box;
}

 */
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.38rem;
    border-bottom: 1px solid #f1f5f9;
}

.kol-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.kol-logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0284c7;
    letter-spacing: -1px;
}

.header-search-box {
    flex: 1;
    max-width: 28.75rem;
    margin: 0 1.88rem;
}

.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.2rem 0.25rem 0.2rem 1.1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.search-input-wrap:focus-within {
    background: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.search-input-wrap .search-input,
.search-input-wrap input[type="text"].search-input,
.header-search-box input[type="text"]#head_search_input {
    flex: 1;
    width: 100%;
    height: 2.2rem !important;
    line-height: 2.2rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.88rem;
    color: #0f172a;
    outline: none !important;
}

.search-input-wrap .search-btn {
    flex-shrink: 0;
    border: none;
    background: #0284c7;
    color: #ffffff;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}

.search-input-wrap .search-btn:hover {
    background: #0369a1;
    transform: scale(1.04);
}

.search-shortcut-hint {
    display: inline-flex;
    align-items: center;
    font-size: 0.69rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    padding: 0.13rem 0.38rem;
    margin-right: 0.38rem;
    line-height: 1.2;
    pointer-events: none;
    font-family: inherit;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

@media (max-width: 960px) {
    .search-shortcut-hint {
        display: none !important;
    }
}

.header-user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-alarm-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-alarm {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    color: #475569;
    padding: 0.38rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-alarm:hover {
    background: #f1f5f9;
}

.alarm-badge-count {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 0.31rem;
    border-radius: 0.63rem;
    line-height: 1.2;
}

.alarm-dropdown-layer {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 20rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1500;
    overflow: hidden;
}

.alarm-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.alarm-dropdown-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.alarm-unread-pill {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.7rem;
    padding: 1px 0.38rem;
    border-radius: 0.63rem;
}

.alarm-readall-link {
    font-size: 0.75rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
}

.alarm-list-box {
    max-height: 17.5rem;
    overflow-y: auto;
}

.alarm-item-row {
    display: flex;
    align-items: flex-start;
    gap: 0.63rem;
    padding: 0.63rem 0.88rem;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.15s;
}

.alarm-item-row.is-unread {
    background: #f0f9ff;
}

.alarm-item-icon {
    width: 1.63rem;
    height: 1.63rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.alarm-item-row.is-unread .alarm-item-icon {
    background: #0284c7;
    color: #ffffff;
}

.alarm-item-body {
    flex: 1;
}

.alarm-item-text {
    margin: 0 0 2px 0;
    font-size: 0.8rem;
    color: #1e293b;
    line-height: 1.4;
}

.alarm-item-time {
    font-size: 0.7rem;
    color: #94a3b8;
}

.alarm-dropdown-footer {
    padding: 0.63rem 1rem;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.alarm-dropdown-footer a {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
}

.user-point-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    padding: 0.31rem 0.63rem;
    border-radius: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.header-user-point {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    padding: 0.25rem 0.63rem;
    border-radius: 0.75rem;
    text-decoration: none;
}

.user-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
}

.logout-link {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: none;
}

.user-sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.75rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.user-sns-link:hover {
    background: #2563eb;
    color: #fff;
}


.login-btn {
    padding: 0.44rem 1.25rem;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 1.25rem;
    text-decoration: none;
}

.header-gnb-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 3rem;
    position: relative;
    flex-wrap: nowrap;
    overflow: visible;
}

.gnb-menu-group {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.gnb-main-link {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0 0.88rem;
    height: 100%;
    font-size: 0.94rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
    border-bottom: 0.19rem solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.gnb-main-link:first-child{
    padding-left: 0;
}
.gnb-main-link i {
    display: none !important;
}

.gnb-menu-group:hover .gnb-main-link,
.gnb-main-link.active,
.active-gnb .gnb-main-link {
    color: #0284c7;
    border-bottom-color: #0284c7;
    font-weight: 800;
}

/* GNB 드롭다운 컴팩트 2컬럼 레이아웃 (overflow visible 상태에서 선명하게 팝업) */
.gnb-mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 16rem;
    max-width: 24rem;
    max-height: 28rem;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    padding: 0.75rem;
    z-index: 99999;
    grid-template-columns: repeat(2, minmax(7.5rem, 1fr));
    gap: 0.5rem;
}

.gnb-menu-group:hover .gnb-mega-dropdown {
    display: grid !important;
}

.sub-group-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0.65rem;
    border-radius: 0.375rem;
    background: #f8fafc;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sub-group-title:hover {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.sub-group-title:hover {
    background: #e0f2fe;
    color: #0284c7;
}

/* 쇼핑몰 상품 카드 그리드 레이아웃 */
#sct {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.25rem 0.94rem 3.75rem;
}

#sct .sct_ul, #sct ul.sct_ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    width: 100%;
}

#sct .sct_li {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.94rem;
}

#sct .sct_txt, #sct .sct_basic {
    word-break: keep-all;
    white-space: normal;
    writing-mode: horizontal-tb;
    font-size: 0.88rem;
    line-height: 1.4;
}

#sct .sct_img img {
    width: 100%;
    height: 11.25rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* 뉴스 서브 탭 CSS */
.news-sec-header {
    background: #f8fafc;
    border-radius: 1rem;
    padding: 1.56rem;
    margin-bottom: 1.56rem;
    border: 1px solid #e2e8f0;
}

.news-sub-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.94rem;
    padding-top: 0.94rem;
    border-top: 1px dashed #cbd5e1;
}

.sub-tab-item {
    padding: 0.38rem 1rem;
    border-radius: 1.25rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.sub-tab-item.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
}

@media (max-width: var(--container-width)) { .creator-list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .creator-list { grid-template-columns: repeat(2, 1fr); } } /* Mobile 2 per row */
/* Portal Breadcrumb & Common Header */
.portal-breadcrumb {
    background: #f1f5f9;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.81rem;
    color: #64748b;
}
.portal-breadcrumb .container { display: flex; align-items: center; gap: 0.63rem; }
.portal-breadcrumb a { color: #475569; text-decoration: none; font-weight: 500; }
.portal-breadcrumb a:hover { color: var(--primary); }

.k-life-header {
    padding: 3.75rem 0 2.5rem;
    text-align: center;
}
.k-life-header h1 { font-size: 2.5rem; font-weight: 900; color: #1e293b; margin-bottom: 0.94rem; }
.k-life-header h1 .sub-title { font-size: 1.1rem; color: var(--primary); font-weight: 700; display: block; margin-top: 0.31rem; }
.k-life-header p { font-size: 1.1rem; color: #64748b; }

/* Expert CTA Compact Style */
.expert-cta-compact {
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 1.25rem;
    padding: 1.56rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.5rem 0;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}
.expert-cta-compact .cta-text strong { display: block; font-size: 1.2rem; color: #1e293b; margin-bottom: 0.31rem; }
.expert-cta-compact .cta-text span { color: #64748b; font-size: 0.95rem; }
.expert-cta-compact .btn-expert-call {
    background: var(--primary);
    color: white;
    padding: 0.94rem 2.19rem;
    border-radius: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s;
}
.expert-cta-compact .btn-expert-call:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* Open Market (Shop) Layout System */
.shop-hero-banner {
    background: #1e293b;
    height: 25rem;
    border-radius: 1.5rem;
    margin-bottom: 3.13rem;
    display: flex;
    align-items: center;
    padding: 0 3.75rem;
    color: white;
    position: relative;
    overflow: hidden;
}
.shop-hero-content { z-index: 2; max-width: 31.25rem; }
.shop-hero-content h2 { font-size: 3rem; font-weight: 900; margin-bottom: 1.25rem; line-height: 1.1; }
.shop-hero-content p { font-size: 1.2rem; opacity: 0.8; margin-bottom: 1.88rem; }

.shop-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.88rem;
}
.shop-section-title h3 { font-size: 1.8rem; font-weight: 800; color: #1e293b; }
.shop-section-title a { color: #94a3b8; text-decoration: none; font-weight: 600; }

.market-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.market-item-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
    transition: 0.3s;
}
.market-item-card:hover { transform: translateY(-8px); box-shadow: 0 20px 30px rgba(0,0,0,0.08); border-color: var(--primary); }
.market-item-thumb { aspect-ratio: 1/1; background: #f8fafc; overflow: hidden; position: relative; }
.market-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.market-item-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: #ef4444; color: white; padding: 0.25rem 0.63rem; border-radius: 0.38rem; font-size: 0.69rem; font-weight: 800; }

.market-item-info { padding: 1.25rem; }
.market-item-name { font-size: 1rem; font-weight: 700; color: #334155; margin-bottom: 0.75rem; height: 2.8rem; overflow: hidden; line-height: 1.4; }
.market-item-price-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.market-item-price { font-size: 1.4rem; font-weight: 900; color: #111; }
.market-item-cust { font-size: 0.9rem; color: #94a3b8; text-decoration: line-through; }

.market-item-meta { margin-top: 0.94rem; padding-top: 0.94rem; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; font-size: 0.75rem; }
.badge-shipping { color: #10b981; font-weight: 800; }
.badge-rating { color: #f59e0b; font-weight: 800; }

@media (max-width: var(--container-width)) { .market-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .market-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shop Layout Critical Fix - Center All Shop Pages */
#container .shop-content,
#container .shop-main,
#container .shop-item,
#container .shop-list {
    max-width: 67.5rem;
    margin: 0 auto;
    float: none;
    padding: 2.5rem 0;
}
#container_wr { margin-left: 0; } /* Remove any left-skewing margins */

#idx_hit, .sct_wrap {
    margin: 0 auto;
    width: 100%;
}
.sct {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Ensure subpages don't have conflicting margins */
#container {
    width: 100%;
    max-width: 67.5rem;
    float: none;
    margin: 0 auto;
}

/* K-Life & News Board Custom Styling */
.k-life-filter-wrap { margin-bottom: 1.88rem; display: flex; justify-content: center; gap: 0.75rem; overflow-x: auto; padding: 0.63rem 0; }
.k-life-filter-item { text-decoration: none; padding: 0.63rem 1.38rem; border-radius: 0.75rem; background: #f1f5f9; color: #64748b; font-weight: 700; font-size: 0.9rem; white-space: nowrap; transition: 0.2s; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 0.5rem; }
.k-life-filter-item.active { background: #111; color: #fff; border-color: #111; }
.k-life-filter-item:hover { background: #e2e8f0; }

.expert-cta-banner { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 1.25rem; padding: 1.56rem; margin-bottom: 2.5rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid #bae6fd; }
.expert-cta-icon-box { width: 3.44rem; height: 3.44rem; background: #fff; border-radius: 1.13rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #0ea5e9; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1); }
.expert-cta-content h4 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0369a1; }
.expert-cta-content p { margin: 0.31rem 0 0; color: #0ea5e9; font-size: 0.95rem; font-weight: 600; }
.expert-cta-btn { background: #1e293b; color: #fff; text-decoration: none; padding: 0.88rem 1.75rem; border-radius: 0.75rem; font-weight: 800; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: 0.2s; }
.expert-cta-btn:hover { background: #0f172a; transform: translateY(-2px); }

/* Category Specific Colors (Classes instead of inline styles) */
.k-life-filter-item.cat-realestate.active { background: #0ea5e9; border-color: #0ea5e9; }
.k-life-filter-item.cat-tax.active { background: #10b981; border-color: #10b981; }
.k-life-filter-item.cat-labor.active { background: #6366f1; border-color: #6366f1; }
.k-life-filter-item.cat-civil.active { background: #f59e0b; border-color: #f59e0b; }
.k-life-filter-item.cat-criminal.active { background: #ef4444; border-color: #ef4444; }

/* Flex Alignment & Vertical Text Overlap Prevention */
.shortcut-item,
.kol-logo,
.service-switcher,
.user-action-wrap,
.btn,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    writing-mode: horizontal-tb;
}

/* Service Dropdown Active State */
.service-dropdown-layer.active {
    display: block;
}

/* Slim Shortcut Menu Fix */
.kol-header-shortcuts-slim {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    height: 2.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.shortcut-scroll {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    overflow-x: auto;
    white-space: nowrap;
    height: 2.75rem;
    scrollbar-width: none;
}

.shortcut-scroll::-webkit-scrollbar {
    display: none;
}

.shortcut-item {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.81rem;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
    line-height: 2.75rem;
    height: 2.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.shortcut-item i {
    font-size: 0.88rem;
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.shortcut-item .label {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}

.donation-center-wrap .card,
.market-card,
.feature-card {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Kolive Global Layout & Component Design Classes
   ========================================================================== */
.kol-main-wrap {
    /* max-width: 67.5rem; */
    /* margin: 0 auto; */
    padding: 1.25rem 0 5rem;
}

.kol-grid-2col-main {
    display: grid;
    grid-template-columns: 1fr 21.25rem;
    gap: 2.19rem;
}

.kol-card-hero {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 2.19rem;
}

.kol-sidebar-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 1.56rem;
    margin-bottom: 1.88rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.kol-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kol-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f8fafc;
    writing-mode: horizontal-tb;
}

.kol-rank-item .nick {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 700;
    white-space: nowrap;
}

.kol-rank-item .sub {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}

.kol-badge-tag {
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    padding: 0.19rem 0.63rem;
    border-radius: 0.38rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.kol-ticker-bar {
    background: #0f172a;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1.56rem;
    display: flex;
    align-items: center;
    gap: 0.94rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Fallback Utility Classes with Responsive Media Query Support */
.aspect-video { aspect-ratio: 16 / 9; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.kol-grid-2col-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.56rem;
}

@media (min-width: 769px) {
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); display: grid; }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
    .gap-5 { gap: 1.25rem; }
    .gap-6 { gap: 1.5rem; }
}

/* 모바일 (48rem 이하) 유연 1열 반응형 레이아웃 (no) */
@media (max-width: 768px) {
    div.kol-grid-2col-main,
    div.grid-cols-2,
    div.grid-cols-3,
    div.grid-cols-4 {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        width: 100%;
    }
    
    div.kol-grid-2col-main > div,
    div.kol-grid-2col-main > aside,
    div.grid-cols-2 > div,
    div.grid-cols-4 > div {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body, h1, h2, h3, h4, p, a, span, div {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

/* Ad Banner Clean CSS Classes (No Inline Styles & Strict Specificity) */
/* div.kol-ad-box {
    margin: 1.25rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    width: 100%;
    box-sizing: border-box;
} */

div.kol-ad-box div.kol-ad-header {
    background: #f8fafc;
    padding: 0.63rem 1.13rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.69rem;
    font-weight: 800;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.kol-ad-box a.kol-ad-header-link {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 700;
}

div.kol-ad-box a.kol-ad-content-link {
    display: flex;
    gap: 1.25rem;
    padding: 1.13rem 1.25rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

div.kol-ad-box div.kol-ad-icon-box {
    width: 3.25rem;
    height: 3.25rem;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.38rem;
    flex-shrink: 0;
}

div.kol-ad-box h4.kol-ad-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
    line-height: 1.35;
}

div.kol-ad-box p.kol-ad-desc {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

div.kol-ad-box img.kol-ad-thumb {
    width: 8.13rem;
    height: 5rem;
    border-radius: 0.75rem;
    object-fit: cover;
    flex-shrink: 0;
}

div.kol-ad-box span.kol-ad-btn-text {
    font-size: 0.85rem;
    color: #2563eb;
    font-weight: 700;
}

/* Strict 67.5rem Layout Container Rules for All Sub Pages & Boards */
#wrapper,
#container,
#bo_list,
#bo_v,
#bo_w {
    max-width: 67.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Vanilla CSS Utility System (Tailwind 대체 - 테마 공통 유틸리티)
   ========================================================================== */

/* --- Layout: Flex --- */
.kol-flex { display: flex;     flex-flow: column;}
.kol-flex { flex-flow: inherit;}
.kol-flex-col { display: flex; flex-direction: column; }
.kol-flex-wrap { display: flex; flex-wrap: wrap; }
.kol-flex-center { display: flex; align-items: center; justify-content: center; }
.kol-flex-between { display: flex; justify-content: space-between; align-items: center; }
.kol-items-center { align-items: center; }
.kol-justify-between { justify-content: space-between; }
.kol-flex-1 { flex: 1; }
.kol-shrink-0 { flex-shrink: 0; }
.kol-gap-2 { gap: 0.5rem; }
.kol-gap-3 { gap: 0.75rem; }
.kol-gap-4 { gap: 1rem; }
.kol-gap-5 { gap: 1.25rem; }
.kol-gap-6 { gap: 1.5rem; }

/* --- Layout: Grid --- */
.kol-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.kol-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kol-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.kol-grid-main-side { display: grid; grid-template-columns: 1fr 18.75rem; gap: 1.75rem; align-items: start; }

/* --- Spacing --- */
.kol-mb-2 { margin-bottom: 0.5rem; }
.kol-mb-3 { margin-bottom: 0.75rem; }
.kol-mb-4 { margin-bottom: 1rem; }
.kol-mb-6 { margin-bottom: 1.5rem; }
.kol-mb-8 { margin-bottom: 2rem; }
.kol-mb-10 { margin-bottom: 2.5rem; }
.kol-mt-4 { margin-top: 1rem; }
.kol-mt-6 { margin-top: 1.5rem; }
.kol-p-4 { padding: 1rem; }
.kol-p-5 { padding: 1.25rem; }
.kol-p-6 { padding: 1.5rem; }
.kol-p-8 { padding: 2rem; }
.kol-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.kol-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.kol-py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.kol-py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* --- Typography --- */
.kol-text-xs { font-size: 0.75rem; }
.kol-text-sm { font-size: 0.81rem; }
.kol-text-base { font-size: 0.94rem; }
.kol-text-lg { font-size: 1.13rem; }
.kol-text-xl { font-size: 1.25rem; }
.kol-text-2xl { font-size: 1.5rem; }
.kol-text-3xl { font-size: 1.88rem; }
.kol-font-bold { font-weight: 700; }
.kol-font-black { font-weight: 900; }
.kol-leading-relaxed { line-height: 1.625; }
.kol-overflow-hidden { overflow: hidden; }
.kol-whitespace-nowrap { white-space: nowrap; }
.kol-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kol-text-center { text-align: center; }

/* --- Colors: Text --- */
.kol-text-white { color: #ffffff; }
.kol-text-primary { color: var(--accent); }
.kol-text-muted { color: var(--text-muted); }
.kol-text-sub { color: var(--text-sub); }
.kol-text-dark { color: var(--text-main); }
.kol-text-green { color: #059669; }
.kol-text-red { color: #dc2626; }
.kol-text-blue { color: #2563eb; }
.kol-text-slate { color: #64748b; }
.kol-text-yellow { color: #d97706; }

/* --- Colors: Background --- */
.kol-bg-white { background: #ffffff; }
.kol-bg-light { background: var(--bg-light); }
.kol-bg-blue-light { background: #eff6ff; }
.kol-bg-green { background: #059669; }
.kol-bg-green-dark { background: #065f46; }
.kol-bg-slate-light { background: #f8fafc; }
.kol-bg-gradient-blue { background: linear-gradient(135deg, #1e3a5f, #0284c7); }
.kol-bg-gradient-green { background: linear-gradient(135deg, #065f46, #0d9488); }
.kol-bg-gradient-dark { background: linear-gradient(135deg, #0f172a, #1e293b); }

/* --- Border & Radius --- */
.kol-border { border: 1px solid var(--border); }
.kol-border-t { border-top: 1px solid var(--border); }
.kol-rounded { border-radius: var(--radius-md); }
.kol-rounded-lg { border-radius: var(--radius-lg); }
.kol-rounded-xl { border-radius: var(--radius-xl); }
.kol-rounded-2xl { border-radius: 1.25rem; }
.kol-rounded-3xl { border-radius: 1.5rem; }
.kol-rounded-full { border-radius: 9999px; }

/* --- Shadows --- */
.kol-shadow-sm { box-shadow: var(--shadow-sm); }
.kol-shadow { box-shadow: var(--shadow-md); }
.kol-shadow-lg { box-shadow: var(--shadow-lg); }

/* --- Width & Height --- */
.kol-w-full { width: 100%; }
.kol-h-full { height: 100%; }
.kol-w-10 { width: 2.5rem; }
.kol-h-10 { height: 2.5rem; }
.kol-min-w-0 { min-width: 0; }
.kol-block { display: block; }
.kol-inline-block { display: inline-block; }
.kol-hidden { display: none; }

/* --- Community Section Specific --- */
.comm-header-banner {
    background: linear-gradient(135deg, #065f46, #0d9488);
    border-radius: 1.5rem;
    padding: 2rem;
    color: #ffffff;
    margin-bottom: 2rem;
    box-shadow: 0 8px 24px rgba(6,95,70,0.2);
}
.comm-header-banner h1 { font-size: 1.75rem; font-weight: 900; margin: 0 0 0.5rem; }
.comm-header-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #a7f3d0;
    font-size: 0.69rem; font-weight: 800;
    padding: 0.25rem 0.75rem; border-radius: 0.38rem;
    margin-bottom: 0.75rem;
}
.comm-header-desc { font-size: 0.88rem; color: #a7f3d0; margin: 0; }
.comm-write-btn {
    display: inline-block;
    background: #ffffff;
    color: #065f46;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.comm-write-btn:hover { background: #f0fdf4; }

.comm-section-title {
    font-size: 1.13rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 1rem;
    padding-left: 0.88rem;
    border-left: 0.25rem solid #059669;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.comm-section-title a { font-size: 0.75rem; font-weight: 700; color: #059669; margin-left: auto; }

.comm-hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.comm-hot-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.13rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.comm-hot-card:hover { border-color: #059669; box-shadow: 0 4px 12px rgba(5,150,105,0.1); }
.comm-hot-cat { font-size: 0.69rem; font-weight: 800; color: #059669; display: block; margin-bottom: 0.38rem; }
.comm-hot-title { font-size: 0.81rem; font-weight: 800; color: var(--text-main); height: 2.5rem; overflow: hidden; margin-bottom: 0.75rem; line-height: 1.5; }
.comm-hot-meta { font-size: 0.69rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.comm-hot-likes { color: #dc2626; font-weight: 700; }

.comm-main-grid { display: grid; grid-template-columns: 1fr 18.75rem; gap: 1.75rem; align-items: start; }

.comm-feed-list { display: flex; flex-direction: column; gap: 1rem; }
.comm-feed-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Global Profile Image Safe Style */
.profile_img,
img.profile_img {
    max-width: 100% !important;
    height: auto;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.comm-feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.88rem; }
.comm-feed-avatar {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: #f1f5f9;
    color: #ffffff;
    font-weight: 900; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.comm-feed-avatar img,
.comm-feed-avatar .profile_img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.comm-author { font-size: 0.88rem; font-weight: 800; color: #0f172a; display: block; }
.comm-time { font-size: 0.69rem; color: #64748b; }
.comm-tag { font-size: 0.75rem; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.2rem 0.5rem; border-radius: 0.38rem; }

.comm-feed-content { font-size: 0.88rem; color: #334155; line-height: 1.6; margin-bottom: 0.88rem; }
.comm-feed-link { color: inherit; text-decoration: none; display: block; }
.comm-feed-title { color: #0f172a; font-size: 1rem; font-weight: 800; display: block; margin-bottom: 0.38rem; }
.comm-feed-desc { color: #64748b; font-size: 0.84rem; display: block; line-height: 1.5; }
.comm-feed-footer { display: flex; gap: 1.25rem; font-size: 0.75rem; font-weight: 700; color: #64748b; border-top: 1px solid #f1f5f9; padding-top: 0.75rem; }
.comm-icon-like { color: #f43f5e; }
.comm-icon-comment { color: #2563eb; }
.comm-icon-eye { color: #64748b; }

.comm-sidebar-box {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.comm-sidebar-title { font-size: 0.94rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.comm-sidebar-trophy { color: #f59e0b; }

.comm-rank-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.comm-rank-item { display: flex; justify-content: space-between; align-items: center; padding: 0.63rem 0; border-bottom: 1px solid #f1f5f9; }
.comm-rank-item:last-child { border-bottom: none; }
.comm-rank-left { display: flex; align-items: center; gap: 0.63rem; }
.comm-rank-num { font-size: 0.81rem; font-weight: 800; color: #2563eb; width: 1.25rem; text-align: center; }
.comm-rank-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}
.comm-rank-avatar img,
.comm-rank-avatar .profile_img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.comm-rank-info { display: flex; flex-direction: column; }
.comm-rank-nick { font-size: 0.81rem; font-weight: 800; color: #0f172a; }
.comm-rank-role { font-size: 0.69rem; color: #64748b; }
.comm-rank-badge { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; font-size: 0.69rem; font-weight: 700; padding: 0.19rem 0.5rem; border-radius: 0.38rem; }

/* 신설 투표 진행중 위젯 */
.comm-voting-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.comm-voting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.63rem;
}
.comm-voting-badge {
    font-size: 0.69rem;
    font-weight: 800;
    background: #eff6ff;
    color: #2563eb;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}
.comm-voting-dday {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 700;
}
.comm-voting-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    line-height: 1.4;
}
.comm-voting-desc {
    font-size: 0.81rem;
    color: #64748b;
    margin: 0 0 0.88rem 0;
    line-height: 1.5;
}
.comm-voting-bar-wrap {
    margin-bottom: 0.88rem;
}
.comm-voting-rates {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.38rem;
}
.comm-voting-rates .agree { color: #059669; }
.comm-voting-rates .disagree { color: #dc2626; }
.comm-voting-progress {
    height: 0.5rem;
    border-radius: 9999px;
    background: #fee2e2;
    display: flex;
    overflow: hidden;
}
.comm-voting-progress .agree-bar {
    background: #059669;
    height: 100%;
}
.comm-voting-progress .disagree-bar {
    background: #dc2626;
    height: 100%;
}
.comm-voting-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.81rem;
    padding: 0.56rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.comm-voting-btn:hover { background: #1d4ed8; }

.comm-info-box { background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 0.75rem; padding: 1.25rem; }
.comm-info-title { font-size: 0.88rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; }
.comm-info-desc { font-size: 0.78rem; color: #64748b; line-height: 1.5; margin-bottom: 0.88rem; }
.comm-guide-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.81rem;
    padding: 0.56rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s;
}
.comm-guide-btn:hover { background: #334155; }

/* 커뮤니티 모달 오버레이 */
.comm-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.comm-modal-overlay.is-active {
    display: flex !important;
}
.comm-modal-dialog {
    background: #ffffff;
    border-radius: 1rem;
    max-width: 32rem;
    width: 90%;
    padding: 1.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
}
.comm-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
}
.comm-modal-title {
    font-size: 1.13rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}
.comm-modal-desc {
    font-size: 0.81rem;
    color: #64748b;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}
.comm-modal-field {
    margin-bottom: 1rem;
}
.comm-modal-label {
    display: block;
    font-size: 0.81rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.38rem;
}
.comm-modal-input,
.comm-modal-textarea {
    width: 100%;
    padding: 0.63rem 0.88rem;
    font-size: 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.comm-modal-textarea {
    height: 6rem;
    resize: vertical;
}
.comm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.comm-modal-btn-cancel {
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}
.comm-modal-btn-submit {
    padding: 0.5rem 1.25rem;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 700;
    cursor: pointer;
}

/* --- News Section Specific --- */
.kol-ticker-bar {
    display: flex;
    align-items: center;
    gap: 0.88rem;
    background: linear-gradient(90deg, #1e3a5f, #0284c7);
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.kol-ticker-bar .ticker-badge {
    background: #dc2626;
    color: #ffffff;
    font-size: 0.69rem; font-weight: 900;
    padding: 0.19rem 0.63rem; border-radius: 0.38rem;
    flex-shrink: 0;
}
.kol-ticker-text { flex: 1; overflow: hidden; white-space: nowrap; font-size: 0.88rem; font-weight: 600; }
.kol-ticker-text a { color: #ffffff; }
.kol-ticker-time { font-size: 0.75rem; color: rgba(255,255,255,0.7); flex-shrink: 0; }

/* --- Kol Section Header --- */
.kol-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.13rem;
}
.kol-section-title {
    font-size: 1.13rem;
    font-weight: 900;
    color: var(--text-main);
    padding-left: 0.88rem;
    border-left: 0.25rem solid var(--accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kol-section-more { font-size: 0.75rem; font-weight: 700; color: var(--accent); }

/* --- Badge tag --- */
.kol-badge-tag {
    display: inline-block;
    background: var(--bg-light);
    color: var(--text-sub);
    font-size: 0.69rem; font-weight: 700;
    padding: 0.19rem 0.63rem; border-radius: 0.38rem;
}

/* group.php 게시판 그룹 스타일 */
.kol-group-wrap {
    max-width: var(--container-width);
    margin: 2rem auto;
    padding: 0 1.25rem;
}
.kol-group-header {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    color: #ffffff;
    margin-bottom: 1.75rem;
}
.kol-group-header h1 { font-size: 1.38rem; font-weight: 900; margin: 0 0 0.38rem; }
.kol-group-header p { font-size: 0.88rem; color: #94a3b8; margin: 0; }
.kol-group-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kol-group-board-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.kol-group-board-card h3 { font-size: 0.94rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.75rem; padding-bottom: 0.63rem; border-bottom: 1px solid var(--border); }
.kol-group-latest-item { display: block; padding: 0.44rem 0; border-bottom: 1px solid #f8fafc; font-size: 0.81rem; color: var(--text-sub); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kol-group-latest-item:hover { color: var(--accent); }
.kol-group-latest-item:last-child { border-bottom: none; }

/* Responsive: Tailwind 대체 반응형 */
@media (max-width: 1024px) {
    .comm-hot-grid { grid-template-columns: repeat(2, 1fr); }
    .comm-main-grid { grid-template-columns: 1fr; }
    .kol-grid-main-side { grid-template-columns: 1fr; }
    .kol-grid-2 { grid-template-columns: 1fr; }
    .kol-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .kol-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .kol-group-boards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .comm-hot-grid { grid-template-columns: 1fr; }
    .kol-grid-3 { grid-template-columns: 1fr; }
    .kol-grid-4 { grid-template-columns: 1fr; }
    .kol-group-boards { grid-template-columns: 1fr; }
    .comm-header-banner { padding: 1.5rem 1.25rem; }
    .comm-header-banner h1 { font-size: 1.38rem; }
}

/* ==========================================================================
   News Section & Common Components (Vanilla CSS)
   ========================================================================== */

/* Tab Bar */
.kol-tab-bar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.kol-tab-item {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--bg-light);
    color: var(--text-sub);
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.kol-tab-item:hover { background: #e2e8f0; color: var(--text-main); }
.kol-tab-active { background: #4f46e5; color: #ffffff; }
.kol-tab-active:hover { background: #4338ca; color: #ffffff; }

/* Card Hero (News Main) */
.kol-card-hero {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.news-hero-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.news-hero-img { width: 100%; height: 100%; object-fit: cover; }
.news-hero-badge {
    position: absolute;
    bottom: 1rem; left: 1rem;
    background: #dc2626; color: #ffffff;
    font-size: 0.75rem; font-weight: 700;
    padding: 0.25rem 0.75rem; border-radius: 0.38rem;
}
.news-hero-title { font-size: 1.38rem; font-weight: 900; color: var(--text-main); line-height: 1.4; margin-bottom: 0.75rem; }
.news-hero-desc { font-size: 0.81rem; color: var(--text-sub); line-height: 1.7; height: 3rem; overflow: hidden; margin-bottom: 1rem; }
.news-hero-meta { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; display: flex; gap: 1rem; }

/* News Section Cards */
.news-section-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem;
}
.news-section-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid #f1f5f9; }
.news-section-card-name { font-size: 0.94rem; font-weight: 900; color: var(--text-main); }
.news-section-more { font-size: 0.75rem; font-weight: 700; color: #4f46e5; text-decoration: none; }
.news-section-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.news-section-item { padding: 0.5rem 0; border-bottom: 1px dashed #f1f5f9; }
.news-section-item:last-child { border-bottom: none; }
.news-section-item a { font-size: 0.81rem; font-weight: 600; color: var(--text-sub); text-decoration: none; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color 0.2s; }
.news-section-item a:hover { color: #4f46e5; }

/* Sidebar Common */
.kol-sidebar-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.38rem;
}
.kol-sidebar-title {
    font-size: 0.94rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kol-sidebar-subtitle { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; margin-left: auto; }

/* News Rank List */
.news-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.news-rank-item { display: flex; align-items: flex-start; gap: 0.63rem; padding: 0.56rem 0; border-bottom: 1px solid #f1f5f9; }
.news-rank-item:last-child { border-bottom: none; }
.news-rank-num { font-size: 0.81rem; font-weight: 900; color: var(--text-muted); width: 1.25rem; text-align: center; flex-shrink: 0; margin-top: 1px; }
.news-rank-num-hot { font-size: 0.81rem; font-weight: 900; color: #dc2626; width: 1.25rem; text-align: center; flex-shrink: 0; margin-top: 1px; }
.news-rank-link { font-size: 0.81rem; font-weight: 700; color: var(--text-sub); text-decoration: none; line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.news-rank-link:hover { color: #4f46e5; }

/* Reporter Box */
.news-reporter-box {
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    border-radius: 1.25rem;
    padding: 1.38rem;
}
.news-reporter-title { font-size: 0.94rem; font-weight: 900; color: #1e3a5f; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.news-reporter-desc { font-size: 0.75rem; color: #3730a3; line-height: 1.6; margin-bottom: 0.88rem; }
.news-reporter-stat { font-size: 0.75rem; font-weight: 800; color: #4f46e5; background: #ffffff; padding: 0.5rem 1rem; border-radius: 0.75rem; text-align: center; box-shadow: var(--shadow-sm); }

/* O2O / Creator shared cards */
.kol-item-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.kol-item-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kol-item-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-light); }
.kol-item-card-body { padding: 1rem; }
.kol-item-card-cat { font-size: 0.69rem; font-weight: 800; color: var(--accent); margin-bottom: 0.38rem; display: block; }
.kol-item-card-title { font-size: 0.88rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.38rem; line-height: 1.4; }
.kol-item-card-desc { font-size: 0.75rem; color: var(--text-sub); line-height: 1.5; }
.kol-item-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-top: 1px solid #f1f5f9; }
.kol-item-card-price { font-size: 0.94rem; font-weight: 900; color: var(--text-main); }
.kol-item-card-btn { font-size: 0.75rem; font-weight: 700; color: var(--accent); }

/* ==========================================================================
   O2O Section Specific (Vanilla CSS)
   ========================================================================== */
.o2o-hero-banner {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    border-radius: 1.5rem;
    padding: 2rem;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(3,105,161,0.2);
}
.o2o-hero-banner h1 { font-size: 1.75rem; font-weight: 900; margin: 0 0 0.5rem; }
.o2o-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #bae6fd;
    font-size: 0.69rem; font-weight: 800;
    padding: 0.25rem 0.75rem; border-radius: 0.38rem;
    margin-bottom: 0.75rem;
}
.o2o-hero-desc { font-size: 0.88rem; color: #bae6fd; margin: 0; }
.o2o-hero-btn {
    display: inline-block;
    background: #ffffff;
    color: #0369a1;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.o2o-hero-btn:hover { background: #f0f9ff; }

.o2o-store-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s, transform 0.2s;
}
.o2o-store-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.o2o-store-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.o2o-store-img { width: 100%; height: 100%; object-fit: cover; background: var(--bg-light); }
.o2o-store-cat-badge {
    position: absolute; top: 0.63rem; left: 0.63rem;
    background: #0284c7; color: #ffffff;
    font-size: 0.69rem; font-weight: 700;
    padding: 0.19rem 0.63rem; border-radius: 0.38rem;
}
.o2o-store-body { padding: 1rem; flex: 1; }
.o2o-store-name { font-size: 0.88rem; font-weight: 900; color: var(--text-main); margin-bottom: 0.38rem; }
.o2o-store-name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.o2o-store-name a:hover { color: #0284c7; }
.o2o-store-desc { font-size: 0.75rem; color: var(--text-sub); line-height: 1.5; margin-bottom: 0.63rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o2o-store-meta { font-size: 0.69rem; color: var(--text-muted); font-weight: 600; display: flex; justify-content: space-between; }
.o2o-store-rating { color: #d97706; font-weight: 800; }
.o2o-store-footer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; }
.o2o-btn-detail { flex: 1; padding: 0.56rem 0; background: #0284c7; color: #ffffff; text-align: center; border-radius: 0.63rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: background 0.2s; }
.o2o-btn-detail:hover { background: #0369a1; }
.o2o-btn-call { flex: 1; padding: 0.56rem 0; background: var(--bg-light); color: var(--text-sub); text-align: center; border-radius: 0.63rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: background 0.2s; }
.o2o-btn-call:hover { background: var(--border); }

/* ==========================================================================
   Creator Section Specific (Vanilla CSS)
   ========================================================================== */
.creator-hero-banner {
    background: linear-gradient(135deg, #92400e, #d97706);
    border-radius: 1.5rem;
    padding: 2rem;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(146,64,14,0.2);
}
.creator-hero-banner h1 { font-size: 1.75rem; font-weight: 900; margin: 0 0 0.5rem; }
.creator-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fde68a;
    font-size: 0.69rem; font-weight: 800;
    padding: 0.25rem 0.75rem; border-radius: 0.38rem;
    margin-bottom: 0.75rem;
}
.creator-hero-desc { font-size: 0.88rem; color: #fde68a; margin: 0; }
.creator-hero-btn {
    display: inline-block;
    background: #ffffff;
    color: #92400e;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.creator-hero-btn:hover { background: #fef3c7; }

.creator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.creator-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.creator-card:hover { border-color: #f59e0b; box-shadow: 0 6px 16px rgba(245,158,11,0.12); }
.creator-card-top { flex: 1; }
.creator-avatar {
    width: 3.25rem; height: 3.25rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fbbf24;
    flex-shrink: 0;
}
.creator-cat-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.69rem; font-weight: 800;
    padding: 2px 0.5rem; border-radius: 0.38rem;
    margin-bottom: 0.25rem;
}
.creator-name { font-size: 0.88rem; font-weight: 900; color: var(--text-main); }
.creator-intro { font-size: 0.75rem; color: var(--text-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.creator-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 0.75rem; margin-top: 0.75rem; font-size: 0.75rem; }
.creator-sub-count { font-weight: 700; color: var(--text-sub); }
.creator-channel-btn {
    background: #dc2626;
    color: #ffffff;
    font-weight: 800;
    font-size: 0.69rem;
    padding: 0.31rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s;
}
.creator-channel-btn:hover { background: #b91c1c; }

@media (max-width: 1024px) {
    .creator-grid { grid-template-columns: repeat(3, 1fr); }
    .o2o-hero-banner h1, .creator-hero-banner h1 { font-size: 1.38rem; }
}
@media (max-width: 768px) {
    .creator-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .creator-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Main Index Page Specific (Vanilla CSS)
   ========================================================================== */
.kol-main { background: var(--bg-body); }

.main-hero {
    background: #0f172a;
    color: #ffffff;
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.main-hero-content { max-width: 35rem; }
.main-hero-badge {
    display: inline-block;
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.69rem; font-weight: 800;
    padding: 0.25rem 0.75rem; border-radius: 0.38rem;
    margin-bottom: 0.75rem;
}
.main-hero-title { font-size: 1.63rem; font-weight: 900; line-height: 1.45; margin: 0 0 0.75rem; color: #ffffff; }
.main-hero-desc { font-size: 0.88rem; color: #94a3b8; line-height: 1.7; margin: 0 0 1.5rem; }
.main-hero-btn-primary {
    display: inline-block;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 800; font-size: 0.88rem;
    padding: 0.63rem 1.25rem; border-radius: 0.75rem;
    text-decoration: none; transition: background 0.2s;
}
.main-hero-btn-primary:hover { background: #4338ca; }
.main-hero-btn-ghost {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    font-weight: 800; font-size: 0.88rem;
    padding: 0.63rem 1.25rem; border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.2);
    text-decoration: none; transition: background 0.2s;
}
.main-hero-btn-ghost:hover { background: rgba(255,255,255,0.2); }
.main-hero-icon {
    width: 11.25rem; height: 11.25rem;
    background: rgba(255,255,255,0.05);
    border-radius: 1.25rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 5rem; color: rgba(255,255,255,0.1);
}

/* Main sidebar */
.main-sidebar { width: 18.75rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; }

/* User avatar */
.main-user-avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 900; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.main-user-btn-gray { flex: 1; text-align: center; background: var(--bg-light); color: var(--text-sub); font-size: 0.75rem; font-weight: 700; padding: 0.5rem; border-radius: 0.63rem; text-decoration: none; transition: background 0.2s; }
.main-user-btn-gray:hover { background: var(--border); }
.main-user-btn-red { flex: 1; text-align: center; background: #fef2f2; color: #dc2626; font-size: 0.75rem; font-weight: 700; padding: 0.5rem; border-radius: 0.63rem; text-decoration: none; transition: background 0.2s; }
.main-user-btn-red:hover { background: #fee2e2; }
.main-login-btn { display: block; width: 100%; text-align: center; background: #4f46e5; color: #ffffff; font-weight: 800; font-size: 0.88rem; padding: 0.75rem; border-radius: 0.75rem; text-decoration: none; transition: background 0.2s; }
.main-login-btn:hover { background: #4338ca; }

/* Community Hot Item */
.main-comm-item { display: block; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.75rem; font-weight: 600; color: var(--text-sub); text-decoration: none; transition: color 0.2s; }
.main-comm-item:last-child { border-bottom: none; }
.main-comm-item:hover { color: #2563eb; }
.kol-sidebar-rank-num { display: inline-flex; align-items: center; justify-content: center; width: 1.13rem; height: 1.13rem; background: #eff6ff; color: #2563eb; border-radius: 0.25rem; font-size: 0.69rem; font-weight: 800; margin-right: 0.38rem; }

/* News hero */
.main-news-hero {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.main-news-hero a { display: block; color: inherit; text-decoration: none; }
.main-news-hero-img { width: 100%; height: 11.25rem; object-fit: cover; }
.main-news-badge { display: inline-block; font-size: 0.69rem; font-weight: 800; color: #dc2626; margin-bottom: 0.38rem; }
.main-news-title { font-size: 0.94rem; font-weight: 900; color: var(--text-main); line-height: 1.45; margin-bottom: 0.5rem; }
.main-news-desc { font-size: 0.75rem; color: var(--text-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

/* News list items (카드 스타일 제거 -> 플랫 라인 리스트) */
.main-news-list-item {
    display: block;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    padding: 0.63rem 0.25rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s;
}
.main-news-list-item:last-child { border-bottom: none; }
.main-news-list-item:hover { color: #2563eb; }
.main-news-list-badge { display: inline-block; font-size: 0.69rem; font-weight: 700; background: #eff6ff; color: #2563eb; padding: 1px 0.38rem; border-radius: 0.25rem; }
.main-news-list-title { font-size: 0.88rem; font-weight: 600; color: var(--text-main); line-height: 1.4; margin: 0; }

/* Law section */
.main-law-wrap {
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    border-radius: 1.25rem;
    padding: 1.38rem;
}
.main-law-item {
    display: block;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 0.88rem;
    padding: 0.88rem;
    text-decoration: none;
    transition: border-color 0.2s;
}
.main-law-item:hover { border-color: #2563eb; }
.main-law-badge { display: inline-block; font-size: 0.69rem; font-weight: 800; background: #dbeafe; color: #1d4ed8; padding: 2px 0.5rem; border-radius: 0.38rem; margin-bottom: 0.38rem; }
.main-law-title { font-size: 0.75rem; font-weight: 800; color: var(--text-main); line-height: 1.4; margin: 0; }

/* O2O cards */
.main-o2o-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.main-o2o-card:hover { box-shadow: var(--shadow-md); }
.main-o2o-img { width: 100%; height: 7.5rem; object-fit: cover; background: var(--bg-light); }
.main-o2o-cat { display: inline-block; font-size: 0.69rem; font-weight: 800; color: #059669; background: #f0fdf4; padding: 2px 0.5rem; border-radius: 0.38rem; margin-bottom: 0.38rem; }
.main-o2o-title { font-size: 0.81rem; font-weight: 900; color: var(--text-main); margin-bottom: 0.25rem; }
.main-o2o-loc { font-size: 0.69rem; color: var(--text-muted); margin: 0; }

/* Main hero responsive */
@media (max-width: 1024px) {
    .main-sidebar { width: 16.25rem; }
}
@media (max-width: 768px) {
    .main-hero { flex-direction: column; padding: 1.75rem 1.25rem; }
    .main-hero-icon { display: none; }
    .portal-layout { flex-direction: column; }
    .main-sidebar { width: 100%; }
    .main-hero-title { font-size: 1.38rem; }
}

/* ==========================================================================
   Donation Section Specific (Vanilla CSS)
   ========================================================================== */
.donation-main-wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.56rem 0.94rem 3.75rem;
}
.donation-hero {
    background: linear-gradient(135deg, #e11d48, #be123c);
    border-radius: 1.25rem;
    padding: 1.88rem;
    color: #ffffff;
    margin-bottom: 1.56rem;
    box-shadow: 0 10px 25px rgba(225,29,72,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.94rem;
}
.donation-hero h1 { font-size: 1.5rem; font-weight: 900; margin: 0.63rem 0 0.38rem; }
.donation-hero p { font-size: 0.88rem; color: #fecdd3; margin: 0; }
.donation-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    font-size: 0.75rem; font-weight: 800;
    padding: 0.25rem 0.63rem; border-radius: 0.38rem; margin-bottom: 0.5rem;
}
.donation-hero-btn {
    display: inline-block;
    background: #ffffff; color: #be123c;
    font-weight: 800; font-size: 0.88rem;
    padding: 0.63rem 1.38rem; border-radius: 0.75rem;
    text-decoration: none; white-space: nowrap;
    transition: background 0.2s;
}
.donation-hero-btn:hover { background: #fef2f2; }

.donation-type-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.38rem;
}
.donation-type-tab {
    padding: 0.69rem 1.38rem;
    font-weight: 800; font-size: 0.94rem;
    text-decoration: none;
    color: #64748b;
    border-bottom: 0.19rem solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s;
    white-space: nowrap;
}
.donation-type-tab:hover { color: #e11d48; }
.donation-type-active { color: #e11d48; border-bottom-color: #e11d48; }

.donation-cat-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.56rem;
}
.donation-cat-btn {
    padding: 0.5rem 1.13rem;
    border-radius: 1.25rem;
    font-size: 0.81rem; font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.donation-cat-btn:hover { background: #fef2f2; color: #e11d48; border-color: #e11d48; }
.donation-cat-btn.active { background: #e11d48; color: #ffffff; border-color: #e11d48; }

.donation-section-title {
    font-size: 1.13rem; font-weight: 800; color: #0f172a;
    margin-bottom: 1rem;
    border-left: 0.25rem solid #e11d48;
    padding-left: 0.63rem;
}

.donation-campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.donation-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}
.donation-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }

.donation-card-img-wrap { display: block; height: 11.25rem; overflow: hidden; position: relative; }
.donation-card-img { width: 100%; height: 100%; object-fit: cover; }
.donation-card-org {
    position: absolute; top: 0.63rem; left: 0.63rem;
    background: #e11d48; color: #ffffff;
    padding: 0.19rem 0.5rem; border-radius: 0.25rem;
    font-size: 0.69rem; font-weight: 700;
}

.donation-card-body { padding: 0.94rem; flex: 1; }
.donation-card-title { font-size: 0.94rem; font-weight: 700; margin: 0 0 0.5rem; }
.donation-card-title a { text-decoration: none; color: #1e293b; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.donation-card-title a:hover { color: #e11d48; }
.donation-card-desc { font-size: 0.75rem; color: #64748b; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.donation-card-footer { padding: 0.75rem 0.94rem; border-top: 1px solid #f1f5f9; }
.donation-progress-bar { height: 0.38rem; background: #f1f5f9; border-radius: 0.19rem; overflow: hidden; margin-bottom: 0.5rem; }
.donation-progress-fill { height: 100%; background: #e11d48; border-radius: 0.19rem; transition: width 0.5s; }
.donation-card-stats { display: flex; justify-content: space-between; align-items: center; }
.donation-card-pct { font-size: 1.13rem; font-weight: 900; color: #e11d48; }
.donation-card-amount { font-size: 0.75rem; font-weight: 700; color: #334155; }

@media (max-width: 1024px) { .donation-campaign-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .donation-campaign-grid { grid-template-columns: 1fr; } .donation-hero h1 { font-size: 1.25rem; } }

/* ==========================================================================
   Shop Main Page - Smartstore/Coupang Style (Vanilla CSS)
   ========================================================================== */
.shop-main-wrapper { background: #ffffff; padding-bottom: 5rem; }

.shop-hero-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.94rem;
    max-width: var(--container-width);
    margin: 1.25rem auto;
    padding: 0 1.25rem;
}
.shop-main-banner { border-radius: 0.75rem; overflow: hidden; height: 25rem; position: relative; }
.shop-side-banners { display: flex; flex-direction: column; gap: 0.94rem; }
.shop-side-banner { border-radius: 0.75rem; overflow: hidden; height: 12rem; position: relative; }

.shop-banner-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #ffffff;
}
.shop-banner-overlay h2 { font-size: 1.7rem; font-weight: 800; margin-bottom: 0.25rem; }
.shop-banner-overlay p { font-size: 0.9rem; opacity: 0.85; margin: 0; }

/* Category Nav */
.shop-cat-nav {
    display: flex;
    justify-content: center;
    gap: 1.88rem;
    max-width: var(--container-width);
    margin: 2.19rem auto 0.63rem;
    padding: 0 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.shop-cat-nav::-webkit-scrollbar { display: none; }
.shop-cat-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem; text-decoration: none; color: #333; min-width: 4.25rem;
}
.shop-cat-icon {
    width: 3.88rem; height: 3.88rem; border-radius: 50%;
    background: #f8fafc; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #1e293b; transition: 0.2s;
}
.shop-cat-item:hover .shop-cat-icon { transform: scale(1.1); background: #f1f5f9; border-color: #94a3b8; }
.shop-cat-item span { font-size: 0.8rem; font-weight: 600; }

/* Flash Deal Bar */
.shop-flash-bar {
    max-width: var(--container-width);
    margin: 1.88rem auto 0;
    padding: 0 1.25rem;
}
.shop-flash-inner {
    background: linear-gradient(135deg, #ff4b4b, #ff6b35);
    border-radius: 1rem;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: #ffffff;
}
.shop-flash-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; opacity: 0.85; margin-bottom: 0.25rem; }
.shop-flash-title { font-size: 1.5rem; font-weight: 900; }
.shop-flash-timer { background: rgba(0,0,0,0.2); padding: 0.5rem 1rem; border-radius: 0.63rem; font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.shop-flash-more { margin-left: auto; background: #ffffff; color: #ff4b4b; font-weight: 800; font-size: 0.81rem; padding: 0.63rem 1.25rem; border-radius: 0.63rem; text-decoration: none; white-space: nowrap; }

/* Section Layout */
.shop-section-wrap { max-width: var(--container-width); margin: 0 auto; padding: 2.5rem 1.25rem 0; }
.shop-section-title {
    font-size: 1.35rem; font-weight: 900; margin-bottom: 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
}
.shop-section-title::before {
    content: '';
    display: inline-block;
    width: 0.25rem; height: 1.38rem; background: #000;
    border-radius: 2px; margin-right: 0.75rem;
}
.shop-see-all { font-size: 0.81rem; font-weight: 600; color: #64748b; text-decoration: none; }
.shop-see-all:hover { color: #1e293b; }

/* Product Grid */
.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.shop-p-card { text-decoration: none; color: inherit; display: block; }
.shop-p-thumb {
    aspect-ratio: 1/1; border-radius: 0.75rem; overflow: hidden;
    background: #f8fafc; margin-bottom: 0.75rem;
    border: 1px solid #f1f5f9; position: relative;
}
.shop-p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.shop-p-card:hover .shop-p-thumb img { transform: scale(1.05); }

.shop-p-brand { font-size: 0.72rem; color: #94a3b8; margin-bottom: 0.19rem; font-weight: 600; text-transform: uppercase; }
.shop-p-name {
    font-size: 0.9rem; line-height: 1.4; color: #1e293b;
    margin-bottom: 0.5rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-p-price-row { display: flex; align-items: center; gap: 0.38rem; margin-bottom: 0.38rem; }
.shop-p-discount { color: #ff4b4b; font-weight: 900; font-size: 1rem; }
.shop-p-price { font-weight: 900; font-size: 1rem; }
.shop-p-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: #94a3b8; }
.shop-p-badge { background: #f1f5f9; padding: 2px 0.44rem; border-radius: 0.25rem; color: #475569; font-weight: 700; }
.shop-p-badge-free { background: #ecfdf5; color: #059669; }

@media (max-width: 1024px) { .shop-product-grid { grid-template-columns: repeat(3, 1fr); } .shop-hero-container { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .shop-product-grid { grid-template-columns: repeat(2, 1fr); } .shop-cat-nav { gap: 1rem; } }

/* ==========================================================================
   News Section Layout Classes
   ========================================================================== */
.kol-grid-main-side {
    display: grid;
    grid-template-columns: 1fr 18.75rem;
    gap: 1.75rem;
    align-items: start;
}
.kol-card-hero {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
}
.kol-hero-img { width: 100%; height: 22.5rem; object-fit: cover; display: block; }
.kol-hero-body { padding: 1.38rem; }
.kol-hero-badge { display: inline-block; background: #ef4444; color: #fff; font-size: 0.75rem; font-weight: 800; padding: 0.19rem 0.63rem; border-radius: 0.38rem; margin-bottom: 0.63rem; }
.kol-hero-title { font-size: 1.38rem; font-weight: 900; color: #0f172a; line-height: 1.3; margin-bottom: 0.63rem; text-decoration: none; display: block; }
.kol-hero-title:hover { color: #2563eb; }
.kol-hero-desc { font-size: 0.88rem; color: #64748b; line-height: 1.6; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kol-hero-meta { font-size: 0.75rem; color: #94a3b8; }

.kol-news-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.kol-news-sub-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kol-news-sub-img { width: 100%; height: 8.75rem; object-fit: cover; }
.kol-news-sub-body { padding: 0.75rem; }
.kol-news-sub-cat { font-size: 0.69rem; font-weight: 800; color: #3b82f6; margin-bottom: 0.31rem; }
.kol-news-sub-title { font-size: 0.81rem; font-weight: 700; color: #1e293b; line-height: 1.4; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kol-news-sub-title:hover { color: #2563eb; }

.kol-section-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.kol-news-list-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.63rem;
    padding: 0.88rem;
    display: flex; gap: 0.75rem; align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.kol-news-list-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

.kol-sidebar-box {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.88rem;
    padding: 1.13rem;
    margin-bottom: 1.25rem;
}
.kol-sidebar-box-title { font-size: 0.88rem; font-weight: 900; color: #0f172a; margin-bottom: 0.88rem; padding-bottom: 0.63rem; border-bottom: 2px solid #f1f5f9; }

.kol-top-news-item { display: flex; gap: 0.63rem; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid #f8fafc; }
.kol-top-news-item:last-child { border-bottom: none; }
.kol-top-news-num { font-size: 1rem; font-weight: 900; color: #2563eb; min-width: 1.25rem; }
.kol-top-news-title { font-size: 0.75rem; font-weight: 700; color: #334155; line-height: 1.4; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kol-top-news-title:hover { color: #2563eb; }

.kol-reporter-box { text-align: center; padding: 0.63rem; }
.kol-reporter-logo { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: #dbeafe; margin: 0 auto 0.63rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.kol-reporter-desc { font-size: 0.69rem; color: #64748b; line-height: 1.5; margin-bottom: 0.88rem; }
.kol-reporter-btn { display: block; background: #2563eb; color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 0.56rem; border-radius: 0.63rem; text-decoration: none; text-align: center; }
.kol-reporter-btn:hover { background: #1d4ed8; }
.kol-reporter-stat { display: flex; justify-content: center; gap: 1rem; margin-top: 0.63rem; font-size: 0.69rem; color: #94a3b8; }

@media (max-width: 1024px) {
    .kol-grid-main-side { grid-template-columns: 1fr; }
    .kol-news-sub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kol-news-sub-grid { grid-template-columns: repeat(2, 1fr); }
    .kol-hero-img { height: 12.5rem; }
}

/* ==========================================================================
   Clean Utility Classes (Eliminating Inline Style Attributes)
   ========================================================================== */
.portal-layout-container { padding-top: 2rem; padding-bottom: 2.5rem; }
.kol-highlight-indigo { color: #4f46e5; }
.kol-highlight-blue { color: #2563eb; }
.kol-highlight-emerald { color: #059669; }
.kol-card-body-padded { padding: 0.88rem; }
.kol-auth-footer-links { margin-top: 0.75rem; font-size: 0.75rem; }
.kol-sidebar-box-spaced { margin-top: 1.25rem; }

/* Dedicated Styles for news/view.php */
.news-view-wrap { max-width: 75rem; margin: 0 auto; padding: 1.88rem 1.25rem 3.75rem; }
.news-view-grid { display: grid; grid-template-columns: 1fr 20rem; gap: 1.88rem; align-items: start; }
@media (max-width: 992px) { .news-view-grid { grid-template-columns: 1fr; } }
.news-view-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2.25rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04); }
.news-title-header { font-size: 1.63rem; font-weight: 900; color: #0f172a; line-height: 1.35; margin: 0 0 1.25rem 0; }
.news-meta-bar { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 1rem; padding: 0.88rem 1.25rem; margin-bottom: 1.75rem; }
.news-reporter-box { display: flex; align-items: center; gap: 0.75rem; }
.news-reporter-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #4f46e5; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.88rem; }
.news-body-content { font-size: 1rem; line-height: 1.85; color: #334155; margin-bottom: 2.5rem; word-break: keep-all; }
.news-body-content p { margin-bottom: 1.13rem; }
.news-action-bar { display: flex; justify-content: center; gap: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem; }
.btn-shoutout { background: #4f46e5; color: #ffffff; font-weight: 800; font-size: 0.88rem; padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: none; cursor: pointer; }
.btn-cancel { background: #ffffff; color: #e11d48; border: 1px solid #fda4af; font-weight: 800; font-size: 0.88rem; padding: 0.75rem 1.5rem; border-radius: 0.75rem; cursor: pointer; }
.news-sidebar-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.25rem; padding: 1.25rem; margin-bottom: 1.25rem; }
.news-sidebar-title { font-size: 0.94rem; font-weight: 800; color: #0f172a; margin-bottom: 0.88rem; padding-bottom: 0.5rem; border-bottom: 2px solid #f1f5f9; }

/* Clean Shop Grid (Responsive 4 -> 3 -> 2 columns) */
.kol-shop-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; width: 100%; margin: 0 0 1.88rem 0; padding: 0; list-style: none; }
.kol-shop-grid-4 .sct_li { width: 100% !important; margin: 0 !important; }
@media (max-width: 1024px) {
    .kol-shop-grid-4 { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 640px) {
    .kol-shop-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .kol-shop-grid-4 .sct_txt { font-size: 0.88rem; line-height: 1.4; }
    .kol-shop-grid-4 .sct_cost { font-size: 0.94rem; }
}
@media (max-width: 380px) {
    .kol-shop-grid-4 { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Dedicated 8-News Portal Main Classes */
.news-curation-card { margin-bottom: 1.25rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.news-curation-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }
.news-curation-title { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0; }
.news-curation-more { font-size: 0.75rem; color: #4f46e5; font-weight: 700; text-decoration: none; }
.news-curation-list { list-style: none; padding: 0; margin: 0; }
.news-curation-item { padding: 0.38rem 0; border-bottom: 1px solid #f8fafc; font-size: 0.81rem; display: flex; justify-content: space-between; }
.news-curation-link { color: #334155; text-decoration: none; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 15rem; }
.news-curation-badge { font-size: 0.69rem; color: #94a3b8; }
.news-sidebar-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; text-align: center; }
.news-sidebar-head-title { font-size: 0.94rem; font-weight: 800; color: #0f172a; margin-bottom: 0.63rem; }
.news-sidebar-head-desc { font-size: 0.75rem; color: #64748b; line-height: 1.5; margin-bottom: 0.88rem; }
.news-sidebar-reporter-list { background: #f8fafc; border-radius: 0.75rem; padding: 0.75rem; font-size: 0.75rem; color: #475569; text-align: left; }
.news-sidebar-link { display: block; padding: 0.5rem 0; border-bottom: 1px solid #f8fafc; font-size: 0.81rem; font-weight: 600; color: #475569; text-decoration: none; line-height: 1.4; white-space: normal; word-break: break-all; }
.news-sidebar-link:hover { color: #4f46e5; }

/* News View Header Badge Classes */
.news-view-badge-wrap { margin-bottom: 0.63rem; display: flex; gap: 0.5rem; }
.news-view-cat-badge { background: #eeefff; color: #4f46e5; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.63rem; border-radius: 0.5rem; }
.news-view-board-badge { background: #e0f2fe; color: #0369a1; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.63rem; border-radius: 0.5rem; }
.news-view-reporter-name { font-size: 0.88rem; color: #0f172a; display: block; }
.news-view-reporter-date { font-size: 0.75rem; color: #64748b; }
.news-view-hits-good { font-size: 0.81rem; color: #64748b; font-weight: 600; }
.news-view-img-box { margin-bottom: 1.5rem; text-align: center; }
.news-view-img { max-width: 100%; border-radius: 1rem; margin-bottom: 0.5rem; }
.news-view-img-caption { font-size: 0.75rem; color: #94a3b8; }
.news-view-hashtags-wrap { margin-top: 1.88rem; padding-top: 1.25rem; border-top: 1px solid #f1f5f9; }
.news-view-hashtags-title { font-size: 0.88rem; font-weight: 800; color: #0f172a; margin-bottom: 0.63rem; }
.news-view-hashtags-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.news-view-tag-item { background: #f1f5f9; color: #475569; padding: 0.38rem 0.75rem; border-radius: 1.25rem; font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.news-view-action-bar { margin-top: 1.88rem; }

/* Funding Skin Dedicated Classes */
.kol-funding-wrap { padding: 1.25rem 0; }
.kol-funding-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 992px) { .kol-funding-grid { grid-template-columns: 1fr; } }
.funding-card-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: 0.3s; }
.funding-card-img-wrap { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.funding-card-img { width: 100%; height: 100%; object-fit: cover; }
.funding-card-cat-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(37, 99, 235, 0.9); color: #fff; padding: 0.25rem 0.63rem; border-radius: 0.38rem; font-size: 0.69rem; font-weight: 700; }
.funding-card-body { padding: 1.25rem; }
.funding-card-organizer { font-size: 0.75rem; color: #64748b; font-weight: 600; display: block; margin-bottom: 0.25rem; }
.funding-card-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; line-height: 1.4; height: 2.8rem; overflow: hidden; }
.funding-progress-group { margin-top: 0.94rem; }
.funding-progress-meta { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 800; margin-bottom: 0.38rem; }
.funding-progress-percent { color: #2563eb; }
.funding-progress-amount { color: #0f172a; }
.funding-progress-bar-bg { width: 100%; height: 0.38rem; background: #f1f5f9; border-radius: 0.19rem; overflow: hidden; }
.funding-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); border-radius: 0.19rem; }

.news-hero-badge-inline { display: inline-block; margin-bottom: 0.75rem; }

.news-article-main-img { width: 100%; max-height: 28.13rem; object-fit: cover; border-radius: 0.5rem; }
.news-img-caption-style { font-size: 0.81rem; color: #64748b; margin-top: 0.5rem; font-weight: 500; }
.news-copyright-notice { margin-top: 1.5rem; font-size: 0.81rem; color: #94a3b8; }












/* News View Page Dedicated Styles */
.news-view-wrap { max-width: 75rem; margin: 0 auto; padding: 1.88rem 1.25rem 3.75rem; }
.news-view-grid { display: grid; grid-template-columns: 1fr 20rem; gap: 1.88rem; align-items: start; }
@media (max-width: 992px) { .news-view-grid { grid-template-columns: 1fr; } }
.news-view-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2.25rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04); }
.news-title-header { font-size: 1.63rem; font-weight: 900; color: #0f172a; line-height: 1.35; margin: 0 0 1.25rem 0; }
.news-meta-bar { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 1rem; padding: 0.88rem 1.25rem; margin-bottom: 1.75rem; }

/* ================= Custom Utility & Admin Clean Classes per .cursorrules ================= */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.gap-10 { gap: 0.63rem; }
.gap-15 { gap: 0.94rem; }
.gap-20 { gap: 1.25rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.fw-bold { font-weight: 700; }
.mt-10 { margin-top: 0.63rem; }
.mt-20 { margin-top: 1.25rem; }
.mb-10 { margin-bottom: 0.63rem; }
.mb-20 { margin-bottom: 1.25rem; }

/* In-Article Advertisement Banner Container */
.news-inarticle-ad {
    margin: 1.88rem 0;
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    text-align: center;
}
.news-inarticle-ad .ad-label {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.news-inarticle-ad .ad-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 5.63rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

/* News Main Portal Clean Dedicated Styles */
.kol-ticker-bar {
    display: flex;
    align-items: center;
    background: #0284c7;
    color: #ffffff;
    padding: 0.63rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    gap: 0.94rem;
}
.kol-ticker-bar .ticker-badge {
    background: #ef4444;
    color: #ffffff;
    font-weight: 800;
    padding: 2px 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
}
.kol-ticker-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.kol-ticker-text a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}
.kol-ticker-time {
    font-size: 0.75rem;
    opacity: 0.85;
    white-space: nowrap;
}

.news-hero-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 1.88rem;
}
.news-hero-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    text-decoration: none;
    color: inherit;
}
@media (max-width: 768px) {
    .news-hero-link {
        grid-template-columns: 1fr;
    }
}
.news-hero-img-wrap {
    height: 17.5rem;
    overflow: hidden;
    background: #f1f5f9;
}
.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.news-hero-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.news-hero-tag {
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.69rem;
    font-weight: 800;
    padding: 0.25rem 0.63rem;
    border-radius: 0.38rem;
    width: fit-content;
    margin-bottom: 0.75rem;
}
.news-hero-title-text {
    font-size: 1.38rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}
.news-hero-desc-text {
    font-size: 0.88rem;
    color: #475569;
    margin: 0 0 1rem 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-hero-meta-row {
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    gap: 0.75rem;
}

.news-sponsor-banner {
    background: linear-gradient(135deg, #4f46e5, #3730a3);
    border-radius: 1rem;
    padding: 1.5rem;
    color: #ffffff;
    margin-bottom: 1.88rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news-sponsor-label {
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}
.news-sponsor-title {
    font-size: 1.13rem;
    font-weight: 900;
}
.news-sponsor-btn {
    background: #ffffff;
    color: #4f46e5;
    border: none;
    font-weight: 800;
    padding: 0.63rem 1.13rem;
    border-radius: 0.63rem;
    cursor: pointer;
}

.news-curation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1024px) {
    .news-curation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .news-curation-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
.news-curation-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.news-curation-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.88rem;
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f1f5f9;
}
.news-curation-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
.news-curation-more {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4f46e5;
    text-decoration: none;
}
.news-curation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.63rem;
}
.news-curation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
}
.news-curation-link {
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 15rem;
}
.news-curation-badge {
    font-size: 0.69rem;
    font-weight: 700;
    color: #4f46e5;
    background: #eeefff;
    padding: 2px 0.38rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* Comment & Community Clean UI Styles */
.cmt_btn {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.88rem 1.25rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    text-align: left;
    margin-bottom: 1.25rem;
    cursor: pointer;
}
.bo_vc_w_wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.bo_vc_w textarea {
    width: 100%;
    min-height: 5.63rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.63rem;
    padding: 0.88rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
}

/* Shop Item Detail Clean Flex/Grid Styles */
.shop-item-form-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.88rem 1.25rem;
}
.sit_ov_tbl {
    width: 100%;
    border-collapse: collapse;
}
.sit_ov_tbl th, .sit_ov_tbl td {
    padding: 0.63rem 0.75rem;
    font-size: 0.88rem;
}
.sit_btn_buy {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.sit_btn_buy input[type="submit"], .sit_btn_buy a {
    flex: 1;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.63rem;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.btn_addcart {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}
/* News Board List Clean Tab Styles */
.news-tabs-wrap {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}
.news-tabs-1dep {
    display: flex;
    flex-wrap: wrap;
    gap: 0.31rem;
    margin-bottom: 0.63rem;
}
.news-tab-1 {
    display: block;
    padding: 0.63rem 0.94rem;
    font-weight: bold;
    color: #475569;
    border-bottom: 0.19rem solid transparent;
    text-decoration: none;
    transition: all 0.2s;
}
.news-tab-1:hover {
    color: #0f172a;
}
.news-tab-1.active {
    color: #4f46e5;
    border-bottom: 0.19rem solid #4f46e5;
}
.news-tabs-2dep {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.63rem 0.94rem;
    background: #f8fafc;
    border-radius: 0.5rem;
}
.news-tab-2 {
    display: block;
    padding: 0.31rem 0.75rem;
    font-size: 0.81rem;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.94rem;
    text-decoration: none;
}
/* News Section List Clean Dedicated Classes (No Inline Style) */
.news-section-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.88rem 1.25rem 3.75rem;
}
.news-sec-header {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.75rem;
    margin-bottom: 1.56rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
}
.news-sec-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.88rem 0;
    display: flex;
    align-items: center;
    gap: 0.63rem;
}
.news-sec-badge {
    background: #eeefff;
    color: #4f46e5;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 6.19rem;
}
.news-sub-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.94rem;
    padding-top: 0.94rem;
    border-top: 1px solid #f1f5f9;
}
.sub-tab-item {
    padding: 0.5rem 1.13rem;
    border-radius: 0.75rem;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    transition: all 0.15s ease;
}
.sub-tab-item.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}
.news-list-grid {
    display: grid;
    grid-template-columns: 1fr 18.75rem;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .news-list-grid {
        grid-template-columns: 1fr;
    }
}
.news-article-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.news-thumb-box {
    width: 11.25rem;
    height: 7.19rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}
.news-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-card-cat-tag {
    font-size: 0.69rem;
    font-weight: 800;
    color: #4f46e5;
    background: #eeefff;
    padding: 2px 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-bottom: 0.38rem;
}
.news-card-title {
    font-size: 1.06rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.news-card-title a {
    text-decoration: none;
    color: inherit;
}
.news-card-title a:hover {
    color: #4f46e5;
}
.news-card-desc {
    font-size: 0.81rem;
    color: #475569;
    margin: 0 0 0.63rem 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* News View & Section Clean Dedicated UI Classes (No Inline Style) */
.news-view-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 3.75rem;
}
.news-breadcrumb-clean {
    font-size: 0.81rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.news-breadcrumb-clean a {
    color: #64748b;
    text-decoration: none;
}
.news-breadcrumb-clean .active {
    color: #0f172a;
    font-weight: 700;
}
.news-header-clean {
    margin-bottom: 1.5rem;
}
.news-title-header {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 0.88rem 0;
    word-break: keep-all;
}
.news-meta-clean {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.81rem;
    color: #64748b;
    gap: 0.63rem;
}
.news-meta-clean .meta-left, .news-meta-clean .meta-right {
    display: flex;
    align-items: center;
    gap: 0.63rem;
}
.news-meta-clean .reporter-name,
.news-meta-clean .content-author-member {
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}
.news-meta-clean .content-author-member i {
    color: #64748b;
}
.news-meta-clean .divider {
    color: #cbd5e1;
}
.news-view-grid {
    display: grid;
    grid-template-columns: 1fr 18.75rem;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 868px) {
    .news-view-grid {
        grid-template-columns: 1fr;
    }
}
.news-view-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
}

.news-body-content {
    font-size: 1.1rem;
    line-height: 1.85;
    color: #1e293b;
    margin-bottom: 2.25rem;
    min-height: 13.75rem;
    letter-spacing: -0.01em;
}
.news-inarticle-ad {
    margin: 1.88rem 0;
    padding: 1.25rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    text-align: center;
}
.news-inarticle-ad .ad-label {
    font-size: 0.69rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 1px;
}
.news-ai-disclaimer {
    padding: 0.88rem 1.13rem;
    background: #f8fafc;
    border-radius: 0.63rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 1.88rem;
    line-height: 1.5;
}
.news-view-hashtags-wrap {
    margin-bottom: 1.88rem;
}
.news-view-hashtags-title {
    font-size: 0.81rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.5rem;
}
.news-view-hashtags-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.news-view-tag-item {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.63rem;
    border-radius: 0.38rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}
.news-action-bar {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}
/* Sidebar Dedicated Modules & Compact Text Ad */
.kol-ad-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 1.25rem;
    text-align: center;
}
.news-sidebar-module {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 1.25rem;
}
.news-sidebar-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #4f46e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.news-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 행간 콤팩트 조율 */
}
.news-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.81rem;
    line-height: 1.35; /* 텍스트 행간 조율 */
}
.news-sidebar-rank {
    font-weight: 900;
    color: #4f46e5;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}
.news-sidebar-link {
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}
.news-sidebar-link:hover {
    color: #4f46e5;
}

/* Dedicated Sponsored Ad Block */
.news-sidebar-sponsored-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.news-sidebar-sponsored-title {
    font-size: 0.69rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    margin-bottom: 0.63rem;
    display: block;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0.38rem;
}
.news-sidebar-sponsored-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.38rem; /* 행간 콤팩트 배치 */
}
.news-sidebar-sponsored-item {
    font-size: 0.75rem;
    line-height: 1.3;
}
.news-sidebar-sponsored-item a {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}
.news-sidebar-sponsored-item a:hover {
    color: #4f46e5;
}

/* Simplified Clean Section Title */
.news-sec-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}











/* ==================================================
   [Category Layer & GNB Standard Clean CSS]
   ================================================== */
#category, .kol-category-layer, #category.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.94rem;
    min-width: 16.25rem;
}
#category.active, .kol-category-layer.active {
    display: block;
}

/* ==================================================
   [Hero Slider Box Clean CSS]
   ================================================== */
.kol-hero-slider-wrap {
    margin-top: 0.94rem;
    margin-bottom: 1.56rem;
}
.kol-hero-slider-box {
    background: #0f172a;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 1rem;
    padding: 2.25rem 2.5rem;
    color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}
.kol-hero-slider-badge {
    display: inline-block;
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.kol-hero-slider-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 0.63rem 0;
}
.kol-hero-slider-subtitle {
    color: #93c5fd;
    font-size: 1.25rem;
    font-weight: 600;
}
.kol-hero-slider-desc {
    color: #94a3b8;
    font-size: 0.88rem;
    margin: 0 0 1.25rem 0;
    line-height: 1.5;
}
.kol-hero-slider-actions {
    display: flex;
    gap: 0.63rem;
}
.kol-hero-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.63rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.kol-hero-slider-btn-primary {
    background: #0284c7;
    color: #ffffff;
}
.kol-hero-slider-btn-primary:hover {
    background: #0369a1;
}
.kol-hero-slider-btn-outline {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.kol-hero-slider-btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==================================================
   [Online LLM AI Legal Assistant UI/UX Standard CSS]
   ================================================== */
.law-ai-container {
    max-width: var(--container-width);
    margin: 1.56rem auto 4.38rem;
    padding: 0 1.25rem;
}

/* AI Hero Prompt Engine */
.law-ai-hero-card {
    background: radial-gradient(circle at 80% 20%, #1e3a5f 0%, #0f172a 70%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 1.5rem;
    padding: 2.63rem 2.5rem;
    color: #ffffff;
    margin-bottom: 2.19rem;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.35);
    position: relative;
    overflow: hidden;
}

.law-ai-hero-header {
    text-align: center;
    max-width: 46.25rem;
    margin: 0 auto 1.88rem;
}

.law-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 0.69rem;
    font-weight: 800;
    padding: 0.31rem 0.88rem;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    margin-bottom: 0.88rem;
}

.law-ai-hero-title {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
}

.law-ai-hero-desc {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

/* Floating AI Chat Prompt Box (ChatGPT / Perplexity Style) */
.law-ai-prompt-wrap {
    max-width: 51.25rem;
    margin: 0 auto 1.25rem;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 1.13rem;
    padding: 0.38rem 0.5rem 0.38rem 1.13rem;
    display: flex;
    align-items: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.law-ai-prompt-wrap:focus-within {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 12px 30px rgba(0, 0, 0, 0.25);
    border-color: #2563eb;
}

.law-ai-prompt-icon {
    font-size: 1.13rem;
    color: #3b82f6;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.law-ai-prompt-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.94rem;
    font-weight: 600;
    color: #0f172a;
    background: transparent;
    padding: 0.63rem 0;
    width: 100%;
}

.law-ai-prompt-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.law-ai-prompt-submit {
    background: #0284c7;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.38rem;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.law-ai-prompt-submit:hover {
    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
    transform: translateY(-1px);
}

/* Prompt Recommendation Chips */
.law-ai-chips-container {
    max-width: 51.25rem;
    margin: 0 auto;
}

.law-ai-chips-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.law-ai-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.law-ai-chip-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    padding: 0.38rem 0.88rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.law-ai-chip-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Interactive AI Assistant Output Panel */
.law-ai-result-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;
    padding: 1.88rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.law-ai-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.13rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.law-ai-agent-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.law-ai-avatar {
    width: 2.75rem;
    height: 2.75rem;
    background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
    color: #ffffff;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.law-ai-agent-name {
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 2px 0;
}

.law-ai-agent-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

.law-ai-answer-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 0.25rem solid #0284c7;
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 1.5rem;
}

.law-ai-answer-box strong {
    color: #0f172a;
}

.law-matched-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.law-matched-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.88rem;
}

.law-matched-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.law-matched-card:hover {
    border-color: #0284c7;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08);
    transform: translateY(-2px);
}

.law-matched-card-badge {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 800;
    background: #eff6ff;
    color: #0284c7;
    padding: 2px 0.5rem;
    border-radius: 0.38rem;
    align-self: flex-start;
    margin-bottom: 0.5rem;
}

.law-matched-card-sub {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.law-matched-card-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 0.63rem 0;
    flex: 1;
}

.law-matched-card-footer {
    font-size: 0.69rem;
    font-weight: 700;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f8fafc;
    padding-top: 0.5rem;
}

/* 4 Core Lifestyle Clusters (Tab / Grid System) */
.law-clusters-section {
    margin-bottom: 2.81rem;
}

.law-section-heading {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 1.13rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.law-cluster-tabs {
    display: flex;
    gap: 0.5rem;
    /* border-bottom: 2px solid #e2e8f0; */
    margin-bottom: 1.5rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
}

.law-cluster-tab-btn {
    padding: 0.63rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    border-bottom: 0.19rem solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.law-cluster-tab-btn:hover {
    color: #0284c7;
}

.law-cluster-tab-btn.active {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

.law-cluster-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.law-cluster-category-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.law-cluster-category-box:hover {
    border-color: #38bdf8;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
}

.law-cluster-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f1f5f9;
}

.law-cluster-cat-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.law-cluster-cat-title a {
    color: inherit;
    text-decoration: none;
}

.law-cluster-cat-title a:hover {
    color: #0284c7;
}

.law-cluster-cat-count {
    font-size: 0.69rem;
    font-weight: 700;
    color: #0284c7;
    background: #f0f9ff;
    padding: 2px 0.5rem;
    border-radius: 9999px;
}

.law-cluster-sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.law-cluster-sub-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.69rem;
    font-weight: 600;
    padding: 0.25rem 0.63rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.law-cluster-sub-chip:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #0284c7;
}

/* 4 Curated Emergency Scenario Cards */
.law-scenario-section {
    margin-bottom: 2.5rem;
}

.law-scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.law-scenario-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.law-scenario-card:hover {
    border-color: #0284c7;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.08);
}

.law-scenario-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.13rem;
    margin-bottom: 0.88rem;
}

.law-scenario-icon-blue { background: #eff6ff; color: #0284c7; }
.law-scenario-icon-emerald { background: #ecfdf5; color: #059669; }
.law-scenario-icon-amber { background: #fffbeb; color: #d97706; }
.law-scenario-icon-indigo { background: #eef2ff; color: #4f46e5; }

.law-scenario-tag {
    font-size: 0.69rem;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.law-scenario-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
}

.law-scenario-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .law-cluster-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .law-scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .law-matched-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .law-ai-hero-card {
        padding: 1.75rem 1.25rem;
    }
    .law-ai-hero-title {
        font-size: 1.38rem;
    }
    .law-ai-prompt-wrap {
        flex-direction: column;
        padding: 0.75rem;
        gap: 0.63rem;
    }
    .law-ai-prompt-submit {
        width: 100%;
        justify-content: center;
    }
    .law-cluster-content {
        grid-template-columns: 1fr;
    }
    .law-scenario-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Kolive O2O Service Dedicated CSS (Clean, 0% Inline Style)
   ========================================================================== */
.o2o-list-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.75rem;
}

.o2o-header-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.88rem;
    border-bottom: 2px solid #0f172a;
    padding-bottom: 1.25rem;
}

.o2o-header-area h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.38rem;
}

.o2o-header-area p {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0;
}

.o2o-header-area p strong {
    color: #0284c7;
}

.o2o-sort-group {
    display: flex;
    gap: 0.5rem;
}

.o2o-sort-btn {
    font-weight: 700;
    font-size: 0.81rem;
    padding: 0.38rem 1rem;
    border-radius: 1.25rem;
    text-decoration: none;
    background: #f1f5f9;
    color: #64748b;
    transition: all 0.2s;
}

.o2o-sort-btn.active, .o2o-sort-btn:hover {
    background: #0f172a;
    color: #ffffff;
}

.o2o-subtab-nav {
    display: flex;
    gap: 0.63rem;
    margin-bottom: 2.19rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.o2o-subtab-item {
    white-space: nowrap;
    padding: 0.5rem 1.25rem;
    border-radius: 6.19rem;
    background: #f1f5f9;
    color: #475569;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.81rem;
    transition: all 0.2s;
}

.o2o-subtab-item.active, .o2o-subtab-item:hover {
    background: #0284c7;
    color: #ffffff;
}

.o2o-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 860px) {
    .o2o-item-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .o2o-item-grid {
        grid-template-columns: 1fr;
    }
}

.o2o-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.o2o-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #0284c7;
}

.o2o-card-thumb-wrap {
    aspect-ratio: 16 / 9;
    background: #f8fafc;
    overflow: hidden;
}

.o2o-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.o2o-card-body {
    padding: 1.25rem;
}

.o2o-card-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.o2o-card-tag {
    font-size: 0.75rem;
    color: #0284c7;
    font-weight: 800;
    background: #e0f2fe;
    padding: 0.19rem 0.63rem;
    border-radius: 0.38rem;
}

.o2o-card-rating {
    color: #f59e0b;
    font-size: 0.81rem;
    font-weight: 800;
}

.o2o-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.o2o-card-loc {
    font-size: 0.81rem;
    color: #64748b;
    margin: 0 0 1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.o2o-card-btn-action {
    display: block;
    width: 100%;
    text-align: center;
    background: #0f172a;
    color: #ffffff;
    padding: 0.63rem 0;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.81rem;
    transition: background 0.2s;
}

.o2o-card-btn-action:hover {
    background: #0284c7;
}

.o2o-empty-state {
    text-align: center;
    padding: 5rem 1.25rem;
    background: #f8fafc;
    border-radius: 1rem;
    border: 2px dashed #cbd5e1;
    grid-column: 1 / -1;
}

.o2o-empty-icon {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}

.o2o-empty-msg {
    font-size: 0.94rem;
    color: #64748b;
    font-weight: 700;
    margin: 0;
}

/* 생활법률 전용 스킨 CSS (디자인 100% 보존) */
.law-section-wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.88rem 0.94rem 3.75rem;
}

.law-main-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.56rem;
    padding-bottom: 0.94rem;
    border-bottom: 1px solid #e2e8f0;
}

.law-nav-chip {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.81rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.law-nav-chip.active, .law-nav-chip:hover {
    background: #0f172a;
    color: #ffffff;
}

.law-section-header-box {
    margin-bottom: 1.56rem;
}

.law-section-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.94rem;
}

.law-section-title {
    font-size: 1.38rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.law-section-icon {
    color: #0284c7;
}

.law-total-badge {
    font-size: 0.81rem;
    color: #64748b;
}

.law-total-badge strong {
    color: #0284c7;
}

.law-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.law-sub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.35rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.law-sub-chip span {
    color: #1d4ed8;
    font-weight: 700;
}

.law-sub-chip.active, .law-sub-chip.active-parent, .law-sub-chip:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.law-sub-chip.active span, .law-sub-chip.active-parent span {
    color: #ffffff;
}

.law-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.law-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    transition: all 0.2s;
}

.law-card-item:hover {
    border-color: #0284c7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.law-card-body {
    flex: 1;
}

.law-card-meta {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    margin-bottom: 0.5rem;
}

.law-badge-sub {
    font-size: 0.69rem;
    font-weight: 800;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 0.5rem;
    border-radius: 0.25rem;
}

.law-badge-cat {
    font-size: 0.69rem;
    color: #64748b;
}

.law-meta-date {
    font-size: 0.69rem;
    color: #94a3b8;
    margin-left: auto;
}

.law-card-title {
    font-size: 1.06rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}

.law-card-title a {
    color: #0f172a;
    text-decoration: none;
}

.law-card-title a:hover {
    color: #0284c7;
}

.law-card-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.law-card-action {
    flex-shrink: 0;
}

.law-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.63rem 1.13rem;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s;
}

.law-view-btn:hover {
    background: #0284c7;
}

.law-empty-state {
    text-align: center;
    padding: 3.75rem 1.25rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 2px dashed #cbd5e1;
}

.law-empty-icon {
    font-size: 2.25rem;
    color: #94a3b8;
    margin-bottom: 0.63rem;
}

.law-empty-text {
    font-size: 0.88rem;
    color: #64748b;
    font-weight: 600;
    margin: 0;
}

.law-pagination {
    text-align: center;
    margin-top: 2.19rem;
}

/* ==========================================================================
   [코라이브] 베타 테스트 & 데이터 품질 투명성 한 줄 공지 띠배너 및 모달 스타일
   ========================================================================== */
.kol-beta-bar {
    background: var(--primary-dark);
    color: #e2e8f0;
    font-size: 0.78rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kol-beta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
        max-width: var(--container-width);
    margin: 0 auto;
}

.kol-beta-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.kol-beta-msg:hover {
    opacity: 0.85;
}

.kol-beta-tag {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.69rem;
    font-weight: 800;
    padding: 2px 0.44rem;
    border-radius: 0.25rem;
    letter-spacing: 0.5px;
}

.kol-beta-text {
    color: #f1f5f9;
    font-weight: 500;
}

.kol-beta-link-hint {
    color: #38bdf8;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 0.25rem;
}

.kol-beta-right-status {
    font-size: 0.72rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
}

/* 공지 모달 스타일 */
.kol-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.31rem);
}

.kol-modal-container {
    background: #ffffff;
    width: 92%;
    max-width: 40rem;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 1.13rem;
    padding: 2rem 1.88rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

.kol-modal-close-x {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #f1f5f9;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.kol-modal-close-x:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.kol-modal-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.19rem 0.63rem;
    border-radius: 1.25rem;
    margin-bottom: 0.5rem;
}

.kol-modal-title {
    font-size: 1.31rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 1rem 0;
    line-height: 1.35;
    letter-spacing: -0.0.31rem;
}

.kol-modal-body-scroll {
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.kol-modal-sec {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.13rem;
    margin-bottom: 0.88rem;
}

.kol-modal-sec-h4 {
    font-size: 0.91rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}

.kol-modal-sec-p {
    margin: 0;
    font-size: 0.81rem;
    color: #475569;
    line-height: 1.65;
}

.kol-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.13rem;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 0.63rem;
}

.kol-modal-btn-close {
    padding: 0.63rem 1.5rem;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.kol-modal-btn-close:hover {
    background: #0369a1;
}






/* ==========================================================================
   [Auto Refactored] External Styles Extracted from Theme PHP Files
   ========================================================================== */

/* Extracted <style> from community/index.php */
/* 커뮤니티 신설 건의 배너 (클린 화이트 & 슬레이트) */
.comm-sugg-banner {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (max-width: 768px) {
    .comm-sugg-banner { flex-direction: column; text-align: center; }
}
.comm-sugg-title {
    font-size: 1.06rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}
.comm-sugg-desc {
    font-size: 0.81rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
.btn-comm-sugg {
    padding: 0.63rem 1.25rem;
    background: var(--primary, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.btn-comm-sugg:hover { background: var(--primary-hover, #1d4ed8); }

/* 토론광장 메인 건의 배너 (클린 화이트 & 슬레이트) */
.ds-sugg-banner {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: #0f172a;
    margin-bottom: 1.75rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (max-width: 900px) {
    .ds-sugg-banner { grid-template-columns: 1fr; }
}
.ds-sugg-left h2 {
    font-size: 1.13rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ds-sugg-left p {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0 0 0.94rem 0;
    line-height: 1.6;
}
.btn-open-sugg-modal {
    padding: 0.63rem 1.25rem;
    background: var(--primary, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-open-sugg-modal:hover {
    background: var(--primary-hover, #1d4ed8);
}
.ds-voting-card {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.13rem;
}
.ds-vc-badge {
    display: inline-block;
    font-size: 0.69rem;
    font-weight: 800;
    background: #e0f2fe;
    color: #0284c7;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}
.ds-vc-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0.5rem 0 0.38rem 0;
}
.ds-vc-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
.ds-vc-title {
    font-size: 0.94rem;
    font-weight: 800;
    margin: 0 0 0.38rem 0;
    color: #ffffff;
}
.ds-vc-desc {
    font-size: 0.78rem;
    color: #cbd5e1;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}
.ds-vc-bar-wrap {
    height: 0.5rem;
    background: #334155;
    border-radius: 0.25rem;
    overflow: hidden;
    display: flex;
    margin-bottom: 0.63rem;
}
.ds-vc-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.63rem;
}
.btn-vote-act {
    flex: 1;
    padding: 0.38rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.38rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-vote-pro { background: #16a34a; color: #fff; }
.btn-vote-con { background: #e11d48; color: #fff; }
.btn-vote-pro:hover { background: #15803d; }
.btn-vote-con:hover { background: #be123c; }

/* 헤더 내부 칩 링크 스타일 */
.ds-header-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.13rem;
    padding-top: 1.13rem;
    border-top: 1px solid #f1f5f9;
}
.ds-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    background: #f8fafc;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.15s;
}
.ds-chip-link:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    transform: translateY(-1px);
}
.ds-chip-cnt {
    font-size: 0.72rem;
    color: #0284c7;
    font-weight: 800;
}
.ds-chip-link:hover .ds-chip-cnt {
    color: #38bdf8;
}

/* 대분류별 섹션 블록 */
.ds-section-block {
    margin: 3rem 0 2rem;
}
.ds-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 1rem; */
    padding-bottom: 0.63rem;
    /* border-bottom: 2px solid #0f172a; */
}
.ds-sec-title {
    font-size: 1.16rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ds-sec-more {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
}
.ds-sec-more:hover { text-decoration: underline; }

/* 3열 카드 그리드 (PC 6개: 3열 2행) */
.ds-section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.13rem;
}
@media (max-width: 960px) {
    .ds-section-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ds-section-grid { grid-template-columns: 1fr; }
}


/* 모달 스타일 */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.25rem);
}
.modal-box {
    background: #ffffff;
    width: 92%;
    max-width: 32.5rem;
    padding: 2rem;
    border-radius: 1.13rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    position: relative;
    box-sizing: border-box;
}
.modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #f1f5f9;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.modal-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}/* Extracted <style> from discussion/view.php */
.ds-view-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.88rem 0.94rem 4.38rem;
    font-family: var(--font-family);
}

.ds-breadcrumb {
    font-size: 0.81rem;
    color: #64748b;
    margin-bottom: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ds-breadcrumb a {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
}
.ds-breadcrumb a:hover {
    color: #0284c7;
}
.ds-breadcrumb .bc-sep {
    color: #94a3b8;
    font-size: 0.75rem;
}
.ds-breadcrumb .ds-cur-cat {
    color: #0284c7;
    font-weight: 800;
}

/* 통일된 표준 분류 칩 리스트 (섹션 메인 및 게시판 리스트 상단 공통) */
.ds-chip-group {
    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;
}
.ds-chip-item {
    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;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}
.ds-chip-item:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
    text-decoration: none;
}
.ds-chip-item.active {
    background: #1d4ed8;
    color: #ffffff !important;
    border-color: #1d4ed8;
    font-weight: 700;
}
.ds-chip-item.active span {
    color: #ffffff !important;
}
.ds-chip-item .chip-cnt {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
}
.ds-chip-item.active .chip-cnt {
    opacity: 0.95;
    color: #ffffff;
}

.ds-header-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2.19rem 1.88rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.56rem;
}

.ds-badge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.94rem;
}

.ds-cat-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 0.88rem;
}

.ds-kw-badge {
    background: #f1f5f9;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.63rem;
    border-radius: 0.88rem;
    margin-left: 0.38rem;
}

.ds-view-title {
    font-size: 1.56rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 0.94rem 0;
}

.ds-view-meta {
    display: flex;
    gap: 0.94rem;
    font-size: 0.81rem;
    color: #64748b;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.ds-sec-title {
    font-size: 1.06rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-intro-box {
    background: #f8fafc;
    border-left: 0.25rem solid #0284c7;
    padding: 1.13rem 1.38rem;
    border-radius: 0.38rem;
    font-size: 0.91rem;
    color: #334155;
    line-height: 1.7;
}

.ds-body-text {
    font-size: 0.94rem;
    color: #334155;
    line-height: 1.8;
}

.ds-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.88rem;
}

@media (max-width: 768px) {
    .ds-compare-grid { grid-template-columns: 1fr; }
}

.ds-pro-card {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 0.75rem;
    padding: 1.38rem;
}

.ds-con-card {
    background: #fff1f2;
    border: 1.5px solid #fecdd3;
    border-radius: 0.75rem;
    padding: 1.38rem;
}

.ds-card-h4 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}
.ds-pro-card .ds-card-h4 { color: #16a34a; }
.ds-con-card .ds-card-h4 { color: #e11d48; }

.ds-card-p {
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0;
}
.ds-pro-card .ds-card-p { color: #15803d; }
.ds-con-card .ds-card-p { color: #be123c; }

/* 투표 및 유도 바 */
.ds-vote-station {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    padding: 1.88rem;
    text-align: center;
    margin-top: 1.88rem;
}

.ds-vote-gauge-wrap {
    margin: 1.25rem auto;
    max-width: 37.5rem;
}

.ds-vote-gauge-bar {
    height: 1.13rem;
    background: #e2e8f0;
    border-radius: 0.56rem;
    overflow: hidden;
    display: flex;
}

.ds-vote-buttons {
    display: flex;
    justify-content: center;
    gap: 0.94rem;
    margin-top: 1.56rem;
}

.btn-cast-pro {
    padding: 0.75rem 1.88rem;
    background: #16a34a;
    color: #ffffff;
    border-radius: 0.63rem;
    font-size: 0.94rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cast-con {
    padding: 0.75rem 1.88rem;
    background: #e11d48;
    color: #ffffff;
    border-radius: 0.63rem;
    font-size: 0.94rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-cast-pro:hover { background: #15803d; transform: scale(1.02); }
.btn-cast-con:hover { background: #be123c; transform: scale(1.02); }

/* 시민 찬반 토론 공론장 피드 스타일 */
.ds-comments-section {
    margin-top: 2.5rem;
}

.ds-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.94rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #0f172a;
}

.ds-comments-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ds-filter-tabs {
    display: flex;
    gap: 0.5rem;
}

.ds-filter-btn {
    padding: 0.44rem 1rem;
    border-radius: 1.25rem;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.ds-filter-btn.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

/* 의견 작성 폼 */
.ds-comment-form-wrap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.5rem;
    margin-bottom: 1.88rem;
}

.ds-form-vote-select {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.94rem;
}

.ds-vote-radio-label {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.91rem;
    font-weight: 700;
    cursor: pointer;
}
.ds-vote-radio-label.pro { color: #16a34a; }
.ds-vote-radio-label.con { color: #e11d48; }

.ds-comment-textarea {
    width: 100%;
    min-height: 6.25rem;
    padding: 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.63rem;
    font-size: 0.91rem;
    line-height: 1.6;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.ds-comment-textarea:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2,132,199,0.1);
}

.btn-submit-opinion {
    margin-top: 0.75rem;
    padding: 0.75rem 1.75rem;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.91rem;
    font-weight: 700;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    float: right;
    transition: background 0.15s;
}
.btn-submit-opinion:hover { background: #0369a1; }

/* 의견 아이템 리스트 */
.ds-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ds-comment-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.15s, border-color 0.15s;
}
.ds-comment-item:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.ds-comment-item.vote-agree { border-left: 0.25rem solid #16a34a; }
.ds-comment-item.vote-disagree { border-left: 0.25rem solid #e11d48; }

.ds-c-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ds-c-user-info {
    display: flex;
    align-items: center;
    gap: 0.63rem;
}

.ds-vote-tag {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.ds-vote-tag.agree { background: #dcfce7; color: #166534; }
.ds-vote-tag.disagree { background: #fee2e2; color: #991b1b; }

.ds-c-nick {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1e293b;
}

.ds-c-date {
    font-size: 0.78rem;
    color: #94a3b8;
}

.ds-c-body {
    font-size: 0.91rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 0.88rem;
    word-break: break-word;
}

.ds-c-bottom {
    display: flex;
    justify-content: flex-end;
}

.btn-like-comment {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.31rem 0.75rem;
    border-radius: 0.38rem;
    font-size: 0.78rem;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.31rem;
    transition: all 0.15s;
}
.btn-like-comment:hover {
    background: #f1f5f9;
    color: #0284c7;
    border-color: #cbd5e1;
}

.ds-bottom-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
}
.btn-back-portal {
    padding: 0.75rem 1.5rem;
    background: #0f172a;
    color: #ffffff;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
}/* Extracted <style> from head.php */
.kol-beta-msg {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.kol-beta-msg:hover { opacity: 0.85; }
.kol-beta-tag {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.69rem;
    font-weight: 800;
    padding: 2px 0.44rem;
    border-radius: 0.25rem;
    letter-spacing: 0.5px;
}
.kol-beta-text { color: #f1f5f9; font-weight: 500; }
.kol-beta-link-hint { color: #38bdf8; font-weight: 700; text-decoration: underline; margin-left: 0.25rem; }
.kol-beta-right-status { font-size: 0.72rem; color: #94a3b8; display: inline-flex; align-items: center; gap: 0.31rem; }

/* 모달 오버레이 및 팝업 창 */
.kol-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    z-index: 9999999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.38rem);
}
.kol-modal-container {
    background: #ffffff;
    width: 92%;
    max-width: 38.75rem;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 1.13rem;
    padding: 1.88rem 1.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    text-align: left;
}
.kol-modal-close-x {
    position: absolute;
    top: 1.13rem;
    right: 1.13rem;
    background: #f1f5f9;
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.kol-modal-close-x:hover { background: #e2e8f0; color: #0f172a; }
.kol-modal-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0284c7;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.19rem 0.63rem;
    border-radius: 1.25rem;
    margin-bottom: 0.38rem;
}
.kol-modal-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.88rem 0;
    line-height: 1.35;
    letter-spacing: -0.0.31rem;
}
.kol-modal-body-scroll {
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}
.kol-modal-sec {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.88rem 1rem;
    margin-bottom: 0.75rem;
}
.kol-modal-sec-h4 {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
}
.kol-modal-sec-p {
    margin: 0;
    font-size: 0.81rem;
    color: #475569;
    line-height: 1.65;
}
.kol-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 0.63rem;
}
.kol-modal-btn-close {
    padding: 0.56rem 1.38rem;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.law-ai-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.88rem 0.94rem 4.38rem;
}
.law-ai-hero-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 1.25rem;
    padding: 2.81rem 2.19rem;
    color: #ffffff;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2);
}
.law-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.88rem;
    border-radius: 1.25rem;
    background: rgba(2, 132, 199, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.13rem;
}
.law-ai-hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
}
.law-ai-hero-desc {
    font-size: 0.88rem;
    color: #94a3b8;
    margin: 0 0 1.75rem 0;
    line-height: 1.6;
}
.law-ai-prompt-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0.38rem 0.38rem 0.38rem 1.13rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.25rem;
}
.law-ai-prompt-icon {
    font-size: 1.13rem;
    color: #0284c7;
    margin-right: 0.75rem;
}
.law-ai-prompt-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.94rem;
    color: #0f172a;
    background: transparent;
}
.law-ai-prompt-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    background: #0284c7;
    color: #ffffff;
    border: none;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.law-ai-prompt-submit:hover {
    background: #0369a1;
}
.law-ai-chips-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.63rem;
}
.law-ai-chips-label {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}
.law-ai-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.law-ai-chip-link {
    padding: 0.38rem 0.75rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
}
.law-ai-chip-link:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}
.law-section-heading {
    font-size: 1.13rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.law-scenario-section {
    margin-bottom: 2.5rem;
}
.law-scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .law-scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .law-scenario-grid {
        grid-template-columns: 1fr;
    }
}
.law-scenario-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.25rem;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.law-scenario-card:hover {
    border-color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.law-scenario-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.13rem;
    margin-bottom: 0.75rem;
}
.law-scenario-icon-blue { background: #e0f2fe; color: #0284c7; }
.law-scenario-icon-emerald { background: #d1fae5; color: #059669; }
.law-scenario-icon-amber { background: #fef3c7; color: #d97706; }
.law-scenario-icon-indigo { background: #e0e7ff; color: #4f46e5; }
.law-scenario-tag {
    font-size: 0.69rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.38rem;
}
.law-scenario-title {
    font-size: 0.94rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
    line-height: 1.4;
}
.law-scenario-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
.news-hero-card {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 1.88rem;
}
.news-hero-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    text-decoration: none;
    color: inherit;
}
@media (max-width: 768px) {
    .news-hero-link {
        grid-template-columns: 1fr;
    }
}
.law-clusters-section {
    margin-bottom: 2.5rem;
}
/* .law-cluster-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
} */
.news-hero-link.has-hero-img {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.news-hero-link.no-hero-img {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
@media (max-width: 768px) {
    .news-hero-link.has-hero-img {
        grid-template-columns: 1fr;
    }
}
.news-hero-img-wrap {
    height: 17.5rem;
    overflow: hidden;
    background: #f1f5f9;
    min-width: 0;
}
.law-cluster-tab-btn {
    padding: 0.63rem 1.13rem;
    border-radius: 0.63rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.law-cluster-tab-btn.active, .law-cluster-tab-btn:hover {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.law-cluster-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.13rem;
}
@media (max-width: 768px) {
    .law-cluster-content {
        grid-template-columns: 1fr;
    }
}
.law-cluster-category-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.38rem;
}
.law-cluster-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.88rem;
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #f1f5f9;
}
.law-cluster-cat-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.law-cluster-cat-title a {
    color: #0f172a;
    text-decoration: none;
}
.law-cluster-cat-title a:hover {
    color: #0284c7;
}
.law-cluster-cat-title i {
    color: #0284c7;
}
.law-cluster-cat-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 0.19rem 0.5rem;
    border-radius: 0.75rem;
}
.law-cluster-sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}
.law-cluster-sub-chip {
    display: inline-block;
    padding: 0.31rem 0.63rem;
    border-radius: 0.38rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}
.law-cluster-sub-chip:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

/* Extracted <style> from law/search.php */
.law-search-wrap {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 1.88rem 0.94rem 3.75rem;
}
.law-search-header-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: center;
}
.law-search-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}
.law-search-subtitle {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 1.5rem 0;
}
.law-search-form {
    display: flex;
    gap: 0.63rem;
    max-width: 47.5rem;
    margin: 0 auto 1.25rem;
}
.law-search-select {
    padding: 0.75rem 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.63rem;
    font-size: 0.88rem;
    color: #334155;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
}
.law-search-input-wrap {
    flex: 1;
    display: flex;
    position: relative;
}
.law-search-input {
    width: 100%;
    padding: 0.75rem 6.25rem 0.75rem 1.13rem;
    border: 1.5px solid #0284c7;
    border-radius: 0.63rem;
    font-size: 0.88rem;
    outline: none;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
}
.law-search-submit {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    bottom: 0.25rem;
    padding: 0 1.25rem;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.law-search-submit:hover {
    background: #0369a1;
}
.law-search-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.chip-label {
    color: #94a3b8;
    font-weight: 600;
}
.law-search-quick-chip {
    padding: 0.25rem 0.63rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 0.38rem;
    text-decoration: none;
    transition: all 0.15s;
}
.law-search-quick-chip:hover {
    background: #e0f2fe;
    color: #0284c7;
    font-weight: 700;
}
.law-search-meta-bar {
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    color: #334155;
}
.law-search-meta-bar strong {
    color: #0284c7;
}
.law-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.law-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: all 0.2s ease;
}
.law-card-item:hover {
    border-color: #0284c7;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08);
    transform: translateY(-2px);
}
.law-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.63rem;
}
.law-badge-main {
    font-size: 0.69rem;
    font-weight: 800;
    color: #ffffff;
    background: #0f172a;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.law-badge-sub {
    font-size: 0.69rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.law-badge-cat {
    font-size: 0.69rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.law-meta-hit {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: auto;
}
.law-card-title {
    font-size: 1.06rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.law-card-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s;
}
.law-card-title a:hover {
    color: #0284c7;
}
.law-card-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    .law-search-form {
        flex-direction: column;
    }
}/* Extracted <style> from mobile/skin/member/basic/consent_modal.inc.php */
#consentDialog { padding: 0; border: none; border-radius: 0.75rem; }
#consentDialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(0.31rem);}
.cd-card { max-width: 35rem; background: #fff; border-radius: 0.75rem; }
.cd-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.cd-title { margin: 0; font-size: 1.13rem; font-weight: bold; word-break: keep-all; }
.cd-body { max-height: 31.25rem; overflow-y: auto; padding: 1rem; border-top: 1px solid #e6e6e9; border-bottom: 1px solid #e6e6e9; line-height: 1.6; font-size: 0.88rem; color: #222; }
.cd-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1rem 1rem; }
.cd-actions .cd-agree { padding: 0.5rem 0.88rem; border: 1px solid #3a8afd; background: #3a8afd; color: #fff; border-radius: 0.5rem; }
.cd-actions .cd-close { padding: 0.5rem 0.88rem; border: 1px solid #ccc; background: #fff; color: #111; border-radius: 0.5rem; }

/* Extracted <style> from mypage/index.php */
.mypage-container {
    max-width: 68.75rem;
    margin: 2.5rem auto 5rem;
    padding: 0 1.25rem;
}
.mypage-header {
    background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
    color: #ffffff;
    border-radius: 1.5rem;
    padding: 2.5rem 2.19rem;
    box-shadow: 0 10px 30px rgba(30, 27, 75, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.mypage-user-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.mypage-avatar {
    width: 4.38rem;
    height: 4.38rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f46e5, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    border: 0.19rem solid rgba(255, 255, 255, 0.3);
}
/* .mypage-nav-tabs {
    display: flex;
    gap: 0.75rem;
    margin: 1.88rem 0;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 2px;
} */
/* .mypage-tab-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    border-bottom: 0.19rem solid transparent;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
} */
/* .mypage-tab-btn.active, .mypage-tab-btn:hover {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
} */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.38rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.19rem;
}
.stat-card {
    background: #ffffff;
    padding: 1.56rem 1.38rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    gap: 1.13rem;
    transition: transform 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
}
.stat-icon {
    width: 3.38rem;
    height: 3.38rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.38rem;
}
.dashboard-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28.13rem, 1fr));
    gap: 1.56rem;
}
.dash-box {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    padding: 1.88rem 1.56rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.dash-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}
.dash-box-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}/* Extracted <style> from skin/board/basic/list.skin.php */
.board-category-nav .category-tabs {
                        display: flex;
                        gap: 0.5rem;
                        flex-wrap: wrap;
                    }

                    .board-category-nav .category-tab {
                        padding: 0.5rem 1rem;
                        border-radius: 0.25rem;
                        text-decoration: none;
                        color: #586069;
                        font-size: 0.9rem;
                        transition: all 0.2s;
                        border: 1px solid transparent;
                    }

                    .board-category-nav .category-tab:hover {
                        background: white;
                        color: #0969da;
                        border-color: #d0d7de;
                    }

                    .board-category-nav .category-tab.active {
                        background: #0969da;
                        color: white;
                        font-weight: 500;
                    }/* Extracted <style> from skin/member/basic/consent_modal.inc.php */
#consentDialog { padding: 0; border: none; border-radius: 0.75rem; }
#consentDialog::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(0.31rem);}
.cd-card { min-width: 20rem; max-width: 35rem; background: #fff; border-radius: 0.75rem; }
.cd-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.cd-title { margin: 0; font-size: 1.13rem; font-weight: bold; }
.cd-body { max-height: 31.25rem; overflow-y: auto; padding: 1rem; border-top: 1px solid #e6e6e9; border-bottom: 1px solid #e6e6e9; line-height: 1.6; font-size: 0.88rem; color: #222; }
.cd-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1rem 1rem; }
.cd-actions .cd-agree { padding: 0.5rem 0.88rem; border: 1px solid #3a8afd; background: #3a8afd; color: #fff; border-radius: 0.5rem; }
.cd-actions .cd-close { padding: 0.5rem 0.88rem; border: 1px solid #ccc; background: #fff; color: #111; border-radius: 0.5rem; }/* Extracted <style> from skin/shop/basic/listcategory_premium.skin.php */
.premium-cate-tabs { margin: 1.25rem 0; border-bottom: 2px solid #eee; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; background: #fff; position: sticky; top: 0; z-index: 10; }
    .premium-cate-tabs::-webkit-scrollbar { display: none; }
    .premium-cate-tabs ul { display: flex; list-style: none; padding: 0; margin: 0; }
    .premium-cate-tabs li { margin-right: 0.31rem; }
    .premium-cate-tabs a { display: block; padding: 0.94rem 1.56rem; text-decoration: none; color: #666; font-size: 1rem; font-weight: 500; transition: all 0.3s ease; position: relative; }
    .premium-cate-tabs a:hover { color: #000; }
    .premium-cate-tabs a.active { color: #007bff; font-weight: 700; }
    .premium-cate-tabs a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 0.19rem; background: #007bff; border-radius: 0.19rem 0.19rem 0 0; }
    .premium-cate-title { font-size: 0.88rem; color: #999; margin-bottom: 0.63rem; font-weight: 400; padding-left: 0.31rem; }

/* 2차 잔여 인라인 스타일 추출 클래스 */
.kol-rate-bar-pro { background: #10b981; }
.kol-rate-bar-con { background: #f43f5e; }
.kol-donation-img-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #e2e8f0; }
.kol-donation-img { width: 100%; height: 100%; object-fit: cover; }
.kol-donation-title-link { color: #0f172a; text-decoration: none; }
.kol-cursor-pointer { cursor: pointer; }
.kol-btn-indigo { background: #4f46e5; color: #ffffff; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem; padding: 0.38rem 0.88rem; text-decoration: none; }
.kol-link-indigo { font-size: 0.85rem; color: #4f46e5; font-weight: 700; text-decoration: none; }
.kol-link-dark { color: #0f172a; text-decoration: none; }
.kol-ads-link { display: inline-block; font-size: 0.75rem; font-weight: 700; color: #0284c7; text-decoration: none; }
.kol-btn-debate-write { padding: 0.63rem 1.13rem; background: #0284c7; color: #fff; border-radius: 0.63rem; font-weight: 800; font-size: 0.84rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.38rem; }
.kol-hidden-textarea { display: none; }
.kol-btn-pad-11-24 { padding: 0.69rem 1.5rem; font-weight: 700; text-decoration: none; }

/* 마지막 5개 파일 전용 클래스 */
.kol-mypage-btn-modify { background: rgba(255,255,255,0.15); color: white; padding: 0.63rem 1.25rem; border-radius: 0.75rem; font-weight: 700; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); }
.kol-mypage-scrap-link { color: #1e293b; font-weight: 700; text-decoration: none; margin-left: 0.38rem; font-size: 0.95rem; }
.kol-btn-write-primary { background: #2563eb; text-decoration: none; }
.kol-law-mode-btn { padding: 0.38rem 0.75rem; text-decoration: none; }
.kol-law-mode-btn.active { background: #0f172a; color: #fff; }
.kol-law-mode-btn:not(.active) { background: #fff; color: #64748b; }
.kol-popular-link { color: #334155; text-decoration: none; font-weight: 600; }
.law-cluster-content:not(.active) { display: none; }

/* 시각적 결함 보정 스타일 */
.kol-btn-pad-11-24 {
    width: auto;
    height: auto;
    padding: 0.69rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.news-hero-link {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.news-hero-img-wrap {
    min-width: 0;
    height: 17.5rem;
    overflow: hidden;
    background: #e2e8f0;
    position: relative;
}

.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-hero-content {
    min-width: 0;
    overflow: hidden;
    padding: 1.75rem;
}

.news-hero-title-text {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* GNB 호버 드롭다운 명확화 */
.gnb-menu-group:hover .gnb-mega-dropdown {
    display: grid;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 회원가입/인증 페이지 버튼 전역 스타일 (custom.css) */
.auth-btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    width: 100%;
}

.auth-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.auth-btn-secondary:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.auth-btn-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(2,132,199,0.25);
}
.auth-btn-primary-link:hover {
    background: #0369a1;
}

/* ==========================================================================
   Contents Card Placeholder & Utilities (REM Standard)
   ========================================================================== */
.cnt-pill-clean {
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.63rem;
    border-radius: 0.75rem;
}
.funding-image-wrap {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    background: #f8fafc;
}
.funding-image-inner {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}
.sct_li:hover .funding-image-inner {
    transform: scale(1.05);
}
.funding-placeholder-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.funding-placeholder-card.ph-novel {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    color: #2563eb;
}
.funding-placeholder-card.ph-webtoon {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-color: #fbcfe8;
    color: #db2777;
}
.funding-placeholder-card.ph-audio {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #ddd6fe;
    color: #7c3aed;
}
.funding-placeholder-card.ph-tutor {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #bbf7d0;
    color: #16a34a;
}
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
}
.placeholder-content i {
    font-size: 2rem;
}
.creator-avatar-icon {
    font-size: 1.13rem;
    color: #94a3b8;
}
.contents-ca-badge {
    font-size: 0.69rem;
    background: #e0f2fe;
    color: #0284c7;
    padding: 0.13rem 0.38rem;
    border-radius: 0.25rem;
    margin-left: auto;
    font-weight: 700;
}
.contents-read-link {
    margin-left: auto;
    color: var(--primary, #2563eb);
    font-weight: 700;
}

/* ==========================================================================
   Shop Item Thumbnail Placeholder Styles (REM Standard)
   ========================================================================== */
.shop-p-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
}
.shop-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    color: #64748b;
}
.shop-placeholder-inner i {
    font-size: 2.25rem;
    color: var(--primary, #2563eb);
}
/* ==========================================================================
   Law Portal Latest Articles Feed Section (REM Standard)
   ========================================================================== */
.law-latest-section {
    margin-bottom: 2.5rem;
}
.law-latest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.law-latest-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.law-latest-heading i {
    color: #0284c7;
}
.law-latest-see-all {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0284c7;
    text-decoration: none;
}
.law-latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .law-latest-grid {
        grid-template-columns: 1fr;
    }
}
.law-latest-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.law-latest-card:hover {
    border-color: #38bdf8;
    transform: translateY(-0.13rem);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}
.law-latest-badge-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.63rem;
}
.law-latest-board-badge {
    font-size: 0.69rem;
    font-weight: 800;
    background: #e0f2fe;
    color: #0284c7;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.law-latest-cat-badge {
    font-size: 0.69rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 0.19rem 0.5rem;
    border-radius: 0.38rem;
}
.law-latest-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.law-latest-card:hover .law-latest-title {
    color: #0284c7;
}
.law-latest-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 0.88rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.law-latest-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 0.63rem;
    margin-top: auto;
}
.law-latest-meta-left {
    display: flex;
    align-items: center;
    gap: 0.63rem;
}
.law-latest-read-more {
    font-weight: 700;
    color: #0284c7;
}

/* ==========================================================================
   📱 모바일 헤더, 햄버거 메뉴 및 오프캔버스 드로어 반응형 시스템 (표준 규격)
   ========================================================================== */

/* 모바일 전용 토글 버튼 (PC 기본 숨김) */
.btn-mobile-hamburger,
.btn-mobile-search-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: #334155;
    padding: 0.38rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.38rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-mobile-hamburger:hover,
.btn-mobile-search-toggle:hover {
    background: #f1f5f9;
    color: #0284c7;
}

/* 768px 이하 모바일 헤더 반응형 레이아웃 */
@media (max-width: 768px) {
    .kol-beta-bar {
        display: none; /* 모바일 헤더 높이 확보를 위해 최상단 안내바 축소 */
    }
    .header-top-row {
        height: 3.5rem;
        padding: 0 0.5rem;
        position: relative;
    }
    .kol-logo-text {
        font-size: 1.25rem;
    }
    
    /* 모바일 헤더 우측 메뉴 축소 */
    .btn-mobile-hamburger,
    .btn-mobile-search-toggle {
        display: inline-flex;
    }
    .header-user-menu .reward-top-btn,
    .header-user-menu .user-point-badge,
    .header-user-menu .user-link,
    .header-user-menu .logout-link,
    .header-user-menu .login-btn {
        display: none; /* 모바일에서는 드로어로 통합 */
    }
    
    /* 모바일 검색창 슬라이드 다운 토글 */
    .header-search-box {
        display: none;
        position: absolute;
        top: 3.5rem;
        left: 0;
        right: 0;
        margin: 0;
        max-width: 100%;
        background: #ffffff;
        padding: 0.63rem 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
        border-bottom: 1px solid #e2e8f0;
        z-index: 999;
    }
    .header-search-box.is-mobile-active {
        display: block;
    }
    
    /* 모바일에서는 GNB 바 숨김 (상단 햄버거 버튼 및 오프캔버스 드로어로 단일화) */
    .header-gnb-bar {
        display: none !important;
    }
}

/* --- [오프캔버스 드로어 네비게이션] --- */
.kol-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.kol-drawer-overlay.is-open {
    display: block;
    opacity: 1;
}

.kol-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 21.25rem;
    background: #ffffff;
    z-index: 100001;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}
.kol-drawer-panel.is-open {
    transform: translateX(0);
}

.kol-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.drawer-user-nick {
    font-size: 1.06rem;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.drawer-user-meta {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    font-size: 0.78rem;
}
.drawer-point {
    color: #0284c7;
    font-weight: 700;
}
.drawer-mypage-link {
    color: #64748b;
    text-decoration: underline;
}
.drawer-guest-box {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}
.drawer-guest-txt {
    font-size: 0.81rem;
    color: #64748b;
}
.drawer-login-btn {
    display: inline-block;
    padding: 0.38rem 0.88rem;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.38rem;
    text-align: center;
}
.kol-drawer-close-btn {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}

.kol-drawer-search {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}
.drawer-search-wrap {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}
.drawer-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.38rem 0.5rem;
    font-size: 0.84rem;
    outline: none;
}
.drawer-search-btn {
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
}

.kol-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}
.drawer-nav-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    padding: 0.5rem 1.25rem 0.25rem;
    letter-spacing: 0.05em;
}
.drawer-nav-group {
    border-bottom: 1px solid #f8fafc;
}
.drawer-nav-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.drawer-nav-title-row:hover {
    background: #f8fafc;
}
.drawer-nav-main-link {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    font-size: 0.94rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
}
.drawer-icon {
    width: 1.13rem;
    text-align: center;
    color: #0284c7;
}
.drawer-accordion-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}
.drawer-nav-group.is-expanded .drawer-accordion-btn {
    transform: rotate(180deg);
}

.drawer-sub-list {
    display: none;
    background: #f8fafc;
    padding: 0.38rem 0;
    border-top: 1px solid #f1f5f9;
}
.drawer-nav-group.is-expanded .drawer-sub-list {
    display: block;
}
.drawer-sub-item {
    display: block;
    padding: 0.5rem 1.25rem 0.5rem 2.88rem;
    font-size: 0.84rem;
    color: #475569;
    text-decoration: none;
    transition: color 0.15s ease;
}
.drawer-sub-item:hover {
    color: #0284c7;
    font-weight: 700;
}

.kol-drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}
.drawer-footer-link {
    color: #64748b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.31rem;
}
.drawer-footer-link:hover {
    color: #0284c7;
}

/* --- [전역 모바일 그리드 및 레이아웃 반응형 규칙] --- */
@media (max-width: 768px) {
    .container,
    .kol-container,
    .portal-layout,
    .kol-main-wrap,
    .law-view-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box;
    }
    
    .portal-layout {
        flex-direction: column !important;
        gap: 1.25rem !important;
    }
    
    .kol-grid-2,
    .kol-grid-3,
    .kol-grid-4,
    .kol-grid-main-side,
    .law-view-grid,
    .law-scenario-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .portal-sidebar,
    .layout-sidebar,
    .law-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 법률 본문 & 테이블 모바일 가로 오버플로우 방지 */
    .law-body-wrapper {
        padding: 1.13rem 0.88rem !important;
    }
    .law-body-wrapper table,
    .law-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 크리에이터 & 마켓 그리드 2열 반응형 */
    .creator-list,
    .market-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* 푸터 모바일 반응형 완전 복구 */
    .kol-footer {
        padding: 2.5rem 1rem 3rem !important;
    }
    .kol-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .kol-footer-brand {
        grid-column: span 2 !important;
        text-align: left !important;
    }
    .kol-footer-company-info .info-row {
        display: block !important;
    }
    .kol-footer-company-info .sep {
        display: none !important;
    }
    .kol-footer-company-info .info-row span {
        display: inline-block !important;
        margin-right: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    .kol-footer-bottom {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding-top: 1.25rem !important;
        border-top: 1px solid #e2e8f0 !important;
    }
}

/* ==========================================================================
   고객지원 센터 전용 스타일 (rem 표준)
   ========================================================================== */
.support-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 64rem) {
    .support-channel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 40rem) {
    .support-channel-grid {
        grid-template-columns: 1fr;
    }
}

.support-channel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.support-channel-card:hover {
    transform: translateY(-0.19rem);
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06);
    border-color: #0284c7;
}

.channel-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1.15rem;
}
.icon-blue { background: #eff6ff; color: #2563eb; }
.icon-emerald { background: #f0fdf4; color: #16a34a; }
.icon-purple { background: #eff6ff; color: #2563eb; }
.icon-amber { background: #fffbeb; color: #d97706; }

.channel-title {
    font-size: 1.13rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}
.channel-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    flex: 1;
}
.channel-link-text {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0284c7;
}

.support-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 48rem) {
    .support-preview-grid {
        grid-template-columns: 1fr;
    }
}

.support-card-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.5rem;
}
.support-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.88rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1rem;
}
.support-box-title {
    font-size: 1.06rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.support-box-more {
    font-size: 0.78rem;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
}
.support-box-more:hover {
    color: #0284c7;
}

.support-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.support-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.88rem;
}
.support-item-link {
    color: #334155;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.support-item-link:hover {
    color: #0284c7;
}
.support-faq-cat {
    color: #0284c7;
    font-weight: 700;
    margin-right: 0.25rem;
}
.support-item-date {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
}
.support-item-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
}
.support-item-empty i {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    display: block;
    color: #cbd5e1;
}

.support-info-banner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.support-info-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0284c7;
    flex-shrink: 0;
}
.support-info-text h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.38rem 0;
}
.support-info-text p {
    font-size: 0.84rem;
    color: #475569;
    margin: 0 0 0.25rem 0;
    line-height: 1.5;
}
@media (max-width: 40rem) {
    .support-info-banner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* ==========================================================================
   Etertech 스타일 LNB 다중 셀렉트 드롭다운 바 (테마 전역 표준 - 슬림 규격)
   ========================================================================== */
.kol-category-filter-wrap,
.lnb-wrap {
    margin: 0.75rem 0 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    position: relative;
    z-index: 100;
    box-shadow: none;
}

.kol-category-filter-inner,
.lnb-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 2.625rem;
    padding: 0;
}

.category-home-btn,
.lnb-home-btn {
    display: none !important;
}

/* [사용자 지시] category-sep 주석 처리 및 숨김 */
.category-sep,
.lnb-sep {
    display: none !important;
}

/* [사용자 지시] 보더 스타일을 부모 .category-depth 로 넘김 */
.category-depth,
.lnb-depth {
    position: relative;
    flex: 0 1 auto;
    min-width: 10rem;
    height: 2.625rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-right: none;
    border-radius: 0;
    box-sizing: border-box;
}

/* [사용자 지시] 부트스트랩 폼그룹 컴포넌트 스타일: 첫번째/마지막만 라운드, 마지막만 오른쪽 보더 */
.kol-category-filter-inner .category-depth:first-of-type,
.kol-category-filter-inner .category-depth:first-child,
.lnb-inner .lnb-depth:first-of-type,
.lnb-inner .lnb-depth:first-child {
    border-top-left-radius: 0.38rem;
    border-bottom-left-radius: 0.38rem;
}

/* [사용자 지시] 마지막 요소에 오른쪽 보더 및 오른쪽 라운드(radius) 확실히 부여 */
.category-depth.is-last,
.lnb-depth.is-last,
.kol-category-filter-inner .category-depth:nth-last-child(2),
.kol-category-filter-inner .category-depth:last-child,
.lnb-inner .lnb-depth:nth-last-child(2),
.lnb-inner .lnb-depth:last-child {
    border-right: 1px solid #e2e8f0 !important;
    border-top-right-radius: 0.38rem !important;
    border-bottom-right-radius: 0.38rem !important;
}

/* right-info 앞 인접 뎁스 타겟팅 (:has 분리 블록 - 파서 호환성 보장) */
.kol-category-filter-inner .category-depth:has(+ .category-right-info),
.lnb-inner .lnb-depth:has(+ .lnb-right-info) {
    border-right: 1px solid #e2e8f0 !important;
    border-top-right-radius: 0.38rem !important;
    border-bottom-right-radius: 0.38rem !important;
}

/* [사용자 지시] .category-toggle 는 border: none; 만 추가 */
.category-toggle,
.lnb-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 0.88rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: inherit;
    font-size: 0.84rem;
    color: #1e293b;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.15s ease;
}
.category-toggle:hover,
.lnb-toggle:hover {
    background: #f8fafc;
}

.category-toggle:disabled,
.category-toggle.is-disabled,
.lnb-toggle:disabled,
.lnb-toggle.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f8fafc;
    pointer-events: none;
}

.category-toggle::after,
.lnb-toggle::after {
    content: '\f107';
    font-family: 'FontAwesome', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.81rem;
    color: #64748b;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.category-depth.open .category-toggle::after,
.lnb-depth.open .lnb-toggle::after {
    transform: rotate(180deg);
    color: #2563eb;
}

.category-list,
.lnb-list {
    display: none;
    position: absolute;
    top: 2.625rem;
    left: 0;
    width: auto;
    min-width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    max-height: 20rem;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
    border-radius: 0 0 0.38rem 0.38rem;
}

.category-depth.open .category-list,
.lnb-depth.open .lnb-list {
    display: block;
}

.category-list li,
.lnb-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-list li a,
.lnb-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.88rem;
    font-size: 0.81rem;
    color: #334155;
    text-decoration: none;
    border-bottom: 1px solid #f8fafc;
    transition: all 0.15s ease;
    white-space: nowrap;
    gap: 1rem;
}

.category-list li:last-child a,
.lnb-list li:last-child a {
    border-bottom: none;
}

.category-list li.is-parent a,
.lnb-list li.is-parent a {
    background: #f8fafc;
    font-weight: 700;
    color: #1e293b;
}

.category-list li.is-child a,
.lnb-list li.is-child a {
    padding-left: 1.5rem;
    color: #64748b;
}

.category-list li a:hover,
.category-list li.active a,
.lnb-list li a:hover,
.lnb-list li.active a {
    background: #fff5f8;
    color: #ff007f;
    font-weight: 700;
}

.category-list li a .cat-num,
.lnb-list li a .cat-num {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}
.category-list li.active a .cat-num,
.lnb-list li.active a .cat-num {
    color: #ff007f;
}

.category-right-info,
.lnb-right-info {
    margin-left: auto;
    padding-right: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #64748b;
}
/* [사용자 지시] active-badge 및 category-reset-btn 비노출 처리 */
.category-right-info .active-badge,
.lnb-right-info .active-badge,
.category-reset-btn,
.lnb-reset-btn {
    display: none !important;
}
.category-total-hint,
.lnb-total-hint {
    color: #94a3b8;
}
.category-total-hint strong,
.lnb-total-hint strong {
    color: #0f172a;
}

@media (max-width: 992px) {
    .category-depth,
    .lnb-depth {
        flex: 1;
        width: auto;
        min-width: 0;
    }
    .category-right-info,
    .lnb-right-info {
        display: none;
    }
}

@media (max-width: 768px) {
    .category-home-btn,
    .lnb-home-btn {
        width: 3rem;
        height: 3rem;
    }
    .category-depth,
    .lnb-depth {
        height: 3rem;
    }
    .category-toggle,
    .lnb-toggle {
        padding: 0 0.75rem;
        font-size: 0.81rem;
    }
    .category-list,
    .lnb-list {
        top: 3rem;
    }
    .category-list li a,
    .lnb-list li a {
        padding: 0.63rem 0.88rem;
        font-size: 0.81rem;
    }
}

/* 리스트 상단 선택된 카테고리 헤딩 타이틀 (전 섹션 공통 표준) */
.comm-list-selected-heading {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comm-selected-category-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-selected-category-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

/* ==========================================================================
   스킨 공통 클린 UI 클래스 (rem 표준)
   ========================================================================== */
.kol-write-group-flex {
    flex: 1;
    min-width: 12rem;
    margin-bottom: 0;
}
.kol-autosave-close-wrap {
    text-align: right;
    margin-top: 0.5rem;
}
.kol-form-file {
    padding: 0.5rem;
}
.kol-mt-1 {
    margin-top: 0.38rem;
}
.kol-kw-autocomplete-list {
    display: none;
}
.law-updated-badge {
    color: #0284c7;
    background: #e0f2fe;
    padding: 0.15rem 0.5rem;
    border-radius: 0.38rem;
}
.law-update-notice-card {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.law-update-notice-desc {
    line-height: 1.6;
    font-weight: 600;
}
.kol-doc-th-num { width: 4.38rem; text-align: center; }
.kol-doc-th-cat { width: 7.5rem; }
.kol-doc-th-writer { width: 8.13rem; text-align: center; }
.kol-doc-th-hit { width: 5rem; text-align: center; }
.kol-doc-th-date { width: 6.25rem; text-align: center; }
.kol-doc-td-empty {
    text-align: center;
    padding: 3.5rem;
    color: #94a3b8;
}
.kol-doc-td-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}
.kol-doc-td-date {
    font-size: 0.81rem;
    color: #475569;
}
.kol-doc-td-writer {
    font-size: 0.81rem;
    color: #475569;
}
.text-danger { color: #ef4444 !important; }
.text-primary { color: #2563eb !important; }
.text-success { color: #10b981 !important; }
.text-warning { color: #f59e0b !important; }
.text-info { color: #0ea5e9 !important; }

/* 게이지 바 공통 트랜지션 (인라인 style 대체) */
.ds-bar-agree, .ds-bar-disagree, .battle-gauge-pro, .battle-gauge-con, .ds-vote-station-bar-pro, .ds-vote-station-bar-con, .donation-progress-fill, .agree-bar, .disagree-bar {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 커뮤니티 가이드 모달 컴포넌트 */
.comm-modal-md {
    max-width: 37.5rem !important;
}
.comm-guide-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: #334155;
}
.comm-guide-item {
    margin-bottom: 0.94rem;
}
.comm-guide-item-title {
    color: #0f172a;
    font-size: 0.94rem;
}
.comm-guide-item-desc {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.81rem;
}
.w-full {
    width: 100% !important;
}





/* 마이페이지 1:1 상담 대시보드 전용 클래스 (.cursorrules 표준 준수) */
.stat-icon.qa { background: #eff6ff; color: #2563eb; }
.dash-box.full-width { grid-column: 1 / -1; }
.dash-box-title i { color: #2563eb; }
.dash-header-actions { display: flex; gap: 0.63rem; align-items: center; }
.btn-mypage-qa-write { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.31rem 0.75rem; font-size: 0.78rem; font-weight: 700; background: #2563eb; color: #ffffff; border-radius: 0.38rem; text-decoration: none; }
.btn-mypage-qa-write:hover { background: #1d4ed8; color: #ffffff; }
.mypage-dash-left { display: flex; align-items: center; gap: 0.5rem; }
.qa-status-done { font-size: 0.72rem; font-weight: 700; color: #16a34a; background: #f0fdf4; border: 1px solid #86efac; padding: 0.13rem 0.5rem; border-radius: 0.63rem; }
.qa-status-wait { font-size: 0.72rem; font-weight: 700; color: #d97706; background: #fef3c7; border: 1px solid #fde68a; padding: 0.13rem 0.5rem; border-radius: 0.63rem; }

/* ==========================================================================
   모바일 전역 하단 고정 탭바 (Global Bottom Navigation Bar)
   - 메인 / SNS / 컨텐츠 / 마이페이지 4대 허브 직결
   ========================================================================== */
.kol-global-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.75rem;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -0.25rem 1rem rgba(15, 23, 42, 0.06);
    z-index: 9990;
    align-items: center;
    justify-content: space-around;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

.kol-bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #64748b;
    text-decoration: none;
    font-size: 0.69rem;
    font-weight: 600;
    gap: 0.25rem;
    transition: color 0.15s ease;
}

.kol-bottom-tab-item i {
    font-size: 1.13rem;
}

.kol-bottom-tab-item.active {
    color: #2563eb;
    font-weight: 800;
}

@media (max-width: 640px) {
    .kol-global-bottom-bar {
        display: flex;
    }
    body {
        padding-bottom: 4rem;
    }
}

/* ==========================================================================
   포털 메인 좌측 LNB (Sticky Navigation)
   ========================================================================== */
.portal-lnb-sidebar {
    width: 13.5rem;
    flex-shrink: 0;
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal-lnb-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.88rem;
    padding: 0.88rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.portal-lnb-title {
    font-size: 0.81rem;
    font-weight: 800;
    color: #475569;
    padding: 0.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.5rem;
}

.portal-lnb-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portal-lnb-item {
    display: flex;
    align-items: center;
    gap: 0.63rem;
    padding: 0.56rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

.portal-lnb-item:hover {
    background: #eff6ff;
    color: #2563eb;
    transform: translateX(0.19rem);
}

.portal-lnb-item.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.portal-lnb-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 0.94rem;
    color: #64748b;
}

.portal-lnb-item:hover i {
    color: #2563eb;
}

@media (max-width: 1199px) {
    .portal-lnb-sidebar {
        display: none !important;
    }
}

/* ==========================================================================
   포털 메인 섹션 큐레이션 (카드 스타일 전면 배제, 플랫 포털 라인 시스템)
   ========================================================================== */
.portal-sec-box,
.portal-sec-card-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 2.25rem;
}

.portal-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #0f172a;
}

.portal-sec-title {
    font-size: 1.13rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-sec-more {
    font-size: 0.81rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s;
}

.portal-sec-more:hover {
    color: #2563eb;
}

/* 포털 컨텐츠/SNS 미니 3:4 그리드 */
.portal-mini-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.88rem;
}

@media (max-width: 768px) {
    .portal-mini-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.portal-mini-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portal-mini-card:hover {
    transform: translateY(-0.19rem);
    box-shadow: 0 0.38rem 0.88rem rgba(15, 23, 42, 0.08);
    border-color: #bfdbfe;
}

.portal-mini-thumb {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    overflow: hidden;
}

.portal-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-mini-info {
    padding: 0.63rem;
}

.portal-mini-title {
    font-size: 0.81rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-mini-sub {
    font-size: 0.69rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
}

/* ==========================================================================
   플랫폼 공통 유틸리티 (인라인 style Zero Tolerance 대체 클래스)
   ========================================================================== */
.kol-d-none {
    display: none;
}

/* ==========================================================================
   [Phase 06] 영카트 쇼핑몰 상품 상세 / 장바구니 / 주문서 반응형 고도화
   ========================================================================== */
@media (max-width: 640px) {
    #sit_ov_wrap {
        padding: 1.25rem !important;
        margin-bottom: 2rem !important;
        border-radius: 1rem !important;
    }
    #sit_ov_btn {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    .sit_btn_cart, .sit_btn_buy {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        height: 3.13rem !important;
        font-size: 0.94rem !important;
        border-radius: 0.75rem !important;
    }
    .sit_btn_family_wish {
        width: 100% !important;
        margin-top: 0.38rem !important;
    }
}

#sod_bsk, #sod_frm {
    max-width: 75rem;
    margin: 1.88rem auto 3.75rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* 장바구니 & 주문서 테이블 반응형 */
#sod_bsk .tbl_wrap, #sod_frm .tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    margin-bottom: 1.5rem;
}
#sod_bsk table, #sod_frm table {
    width: 100%;
    border-collapse: collapse;
    min-width: 37.5rem;
}
#sod_bsk th, #sod_frm th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 0.88rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
#sod_bsk td, #sod_frm td {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

/* 장바구니 총계 바 */
#sod_bsk #sod_bsk_tot {
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 1.5rem 0;
    border: 1px solid #0f172a;
    background: #0f172a;
}
#sod_bsk #sod_bsk_tot li {
    background: transparent;
    color: #ffffff;
    border: none;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
}
#sod_bsk #sod_bsk_tot .sod_bsk_cnt {
    background: #0284c7;
    font-weight: 800;
}

/* 장바구니 버튼 그룹 */
#sod_bsk_act {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0;
}
#sod_bsk_act .btn_submit, #sod_bsk_act .btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.13rem;
    padding: 0 1.75rem;
    border-radius: 0.63rem;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s;
}
#sod_bsk_act .btn_submit {
    background: #2563eb;
    color: #ffffff;
    border: none;
}
#sod_bsk_act .btn01 {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

/* 주문서 레이아웃 (Clearfix & Flex 컨테이너) */
#sod_frm:after {
    display: block !important;
    clear: both !important;
    content: "" !important;
}
.sod_left {
    float: left;
    width: calc(100% - 22.5rem);
    margin-right: 1.25rem;
    box-sizing: border-box;
}
.sod_right {
    float: right;
    width: 21.25rem;
    box-sizing: border-box;
    position: sticky;
    top: 5rem;
}
#sod_frm_orderer, #sod_frm_taker {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    background: #ffffff;
}
#sod_frm section h2 {
    background: #f8fafc;
    color: #0f172a;
    font-size: 1.06rem;
    font-weight: 800;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}
#sod_frm .tbl_frm01 th {
    width: 6.5rem;
    font-weight: 700;
    color: #475569;
}
#sod_frm .frm_input {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.63rem 0.75rem;
    font-size: 0.94rem;
}
#sod_frm .btn_address {
    background: #0f172a;
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.63rem 1rem;
    border: none;
    font-weight: 700;
    cursor: pointer;
    margin-left: 0.38rem;
}

.sod_right #sod_bsk_tot {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
#sod_frm_paysel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1rem;
}
#display_pay_button .btn_submit {
    width: 100%;
    height: 3.44rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 1.13rem;
    font-weight: 800;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
#display_pay_button .btn_submit:hover {
    background: #1d4ed8;
}

/* 주문서 & 장바구니 반응형 미디어 쿼리 */
@media (max-width: 960px) {
    .sod_left {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
    .sod_right {
        float: none !important;
        width: 100% !important;
        position: static !important;
        margin-top: 1.5rem !important;
    }
    #sod_frm #od_name, #sod_frm #od_tel, #sod_frm #od_hp, #sod_frm #od_b_name, #sod_frm #od_b_tel, #sod_frm #od_b_hp {
        width: 100% !important;
    }
    #sod_frm .tbl_frm01 th {
        width: 5rem !important;
        font-size: 0.88rem !important;
    }
}
@media (max-width: 640px) {
    #sod_bsk, #sod_frm {
        padding: 0 0.75rem !important;
        margin-bottom: 2.5rem !important;
    }
    #sod_bsk #sod_bsk_tot li {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    #sod_bsk_act {
        flex-direction: column !important;
    }
    #sod_bsk_act .btn_submit, #sod_bsk_act .btn01 {
        width: 100% !important;
    }
}

/* ==========================================================================
   [Phase 07] 마이페이지 대시보드 허브 & 카드 전용 클래스 (인라인 제로)
   ========================================================================== */
.mph-p-unit { font-size: 0.88rem; font-weight: 700; color: #64748b; }
.mph-breakdown-right { text-align: right; }
.mph-paid-point { color: #0284c7; }
.mph-row-between { display: flex; justify-content: space-between; align-items: center; }
.mph-action-emerald { color: #059669; }
.mph-donation-point { color: #059669; }
.mph-icon-bookmark { color: #d97706; }
.mph-icon-rss { color: #0284c7; }
.mph-icon-ledger { color: #4f46e5; }
.mph-more-link { font-size: 0.81rem; color: #0284c7; font-weight: 700; text-decoration: none; }
.mph-tag-sns { background: #e0f2fe; color: #0369a1; }
.mph-heart-count { font-size: 0.75rem; color: #e11d48; }
.mph-link-primary { color: #0284c7; font-weight: 700; }
.mph-cell-right { text-align: right; }
.mph-cell-date { text-align: right; color: #94a3b8; font-size: 0.81rem; }
.mph-point-plus { text-align: right; font-weight: 700; color: #16a34a; }
.mph-point-minus { text-align: right; font-weight: 700; color: #dc2626; }
.mph-flex-gap-8 { display: flex; align-items: center; gap: 0.5rem; }

/* Phase 07 Services Helper Classes */
.kol-svc-container { background: #ffffff; border-radius: 1.13rem; border: 1px solid #e2e8f0; padding: 1.75rem; box-shadow: 0 8px 20px -4px rgba(0,0,0,0.06); margin-top: 1.25rem; }
.kol-svc-header { border-bottom: 2px solid #f1f5f9; padding-bottom: 1rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.kol-svc-title { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 0 0 0.38rem; display: flex; align-items: center; gap: 0.5rem; }
.kol-svc-desc { font-size: 0.88rem; color: #64748b; margin: 0; }
.kol-svc-filter-wrap { display: flex; gap: 0.38rem; flex-wrap: wrap; }
.kol-svc-modal-btn-cancel { font-size: 0.75rem; padding: 0.38rem 1rem; }
.kol-svc-modal-btn-submit { font-size: 0.75rem; padding: 0.38rem 1rem; background: #2563eb; color: #ffffff; border: none; border-radius: 0.38rem; cursor: pointer; }
.kol-text-red { color: #ef4444; }
.kol-color-input { height: 2.38rem; padding: 0.13rem; cursor: pointer; }
.kol-label-check { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.kol-flex-1 { flex: 1; }
.kol-flex-row-gap-16 { display: flex; gap: 1rem; }
.kol-icon-bg-sns_blog { background: #3b82f6; }
.kol-icon-bg-blog_shop { background: #0284c7; }
.kol-icon-bg-blog_ad { background: #10b981; }
.kol-icon-bg-family_crew { background: #10b981; }
.kol-icon-bg-debate_agora { background: #8b5cf6; }
.kol-icon-bg-cafe_club { background: #f59e0b; }
.kol-icon-bg-creator_studio { background: #ec4899; }
.kol-icon-bg-crowdfunding { background: #06b6d4; }
.kol-icon-bg-o2o_business { background: #0284c7; }
.kol-icon-bg-seller_shop { background: #14b8a6; }
.kol-icon-bg-personalization { background: #6366f1; }
.kol-icon-bg-security { background: #475569; }

/* Phase 07 Mypage Subcard Classes (Scrap / Good / Lists) */
.kol-my-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.63rem; }
.kol-my-title { font-size: 1.6rem; font-weight: 900; color: #0f172a; margin: 0; }
.kol-my-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.kol-badge-indigo { font-size: 0.75rem; background: #e0e7ff; color: #4f46e5; padding: 0.25rem 0.63rem; border-radius: 0.5rem; font-weight: 800; }
.kol-badge-rose { font-size: 0.75rem; background: #fff1f2; color: #e11d48; padding: 0.25rem 0.63rem; border-radius: 0.5rem; font-weight: 800; }
.kol-my-card-date { font-size: 0.81rem; color: #94a3b8; }
.kol-my-card-title { font-size: 1.06rem; font-weight: 800; color: #0f172a; margin: 0 0 0.63rem; line-height: 1.4; }
.kol-link-inherit { color: inherit; text-decoration: none; }
.kol-my-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 0.94rem; border-top: 1px solid #f1f5f9; }
.kol-action-indigo { font-size: 0.85rem; color: #4f46e5; font-weight: 700; text-decoration: none; }
.kol-action-delete { font-size: 0.85rem; color: #ef4444; text-decoration: none; font-weight: 700; }
.kol-action-rose { font-size: 0.81rem; color: #e11d48; font-weight: 700; }
.kol-action-blue { font-size: 0.85rem; color: #0284c7; font-weight: 700; text-decoration: none; }
.kol-empty-card { text-align: center; padding: 5rem 1.25rem; background: #ffffff; border-radius: 1.25rem; border: 1px solid #e2e8f0; }
.kol-empty-icon { font-size: 3rem; color: #cbd5e1; margin-bottom: 0.94rem; }
.kol-empty-title { font-size: 1.13rem; color: #64748b; margin: 0; }

/* Phase 07 Donation Helper Classes */
.kol-don-sub { font-size: 0.94rem; font-weight: 700; opacity: 0.9; }
.kol-don-total { font-size: 2.2rem; font-weight: 900; margin-top: 0.25rem; }
.kol-don-btn-guide { background: #ffffff; color: #059669; font-weight: 800; padding: 0.75rem 1.5rem; border-radius: 0.75rem; border: none; cursor: pointer; }
.kol-th-id { width: 5rem; }
.kol-th-amount { width: 8.75rem; text-align: right; }
.kol-th-method { width: 6.25rem; text-align: center; }
.kol-th-date { width: 8.13rem; text-align: center; }
.kol-th-receipt { width: 6.88rem; text-align: center; }
.kol-don-title { color: #0f172a; }
.kol-don-ngo { font-size: 0.81rem; color: #64748b; margin-top: 0.13rem; }
.kol-don-amount { text-align: right; color: #059669; font-weight: 900; font-size: 1.06rem; }
.kol-don-method { text-align: center; color: #64748b; font-weight: 700; }
.kol-don-date { text-align: center; color: #94a3b8; font-size: 0.81rem; }
.kol-don-cell-center { text-align: center; }
.kol-don-btn-receipt { background: #f1f5f9; color: #475569; padding: 0.38rem 0.75rem; border-radius: 0.5rem; font-size: 0.81rem; font-weight: 700; border: none; cursor: pointer; }
.kol-don-empty { text-align: center; padding: 3.75rem 1.25rem; color: #94a3b8; }

/* Phase 07 Point Management Skin */
#point_mgmt { max-width: 50rem; margin: 0 auto; padding: 2.5rem 1.25rem; background: #ffffff; }
#point_mgmt.is-embedded { padding: 1.25rem 0; }
.kol-point-page-title { font-size: 1.38rem; font-weight: 800; color: #0f172a; margin-bottom: 1.25rem; }
.kol-point-summary-card { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 1rem; padding: 1.5rem; color: #ffffff; position: relative; overflow: hidden; margin-bottom: 1.88rem; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.kol-point-summary-main { position: relative; z-index: 1; }
.kol-point-summary-label { font-size: 0.88rem; color: #94a3b8; font-weight: 600; margin-bottom: 0.38rem; }
.kol-point-summary-val { font-size: 2rem; font-weight: 900; color: #ffffff; margin-bottom: 1rem; }
.kol-point-unit { font-size: 1.13rem; font-weight: 700; color: #38bdf8; }
.kol-point-summary-actions { display: flex; gap: 0.63rem; }
.kol-point-btn-refill { background: #2563eb; color: #ffffff; font-size: 0.88rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; transition: background-color 0.15s ease; }
.kol-point-btn-refill:hover { background: #1d4ed8; color: #ffffff; }
.kol-point-btn-withdraw { background: rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 0.88rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; transition: background-color 0.15s ease; }
.kol-point-btn-withdraw:hover { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.kol-point-summary-deco { position: absolute; right: 1.25rem; bottom: -0.63rem; font-size: 6rem; color: rgba(255, 255, 255, 0.04); pointer-events: none; }
.kol-point-section-title { font-size: 1.13rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.kol-point-list { display: flex; flex-direction: column; gap: 0.63rem; margin-bottom: 1.5rem; }
.kol-point-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; transition: background-color 0.15s ease; }
.kol-point-item:hover { background: #f1f5f9; }
.kol-point-item-left { display: flex; align-items: center; gap: 0.88rem; }
.kol-point-item-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.94rem; }
.kol-point-item-icon.is-plus { background: #eff6ff; color: #2563eb; }
.kol-point-item-icon.is-minus { background: #fef2f2; color: #dc2626; }
.kol-point-item-content { font-size: 0.94rem; font-weight: 700; color: #1e293b; }
.kol-point-item-date { font-size: 0.81rem; color: #64748b; margin-top: 0.19rem; }
.kol-point-item-right { text-align: right; }
.kol-point-item-amount { font-size: 1.06rem; font-weight: 800; }
.kol-point-item-amount.is-plus { color: #2563eb; }
.kol-point-item-amount.is-minus { color: #dc2626; }
.kol-point-item-expired { font-size: 0.75rem; color: #94a3b8; margin-top: 0.13rem; }
.kol-point-empty { text-align: center; padding: 3.75rem 1.25rem; color: #94a3b8; font-size: 0.94rem; }
.kol-point-paging { text-align: center; margin: 1.5rem 0; }
.kol-point-close-wrap { text-align: center; margin-top: 1.5rem; }
.kol-point-btn-close { background: #475569; color: #ffffff; font-size: 0.88rem; font-weight: 700; padding: 0.63rem 1.5rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.15s ease; }
.kol-point-btn-close:hover { background: #334155; }

/* Phase 08 Notice Pin Badge & Responsive Table */
tr.bo_notice {
    background-color: #f8fafc;
}
tr.bo_notice td {
    font-weight: 700;
}
.notice_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.19rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.38rem;
    line-height: 1.2;
    white-space: nowrap;
}
.notice_icon i {
    font-size: 0.69rem;
    color: #2563eb;
}

/* Board Table Responsive Optimization */
.tbl_wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tbl_wrap table {
    width: 100%;
    border-collapse: collapse;
}
@media (max-width: 48rem) {
    #bo_list .td_datetime,
    #bo_list .td_num {
        display: none;
    }
    #bo_list .td_name {
        width: 4.5rem;
        font-size: 0.81rem;
    }
}

/* 계층형 카테고리 셀렉트 및 댓글 뎁스 순수 클래스 (.cursorrules Zero Inline Styles) */
.kol-write-cat-hierarchy-wrap { display: flex; gap: 0.5rem; flex-wrap: wrap; width: 100%; }
.kol-write-cat-col { flex: 1; min-width: 8.75rem; }
.kol-write-cat-col.is-hidden { display: none; }
.kol-form-select-full { width: 100% !important; }
.kol-select-wrapper-full { width: 100% !important; }

.cmt-depth-1 { margin-left: 1.25rem !important; }
.cmt-depth-2 { margin-left: 2.5rem !important; }
.cmt-depth-3 { margin-left: 3.75rem !important; }
.cmt-depth-4 { margin-left: 5rem !important; }
.cmt-depth-5 { margin-left: 6.25rem !important; }
.kol-hidden-textarea { display: none !important; }

/* ==========================================================================
   영카트 쇼핑몰 주문서 작성 (orderform.php / orderform.sub.php) 반응형 고도화
   ========================================================================== */
#sod_frm {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3.75rem;
    box-sizing: border-box;
    font-family: var(--font-family, Pretendard, sans-serif);
    color: var(--text-main, #1e293b);
}

/* 주문상품 테이블 */
#sod_frm .od_prd_list {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#sod_frm #sod_list {
    width: 100%;
    border-collapse: collapse;
    min-width: 37.5rem;
}

#sod_frm #sod_list thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.75rem 0.63rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

#sod_frm #sod_list tbody td {
    padding: 1rem 0.63rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.94rem;
    color: #334155;
    vertical-align: middle;
}

#sod_frm #sod_list .td_prd {
    display: flex;
    align-items: center;
    gap: 0.88rem;
    text-align: left;
}

#sod_frm #sod_list .sod_img img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

#sod_frm #sod_list .sod_name b {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

#sod_frm #sod_list .sod_opt {
    font-size: 0.81rem;
    color: #64748b;
    margin-top: 0.25rem;
}

#sod_frm #sod_list .td_num,
#sod_frm #sod_list .td_dvr {
    text-align: center;
}

#sod_frm #sod_list .td_numbig {
    font-weight: 700;
    color: #0f172a;
}

#sod_frm #sod_list .total_price {
    color: #2563eb;
    font-weight: 800;
}

/* 2단 레이아웃 (좌: 입력폼, 우: 결제요약 및 결제버튼) */
#sod_frm.sod_frm_pc {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

#sod_frm .od_prd_list {
    width: 100%;
}

#sod_frm .sod_left {
    flex: 1 1 40rem;
    min-width: 0;
}

#sod_frm .sod_right {
    flex: 0 0 23.75rem;
    min-width: 0;
}

@media (max-width: 64rem) {
    #sod_frm.sod_frm_pc {
        flex-direction: column;
    }
    #sod_frm .sod_left,
    #sod_frm .sod_right {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* 주문서 카드 섹션 공통 */
#sod_frm section {
    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.04);
}

#sod_frm section h2 {
    font-size: 1.13rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

/* 폼 테이블 반응형 */
#sod_frm .tbl_frm01 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
}

#sod_frm .tbl_frm01 th {
    width: 6.88rem;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    padding-right: 0.63rem;
    vertical-align: middle;
}

#sod_frm .tbl_frm01 td {
    vertical-align: middle;
}

#sod_frm .frm_input {
    width: 100%;
    max-width: 25rem;
    height: 2.63rem;
    padding: 0 0.75rem;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

#sod_frm .frm_input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#sod_frm .frm_address {
    margin-top: 0.38rem;
    max-width: 100%;
}

#sod_frm .btn_address {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.63rem;
    padding: 0 1rem;
    background: #0f172a;
    color: #ffffff;
    border-radius: 0.38rem;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    margin-left: 0.38rem;
}

#sod_frm .btn_address:hover {
    background: #334155;
}

#sod_frm textarea#od_memo {
    width: 100%;
    height: 5.63rem;
    padding: 0.75rem;
    font-size: 0.94rem;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    box-sizing: border-box;
    resize: vertical;
}

/* 배송지 선택 라디오 */
#sod_frm .order_choice_place {
    display: flex;
    flex-wrap: wrap;
    gap: 0.88rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

#sod_frm .order_choice_place label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    margin-left: 0.25rem;
}

#sod_frm #order_address {
    margin-left: auto;
    font-size: 0.81rem;
    font-weight: 600;
    color: #2563eb;
    text-decoration: underline;
}

/* 주문 합계 요약 카드 (우측 상단) */
#sod_frm #sod_bsk_tot {
    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.04);
}

#sod_frm #sod_bsk_tot ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#sod_frm #sod_bsk_tot li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.94rem;
    color: #64748b;
}

#sod_frm #sod_bsk_tot li strong {
    font-size: 1.06rem;
    font-weight: 700;
    color: #0f172a;
}

#sod_frm #sod_bsk_tot li.sod_bsk_cnt {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #cbd5e1;
    font-size: 1.06rem;
    font-weight: 700;
    color: #0f172a;
}

#sod_frm #sod_bsk_tot li.sod_bsk_cnt strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
}

/* 결제정보 카드 */
#sod_frm #sod_frm_pay {
    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.04);
}

#sod_frm #od_tot_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    background: #eff6ff;
    border-radius: 0.63rem;
    margin: 1.25rem 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: #1e3a8a;
}

#sod_frm #od_tot_price strong.print_price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
}

/* 결제수단 선택 영역 */
#sod_frm #od_pay_sl h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.88rem;
}

#sod_frm #sod_frm_paysel {
    border: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.63rem;
}

#sod_frm #sod_frm_paysel input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

#sod_frm #sod_frm_paysel label.lb_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.94rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

#sod_frm #sod_frm_paysel label.lb_icon:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

#sod_frm #sod_frm_paysel input[type="radio"]:checked + label.lb_icon {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* 결제하기 제출 버튼 */
#sod_frm .btn_submit,
#sod_frm #display_pay_button input[type="button"],
#sod_frm #display_pay_button input[type="submit"] {
    width: 100% !important;
    height: 3.5rem !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 1.13rem !important;
    font-weight: 800 !important;
    border-radius: 0.63rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25) !important;
}

#sod_frm .btn_submit:hover,
#sod_frm #display_pay_button input[type="button"]:hover,
#sod_frm #display_pay_button input[type="submit"]:hover {
    background: #1d4ed8 !important;
}

/* 모바일 전용 뷰포트 대응 (최대 48rem / 768px) */
@media (max-width: 48rem) {
    #sod_frm {
        padding: 1rem 0.75rem 3rem;
    }
    #sod_frm .tbl_frm01 table,
    #sod_frm .tbl_frm01 tbody,
    #sod_frm .tbl_frm01 tr,
    #sod_frm .tbl_frm01 th,
    #sod_frm .tbl_frm01 td {
        display: block;
        width: 100%;
    }
    #sod_frm .tbl_frm01 th {
        padding: 0.5rem 0 0.25rem;
    }
    #sod_frm .tbl_frm01 td {
        padding: 0 0 0.75rem;
    }
    #sod_frm .frm_input {
        max-width: 100%;
    }
    #sod_frm #sod_frm_paysel {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   영카트 쇼핑몰 장바구니 (cart.php) 반응형 고도화
   ========================================================================== */
#sod_bsk {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3.75rem;
    box-sizing: border-box;
    font-family: var(--font-family, Pretendard, sans-serif);
    color: var(--text-main, #1e293b);
}

#sod_bsk .tbl_head03 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#sod_bsk .tbl_head03 table {
    width: 100%;
    border-collapse: collapse;
    min-width: 37.5rem;
}

#sod_bsk thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.75rem 0.63rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

#sod_bsk tbody td {
    padding: 1rem 0.63rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.94rem;
    color: #334155;
    vertical-align: middle;
}

#sod_bsk .sod_img img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

#sod_bsk .sod_name b {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}

#sod_bsk #sod_bsk_tot {
    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.04);
}

#sod_bsk #sod_bsk_tot ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#sod_bsk #sod_bsk_tot li {
    font-size: 1rem;
    color: #475569;
}

#sod_bsk #sod_bsk_tot li strong {
    font-size: 1.13rem;
    font-weight: 700;
    color: #0f172a;
}

#sod_bsk #sod_bsk_tot li.sod_bsk_cnt strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
}

#sod_bsk #sod_bsk_act {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

#sod_bsk #sod_bsk_act .btn_submit {
    height: 3.25rem;
    padding: 0 2rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 1.06rem;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

#sod_bsk #sod_bsk_act .btn_submit:hover {
    background: #1d4ed8;
}

#sod_bsk #sod_bsk_act .btn01 {
    height: 3.25rem;
    padding: 0 1.5rem;
    background: #f1f5f9;
    color: #334155;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    cursor: pointer;
}

@media (max-width: 48rem) {
    #sod_bsk {
        padding: 1rem 0.75rem 3rem;
    }
    #sod_bsk #sod_bsk_act {
        flex-direction: column;
    }
    #sod_bsk #sod_bsk_act button,
    #sod_bsk #sod_bsk_act a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   🏛️ KOLIVE 공통 레이아웃 시스템 (2026-09-29 개편)
   - 최상위 래퍼: .kol-main-wrapper
   - 홈 2단: .kol-2col (메인 1fr + 사이드바 18rem)
   - 섹션 3단: .kol-3col (LNB 13rem + 메인 1fr + 사이드바 18rem)
   - 컴포넌트: .kol-lnb, .kol-main-col, .kol-sidebar
   ========================================================================== */

.kol-main-wrapper {
    width: var(--container-width);
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}

.kol-main-wrapper > * {
    width: 100%;
    box-sizing: border-box;
}

/* 2단 그리드 (홈 index.php 전용) */
.kol-2col {
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* 3단 그리드 (전체 섹션메인 및 채널 목록/뷰 전용) */
.kol-3col {
    display: grid;
    grid-template-columns: 13rem 1fr 18rem;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* 좌측 섹션 LNB (13rem) */
.kol-lnb {
    width: 100%;
    box-sizing: border-box;
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    align-self: start;
    z-index: 10;
}

/* 중앙 콘텐츠 메인 컬럼 */
.kol-main-col {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 우측 공통 사이드바 (18rem) */
.kol-sidebar {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- 레이아웃 반응형 브레이크포인트 --- */

/* 1200px 이하: 3단 사이드바 최적화 */
@media (max-width: 75rem) {
    .kol-3col {
        grid-template-columns: 12rem 1fr 16rem;
        gap: 1.25rem;
    }
}

/* 1024px 이하: 태블릿 (사이드바 하단 이동 또는 2단 축소) */
@media (max-width: 64rem) {
    .kol-2col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kol-3col {
        grid-template-columns: 13rem 1fr;
        gap: 1.25rem;
    }

    .kol-3col > .kol-sidebar {
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* 768px 이하: 모바일 1단 스택 */
@media (max-width: 48rem) {
    .kol-main-wrapper {
        padding: 1rem 0.75rem 2.5rem;
    }

    .kol-2col,
    .kol-3col {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .kol-lnb {
        position: static;
        width: 100%;
        top: auto;
        order: 1;
    }

    .kol-main-col {
        width: 100%;
        order: 2;
    }

    .kol-sidebar,
    .kol-3col > .kol-sidebar {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        order: 3;
    }
}

/* ==========================================================================
   [Secret Membership & Tier Reward Modal System]
   폐쇄형 비밀 회원가입 및 극초반 티어별 매출 쉐어 안내 모달 & 표
   ========================================================================== */
.kol-secret-wrap {
    max-width: 48rem;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.kol-secret-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kol-secret-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.63rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.kol-secret-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.kol-secret-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
}

.kol-tier-guide-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.kol-tier-guide-title {
    font-size: 1.13rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.kol-tier-table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.kol-tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
    text-align: center;
}

.kol-tier-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.kol-tier-table td {
    padding: 0.88rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    vertical-align: middle;
}

.kol-tier-table tr:last-child td {
    border-bottom: none;
}

.kol-tier-pill {
    display: inline-block;
    padding: 0.19rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.75rem;
}

.kol-tier-pill.tier-1 {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.kol-tier-pill.tier-2 {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #86efac;
}

.kol-tier-pill.tier-open {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.kol-tier-rate {
    font-weight: 800;
    color: #dc2626;
    font-size: 0.94rem;
}

.kol-tier-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.81rem;
    color: #475569;
    line-height: 1.7;
}

.kol-tier-notice-list li {
    position: relative;
    padding-left: 1.13rem;
}

.kol-tier-notice-list li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    color: #2563eb;
    font-weight: 800;
}

.kol-secret-auth-card {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.kol-secret-input-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.kol-secret-input {
    flex: 1;
    height: 2.75rem;
    padding: 0 0.88rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    font-size: 0.94rem;
    font-weight: 600;
}

.kol-secret-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.kol-secret-btn {
    height: 2.75rem;
    padding: 0 1.5rem;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 0.38rem;
    font-weight: 700;
    font-size: 0.94rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.kol-secret-btn:hover {
    background: #1d4ed8;
}

/* 모달 오버레이 */
.kol-secret-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.kol-secret-modal-overlay.is-hidden {
    display: none !important;
}

.kol-secret-modal-window {
    background: #ffffff;
    border-radius: 0.75rem;
    max-width: 42rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.kol-secret-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kol-secret-modal-title {
    font-size: 1.13rem;
    font-weight: 800;
    color: #0f172a;
}

.kol-secret-modal-body {
    padding: 1.5rem;
}

.kol-secret-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 0.75rem 0.75rem;
    text-align: right;
}

.kol-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.kol-modal-close-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.kol-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #2563eb;
    border-radius: 50%;
    display: inline-block;
}

.kol-form-group {
    margin-bottom: 1.13rem;
    text-align: left;
}

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

.kol-error-text {
    font-size: 0.81rem;
    color: #dc2626;
    margin-top: 0.5rem;
    font-weight: 600;
}

.kol-agree-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.kol-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 0.63rem;
    font-size: 0.88rem;
    color: #1e293b;
    cursor: pointer;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}

.kol-agree-label input[type="checkbox"] {
    margin-top: 0.19rem;
    accent-color: #2563eb;
    width: 1.13rem;
    height: 1.13rem;
    flex-shrink: 0;
}

.kol-agree-label span {
    flex: 1;
}

.kol-form-btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem;
}

.kol-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 1.25rem;
    background: #e2e8f0;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.kol-btn-secondary:hover {
    background: #cbd5e1;
    color: #0f172a;
}

/* ==========================================================================
   4대 카드 설정 허브 & 개인화 라이프스테이지 (WBS ID:64, ID:66)
   ========================================================================== */
.kol-hub-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.kol-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

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

.kol-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 48rem) {
    .kol-hub-grid {
        grid-template-columns: 1fr;
    }
}

.kol-hub-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kol-hub-card:hover {
    transform: translateY(-0.13rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.kol-hub-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.88rem;
}

.kol-hub-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kol-hub-card-icon.icon-account { background: #eff6ff; color: #2563eb; }
.kol-hub-card-icon.icon-badge { background: #fdf4ff; color: #a855f7; }
.kol-hub-card-icon.icon-family { background: #f0fdf4; color: #16a34a; }
.kol-hub-card-icon.icon-wallet { background: #fff7ed; color: #ea580c; }

.kol-hub-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.kol-hub-card-desc {
    font-size: 0.81rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.kol-hub-card-meta {
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kol-hub-meta-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.kol-hub-meta-val {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 800;
}

.kol-hub-card-actions {
    display: flex;
    gap: 0.5rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

.kol-hub-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.38rem;
    padding: 0 0.88rem;
    font-size: 0.81rem;
    font-weight: 700;
    border-radius: 0.38rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.kol-hub-action-btn.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.kol-hub-action-btn.btn-primary:hover {
    background: #1d4ed8;
}

.kol-hub-action-btn.btn-sub {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.kol-hub-action-btn.btn-sub:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.kol-hub-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 1.88rem 0;
}

.kol-family-box {
    margin-top: 1.5rem;
}

.mypage-tab-services {
    color: #2563eb;
    font-weight: 700;
}

.kol-order-prd-img {
    width: 4.38rem;
    height: 4.38rem;
    object-fit: cover;
    border-radius: 0.38rem;
    border: 1px solid #e2e8f0;
    display: inline-block;
}

.kol-frame-overlay {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}

.kol-badge-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.81rem;
    font-weight: 600;
    color: #2563eb;
    background-color: #eff6ff;
    padding: 0.25rem 0.63rem;
    border-radius: 9999px;
    border: 1px solid #bfdbfe;
}


/* ==========================================================================
   [KOLIVE Unified 2-Column Standard & Global Sidebar System]
   - 전 섹션 메인 / 채널 목록 / 게시물 뷰 공통 2단 레이아웃 (좌: 컨텐츠 1fr, 우: 사이드바 20rem)
   - LNB + 실시간 인기/최근글 + 쇼핑상품 + 광고 + 바로가기 통합 사이드바
   - 글로벌 페이징(.pg_wrap) 100% 가운데 정렬 통일
   ========================================================================== */

/* 2단 메인 그리드 규격 (플랫폼 표준) */
.kol-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* 3단 호환 처리 (기존 3단 클래스 호출 시 자동으로 2단 그리드로 수용) */
.kol-3col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* 좌측 메인 콘텐츠 컬럼 */
.kol-main-col,
.kol-content-area {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 우측 통합 사이드바 (20rem / 320px) */
.kol-sidebar,
.kol-sidebar-area {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* 사이드바 표준 박스 (Zero-Card-Stacking 원칙 준수 플랫 스타일) */
.kol-sidebar-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-sizing: border-box;
}
.kol-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 0.75rem;
    margin-bottom: 0.88rem;
    border-bottom: 2px solid #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kol-sidebar-more-link {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
    text-decoration: none;
}
.kol-sidebar-more-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 사이드바 LNB 네비게이션 */
.kol-sidebar-nav {
    display: flex;
    flex-direction: column;
}
.kol-sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.56rem 0.25rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.15s ease;
}
.kol-sidebar-nav-item:last-child {
    border-bottom: none;
}
.kol-sidebar-nav-item:hover {
    color: #2563eb;
    padding-left: 0.5rem;
}
.kol-sidebar-nav-item.active {
    color: #2563eb;
    font-weight: 700;
    border-left: 3px solid #2563eb;
    padding-left: 0.5rem;
    background: #eff6ff;
    border-radius: 0 0.25rem 0.25rem 0;
}
.kol-sidebar-nav-cnt {
    font-size: 0.75rem;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 0.13rem 0.44rem;
    border-radius: 1rem;
}
.kol-sidebar-nav-item.active .kol-sidebar-nav-cnt {
    background: #bfdbfe;
    color: #1d4ed8;
}

/* 사이드바 추천 쇼핑 상품 리스트 */
.kol-sidebar-shop-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.kol-sidebar-shop-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background 0.15s ease;
}
.kol-sidebar-shop-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.kol-sb-shop-thumb {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.kol-sb-shop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kol-sb-shop-info {
    flex: 1;
    min-width: 0;
}
.kol-sb-shop-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin-bottom: 0.25rem;
}
.kol-sidebar-shop-item:hover .kol-sb-shop-name {
    color: #2563eb;
}
.kol-sb-shop-price {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.82rem;
}
.kol-sb-price-num {
    font-weight: 700;
    color: #dc2626;
}
.kol-sb-price-cust {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* 사이드바 정보 & 참여 박스 */
.kol-sidebar-info-box {
    background: #f8fafc;
}
.kol-sb-info-desc {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 0.88rem 0;
}
.kol-sb-info-actions {
    display: flex;
    gap: 0.5rem;
}
.kol-sb-action-btn {
    flex: 1;
    height: 2.13rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: all 0.15s ease;
}
.kol-sb-action-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}

/* 사이드바 배너 래퍼 */
.kol-sidebar-ad-wrap {
    width: 100%;
}

/* ==========================================================================
   [글로벌 페이징 네비게이션 표준화 - 100% 중앙 정렬 강제]
   ========================================================================== */
.pg_wrap,
.board-pagination-wrapper,
.board-pagination,
.toptoon-pagination,
.pagination {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 2rem 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}
.pg_wrap .pg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    float: none !important;
    margin: 0 auto !important;
}
.pg_wrap .pg_page,
.pg_wrap .pg_current,
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.5rem !important;
    border-radius: 0.38rem !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
}
.pg_wrap .pg_page:hover,
.pg_wrap .pg_start:hover,
.pg_wrap .pg_prev:hover,
.pg_wrap .pg_next:hover,
.pg_wrap .pg_end:hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}
.pg_wrap .pg_current {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.pg_wrap a.pg_page.pg_start,
.pg_wrap a.pg_page.pg_prev,
.pg_wrap a.pg_page.pg_next,
.pg_wrap a.pg_page.pg_end,
.pg_wrap .pg_start,
.pg_wrap .pg_prev,
.pg_wrap .pg_next,
.pg_wrap .pg_end {
    text-indent: 0 !important;
    overflow: visible !important;
    background-image: none !important;
    font-size: 0.81rem !important;
    font-weight: 600 !important;
    min-width: 2.75rem !important;
    padding: 0 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    color: #475569 !important;
    box-sizing: border-box !important;
}
.pg_wrap a.pg_page.pg_start::before,
.pg_wrap .pg_start::before {
    content: "\f100" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
}
.pg_wrap a.pg_page.pg_prev::before,
.pg_wrap .pg_prev::before {
    content: "\f104" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
}
.pg_wrap a.pg_page.pg_next::after,
.pg_wrap .pg_next::after {
    content: "\f105" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
}
.pg_wrap a.pg_page.pg_end::after,
.pg_wrap .pg_end::after {
    content: "\f101" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.75rem !important;
}
.pg_wrap a.pg_page:hover::before,
.pg_wrap a.pg_page:hover::after {
    color: #2563eb !important;
}

/* ==========================================================================
   [게시판 전용 하단 검색창 표준 디자인 - 채널 목록 전용 중앙 배치]
   ========================================================================== */
.comm-bottom-search-wrap,
.board-bottom-search-wrap {
    width: 100%;
    max-width: 32rem;
    margin: 1.5rem auto 0 auto;
    display: flex;
    justify-content: center;
}
.comm-bottom-search-form,
.board-bottom-search-form {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    width: 100%;
}
.comm-search-select,
.board-search-select {
    height: 2.38rem;
    padding: 0 0.63rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    background: #ffffff;
    font-size: 0.85rem;
    color: #334155;
    outline: none;
}
.comm-search-input-wrap,
.board-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.comm-search-input,
.board-search-input {
    width: 100%;
    height: 2.38rem;
    padding: 0 2.25rem 0 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.38rem;
    font-size: 0.88rem;
    color: #0f172a;
    box-sizing: border-box;
    outline: none;
}
.comm-search-input:focus,
.board-search-input:focus {
    border-color: #2563eb;
}
.comm-search-submit,
.board-search-submit {
    position: absolute;
    right: 0.38rem;
    height: 1.88rem;
    width: 1.88rem;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comm-search-submit:hover,
.board-search-submit:hover {
    color: #2563eb;
}

/* ==========================================================================
   [2단 반응형 브레이크포인트 최적화]
   ========================================================================== */
@media (max-width: 64rem) {
    .kol-2col,
    .kol-3col {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .kol-sidebar,
    .kol-sidebar-area {
        width: 100%;
        order: 2;
    }
    .kol-main-col,
    .kol-content-area {
        width: 100%;
        order: 1;
    }
}
@media (max-width: 48rem) {
    .kol-2col,
    .kol-3col {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* ==========================================================================
   [KOLIVE Unified Header & Zero-Card-Stacking Design System]
   - 전 섹션 메인 & 채널 목록 상단 헤더 규격 100% 일원화
   - 라운드 박스 안의 또 라운드 박스(Card-in-Card) 중첩 전면 제거
   ========================================================================== */

/* 1. 최상단 헤더 박스 단일 마스터 표준 */
.kol-hero-card,
.ds-header-box,
.kol-header-unified,
header.ds-header-box,
header.kol-hero-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 헤더 상단 타이틀 & 배너 영역 */
.kol-hero-top,
.ds-header-top,
.kol-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.kol-hero-info,
.header-title-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* 헤더 배지 단일 규격 */
.kol-hero-badge,
.ds-badge-top,
.kol-badge-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.38rem !important;
    padding: 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 0.25rem !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    margin-bottom: 0.5rem !important;
    border: none !important;
}

/* 헤더 타이틀 단일 규격 */
.kol-hero-title,
.ds-title,
.kol-header-title {
    margin: 0 0 0.38rem 0 !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    line-height: 1.3 !important;
}

/* 헤더 건수 캡슐 */
.total-count-pill,
.kol-hero-count {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #bfdbfe !important;
    margin-left: 0.38rem !important;
}

/* 헤더 서브타이틀 */
.kol-hero-desc,
.ds-subtitle,
.kol-header-subtitle {
    margin: 0 !important;
    font-size: 0.88rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

/* 헤더 우측 배너 영역 슬림화 (이중 박스 위화감 제거) */
.header-banner-area,
.header-top-ad-spot {
    flex: 0 0 auto !important;
    max-width: 25rem !important;
}
.header-banner-area .kol-ad-zone-container,
.header-top-ad-spot .kol-ad-zone-container {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* 2. Zero-Card-Stacking: 카테고리 필터 바 평탄화 (라운드 박스 안의 또 라운드 박스 제거) */
.kol-category-filter-wrap {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1rem 0 0 0 !important;
    margin-top: 1.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kol-category-filter-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
}

/* 필터 버튼 단일 규격 - 내부 이중 박스 및 보더 중복 제거 */
.category-depth .category-toggle,
.lnb-depth .lnb-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: inherit !important;
    padding: 0 0.88rem !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.category-depth .category-toggle:hover,
.lnb-depth .lnb-toggle:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}
.category-depth.open,
.lnb-depth.open {
    border-color: #2563eb !important;
    z-index: 10 !important;
}
.category-depth.open .category-toggle,
.lnb-depth.open .lnb-toggle {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* 드롭다운 메뉴 표준 및 토글 표시 */
.category-depth,
.lnb-depth {
    position: relative !important;
}

.category-depth .category-list,
.lnb-depth .lnb-list {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    min-width: 100% !important;
    width: max-content !important;
    max-width: 22rem !important;
    background: #ffffff !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
    max-height: 22rem !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    list-style: none !important;
    padding: 0.38rem 0 !important;
    margin: 0 !important;
}

.category-depth.open > .category-list,
.category-depth.open .category-list,
.lnb-depth.open > .lnb-list,
.lnb-depth.open .lnb-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 필터 우측 총 건수 */
.category-right-info {
    margin-left: auto !important;
    font-size: 0.82rem !important;
    color: #64748b !important;
}

/* 3. 본문 컨테이너 및 리스트 Zero-Card-Stacking (플랫 라인 시스템) */
.board-list-container,
.comm-list-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 단일 화이트 컨테이너로 통일 */
#bo_list {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 1.25rem 1.5rem !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* 불필요한 내부 중복 카드/테두리 걷어내기 */
#bo_list .board-list-wrap,
#bo_list .news-list,
#bo_list .ds-list-container,
#bo_list .law-list-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 리스트 아이템: 카드 형태가 아닌 플랫 디바이더 라인 */
.board-list-li {
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.85rem 0.5rem !important;
    transition: background 0.15s ease !important;
}
.board-list-li:hover {
    background: #f8fafc !important;
}
.board-list-li:last-child {
    border-bottom: none !important;
}

/* 뉴스 카드 플랫화 (카드 인 카드 방지) */
.news-item-article {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.13rem 0.5rem !important;
    background: transparent !important;
}
.news-item-article:last-child {
    border-bottom: none !important;
}

/* 토론/법률 카드 플랫화 */
.ds-card,
.law-card {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.13rem 0.5rem !important;
    background: transparent !important;
}
.ds-card:last-child,
.law-card:last-child {
    border-bottom: none !important;
}

/* 툴바 내 카테고리 필터 인라인 뱃지 */
.comm-toolbar-filter-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.2rem 0.55rem !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 0.25rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin-right: 0.5rem !important;
}

/* ==========================================================================
   [Community Hub & Mobile Responsive Optimization]
   ========================================================================== */
.kol-d-none {
    display: none !important;
}

@media (max-width: 768px) {
    /* 커뮤니티 통합 헤더 모바일 패딩 및 타이포 */
    .kol-hero-card,
    header.kol-hero-card {
        padding: 1.13rem 1rem !important;
        border-radius: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .kol-hero-title {
        font-size: 1.25rem !important;
    }
    .kol-hero-desc {
        font-size: 0.81rem !important;
    }

    /* 카테고리 필터 바 모바일 가로 스크롤 및 터치 최적화 */
    .kol-category-filter-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 0.38rem !important;
    }
    .kol-category-filter-wrap::-webkit-scrollbar {
        display: none !important;
    }
    .kol-category-filter-inner {
        min-width: max-content !important;
    }
    .category-right-info {
        display: none !important;
    }

    /* 신설 게시판 건의 배너 모바일 풀위드 */
    .comm-sugg-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: left !important;
        padding: 1.13rem 1rem !important;
        gap: 0.88rem !important;
    }
    .comm-sugg-title {
        font-size: 0.94rem !important;
    }
    .comm-sugg-desc {
        font-size: 0.78rem !important;
    }
    .btn-comm-sugg {
        width: 100% !important;
        text-align: center !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.85rem !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 실시간 동네생활 피드 카드 모바일 간격 최적화 */
    .comm-feed-card {
        padding: 1rem 0.88rem !important;
        border-radius: 0.5rem !important;
    }
    .comm-feed-header {
        margin-bottom: 0.63rem !important;
    }
    .comm-feed-avatar {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .comm-author {
        font-size: 0.81rem !important;
    }
    .comm-time {
        font-size: 0.65rem !important;
    }
    .comm-tag {
        font-size: 0.69rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    .comm-feed-title {
        font-size: 0.94rem !important;
        margin-bottom: 0.25rem !important;
        word-break: break-all;
    }
    .comm-feed-desc {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }
    .comm-feed-footer {
        gap: 0.75rem !important;
        font-size: 0.7rem !important;
        padding-top: 0.63rem !important;
    }

    /* 핫토픽 3:4 미니 카드 모바일 2열 정돈 */
    .portal-mini-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.63rem !important;
    }
    .portal-mini-card {
        border-radius: 0.38rem !important;
    }
    .portal-mini-info {
        padding: 0.5rem !important;
    }
    .portal-mini-title {
        font-size: 0.78rem !important;
    }
    .portal-mini-sub {
        font-size: 0.66rem !important;
    }

    /* 커뮤니티 모달창 모바일 Safe Area 및 반응형 핏 */
    .comm-modal-dialog {
        width: 92vw !important;
        max-width: 92vw !important;
        padding: 1.25rem 1rem !important;
        border-radius: 0.75rem !important;
        box-sizing: border-box !important;
    }
    .comm-modal-title {
        font-size: 1.05rem !important;
    }
    .comm-guide-box {
        padding: 0.88rem !important;
        font-size: 0.8rem !important;
        max-height: 52vh !important;
        overflow-y: auto !important;
    }
    .comm-modal-input,
    .comm-modal-textarea {
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   [Discussion Hub & Mobile Responsive Optimization]
   ========================================================================== */
.kol-rate-bar-pro,
.kol-rate-bar-con {
    height: 100% !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ds-section-grid .ds-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1.13rem 1.25rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.ds-section-grid .ds-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

@media (max-width: 768px) {
    /* 토론광장 건의 배너 및 투표 위젯 모바일 정돈 */
    .ds-sugg-banner {
        padding: 1.13rem 1rem !important;
        margin-bottom: 1.25rem !important;
        gap: 1rem !important;
    }
    .ds-sugg-left h2 {
        font-size: 1.05rem !important;
    }
    .ds-sugg-left p {
        font-size: 0.81rem !important;
        margin-bottom: 0.88rem !important;
    }
    .btn-open-sugg-modal {
        width: 100% !important;
        text-align: center !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.85rem !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    .btn-vote-act {
        min-height: 2.5rem !important;
        font-size: 0.81rem !important;
    }

    /* 토론 섹션 1열 카드 정돈 */
    .ds-section-block {
        margin: 2rem 0 1.5rem !important;
    }
    .ds-section-grid {
        grid-template-columns: 1fr !important;
        gap: 0.88rem !important;
    }
    .ds-section-grid .ds-card {
        padding: 1rem 0.88rem !important;
        border-radius: 0.5rem !important;
    }
    .ds-sec-header {
        margin-bottom: 0.75rem !important;
    }
    .ds-sec-title {
        font-size: 1.05rem !important;
    }
    .ds-sec-more {
        font-size: 0.78rem !important;
    }
    .ds-card-heading {
        font-size: 0.95rem !important;
    }
    .ds-card-preview {
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
    }
}