/**
 * Phase 5: Unified Search Controls (Quick + Advanced)
 * JSSpreadsheet 통합 검색 UI 컨트롤 스타일
 */

/* ============================================
   통합 검색 컨테이너
   ============================================ */

.unified-search-controls {
    padding: 8px 12px;
    background-color: var(--bs-gray-100);
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    margin: 0 1rem 0.5rem 1rem;  /* 좌우 여백 추가, 하단 여백 축소 */
    transition: all 0.3s ease;
}

/* hover 효과 제거
.unified-search-controls:hover {
    background-color: #f1f3f5;
    border-color: var(--bs-gray-400);
}
*/

/* ============================================
   검색 Row 레이아웃 (Phase 6: 한 줄 배치)
   ============================================ */

.search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Divider between Advanced and Rows */
.search-divider {
    width: 1px;
    height: 24px;
    background-color: var(--bs-gray-400);
    margin: 0 4px 0 8px;  /* top right bottom left: Advanced와 간격 4px 추가 */
}

/* ============================================
   Quick Search 섹션
   ============================================ */

.quick-search-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: transparent;
    border-radius: 4px;
    /* border 제거: 개별 요소 border line 제거 */
}

.search-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-label i {
    color: #ffc107;
}

#quick-search-input {
    flex: 0 1 auto;
    width: 100%;
    max-width: 780px;
    min-width: 325px;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#quick-search-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

#toggle-advanced-search {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

#toggle-advanced-search:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

#toggle-advanced-search.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* ============================================
   Advanced Search 섹션 (Phase 6: 한 줄 레이아웃)
   ============================================ */

.advanced-search-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: rgba(13, 110, 253, 0.05);
    border-radius: 4px;
    border: 1px solid rgba(13, 110, 253, 0.2);
    flex: 0 1 auto; /* 콘텐츠 크기만큼만 공간 차지 */
}

.advanced-search-section .search-label {
    color: var(--bs-primary);
}

/* 구분자 스타일 */
.advanced-search-section .separator {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--bs-gray-400);
    padding: 0 8px;
}

/* Column 레이블 스타일 */
.advanced-search-section .column-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-right: 6px;
    white-space: nowrap;
}

/* Source/Target 검색 입력 폼 */
#source-search-input,
#target-search-input {
    flex: 0 1 auto;
    width: 260px;
    min-width: 195px;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#source-search-input:focus,
#target-search-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

/* ============================================
   Phase 3 (2026-06-18): 입력 X 버튼(텍스트만 초기화) + Quick 모드 토글
   ============================================ */

/* 입력 + X 버튼 오버레이 래퍼 */
.search-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
}
/* Quick 입력은 가변폭이라 래퍼가 사이징을 가짐(입력은 width:100%) */
.quick-search-section .search-input-wrap {
    width: 100%;
    max-width: 780px;
    min-width: 325px;
}

/* X 버튼: 입력에 텍스트가 있을 때만 노출. 클릭 시 필터는 유지하고 입력 텍스트만 초기화. */
.search-input-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    font-size: 1rem;
    display: none;
}
/* hover/focus: 짙은 fill(전역 button:hover 등)을 덮어 X 가 항상 보이게 — 옅은 회색 + 진한 글자 */
.search-input-clear:hover,
.search-input-clear:focus,
.search-input-clear:active {
    color: #212529 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 3px;
    box-shadow: none !important;
    outline: none;
}
/* placeholder 가 안 보일 때(=텍스트 입력됨) 만 X 표시 */
.search-input-wrap input:not(:placeholder-shown) ~ .search-input-clear {
    display: inline-block;
}

/* X 버튼 자리만큼 우측 패딩 확보 (ID 선택자 뒤에 와서 padding-right override) */
#quick-search-input,
#source-search-input,
#target-search-input {
    padding-right: 1.8rem;
}

/* Quick Search 모드 토글 — Advanced #search-mode-toggle 과 동일 톤 */
#quick-search-mode-toggle {
    white-space: nowrap;
    font-size: 0.875rem;
    flex: 0 0 auto;
}

