/* 전체 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 선택된 상품 정보 바 (상품특징, 메모 탭 상단) */
.selected-product-bar {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.selected-product-bar .product-bar-code {
    font-weight: 600;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

.selected-product-bar .product-bar-divider {
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

.selected-product-bar .product-bar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* 클릭 가능한 상품번호 (네이버 상품페이지 링크) */
.clickable-product-no {
    cursor: pointer;
    color: #2c7be5;
    transition: all 0.2s ease;
}

.clickable-product-no:hover {
    color: #1a5bb5;
    text-decoration: underline;
    background: rgba(44, 123, 229, 0.1);
    border-radius: 3px;
}

body {
    font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
    background: #f5f7fa;
    color: #333;
    overflow: hidden;
}

@media (max-width: 768px) {
    body {
        overflow: auto;
        overflow-x: hidden;
    }
}

/* 상단 헤더 */
.top-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.logo-icon {
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 600px;
    margin: 0 30px;
}

/* 상단 헤더 링크 버튼 영역 (설정 > 상단링크) */
.header-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.header-link-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.26);
}

.header-link-btn:active {
    background: rgba(255,255,255,0.22);
}

/* 상품 상태 필터 셀렉트 */
.search-status-select {
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    background: white;
    color: #495057;
    cursor: pointer;
    min-width: 110px;
    transition: box-shadow 0.2s;
}

.search-status-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.search-status-select option {
    padding: 8px;
}

#search-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: box-shadow 0.2s;
}

#search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

#search-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #3498db;
    color: white;
    transition: background 0.2s;
}

#search-btn:hover {
    background: #2980b9;
}

/* 메인 네비게이션 */
.main-nav {
    display: flex;
    gap: 8px;
}

.nav-btn {
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    color: white;
    transition: all 0.2s;
    text-decoration: none !important; /* a 태그 기본 밑줄 제거 */
    display: inline-block; /* a 태그가 button처럼 동작하도록 */
}

.nav-btn:hover,
.nav-btn:visited,
.nav-btn:focus,
.nav-btn:active {
    text-decoration: none !important;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.2);
}

.nav-btn.active {
    background: white;
    color: #2c3e50;
    border-color: white;
    text-decoration: none !important;
}

/* 페이지 컨테이너 */
.page-container {
    height: calc(100vh - 60px);
    overflow: hidden;
}

.page {
    display: none;
    height: 100%;
}

.page.active {
    display: block;
}

/* 3단 분할 메인 컨테이너 (상담 페이지) */
.main-container {
    display: grid;
    grid-template-columns: 1fr 1.1fr 0.9fr;
    gap: 15px;
    padding: 15px 20px;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* 패널 공통 스타일 */
.left-panel, .center-panel, .right-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #e1e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    box-sizing: border-box;
}

/* 헤더 내 버튼 */
.header-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.header-btn:hover {
    background: rgba(255,255,255,0.3);
}

.header-btn.active {
    background: #e74c3c;
    border-color: #c0392b;
}

.header-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
}

/* 미답변 뱃지 플랫폼 분리 (N=네이버 초록, C=쿠팡 빨강) */
.header-badge.badge-naver { background: #16a34a; }
.header-badge.badge-coupang { background: #dc2626; }

.header-btn.active .header-badge {
    background: white;
    color: #e74c3c;
}
.header-btn.active .header-badge.badge-naver { color: #16a34a; }
.header-btn.active .header-badge.badge-coupang { color: #dc2626; }

.last-check-time {
    font-size: 11px;
    color: #4ade80;  /* 밝은 녹색 */
    margin-left: auto;
    margin-right: 8px;
}

/* QnA 리스트 내 수집시간 - 타이틀 옆에 인라인 표시 */
.qna-section-70 .last-check-time {
    font-size: 11px;
    color: #4ade80;  /* 밝은 녹색 */
    margin-left: 8px;
    font-weight: normal;
}

.panel-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 중앙 패널 - 두 개의 그룹 */
.center-panel {
    padding: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
}

/* 가운데 패널 헤더 스타일 */
.center-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-height: 60px;
}

/* QnA 검색 박스 (우측 정렬) */
.center-panel .panel-header .qna-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.center-panel .panel-header .search-scope-radio {
    display: flex;
    align-items: center;
    gap: 3px;
    color: white;
    font-size: 11px;
    cursor: pointer;
}

.center-panel .panel-header .search-scope-radio input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.center-panel .panel-header #qna-search-input {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    font-size: 12px;
    width: 150px;
    flex-shrink: 1;
    min-width: 100px;
    background: rgba(255,255,255,0.9);
}

.center-panel .panel-header #qna-search-input:focus {
    outline: none;
    border-color: #fff;
    background: white;
}

.center-panel .panel-header #qna-search-btn-inline {
    padding: 4px 8px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.center-panel .panel-header #qna-search-btn-inline:hover {
    background: rgba(255,255,255,0.3);
}

.center-panel .panel-header .qna-paging {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.center-panel .panel-header .qna-paging button {
    padding: 4px 10px;
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.center-panel .panel-header .qna-paging button:hover {
    background: rgba(255,255,255,0.3);
}

.center-panel .panel-header .qna-paging span {
    color: white;
    font-size: 12px;
}

/* 가운데 패널 본문 스타일 */
.center-panel .panel-body {
    padding: 12px;
    gap: 12px;
    background: #f8f9fa;
}

/* QnA split body는 padding 없이 */
.center-panel .panel-body.qna-split-body {
    padding: 0;
    gap: 0;
}

.center-panel .qna-list-wrapper {
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
}

/* 전체 탭 구조 */
.qna-split-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* 전체 탭 컨테이너 */
.qna-tab-container.qna-full-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    width: 100%;
    margin: 0;
}

/* 탭 메뉴 */
.qna-tab-menu {
    display: flex;
    gap: 0;
    background: #f0f2f5;
    border-bottom: 1px solid #e1e4e8;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.qna-tab-btn {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s;
    width: 50%;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

.qna-tab-btn:hover {
    background: #e8eaed;
    color: #333;
}

.qna-tab-btn.active {
    background: white;
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

/* 탭 컨텐츠 */
.qna-tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.qna-tab-content.active {
    display: flex;
}

.qna-tab-content .qna-list-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* QnA 로딩 오버레이 */
.qna-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 6px;
}

.qna-loading-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.qna-loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #667eea;
    border-radius: 50%;
    animation: qna-spin 1s linear infinite;
}

@keyframes qna-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.qna-loading-text {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.qna-loading-subtext {
    font-size: 14px;
    color: #666;
}

.qna-tab-container .list-title {
    background: #f0f2f5;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #e1e4e8;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-paging {
    display: flex;
    align-items: center;
    gap: 4px;
}

.list-paging button {
    padding: 2px 6px;
    font-size: 10px;
    background: #667eea;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
}

.list-paging button:hover {
    background: #5a6fd6;
}

.list-paging span {
    font-size: 11px;
    color: #666;
}

.qna-tab-container table {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 0; /* flex: 1과 함께 사용하여 부모 높이에 맞춤 */
}

.qna-tab-container tbody {
    display: block;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.qna-tab-container thead,
.qna-tab-container tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* 자주묻는질문, QnA 테이블 왼쪽 정렬 */
.qna-tab-container th,
.qna-tab-container td {
    text-align: left !important;
}

/* no-data-message는 중앙 정렬 유지 */
.qna-tab-container td.no-data-message {
    text-align: center !important;
}

/* QnA 리스트 테이블 컬럼 너비 (2026-05-28: 마켓 컬럼 추가, 5컬럼)
 * inline style과 동일 값으로 통일 — thead/tbody 너비 어긋남 방지
 * - 1: 마켓 68px
 * - 2: 등록일 78px
 * - 3: 상태 70px
 * - 4: 문의제목 자동
 * - 5: AI답변 60px
 */
/* .qna-table td의 max-width:0 + nowrap + ellipsis 트릭이 텍스트를 너무 짧게 자르므로 override */
.qna-tab-container .qna-table td {
    max-width: none !important;
}

/* 문의제목(4번째 컬럼): 200px 폭, 한 줄 + ellipsis (...) 처리 */
.qna-tab-container .qna-table th:nth-child(4),
.qna-tab-container .qna-table td:nth-child(4) {
    width: 200px !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.qna-tab-container .qna-table th:nth-child(1),
.qna-tab-container .qna-table td:nth-child(1) {
    width: 60px;
    text-align: center !important;
}

.qna-tab-container .qna-table th:nth-child(2),
.qna-tab-container .qna-table td:nth-child(2) {
    width: 50px;
}

.qna-tab-container .qna-table th:nth-child(3),
.qna-tab-container .qna-table td:nth-child(3) {
    width: 60px;
}

.qna-tab-container .qna-table th:nth-child(5),
.qna-tab-container .qna-table td:nth-child(5) {
    width: 54px;
    text-align: center;
}

.center-panel .qna-answer-section {
    margin-top: 0;
}

/* 두 게시판 레이아웃 */
.panel-body.two-boards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: #f8f9fa;
}

.board-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

.board-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.board-header input {
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    font-size: 11px;
    width: 100px;
    background: rgba(255,255,255,0.9);
}

.board-header button {
    padding: 3px 6px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 11px;
}

.board-header button:hover {
    background: rgba(255,255,255,0.3);
}

.board-header .qna-paging {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.board-header .qna-paging span {
    color: white;
    font-size: 11px;
}

.board-content {
    flex: 1;
    overflow-y: auto;
}

/* 자주묻는질문 섹션 - 접을 수 있는 형태 */
.faq-section {
    flex: 0 0 auto;
    background: #fffbeb;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 8px;
}

.faq-header {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #333;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}

.faq-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.faq-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s;
}

.faq-section.collapsed .faq-toggle-icon {
    transform: rotate(-90deg);
}

.faq-section.collapsed .faq-content {
    display: none;
}

.btn-add-faq {
    padding: 2px 6px;
    font-size: 10px;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-add-faq:hover {
    background: white;
}

.faq-content {
    max-height: 120px;
    overflow-y: auto;
    padding: 6px 8px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.faq-item {
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}

.faq-item:hover {
    background: #fff9e6;
}

.faq-item .faq-question {
    font-weight: 500;
    color: #333;
}

.faq-item .faq-answer-preview {
    color: #666;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.placeholder-text {
    color: #999;
    font-size: 11px;
    text-align: center;
    padding: 10px;
}

/* QnA 패널 바디 */
.qna-panel-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* QnA 리스트 래퍼 */
.qna-list-wrapper {
    flex: 1;
    overflow-y: auto;
}

.faq-group, .qna-group {
    flex: 1;
    background: #fafbfc;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qna-group.full-height {
    flex: 1;
    height: 100%;
}

/* 우측 패널 탭 */
.right-tab-menu, .right-tab-buttons {
    display: flex;
    gap: 0;
    background: #f0f2f5;
    border-bottom: 1px solid #e1e4e8;
}

.right-tab-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.right-tab-btn:hover {
    background: #e8eaed;
}

.right-tab-btn.active {
    color: #667eea;
    background: white;
    border-bottom: 2px solid #667eea;
}

.right-tab-content {
    display: none !important;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px;
}

.right-tab-content.active {
    display: flex !important;
}

.tab-placeholder {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
}

/* 답변 탭 스타일 */
.qna-detail-section {
    margin-bottom: 12px;
}

.qna-detail-header, .qna-answer-header {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.selected-question-box {
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    min-height: 60px;
}

.qna-answer-section {
    margin-top: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.answer-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    padding-left: 4px;
}

.qna-answer-box {
    flex: 1;
    padding: 12px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* FAQ 공지 스타일 (QnA 리스트 상단) */
.qna-table tbody tr.faq-notice {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-left: 3px solid #ffc107;
}

.qna-table tbody tr.faq-notice td:first-child::before {
    content: "📌 ";
}

.qna-table tbody tr.faq-notice:hover {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
}

/* 자주묻는질문 등록 버튼 */
.btn-register-faq {
    margin-top: 10px;
    padding: 4px 10px;
    background: #ffe082;
    color: #555;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-register-faq:hover {
    background: #ffecb3;
}

.btn-register-faq.registered {
    background: #a5d6a7;
    color: #2e7d32;
}

/* QnA 답변 박스 레이아웃 */
.qna-answer-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-header .qna-paging {
    padding: 0;
    gap: 6px;
}

/* QnA 검색 컨테이너 */
.qna-search-container {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 10px;
}

.qna-search-container input {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    font-size: 12px;
    width: 150px;
    background: rgba(255,255,255,0.9);
}

.qna-search-container input:focus {
    outline: none;
    border-color: #fff;
    background: white;
}

.qna-search-container button {
    padding: 4px 8px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.qna-search-container button:hover {
    background: rgba(255,255,255,0.3);
}

.group-header .qna-paging button {
    padding: 2px 8px;
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
}

.group-header .qna-paging button:hover {
    background: rgba(255,255,255,0.3);
}

.group-header .qna-paging span {
    color: white;
    font-size: 11px;
}

.group-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    overflow: hidden;
}

/* 탭 버튼 */
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #e1e4e8;
    background: #f6f8fa;
    position: relative;
    z-index: 100;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #586069;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}

.tab-btn:hover {
    background: #e1e4e8;
    color: #24292e;
}

.tab-btn.active {
    color: #0366d6;
    border-bottom-color: #0366d6;
    background: white;
}

/* 탭 버튼 안의 배지 */
.tab-btn .badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

.tab-btn .badge:empty,
.tab-btn .badge[style*="display: none"] {
    display: none;
}

.tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

/* 상품 테이블 */
.product-table-container {
    flex: 1;
    overflow: auto;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* 마켓상품 테이블 컬럼 너비 고정 (5컬럼: No/이미지/마켓-상품코드/품목코드/상품명) */
#market-products .product-table {
    table-layout: fixed;
}
#market-products .product-table th:nth-child(1),
#market-products .product-table td:nth-child(1) {
    width: 40px;
    text-align: center;
}
#market-products .product-table th:nth-child(2),
#market-products .product-table td:nth-child(2) {
    width: 70px;
}
#market-products .product-table th:nth-child(3),
#market-products .product-table td:nth-child(3) {
    width: 90px;
}
#market-products .product-table th:nth-child(4),
#market-products .product-table td:nth-child(4) {
    width: 100px;
}
#market-products .product-table th:nth-child(5),
#market-products .product-table td:nth-child(5) {
    width: auto;
}

/* 마켓상품 상품명 스타일 */
#market-products .product-table .product-title {
    display: block;
    word-break: break-word;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
}

.product-table thead {
    position: sticky;
    top: 0;
    background: #f6f8fa;
    z-index: 10;
}

.product-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #24292e;
    border-bottom: 2px solid #e1e4e8;
}

.product-table th.id-header {
    line-height: 1.3;
    font-size: 12px;
}

.product-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #e1e4e8;
}

