.container {
	align-items: center;
	width: 100%;
    min-width: 1020px;
	max-width: 1020px;
    margin: 0 auto; 
    box-sizing: border-box; 
    padding: 4px !important;
}
/* 공통 광고 영역 높이 고정 - 모든 화면에서 로드 시 밀림 방지 */
.ad-slot-top {
	width: 100%;
	min-height: 50px;
	height: 50px;
}
.ad-slot-bottom {
	width: 100%;
	min-height: 100px;
}
.ad-slot-right-inner {
	min-height: 600px;
	width: 270px;
	padding-top: 40px;
	position: relative;
	left: 80px;
}

/* 광고 영역 보이는 크기  */
@media (max-width: 1020px) {
    .container {
        min-width: 0;
    }
    .container-left-ad {
        display: none !important;
    }
    .container-right-ad {
        display: none !important;
    }   
}

select, input, button {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
}
button {
  cursor: pointer;
  background-color: #2196f3;
  color: white;
  border-color: #2196f3;
}
#result {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px;
  white-space: pre-wrap; /* 줄바꿈을 위해 추가 */
  word-wrap: break-word; /* 긴 단어 줄바꿈 */
  min-height: 100px;
}
hr{
	margin-top: 0.2rem;	
}

/* 결과창 숨김을 위한 CSS */
.hidden {
    display: none;
}

/* 상세검색 섹션 스타일 */
#details-container {
    background-color: #ffffff;
    padding: 10px;
    margin: 0;
}

#id-input {
    width: 300px;
}
/* 모바일  */
@media (max-width: 484px) {
    #id-input {
        width: 100%;
    }
}

#details-container:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

#details-container > div {
    background-color: #f8f9fc;
    border-radius: 6px;
    padding: 15px;
    border: 1px solid #eaecf4;
    max-width: 1020px;
    margin: 0 auto;  
}

#details-container label {
    color: #5a5c69;
    font-weight: 600;
    font-size: 14px;
    margin-right: 8px;
}

#details-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4e73df;
    margin-right: 8px;
}

#details-container input[type="number"] {
    border: 1px solid #d1d3e2;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
}

#details-container input[type="number"]:focus {
    outline: none;
    border-color: #4e73df;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

#details-container .vertical-divider {
    width: 1px;
    height: 20px;
    background-color: #d1d3e2;
    margin: 0 10px;
}

#details-container hr {
    border: none;
    height: 1px;
    background-color: #eaecf4;
    margin: 15px 0 0 0;
}
   
   /* 검색창 박스 스타일 */
.search-main {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f0f0f0; /* 배경색 */
    border-radius: 23px;       /* 둥근 모서리 */
    padding: 5px 15px;        /* 내부 여백 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* search-main 전체 텍스트 선택 방지 (input 제외) */
.search-main {
    user-select: none;
    -webkit-user-select: none;
}

/* input은 텍스트 입력/선택 가능하게 */
.search-main input {
    user-select: text;
    -webkit-user-select: text;
}

/* 검색창 내 셀렉트, 인풋, 버튼 기본 스타일 초기화 */
.search-main select,
.search-main input,
.search-main button {
    border: none;
    background-color: transparent; /* 배경을 투명하게 */
    padding: 8px;
    font-size: 16px;
}

/* 검색창 내 셀렉트와 인풋 필드에만 추가 스타일 적용 */
.search-main select,
.search-main input {
    border-radius: 4px;
    outline: none;
}

/* '검색' 버튼 스타일 */
#fetch-button {
    background-color: #96c0ed;
    color: white;
    border-radius: 20px;
    padding: 8px 5px; /* 버튼 좌우 여백을 더 넓게 */
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 700;
}

#fetch-button:hover {
    background-color: #6e84ff;
}

/* 'X' 버튼 스타일 */
#toggle-button {
    background: none;
    color: #888;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0; 
    border: none;
}

