/* 공통 컨테이너 스타일 - 크기 축소 */
.encoding-list-container {
    width: 100%;
    min-width: 250px;   /* 280px → 250px */
    max-width: 300px;   /* 350px → 300px */
    margin: 8px 0 0 0;
    padding: 0;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    list-style: none;
    
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* 공통 아이템 스타일 */
.encoding-item {
    border-bottom: 1px solid #f3f4f6;
}

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

/* 라디오 버튼 숨기기 */
.encoding-item input[type="radio"] {
    display: none;
}

/* 공통 라벨 스타일 - 패딩 축소 */
.encoding-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 10px;  /* 8px 12px → 6px 10px */
    font-size: 12px;    /* 13px → 12px */
    color: #374151;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.encoding-item label:hover {
    background-color: #f9fafb;
    color: #1f2937;
}

/* 커스텀 라디오 버튼 - 크기 축소 */
.radio-custom {
    width: 12px;        /* 14px → 12px */
    height: 12px;       /* 14px → 12px */
    border: 2px solid #d1d5db;
    border-radius: 50%;
    margin-right: 5px;  /* 6px → 5px */
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.radio-custom::after {
    content: '';
    width: 5px;         /* 6px → 5px */
    height: 5px;        /* 6px → 5px */
    border-radius: 50%;
    background: #3b82f6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

/* 선택된 상태 */
.encoding-item input[type="radio"]:checked + label {
    background-color: #f0f9ff;
    color: #1e40af;
    font-weight: 500;
}

.encoding-item input[type="radio"]:checked + label .radio-custom {
    border-color: #3b82f6;
}

.encoding-item input[type="radio"]:checked + label .radio-custom::after {
    transform: translate(-50%, -50%) scale(1);
}

/* 호버 효과 */
.encoding-item label:hover .radio-custom {
    border-color: #9ca3af;
}

/* 텍스트 스타일 */
.encoding-text {
    user-select: none;
}

.encoding-label-tip {
    font-size: 10px;    /* 11px → 10px */
    color: #888;
    margin-left: 2px;   /* 3px → 2px */
}

/* 포커스 스타일 */
.encoding-item input[type="radio"]:focus + label .radio-custom {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* 업로드 카드 스타일 - 패딩 축소 및 위치 정렬 */
.upload-card {
    background: #fff;
    padding: 10px;      /* 12px → 10px */
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-bottom: 10px; /* 12px → 10px */
    display: inline-block;
    vertical-align: top;
}

/* 제목 스타일 통일 */
.upload-card strong {
    font-size: 13px;    /* 14px → 13px */
    color: #374151;
    display: block;
    margin-bottom: 6px; /* 8px → 6px */
}

/* 안내문구 - 크기 축소 */
.encoding-hint {
    font-size: 10px;    /* 11px → 10px */
    color: #888;
    margin-top: 4px;    /* 6px → 4px */
    padding-left: 1px;  /* 2px → 1px */
    text-align: center;
}

/* 두 박스를 나란히 배치하기 위한 컨테이너 */
.form-section {
    display: flex;
    gap: 14px;          /* 16px → 14px */
    align-items: flex-start;
    flex-wrap: wrap;
}

.form-section .upload-card {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/*
========================================
팝업 표시 설정 카드 (최종 수정 버전)
========================================
*/

/* 1. 카드 전체 컨테이너 */
.pop-up-settings {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

/* 2. 각 필드 영역 컨테이너 (라벨과 풀을 감쌈) */
.field-container {
    margin-bottom: 15px;
}
.pop-up-settings .field-container:last-child {
    margin-bottom: 0;
}

/* 3. 각 필드 영역의 라벨(제목) */
.field-container label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

/* 4. 컬럼 태그들이 담길 공간(Pool) */
.column-pool {
    /* [핵심] Flexbox 레이아웃 적용 */
    display: flex;

    /* [핵심] 세로 가운데 정렬 */
    align-items: center;
    
    /* 
      [핵심] 가로 가운데 정렬 문제 해결:
      내용이 넘칠 때만 스크롤이 생기게 하면서, 넘치지 않을 때는 가운데 정렬을 유지합니다.
    */
    justify-content: center;

    /* [유지] 가로 스크롤 설정 */
    overflow-x: auto;
    overflow-y: hidden;

    /* 태그들 사이의 간격 */
    gap: 6px;
    
    /* 나머지 디자인 스타일 */
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px;
    min-height: 42px;
    box-sizing: border-box;

    /* 스크롤바가 생길 때를 대비한 아래쪽 여유 공간 */
    padding-bottom: 12px;
}

/* 
  [핵심 추가] 내용이 넘쳐서 스크롤이 활성화될 때만
  justify-content를 왼쪽 정렬로 변경하여 스크롤 사용성을 개선합니다. 
*/
.column-pool:has(button:nth-child(10)) { /* 예: 버튼이 10개 이상일 때 */
    justify-content: flex-start;
}


/* 5. 개별 컬럼 태그 스타일 */
.column-tag {
    flex-shrink: 0;
    background-color: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
    white-space: nowrap;
}
.column-tag:hover {
    background-color: #e5e7eb;
}

/* 6. 선택된 필드 공간 및 태그 스타일 */
.selected-pool {
    border-color: #a5b4fc;
}
.selected-pool .column-tag {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4338ca;
}
.selected-pool .column-tag:hover {
    background-color: #4338ca;
}

/* 7. 커스텀 스크롤바 스타일 */
.column-pool::-webkit-scrollbar {
    height: 6px;
}
.column-pool::-webkit-scrollbar-track {
    background: transparent;
}
.column-pool::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}
.column-pool::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}