.product-table tbody tr:hover {
    background: #f6f8fa;
}

.product-table tbody tr.selected {
    background: #e3f2fd;
}

.product-table td {
    padding: 10px 8px;
    vertical-align: middle;
}

.product-table td img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e1e4e8;
}

.product-table .id-cell {
    font-size: 11px;
    line-height: 1.4;
}

.product-table .id-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-table .id-line.item-code {
    font-weight: 600;
    color: #2c5f7c;
}

/* 클릭 가능한 품목코드 스타일 */
.product-table .id-line.item-code.clickable-code {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: #1a73e8;
}

.product-table .id-line.item-code.clickable-code:hover {
    color: #0d5db8;
    text-decoration-style: solid;
}

/* 수정 가능한 품목코드 스타일 */
.product-table .id-line.item-code.editable-code {
    cursor: pointer;
    color: #2c5f7c;
}

.product-table .id-line.item-code.editable-code:hover {
    color: #1a73e8;
    text-decoration: underline;
    text-decoration-style: dashed;
}

.product-table .id-line.model-name {
    font-size: 10px;
    color: #888;
}

.product-table .sub-header {
    font-size: 12px;
    color: #3498db;
    font-weight: 500;
}

/* 등록마켓 드롭다운 */
.market-cell {
    position: relative;
}

.btn-market-dropdown {
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-market-dropdown:hover {
    background: #f0f4f8;
    border-color: #3498db;
}

/* 자식 마켓 리스트 row */
.market-dropdown-row {
    background: #f8fafc;
}

.market-dropdown-row.hidden {
    display: none;
}

.market-dropdown-cell {
    padding: 0 !important;
    border-top: none !important;
}

.market-dropdown-list {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
    border-left: 3px solid #3498db;
    margin-left: 60px;
    padding: 8px 0;
}

.market-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    gap: 6px;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.market-dropdown-item:last-child {
    border-bottom: none;
}

.market-dropdown-item:hover {
    background: #e8f4fc;
}

.market-dropdown-item .mkt-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 12px;
}

.market-dropdown-item .mkt-code {
    color: #888;
    font-size: 11px;
}

.market-dropdown-item .mkt-prd-id {
    margin-left: auto;
    color: #3498db;
    font-size: 11px;
    font-family: monospace;
}

.market-count-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    background: #e8f4fc;
    color: #2c5f7c;
    border-radius: 10px;
}

.product-table .favorite-star {
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
}

.product-table .favorite-star.active {
    color: #ffc107;
    opacity: 0.8;
}

/* 더보기 버튼 */
.load-more-cell {
    text-align: center;
    padding: 16px !important;
    background: #f6f8fa;
}

.btn-load-more {
    background: #0366d6;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-load-more:hover {
    background: #0256b9;
}

.btn-load-more:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 메모 배지 */
.memo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4caf50;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1;
}

.memo-badge:hover {
    background: #43a047;
}

/* 미답변 배지 */
.unanswered-badge {
    display: inline-block;
    background: #e74c3c;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
/* 상품 카드 미답변 뱃지 플랫폼 분리 (N=네이버 초록, C=쿠팡 빨강) */
.unanswered-badge.badge-naver { background: #16a34a; }
.unanswered-badge.badge-coupang { background: #dc2626; }

/* 스크롤 가능한 컨텐츠 */
.scrollable-content {
    flex: 1;
    overflow: auto;
    padding: 0 16px 16px 16px;
    position: relative;
    z-index: 1;
}

.placeholder-text {
    text-align: center;
    color: #959da5;
    font-size: 14px;
    padding: 40px;
}

/* 스펙 정보 스타일 */
.spec-section {
    margin-bottom: 20px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.spec-section-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
}

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

.spec-table tr {
    border-bottom: 1px solid #e9ecef;
}

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

.spec-table td {
    padding: 10px 15px;
    font-size: 13px;
}

.spec-label {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    width: 140px;
    white-space: nowrap;
}

.spec-value {
    color: #212529;
}

.spec-value.price {
    color: #e74c3c;
    font-weight: 700;
    font-size: 15px;
}

.spec-options {
    padding: 12px 15px;
    color: #495057;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.spec-image {
    padding: 15px;
    text-align: center;
    background: #f8f9fa;
}

.spec-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.spec-gallery-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.spec-gallery-img:hover {
    border-color: #0366d6;
    transform: scale(1.05);
}

.spec-gallery-img.main {
    border-color: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.spec-image-more {
    padding: 8px;
    color: #666;
    font-size: 12px;
    text-align: center;
}

.spec-link {
    padding: 15px;
    text-align: center;
}

.btn-product-link {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0366d6 0%, #0056b3 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-product-link:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(3,102,214,0.3);
}

.spec-detail-text {
    padding: 15px;
    color: #333;
    font-size: 13px;
    line-height: 1.8;
    background: #fafbfc;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    word-break: keep-all;
}

.spec-detail-text::-webkit-scrollbar {
    width: 6px;
}

.spec-detail-text::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.spec-detail-text::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.spec-image-analysis {
    padding: 15px;
}

.image-desc-item {
    padding: 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    border-left: 4px solid #667eea;
}

.image-desc-item:last-child {
    margin-bottom: 0;
}

.image-desc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 10px;
}

.spec-ocr-text {
    padding: 15px;
    background: #f8f9fa;
    font-size: 13px;
    line-height: 1.8;
    color: #333;
    border-left: 4px solid #28a745;
}

.spec-key-info {
    padding: 15px;
}

.key-info-item {
    padding: 10px 15px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-radius: 6px;
    font-size: 13px;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.key-info-item:last-child {
    margin-bottom: 0;
}

/* 메모 스타일 (밝은 테마) */
.keep-memo-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 15px;
    overflow-y: auto;
}

/* 메모 입력 영역 */
.keep-memo-input {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.keep-input-title {
    width: 100%;
    background: transparent;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    margin-bottom: 8px;
}

.keep-input-title::placeholder {
    color: #999;
}

.keep-input-title:focus {
    outline: none;
}

.keep-input-content {
    width: 100%;
    background: transparent;
    border: none;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 0;
    min-height: 60px;
    resize: none;
}

.keep-input-content::placeholder {
    color: #999;
}

.keep-input-content:focus {
    outline: none;
}

.keep-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
}

/* 라벨 선택기 */
.keep-label-selector {
    position: relative;
}

.keep-btn-label {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.keep-btn-label:hover {
    background: #f5f5f5;
    color: #333;
}

.keep-label-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 0;
    min-width: 180px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
}

.keep-label-dropdown.hidden {
    display: none;
}

.keep-label-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    color: #333;
    font-size: 13px;
}

.keep-label-item:hover {
    background: #f5f5f5;
}

.keep-label-item input[type="checkbox"] {
    accent-color: #4285f4;
}

.keep-label-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
}

.keep-label-add input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    padding: 4px 0;
}

.keep-label-add input:focus {
    outline: none;
    border-bottom-color: #4285f4;
}

.keep-label-add button {
    background: #4285f4;
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 저장 버튼 */
.keep-btn-save {
    background: #4285f4;
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.keep-btn-save:hover {
    background: #3367d6;
}

/* 메모 섹션 */
.keep-memo-section {
    margin-bottom: 20px;
}

.keep-section-title {
    color: #666;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.keep-memo-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 메모 카드 */
.keep-note-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s;
}

.keep-note-card:hover {
    border-color: #4285f4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.keep-note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.keep-note-title {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.keep-btn-pin {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.keep-btn-pin:hover {
    opacity: 1;
}

.keep-btn-pin.pinned {
    color: #f4b400;
    opacity: 1;
}

.keep-note-content {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    word-break: break-word;
}

/* 라벨 태그 */
.keep-note-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.keep-label-tag {
    background: #e8f0fe;
    color: #1a73e8;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
}

.keep-note-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.keep-note-date {
    color: #999;
    font-size: 11px;
}

.keep-note-actions {
    display: flex;
    gap: 8px;
}

.keep-note-actions button {
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
}

.keep-note-actions button:hover {
    background: #f5f5f5;
    color: #333;
}

/* 빈 상태 */
.keep-empty {
    color: #999;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

/* 수정 모드 */
.keep-edit-title {
    width: 100%;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ddd;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    margin-bottom: 8px;
}

.keep-edit-title:focus {
    outline: none;
    border-bottom-color: #4285f4;
}

.keep-edit-content {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px;
    min-height: 80px;
    resize: vertical;
    margin-bottom: 10px;
}

.keep-edit-content:focus {
    outline: none;
    border-color: #4285f4;
}

.keep-edit-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.keep-label-item-small {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #555;
    font-size: 12px;
    cursor: pointer;
}

.keep-label-item-small input[type="checkbox"] {
    accent-color: #4285f4;
}

.keep-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.keep-btn-save-edit,
.keep-btn-cancel-edit {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.keep-btn-save-edit {
    background: #4285f4;
    color: #fff;
}

.keep-btn-save-edit:hover {
    background: #3367d6;
}

.keep-btn-cancel-edit {
    background: #f5f5f5;
    color: #333;
}

.keep-btn-cancel-edit:hover {
    background: #e0e0e0;
}

/* 전체 메모 페이지 */
.all-memos-container {
    display: flex;
    height: 100%;
    background: #f5f5f5;
}

.memo-sidebar {
    width: 250px;
    background: #fff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    color: #555;
    transition: all 0.2s;
}

.sidebar-item:hover {
    background: #f5f5f5;
}

.sidebar-item.active {
    background: #e8f0fe;
    color: #1a73e8;
}

.sidebar-icon {
    font-size: 16px;
}

.sidebar-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 10px 0;
}

.sidebar-label-header {
    padding: 8px 20px;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-label-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    color: #555;
    font-size: 13px;
}

.sidebar-label-item:hover {
    background: #f5f5f5;
}

.sidebar-label-item.active {
    background: #e8f0fe;
    color: #1a73e8;
}

.label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4285f4;
}

.memo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.memo-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.memo-main-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.memo-search input {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    width: 250px;
}

.memo-search input:focus {
    outline: none;
    border-color: #4285f4;
}

.all-memos-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    align-content: start;
}

/* 전체 메모 페이지의 메모 카드 */
.all-memo-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.all-memo-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #4285f4;
}

.all-memo-card.pinned {
    border-left: 3px solid #f4b400;
}

.memo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.memo-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    flex: 1;
}

.memo-card-pin {
    color: #f4b400;
    font-size: 12px;
}

.memo-card-content {
    color: #555;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memo-card-product {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
}

.memo-card-product img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
}

.memo-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.memo-card-label {
    background: #e8f0fe;
    color: #1a73e8;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
}

.memo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.memo-card-date {
    color: #999;
    font-size: 11px;
}

.memo-card-actions {
    display: flex;
    gap: 5px;
}

.memo-card-actions button {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    font-size: 12px;
}

.memo-card-actions button:hover {
    color: #333;
}

/* 빈 메모 상태 */
.all-memos-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.all-memos-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

/* FAQ 리스트 */
.faq-list-box {
    flex: 1;
    min-height: 151px;
    max-height: 151px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: auto;
    background: #fffef0;
}

.faq-list-box ul {
    list-style: none;
}

.faq-list-box li {
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid #e1e4e8;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-list-box li:hover {
    background: #fff9e6;
}

.faq-list-box li.selected {
    background: #ffe0b2;
}

.faq-list-box li.loading,
.faq-list-box li.no-data {
    color: #888;
    font-style: italic;
    cursor: default;
}

.faq-list-box li.loading:hover,
.faq-list-box li.no-data:hover {
    background: transparent;
}

/* QnA 테이블 게시글 없음 */
.no-data-row {
    background: #f8f9fa;
}

.no-data-message {
    text-align: center !important;
    color: #6c757d;
    font-style: normal;
    padding: 40px 0 !important;
    font-size: 14px;
}

.section-label {
    font-size: 12px;
    font-weight: 600;
    color: #24292e;
    margin: 3px 0;
}

/* 답변 탭 레이아웃 (질문 30% + 답변 70%) */
#answer-tab.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

/* FAQ 등록 박스 */
/* 답변 영역 섹션 컨텐츠 */
.answer-section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.faq-register-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background: #f8f9fa;
    overflow: hidden;
}

.faq-register-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #e9ecef;
    color: #495057;
    font-size: 12px;
    font-weight: 600;
}

.faq-edit-badge {
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
}

.faq-register-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
    overflow: auto;
}

.faq-form-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0; /* 행이 줄어들지 않도록 방지 */
}

.faq-form-row label {
    flex: 0 0 35px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    padding-top: 4px;
}