.topbar {
	height: 2.7rem;
	
	/* 요소를 뷰포트(브라우저 창)에 고정시킵니다. */
    position: fixed;
    
    /* 고정된 위치를 상단 0px로 설정합니다. */
    top: 0;
    
    /* 너비를 100%로 설정하여 화면을 꽉 채웁니다. */
    width: 100%;
    
    /* 다른 요소들 위에 보이도록 z-index를 높게 설정합니다. */
    z-index: 1000;
    
    /* 선택 사항: 배경색을 추가하여 아래 내용과 겹치지 않게 합니다. */
    background-color: #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 카드 전체를 담는 컨테이너 */
.card-container {
    display: flex;
    flex-wrap: wrap; /* 카드가 여러 줄로 나열되도록 설정 */
    gap: 20px; /* 카드 사이의 간격 */
    justify-content: center; /* 카드들을 가운데 정렬 */
    padding-bottom: 30px;
}

/* 개별 카드 스타일 */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 223px; /* 카드의 너비 */
    background-color: #fff;
    user-select: none; /* 텍스트 선택 방지 */
    -webkit-user-select: none;
    transition: transform 0.2s; /* 호버 시 애니메이션 효과 */
}

/* 출력 애니메이션 */
.character-card-section{
    opacity: 0;
    transform: translateY(30px);
    animation: quickFadeIn 0.6s ease forwards;
    margin-top:3px;
    transition: opacity 2s ease, transform 2s ease;
}

/* 접힘 상태 */
.character-card-section.collapsed .card-container{
	display: none !important;
}

/* 접기 버튼 스타일 */
#toggle-character-btn {
	background: none;
	border: none;
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	color: #999;
	transition: color 0.2s ease-in-out;
	border-radius: 4px;
}

#toggle-character-btn:hover {
	color: #2568afb7;
}

@keyframes quickFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quickFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

.manage-container{
    min-height: 825px;
}

/* 모바일  */
@media (max-width: 484px) {
    .manage-container{
        min-height: 535px;
    }

	.card-container {
		gap: 10px;
	}

	.card {
		width: 46%;
		padding: 10px;
	}

    .character-image-container{
        min-height: 145px;
        padding-bottom: 36px !important;
    }
	
	#fetch-button{
		/* display: none; */
		margin-left:-60px
	}
}

/* 마우스 오버 시 카드 약간 확대 (데스크톱 전용) */
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
}

/* 제목과 텍스트 스타일 */
.card h3 {
    margin-top: 0;
    color: #333;
}

.card p {
    margin: 3px 0;
    color: #666;
}

.card strong {
    color: #222;
}

/* 캐릭터 이미지와 느낌표 */
.character-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1.5px solid #ddd;
	padding-bottom: 50px;
    border-radius: 8px;
    min-height: 150px;
    user-select: none;
    -webkit-user-select: none;
}

/* 캐릭터 이미지 오른쪽 상단 조회수 - 배경·그림자 없이 단순 회색 글자 */
.character-view-count {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #8a8a8e70;
    background: none;
    line-height: 1;
}
.character-view-count i {
    font-size: 10px;
}

/* 캐릭터 상세 화면에서만 조회수 오른쪽 여백 더 넓게 */
.character-image-wrapper .character-view-count {
    top: 14px;
    right: 20px;
}

.character-image {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.3);
    margin-top: -9px;
	margin-left: 5px;
}

/* 느낌표 아이콘 (CSS로 간단하게 표현) */
.status-icon {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
    background-color: red;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 10px;
}

/* 레벨 */
.card .level {
    margin: 2px 0 1px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* 캐릭터 이름 */
.card .name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 8px 0 2px;
    line-height: 1.2;
}

/* 직업, 서버 정보 */
.card .job-info {
    font-size: 13px;
    color: #666;
    margin: 2px 0 3px;
    font-weight: 500;
}

/* 명성 정보 */
.card .fame {
    font-size: 14px; /* 점수와 동일한 크기로 축소 */
    font-weight: bold;
    color: #d4af37; /* 금색 */
    margin-top: 2px; /* 점수와 동일한 여백으로 축소 */
}

/* 명성 아이콘 */
.fame::before {
}

/* 검색 상세 버튼 */
.toggle-btn {
    background: none;
    border: none;
    padding: 0px 0px 0 15px;
    font-size: 12px;
    cursor: pointer;
    color: #fff; 
    margin-left: 0;
    position: relative;
}

/* 상세검색 버튼 화살표 (텍스트 앞) */
.toggle-btn::before {
    content: '▼';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #fff;
    transition: transform 0.3s ease, color 0.2s ease;
    margin-right: 2px;
}

/* 상세검색이 열렸을 때 화살표 회전 */
.toggle-btn.expanded::before {
    transform: translateY(-50%) rotate(180deg);
}

