/* 캐릭터 비교 페이지 전용 스타일 */

.compare-container {
    padding: 20px 10px;
    max-width: 100%;
    box-sizing: border-box;
}

.compare-header {
    margin-bottom: 10px;
}

.compare-header h1 {
    font-size: 32px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

#compareHelpBtn {
    flex-shrink: 0 !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    align-self: flex-end;
    margin-bottom: 4px;
}

#compareHelpBtn:hover {
    background-color: #6b7280 !important;
    transform: scale(1.1);
}

.compare-header p {
    color: #666;
    font-size: 16px;
}

.compare-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin-top: 24px;
}

.compare-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.compare-card-wrap .card + .compare-card-actions {
    margin-top: -4px;
}

.compare-card-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.compare-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 223px;
    border-bottom: 1px solid #999;
    background: transparent;
}

.compare-input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 8px 10px 8px 0;
    font-size: 14px;
    background: transparent;
    outline: none;
    caret-color: transparent;
}

.compare-input::placeholder {
    color: #999;
}

.compare-input-search {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: -12px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.compare-input-search:hover {
    color: #666;
}

/* 매니저 .card 구조 그대로 사용, 빈 카드 스타일 */
.compare-card-wrap .card {
    min-height: 416px;
    position: relative;
}

.compare-card-wrap .card .character-image-container {
    min-height: 248.84px;
    height: 248.84px;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.compare-card-empty {
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.compare-card-empty .character-image-container {
    border-style: dashed;
    border-color: #ddd;
    background: #fafafa;
}

.compare-card-empty:hover .character-image-container {
    border-color: #bbb;
    background: #f5f5f5;
}

.compare-card-empty .compare-card-add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    color: #999;
    font-size: 24px;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.compare-card-empty:hover .compare-card-add {
    border-color: #888;
    color: #666;
    background: #f8f8f8;
}

.compare-card-placeholder {
    visibility: hidden;
    font-size: 14px;
    line-height: 1.4;
}

.compare-card-placeholder.name {
    font-size: 16px;
}

/* 캐릭터 카드 새로고침 버튼 - X 버튼과 동일 디자인, hover 시 연한 하늘색 */
.compare-card-refresh-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    z-index: 2;
    transition: box-shadow 0.2s, transform 0.15s;
}

.compare-card-refresh-btn:hover {
    background: #f8fcff;
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.compare-card-refresh-btn i {
    pointer-events: none;
}

/* 캐릭터 카드 선택 취소 X 버튼 - 흰색 배경, hover 시 연한 붉은색 */
.compare-card-clear-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    z-index: 3;
    transition: box-shadow 0.2s, transform 0.15s;
}

.compare-card-clear-btn:hover {
    background: #fef8f8;
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.compare-card-clear-btn i {
    pointer-events: none;
}

/* 캐릭터 카드 밖 하단 액션 버튼 (스킬복사 / 상세화면 이동) - 기본으로 항상 표시 */
.compare-card-wrap .compare-card-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 4px 0;
    padding: 0;
    width: 100%;
    max-width: 223px;
}

.compare-card-action-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.compare-card-action-btn:hover {
    background: #fff;
    border-color: #adb5bd;
    color: #212529;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.compare-card-action-btn:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.compare-card-action-btn i {
    font-size: 11px;
    opacity: 0.85;
}

.compare-card-skill-copy-btn:hover,
.compare-card-detail-btn:hover {
    background: #e7f1ff;
    border-color: #6ea8fe;
    color: #0d6efd;
}

/* 캐릭터 카드 로딩 오버레이 */
.compare-card-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.compare-card-loading-overlay i {
    font-size: 20px;
    color: #4a5568;
}

/* 비교 탭 섹션 */
.compare-tab-section {
    margin-top: 6px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 탭은 style_statistics.css의 statistics-tab-* 클래스 사용 */

.compare-tab-section .statistics-tab-content {
    padding: 20px;
}

.compare-tab-hint {
    color: #999;
    font-size: 15px;
    margin: 0;
    padding: 20px;
    text-align: center;
}

.compare-skill-table-wrap {
    overflow-x: auto;
}
/* 강화/마부 테이블: 마지막 행 하단 보더가 overflow에 잘리지 않도록 */
#compareEquipmentEnchantTableWrap {
    padding-bottom: 4px;
}

/* 스킬·개화·강화 탭 헤더 - 장비 탭 디자인과 동일하게 맞춤 */
.compare-tab-section .compare-skill-table thead th {
    background: #f8fafc !important;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.compare-skill-table thead th:first-child {
    border-left: none;
}
.compare-skill-table thead th:last-child {
    border-right: none;
}

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

.compare-skill-table th,
.compare-skill-table td {
    padding: 6px 6px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}
.compare-skill-table th {
    background: #f8fafc;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.compare-skill-table th:first-child {
    border-left: none;
}
.compare-skill-table th:last-child {
    border-right: none;
}

/* 캐릭터명 헤더 - 길면 ... 말줄임, 가운데 정렬 */
#compareSkillLeftHeader,
#compareSkillRightHeader,
#compareSkillEvolutionLeftHeader,
#compareSkillEvolutionRightHeader,
#compareSkillEnhancementLeftHeader,
#compareSkillEnhancementRightHeader,
.compare-equipment-table .compare-equip-side-header,
.compare-equipment-enchant-table .compare-equip-side-header {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center !important;
}

.compare-skill-table th:nth-child(1),
.compare-skill-table td:nth-child(1) {
    text-align: center;
    min-width: 36px;
    max-width: 42px;
    padding-left: 3px;
    padding-right: 3px;
}
.compare-skill-table th:nth-child(2) {
    text-align: center;
}
.compare-skill-table th:nth-child(3),
.compare-skill-table th:nth-child(4),
.compare-skill-table th:nth-child(5) {
    text-align: center;
    min-width: 50px;
}

.compare-skill-table td:nth-child(1),
.compare-skill-table td:nth-child(3),
.compare-skill-table td:nth-child(4),
.compare-skill-table td:nth-child(5) {
    text-align: center;
}

.compare-skill-table td:nth-child(2) {
    text-align: left;
}

.compare-skill-table .skill-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compare-skill-table .skill-cell img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.compare-skill-diff-higher {
    color: #2196f3;
}

.compare-skill-diff-lower {
    color: #dc3545;
}

.compare-skill-diff-same {
    color: #6c757d;
}

.compare-skill-level-diff {
    font-weight: 700;
}

/* 스킬 탭: 기본(PC)에서는 레벨·차이 분리 표시, 모바일에서만 "5 (+5)" 형식 */
.compare-skill-table#compareSkillTable .skill-left-mobile,
.compare-skill-table#compareSkillTable .skill-right-mobile {
    display: none;
}

/* 스킬 강화/개화 탭 - 컬럼 구분 */
.compare-skill-enhancement-table th,
.compare-skill-enhancement-table td,
.compare-skill-evolution-table th,
.compare-skill-evolution-table td {
    text-align: center;
}

/* 개화/강화 공통 - 레벨 컬럼 (스킬탭과 동일) */
.compare-skill-enhancement-table .enhance-col-level,
.compare-skill-evolution-table .enhance-col-level {
    min-width: 36px;
    max-width: 42px;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}

/* 개화/강화 공통 - 스킬 컬럼 (아이콘 32px + 간격 6px, 캐릭터 화면 ico_skill 40px 참고) */
.compare-skill-enhancement-table .enhance-col-skill .skill-cell,
.compare-skill-evolution-table .enhance-col-skill .skill-cell {
    gap: 6px;
}
.compare-skill-enhancement-table .enhance-col-skill .skill-cell img,
.compare-skill-evolution-table .enhance-col-skill .skill-cell img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.compare-skill-enhancement-table .enhance-col-skill,
.compare-skill-evolution-table .enhance-col-skill {
    min-width: 86px; /* 아이콘 32 + gap 6 + 이름 최소 */
}

/* 개화/강화 공통 - VP1/강화1, VP2/강화2 (캐릭터 minWidth 60 참고, 헤더 줄바꿈 방지) */
.compare-skill-enhancement-table th:nth-child(3),
.compare-skill-enhancement-table td:nth-child(3),
.compare-skill-enhancement-table th:nth-child(4),
.compare-skill-enhancement-table td:nth-child(4),
.compare-skill-enhancement-table th:nth-child(5),
.compare-skill-enhancement-table td:nth-child(5),
.compare-skill-enhancement-table th:nth-child(6),
.compare-skill-enhancement-table td:nth-child(6),
.compare-skill-evolution-table th:nth-child(3),
.compare-skill-evolution-table td:nth-child(3),
.compare-skill-evolution-table th:nth-child(4),
.compare-skill-evolution-table td:nth-child(4),
.compare-skill-evolution-table th:nth-child(5),
.compare-skill-evolution-table td:nth-child(5),
.compare-skill-evolution-table th:nth-child(6),
.compare-skill-evolution-table td:nth-child(6) {
    min-width: 48px; /* 아이콘 26px + 헤더 '강화2' 줄바꿈 방지 */
    white-space: nowrap;
}

/* 스킬 컬럼(아이콘+이름) PC에서 왼쪽 정렬 */
.compare-skill-enhancement-table td.enhance-col-skill,
.compare-skill-evolution-table td.enhance-col-skill {
    text-align: left;
}
.compare-skill-enhancement-table .enhance-col-skill .skill-cell,
.compare-skill-evolution-table .enhance-col-skill .skill-cell {
    justify-content: flex-start;
}

.compare-skill-enhancement-table .enhance-col-left,
.compare-skill-evolution-table .enhance-col-left {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.compare-skill-enhancement-table .enhance-col-right,
.compare-skill-evolution-table .enhance-col-right {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* 개화/강화 서브헤더 - 장비 compare-equip-header-sub 스타일 */
.compare-skill-enhancement-table .enhance-sub-header th,
.compare-skill-evolution-table .enhance-sub-header th {
    background: #fafbfc !important;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    padding: 5px 6px;
}

.compare-enhancement-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
}

/* 장비 비교 테이블 - 조율/잠식/흑아 비교용 */
.compare-equipment-table thead th,
.compare-equipment-table td {
    border: 1px solid #e2e8f0;
}
.compare-equipment-table thead th:first-child,
.compare-equipment-table td:first-child {
    border-left: none;
}
.compare-equipment-table thead th:last-child,
.compare-equipment-table td:last-child {
    border-right: none;
}
.compare-equipment-table .compare-equip-header-main th {
    background: #f8fafc !important;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
    padding: 6px 6px;
    border-bottom: 1px solid #e2e8f0;
}
.compare-equipment-table .compare-equip-header-sub th {
    background: #fafbfc !important;
    font-weight: 500;
    font-size: 12px;
    color: #64748b;
    padding: 5px 6px;
}
.compare-equipment-table .compare-equip-left-header,
.compare-equipment-table .compare-equip-right-header {
    background: #f8fafc !important;
}
.compare-equipment-table tbody tr:hover {
    background: #f8fafc;
}

/* 장비 비교 탭 - 슬롯 칸 여유있게 */
.compare-equipment-table .compare-equip-slot-col,
.compare-equipment-table .compare-equip-slot-cell,
.compare-equipment-table td:first-child {
    min-width: 64px !important;
    width: 64px !important;
}

.compare-equip-slot-col {
    min-width: 64px;
    width: 64px;
    text-align: center;
    padding: 6px 4px !important;
    vertical-align: middle;
}
.compare-equip-slot-cell {
    font-weight: 500;
    font-size: 11px;
    color: #64748b;
    text-align: center;
    vertical-align: middle;
}

.compare-equip-gear-col {
    min-width: 100px;
    text-align: center;
    padding: 6px 8px !important;
}
.compare-equip-attr-col {
    min-width: 48px;
    width: 48px;
    text-align: center;
    padding: 6px 4px !important;
}
.compare-equip-type-col {
    min-width: 50px;
}
.compare-equipment-table th,
.compare-equipment-table td {
    text-align: center !important;
    vertical-align: middle;
}
.compare-equipment-table .compare-equip-attr-cell,
.compare-equipment-table .compare-equip-attr-val {
    color: #64748b;
}

/* 좌측 영역 배경 */
.compare-equipment-table td:nth-child(2),
.compare-equipment-table td:nth-child(3),
.compare-equipment-table td:nth-child(4) {
}
/* 우측 영역 배경 */
.compare-equipment-table td:nth-child(6),
.compare-equipment-table td:nth-child(7),
.compare-equipment-table td:nth-child(8) {
    background: rgba(168, 85, 247, 0.02);
}
/* 차이 컬럼 - 헤더와 동일한 색상 */
.compare-equipment-table td:nth-child(5) {
    background: #f8fafc !important;
}

/* 장비비교탭 본문 글자 크기 +1pt (헤더 제외) */
.compare-equipment-table tbody .compare-equip-slot-cell { font-size: 12px; }
.compare-equipment-table tbody .compare-equip-gear-name { font-size: 13px; }
.compare-equipment-table tbody .compare-equip-gear-type { font-size: 12px; }
.compare-equipment-table tbody .compare-equip-attr-cell { font-size: 12px; }
.compare-equipment-table tbody .compare-equip-badge,
.compare-equipment-table tbody .compare-equip-badge-on { font-size: 11px; }
.compare-equipment-table tbody .compare-equip-diff-cell-inner { font-size: 12px; }
.compare-equipment-table tbody .compare-equip-diff-tune .compare-equip-diff-val { font-size: 13px; }
.compare-equipment-table tbody .compare-equip-diff-type { font-size: 11px; }
.compare-equipment-table tbody .compare-equip-empty { font-size: 13px; }

.compare-equip-gear-cell-wrap {
    min-width: 110px;
    max-width: 150px;
    padding: 6px 8px !important;
}
.compare-equip-gear-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-align: center;
}
.compare-equip-gear-cell .compare-equip-icon,
.compare-equip-gear-cell img.compare-equip-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    object-fit: contain;
    border-radius: 3px;
}
.compare-equip-gear-cell .compare-equip-empty {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}
.compare-equip-gear-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 400;
    word-break: break-word;
    text-align: center;
}
.compare-equip-gear-name .compare-equip-name {
    display: inline;
}
.compare-equip-gear-type {
    font-size: 11px;
    color: #64748b;
    margin-left: 2px;
}