.faq-form-row input[type="text"] {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.faq-form-row textarea {
    flex: 1;
    min-height: 100px; /* 최소 높이 축소 - 유연하게 조절 가능 */
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    line-height: 1.6;
}

/* textarea가 있는 행은 남은 공간을 모두 차지 (hidden input, 구분, 제목, 내용 순서 = 4번째) */
.faq-register-form .faq-form-row:nth-child(4) {
    flex: 1 1 auto; /* grow, shrink, auto basis - 유연하게 줄었다 커졌다 */
    min-height: 100px;
    flex-shrink: 1; /* 이 행은 줄어들 수 있음 */
}

.faq-register-form .faq-form-row:nth-child(4) textarea {
    height: 100%;
    min-height: 80px; /* 최소 높이 보장 */
}

.faq-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

/* FAQ 보기 모드 버튼 - 좌우 분리 */
.faq-form-buttons.faq-view-buttons {
    justify-content: space-between;
}

.faq-buttons-left,
.faq-buttons-right {
    display: flex;
    gap: 6px;
}

.btn-faq-action {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-faq-action.btn-register {
    background: #27ae60;
    color: white;
}

.btn-faq-action.btn-register:hover {
    background: #219a52;
}

.btn-faq-action.btn-update {
    background: #3498db;
    color: white;
}

.btn-faq-action.btn-update:hover {
    background: #2980b9;
}

.btn-faq-action.btn-delete {
    background: #e74c3c;
    color: white;
}

.btn-faq-action.btn-delete:hover {
    background: #c0392b;
}

.btn-faq-action.btn-cancel {
    background: #95a5a6;
    color: white;
}

.btn-faq-action.btn-cancel:hover {
    background: #7f8c8d;
}

/* FAQ 보기 모드 */
.faq-view-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
    overflow: auto;
}

.faq-view-title {
    font-size: 13px;
    font-weight: 600;
    color: #0066cc;
    padding: 8px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
}

.faq-view-title::before {
    content: "Q. ";
}

.faq-view-content {
    flex: 1;
    font-size: 12px;
    color: #333;
    padding: 8px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow: auto;
}

.faq-view-content::before {
    content: "A. ";
    font-weight: 600;
    color: #27ae60;
}

/* FAQ 구분 보기 */
.faq-view-category {
    font-size: 13px;
    color: #444;
    font-weight: 500;
    padding: 5px 10px;
    background: #e8f4fd;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.faq-view-category:empty {
    display: none;
}

/* FAQ 구분 입력 필드 */
.faq-category-input {
    flex: 1;
    display: flex;
    gap: 4px;
}

.faq-category-input input {
    flex: 1;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    background: #fafafa;
    cursor: pointer;
}

.faq-category-input .btn-search,
.faq-category-input .btn-clear {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}

.faq-category-input .btn-search:hover {
    background: #e9ecef;
}

.faq-category-input .btn-clear:hover {
    background: #ffebee;
}

/* FAQ 구분 모달 테이블 */
.category-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.category-table th,
.category-table td {
    padding: 8px;
    border: 1px solid #e1e4e8;
    text-align: left;
}

.category-table th {
    background: #f6f8fa;
    font-weight: 600;
}

.category-table tbody tr {
    cursor: pointer;
}

.category-table tbody tr:hover {
    background: #f0f7ff;
}

.category-table .btn-edit,
.category-table .btn-delete {
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    margin-right: 4px;
}

.category-table .btn-edit {
    background: #3498db;
    color: white;
}

.category-table .btn-delete {
    background: #e74c3c;
    color: white;
}

/* 구분 입력 폼 */
.category-form {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-top: 10px;
}

.category-form input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

.category-form button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.btn-category-save {
    background: #27ae60;
    color: white;
}

.btn-category-cancel {
    background: #95a5a6;
    color: white;
}

/* 상품특징 스타일 */
.feature-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 10px;
}

.feature-input-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e1e4e8;
}

.feature-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 100px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.feature-textarea:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.feature-input-actions {
    display: flex;
    justify-content: flex-end;
}

.btn-feature-action {
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-feature-action.btn-save {
    background: #0066cc;
    color: white;
}

.btn-feature-action.btn-save:hover {
    background: #0052a3;
}

.btn-feature-action.btn-delete {
    background: #dc3545;
    color: white;
}

.btn-feature-action.btn-delete:hover {
    background: #c82333;
}

/* 특징 목록 */
.feature-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feature-item {
    padding: 10px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    position: relative;
}

.feature-item:hover {
    border-color: #0066cc;
}

.feature-item-content {
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
}

.feature-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}

.feature-item-date {
    font-size: 10px;
    color: #999;
}

.feature-item-actions {
    display: flex;
    gap: 4px;
}

.feature-item-actions button {
    padding: 2px 8px;
    font-size: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.feature-item-actions .btn-edit {
    background: #e8f4fc;
    color: #0066cc;
}

.feature-item-actions .btn-delete {
    background: #fce8e8;
    color: #dc3545;
}

/* 편집 모드 */
.feature-item.editing .feature-item-content {
    display: none;
}

.feature-item .feature-edit-textarea {
    display: none;
    width: 100%;
    min-height: 60px;
    padding: 6px;
    border: 1px solid #0066cc;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.feature-item.editing .feature-edit-textarea {
    display: block;
}

.feature-item.editing .btn-edit {
    display: none;
}

.feature-item.editing .btn-save-edit,
.feature-item.editing .btn-cancel-edit {
    display: inline-block !important;
}

.feature-item .btn-save-edit,
.feature-item .btn-cancel-edit {
    display: none;
}

.feature-item-actions .btn-save-edit {
    background: #0066cc;
    color: white;
}

.feature-item-actions .btn-cancel-edit {
    background: #f0f0f0;
    color: #666;
}

#product-feature-content .placeholder-text {
    display: block;
    text-align: center;
    color: #999;
    padding: 50px;
}

#product-feature-content .feature-container {
    display: none;
}

#product-feature-content.has-product .placeholder-text {
    display: none;
}

#product-feature-content.has-product .feature-container {
    display: flex;
}

.faq-answer-box, .qna-answer-box {
    flex: 1;
    min-height: 80px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 0;
    overflow: auto;
    background: #f9f9f9;
    font-size: 13px;
    line-height: 1.5;
}

#faq-answer, #qna-answer {
    padding: 8px 10px;
}

#faq-answer .question-text,
#qna-answer .question-text {
    color: #0066cc !important;
    font-weight: 600 !important;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #e8f4fc;
    border-radius: 4px;
    border-left: 3px solid #0066cc;
    display: block;
}

#faq-answer .answer-text,
#qna-answer .answer-text {
    color: #333;
    white-space: pre-wrap;
    display: block;
    padding: 5px 0;
}

.qna-table-container {
    flex: 1;
    min-height: 280px;
    max-height: 280px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: auto;
}

.qna-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

/* QnA 테이블 컬럼 너비 고정 */
.qna-table th:nth-child(1),
.qna-table td:nth-child(1) {
    width: 90px;
    min-width: 90px;
}

.qna-table th:nth-child(2),
.qna-table td:nth-child(2) {
    width: 75px;
    min-width: 75px;
}

.qna-table th:nth-child(3),
.qna-table td:nth-child(3) {
    width: auto;
}

.qna-table th:nth-child(4),
.qna-table td:nth-child(4) {
    width: 75px;
    min-width: 75px;
    text-align: center;
}

.qna-table thead {
    position: sticky;
    top: 0;
    background: #f6f8fa;
    z-index: 5;
}

.qna-table th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    color: #24292e;
    border-bottom: 2px solid #e1e4e8;
}

.qna-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #e1e4e8;
}

.qna-table tbody tr:hover {
    background: #f6f8fa;
}

.qna-table tbody tr.selected {
    background: #e3f2fd;
}

.qna-table tbody tr.unanswered {
    color: #ff6600;
}

.qna-table td {
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

/* FAQ 테이블 왼쪽 정렬 */
.faq-table th,
.faq-table td {
    text-align: left !important;
}

.faq-table td.no-data-message {
    text-align: center !important;
}

/* AI 답변 버튼 */
.btn-ai-answer {
    padding: 3px 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ai-answer:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.qna-paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.qna-paging button {
    padding: 3px 10px;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.qna-paging button:hover {
    background: #f6f8fa;
}

.qna-paging span {
    font-size: 13px;
    color: #586069;
}

/* AI 상담 영역 */
.qa-input-section {
    padding: 12px;
    border-bottom: 1px solid #e1e4e8;
}

.qa-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.qa-label > label {
    font-size: 13px;
    font-weight: 600;
    color: #24292e;
}

.qa-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.provider-selector {
    display: flex;
    gap: 12px;
    font-size: 13px;
}

.provider-selector label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

#ask-btn {
    padding: 8px 16px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#ask-btn:hover {
    background: #239a3b;
}

#question-input {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

#question-input:focus {
    outline: none;
    border-color: #0366d6;
    box-shadow: 0 0 0 3px rgba(3,102,214,0.1);
}

.answer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid #e1e4e8;
    min-height: 0;
    max-height: 50%;
}