/* ============================================
   출처(provenance) 범례 + 필터 칩
   ============================================ */

.prov-filter-section {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background-color: transparent;
    border-radius: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.prov-filter-label {
    color: #495057;
}

.prov-filter-label i {
    color: var(--bs-gray-600, #6c757d);
}

/* 칩: 체크박스 + 색 도트 + 라벨. 범례 겸용이라 항상 도트 색이 보임(off 시 흐리게). */
.prov-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    padding: 3px 8px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #495057;
    background-color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.prov-filter-chip:hover {
    border-color: var(--bs-gray-500, #adb5bd);
}

.prov-filter-checkbox {
    /* 체크박스 자체는 숨기고 도트/배경으로 상태 표현 (accessibility 위해 시각적으로만 숨김) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.prov-chip-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.prov-chip-exact .prov-chip-dot { background-color: var(--bs-success, #198754); }
.prov-chip-fuzzy .prov-chip-dot { background-color: var(--bs-warning, #ffc107); }
.prov-chip-ai .prov-chip-dot { background-color: var(--bs-secondary, #6c757d); }
.prov-chip-manual .prov-chip-dot { background-color: var(--bs-primary, #0d6efd); }

/* OFF(체크 해제) 상태 — 칩을 흐리게 표시해 "숨김 중"임을 시각화 */
.prov-filter-chip:has(.prov-filter-checkbox:not(:checked)) {
    opacity: 0.45;
    background-color: var(--bs-gray-100, #f8f9fa);
}

/* ON 상태 강조 (각 색상 계열의 옅은 배경) */
.prov-chip-exact:has(.prov-filter-checkbox:checked) { background-color: rgba(25, 135, 84, 0.08); border-color: rgba(25, 135, 84, 0.35); }
.prov-chip-fuzzy:has(.prov-filter-checkbox:checked) { background-color: rgba(255, 193, 7, 0.10); border-color: rgba(255, 193, 7, 0.4); }
.prov-chip-ai:has(.prov-filter-checkbox:checked) { background-color: rgba(108, 117, 125, 0.08); border-color: rgba(108, 117, 125, 0.35); }
.prov-chip-manual:has(.prov-filter-checkbox:checked) { background-color: rgba(13, 110, 253, 0.08); border-color: rgba(13, 110, 253, 0.35); }

/* 2026-07-19: 출처 필터 버튼(quick/advanced) + 공유 팝오버 */
.prov-filter-btn { position: relative; }
.prov-filter-btn.prov-filter-btn-active {
    color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, 0.06);
}
.prov-filter-btn-badge:empty { display: none; }
.prov-filter-btn-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 15px; height: 15px; padding: 0 3px;
    font-size: 9px; line-height: 15px; font-weight: 700;
    color: #fff; background: var(--bs-primary, #0d6efd);
    border-radius: 8px; text-align: center;
}
.prov-filter-popover {
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px; padding: 8px; z-index: 3000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 140px;
}
.prov-filter-popover-title { font-size: 11px; color: #6c757d; font-weight: 600; margin-bottom: 2px; }
/* chip 이 라이트 전용(#fff 배경·어두운 텍스트)이라 팝오버도 항상 라이트 고정 — OS 다크모드로
   팝오버만 어두워져 chip 이 안 보이던 문제(2026-07-19) 방지. 앱 자체가 라이트 테마. */
.prov-filter-popover { background: #fff !important; }
.prov-filter-popover .prov-filter-chip { background-color: #fff; color: #495057; }

.prov-filter-checkbox:focus-visible ~ .prov-chip-dot {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Phase 5(A): Advanced 툴바 "적용 열" 드롭다운 버튼 + 메뉴 */
.adv-apply-cols-wrap {
    flex: 0 0 auto;
}
/* 타겟 열 선택 버튼 — 2026-07-19 이후 .target-controls 클러스터의 .target-ctl 로 스타일 위임.
   (기본 gray / .has-selection primary 는 클러스터 규칙에서 처리) */
.adv-apply-cols-wrap { display: inline-flex; }
.adv-apply-cols-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    min-width: 160px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.adv-apply-cols-menu .adv-apply-menu-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary);
    margin-bottom: 6px;
    white-space: nowrap;
}
.adv-apply-cols-menu .form-check {
    margin: 0 0 4px 0;
    white-space: nowrap;
}
.adv-apply-cols-menu .form-check:last-child { margin-bottom: 0; }

/* AND/OR 조건 토글 버튼 */
.condition-toggle {
    min-width: 50px;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid var(--bs-gray-400);
    background-color: white;
    color: #495057;
    transition: all 0.2s ease;
    cursor: pointer;
}

.condition-toggle:hover:not(:disabled) {
    border-color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.05);
    color: var(--bs-primary);
    transform: scale(1.05);
}

.condition-toggle:active:not(:disabled) {
    transform: scale(0.98);
}

/* AND 상태 (기본) */
.condition-toggle[data-operator="AND"] {
    border-color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.condition-toggle[data-operator="AND"]:hover:not(:disabled) {
    background-color: #28a745;
    color: white;
}

/* OR 상태 */
.condition-toggle[data-operator="OR"] {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.condition-toggle[data-operator="OR"]:hover:not(:disabled) {
    background-color: #ffc107;
    color: #212529;
}

/* ============================================
   2026-07-19: Target 컨트롤 클러스터 (세그먼트 pill)
   AND/OR · 출처필터 · 열선택 을 하나의 그룹으로 묶어 개별 사각 버튼 난립 정리.
   방향: compact utility — 얇은 pill 테두리 안에 통일 크기 아이콘 3개. hover 필수 아님.
   ============================================ */
.target-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: #fff;
    border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 8px;
    flex: 0 0 auto;
}
/* 클러스터 내 3개 컨트롤 공통 리셋 — 통일된 정사각 아이콘 셀 */
.target-controls .target-ctl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;   /* 2026-07-20: 전 클러스터 버튼 hover 박스 30px 로 통일 (텍스트/아이콘) */
    height: 28px;
    padding: 0 7px;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 6px;
    color: var(--bs-gray-600, #6c757d);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.target-controls .target-ctl i { font-size: 1rem; line-height: 1; }
.target-controls .target-ctl:hover:not(:disabled) { background: var(--bs-gray-100, #f1f3f5); }
.target-controls .target-ctl:disabled { opacity: 0.45; cursor: not-allowed; }

/* AND/OR — 클러스터 안에서는 무거운 2px 박스 제거, 상태색만 텍스트로 */
.target-controls .condition-toggle {
    min-width: 30px;   /* 2026-07-20: 34→30, 전 버튼 통일 */
    padding: 0 7px;
    border: none;
    background: transparent;
    letter-spacing: 0.3px;
    transform: none;
}
.target-controls .condition-toggle[data-operator="AND"] { color: #1a9e46; background: transparent; }
.target-controls .condition-toggle[data-operator="OR"]  { color: #c79100; background: transparent; }
/* hover 시 텍스트가 흰색으로 사라지지 않도록 — 상태색 유지 + 옅은 tint 배경만 */
.target-controls .condition-toggle[data-operator="AND"]:hover:not(:disabled) { background: rgba(26,158,70,0.12); color: #1a9e46; }
.target-controls .condition-toggle[data-operator="OR"]:hover:not(:disabled)  { background: rgba(199,145,0,0.15); color: #c79100; }

/* case/regex(검색모드) 버튼 — 클러스터 안에서 부트스트랩 2px 박스/긴 직사각형 제거,
   상태색은 텍스트로만, hover 시 흰색 채움 금지(옅은 tint). quick/advanced 공통. */
.target-controls .search-mode-btn {
    min-width: 30px;   /* 2026-07-20: 34→30, 전 버튼 통일 */
    padding: 0 7px;
    border: none;
    background: transparent;
    box-shadow: none;
}
.target-controls .search-mode-btn .mode-icon { font-size: 0.8rem; }
.target-controls .search-mode-btn[data-mode="default"] { color: var(--bs-gray-600, #6c757d); background: transparent; }
.target-controls .search-mode-btn[data-mode="case"]    { color: #0d6efd; background: transparent; }
.target-controls .search-mode-btn[data-mode="regex"]   { color: #fd7e14; background: transparent; }
.target-controls .search-mode-btn:hover:not(:disabled) { background: var(--bs-gray-100, #f1f3f5); box-shadow: none; transform: none; }
.target-controls .search-mode-btn[data-mode="case"]:hover:not(:disabled)  { background: rgba(13,110,253,0.10); color: #0d6efd; }
.target-controls .search-mode-btn[data-mode="regex"]:hover:not(:disabled) { background: rgba(253,126,20,0.10); color: #fd7e14; }

/* 출처필터 활성 / 열선택 선택됨 — 배경 없이 primary 아이콘으로 통일 표시 */
.target-controls .prov-filter-btn.prov-filter-btn-active { color: var(--bs-primary, #0d6efd); background: rgba(13,110,253,0.08); }
.target-controls #adv-apply-cols-btn.has-selection { color: var(--bs-primary, #0d6efd); background: rgba(13,110,253,0.08); }
/* 2026-07-20: 출처필터·열선택 hover — selection 색(파랑) 계열 tint 로 대칭화.
   (case/regex 파랑·주황, AND/OR 녹·황 처럼 "hover=그 버튼 테마색 옅게") */
.target-controls .prov-filter-btn:hover:not(:disabled),
.target-controls #adv-apply-cols-btn:hover:not(:disabled) { background: rgba(13,110,253,0.10); color: var(--bs-primary, #0d6efd); }

/* ============================================
   Search Mode Toggle Button
   ============================================ */

.search-mode-btn {
    min-width: 42px;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid var(--bs-gray-400);
    background-color: white;
    color: #495057;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-mode-btn .mode-icon {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.search-mode-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-mode-btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Default Mode (Case Insensitive) - Light Gray (흐릿한 색상) */
.search-mode-btn[data-mode="default"] {
    border-color: #adb5bd;
    background-color: rgba(173, 181, 189, 0.08);
    color: #adb5bd;
}

.search-mode-btn[data-mode="default"] .mode-icon {
    opacity: 0.7;
}

.search-mode-btn[data-mode="default"]:hover:not(:disabled) {
    background-color: #adb5bd;
    color: white;
}

.search-mode-btn[data-mode="default"]:hover:not(:disabled) .mode-icon {
    opacity: 1;
}

/* Case Sensitive Mode - Blue */
.search-mode-btn[data-mode="case"] {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.search-mode-btn[data-mode="case"]:hover:not(:disabled) {
    background-color: #0d6efd;
    color: white;
}

/* Regex Mode - Orange */
.search-mode-btn[data-mode="regex"] {
    border-color: #fd7e14;
    background-color: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
}

.search-mode-btn[data-mode="regex"]:hover:not(:disabled) {
    background-color: #fd7e14;
    color: white;
}

/* Disabled State */
.search-mode-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   Pagination Selector
   ============================================ */

/* ============================================
   2026-06-13: 네이티브 jspreadsheet 페이지네이션 숨김 + 하단 sticky 푸터
   - 네이티브("Showing page X of Y" + 1 2 3 4)는 숨기고
   - 상단 툴바와 동일 컨트롤을 그리드 스크롤 컨테이너 하단에 sticky 로 고정.
   - 상↔하단은 .ws-* 클래스 기반으로 동기화(workspace_pagination.js).
   ============================================ */
.jss_pagination {
    display: none !important;
}

.ws-pagination-footer {
    /* .spreadsheet-container(스크롤 영역) 밖, .main-editor 직계 마지막 자식 = 진짜 하단 푸터.
       내부/외부 스크롤이 모두 위에 있어 겹치지 않음. flex-shrink:0 으로 항상 표시. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;  /* 상단 .toolbar-group(0.5rem) 밀도에 맞춤 — 넓은 간격이 더 커 보이는 현상 제거 */
    flex-wrap: wrap;
    padding: 5px 200px 5px 12px;  /* 우측 200px 여백 — 엑셀 컨테이너 가로 스크롤바와 겹치지 않게 네비게이터를 왼쪽으로 */
    border-top: 1px solid var(--border-color, #dee2e6);
    background-color: #f8f9fa;
    font-size: 0.75rem;  /* 12px — 상단 .editor-toolbar 기본 컨텍스트. footer 기본 14px 상속 차단 */
}
/* 2026-07-20: 크기는 공통 토큰(:root --wsnav-*)이 상단과 동일하게 처리.
   여기선 footer 고유 *레이아웃*(간격/보더/패딩)만 유지 — em 상속 하드카피 제거. */
.ws-pagination-footer .pagination-selector-wrapper {
    padding: 0;
    gap: 6px;
}
.ws-pagination-footer .ws-pagination-selector {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
}
.ws-pagination-footer .page-navigator-wrapper {
    padding: 0;
    margin-left: 0;
}

/* ============================================
   Reset Filters 버튼 래퍼 (Quick Search와 Pagination 사이)
   ============================================ */

.reset-filters-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background-color: transparent;
    border-radius: 4px;
    /* border 제거 */
}

.reset-filters-wrapper #grid-filter-reset-btn {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.reset-filters-wrapper #grid-filter-reset-btn:hover:not(:disabled) {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Pagination Selector 래퍼
   ============================================ */

.pagination-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 8px 8px;  /* right padding 축소 */
    background-color: transparent;
    border-radius: 4px;
    /* border 제거 */
}

#pagination-selector {
    min-width: 90px;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#pagination-selector:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

#pagination-selector:hover:not(:disabled) {
    border-color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.05);
}

#pagination-selector:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-600);
}

/* ============================================
   Page Navigator (Compact) - 상단 페이지 네비게이터
   ============================================ */

/* ============================================
   2026-07-20: 페이지네이터 크기 토큰 (상단 툴바 ↔ 하단 푸터 공통 단일 원천)
   기존엔 상단(v4/components.css 의 .workspace-v4 .unified-search-controls 규칙)과
   하단 푸터(.ws-pagination-footer)가 *같은 rem 값을 각자 하드코딩* → 조용히 어긋날
   위험. 아래 토큰 1벌을 양쪽이 소비하도록 통일. 값은 기존 상단 실제값과 동일.
   (CSS 커스텀 프로퍼티는 전역 해석 — components.css 가 먼저 로드돼도 이 :root 값 참조 가능) */
:root {
    --wsnav-gap: 0.25rem;
    --wsnav-btn-box: 26px;        /* 버튼 정사각 박스 */
    --wsnav-btn-font: 0.58rem;    /* 버튼 폰트 (9.28px) */
    --wsnav-btn-pad: 0 0.37rem;   /* 버튼 좌우 패딩 */
    --wsnav-icon-font: 0.65rem;   /* chevron 아이콘 (10.4px) */
    --wsnav-indicator-font: 0.62rem;  /* "1/2" (9.92px) */
    --wsnav-label-font: 0.68rem;  /* "Rows:" 라벨 (10.88px) */
    --wsnav-select-font: 0.68rem;
    --wsnav-select-minw: 4.2rem;
}

.page-navigator-wrapper {
    display: flex;
    align-items: center;
    gap: var(--wsnav-gap);
    padding: 4px 8px 4px 0;  /* left padding 제거 */
    background-color: transparent;
    border-radius: 4px;
    /* border 제거 */
    margin-left: 0;  /* margin 제거 */
}

.page-nav-btn {
    padding: var(--wsnav-btn-pad);
    min-width: var(--wsnav-btn-box);
    height: var(--wsnav-btn-box);
    font-size: var(--wsnav-btn-font);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.page-nav-btn i {
    font-size: var(--wsnav-icon-font);
}

.page-nav-btn:hover:not(:disabled) {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-indicator {
    font-size: var(--wsnav-indicator-font);
    font-weight: 500;
    color: var(--bs-gray-700);
    padding: 0 6px;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}

#current-page {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Rows 라벨/셀렉터 — 상단·하단 공통 토큰 (.pagination-selector-wrapper 스코프 한정) */
.pagination-selector-wrapper .search-label {
    font-size: var(--wsnav-label-font);
}
.ws-pagination-selector {
    font-size: var(--wsnav-select-font);
    min-width: var(--wsnav-select-minw);
}

/* ============================================
   레거시 컨테이너 (하위 호환성)
   ============================================ */

.grid-controls {
    padding: 12px;
    background-color: var(--bs-gray-100);
    border-radius: 4px;
    border: 1px solid var(--bs-gray-300);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.search-container {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================
   검색 입력창
   ============================================ */

#grid-search-input {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-gray-400);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#grid-search-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

#grid-search-input::placeholder {
    color: var(--bs-gray-500);
    font-style: italic;
}

/* ============================================
   버튼 스타일
   ============================================ */

.grid-controls .btn {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
}

.grid-controls .btn i {
    font-size: 1rem;
}

/* Search 버튼 */
#grid-search-btn {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

#grid-search-btn:hover:not(:disabled) {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

#grid-search-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Clear 버튼 */
#grid-search-reset-btn {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

#grid-search-reset-btn:hover:not(:disabled) {
    background-color: #5c636a;
    border-color: #565e64;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

/* Reset Filters 버튼 */
#grid-filter-reset-btn {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

#grid-filter-reset-btn:hover:not(:disabled) {
    background-color: #5c636a;
    border-color: #565e64;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

/* ============================================
   Disabled 상태
   ============================================ */

.grid-controls input:disabled,
.grid-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.grid-controls input:disabled {
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-600);
}

.grid-controls button:disabled {
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   활성화 애니메이션
   ============================================ */

.grid-controls.active {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   검색 결과 하이라이트
   ============================================ */

/* JSSpreadsheet 검색 결과 셀 강조 */
.jss td.jss-search-result {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107 !important;
    animation: searchPulse 0.5s ease-in-out;
}

@keyframes searchPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* ============================================
   반응형 디자인
   ============================================ */

@media (max-width: 768px) {
    .search-container {
        flex-direction: column;
        align-items: stretch;
    }

    #grid-search-input {
        max-width: 100%;
        min-width: 100%;
    }

    .grid-controls .btn {
        width: 100%;
        justify-content: center;
    }

    .grid-controls {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .grid-controls .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    #grid-search-input {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
}

/* ============================================
   접근성 (Accessibility)
   ============================================ */

/* 키보드 포커스 표시 */
#grid-search-input:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.grid-controls .btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .grid-controls {
        border-width: 2px;
    }

    #grid-search-input {
        border-width: 2px;
    }

    .grid-controls .btn {
        border-width: 2px;
    }
}

/* ============================================
   다크 모드 지원 (선택적)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .grid-controls {
        background-color: #2b3035;
        border-color: #495057;
    }

    .grid-controls:hover {
        background-color: #343a40;
        border-color: #6c757d;
    }

    #grid-search-input {
        background-color: #212529;
        border-color: #495057;
        color: #f8f9fa;
    }

    #grid-search-input::placeholder {
        color: #adb5bd;
    }
}

/* ============================================
   Phase 4: Column-Specific Search 스타일
   ============================================ */

/* 검색 범위 선택 컨테이너 */
.search-scope-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    padding: 4px 8px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    border: 1px solid var(--bs-gray-300);
}

.search-scope-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0;
    white-space: nowrap;
}

.search-scope-options {
    display: flex;
    gap: 12px;
    align-items: center;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    color: #495057;
    margin-bottom: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.radio-inline:hover {
    color: var(--bs-primary);
}

.radio-inline input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bs-primary);
}

.radio-inline input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.radio-inline input[type="radio"]:disabled + span {
    color: var(--bs-gray-500);
}

/* 선택된 라디오 버튼 강조 */
.radio-inline input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--bs-primary);
}

/* ============================================
   Phase 4: 반응형 디자인
   ============================================ */

@media (max-width: 768px) {
    .search-scope-selector {
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
        justify-content: space-between;
    }

    .search-scope-options {
        gap: 8px;
    }

    .radio-inline {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .search-scope-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-scope-label {
        width: 100%;
        margin-bottom: 4px;
    }

    .search-scope-options {
        width: 100%;
        justify-content: space-between;
    }

    .radio-inline {
        font-size: 0.75rem;
        gap: 2px;
    }

    .radio-inline input[type="radio"] {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   Phase 4: 다크 모드 지원
   ============================================ */

@media (prefers-color-scheme: dark) {
    .search-scope-selector {
        background-color: rgba(33, 37, 41, 0.7);
        border-color: #495057;
    }

    .search-scope-label {
        color: #adb5bd;
    }

    .radio-inline {
        color: #adb5bd;
    }

    .radio-inline:hover {
        color: #0dcaf0;
    }

    .radio-inline input[type="radio"]:checked + span {
        color: #0dcaf0;
    }
}

/* ============================================
   Phase 2: Search & Replace Modal Styles
   ============================================ */

.search-replace-container {
    padding: 1rem;
    background-color: #ffffff;
}

/* 검색 정보 섹션 */
.search-info-section h6,
.replace-input-section h6,
.preview-section h6 {
    color: #495057;
    border-bottom: 2px solid var(--bs-gray-300);
    padding-bottom: 0.5rem;
}

.search-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
}

.info-value {
    font-size: 0.95rem;
    color: #212529;
}

/* Preview 영역 */
.preview-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
}

.preview-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-value {
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    word-break: break-word;
    white-space: pre-wrap;   /* Option B: 셀 값의 줄바꿈(\n)을 그대로 표시 */
    min-height: 60px;
}

/* Option B: 검색/교체 textarea — 기본 높이 60px. 패널 리사이즈는 width 만 변경(flex),
   높이는 사용자가 우측 하단 그립으로 수동 조절만 가능(resize:vertical, 패널과 무관). */
.srp-search-ta,
.srp-replace-ta {
    height: 60px;
    min-height: 38px;
    resize: vertical;    /* 우측 하단 드래그 그립 — 사용자 수동 세로 조절 */
    overflow-y: auto;    /* 내용 길면 내부 스크롤 */
    line-height: 1.4;
}

.preview-value.before {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
}

.preview-value.after {
    background-color: #d1e7dd;
    border: 1px solid #0f5132;
}

.preview-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 매칭 하이라이트 */
.preview-value mark {
    background-color: #ffc107;
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    font-weight: 600;
}

/* Replace 플로팅 패널 — RAG/편집이력 패널 수준으로 전체 텍스트 축소 (기본 16px → ~13px) */
#search-replace-panel { font-size: 0.8125rem; }
#search-replace-panel .srp-title,
#search-replace-panel h6 { font-size: 0.85rem; }
#search-replace-panel .form-control,
#search-replace-panel .form-select,
#search-replace-panel .btn { font-size: 0.8125rem; }
#search-replace-panel .btn-sm,
#search-replace-panel .form-select-sm,
#search-replace-panel .form-control-sm { font-size: 0.75rem; }
#search-replace-panel .form-text,
#search-replace-panel .small,
#search-replace-panel .info-label,
#search-replace-panel .form-check-label { font-size: 0.75rem; }
#search-replace-panel .preview-value { font-size: 0.8rem; }
#search-replace-panel .preview-label { font-size: 0.72rem; }

/* 줄바꿈 기호(↵) — Preview 에서 줄바꿈 위치 가시화 */
#search-replace-panel .srp-nl {
    color: #0d6efd;
    opacity: 0.5;
    font-size: 0.85em;
    margin: 0 1px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .search-info-grid {
        grid-template-columns: 1fr;
    }

    .preview-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .preview-arrow {
        transform: rotate(90deg);
    }

    .preview-value {
        min-height: 80px;
    }
}