.compare-equip-attr-cell {
    min-width: 50px;
    padding: 5px 4px !important;
    font-size: 11px;
}
.compare-equip-attr-val {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.compare-equip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 3px;
    border-radius: 2px;
    font-size: 10px;
    background: #e2e8f0;
    color: #64748b;
}
.compare-equip-badge-on {
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
}

.compare-equip-diff-col {
    min-width: 50px;
    text-align: center;
    padding: 6px 4px !important;
    background: #f8fafc !important;
}
.compare-equip-diff-cell {
    text-align: center;
    vertical-align: middle;
    padding: 6px 4px !important;
}
.compare-equip-diff-cell-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    font-size: 11px;
}
.compare-equip-diff-tune .compare-equip-diff-val {
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.compare-equip-diff-type {
    font-size: 10px;
    color: #64748b;
    background: #e2e8f0;
    padding: 1px 3px;
    border-radius: 2px;
}
.compare-equip-diff-type.compare-skill-diff-higher {
    color: #fff;
    background: #60a5fa;
}
.compare-equip-diff-type.compare-skill-diff-lower {
    color: #fff;
    background: #f87171;
}
.compare-equip-empty {
    color: #94a3b8;
    font-size: 12px;
}

/* 장비(강화/마부) 탭 */
.compare-equipment-enchant-table thead th,
.compare-equipment-enchant-table td {
    border: 1px solid #e2e8f0;
}
.compare-equipment-enchant-table tbody td {
    vertical-align: middle !important;
}
/* PC - 양옆 보더 제거 (장비비교와 동일) */
.compare-equipment-enchant-table thead th:first-child,
.compare-equipment-enchant-table td:first-child {
    border-left: none !important;
}
.compare-equipment-enchant-table thead th:last-child,
.compare-equipment-enchant-table td:last-child {
    border-right: none !important;
}
/* 장비비교와 동일 - 슬롯 th/td 직접 지정 */
.compare-equipment-enchant-table .compare-equip-slot-col,
.compare-equipment-enchant-table td.compare-equip-slot-cell {
    min-width: 64px !important;
    width: 64px !important;
    padding: 6px 4px !important;
    text-align: center;
    vertical-align: middle;
}
.compare-equipment-enchant-table tbody td.compare-equip-slot-cell {
    font-size: 12px;
}

.compare-equipment-enchant-table .compare-equip-enchant-header-main th {
    background: #f8fafc !important;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
    padding: 6px 8px;
}
.compare-equip-reinforce-suffix {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* 태초 등급 장비 내 강화/증폭 색상 - 부모 rarity-first의 -webkit-text-fill-color transparent 상속 방지 */
.compare-equip-reinforce-suffix.rarity-uncommon {
    color: #68D5ED !important;
    -webkit-text-fill-color: #68D5ED !important;
}
.compare-equip-reinforce-suffix.rarity-unique {
    color: #FF00FF !important;
    -webkit-text-fill-color: #FF00FF !important;
}

/* 슬롯 블록(강화~마부) 시작: 장비 행 상단 - 블록 구분선 */
.compare-equipment-enchant-table .compare-equip-gear-row td {
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 4px 8px !important;
    vertical-align: middle !important;
    line-height: 1.2;
}
/* 첫 슬롯 블록만 상단 얇게 */
.compare-equipment-enchant-table tbody tr:first-child.compare-equip-gear-row td {
    border-top: 1px solid #e2e8f0 !important;
}
.compare-equipment-enchant-table .compare-equip-gear-row td.compare-equip-gear-cell-wrap {
    vertical-align: middle;
}
.compare-equipment-enchant-table .compare-equip-gear-name {
    font-size: 13px;
}
.compare-equipment-enchant-table .compare-equip-gear-type {
    font-size: 12px;
}

/* 장비↔마부 연결: 첫 마부 행 상단은 연하게 (블록 내부) */
.compare-equipment-enchant-table .compare-equip-enchant-slot-first td {
    border-top: 1px solid #f3f4f7 !important;
}

/* 마부 행 - 연한 파란회색 배경으로 구분 강조 */
.compare-equipment-enchant-table .compare-equip-enchant-row td {
    background: #f3f6fb;
    border-top-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    vertical-align: middle !important;
}

/* 슬롯 블록(강화~마부) 끝: 마부 마지막 행 하단 - 블록 구분선 */
.compare-equipment-enchant-table .compare-equip-enchant-slot-last td {
    border-bottom: 2px solid #cbd5e1 !important;
}
/* 슬롯 셀은 rowspan이라 마지막 tr의 자식이 아님 - 마지막 블록 슬롯 셀에도 굵은 하단선 */
.compare-equipment-enchant-table td.compare-equip-slot-cell.compare-equip-slot-cell-last-block {
    border-bottom: 2px solid #cbd5e1 !important;
}
/* 구분 셀 - gear 행(강화/증폭): 블록 상단 구분선 */
.compare-equipment-enchant-table .compare-equip-gear-row td.compare-equip-enchant-div-cell {
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
/* 구분 셀 - 마법부여(첫 마부 행): 블록 내부 상단 연하게, 블록 끝 구분선 */
.compare-equipment-enchant-table .compare-equip-enchant-slot-first td.compare-equip-enchant-div-cell {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
.compare-equipment-enchant-table .compare-equip-enchant-div-col,
.compare-equipment-enchant-table td.compare-equip-enchant-div-cell {
    width: 1%;
    min-width: 72px;
    max-width: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    vertical-align: middle !important;
}
.compare-equipment-enchant-table .compare-equip-enchant-item-col {
    width: 1%;
    min-width: 72px;
    max-width: 100px;
    font-weight: 500;
    color: #64748b;
}
.compare-equipment-enchant-table .compare-equip-enchant-item-cell {
    padding: 4px 8px !important;
    vertical-align: middle;
}
.compare-equipment-enchant-table .compare-equip-enchant-option-col {
    min-width: 72px;
    font-weight: 500;
    color: #64748b;
}
.compare-equipment-enchant-table .compare-equip-enchant-val-col {
    min-width: 56px;
    padding: 6px 8px !important;
    font-variant-numeric: tabular-nums;
}
.compare-equipment-enchant-table .compare-equip-enchant-option-cell {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    padding: 4px 8px !important;
}
.compare-equipment-enchant-table .compare-equip-enchant-val-cell {
    padding: 4px 8px !important;
    font-size: 13px;
    color: #475569;
    text-align: center !important;
    vertical-align: middle !important;
}
/* 옵션·수치·비교 열 가운데 정렬 */
.compare-equipment-enchant-table td.compare-equip-enchant-item-cell,
.compare-equipment-enchant-table td.compare-equip-enchant-val-cell,
.compare-equipment-enchant-table td.compare-equip-diff-cell {
    text-align: center !important;
}
/* 장비 행: 수치+아이콘 합침, 셀 내 세로 가운데 */
.compare-equipment-enchant-table td.compare-equip-enchant-val-cell.compare-equip-enchant-val-with-icon {
    display: table-cell;
}
.compare-equipment-enchant-table .compare-equip-enchant-val-with-icon .compare-equip-enchant-val-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    vertical-align: middle;
}
.compare-equipment-enchant-table .compare-equip-enchant-val-inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
/* 세트명 - 레어리티 색상 적용 (style_dun.css .rarity-* 상속) */
.compare-equipment-enchant-table .compare-equip-enchant-set {
    font-size: 13px;
}
.compare-equipment-enchant-table .compare-equip-enchant-val-with-icon .compare-equip-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.compare-equipment-enchant-table tbody tr:hover {
    background: #f8fafc;
}

/* PC - 슬롯 짧게(64px), 나머지(항목·값·비교) 적당히 확장 */
@media (min-width: 769px) {
    /* 강화/마부 테이블 전체 폭 제한해서 가운데 정렬 (너무 넓게 퍼지지 않도록) */
    .compare-equipment-enchant-table {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }
    .compare-equipment-enchant-table .compare-equip-slot-col,
    .compare-equipment-enchant-table td.compare-equip-slot-cell {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }
    /* PC: 구분·옵션 컬럼 - gear 행에서 구분+옵션 합쳐서 사용 */
    .compare-equipment-enchant-table .compare-equip-enchant-div-col,
    .compare-equipment-enchant-table td.compare-equip-enchant-div-cell {
        min-width: 88px !important;
        max-width: 120px !important;
    }
    .compare-equipment-enchant-table td.compare-equip-enchant-div-cell.compare-equip-enchant-div-merged {
        min-width: 140px !important;
        max-width: 200px !important;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-item-col,
    .compare-equipment-enchant-table td.compare-equip-enchant-item-cell,
    .compare-equipment-enchant-table td.compare-equip-enchant-option-cell {
        min-width: 96px !important;
        max-width: 130px !important;
    }
    .compare-equipment-enchant-table .compare-equip-diff-col,
    .compare-equipment-enchant-table td.compare-equip-diff-cell {
        min-width: 84px !important;
        max-width: 110px !important;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-val-cell {
        min-width: 52px !important;
        max-width: 72px !important;
    }
}

/* 마부/강화 비교 - 옵션·비교 컬럼 내용에 맞게 축소, 폰트 한 단계 축소 */
.compare-equipment-enchant-table .compare-equip-diff-col,
.compare-equipment-enchant-table td.compare-equip-diff-cell {
    width: 1%;
    min-width: 42px;
    max-width: 56px;
}
.compare-equipment-enchant-table .compare-equip-diff-col {
    font-size: 13px !important;
}
.compare-equipment-enchant-table tbody td.compare-equip-diff-cell,
.compare-equipment-enchant-table .compare-equip-diff-cell .compare-equip-diff-val {
    font-size: 12px !important;
    font-weight: 600;
}

.compare-enhancement-img.enhance-1 {
    filter: sepia(0.55) hue-rotate(-18deg) saturate(1.08);
}

.compare-enhancement-img.enhance-2 {
    filter: sepia(0.15) hue-rotate(195deg) saturate(1.08);
}

.compare-skill-evolution-table .compare-evolution-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
}

/* 캐릭터 비교 모달 */
/* TOP3 버튼 - 상단 고정 */
/* TOP3 + 내모험단: 오른쪽에 나란히, 내모험단 비활성 시 TOP3만 표시 */
.compare-modal-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* TOP3: 내모험단과 동일한 형태, 파란 배경 + 흰색 글씨 */
.compare-modal-top3-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: #6e84ff;
    border: 1px solid #6e84ff;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.compare-modal-top3-btn:hover {
    background: #5c6fd9;
    border-color: #5c6fd9;
}
.compare-modal-top3-btn:active {
    transform: scale(0.98);
}
.compare-modal-top3-btn i {
    margin-right: 5px;
    font-size: 11px;
    opacity: 0.9;
}

.compare-modal-search-wrap {
    margin-bottom: 16px;
}

.compare-modal-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
}

.compare-modal-search-wrap .form-control {
    flex: 1;
    height: 38px;
    padding-right: 40px;
}

.compare-modal-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.compare-modal-search-btn:hover {
    color: #666;
}

.compare-modal-job-wrap {
    margin-bottom: 12px;
}

.compare-modal-job-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.compare-modal-my-adventure-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: #5a67d8;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-modal-my-adventure-btn-icon {
    margin-right: 5px;
    font-size: 11px;
    opacity: 0.85;
}

.compare-modal-my-adventure-btn:hover {
    color: #4c51bf;
    background: #edf2f7;
    border-color: #cbd5e0;
}

.compare-modal-my-adventure-btn:active {
    transform: scale(0.98);
}

.compare-modal-job-title {
    font-size: 13px;
    color: #555;
    margin: 0;
    text-align: left;
}

.compare-modal-job-selects {
    display: flex;
    gap: 6px;
    width: 100%;
}

.compare-modal-job-selects select {
    flex: 1;
    min-width: 0;
    height: 38px;
}

.compare-modal-result-wrap {
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

.compare-modal-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #666;
}

.compare-modal-hint {
    color: #999;
    font-size: 14px;
    margin: 0;
    padding: 20px;
    text-align: center;
}

/* 모달 검색 결과 - 카드 형태 (매니저 이미지 참고) */
.compare-modal-result-card {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.compare-modal-result-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.compare-modal-card-img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background-color: #f1f3f5;
}

.compare-modal-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px;
}