.answer-header {
    font-size: 13px;
    font-weight: 600;
    color: #24292e;
    margin-bottom: 8px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 참고상품 버튼 및 레이어 */
.source-btn-wrapper {
    position: relative;
}

.source-btn {
    padding: 2px 8px;
    font-size: 11px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.source-btn:hover {
    background: #e0e0e0;
}

.source-layer {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 250px;
    font-size: 12px;
    line-height: 1.5;
}

.source-layer.show {
    display: block;
}

.source-layer .source-title {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.source-layer .source-info {
    color: #666;
}

.answer-box {
    flex: 1;
    min-height: 100px;
    max-height: 270px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.answer-spec {
    background: #f0f8ff;
}

.answer-qna {
    background: #fff8f0;
}

/* AI 답변 스타일 */
.answer-box .loading {
    color: #2196F3;
    font-style: italic;
}

/* 로딩 컨테이너 (정중앙 배치) */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    text-align: center;
}

.loading-provider {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.loading-spinner {
    font-size: 14px;
    color: #2196F3;
    font-weight: 500;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.answer-box .error {
    color: #d32f2f;
}

.answer-box .ai-sources {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    font-size: 12px;
}

.answer-box .ai-sources ul {
    margin: 5px 0 0 20px;
    padding: 0;
}

.answer-box .ai-sources li {
    margin: 3px 0;
    color: #555;
}

/* ======================================
   Q&A 평가 페이지 스타일
   ====================================== */
.qna-eval-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px 20px;
    gap: 15px;
    position: relative;
}

/* QnA 평가 페이지 로딩 오버레이 */
.qna-eval-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 8px;
}

.qna-eval-filter {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 13px;
    font-weight: 600;
    color: #24292e;
}

.filter-item input[type="date"] {
    padding: 6px 10px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    font-size: 13px;
}

.filter-item select {
    padding: 6px 10px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    font-size: 13px;
    min-width: 100px;
}

.filter-btn {
    padding: 6px 12px;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: #f6f8fa;
}

.filter-btn.active {
    background: #0366d6;
    color: white;
    border-color: #0366d6;
}

/* 총 건수 배지 */
.total-count-badge {
    display: inline-block;
    padding: 6px 12px;
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #24292e;
}

.total-count-badge span {
    color: #0366d6;
    font-size: 14px;
}

/* 검색/엑셀 버튼 - 날짜 버튼과 같은 크기 */
.filter-btn.btn-search {
    background: #0366d6;
    color: white;
    border-color: #0366d6;
}

.filter-btn.btn-search:hover {
    background: #0256b9;
}

.filter-btn.btn-excel {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.filter-btn.btn-excel:hover {
    background: #22863a;
}

/* Q&A 키워드 검색 입력 */
.qna-keyword-input {
    width: 200px;
    padding: 6px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.qna-keyword-input:focus {
    border-color: #0366d6;
    box-shadow: 0 0 0 2px rgba(3, 102, 214, 0.1);
}

.qna-keyword-input::placeholder {
    color: #999;
}

/* Q&A 평가 테이블 */
.qna-eval-table-container {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: auto;
}

.qna-eval-table {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
    font-size: 12px;
}

.qna-eval-table thead {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 10;
}

.qna-eval-table th {
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    color: white;
    border-right: 1px solid rgba(255,255,255,0.2);
    line-height: 1.4;
}

.qna-eval-table .qna-eval-th-sub {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
}

.qna-eval-table th:last-child {
    border-right: none;
}

.qna-eval-table tbody tr {
    border-bottom: 1px solid #e1e4e8;
    transition: background 0.15s;
}

.qna-eval-table tbody tr:hover {
    background: #f6f8fa;
}

.qna-eval-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.qna-eval-table tbody tr:nth-child(even):hover {
    background: #f0f2f5;
}

.qna-eval-table td {
    padding: 10px 8px;
    vertical-align: top;
    border-right: 1px solid #e1e4e8;
}

.qna-eval-table td:last-child {
    border-right: none;
}

.qna-eval-table td.center {
    text-align: center;
}

/* 셀 내용 스타일 */
.qna-eval-table .cell-date {
    font-size: 11px;
    color: #586069;
    text-align: center;
}

/* Q&A 평가: 처리자(입력일 하단) + 이미지 컬럼 */
.qna-eval-table .qna-eval-handler {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.2;
    color: #6b7280;
    font-weight: 400;
}

.qna-eval-table .cell-thumb {
    text-align: center;
}

.qna-eval-table .qna-eval-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: #f1f3f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.qna-eval-table .cell-code {
    font-size: 11px;
    color: #24292e;
    word-break: break-all;
    text-align: center;
}

/* qna-eval: 2줄 데이터(예: 품목코드/모델명, 마켓/상품코드) 간격 */
.qna-eval-table .cell-code .cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.qna-eval-table .cell-code .cell-line-main {
    line-height: 1.2;
}

.qna-eval-table .cell-code .cell-line-sub {
    line-height: 1.2;
    color: #6b7280;
}

/* qna-eval: 상품코드 링크 밑줄 제거 */
.qna-eval-table .clickable-product-no {
    text-decoration: none;
}

.qna-eval-table .clickable-product-no:hover {
    text-decoration: none;
}

.qna-eval-table .cell-type {
    text-align: center;
}

.qna-eval-table .cell-type .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.qna-eval-table .badge-qna {
    background: #e3f2fd;
    color: #1565c0;
}

.qna-eval-table .cell-category {
    text-align: center;
    font-size: 12px;
}

/* 문의내용/답변 셀 */
.qna-eval-table .cell-content {
    max-width: 250px;
    font-size: 12px;
    line-height: 1.5;
}

.qna-eval-table .qna-eval-scroll-body {
    max-height: 140px;
    overflow-y: auto;
    padding-right: 6px; /* 스크롤바 공간 */
}

.qna-eval-table .content-date {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 5px;
    /* 등록일 + "수정됨" 배지를 한 줄에 배치 (공간 부족 시 배지만 다음 줄로) */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
}

.qna-eval-table .content-date .content-date-text {
    white-space: nowrap;
}

.qna-eval-table .content-text {
    color: #24292e;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== 문의 원문 "수정됨" 배지 =====
 * 고객이 문의 등록 후 원문을 수정한 건을 표시한다.
 * - .qna-edited-badge          : 수정됨 (차분한 회색-파랑)
 * - .qna-edited-badge-warn     : 답변 후 수정됨 (경고 빨강 — 기존 답변이 새 문의와 어긋날 수 있음)
 * 두 배지는 동시에 노출되지 않는다 (app.js buildQnaEditedBadge).
 * 컬러 이모지는 CSS color가 적용되지 않으므로 텍스트만 사용한다.
 */
.qna-eval-table .qna-edited-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #eceff1;
    color: #455a64;
    border: 1px solid #cfd8dc;
    cursor: help;
}

.qna-eval-table .qna-edited-badge .qna-edited-time {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    opacity: 0.8;
}

/* 답변 후 수정 = 위험 건 → 강조 */
.qna-eval-table .qna-edited-badge-warn {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

.qna-eval-table .qna-edited-badge-warn .qna-edited-time {
    opacity: 0.9;
}

/* 답변 셀 */
.qna-eval-table .cell-answer {
    max-width: 280px;
}

.qna-eval-table .answer-date {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 5px;
}

.qna-eval-table .answer-text {
    color: #24292e;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

/* QnA 가이드 셀 */
.qna-eval-table .cell-guide {
    max-width: 200px;
    background: #fffef0;
}

.qna-eval-table .guide-date {
    color: #586069;
    font-size: 11px;
    margin-bottom: 5px;
}

.qna-eval-table .guide-text {
    color: #24292e;
    font-size: 12px;
    white-space: pre-wrap;
}

/* 평가 셀 - 별점 */
.qna-eval-table .cell-eval {
    text-align: center;
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.star-rating .star {
    font-size: 18px;
    cursor: pointer;
    color: #e1e4e8;
    transition: color 0.15s;
}

.star-rating .star:hover,
.star-rating .star.hovered {
    color: #ffc107;
}

.star-rating .star.active {
    color: #ffc107;
}

.star-rating .star:hover ~ .star {
    color: #e1e4e8;
}

/* AI 가이드 생성 버튼 */
.btn-generate-guide {
    padding: 4px 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    margin-top: 5px;
}

.btn-generate-guide:hover {
    transform: scale(1.02);
}

/* Q&A 평가 페이징 */
.qna-eval-paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.qna-eval-paging button {
    padding: 8px 16px;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.qna-eval-paging button:hover {
    background: #f6f8fa;
}

.qna-eval-paging button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qna-eval-paging span {
    font-size: 14px;
    font-weight: 600;
    color: #24292e;
    padding: 0 15px;
}

/* ======================================
   학습 페이지 스타일
   ====================================== */
.learn-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px 20px;
    height: 100%;
}

.learn-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.learn-left-top, .learn-left-bottom {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.learn-left-top {
    flex: 1;
    min-height: 200px;
}

.learn-left-bottom {
    flex: 1;
    min-height: 250px;
}

.learn-right {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 마켓 테이블 */
.market-table-container {
    flex: 1;
    overflow: auto;
}

.market-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.market-table thead {
    position: sticky;
    top: 0;
    background: #f6f8fa;
    z-index: 10;
}

.market-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #24292e;
    border-bottom: 2px solid #e1e4e8;
}

.market-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #e1e4e8;
}

.market-table tbody tr:hover {
    background: #f6f8fa;
}

.market-table tbody tr.selected {
    background: #e3f2fd;
}

.market-table td {
    padding: 10px 8px;
}

.market-buttons {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e1e4e8;
    flex-wrap: wrap;
}

.market-buttons button {
    padding: 8px 14px;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.market-buttons button:hover {
    background: #f6f8fa;
}

/* 데이터 업로드 영역 */
.data-upload-section {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.upload-help {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.upload-type-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-type-select label {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.upload-type-select textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    font-size: 13px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.upload-type-select textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.upload-type-select select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    font-size: 13px;
}

.upload-area {
    flex: 1;
    min-height: 100px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
}

.upload-area:hover {
    border-color: #0366d6;
    background: #f0f7ff;
}

.upload-area.dragover {
    border-color: #28a745;
    background: #f0fff4;
}

.upload-icon {
    font-size: 32px;
}

.upload-text {
    font-size: 13px;
    color: #586069;
}

.upload-formats {
    font-size: 11px;
    color: #999;
}

.upload-formats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}

.format-badge {
    font-size: 11px;
    padding: 3px 8px;
    background: #e9ecef;
    border-radius: 12px;
    color: #495057;
}

.upload-status {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px;
}

.upload-filename {
    font-size: 13px;
    font-weight: 600;
    color: #24292e;
    margin-bottom: 8px;
}

.upload-progress {
    height: 6px;
    background: #e1e4e8;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.upload-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #34d058);
    width: 0%;
    transition: width 0.3s;
}

.upload-message {
    font-size: 12px;
    color: #586069;
}

.upload-message.success {
    color: #28a745;
}

.upload-message.error {
    color: #dc3545;
}

.upload-buttons {
    display: flex;
    gap: 10px;
}

.upload-buttons button {
    flex: 1;
}

/* 수집 옵션 */
.collect-options {
    padding: 15px;
    border-bottom: 1px solid #e1e4e8;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.option-row > label:first-child {
    font-weight: 600;
    min-width: 120px;
    font-size: 13px;
}

.radio-group {
    display: flex;
    gap: 15px;
}

.radio-group label {
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.qna-mode-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 12px;
}

.qna-mode-inline.hidden {
    display: none;
}

.qna-mode-row {
    margin-left: 24px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #3498db;
}

.qna-mode-row.hidden {
    display: none;
}

.api-auth-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e1e4e8;
}

.api-auth-section input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    font-size: 13px;
}

.api-auth-section input:focus {
    outline: none;
    border-color: #0366d6;
}

/* 진행률 */
.progress-section {
    padding: 15px;
    border-bottom: 1px solid #e1e4e8;
}

.progress-label {
    font-size: 13px;
    margin-bottom: 8px;
    color: #586069;
}

.progress-bar {
    height: 20px;
    background: #e1e4e8;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #34d058);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* 수집 버튼 */
.collect-buttons {
    display: flex;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #e1e4e8;
}

.btn-primary {
    padding: 12px 24px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #239a3b;
}

.btn-primary:disabled {
    background: #94d3a2;
    cursor: not-allowed;
}

.btn-danger {
    padding: 12px 24px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-danger:disabled {
    background: #e4979f;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 12px 24px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-secondary:hover {
    background: #5a6268;
}

/* 로그 영역 */
.log-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow: hidden;
}

.log-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #24292e;
}

.log-box {
    flex: 1;
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: "Consolas", monospace;
    font-size: 12px;
    padding: 12px;
    border-radius: 6px;
    overflow: auto;
    white-space: pre-wrap;
    line-height: 1.5;
}

/* ======================================
   설정 페이지 스타일
   ====================================== */
.settings-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    height: 100%;
    overflow: auto;
}

.settings-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
}

.settings-body {
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 설정 탭 메뉴 */
.settings-tabs {
    display: flex;
    border-bottom: 2px solid #e1e4e8;
    background: #f6f8fa;
    padding: 0 20px;
}

.settings-tab-btn {
    padding: 14px 24px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #586069;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.settings-tab-btn:hover {
    background: #e1e4e8;
    color: #24292e;
}

.settings-tab-btn.active {
    color: #0366d6;
    border-bottom-color: #0366d6;
    background: white;
}

/* 설정 탭 콘텐츠 */
.settings-tab-content {
    display: none;
    padding: 25px;
    flex: 1;
    overflow: auto;
}

.settings-tab-content.active {
    display: block;
}

.settings-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e1e4e8;
}

.settings-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #24292e;
}

.settings-help {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.settings-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.settings-row > label:first-child {
    font-weight: 600;
    min-width: 150px;
    font-size: 13px;
    padding-top: 8px;
}

.settings-row input[type="password"],
.settings-row input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    font-size: 13px;
}

.settings-row input:focus {
    outline: none;
    border-color: #0366d6;
}

.settings-row textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e1e4e8;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 150px;
}

.settings-row textarea:focus {
    outline: none;
    border-color: #0366d6;
}

.btn-small {
    padding: 8px 12px;
    border: 1px solid #e1e4e8;
    background: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.btn-small:hover {
    background: #f6f8fa;
}

.settings-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 10px;
}

/* 시스템 정보 박스 */
.system-info-box {
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 15px;
}

.system-info-box .info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e1e4e8;
}

.system-info-box .info-row:last-child {
    border-bottom: none;
}

.system-info-box .info-label {
    font-weight: 600;
    color: #586069;
}

.system-info-box .info-value {
    color: #24292e;
}

.system-info-box .info-value.status-ok {
    color: #28a745;
    font-weight: 600;
}

.system-info-box .info-value.status-error {
    color: #dc3545;
    font-weight: 600;
}

/* 프롬프트 그리드 (좌우 분할) */
.prompt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.prompt-column {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    overflow: hidden;
}

.prompt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.prompt-icon {
    font-size: 18px;
}

.prompt-title {
    font-weight: 600;
    font-size: 14px;
}

.prompt-textarea {
    flex: 1;
    min-height: 450px;
    padding: 15px;
    border: none;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    background: white;
}

.prompt-textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #0366d6;
}

.prompt-textarea::placeholder {
    color: #999;
}

/* 설정 패널 확장 (프롬프트 탭용) */
#settings-tab-prompts .settings-section {
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: none;
}

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

    .prompt-textarea {
        min-height: 200px;
    }
}

/* ======================================
   반응형
   ====================================== */
@media (max-width: 1600px) {
    .main-container {
        grid-template-columns: 1fr 1.1fr 0.9fr; /* 같은 비율 유지 */
    }
}

@media (max-width: 1200px) {
    .main-container {
        grid-template-columns: 1fr 1fr;
    }

    .right-panel {
        display: none;
    }

    .learn-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .top-header {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .search-container {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }

    .main-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .page-container {
        height: auto;
        min-height: calc(100vh - 120px);
        overflow: visible;
    }

    .main-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        padding: 10px;
        gap: 10px;
    }

    .left-panel, .center-panel, .right-panel {
        height: auto;
        min-height: 400px;
        max-height: none;
        display: block;
    }

    .panel-body {
        overflow: visible;
    }

    .product-table-container {
        max-height: 350px;
        overflow: auto;
    }

    .scrollable-content {
        max-height: 400px;
        overflow: auto;
    }

    /* 학습 페이지 */
    .learn-container {
        grid-template-columns: 1fr;
        height: auto;
        padding: 10px;
    }

    .learn-left, .learn-right {
        height: auto;
        min-height: 300px;
    }

    /* 설정 페이지 */
    .settings-container {
        padding: 10px;
        height: auto;
    }

    .settings-row {
        flex-direction: column;
    }

    .settings-row > label:first-child {
        min-width: auto;
    }

    /* 전체 메모 페이지 */
    .all-memos-container {
        flex-direction: column;
    }

    .memo-sidebar {
        width: 100%;
        max-height: 150px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-direction: row;
        flex-wrap: nowrap;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .sidebar-header {
        display: none;
    }

    .sidebar-menu {
        display: flex;
        flex-direction: row;
        padding: 8px;
        gap: 8px;
        overflow-x: auto;
    }

    .sidebar-item {
        padding: 8px 12px;
        white-space: nowrap;
        border-radius: 20px;
        background: #f5f5f5;
    }

    .sidebar-item.active {
        background: #e3f2fd;
    }

    .sidebar-divider {
        display: none;
    }

    .sidebar-label-header {
        display: none;
    }

    .sidebar-label-item {
        padding: 6px 12px;
        white-space: nowrap;
        border-radius: 16px;
        background: #f0f0f0;
    }

    .memo-main {
        flex: 1;
    }

    .all-memos-content {
        grid-template-columns: 1fr;
        padding: 10px;
    }
}

/* 스크롤바 스타일 (Webkit) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ===== 전체 메모 페이지 추가 스타일 ===== */

/* 라벨 드롭다운 */
.label-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 160px;
    z-index: 100;
}

.label-dropdown.hidden {
    display: none;
}

.label-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.label-dropdown-item:hover {
    background: #f5f5f5;
}

.label-dropdown-item input[type="checkbox"] {
    cursor: pointer;
}

/* 선택된 라벨 태그 */
.selected-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 8px;
}

.selected-label-tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

/* 라벨 관리 모달 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

/* 마켓 모달 */
.market-modal-content {
    width: 500px;
    max-width: 95%;
}

.market-modal-content .form-group {
    margin-bottom: 16px;
}

.market-modal-content .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.market-modal-content .form-group label .required {
    color: #e74c3c;
}

.market-modal-content .form-group input[type="text"],
.market-modal-content .form-group input[type="password"],
.market-modal-content .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.market-modal-content .form-group input:focus,
.market-modal-content .form-group select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.market-modal-content .form-row {
    display: flex;
    gap: 12px;
}

.market-modal-content .form-group.half {
    flex: 1;
}

.market-modal-content .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.market-modal-content .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.market-modal-content .api-config-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.market-modal-content .api-config-section .section-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
}

.label-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.label-add-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.label-add-row button {
    padding: 8px 16px;
    background: #1976d2;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.label-add-row button:hover {
    background: #1565c0;
}

.label-manage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.label-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.label-manage-item:last-child {
    border-bottom: none;
}

.label-name {
    font-size: 14px;
}

.btn-delete-label {
    background: #ff5252;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-delete-label:hover {
    background: #ff1744;
}

/* 메모 입력 영역 개선 */
.memo-input-area {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.memo-input-box {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.memo-input-title {
    width: 100%;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    outline: none;
}

.memo-input-title::placeholder {
    color: #999;
}

.memo-input-content {
    width: 100%;
    border: none;
    font-size: 14px;
    padding: 8px 0;
    min-height: 60px;
    resize: none;
    outline: none;
}

.memo-input-content::placeholder {
    color: #999;
}

.memo-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
}

.memo-input-labels {
    display: flex;
    align-items: center;
    position: relative;
}

.btn-label-select {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}

.btn-label-select:hover {
    background: #eeeeee;
}

.btn-save-memo {
    background: #1976d2;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-save-memo:hover {
    background: #1565c0;
}

/* 사이드바 라벨 아이템 */
.sidebar-label-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background 0.2s;
}

