/* ==============================
   스타일 패널 공통 CSS
   ============================== */

/* ==============================
   그리드 레이아웃 유틸리티
   ============================== */
.grid-column-2 {
    grid-column: span 2;
}

/* ==============================
   테이블 빈 상태 안내문
   ============================== */
.table-empty-placeholder td {
    text-align: center;
    white-space: normal;
}

.table-empty-placeholder .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0;
    width: 100%;
}

.table-empty-placeholder .empty-content .form-desc {
    white-space: nowrap;
}

/* ==============================
   색상 팔레트 미리보기 - 부드러운 그라데이션
   ============================== */

/* 기존 작은 팔레트 (하위 호환성) */
.palette-preview-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.palette-preview {
    display: flex;
    flex-shrink: 0;
    width: 100px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--krds-color-border-normal, #464c53);
}

/* 새로운 큰 팔레트 (피그마 스타일) */
.palette-container {
    width: 100%;
}

.palette-preview-large {
    width: 100%;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--krds-color-border-normal, #464c53);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 그라데이션 바 스타일 */
.palette-preview .gradient-bar,
.palette-preview-large .gradient-bar {
    width: 100%;
    height: 100%;
}

/* 색상 박스 스타일 */
.palette-preview .color-box {
    flex: 1;
    height: 100%;
}

/* 색상 팔레트 셀렉트 */
.color-palette-select {
    flex: 1;
}

/* ==============================
   구간 값 테이블 스타일
   ============================== */

/* 테이블 래퍼 */
.has-table-wrapper .krds-table-wrap {
    background-color: transparent;
}

/* 테이블 기본 스타일 */
.has-table-wrapper .table.dark {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 테이블 헤더 */
.has-table-wrapper .table.dark thead th {
    background-color: var(--krds-high-contrast-color-surface-white, #000000);
    color: var(--krds-light-color-text-basic-inverse, #fff);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
    white-space: nowrap;
}

/* 테이블 바디 셀 */
.has-table-wrapper .table.dark tbody td {
    background-color: var(--krds-high-contrast-color-divider-gray-light, #33363d);
    color: var(--krds-light-color-text-basic-inverse, #fff);
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
}

/* 테이블 행 hover */
.has-table-wrapper .table.dark tbody tr:hover td {
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
}

/* ==============================
   구간 값 테이블 input 스타일
   ============================== */

/* 숫자 input 필드 */
.has-table-wrapper .table.dark tbody td input[type="number"] {
    width: 100%;
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    color: var(--krds-light-color-text-basic-inverse, #fff);
    border: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* 숫자 input spinner 제거 */
.has-table-wrapper .table.dark tbody td input[type="number"]::-webkit-outer-spin-button,
.has-table-wrapper .table.dark tbody td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* input focus 스타일 */
.has-table-wrapper .table.dark tbody td input[type="number"]:focus {
    outline: none;
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

/* 색상 input 필드 */
.has-table-wrapper .table.dark tbody td input[type="color"] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
    border-radius: 4px;
    cursor: pointer;
    background-color: transparent;
}

.has-table-wrapper .table.dark tbody td input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.has-table-wrapper .table.dark tbody td input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* ==============================
   심볼 설정 버튼 스타일
   ============================== */

/* 심볼 버튼 기본 스타일 */
.has-table-wrapper .table.dark .symbol-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    border: 1px solid var(--krds-high-contrast-color-surface-disabled, #464c53);
    border-radius: 4px;
    color: var(--krds-light-color-text-basic-inverse, #fff);
    cursor: pointer;
    transition: all 0.2s ease;
}

.has-table-wrapper .table.dark .symbol-settings-btn:hover {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

/* 사용자가 수정한 심볼 버튼 */
.has-table-wrapper .table.dark .symbol-settings-btn.user-modified {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

/* 심볼 버튼 아이콘 */
.has-table-wrapper .table.dark .symbol-settings-btn i {
    font-size: 12px;
    color: inherit;
}

/* 심볼 아이콘 이미지 */
.has-table-wrapper .table.dark .symbol-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ==============================
   색상 반전 버튼 스타일
   ============================== */
.palette-reverse-btn {
    flex-shrink: 0;
}

.palette-reverse-btn.is-active {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
    color: #fff;
}

/* ==============================
   팔레트 드롭다운 옵션 스타일
   ============================== */
.dropdown-item.palette-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.palette-preview-bar {
    flex-shrink: 0;
    width: 64px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--krds-color-border-normal, #464c53);
}

.palette-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==============================
   입력 필드 + 단위 래퍼
   ============================== */
.input-with-unit {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

/* ==============================
   색상 선택 영역 공통 스타일
   ============================== */
.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* ==============================
   마커 아이콘 그리드 스타일
   ============================== */

/* 마커 아이콘 박스 (테두리 컨테이너) */
.marker-icon-box {
    border: 1px solid var(--krds-color-border-normal, #464c53);
    border-radius: 8px;
    padding: 12px;
}

/* 아이콘 그리드 레이아웃 */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* 아이콘 버튼 기본 스타일 */
.icon-grid .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
}

/* 아이콘 버튼 활성화 상태 */
.icon-grid .icon-btn.active {
    background-color: var(--krds-color-light-primary-50, #3b82f6);
    border-color: var(--krds-color-light-primary-50, #3b82f6);
}

/* 마커 도형 스타일 */
.marker-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.marker-shape svg {
    width: 100%;
    height: 100%;
}

/* 사용자 업로드 아이콘 이미지 */
.icon-grid .icon-btn .icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ==============================
   심볼 편집 Overlay 스타일
   ============================== */
.symbol-edit-overlay {
    z-index: 10;
    overflow-y: auto;
    height: 100%;
}

/* ==============================
   유형별 스타일 테이블 체크박스 오버라이드
   ============================== */
#valueStyleTableBody .krds-form-check {
    display: block !important;
    align-items: initial !important;
}

#valueStyleTable .krds-form-check medium {
    display: block !important;
}

#leftExpandPanel .town-list {
    position: relative;
}

/* ==============================
   라벨 위치 방향 선택기 스타일 (3x3 Grid)
   ============================== */
.label-direction-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.label-direction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    width: 72px;
    height: 72px;
    padding: 6px;
    background-color: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    border: 1px solid var(--krds-color-border-normal, #464c53);
    border-radius: 8px;
    flex-shrink: 0;
}

.direction-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background-color: var(--krds-high-contrast-color-surface-gray-normal, #26292e);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.direction-btn::after {
    content: '';
    width: 4px;
    height: 4px;
    background-color: var(--krds-color-border-normal, #464c53);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.direction-btn:hover {
    background-color: var(--krds-high-contrast-color-divider-gray-light, #33363d);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

.direction-btn:hover::after {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
}

.direction-btn.active {
    background-color: var(--krds-light-color-element-primary, #3b82f6);
    border-color: var(--krds-light-color-element-primary, #3b82f6);
}

.direction-btn.active::after {
    background-color: #ffffff;
    width: 6px;
    height: 6px;
}

.direction-btn[data-direction="C"]::after {
    width: 6px;
    height: 6px;
    border-radius: 2px;
}

/* 오프셋 입력 필드 컨테이너 조정 */
.label-offset-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==============================
   줌/축척 정보 스타일
============================== */
.zoom-scale-info {
    gap: 12px;
    padding: 8px 12px;
    background: var(--krds-high-contrast-color-surface-gray-subtle, #1e2124);
    border: 1px solid var(--krds-color-border-normal, #464c53);
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--krds-pc-font-size-label-xsmall);
    color: var(--krds-light-color-text-basic-tertiary, #9ca3af);
}

.zoom-scale-info strong {
    color: var(--krds-color-light-secondary) !important;
    font-weight: 700;
    margin-left: 4px;
}

.value-list-title {
    justify-content: space-between;
}