/**
 * 파일명: helpdesk-common.css
 * 설명: 헬프데스크 공통 스타일 v2.0
 * 디자인: HC Joyn Divine Light Beam (hc-joyn-design-tokens.md)
 * 필수: Remix Icon CDN, Noto Sans KR / Pretendard
 */

/* ========================================
   테마 격리 (Astra/Blocksy 등 상위 테마 색상 무시)
   HC Joyn 토큰 기반 색상 적용
   ======================================== */
body .helpdesk-page-backdrop {
    background-color: var(--hc-bg-primary) !important;
    width: 100%;
    min-height: 100vh;
    padding: 0 var(--hc-space-xl, 32px) var(--hc-space-xl, 32px);
    box-sizing: border-box;
}
body .helpdesk-wrapper {
    background-color: var(--hc-bg-primary) !important;
    color: var(--hc-text-primary) !important;
    font-family: var(--hc-font-family) !important;
}
body .helpdesk-wrapper * {
    box-sizing: border-box !important;
    color: inherit !important;
}
body .helpdesk-wrapper a {
    color: var(--hc-text-primary) !important;
    text-decoration: none;
}
body .helpdesk-wrapper a:hover {
    color: var(--hc-accent) !important;
}
body .helpdesk-wrapper input,
body .helpdesk-wrapper select,
body .helpdesk-wrapper textarea,
body .helpdesk-wrapper .helpdesk-search-input {
    background-color: var(--hc-bg-secondary) !important;
    color: var(--hc-text-primary) !important;
    border-color: var(--hc-border) !important;
}
body .helpdesk-wrapper input::placeholder,
body .helpdesk-wrapper textarea::placeholder {
    color: var(--hc-text-tertiary) !important;
}
body .helpdesk-wrapper button,
body .helpdesk-wrapper .button,
body .helpdesk-wrapper .helpdesk-search-btn,
body .helpdesk-wrapper .helpdesk-page-btn,
body .helpdesk-wrapper .helpdesk-page-num,
body .helpdesk-wrapper .helpdesk-write-btn,
body .helpdesk-wrapper input[type="submit"],
body .helpdesk-wrapper input[type="button"] {
    background-color: var(--hc-glass-bg) !important;
    color: var(--hc-text-primary) !important;
    border-color: var(--hc-glass-border) !important;
}
body .helpdesk-wrapper .helpdesk-tab.active,
body .helpdesk-wrapper .helpdesk-page-num.active {
    color: var(--hc-accent-on-brand) !important;
    border-color: var(--hc-accent) !important;
}
body .helpdesk-wrapper h1,
body .helpdesk-wrapper h2,
body .helpdesk-wrapper h3,
body .helpdesk-wrapper h4,
body .helpdesk-wrapper p,
body .helpdesk-wrapper span,
body .helpdesk-wrapper label,
body .helpdesk-wrapper th,
body .helpdesk-wrapper td {
    color: inherit !important;
}
body .helpdesk-wrapper .helpdesk-board-title i,
body .helpdesk-wrapper .helpdesk-tab.active,
body .helpdesk-wrapper .helpdesk-page-num.active {
    color: var(--hc-accent) !important;
}
body .helpdesk-wrapper .helpdesk-tab.active {
    color: var(--hc-accent-on-brand) !important;
}
body .helpdesk-wrapper .helpdesk-table th,
body .helpdesk-wrapper .helpdesk-table td {
    color: var(--hc-text-secondary) !important;
}
body .helpdesk-wrapper .helpdesk-search-btn {
    color: var(--hc-accent) !important;
    background-color: var(--hc-accent-glow) !important;
    border-color: var(--hc-border-accent) !important;
}
body .helpdesk-wrapper .helpdesk-write-btn {
    color: var(--hc-success) !important;
    background-color: var(--hc-success-light) !important;
    border-color: var(--hc-success-border) !important;
}
body .helpdesk-wrapper .helpdesk-tabs .helpdesk-tab,
body .helpdesk-wrapper .helpdesk-board-table,
body .helpdesk-wrapper .glass-card,
body .helpdesk-wrapper .helpdesk-modal-container {
    background-color: var(--hc-bg-secondary) !important;
    border-color: var(--hc-border) !important;
}

/* ========================================
   게시판 영역 배경
   ======================================== */
.helpdesk-page-backdrop {
    background-color: var(--hc-bg-primary);
    width: 100%;
    min-height: 100vh;
    padding: 0 var(--hc-space-lg, 24px) var(--hc-space-lg, 24px);
    box-sizing: border-box;
}

body:has(.helpdesk-page-backdrop) .helpdesk-page-backdrop {
    padding-top: 0;
}

body:has(.helpdesk-page-backdrop) {
    background-color: var(--hc-bg-primary) !important;
}

/* ========================================
   HC Joyn Divine Light Beam - CSS Variables
   다크 테마 기본값 (helpdesk-theme-dark)
   ======================================== */