.sidebar-label-item:hover {
    background: #f5f5f5;
}

.sidebar-label-item.active {
    background: #e3f2fd;
    color: #1976d2;
}

.label-dot {
    width: 8px;
    height: 8px;
    background: #9e9e9e;
    border-radius: 50%;
}

.sidebar-label-item.active .label-dot {
    background: #1976d2;
}

/* 전체 메모 카드 개선 */
.all-memo-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.all-memo-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.all-memo-card.pinned {
    border-left: 4px solid #ffc107;
    background: #fffde7;
}

.memo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.memo-card-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.memo-card-pin {
    font-size: 14px;
}

.memo-card-content {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memo-card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.memo-card-label {
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.memo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.memo-card-date {
    font-size: 12px;
    color: #999;
}

.memo-card-actions {
    display: flex;
    gap: 4px;
}

.memo-card-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.memo-card-actions button:hover {
    opacity: 1;
}

.memo-card-product {
    font-size: 12px;
    color: #1976d2;
    background: #e3f2fd;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}

/* 빈 메모 상태 */
.all-memos-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.all-memos-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.all-memos-empty-text {
    font-size: 16px;
}

/* ======================================
   QnA 자동 수집 스케줄러 UI
   ====================================== */

/* 스케줄러 카드 */
.scheduler-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.scheduler-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    color: white;
}

.scheduler-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scheduler-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.scheduler-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.scheduler-desc {
    margin: 4px 0 0 0;
    font-size: 13px;
    opacity: 0.9;
}

/* iOS 스타일 토글 스위치 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.3);
    transition: 0.3s;
    border-radius: 30px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(255,255,255,0.5);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
    background-color: #2ecc71;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
}

/* 스케줄러 바디 */
.scheduler-body {
    background: white;
    padding: 24px;
}

/* 상태 표시 */
.scheduler-status {
    margin-bottom: 20px;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
}

.status-indicator.off {
    background: #f5f5f5;
    color: #757575;
}

.status-indicator.on {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.status-indicator.collecting {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.status-indicator.on .status-dot {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 스케줄러 설정 */
.scheduler-settings {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.scheduler-setting-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scheduler-setting-row > label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    min-width: 80px;
}

/* 인터벌 셀렉터 */
.interval-selector {
    display: flex;
    gap: 8px;
}

.interval-btn {
    padding: 8px 16px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
}

.interval-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.interval-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: white;
}

/* 정보 그리드 */
.scheduler-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.scheduler-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.scheduler-info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.scheduler-info-item .info-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.scheduler-info-item .info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scheduler-info-item .info-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
}

.scheduler-info-item .info-value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

/* 액션 버튼 */
.scheduler-actions {
    display: flex;
    gap: 12px;
}

.btn-scheduler-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-scheduler-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-scheduler-action:active {
    transform: translateY(0);
}

.btn-scheduler-action:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-scheduler-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-scheduler-refresh:hover {
    background: #f5f7ff;
}

.btn-icon {
    font-size: 16px;
}

/* 반응형 */
@media (max-width: 768px) {
    .scheduler-info-grid {
        grid-template-columns: 1fr;
    }

    .scheduler-actions {
        flex-direction: column;
    }

    .scheduler-setting-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .interval-selector {
        flex-wrap: wrap;
    }
}

/* ======================================
   서버 모니터링 대시보드
   ====================================== */

.monitor-dashboard {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
}

.monitor-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff !important;
}

.btn-monitor-refresh {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-monitor-refresh:hover {
    background: rgba(255,255,255,0.3);
}

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px;
}

.monitor-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s;
}

.monitor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.monitor-card-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.monitor-card-content {
    flex: 1;
    min-width: 0;
}

.monitor-card-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin-bottom: 4px;
}