/* 내모험단 검색 버튼 */
.my-adventure-search-button {
    background: none;
    border: none;
    padding: 0px 15px 0 0;
    font-size: 12px;
    cursor: pointer;
    color: #fff; 
    margin-left: auto;
}

.vertical-divider {
    width: 1px; /* 선의 두께 */
    height: 20px; /* 선의 길이 */
    background-color: #ccc; /* 선의 색상 */
    margin: 0 10px; /* 좌우 여백 */
}

/* 검색 창 박스  */
.search-container{
	display: flex;
	flex-direction: column;
	gap: 1px;
  	align-items: flex-start;
}

/* 버튼들을 담는 컨테이너 */
.button-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 2px 0;
	width: 100%;
}

/* 만렙 체크박스 스타일 */
#max-level-checkbox {
    /* 기본 체크박스 디자인을 사용하지만 크기 조절 */
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-bottom: 8px;
}

/* 명성 제한 입력 상자 스타일 */
#fame-input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* 입력창 너비가 너무 작아지지 않도록 최소 너비 설정 */
    min-width: 100px; 
    margin-bottom: 8px;
}

/* 캐릭터 카드 모험단 검색 버튼 */
.adventure-search-button {
    /* 버튼의 기본 스타일 제거 */
    background: none; /* 배경 제거 */
    border: none;    /* 테두리 제거 */
    padding: 0;      /* 패딩 제거 */
    margin: 0;       /* 마진 제거 */
    
    /* 텍스트 스타일 적용 */
    color:  #666; /* 링크처럼 파란색 (원하는 색상으로 변경 가능) */
    font-size: 12px; /* 부모 요소의 폰트 크기 상속 또는 원하는 크기 지정 */
    cursor: pointer; /* 마우스 오버 시 포인터 변경 (클릭 가능함을 표시) */
    
    /* 텍스트 정렬 및 간격 조정 */
    display: inline-flex; /* 아이콘과 텍스트를 한 줄에 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 5px; /* 텍스트와 아이콘 사이 간격 */
    
    /* 호버 효과 (선택 사항) */
    transition: color 0.2s ease-in-out; /* 색상 변경 시 부드럽게 */
}

.adventure-search-button:hover {
    color: #0056b3; /* 호버 시 색상 변경 */
    text-decoration: none; /* 호버 시 밑줄 제거 (선택 사항) */
}

/* 돋보기 아이콘 스타일 (Font Awesome) */
.adventure-search-button .fas.fa-search {
    font-size: 0.9em; /* 아이콘 크기 조정 */
    color: inherit; /* 부모 텍스트 색상 상속 */
    margin-top: 4px;
}

.title-span{
	font-weight: 500;
    /* margin-top: 0px; */
    color: #73767d;
    font-size: 12pt;
    position: relative;
}

.title-span.clickable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.title-span.clickable:hover {
    color: #0056b3;
}

.title-span::after {
    content: '▼';
    position: absolute;
    right: 9px;
    top: 8px;
    font-size: 0.7em;
    color: #666;
    transition: transform 0.3s ease, color 0.2s ease;
    line-height: 1.2;
}

/* CHARACTER - DETAIL 섹션은 화살표 제거 (접기/펼치기 기능 없음) */
.detail-section .title-span::after {
    display: none;
}

/* 공지사항 헤더만 선택 방지 (내용은 드래그 가능) */
.notice-header-box,
.notice-header-title {
    user-select: none;
    -webkit-user-select: none;
}

/* 공지 제목, 내용은 드래그 가능 */
.notice-post-list,
.notice-post-title,
.notice-post-content {
    user-select: text;
    -webkit-user-select: text;
}

/* 공지사항 섹션 헤더는 화살표 제거 (접기/펼치기 기능 없음) */
.notice-section .title-span::after {
    display: none;
}

.title-span.clickable:hover::after {
    color: #0056b3;
}

.character-card-section.collapsed .title-span::after {
    transform: rotate(180deg);
}

.nodata-p {
	top: 50%;
    left: 0;
    right: 0;
    margin-top: -7px;
    font-size: 14px;
    color: #ccc;
    margin-top: 50px;
}

#grid {
	width: 100%;
	/* 그리드 애니메이션을 위한 초기 상태 */
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 그리드가 사라질 때의 애니메이션 클래스 */
#grid.fade-out {
	opacity: 0;
	transform: translateY(15px);
}