.helpdesk-wrapper,
.helpdesk-theme-dark.helpdesk-wrapper {
    /* Brand (골드 악센트) */
    --hc-accent: #c9a84c;
    --hc-accent-hover: #e8d48b;
    --hc-accent-glow: rgba(201, 168, 76, 0.12);
    --hc-border-accent: rgba(201, 168, 76, 0.4);
    --hc-accent-on-brand: #06060a;
    /* Background */
    --hc-bg-primary: #06060a;
    --hc-bg-secondary: #0a0a10;
    --hc-bg-tertiary: #0e0e16;
    --hc-bg-card: #0f0f1a;
    --hc-bg-input: #0c0c14;
    /* Text */
    --hc-text-primary: #f0ede6;
    --hc-text-secondary: #b0aaa0;
    --hc-text-tertiary: #706a60;
    /* Border & Glass */
    --hc-border: rgba(255, 255, 255, 0.06);
    --hc-glass-bg: rgba(255, 255, 255, 0.05);
    --hc-glass-bg-light: rgba(255, 255, 255, 0.08);
    --hc-glass-border: rgba(255, 255, 255, 0.1);
    --hc-glass-blur: 12px;
    /* Semantic */
    --hc-success: #22c55e;
    --hc-success-light: rgba(34, 197, 94, 0.12);
    --hc-success-border: rgba(34, 197, 94, 0.4);
    --hc-warning: #f59e0b;
    --hc-warning-light: rgba(245, 158, 11, 0.12);
    --hc-error: #ef4444;
    --hc-error-light: rgba(239, 68, 68, 0.12);
    /* Spacing & Radius */
    --hc-space-xs: 4px;
    --hc-space-sm: 8px;
    --hc-space-md: 16px;
    --hc-space-lg: 24px;
    --hc-space-xl: 32px;
    --hc-space-2xl: 48px;
    --hc-radius-sm: 4px;
    --hc-radius-md: 8px;
    --hc-radius-lg: 12px;
    --hc-radius-xl: 16px;
    --hc-radius-full: 9999px;
    /* Typography */
    --hc-font-family: 'Noto Sans KR', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --hc-font-size-xs: 12px;
    --hc-font-size-sm: 14px;
    --hc-font-size-base: 16px;
    --hc-font-size-lg: 18px;
    --hc-font-size-xl: 20px;
    --hc-font-size-2xl: 24px;
    --hc-font-weight-medium: 500;
    --hc-font-weight-bold: 700;
    --hc-transition-fast: 150ms ease;
    --hc-transition-normal: 250ms ease;
}

/* ========================================
   기본 설정
   ======================================== */
.helpdesk-wrapper {
    font-family: var(--hc-font-family);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--hc-space-xl) var(--hc-space-xl);
    box-sizing: border-box;
    background-color: var(--hc-bg-primary);
    color: var(--hc-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.helpdesk-wrapper * {
    box-sizing: border-box;
}

/* HC Design System: Glass card utility */
.helpdesk-wrapper .glass-card {
    background: var(--hc-glass-bg);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-xl);
}

/* ========================================
   탭 네비게이션 - 마이페이지와 동일 (pill/rounded, 아이콘 위·텍스트 아래)
   ======================================== */
.helpdesk-tabs {
    display: flex;
    background: var(--hc-bg-secondary);
    border-radius: clamp(0.6rem, 2.5vw, 1rem);
    padding: clamp(4px, 1.5vw, 6px);
    margin-bottom: var(--hc-space-lg);
    border-bottom: none;
    gap: clamp(2px, 1vw, 4px);
    box-shadow: var(--hc-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.helpdesk-tabs::-webkit-scrollbar {
    display: none;
}

.helpdesk-tab {
    flex: 1 1 auto;
    min-width: clamp(56px, 18vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 1vw, 6px);
    padding: clamp(0.5rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.75rem);
    background: transparent;
    border: none;
    border-radius: clamp(0.5rem, 2vw, 0.75rem);
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(0.875rem, 2.8vw, 1rem);
    font-weight: 500;
    color: var(--hc-text-secondary);
    transition: all var(--hc-transition-fast);
    white-space: nowrap;
}

.helpdesk-tab:hover {
    background: var(--hc-glass-bg-light, rgba(255,255,255,0.08));
    color: var(--hc-text-primary);
}

.helpdesk-tab.active {
    background: var(--hc-accent) !important;
    color: var(--hc-accent-on-brand) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.35);
}

.helpdesk-tab i {
    font-size: clamp(1.125rem, 4vw, 1.625rem);
}

/* ========================================
   게시판 컨테이너
   ======================================== */
.helpdesk-board-container {
    position: relative;
}

.helpdesk-board-content {
    display: none;
    animation: helpdesk-fadeIn var(--hc-transition-normal);
}

.helpdesk-board-content.active {
    display: block;
}

@keyframes helpdesk-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   게시판 헤더
   ======================================== */
.helpdesk-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hc-space-lg);
    flex-wrap: wrap;
    gap: var(--hc-space-md);
}