.monitor-card-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.monitor-card-sub {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* 상태 뱃지 */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge.healthy {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.status-badge.warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.status-badge.error {
    background: #e74c3c;
    color: white;
}

.status-badge.enabled {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.status-badge.disabled {
    background: #e0e0e0;
    color: #666;
}

/* 미니 프로그레스 바 */
.progress-bar-mini {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-fill-mini.warning {
    background: linear-gradient(90deg, #f5af19 0%, #f12711 100%);
}

/* 카드별 색상 변형 */
.monitor-card.server-card .monitor-card-icon {
    background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%);
}

.monitor-card.memory-card .monitor-card-icon {
    background: linear-gradient(135deg, #11998e22 0%, #38ef7d22 100%);
}

.monitor-card.disk-card .monitor-card-icon {
    background: linear-gradient(135deg, #f093fb22 0%, #f5576c22 100%);
}

.monitor-card.data-card .monitor-card-icon {
    background: linear-gradient(135deg, #3498db22 0%, #2980b922 100%);
}

.monitor-card.scheduler-card .monitor-card-icon {
    background: linear-gradient(135deg, #f5af1922 0%, #f1271122 100%);
}

/* 반응형 */
@media (max-width: 1200px) {
    .monitor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .monitor-card {
        padding: 16px;
    }

    .monitor-card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
}

/* ======================================
   수집 히스토리
   ====================================== */

.collection-history {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.history-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.btn-history-refresh {
    background: white;
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-history-refresh:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.history-list {
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.history-loading {
    text-align: center;
    padding: 40px;
    color: #999;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item:hover {
    background: #f8f9fa;
}

.history-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    font-size: 20px;
}

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

.history-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.history-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #888;
}

.history-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.history-badge.success {
    background: #d4edda;
    color: #155724;
}

.history-badge.warning {
    background: #fff3cd;
    color: #856404;
}

.history-badge.error {
    background: #f8d7da;
    color: #721c24;
}

.history-empty {
    text-align: center;
    padding: 40px;
    color: #999;
}

.history-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.history-empty-text {
    font-size: 14px;
}

/* ===== Storage Settings ===== */
.storage-settings-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.storage-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.storage-icon {
    font-size: 24px;
}

.storage-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.storage-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
}

.storage-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffc107;
    animation: pulse 2s infinite;
}

.storage-status.connected .status-dot {
    background: #4ade80;
    animation: none;
}

.storage-status.disconnected .status-dot {
    background: #ef4444;
    animation: none;
}

.storage-status.file-only .status-dot {
    background: #60a5fa;
    animation: none;
}

.storage-mode-selector {
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.storage-mode-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.storage-mode-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.storage-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.storage-mode-btn:hover {
    background: #f0f4ff;
    border-color: #667eea;
    transform: translateY(-2px);
}

.storage-mode-btn.active {
    background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.storage-mode-btn .mode-icon {
    font-size: 28px;
}

.storage-mode-btn .mode-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.storage-mode-btn .mode-desc {
    font-size: 11px;
    color: #888;
    text-align: center;
}

.storage-mode-btn.active .mode-name {
    color: #667eea;
}

.storage-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #f0f0f0;
}

.storage-info-item {
    padding: 20px;
    background: white;
    text-align: center;
}

.storage-info-item .info-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.storage-info-item .info-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    word-break: break-all;
}

.storage-info-item .info-value.mode-file {
    color: #3b82f6;
}

.storage-info-item .info-value.mode-db {
    color: #10b981;
}

.storage-info-item .info-value.mode-both {
    color: #8b5cf6;
}

.storage-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: #f8f9fa;
}

.btn-storage-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-storage-action:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-storage-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-storage-refresh {
    padding: 12px 20px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-storage-refresh:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

/* Storage toast notification */
.storage-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.storage-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.storage-toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.storage-toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* ===== Spec Editor Styles ===== */
.spec-editor {
    padding: 0;
}

/* 연결된 마켓 정보 */
.spec-linked-info {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e8f2 100%);
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #b8d4e3;
}

.linked-label {
    font-size: 11px;
    color: #2c5f7c;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.linked-markets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.linked-market-badge {
    background: #fff;
    color: #2c5f7c;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #b8d4e3;
    white-space: nowrap;
}

/* 마켓코드 입력 필드 힌트 */
.form-hint {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.spec-action-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

.btn-spec-action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-spec-action:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* 엑셀 다운로드/업로드 버튼 */
.btn-spec-excel {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: white;
    border: 1px solid #2e7d32;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #2e7d32;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-spec-excel:hover {
    background: #2e7d32;
    color: white;
}

.btn-spec-excel.btn-upload {
    border-color: #1565c0;
    color: #1565c0;
}

.btn-spec-excel.btn-upload:hover {
    background: #1565c0;
    color: white;
}

.btn-spec-learn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid #5a67d8;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.btn-spec-learn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.4);
}

.btn-spec-learn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 스펙 섹션 공통 */
.spec-section {
    background: white;
    border-radius: 12px;
    margin: 8px 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}

.spec-section.dragging {
    opacity: 0.8;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.spec-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: grab;
    position: relative;
    z-index: 5;
}

.spec-section-header:active {
    cursor: grabbing;
}

.spec-section-header .section-icon {
    font-size: 18px;
}

.spec-section-header .section-title {
    flex: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.spec-section-header .section-title-input {
    flex: 1;
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.spec-section-header .section-title-input::placeholder {
    color: rgba(255,255,255,0.7);
}

/* 필수정보 섹션 */
.spec-essential-section .spec-section-header {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    cursor: default;
}

.spec-essential-content {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.essential-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.essential-row label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.essential-row input {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.essential-row input:focus {
    outline: none;
    border-color: #27ae60;
    box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
}

.essential-row input:read-only {
    background: #f8f9fa;
    color: #666;
}

.section-actions {
    display: flex;
    gap: 8px;
}

.btn-section-action {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 4px 10px;
    border-radius: 4px;
    color: #6c5ce7;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-section-action:hover {
    background: #fff;
    color: #5f4dd0;
}

.btn-image-upload {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 6px 12px;
    border-radius: 6px;
    color: #27ae60;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-image-upload:hover {
    background: #fff;
    color: #219a52;
}

/* 이미지 그리드 */
.spec-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
}

.spec-image-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: grab;
    transition: all 0.2s;
}

.spec-image-item:first-child {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.spec-image-item:hover {
    transform: scale(1.05);
}

.spec-image-item.dragging {
    opacity: 0.5;
}

.spec-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spec-image-item .image-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.spec-image-item:hover .image-delete {
    opacity: 1;
}

.spec-image-placeholder {
    width: 80px;
    height: 80px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
    cursor: pointer;
}

.spec-image-placeholder:hover {
    border-color: #667eea;
    color: #667eea;
}

/* 스펙 항목 리스트 */
.spec-items-list {
    padding: 0;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-item:hover {
    background: #f8f9fa;
}

.spec-item.dragging {
    background: #e8f0fe;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.spec-item .drag-handle {
    color: #ccc;
    cursor: grab;
    font-size: 16px;
    padding: 4px;
}

.spec-item .drag-handle:active {
    cursor: grabbing;
}

.spec-item .spec-name {
    width: 90px;
    font-weight: 500;
    color: #555;
    font-size: 13px;
}

.spec-item .spec-value {
    flex: 1;
    color: #333;
    font-size: 13px;
}

.spec-item .spec-name-input,
.spec-item .spec-value-input {
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.spec-item .spec-name-input {
    width: 90px;
}

.spec-item .spec-value-input {
    flex: 1;
}

.spec-item .item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.spec-item:hover .item-actions {
    opacity: 1;
}

.btn-item-action {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-item-action:hover {
    background: #f0f0f0;
    color: #333;
}

.btn-item-action.delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.btn-item-action.save:hover {
    background: #dcfce7;
    color: #16a34a;
}

.btn-item-action.cancel:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* 인라인 편집 모드 */
.spec-item.editing {
    background: #fffbeb;
    border: 1px solid #f59e0b;
}

.spec-item.editing .item-actions {
    opacity: 1;
}

.inline-edit-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.inline-edit-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.spec-item.editing .spec-name,
.spec-item.editing .spec-value {
    padding: 0;
}

/* 스펙 추가 폼 (드롭다운) */
.spec-add-form {
    display: none;
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.spec-add-form.show {
    display: flex;
    gap: 8px;
    align-items: center;
}

.spec-add-form input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.spec-add-form .input-name {
    width: 120px;
}

.spec-add-form .input-value {
    flex: 1;
}

.spec-add-form .btn-add {
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.spec-add-form .btn-add:hover {
    background: #5a6fd6;
}

.spec-add-form .btn-cancel {
    padding: 8px 12px;
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* 섹션 추가 드롭다운 */
.section-add-dropdown {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 1000;
}

.section-add-dropdown.show {
    display: block;
}

.section-add-dropdown h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #333;
}

.section-add-dropdown input {
    width: 280px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.section-add-dropdown .btn-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.section-add-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.section-add-overlay.show {
    display: block;
}

/* 드래그 고스트 스타일 */
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* 스펙 저장 토스트 */
.spec-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.spec-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.spec-toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.spec-toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* 스펙 이미지 갤러리 (상품상세 영역 내) */
.spec-gallery-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.spec-gallery-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 50px;
}

.spec-gallery-content img {
    max-width: 100%;
    max-height: calc(100% - 60px);
    object-fit: contain;
    border-radius: 8px;
}

.spec-gallery-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.spec-gallery-close:hover {
    color: #ff6b6b;
}

.spec-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 20px;
    padding: 12px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.spec-gallery-nav:hover {
    background: rgba(255,255,255,0.3);
}

.spec-gallery-nav.prev {
    left: 8px;
}

.spec-gallery-nav.next {
    right: 8px;
}

.spec-gallery-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: white;
    font-size: 13px;
}

.spec-gallery-delete {
    background: #ef4444;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.spec-gallery-delete:hover {
    background: #dc2626;
}

/* spec-info-content를 relative로 */
#spec-info-content {
    position: relative;
}

/* 이미지 아이템 클릭 가능 표시 */
.spec-image-item {
    cursor: pointer;
}

.spec-image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== QnA 검색 결과 스타일 ===== */
#qna-search-results {
    display: flex;
    flex-direction: column;
    background: #fff;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#qna-search-results .list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-close-search {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-close-search:hover {
    background: #c0392b;
}

.search-result-summary {
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    font-size: 13px;
    color: #666;
}

.search-result-list {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
}

.search-result-item:hover {
    background: #f0f7ff;
    border-color: #3498db;
}

.search-product-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e1e4e8;
    flex-shrink: 0;
}

.search-product-img-empty {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-product-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-qna-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.search-date-text {
    font-size: 11px;
    color: #888;
    margin-right: 4px;
    flex-shrink: 0;
}

/* QnA 검색 결과 카드 마켓 배지 (N=네이버 초록, C=쿠팡 빨강) */
.qna-market-badge-N,
.qna-market-badge-C {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    margin-right: 6px;
    flex-shrink: 0;
    font-family: 'Segoe UI', sans-serif;
}
.qna-market-badge-N { background: #16a34a; }   /* 초록 - 네이버 */
.qna-market-badge-C { background: #dc2626; }   /* 빨강 - 쿠팡 */

.search-question-text {
    font-size: 12px;
    color: #666;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

.faq-badge {
    background: #27ae60;
    color: white;
}

.qna-badge {
    background: #3498db;
    color: white;
}

.search-date {
    font-size: 11px;
    color: #999;
}

.search-question {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-product {
    margin-top: 4px;
    font-size: 11px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-results {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

/* 전체 검색 결과 - 상품 정보 영역 */
.search-result-product {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.search-product-img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e1e4e8;
    flex-shrink: 0;
}

.search-product-img-placeholder {
    width: 45px;
    height: 45px;
    background: #f0f0f0;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-product-info {
    flex: 1;
    min-width: 0;
}

.search-product-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Q&A 내용 영역 */
.search-qa-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-qa-content .search-question,
.search-qa-content .search-answer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow: hidden;
}

.search-qa-content .search-question {
    color: #333;
}

.search-qa-content .search-answer {
    color: #666;
}

.search-qa-content .qa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}

.search-question .qa-badge {
    background: #3498db;
    color: white;
}

.search-answer .qa-badge {
    background: #27ae60;
    color: white;
}

/* 최종 강제 정렬 규칙 - 파일 끝에서 우선 적용 */
#faq-section .faq-table th,
#faq-section .faq-table td {
    text-align: left !important;
}
#faq-section .faq-table td.no-data-message,
#qna-section .qna-table td.no-data-message {
    text-align: center !important;
}

/* FAQ 테이블 컬럼 너비 */
.faq-table.qna-table th:first-child,
.faq-table.qna-table td:first-child {
    width: 85px !important;
    min-width: 85px !important;
    max-width: 85px !important;
}
.faq-table.qna-table th:nth-child(2),
.faq-table.qna-table td:nth-child(2) {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}
.faq-table.qna-table th:last-child,
.faq-table.qna-table td:last-child {
    width: auto !important;
}

/* ===== 서브탭 스타일 (기준상품/마켓상품) ===== */

/* 상품검색 탭 - 서브탭 포함 flex 구조 */
#product-search.tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#product-search.tab-content.active {
    display: flex;
}

.product-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 0;
    background: #f8f9fa;
    /* 우측 버튼을 더 끝으로 붙이기(기존 레이아웃 영향 최소) */
    padding: 0 6px 0 0;
    flex-shrink: 0;
}

.product-search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-tab-buttons {
    display: flex;
    gap: 0;
}

.sub-tab-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.sub-tab-btn:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.sub-tab-btn.active {
    color: #3498db;
    border-bottom-color: #3498db;
    background: white;
}

.sub-tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sub-tab-content.active {
    display: flex;
}

/* 마켓상품 테이블 컨테이너 - 헤더 고정 */
.sub-tab-content .product-table-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 기준상품 테이블 - 마켓수 컬럼 스타일 */
#master-product-list .market-count {
    text-align: center;
    font-weight: 600;
    color: #3498db;
}

#master-product-list .market-count-badge {
    display: inline-block;
    background: #e8f4fd;
    color: #2980b9;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* 기준상품 행 스타일 */
.master-product-row {
    cursor: pointer;
}

.master-product-row:hover {
    background: #f0f8ff;
}

.master-product-row.selected {
    background: #e3f2fd;
}

/* 품목코드 클릭 링크 스타일 */
.seller-code-link {
    color: #3498db;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.seller-code-link:hover {
    color: #2980b9;
    text-decoration: none;
}

/* ============================================================
   기준상품 리스트 테이블 스타일
   ============================================================ */

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

.master-products-table thead th {
    background: #3498db;
    color: #fff;
    padding: 12px 8px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    border: 1px solid #2980b9;
    position: sticky;
    top: 0;
    z-index: 10;
}

.master-products-table tbody td {
    border: 1px solid #dee2e6;
    padding: 10px 8px;
}

.master-products-table tbody tr {
    transition: background-color 0.15s;
}

.master-products-table tbody tr:hover {
    background-color: #f8f9fa;
}

.master-product-row td {
    vertical-align: middle;
}

.master-product-row .cell-image {
    text-align: center;
    width: 50px;
}

.master-product-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}

.master-product-row .cell-seller-code {
    font-family: monospace;
    font-size: 13px;
}

.master-product-row .cell-product-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.master-product-row .cell-center {
    text-align: center;
}

.master-product-row .cell-date {
    text-align: center;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.master-product-row .cell-spec-summary {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #555;
}

.master-product-row .no-image {
    color: #ccc;
    font-size: 12px;
}

/* 스펙 버튼 */
.btn-spec-view {
    padding: 4px 10px;
    font-size: 12px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-spec-view:hover {
    background: #219a52;
}
.btn-spec-view.no-spec {
    background: #bdc3c7;
    cursor: not-allowed;
}

/* 스펙 팝업 모달 */
.spec-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spec-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.spec-popup-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.spec-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    background: #3498db;
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.spec-popup-header h3 {
    margin: 0;
    font-size: 18px;
}
.spec-popup-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}
.spec-popup-close:hover {
    color: #ecf0f1;
}
.spec-popup-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* 스펙 섹션 카드 */
.spec-section-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 16px;
}
.spec-section-header {
    padding: 12px 16px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border-radius: 6px 6px 0 0;
}
.spec-section-images {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.spec-section-images .spec-image-item {
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.spec-section-images .spec-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.spec-image-item .image-order {
    text-align: center;
    padding: 6px;
    font-size: 11px;
    color: #666;
    background: #f1f3f5;
}
.spec-no-data {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 14px;
}

.spec-loading {
    text-align: center;
    padding: 30px 10px;
    color: #555;
    font-size: 14px;
}

.spec-section-table {
    padding: 12px 16px 16px;
}

.spec-popup-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
}

.spec-popup-table th,
.spec-popup-table td {
    border-bottom: 1px solid #eee;
    padding: 10px 12px;
    font-size: 13px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.spec-popup-table thead th {
    background: #f1f3f5;
    font-weight: 600;
    color: #333;
}

.spec-popup-table tbody tr:last-child td {
    border-bottom: none;
}

/* 메시지 스타일 */
.loading-message,
.no-data-message,
.error-message {
    text-align: center;
    padding: 30px 10px;
    color: #888;
    font-size: 13px;
    line-height: 1.6;
}

.error-message {
    color: #e74c3c;
}

/* ===== 기준상품 등록 버튼 및 등록됨 배경 ===== */
.btn-register-master {
    padding: 3px 8px;
    font-size: 11px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-register-master:hover {
    background: #2980b9;
}

.btn-master-registered {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-master-registered:hover {
    background: #c0392b;
}

/* 코드등록 버튼 (기준상품 있고 CODE 테이블에 없는 경우) */
.btn-code-register {
    padding: 3px 8px;
    font-size: 11px;
    background: #9b59b6;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-code-register:hover {
    background: #8e44ad;
}

/* 품목등록 버튼 (품목코드 없는 상품용) */
.btn-register-item-code {
    padding: 3px 8px;
    font-size: 11px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-register-item-code:hover {
    background: #d35400;
}

/* 기준상품 등록된 행 배경색 (연한 노란색) */
#product-list tr.master-registered {
    background-color: #fffde7 !important;
}

#product-list tr.master-registered:hover {
    background-color: #fff9c4 !important;
}

#product-list tr.master-registered.selected {
    background-color: #fff59d !important;
}

/* 기준상품 리스트의 등록해제 버튼 */
.btn-unregister-master {
    padding: 2px 8px;
    font-size: 11px;
    background: #ef5350;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 4px;
}

.btn-unregister-master:hover {
    background: #d32f2f;
}

/* 마켓 배지 클릭 가능 스타일 */
.market-count-badge.clickable {
    cursor: pointer;
    user-select: none;
}

.market-count-badge.clickable:hover {
    background: #1565c0;
}

/* 연결된 마켓상품 드롭다운 */
.linked-products-row {
    background: #f8f9fa;
}

.linked-products-cell {
    padding: 0 !important;
}

.linked-products-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px 8px 30px;
    border-left: 3px solid #2196f3;
    margin-left: 10px;
}

.linked-product-item {
    display: grid;
    grid-template-columns: 50px 70px 100px 1fr 24px;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px;
    align-items: center;
}

.linked-product-item:hover {
    background: #e3f2fd;
}

.linked-market-name {
    color: #1976d2;
    font-weight: 600;
}

.linked-market-code {
    color: #666;
    font-size: 11px;
}

.linked-product-code {
    color: #333;
    font-family: monospace;
    font-size: 11px;
}

.linked-remove-btn {
    color: #e53935;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.linked-remove-btn:hover {
    opacity: 1;
    color: #c62828;
}

.linked-product-name {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 기준상품 리스트의 품목코드 셀 */
#master-product-list td.product-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* ============================================================
   상품 페이지 (전체 데이터 조회)
   ============================================================ */

.products-page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    padding: 10px;
    background: #f5f5f5;
}

.products-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 15px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-wrap: wrap;
}

.products-page-tabs {
    display: flex;
    gap: 5px;
}

.products-tab {
    padding: 8px 16px;
    border: none;
    background: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.products-tab:hover {
    background: #d0d0d0;
}

.products-tab.active {
    background: #2c3e50;
    color: white;
}

.products-page-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.products-page-filters select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    min-width: 150px;
}

.products-page-filters input {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 200px;
}

.products-page-filters button {
    padding: 6px 12px;
    border: none;
    background: #3498db;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.products-page-filters button:hover {
    background: #2980b9;
}

.products-page-info {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #666;
}

.products-page-info span {
    white-space: nowrap;
}

/* 테이블 영역 */
.products-table-wrapper {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.products-table-container {
    height: 100%;
    overflow: auto;
}

.products-data-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
}

.products-data-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.products-data-table th {
    padding: 10px 12px;
    background: #2c3e50;
    color: white;
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
    border-right: 1px solid #34495e;
}

.products-data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.products-data-table tbody tr:hover {
    background-color: #f8f9fa !important;
}

.products-data-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* 고정 컬럼 스타일 */
.products-data-table th.sticky-col,
.products-data-table td.sticky-col {
    position: sticky;
}

.products-data-table th.sticky-col {
    top: 0;  /* 헤더 상단 고정 */
    z-index: 5;  /* thead(z-index:3)보다 높게 */
}

.products-data-table td.sticky-col {
    z-index: 1;
    background: #fff;
}

.products-data-table tbody tr:nth-child(even) td.sticky-col {
    background: #fafafa;
}

.products-data-table tbody tr:hover td.sticky-col {
    background-color: #f8f9fa !important;
}

/* 체크박스 컬럼 (맨 왼쪽 고정) */
.products-data-table th.checkbox-col,
.products-data-table td.checkbox-col {
    position: sticky;
    left: 0;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    padding: 4px !important;
}

.products-data-table thead th.checkbox-col {
    top: 0;  /* 상단 고정 */
    z-index: 10;  /* thead(z-index:3)보다 높게 */
    background: #2c3e50;  /* 헤더 배경색 */
}

.products-data-table tbody td.checkbox-col {
    z-index: 2;  /* sticky-col 바디(z-index:1)보다 위 */
    background: #fff;  /* 바디 배경색 */
}

.products-data-table tbody tr:nth-child(even) td.checkbox-col {
    background: #fafafa;
}

.products-data-table tbody tr:hover td.checkbox-col {
    background-color: #f8f9fa !important;
}

/* 고정 컬럼 위치 (체크박스 30px + No 35px = 65px 기준) */
/* colgroup width: 대표이미지50, 상품번호75, 상품명200, 품목코드95, 모델명75 */
.products-data-table .sticky-col-0 { left: 65px; text-align: center; padding: 4px !important; }   /* 대표이미지 */
.products-data-table .sticky-col-0 img { display: block; margin: 0 auto; }
.products-data-table .sticky-col-1 { left: 115px; }          /* 상품번호 (65+50) */
.products-data-table .sticky-col-2 { left: 190px; }          /* 상품명 (115+75) */
.products-data-table .sticky-col-3 { left: 390px; }          /* 품목코드 (190+200) */
.products-data-table .sticky-col-4 { left: 485px; }          /* 모델명 (390+95) */

/* 마지막 고정 컬럼에 그림자 */
.products-data-table .sticky-col-4 {
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* 비공개 상품 행 스타일 */
.products-data-table tr.hidden-row {
    background-color: #fff5f5 !important;
}
.products-data-table tr.hidden-row td.checkbox-col,
.products-data-table tr.hidden-row td.sticky-col {
    background-color: #fff5f5 !important;
}
.products-data-table tr.hidden-row:hover td,
.products-data-table tr.hidden-row:hover td.checkbox-col,
.products-data-table tr.hidden-row:hover td.sticky-col {
    background-color: #ffe8e8 !important;
}

/* 공개/비공개 버튼 영역 */
.products-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.products-page-actions #products-selected-count {
    font-size: 12px;
    color: #666;
}

.products-page-actions .btn-visible {
    background: #28a745;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.products-page-actions .btn-visible:hover:not(:disabled) {
    background: #218838;
}
.products-page-actions .btn-hidden {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.products-page-actions .btn-hidden:hover:not(:disabled) {
    background: #c82333;
}
.products-page-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 페이징 */
.products-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.products-pagination .products-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.products-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.products-pagination button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.products-pagination button:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #3498db;
}

.products-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.products-pagination .page-num {
    padding: 6px 10px;
    min-width: 32px;
}

.products-pagination .page-num.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

.products-pagination select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
}

#products-page-numbers {
    display: flex;
    gap: 4px;
}


/* 상품추가 버튼 */
.btn-add-product {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.btn-add-product:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.btn-add-product:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

/* 상품검색 상단: 정렬 설정 버튼(상품추가 옆) - 기존 버튼 스타일 재사용, 색만 중립 */
.btn-add-product.btn-product-settings {
    background: #e5e7eb;
    color: #111827;
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
}
.btn-add-product.btn-product-settings:hover {
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.12);
    transform: translateY(-1px);
}
.btn-add-product.btn-product-settings:active {
    transform: translateY(0);
}

.btn-add-product .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    margin-right: 6px;
    font-size: 14px;
    line-height: 1;
}

/* ===== 기준상품 등록 모달 스타일 ===== */
#add-product-layer .modal-content {
    max-width: 750px;
}

#add-product-layer .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px 24px;
    border-radius: 12px 12px 0 0;
}

#add-product-layer .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

#add-product-layer .modal-close {
    color: white;
    opacity: 0.9;
    font-size: 28px;
}

#add-product-layer .modal-close:hover {
    opacity: 1;
}

#add-product-layer .modal-body {
    padding: 20px 24px;
}

#add-product-layer .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

#add-product-layer .form-group {
    margin-bottom: 0;
}