.compare-modal-cell {
    font-size: 13px;
    color: #374151;
}

.compare-modal-cell.name {
    font-weight: 600;
}

.compare-modal-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}

.compare-modal-cell.set-cell {
    display: inline-flex;
    align-items: center;
}

.compare-modal-cell.fame {
    color: #666;
    font-weight: 600;
}

.compare-modal-cell.fame::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    margin-top: -2px;
    vertical-align: middle;
    background-image: url('/img/ico_fame.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.compare-modal-cell.score-info {
    color: #2196f3;
    font-weight: 600;
}

.compare-modal-cell.score-info::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 17px;
    margin-right: 4px;
    vertical-align: middle;
    background-image: url('/img/ico_score.png');
    background-size: 180% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.compare-modal-cell.score-buff-info::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 17px;
    margin-right: 4px;
    vertical-align: middle;
    background-image: url('/img/ico_buff_score.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.compare-modal-divider {
    width: 1px;
    height: 14px;
    background: #dee2e6;
    flex-shrink: 0;
}

/* 모달 z-index 보장 (다른 요소에 가려지지 않도록) */
#compareSearchModal.modal {
    z-index: 1060;
}

/* 모바일 - 캐릭터 비교 카드 한 줄 유지, 모달 패딩 축소 */
@media (max-width: 768px) {
    .compare-header p {
        display: none;
    }

    .compare-card-container {
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: center;
    }

    .compare-card-wrap {
        flex: 1;
        min-width: 0;
        max-width: calc(50% - 5px);
    }

    .compare-card-wrap .card {
        width: 100% !important;
        min-width: 0;
        min-height: 342.58px;
        padding: 10px;
    }

    .compare-card-wrap .compare-card-actions {
        margin: 2px 0 2px 0;
        gap: 5px;
    }

    .compare-card-action-btn {
        padding: 5px 4px;
        font-size: 10px;
    }

    .compare-card-action-btn i {
        font-size: 9px;
    }

    .compare-card-wrap .card .character-image-container {
        min-height: 195px;
        height: 195px;
        padding-bottom: 36px;
    }

    .compare-input-wrap {
        max-width: 100%;
        min-height: 40px;
        align-items: center;
        gap: 8px;
        padding-right: 4px;
    }

    .compare-input-wrap .compare-input {
        padding: 8px 0 8px 0;
        font-size: 14px;
        min-height: 36px;
        flex: 1;
        min-width: 0;
    }

    .compare-input-wrap .compare-input-search {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: transparent;
        border: none;
    }

    .compare-input-wrap .compare-input-search i {
        font-size: 16px;
    }

    #compareSearchModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    #compareSearchModal .modal-content {
        padding: 0 8px;
    }

    #compareSearchModal .modal-header {
        padding: 12px 8px;
    }

    #compareSearchModal .modal-body {
        padding: 12px 8px;
    }

    .compare-modal-result-card {
        padding: 8px 10px;
        gap: 10px;
    }

    .compare-modal-hint,
    .compare-modal-loading {
        padding: 12px;
    }

    .compare-modal-search-wrap {
        margin-bottom: 12px;
        gap: 8px;
    }

    .compare-modal-job-wrap {
        margin-bottom: 10px;
    }

    .compare-modal-job-selects {
        gap: 6px;
    }

    /* 스킬 탭 모바일: 아이콘 옆에 스킬명 표시 (숨기지 않음) */
    /* 캐릭터/비교 컬럼: "5 (+5)" 형식으로 표기 */
    .compare-skill-table#compareSkillTable .skill-left-desktop,
    .compare-skill-table#compareSkillTable .skill-right-desktop {
        display: none;
    }
    .compare-skill-table#compareSkillTable .skill-left-mobile,
    .compare-skill-table#compareSkillTable .skill-right-mobile {
        display: inline;
    }
    .compare-skill-table#compareSkillTable .compare-skill-diff-cell,
    .compare-skill-table#compareSkillTable th:nth-child(4) {
        display: none;
    }

    /* 개화/강화 탭은 모바일에서 스킬명 숨김 (아이콘만) */
    .compare-skill-evolution-table .skill-cell span,
    .compare-skill-enhancement-table .skill-cell span {
        display: none;
    }

    /* 비교표 모바일: 양옆 여백 제거, 전체 너비 */
    .compare-tab-section {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
        max-width: 100vw;
    }

    .compare-tab-section .statistics-tab-content {
        padding: 12px 8px;
    }

    .compare-skill-table th,
    .compare-skill-table td {
        padding: 5px 4px;
    }
    .compare-skill-table th,
    .compare-skill-table td {
        font-size: 13px;
    }
    /* 장비 로우만 PC와 동일한 폰트/글자 색상 */
    .compare-equipment-table tbody td {
        font-family: 'Noto Sans KR', sans-serif;
        -webkit-text-size-adjust: 100%;
    }

    /* 개화/강화 모바일 - 레벨·스킬·VP/강화 컬럼 너비·패딩 맞춤 */
    .compare-skill-enhancement-table .enhance-col-level,
    .compare-skill-evolution-table .enhance-col-level {
        min-width: 32px;
        max-width: 38px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .compare-skill-table th:nth-child(1),
    .compare-skill-table td:nth-child(1) {
        padding-left: 2px;
        padding-right: 2px;
    }

    .compare-skill-enhancement-table .enhance-col-skill,
    .compare-skill-evolution-table .enhance-col-skill {
        min-width: 40px; /* 아이콘만 표시 시 32px + 패딩 */
    }

    .compare-skill-enhancement-table th:nth-child(3),
    .compare-skill-enhancement-table td:nth-child(3),
    .compare-skill-enhancement-table th:nth-child(4),
    .compare-skill-enhancement-table td:nth-child(4),
    .compare-skill-enhancement-table th:nth-child(5),
    .compare-skill-enhancement-table td:nth-child(5),
    .compare-skill-enhancement-table th:nth-child(6),
    .compare-skill-enhancement-table td:nth-child(6),
    .compare-skill-evolution-table th:nth-child(3),
    .compare-skill-evolution-table td:nth-child(3),
    .compare-skill-evolution-table th:nth-child(4),
    .compare-skill-evolution-table td:nth-child(4),
    .compare-skill-evolution-table th:nth-child(5),
    .compare-skill-evolution-table td:nth-child(5),
    .compare-skill-evolution-table th:nth-child(6),
    .compare-skill-evolution-table td:nth-child(6) {
        min-width: 44px; /* 헤더 줄바꿈 방지 */
    }

    .compare-skill-enhancement-table .enhance-sub-header th,
    .compare-skill-evolution-table .enhance-sub-header th {
        font-size: 12px;
        padding: 5px 4px;
    }

    /* 장비 탭 모바일 - 슬롯 컬럼 제거, 왼쪽 보더 제거, 헤더 4자 줄바꿈 방지 */
    .compare-equipment-table .compare-equip-slot-col,
    .compare-equipment-table td:first-child {
        display: none;
    }
    .compare-equipment-table thead tr:first-child th:nth-child(2),
    .compare-equipment-table .compare-equip-header-sub th:first-child,
    .compare-equipment-table td:nth-child(2) {
        border-left: none;
    }
    .compare-equipment-table {
        min-width: 300px;
    }
    .compare-equipment-table .compare-equip-side-header {
        max-width: none;
        overflow: visible;
        white-space: nowrap;
    }
    .compare-equipment-table .compare-equip-gear-col {
        min-width: 100px;
    }
    .compare-equipment-table .compare-equip-gear-cell-wrap {
        min-width: 100px;
    }
    .compare-equipment-table .compare-equip-gear-cell {
        justify-content: center;
        text-align: center;
    }
    .compare-equipment-table .compare-equip-gear-cell .compare-equip-icon,
    .compare-equipment-table .compare-equip-gear-cell img.compare-equip-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    .compare-equipment-table .compare-equip-attr-col,
    .compare-equipment-table .compare-equip-attr-cell {
        min-width: 50px;
    }
    .compare-equipment-table .compare-equip-type-col {
        min-width: 50px;
    }
    .compare-equipment-table .compare-equip-diff-col {
        min-width: 50px;
    }

    /* 모바일: 아이템 이름은 유지, 나머지 데스크톱 대비 축소 후 +1pt */
    .compare-equipment-table .compare-equip-attr-cell,
    .compare-equipment-table .compare-equip-attr-val {
        font-size: 11px;
    }
    .compare-equipment-table .compare-equip-badge,
    .compare-equipment-table .compare-equip-diff-type {
        font-size: 10px;
    }
    .compare-equipment-table .compare-equip-diff-cell-inner {
        font-size: 11px;
    }
    .compare-equipment-table .compare-equip-diff-tune .compare-equip-diff-val {
        font-size: 12px;
    }
    .compare-equipment-table .compare-equip-empty {
        font-size: 12px;
    }
    .compare-equipment-table .compare-equip-gear-type {
        font-size: 12px;
    }

    /* 장비(강화/마부) 탭 모바일 - 마법부여만 숨김, gear행 강화/증폭은 유지(열 수 맞춤) */
    .compare-equipment-enchant-table .compare-equip-enchant-div-col {
        display: none !important;
    }
    .compare-equipment-enchant-table td.compare-equip-enchant-div-cell:not(.compare-equip-enchant-div-merged) {
        display: none !important;
    }
    .compare-equipment-enchant-table {
        min-width: 280px;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-option-cell,
    .compare-equipment-enchant-table .compare-equip-enchant-val-cell {
        font-size: 12px;
    }
    /* 모바일: 구분·옵션·비교 컬럼 내용에 맞게 축소 */
    .compare-equipment-enchant-table .compare-equip-enchant-div-col,
    .compare-equipment-enchant-table td.compare-equip-enchant-div-cell {
        min-width: 64px !important;
        max-width: 84px !important;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-item-col,
    .compare-equipment-enchant-table td.compare-equip-enchant-item-cell,
    .compare-equipment-enchant-table td.compare-equip-enchant-option-cell {
        width: 1% !important;
        min-width: 64px !important;
        max-width: 88px !important;
        white-space: nowrap;
    }
    .compare-equipment-enchant-table .compare-equip-diff-col,
    .compare-equipment-enchant-table td.compare-equip-diff-cell {
        width: 1% !important;
        min-width: 50px !important;
        max-width: 60px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-val-with-icon .compare-equip-icon {
        width: 24px;
        height: 24px;
    }
    /* 모바일: 아이템명(세트 요약) 미표시 */
    .compare-equipment-enchant-table .compare-equip-enchant-set {
        display: none !important;
    }
    .compare-equipment-enchant-table .compare-equip-enchant-val-cell {
        min-width: 36px !important;
        max-width: 52px !important;
        width: auto !important;
    }
}