.helpdesk-board-title {
    font-size: var(--hc-font-size-2xl);
    font-weight: var(--hc-font-weight-bold);
    color: var(--hc-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--hc-space-sm);
}

.helpdesk-board-title i {
    font-size: 1.5rem;
    color: var(--hc-accent);
}

/* ========================================
   검색 박스
   ======================================== */
.helpdesk-search-box {
    display: flex;
    gap: var(--hc-space-sm);
    align-items: center;
}

.helpdesk-search-input {
    padding: var(--hc-space-sm) var(--hc-space-md);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    min-width: 240px;
    transition: all var(--hc-transition-fast);
    background: var(--hc-bg-secondary);
    color: var(--hc-text-primary);
}

.helpdesk-search-input:focus {
    outline: none;
    border-color: var(--hc-accent);
    box-shadow: 0 0 0 3px var(--hc-accent-glow);
}

.helpdesk-search-input::placeholder {
    color: var(--hc-text-tertiary);
}

.helpdesk-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--hc-accent-glow);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid var(--hc-border-accent);
    border-radius: var(--hc-radius-md);
    color: var(--hc-accent);
    cursor: pointer;
    transition: all var(--hc-transition-fast);
    flex-shrink: 0;
}

.helpdesk-search-btn:hover {
    background: rgba(201, 168, 76, 0.25);
    border-color: var(--hc-accent);
    transform: translateY(-1px);
}

.helpdesk-search-btn i {
    font-size: 1.125rem;
}

/* ========================================
   테이블 (데스크탑 목록)
   ======================================== */
.helpdesk-board-table {
    background: var(--hc-bg-secondary);
    border-radius: var(--hc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--hc-border);
    margin-bottom: var(--hc-space-lg);
}

.helpdesk-table {
    width: 100%;
    border-collapse: collapse;
}

.helpdesk-table thead {
    background: var(--hc-bg-tertiary);
    border-bottom: 1px solid var(--hc-border);
}

.helpdesk-table th {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    text-align: left;
    font-weight: var(--hc-font-weight-bold);
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-secondary);
    white-space: nowrap;
}

.helpdesk-table tbody tr {
    border-bottom: 1px solid var(--hc-border);
    transition: background var(--hc-transition-fast);
}

.helpdesk-table tbody tr:last-child {
    border-bottom: none;
}

.helpdesk-table tbody tr:hover {
    background: var(--hc-glass-bg);
}

.helpdesk-table td {
    padding: clamp(0.75rem, 2.5vw, 1rem);
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-secondary);
}

.helpdesk-table a {
    color: var(--hc-text-primary);
    text-decoration: none;
    font-weight: var(--hc-font-weight-medium);
    font-size: var(--hc-font-size-base);
    transition: color var(--hc-transition-fast);
}

.helpdesk-table a:hover {
    color: var(--hc-accent);
}

.col-num,
.col-views {
    text-align: center;
}

/* ========================================
   뱃지
   ======================================== */
.badge-new {
    display: inline-flex;
    align-items: center;
    padding: var(--hc-space-xs) var(--hc-space-sm);
    background: var(--hc-error-light);
    color: var(--hc-error);
    font-size: var(--hc-font-size-xs);
    font-weight: var(--hc-font-weight-bold);
    border-radius: var(--hc-radius-full);
    margin-left: var(--hc-space-sm);
}

.badge-hot {
    display: inline-flex;
    align-items: center;
    padding: var(--hc-space-xs) var(--hc-space-sm);
    background: var(--hc-warning-light);
    color: var(--hc-warning);
    font-size: var(--hc-font-size-xs);
    font-weight: var(--hc-font-weight-bold);
    border-radius: var(--hc-radius-full);
    margin-left: var(--hc-space-sm);
}

.badge-pinned {
    display: inline-flex;
    align-items: center;
    padding: var(--hc-space-xs) var(--hc-space-sm);
    background: var(--hc-error-light);
    color: var(--hc-error);
    font-size: var(--hc-font-size-xs);
    font-weight: var(--hc-font-weight-bold);
    border-radius: var(--hc-radius-full);
}

/* ========================================
   페이지네이션
   ======================================== */
.helpdesk-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--hc-space-sm);
    margin: var(--hc-space-2xl) 0;
}

.helpdesk-page-btn,
.helpdesk-page-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--hc-space-sm);
    background: var(--hc-glass-bg);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-md);
    color: var(--hc-text-secondary);
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--hc-transition-fast);
}

.helpdesk-page-btn:hover,
.helpdesk-page-num:hover {
    background: var(--hc-glass-bg-light);
    border-color: var(--hc-accent);
    color: var(--hc-text-primary);
}