/* 그리드가 나타날 때의 애니메이션 */
#grid.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.header-container {
	display: flex;
	justify-content: center;
}

/* 초기 상태: 아래쪽에 있고 투명 */
.detail-section {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* 활성화(보여줄 때): 위로 올라오고 보임 */
.detail-section.active {
    opacity: 1;
    transform: translateY(0);
}

.rarity-common {
    color:#666 !important;
    font-weight: 400 !important;        
}

.rarity-uncommon {
	color: #68D5ED !important;
	font-weight: 400 !important;        
}

.rarity-rare {
	color: #B36BFF !important;
	font-weight: 400 !important;        
}

.rarity-unique {
	color: #FF00FF !important;
	font-weight: 400 !important;        
}

.rarity-legendary {
	color: #FF7800 !important;
	font-weight: 400 !important;        
}

.rarity-epic {
	color: #FFB400 !important;
	font-weight: 400 !important;        
}

.rarity-mythic {
	color: #FFB400 !important;
	font-weight: 400 !important;        
}

.rarity-first {
    background: -webkit-linear-gradient(top, #28d931, #33acea) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
	font-weight: 400 !important;        
}

/* Tabulator Grid 스타일 */
.tabulator {
    border: 1px solid #ddd;
    background-color: #fff;
}

.tabulator-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.tabulator-header .tabulator-col {
    background-color: #f8f9fa;
    border-right: 1px solid transparent !important;
    padding: 8px 12px;
    font-weight: 600;
    color: #495057;
    text-align: center !important;
}

.tabulator-header .tabulator-col .tabulator-col-content {
    text-align: center !important;
    justify-content: center !important;
}

.tabulator-header .tabulator-col .tabulator-col-resize-handle:hover,
.tabulator-header .tabulator-col .tabulator-col-resize-handle:active {
    display: none !important;
}

.tabulator-row {
    border-bottom: 1px solid #dee2e6;
}

.tabulator-row:hover {
    background-color: #f8f9fa;
}

.tabulator-cell {
    border-right: 1px solid transparent !important;
    padding: 8px 12px;
    vertical-align: middle;
}

/* 셀 줄바꿈 허용 및 자동 높이 */
.tabulator-cell.wrap-cell {
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* Tabulator 셀 내부 줄바꿈 스타일 */
.tabulator-cell div {
    line-height: 1.4;
}

.tabulator-cell .clone-name {
    margin-top: 2px;
    line-height: 1.2;
}

.tabulator-cell:last-child {
    border-right: none;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .tabulator-cell {
        padding: 6px 8px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .tabulator-header .tabulator-col {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* 심볼 */
.symbol {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;  
}

/* 라인 */
.symbol-line {
    width: 6px;
    height: 100%;
    margin-right: 4px;  
}

/* 상태별 색상 */
.end {
    background-color: #6e84ff; 
}

.operational {
    background-color: #62ad83; 
}
  
.investigation {
    background-color: #f2994a; /* 주황색 */
}

.new {
    background-color: #a3a7a5; /* 회색 */
}
  
.unavailable {
    background-color: #cf0d0dbd; /* 빨간색 */
}

/* 무기 아이콘 툴팁 스타일 */
.weapon-tooltip {
    position: fixed;
    background-color: #f8f9fa; /* 연한 회색 배경 */
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold; /* 글자 볼드 처리 */
    white-space: nowrap;
    z-index: 10001;
    pointer-events: none; /* 툴팁 자체가 이벤트를 가로채지 않도록 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* 무기 툴팁 내부 레어리티 색상 적용 */
.weapon-tooltip .rarity-common {
    color: #666 !important;
}

.weapon-tooltip .rarity-uncommon {
    color: #68D5ED !important;
}

.weapon-tooltip .rarity-rare {
    color: #B36BFF !important;
}

.weapon-tooltip .rarity-unique {
    color: #FF00FF !important;
}

.weapon-tooltip .rarity-legendary {
    color: #FF7800 !important;
}

.weapon-tooltip .rarity-epic {
    color: #FFB400 !important;
}

.weapon-tooltip .rarity-mythic {
    color: #FFB400 !important;
}

.weapon-tooltip .rarity-first {
    background: -webkit-linear-gradient(top, #28d931, #33acea) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}