#add-product-layer .form-group.full-width {
    grid-column: 1 / -1;
}

#add-product-layer .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

#add-product-layer .form-group label .required {
    color: #e74c3c;
    margin-left: 2px;
}

#add-product-layer .form-group select,
#add-product-layer .form-group input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

#add-product-layer .form-group select:focus,
#add-product-layer .form-group input[type="text"]:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

#add-product-layer .form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #7f8c8d;
}

#add-product-layer .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

#add-product-layer .modal-footer button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

#add-product-layer .modal-footer button[type="button"] {
    background: #95a5a6;
    color: white;
}

#add-product-layer .modal-footer button[type="button"]:hover {
    background: #7f8c8d;
}

#add-product-layer .modal-footer button[type="submit"] {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);
}

#add-product-layer .modal-footer button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.4);
}

/* ===== 기준상품 정렬 설정 모달(상품검색 상단 설정 버튼) 푸터 버튼 스타일 ===== */
#master-sort-mode-layer .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

#master-sort-mode-layer .modal-footer button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* 취소 버튼만(저장 버튼은 btn-primary 유지) */
#master-sort-mode-layer .modal-footer button[type="button"]:not(.btn-primary) {
    background: #95a5a6;
    color: white;
}

#master-sort-mode-layer .modal-footer button[type="button"]:not(.btn-primary):hover {
    background: #7f8c8d;
}

/* 마켓수 + 즐겨찾기 통합 스타일 (세로 배치) */
.market-count-with-favorite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.market-count-with-favorite .favorite-star {
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s;
    display: block;
    line-height: 1;
    opacity: 0.6;
}

.market-count-with-favorite .favorite-star:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.market-count-with-favorite .favorite-star.active {
    color: #ffc107;
    opacity: 0.8;
}

.market-count-with-favorite .market-count-badge {
    display: block;
    line-height: 1.2;
}

/* 삭제 버튼 스타일 */
.btn-delete-master {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    opacity: 0.6;
}

.btn-delete-master:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 3px rgba(231, 76, 60, 0.6));
}

.btn-show-master {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    opacity: 0.6;
}

.btn-show-master:hover {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 3px rgba(46, 204, 113, 0.6));
}

/* ========================================
   기준상품 삭제/비공개 모달 스타일
   ======================================== */

#delete-master-confirm-layer .modal-content {
    width: 520px;
    max-width: 95%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#delete-master-confirm-layer .modal-header {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 20px 24px;
    border-bottom: none;
}

#delete-master-confirm-layer .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

#delete-master-confirm-layer .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#delete-master-confirm-layer .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

#delete-master-confirm-layer .modal-body {
    padding: 24px;
    background: #f8f9fa;
}

/* 상품 정보 영역 */
.delete-product-info {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.delete-product-info p {
    margin: 0;
    padding: 8px 0;
    font-size: 14px;
    color: #495057;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.delete-product-info p:first-child {
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f3f4;
}

.delete-product-info p:last-child {
    padding-top: 12px;
}

.delete-product-info strong {
    color: #343a40;
    min-width: 70px;
    flex-shrink: 0;
}

.delete-product-info span {
    color: #495057;
    word-break: break-all;
    line-height: 1.5;
}

#delete-seller-code {
    font-family: 'Consolas', 'Monaco', monospace;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: #495057;
}

/* 옵션 선택 영역 */
.delete-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delete-option-label {
    display: block;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-option-label input[type="radio"] {
    display: none;
}

.delete-option-inner {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s;
}

.delete-option-label:hover .delete-option-inner {
    border-color: #adb5bd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 완전 삭제 선택 시 */
.delete-option-delete input[type="radio"]:checked + .delete-option-inner {
    border-color: #e74c3c;
    background: linear-gradient(to bottom, #fff5f5, white);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.15);
}

/* 비공개 선택 시 */
.delete-option-hide input[type="radio"]:checked + .delete-option-inner {
    border-color: #3498db;
    background: linear-gradient(to bottom, #f0f8ff, white);
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.15);
}

.delete-option-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.delete-option-emoji {
    font-size: 24px;
    line-height: 1;
}

.delete-option-title strong {
    font-size: 16px;
    color: #212529;
}

.delete-option-desc {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 34px;
}

.delete-option-warn {
    font-size: 12px;
    color: #e74c3c;
    font-weight: 500;
    padding-left: 34px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.delete-option-note {
    font-size: 12px;
    color: #27ae60;
    font-weight: 500;
    padding-left: 34px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 푸터 버튼 영역 */
#delete-master-confirm-layer .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

#delete-master-confirm-layer .btn-cancel {
    padding: 12px 24px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

#delete-master-confirm-layer .btn-cancel:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

#delete-master-confirm-layer .btn-confirm-delete {
    padding: 12px 28px;
    border: none;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

#delete-master-confirm-layer .btn-confirm-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

#delete-master-confirm-layer .btn-confirm-delete:active {
    transform: translateY(0);
}

/* ========================================
   최종 확인 팝업 스타일
   ======================================== */

.final-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(4px);
}

.final-confirm-overlay.hidden {
    display: none;
}

.final-confirm-box {
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    min-width: 360px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.2s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.final-confirm-box h4 {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #212529;
}

.final-confirm-box p {
    margin: 0 0 24px 0;
    font-size: 15px;
    color: #495057;
    line-height: 1.7;
}

.final-confirm-box .text-danger {
    color: #e74c3c;
    font-weight: 600;
}

.final-confirm-box .text-info {
    color: #3498db;
    font-weight: 600;
}

.final-confirm-box .warning-text {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.final-confirm-box .note-text {
    display: inline-block;
    background: #d1ecf1;
    color: #0c5460;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.final-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-final-cancel {
    padding: 12px 28px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-final-cancel:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-final-delete {
    padding: 12px 28px;
    border: none;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-final-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.btn-final-hide {
    padding: 12px 28px;
    border: none;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-final-hide:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

/* 비공개 상품 배지 */
.hidden-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.master-product-row .product-image {
    position: relative;
}

/* 기준상품 정렬(드래그) - 핸들은 이미지 영역(버튼 없이 이미지 잡고 드래그) */
.master-product-row .product-image.drag-handle {
    cursor: grab;
}
.master-product-row.dragging {
    opacity: 0.6;
}
.master-product-row.drop-target {
    outline: 2px dashed rgba(52, 152, 219, 0.8);
    outline-offset: -2px;
}

/* 비공개 상품 행 스타일 */
.master-product-row.hidden-product {
    opacity: 0.7;
    background: #f8f9fa;
}

/* ========================================
   마켓상품 목록 - 품목코드별 그룹 색상
   ======================================== */

/* 그룹 배경색 번갈아 표시 */
.group-even {
    background: #ffffff;
}

.group-odd {
    background: #f5f7fa;
}

#product-list tr:hover {
    background: #e3f2fd !important;
}

#product-list tr.selected {
    background: #bbdefb !important;
}

/* 마켓/상품코드 셀 스타일 */
.market-code-cell {
    padding: 6px 8px !important;
    vertical-align: middle;
}

.market-code-cell .market-id {
    font-size: 12px;
    font-weight: 600;
    color: #2980b9;
    margin-bottom: 2px;
}

.market-code-cell .product-no {
    font-size: 10px;
    color: #666;
    word-break: break-all;
}

/* 공개/비공개 개수 표시 */
.visibility-counts {
    margin-left: 15px;
    font-size: 13px;
    display: inline-flex;
    gap: 12px;
}

.visibility-counts .visible-count,
.visibility-counts .hidden-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.visibility-counts .visible-count {
    color: #27ae60;
}

.visibility-counts .hidden-count {
    color: #e74c3c;
}

/* 순서 번호 컬럼 (마켓상품 테이블) */
#market-products .product-table .row-number {
    text-align: center;
    color: #888;
    font-size: 11px;
    width: 30px;
}

/* 상품 메뉴 테이블 No 컬럼 */
.no-col {
    text-align: center;
    color: #666;
}

/* ===== 스프레드시트 링크 관리 ===== */
.sheets-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.sheets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sheets-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.btn-add-sheet {
    padding: 4px 10px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-add-sheet:hover {
    background: #2563eb;
}

.sheets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sheet-empty {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 10px;
    margin: 0;
}

.sheet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

.sheet-item:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sheet-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #1e40af;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
}

.sheet-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.sheet-icon {
    font-size: 14px;
}

.sheet-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-actions {
    display: flex;
    gap: 4px;
}

.btn-sheet-edit,
.btn-sheet-delete {
    padding: 4px 6px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
}

.btn-sheet-edit:hover {
    background: #fef3c7;
    border-color: #fbbf24;
}

.btn-sheet-delete:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* 스프레드시트 모달 */
.sheet-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.sheet-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.sheet-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.sheet-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
}

.sheet-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.sheet-modal-close:hover {
    color: #1e293b;
}

.sheet-modal-body {
    padding: 20px;
}

.sheet-form-group {
    margin-bottom: 16px;
}

.sheet-form-group:last-child {
    margin-bottom: 0;
}

.sheet-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

.sheet-form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.sheet-form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sheet-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
}

.btn-sheet-cancel,
.btn-sheet-save {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-sheet-cancel {
    background: white;
    border: 1px solid #d1d5db;
    color: #4b5563;
}

.btn-sheet-cancel:hover {
    background: #f3f4f6;
}

.btn-sheet-save {
    background: #3b82f6;
    border: 1px solid #3b82f6;
    color: white;
}

.btn-sheet-save:hover {
    background: #2563eb;
}


/* 채널상품코드 링크 스타일 */
.product-no a {
    text-decoration: none;
    color: inherit;
}

.product-no a:hover {
    color: #03c75a;
}

/* ===== Backup Management Styles ===== */
.backup-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 20px;
}

.backup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.backup-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.backup-icon {
    font-size: 24px;
}

.backup-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.backup-desc {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0 0;
}

.backup-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #f8f9fa;
    font-size: 12px;
}

.backup-status.connected .status-dot {
    background: #27ae60;
}

.backup-status.disconnected .status-dot {
    background: #e74c3c;
}

.backup-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.backup-info-item {
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 10px;
    text-align: center;
}

.backup-info-item .info-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.backup-info-item .info-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.backup-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-backup-primary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-backup-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-backup-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-backup-secondary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-backup-secondary:hover {
    background: #eee;
}

.btn-backup-refresh {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-backup-refresh:hover {
    color: #333;
}

/* Backup List */
.backup-list-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.backup-list-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.backup-list-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.backup-list {
    max-height: 400px;
    overflow-y: auto;
}

.backup-loading {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.backup-empty {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.backup-item:hover {
    background: #f8f9fa;
}

.backup-item:last-child {
    border-bottom: none;
}

.backup-item-info {
    flex: 1;
}

.backup-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.backup-item-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #888;
}

.backup-item-actions {
    display: flex;
    gap: 8px;
}

.btn-backup-restore {
    padding: 6px 12px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-backup-restore:hover {
    background: #219a52;
}

.btn-backup-delete {
    padding: 6px 12px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-backup-delete:hover {
    background: #c0392b;
}

.backup-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.backup-status-badge.success {
    background: #d4edda;
    color: #155724;
}

.backup-status-badge.partial {
    background: #fff3cd;
    color: #856404;
}

/* ===== Excel Download Button ===== */
.btn-excel-download {
    padding: 2px 8px;
    font-size: 10px;
    background: #1d6f42;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.btn-excel-download:hover {
    background: #155d32;
}

/* QnA list title right area */
.list-title-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   매뉴얼 전용 스타일 (FAQ와 완전 분리)
   ============================================ */

/* 매뉴얼 패널 (리스트) */
.manual-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.manual-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #4a90d9;
    color: white;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.manual-panel-header span {
    font-size: 14px;
}

/* 매뉴얼 테이블 wrapper */
.manual-table-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 매뉴얼 테이블 */
.manual-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.manual-table thead {
    background: #f5f5f5;
    position: sticky;
    top: 0;
}

.manual-table th,
.manual-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.manual-table th {
    font-weight: 600;
    color: #333;
}

.manual-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.manual-table tbody tr:hover {
    background: #f0f7ff;
}

.manual-table tbody tr.selected {
    background: #e3f2fd;
}

.manual-table td.category-cell {
    color: #666;
    font-size: 11px;
}

.manual-table td.sort-cell {
    text-align: center;
    color: #888;
}

/* 매뉴얼 등록/수정 박스 - FAQ와 동일 구조 */
.manual-register-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background: #f8f9fa;
    overflow: hidden;
}

.manual-register-header {
    background: #4a90d9;
    color: white;
    padding: 8px 12px;
    font-weight: bold;
    font-size: 13px;
}

/* 매뉴얼 보기 모드 */
.manual-view-mode {
    padding: 12px;
}

.manual-view-category {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    padding: 4px 8px;
    background: #e9ecef;
    border-radius: 3px;
    display: inline-block;
}

.manual-view-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.manual-view-content {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

/* 매뉴얼 편집 폼 - FAQ와 동일 */
.manual-register-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 6px;
    overflow: auto;
}

.manual-form-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.manual-form-row label {
    flex: 0 0 35px;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    padding-top: 4px;
}

.manual-form-row input[type="text"],
.manual-form-row input[type="number"],
.manual-form-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

.manual-form-row textarea {
    flex: 1;
    min-height: 100px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    line-height: 1.6;
}

/* 내용 입력 행 - 남은 공간 유연하게 채우기 (FAQ와 동일) */
.manual-form-row.content-row {
    flex: 1 1 auto;
    min-height: 100px;
    flex-shrink: 1;
}

.manual-form-row.content-row textarea {
    height: 100%;
    min-height: 80px;
}

/* 매뉴얼 내용 입력 - ID 기반 강제 적용 */
#manual-edit-form .manual-form-row.content-row {
    flex: 1 1 auto !important;
    min-height: 200px;
}

#manual-content-input {
    flex: 1;
    height: 100% !important;
    min-height: 150px;
}

.manual-form-row input[type="number"] {
    width: 80px;
    flex: 0;
}

/* 매뉴얼 버튼 영역 */
.manual-form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.manual-view-buttons {
    justify-content: space-between;
}

.manual-buttons-left,
.manual-buttons-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.manual-buttons-left label {
    font-size: 12px;
    color: #555;
    margin: 0;
}

.btn-manual-action {
    padding: 6px 14px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}

.btn-manual-action.btn-register {
    background: #28a745;
    color: white;
}

.btn-manual-action.btn-register:hover {
    background: #218838;
}

.btn-manual-action.btn-update {
    background: #007bff;
    color: white;
}

.btn-manual-action.btn-update:hover {
    background: #0069d9;
}

.btn-manual-action.btn-delete {
    background: #dc3545;
    color: white;
}

.btn-manual-action.btn-delete:hover {
    background: #c82333;
}

.btn-manual-action.btn-cancel {
    background: #6c757d;
    color: white;
}

.btn-manual-action.btn-cancel:hover {
    background: #5a6268;
}

.btn-small {
    padding: 4px 8px;
    font-size: 11px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-small:hover {
    background: #5a6268;
}

/* 매뉴얼 카테고리 선택 */
#manual-category-select {
    min-width: 120px;
}

/* ============================================
   매뉴얼 구분 관리 모달 (FAQ와 완전 분리)
   ============================================ */

.manual-category-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.manual-category-modal-content {
    background: white;
    border-radius: 8px;
    width: 450px;
    max-height: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.manual-category-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
    font-size: 14px;
}

.manual-category-modal-header .modal-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.manual-category-modal-header .modal-close-btn:hover {
    color: #333;
}

.manual-category-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

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

.manual-category-table th,
.manual-category-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.manual-category-table th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
}

.manual-category-table td {
    font-size: 13px;
}

.manual-category-table td:last-child {
    white-space: nowrap;
}

.manual-category-table .btn-edit-small,
.manual-category-table .btn-delete-small {
    padding: 3px 6px;
    font-size: 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 4px;
    display: inline-block;
}

.manual-category-table .btn-edit-small {
    background: #4a90d9;
    color: white;
}

.manual-category-table .btn-delete-small {
    background: #e74c3c;
    color: white;
}

.manual-category-modal-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
}

.manual-category-input-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
    align-items: center;
}