.helpdesk-page-num.active {
    background: var(--hc-accent-glow);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border-color: var(--hc-accent);
    color: var(--hc-accent);
}

.helpdesk-page-dots {
    padding: 0 var(--hc-space-sm);
    color: var(--hc-text-tertiary);
}

.helpdesk-page-numbers {
    display: flex;
    gap: var(--hc-space-xs);
}

/* ========================================
   글쓰기 버튼
   ======================================== */
.helpdesk-write-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--hc-space-sm);
    padding: var(--hc-space-sm) var(--hc-space-lg);
    background: var(--hc-success-light);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--hc-radius-md);
    color: var(--hc-success);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-medium);
    cursor: pointer;
    transition: all var(--hc-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.helpdesk-write-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: var(--hc-success);
    transform: translateY(-1px);
}

.helpdesk-write-btn i {
    font-size: 1rem;
}

/* ========================================
   모달
   ======================================== */
.helpdesk-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hc-space-lg);
    animation: helpdesk-fadeIn var(--hc-transition-fast);
}

.helpdesk-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
}

.helpdesk-modal-container {
    position: relative;
    background: var(--hc-bg-secondary);
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-xl);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.35);
    max-width: 640px; /* 기존 800px의 80% */
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: helpdesk-slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

@keyframes helpdesk-slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.helpdesk-modal-large .helpdesk-modal-container {
    max-width: 800px; /* 기존 1000px의 80% */
}

.helpdesk-modal-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--hc-space-md);
    padding: var(--hc-space-lg) var(--hc-space-xl);
    border-bottom: 1px solid var(--hc-border);
    flex-shrink: 0;
}

.helpdesk-modal-title {
    font-size: var(--hc-font-size-xl);
    font-weight: var(--hc-font-weight-bold);
    color: var(--hc-text-primary);
    margin: 0;
}

.helpdesk-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--hc-glass-bg);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-md);
    cursor: pointer;
    color: var(--hc-text-secondary);
    font-size: 1.25rem;
    transition: all var(--hc-transition-fast);
}

.helpdesk-modal-close:hover {
    background: var(--hc-glass-bg-light);
    border-color: var(--hc-accent);
    color: var(--hc-text-primary);
}

.helpdesk-modal-body {
    padding: var(--hc-space-xl);
    overflow-y: auto;
    flex: 1;
}

.helpdesk-modal-body::-webkit-scrollbar {
    width: 6px;
}

.helpdesk-modal-body::-webkit-scrollbar-track {
    background: var(--hc-bg-tertiary);
}

.helpdesk-modal-body::-webkit-scrollbar-thumb {
    background: var(--hc-border);
    border-radius: 3px;
}

.helpdesk-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--hc-space-sm);
    padding: var(--hc-space-md) var(--hc-space-xl);
    border-top: 1px solid var(--hc-border);
    flex-shrink: 0;
}

/* 게시글 읽기 모달 하단 닫기 버튼: 가로 확대 + 글래스모피즘 */
.helpdesk-modal-footer .helpdesk-btn.helpdesk-modal-close {
    min-width: 160px;
    padding-left: var(--hc-space-xl);
    padding-right: var(--hc-space-xl);
    padding-top: var(--hc-space-md);
    padding-bottom: var(--hc-space-md);
    background: var(--hc-glass-bg);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-md);
    font-size: var(--hc-font-size-base);
}

.helpdesk-modal-footer .helpdesk-btn.helpdesk-modal-close:hover {
    background: var(--hc-glass-bg-light);
    border-color: var(--hc-accent);
}

/* ========================================
   버튼 (글래스모피즘)
   ======================================== */
.helpdesk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hc-space-sm);
    padding: var(--hc-space-sm) var(--hc-space-md);
    font-family: inherit;
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-medium);
    border: 1px solid var(--hc-glass-border);
    border-radius: var(--hc-radius-md);
    background: var(--hc-glass-bg);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    color: var(--hc-text-primary);
    cursor: pointer;
    transition: all var(--hc-transition-fast);
    text-decoration: none;
    min-height: 40px;
}

.helpdesk-btn:hover {
    background: var(--hc-glass-bg-light);
    border-color: var(--hc-accent);
}

.helpdesk-btn-primary {
    background: var(--hc-accent-glow);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border-color: var(--hc-border-accent);
    color: var(--hc-accent);
}

.helpdesk-btn-primary:hover {
    background: rgba(201, 168, 76, 0.25);
    border-color: var(--hc-accent);
    transform: translateY(-1px);
}

.helpdesk-btn-danger {
    background: var(--hc-error-light);
    backdrop-filter: blur(var(--hc-glass-blur));
    -webkit-backdrop-filter: blur(var(--hc-glass-blur));
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--hc-error);
}

.helpdesk-btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: var(--hc-error);
    transform: translateY(-1px);
}

/* ========================================
   게시글 상세
   ======================================== */
.helpdesk-post-title {
    font-size: var(--hc-font-size-2xl);
    font-weight: var(--hc-font-weight-bold);
    color: var(--hc-text-primary);
    margin: 0 0 var(--hc-space-md);
    line-height: 1.25;
}

.helpdesk-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-space-md);
    padding-bottom: var(--hc-space-md);
    margin-bottom: var(--hc-space-lg);
    border-bottom: 1px solid var(--hc-border);
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-secondary);
}

.helpdesk-post-meta span {
    display: flex;
    align-items: center;
    gap: var(--hc-space-xs);
}

.helpdesk-post-content {
    font-size: var(--hc-font-size-base);
    line-height: 1.75;
    color: var(--hc-text-secondary);
}

.helpdesk-post-content p {
    margin: 0 0 var(--hc-space-md);
}

.helpdesk-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hc-radius-md);
}

/* ========================================
   폼 요소
   ======================================== */
.helpdesk-form-group {
    margin-bottom: var(--hc-space-lg);
}

.helpdesk-form-label {
    display: block;
    margin-bottom: var(--hc-space-sm);
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-medium);
    color: var(--hc-text-secondary);
}

.helpdesk-form-input,
.helpdesk-form-select,
.helpdesk-form-textarea {
    width: 100%;
    padding: var(--hc-space-sm) var(--hc-space-md);
    font-family: inherit;
    font-size: var(--hc-font-size-base);
    color: var(--hc-text-primary);
    background: var(--hc-bg-secondary);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    transition: all var(--hc-transition-fast);
}

.helpdesk-form-input:focus,
.helpdesk-form-select:focus,
.helpdesk-form-textarea:focus {
    outline: none;
    border-color: var(--hc-accent);
    box-shadow: 0 0 0 3px var(--hc-accent-glow);
}

.helpdesk-form-input::placeholder,
.helpdesk-form-textarea::placeholder {
    color: var(--hc-text-tertiary);
}

.helpdesk-form-textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.75;
}

/* ========================================
   로딩 / 빈 상태
   ======================================== */
.helpdesk-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--hc-space-2xl);
    color: var(--hc-text-secondary);
    gap: var(--hc-space-sm);
}

.helpdesk-loading i {
    font-size: 2rem;
}

.ri-spin {
    animation: helpdesk-spin 1s linear infinite;
}

@keyframes helpdesk-spin {
    to { transform: rotate(360deg); }
}

.helpdesk-empty,
.helpdesk-empty-state {
    text-align: center;
    padding: clamp(2rem, 6vw, 2.5rem);
}

.helpdesk-empty i,
.helpdesk-empty-state .helpdesk-empty-icon i {
    font-size: clamp(3rem, 12vw, 4.5rem);
    color: var(--hc-text-tertiary);
    margin-bottom: var(--hc-space-md);
    opacity: 0.4;
}

.helpdesk-empty p,
.helpdesk-empty-state .helpdesk-empty-title,
.helpdesk-empty-state .helpdesk-empty-desc {
    margin: 0 0 var(--hc-space-xs);
    font-size: var(--hc-font-size-base);
    color: var(--hc-text-secondary);
}

.helpdesk-empty-state .helpdesk-empty-title {
    font-size: var(--hc-font-size-lg);
    font-weight: var(--hc-font-weight-bold);
    margin-bottom: var(--hc-space-sm);
}

.helpdesk-empty-state .helpdesk-empty-icon {
    margin-bottom: var(--hc-space-md);
}

/* ========================================
   모바일 카드 레이아웃
   ======================================== */
.helpdesk-mobile-cards {
    display: none;
}

.helpdesk-mobile-card {
    background: var(--hc-bg-secondary);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-lg);
    padding: var(--hc-space-md);
    margin-bottom: var(--hc-space-sm);
    transition: all var(--hc-transition-fast);
}

.helpdesk-mobile-card:hover {
    background: var(--hc-glass-bg);
}

.helpdesk-mobile-card:active {
    background: var(--hc-glass-bg);
}

.helpdesk-mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--hc-space-sm);
    gap: var(--hc-space-sm);
}

.helpdesk-mobile-card-number {
    font-size: var(--hc-font-size-sm);
    font-weight: var(--hc-font-weight-bold);
    color: var(--hc-text-tertiary);
    flex-shrink: 0;
}

.helpdesk-mobile-card-title,
.helpdesk-mobile-card-title h3 {
    flex: 1;
    font-size: var(--hc-font-size-base) !important;
    font-weight: var(--hc-font-weight-bold) !important;
    color: var(--hc-text-primary) !important;
    line-height: 1.375 !important;
    margin: 0 !important;
}

.helpdesk-mobile-card-title a {
    color: inherit !important;
    text-decoration: none;
}

.helpdesk-mobile-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--hc-space-sm);
    padding-top: var(--hc-space-sm);
    border-top: 1px solid var(--hc-border);
    font-size: var(--hc-font-size-sm);
    color: var(--hc-text-tertiary);
}