.manual-category-input-row input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.manual-category-input-row button {
    padding: 6px 12px;
    font-size: 12px;
}

/* ========== QnA 답변 등록 폼 스타일 (신규) ========== */

.qna-answer-form {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.qna-answer-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.qna-answer-form-header .form-title {
    font-weight: 600;
    font-size: 14px;
    color: #334155;
}

.qna-answer-form-header .answer-status {
    font-size: 12px;
    color: #64748b;
}

.qna-answer-form-header .answer-status.status-new {
    color: #f59e0b;
}

.qna-answer-form-header .answer-status.status-edit {
    color: #3b82f6;
}

.qna-answer-form-header .answer-status.status-add {
    color: #ef4444;
}

.qna-answer-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

.qna-answer-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.qna-answer-form-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.btn-qna-submit {
    flex: 1;
    padding: 10px 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-qna-submit:hover {
    background: #2563eb;
}

.btn-qna-submit:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.btn-qna-cancel {
    padding: 10px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-qna-cancel:hover {
    background: #e2e8f0;
}

.qna-answer-error {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
}

/* QnA 상세 영역에 답변하기 버튼 추가 */
.qna-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.btn-write-answer {
    padding: 8px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-write-answer:hover {
    background: #059669;
}

.btn-write-answer.btn-edit {
    background: #f59e0b;
}

.btn-write-answer.btn-edit:hover {
    background: #d97706;
}

/* ============================================================
 * 쿠팡 / 네이버 마켓 구분 스타일 (csmaster_test에서 머지, 2026-05-28)
 * - 텍스트(market-naver/market-coupang): QnA 행/상세에서 마켓 표기 색
 * - 배지(market-badge-*): 상품 카드의 마켓 라벨 배지
 * - 색상 기준: 네이버 브랜드 초록 #03c75a, 쿠팡 브랜드 빨강 #e44232
 * ============================================================ */
.market-naver {
    color: #03c75a;
    font-weight: 600;
    font-size: 11px;
}

.market-coupang {
    color: #e44332;
    font-weight: 600;
    font-size: 11px;
}

.market-badge-naver {
    background: #03c75a;
    color: white;
}

.market-badge-coupang {
    background: #e44232;
    color: white;
}

/* 쿠팡 QnA 답변 안내 박스 (qna 상세 패널에서 답변 폼 대신 노출) */
.coupang-notice {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 12px;
    border-radius: 8px;
    color: #c2410c;
    font-size: 13px;
    margin-top: 8px;
}
.coupang-notice a {
    color: #c2410c;
    font-weight: bold;
    text-decoration: underline;
}

/* QnA 답변 영역 — [답변하기]와 [삭제] 같은 라인 정렬 */
.qna-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* 삭제 버튼 — 답변 버튼 우측에 작게 */
.btn-qna-delete {
    margin-left: auto;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
}
.btn-qna-delete:hover {
    background: #fecaca;
    border-color: #f87171;
}

/* 쿠팡 답변 폼 안의 경고 박스 (수정 불가 강조) */
.coupang-warn {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}
.coupang-warn strong {
    color: #b91c1c;
}

/* 상품 행의 마켓 점 배지 (쿠팡/네이버 시각 구분) */
.market-dot {
    display: inline-block;
    font-size: 11px;
    margin-right: 2px;
    vertical-align: middle;
}

/* 쿠팡 QnA AI 답변 비활성 표시 (인라인 자리 차지용) */
.ai-answer-na {
    color: #9ca3af;
    font-size: 13px;
    padding: 0 8px;
    cursor: not-allowed;
}

/* ============================================================
 * 벤더 1:1 문의 알림 버튼 (top-header 내, 2026-05-28)
 * - 스타일 기준: .header-link-btn(상품통합정보 표시 등)과 동일 박스
 * - 텍스트 기본 색상: 노란색(#ffd54f)
 * - 카운트(span): 평소 노란색, 미답변 1+ 일 때 빨강(#ef4444) + 깜빡임
 * - 표기: 벤더1:1문의(0) — 괄호 안 공백 없음
 * ============================================================ */
.vendor-inquiry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    margin: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    color: #ffd54f;                        /* 노란색 — "벤더1:1문의" 글자 */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vendor-inquiry-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.26);
}
.vendor-inquiry-btn:active {
    background: rgba(255,255,255,0.22);
}
.vendor-inquiry-count {
    /* 평소: 노랑(상속). 양쪽 공백 → "( 0 )" 형태 */
    font-weight: 800;
    color: inherit;
    margin: 0 6px;
}
/* 미답변 1 이상: 진한 노랑 + 두꺼움 + 깜빡임 (빨강은 다크 배경에서 잘 안 보여 노랑 유지) */
.vendor-inquiry-count.blink {
    color: #fde047;
    font-weight: 900;
    animation: vendor-inquiry-blink 1s ease-in-out infinite;
}
@keyframes vendor-inquiry-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(1.15); }
}

/* ============================================================
   고객문의(구매 후 문의) / 상품문의 구분 배지
   plan/고객문의기능추가_2026080613.md 3.4·4.5절 — QnA 리스트 탭에
   별도 컬럼 대신 "문의제목" 셀 앞에 인라인으로 붙이는 배지.
   ============================================================ */
.badge-inquiry-type {
    display: inline-block; padding: 1px 6px; margin-right: 4px;
    font-size: 10px; font-weight: 600; border-radius: 4px; vertical-align: middle;
    white-space: nowrap;
}
.badge-inquiry-type.product {
    background: #e0f2fe; color: #075985; border: 1px solid #bae6fd;   /* 상품문의: 파랑 계열 */
}
.badge-inquiry-type.customer {
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;   /* 고객문의: 주황 계열 — 눈에 잘 띄게 */
}

/* ============================================================
   쿠팡 배지 modifier — inquiry_type + source 4갈래 라벨링 (원칙 D)
   plan/쿠팡고객센터문의연동_2026080710.md 3.4·4.7절 —
   기존 .badge-inquiry-type.product/.customer(네이버)는 색상 유지, 쿠팡만 별도 색 부여
   ============================================================ */
.badge-inquiry-type.product.coupang {
    background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe;   /* 쿠팡 상품문의(고객문의): 보라 계열 */
}
.badge-inquiry-type.customer.coupang {
    background: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3;   /* 쿠팡 고객센터문의: 진분홍 계열 (네이버 주황과 구분) */
}

/* ============================================================
   쿠팡 고객센터문의 24시간 답변 데드라인 임박 강조 배지
   plan/쿠팡고객센터문의연동_2026080710.md 4.7절 (3), 0장 #5
   - urgent(빨강, 점멸): 남은 시간 3시간 이하(또는 이미 초과)
   - warning(주황): 남은 시간 3시간 초과 12시간 이하
   ============================================================ */
.badge-deadline {
    display: inline-block; padding: 1px 6px; margin-right: 4px;
    font-size: 10px; font-weight: 700; border-radius: 4px; vertical-align: middle;
    white-space: nowrap;
}
.badge-deadline.warning {
    background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
}
.badge-deadline.urgent {
    background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
    animation: badge-deadline-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-deadline-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ============================================================
   네이버 톡톡(TalkTalk) 전용 탭/말풍선 스타일 (신규)
   plan/네이버톡톡연동_2026080710.md 8.6절
   - 기존 .qna-* 클래스는 전혀 수정하지 않음. 아래는 전부 신규 클래스.
   - 좌측: 대화 스레드 목록(안읽음 뱃지 포함)
   - 우측: 말풍선 대화 뷰 + 입력창/전송버튼
   ============================================================ */

/* 좌측 대화 스레드 목록 아이템 */
.talktalk-thread-item {
    padding: 10px 12px;
    border-bottom: 1px solid #e1e4e8;
    cursor: pointer;
    transition: background 0.15s;
}
.talktalk-thread-item:hover {
    background: #f0f5ff;
}
.talktalk-thread-item.active {
    background: #e0edff;
    border-left: 3px solid #3b82f6;
}
/* 안읽음 메시지가 있는 스레드는 배경을 살짝 강조 */
.talktalk-thread-item.unread {
    background: #fff9f0;
}
.talktalk-thread-item.unread.active {
    background: #e0edff; /* active 상태가 unread보다 우선 */
}
.talktalk-thread-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.talktalk-thread-user-id {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 안읽음 개수 뱃지 — 미답변/미확인을 즉시 알아볼 수 있도록 붉은 계열로 강조 */
.talktalk-unread-badge {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border-radius: 999px;
    flex-shrink: 0;
}
.talktalk-thread-preview {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.talktalk-thread-time {
    margin-top: 2px;
    font-size: 10px;
    color: #94a3b8;
}
.talktalk-empty-message {
    padding: 16px 12px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

/* 우측 답변 패널: 대화 상대 헤더 */
.talktalk-thread-header {
    padding: 10px 12px;
    background: #e9ecef;
    color: #495057;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #e1e4e8;
}

/* 우측 답변 패널: 메시지(말풍선) 목록 영역 — 스크롤 가능, 최신 메시지가 아래로 쌓임 */
.talktalk-message-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f8f9fa;
}
.talktalk-message-row {
    display: flex;
    width: 100%;
}
/* inbound(고객→우리): 왼쪽 정렬 */
.talktalk-message-row.inbound {
    justify-content: flex-start;
}
/* outbound(우리→고객): 오른쪽 정렬 */
.talktalk-message-row.outbound {
    justify-content: flex-end;
}
.talktalk-bubble {
    max-width: 72%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
/* inbound 말풍선: 회색 계열 (기존 프로젝트 중립색 팔레트) */
.talktalk-bubble.inbound {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    color: #334155;
    border-bottom-left-radius: 4px;
}
/* outbound 말풍선: 파란색 계열 (.btn-qna-submit과 동일한 #3b82f6 팔레트로 통일) */
.talktalk-bubble.outbound {
    background: #3b82f6;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.talktalk-bubble-text {
    white-space: pre-wrap;
}
.talktalk-bubble-time {
    margin-top: 4px;
    font-size: 10px;
    text-align: right;
    opacity: 0.7;
}
.talktalk-bubble.inbound .talktalk-bubble-time {
    color: #94a3b8;
}
.talktalk-bubble.outbound .talktalk-bubble-time {
    color: #dbeafe;
}

/* 우측 답변 패널: 메시지 입력창 + 전송 버튼 영역 */
.talktalk-input-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e1e4e8;
    background: #ffffff;
}
.talktalk-input-area textarea#talktalk-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}
.talktalk-input-area button#btn-talktalk-send {
    flex-shrink: 0;
    align-self: flex-end;
}
/* 발신 에러 메시지 — 기존 .qna-answer-error 스타일을 그대로 재사용(id만 다름, 클래스 공유는 허용) */