.helpdesk-mobile-card-author,
.helpdesk-mobile-card-date,
.helpdesk-mobile-card-views {
    display: flex;
    align-items: center;
    gap: var(--hc-space-xs);
}

.helpdesk-mobile-card.is-pinned {
    background: var(--hc-error-light);
    border-left: 3px solid var(--hc-error);
}

/* ========================================
   반응형
   ======================================== */
@media (max-width: 768px) {
    .helpdesk-page-backdrop {
        padding-left: 10px;
        padding-right: 10px;
    }
    .helpdesk-wrapper {
        padding: var(--hc-space-md) 10px;
    }
    
    .helpdesk-board-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* 검색줄 1행, 글쓰기 버튼 2행 배치 */
    .helpdesk-search-box {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .helpdesk-search-input {
        flex: 1;
        min-width: 0;
    }
    
    .helpdesk-write-btn {
        flex-basis: 100%;
        width: 100%;
        justify-content: center;
        margin-top: var(--hc-space-sm);
    }
    
    .helpdesk-board-title {
        font-size: var(--hc-font-size-xl);
    }
    
    /* 테이블 숨기고 카드 표시 */
    .helpdesk-board-table {
        display: none;
    }
    
    .helpdesk-mobile-cards {
        display: block;
    }
    
    /* 모달 풀스크린 */
    .helpdesk-modal {
        padding: 0;
    }
    
    .helpdesk-modal-container {
        width: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .helpdesk-modal-header,
    .helpdesk-modal-body {
        padding-left: var(--hc-space-md);
        padding-right: var(--hc-space-md);
    }
    
    .helpdesk-modal-footer {
        flex-direction: column;
        padding: var(--hc-space-md);
    }
    
    .helpdesk-modal-footer .helpdesk-btn {
        width: 100%;
        justify-content: center;
    }
    
    .helpdesk-post-title {
        font-size: var(--hc-font-size-xl);
    }
    
    .helpdesk-post-meta {
        flex-direction: column;
        gap: var(--hc-space-sm);
    }
    
    /* 탭: 데스크탑과 동일 (마이페이지 형식 - base에서 적용) */
    
    .helpdesk-pagination {
        flex-wrap: wrap;
    }
    
    .helpdesk-page-btn,
    .helpdesk-page-num {
        min-width: 36px;
        height: 36px;
        font-size: var(--hc-font-size-xs);
    }
}

@media (max-width: 480px) {
    .helpdesk-wrapper {
        padding: var(--hc-space-sm) 10px;
    }
    
    .helpdesk-tab {
        min-width: clamp(48px, 16vw, 80px);
        padding: clamp(0.4rem, 1.5vw, 0.75rem) clamp(0.4rem, 1.2vw, 0.6rem);
        font-size: clamp(0.75rem, 2.5vw, 0.9375rem);
    }
    
    .helpdesk-tab i {
        font-size: clamp(1rem, 3.5vw, 1.25rem);
    }
    
    .helpdesk-mobile-card-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .helpdesk-modal-title {
        font-size: var(--hc-font-size-lg);
    }
}

/* ========================================
   모바일/PWA/앱 폰트 강화
   ======================================== */
@media (max-width: 768px) {
    .helpdesk-wrapper {
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
    }
    
    .helpdesk-wrapper p,
    .helpdesk-wrapper span,
    .helpdesk-wrapper div,
    .helpdesk-wrapper li,
    .helpdesk-wrapper td {
        font-size: 1rem !important;
        font-weight: 500 !important;
        line-height: 1.7 !important;
    }
    
    .helpdesk-wrapper h1,
    .helpdesk-wrapper h2,
    .helpdesk-wrapper h3,
    .helpdesk-wrapper h4 {
        font-weight: 700 !important;
    }
    
    .helpdesk-tab {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        padding: 0.875rem 1rem !important;
    }
    
    .helpdesk-btn {
        font-size: 1rem !important;
        font-weight: 600 !important;
        min-height: 48px !important;
    }
    
    .helpdesk-input,
    .helpdesk-select,
    .helpdesk-textarea {
        font-size: 16px !important;
        font-weight: 500 !important;
        min-height: 52px !important;
    }
    
    .helpdesk-post-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
    }
    
    .helpdesk-table th {
        font-size: var(--hc-font-size-sm) !important;
        font-weight: var(--hc-font-weight-bold) !important;
    }
    
    .helpdesk-table td {
        font-size: var(--hc-font-size-sm) !important;
        font-weight: var(--hc-font-weight-medium) !important;
    }
    
    .helpdesk-mobile-card-title {
        font-size: var(--hc-font-size-base) !important;
        font-weight: var(--hc-font-weight-bold) !important;
    }
    
    .helpdesk-modal-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
    }
}

/* ========================================
   라이트 테마 (HC Joyn Divine Light Beam - /wp-content/docs/Joyn/hc-joyn-design-tokens.md)
   ======================================== */
.helpdesk-theme-light.helpdesk-wrapper {
    --hc-accent: #9e7c24;
    --hc-accent-hover: #7b6018;
    --hc-accent-glow: rgba(158, 124, 36, 0.12);
    --hc-border-accent: rgba(158, 124, 36, 0.4);
    --hc-accent-on-brand: #ffffff;
    --hc-bg-primary: #f4f1eb;
    --hc-bg-secondary: #edeae3;
    --hc-bg-tertiary: #e5e2da;
    --hc-bg-card: #ffffff;
    --hc-text-primary: #1a1814;
    --hc-text-secondary: #57524a;
    --hc-text-tertiary: #908a80;
    --hc-border: rgba(28, 24, 20, 0.08);
    --hc-glass-bg: rgba(255, 255, 255, 0.9);
    --hc-glass-bg-light: #fdfcfa;
    --hc-glass-border: rgba(28, 24, 20, 0.08);
    --hc-success: #10b981;
    --hc-success-light: #ecfdf5;
    --hc-success-border: rgba(16, 185, 129, 0.5);
    --hc-font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body .helpdesk-theme-light.helpdesk-page-backdrop,
body .helpdesk-page-backdrop.helpdesk-theme-light {
    background-color: #f4f1eb !important;
    padding-top: 0 !important;
}

body:has(.helpdesk-theme-light.helpdesk-page-backdrop),
body:has(.helpdesk-page-backdrop.helpdesk-theme-light) {
    background-color: #f4f1eb !important;
}

body .helpdesk-theme-light.helpdesk-wrapper,
body .helpdesk-wrapper.helpdesk-theme-light {
    background-color: #f4f1eb !important;
    color: #1a1814 !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -0.01em !important;
}

body .helpdesk-theme-light.helpdesk-wrapper a,
body .helpdesk-wrapper.helpdesk-theme-light a {
    color: #1a1814 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper a:hover,
body .helpdesk-wrapper.helpdesk-theme-light a:hover {
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper input,
body .helpdesk-theme-light.helpdesk-wrapper select,
body .helpdesk-theme-light.helpdesk-wrapper textarea,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-search-input,
body .helpdesk-wrapper.helpdesk-theme-light input,
body .helpdesk-wrapper.helpdesk-theme-light select,
body .helpdesk-wrapper.helpdesk-theme-light textarea,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-search-input {
    background-color: #f8f6f2 !important;
    color: #1a1814 !important;
    border-color: rgba(28, 24, 20, 0.08) !important;
    border-width: 2px !important;
}

body .helpdesk-theme-light.helpdesk-wrapper input::placeholder,
body .helpdesk-theme-light.helpdesk-wrapper textarea::placeholder,
body .helpdesk-wrapper.helpdesk-theme-light input::placeholder,
body .helpdesk-wrapper.helpdesk-theme-light textarea::placeholder {
    color: #6b7280 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-search-input:focus,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-search-input:focus,
body .helpdesk-theme-light.helpdesk-wrapper input:focus,
body .helpdesk-wrapper.helpdesk-theme-light input:focus {
    border-color: #9e7c24 !important;
    box-shadow: 0 0 0 4px rgba(158, 124, 36, 0.15) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper button,
body .helpdesk-theme-light.helpdesk-wrapper .button,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-page-btn,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-page-num,
body .helpdesk-wrapper.helpdesk-theme-light button,
body .helpdesk-wrapper.helpdesk-theme-light .button,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-page-btn,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-page-num {
    background-color: #ffffff !important;
    color: #57524a !important;
    border: 2px solid rgba(28, 24, 20, 0.08) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-search-btn,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-search-btn {
    color: #9e7c24 !important;
    background-color: rgba(158, 124, 36, 0.12) !important;
    border: 2px solid #9e7c24 !important;
    box-shadow: 0 4px 12px rgba(158, 124, 36, 0.3) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-search-btn:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-search-btn:hover {
    background-color: #7b6018 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(158, 124, 36, 0.4) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-write-btn,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-write-btn {
    color: #10b981 !important;
    background-color: #ecfdf5 !important;
    border: 2px solid #10b981 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-write-btn:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-write-btn:hover {
    background-color: #059669 !important;
    color: #ffffff !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tab,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tab {
    background: transparent !important;
    color: #6b7280 !important;
    border-color: transparent !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tab:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tab:hover {
    background: #e5e2da !important;
    color: #57524a !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tab.active,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tab.active {
    color: #ffffff !important;
    background: #9e7c24 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(158, 124, 36, 0.35) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-page-num.active,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-page-num.active {
    color: #9e7c24 !important;
    background-color: rgba(158, 124, 36, 0.12) !important;
    border-color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-board-title i,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-board-title i {
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-board-title,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-board-title {
    color: #1a1814 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tab.active i,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tab.active i {
    color: inherit !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tabs,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tabs {
    background: #edeae3 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tabs .helpdesk-tab:not(.active),
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tabs .helpdesk-tab:not(.active) {
    background-color: transparent !important;
    border-color: transparent !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-tabs .helpdesk-tab.active,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-tabs .helpdesk-tab.active {
    background-color: #9e7c24 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(158, 124, 36, 0.35) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-board-table,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-board-table {
    background-color: #ffffff !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: clamp(0.6rem, 2.5vw, 1rem) !important;
    padding: 0 !important;
    margin-bottom: clamp(1.25rem, 4vw, 1.5rem) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

body .helpdesk-theme-light.helpdesk-wrapper .glass-card,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-modal-container,
body .helpdesk-wrapper.helpdesk-theme-light .glass-card,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-modal-container {
    background-color: #f9fafb !important;
    border-color: #f3f4f6 !important;
    border-width: 1px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table thead,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table thead {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table th,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table th {
    color: #111827 !important;
    font-weight: 600 !important;
    padding: clamp(0.75rem, 2.5vw, 1rem) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table tbody tr,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table tbody tr {
    border-bottom: 1px solid #f3f4f6 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table tbody tr:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table tbody tr:hover {
    background-color: #f9fafb !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table td,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table td {
    color: #374151 !important;
    padding: clamp(0.75rem, 2.5vw, 1rem) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table a,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table a {
    color: #1a1814 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-table a:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-table a:hover {
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-modal-overlay,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-modal-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-modal-container,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-modal-container {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card {
    background: #ffffff !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: clamp(0.6rem, 2.5vw, 1rem) !important;
    padding: clamp(1rem, 3.5vw, 1.25rem) !important;
    margin-bottom: clamp(0.75rem, 2.5vw, 1rem) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card:hover {
    background: #f9fafb !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card.is-pinned,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card.is-pinned {
    background: #fef2f2 !important;
    border-left: 3px solid #ef4444 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-header,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-header {
    margin-bottom: clamp(0.6rem, 2vw, 0.75rem) !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-title a,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-title h3 a,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-title a,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-title h3 a {
    color: #1a1814 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-title a:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-title h3 a:hover {
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-meta,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-meta {
    border-top-color: #f3f4f6 !important;
    color: #6b7280 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-mobile-card-number,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-mobile-card-number {
    color: #6b7280 !important;
}

/* 빈 상태 - joyn-empty-state 스타일 */
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-empty-state,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-empty-state {
    padding: clamp(2rem, 6vw, 2.5rem) !important;
    color: #6b7280 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-empty-state .helpdesk-empty-icon i,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-empty-state .helpdesk-empty-icon i {
    color: #9ca3af !important;
    opacity: 0.4 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-empty-state .helpdesk-empty-title,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-empty-state .helpdesk-empty-desc {
    color: #6b7280 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .badge-new,
body .helpdesk-wrapper.helpdesk-theme-light .badge-new {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .badge-hot,
body .helpdesk-wrapper.helpdesk-theme-light .badge-hot {
    background: #fffbeb !important;
    color: #f59e0b !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .badge-pinned,
body .helpdesk-wrapper.helpdesk-theme-light .badge-pinned {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

/* 답변 개수 배지 - 라이트 테마 (상태 배지와 유사한 은은한 스타일) */
body .helpdesk-theme-light.helpdesk-wrapper .badge-answers,
body .helpdesk-wrapper.helpdesk-theme-light .badge-answers {
    background: rgba(158, 124, 36, 0.12) !important;
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-btn,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-modal-close,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-btn,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-modal-close {
    background: #ffffff !important;
    border: 2px solid rgba(28, 24, 20, 0.08) !important;
    color: #57524a !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-btn:hover,
body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-modal-close:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-btn:hover,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-modal-close:hover {
    background: #fdfcfa !important;
    border-color: #9e7c24 !important;
    color: #9e7c24 !important;
}

body .helpdesk-theme-light.helpdesk-wrapper .helpdesk-btn-primary,
body .helpdesk-wrapper.helpdesk-theme-light .helpdesk-btn-primary {
    background: #9e7c24 !important;
    border-color: #9e7c24 !important;
    color: #ffffff !important;
}

/* helpdesk 페이지: mainpage-maker 푸터2 숏코드 사용, 테마 기본 푸터는 숨김 */
body.helpdesk-page #colophon,
body.helpdesk-page .site-footer,
body.helpdesk-page [class*="site-footer"],
body.helpdesk-page [class*="ast-footer"] {
    display: none !important;
}

/* 푸터2를 콘텐츠 오른쪽이 아닌 항상 밑으로 (전체 폭·단독 행) */
body.helpdesk-page .mpf2-isolation-wrap {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    flex-basis: 100% !important;
    clear: both !important;
    order: 9999 !important;
}