/* ==================== 랭킹 & 통계 페이지 전용 스타일 ==================== */ /* 이 파일은 style.css 외에 ranking.html에 추가로 링크됩니다. 기본 HTML 요소(body, header, footer 등)나 공통 컴포넌트(.container, .btn)에 대한 스타일은 style.css에 그대로 유지되므로 여기서는 랭킹 페이지 전용 스타일만 정의합니다. */ .ranking-main-content { padding-top: var(--header-height); /* 헤더 아래에서 시작 */ min-height: calc(100vh - var(--header-height) - 100px); /* 푸터 높이를 고려하여 최소 높이 설정 */ background-color: #f0f2f5; /* 배경색 */ } .dashboard-section { padding: 60px 0; } .section-title { font-size: 2.5rem; color: #2c3e50; text-align: center; margin-bottom: 50px; font-weight: 700; } /* TOP 15 랭킹 정렬 버튼 스타일 */ .sort-controls { display: flex; /* 버튼들을 가로로 정렬 */ justify-content: center; /* 가운데 정렬 */ gap: 10px; /* 버튼 사이 간격 */ margin-top: -30px; /* section-title과의 간격 조절 (선택 사항) */ margin-bottom: 30px; /* 랭킹 리스트와의 간격 */ flex-wrap: wrap; /* 작은 화면에서 버튼이 넘칠 경우 줄바꿈 */ } .sort-controls .sort-btn { background-color: #ecf0f1; /* 비활성 상태 배경색 */ color: #34495e; /* 비활성 상태 글자색 */ padding: 10px 20px; border: 1px solid #ccc; border-radius: 25px; /* 둥근 모서리 */ font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; /* 부드러운 전환 효과 */ white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 100px; /* 버튼 최소 너비 */ text-align: center; } .sort-controls .sort-btn:hover { background-color: #dbe2e6; transform: translateY(-2px); /* 호버 시 약간 위로 뜨는 효과 */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 효과 */ } .sort-controls .sort-btn.active { background-color: #3498db; /* 활성 상태 배경색 */ color: #fff; /* 활성 상태 글자색 */ border-color: #3498db; /* 활성 상태 테두리 색 */ box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); /* 활성 상태 그림자 */ transform: translateY(-2px); /* 활성 상태에서도 약간 위로 뜨는 효과 */ } /* ==================== 뱃지 ==================== */ .profile-badge-container { position: relative; display: inline-flex; /* flex로 변경하여 내부 뱃지 정렬 유연성 확보 */ align-items: center; /* 세로 중앙 정렬 */ margin-left: 10px; cursor: pointer; white-space: nowrap; /* 뱃지+툴팁이 한 줄에 오도록 */ } /* 개별 뱃지 요소 (이미지 뱃지 또는 텍스트 뱃지) */ .profile-badge-item { display: flex; /* flex로 변경하여 내부 아이콘/텍스트 중앙 정렬 */ align-items: center; justify-content: center; line-height: 1; /* 높이 고정 방지 */ /* 뱃지 기본 크기 및 스타일 (개별 뱃지 타입에 따라 오버라이드) */ width: 35px; height: 35px; margin-right: 0px; /* 여러 뱃지 간 간격 */ } /* 뱃지 이미지 */ .profile-badge-item.badge-image { background-size: contain; background-repeat: no-repeat; background-position: center; } /* 툴팁 스타일 */ .profile-tooltip { position: absolute; /* 툴팁 위치는 자바스크립트로 동적으로 설정할 수 있도록 기본값만 */ bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #2f3136; color: white; padding: 6px 12px; border-radius: 6px; white-space: nowrap; font-size: 0.85rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; pointer-events: none; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } /* 말풍선 꼬리(삼각형) */ .profile-tooltip::after { content: ""; position: absolute; top: 100%; /* 툴팁 아래쪽 */ left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #2f3136 transparent transparent transparent; } /* 호버 시 툴팁 표시 */ .profile-badge-container:hover .profile-tooltip { opacity: 1; visibility: visible; pointer-events: auto; } /* ==================== 검색 섹션 ==================== */ .search-section { position: relative; /* search-section 자체는 relative 유지 (나중에 전체 화면 정렬 등) */ display: flex; flex-direction: column; /* 자식 요소를 세로로 배치: input-button-group만 중앙 정렬 */ align-items: center; /* 가로 중앙 정렬 */ gap: 15px; /* 세로 간격 유지 */ margin-bottom: 50px; } /* 새로운 입력 필드 + 버튼 그룹 */ .input-button-group { display: flex; align-items: center; gap: 10px; /* position: relative; 이젠 필요 없음 (validation-message가 이 안의 input-autocomplete-wrapper를 기준으로 잡음) */ width: auto; /* 내용물에 맞춰 너비 조정 */ justify-content: center; } /* 유효성 검사 메시지 스타일 */ .validation-message { font-size: 0.95rem; color: #e74c3c; /* 빨간색 텍스트 */ font-weight: 600; padding: 8px 12px; background-color: #ffe5e58c; /* 연한 빨강 배경 */ border: 1px solid #ffcccc; /* 빨간 테두리 */ border-radius: 8px; display: flex; align-items: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: absolute; /* 이 요소를 절대 위치로 만듭니다 */ bottom: calc(100% + 5px); /* input 요소 바로 위 5px 간격 */ left: 0; /* input 요소의 왼쪽 끝에 정렬 */ width: 100%; /* input 요소와 동일한 너비 유지 */ transform: translateY(10px); /* 초기 위치: 아래로 10px 이동하여 숨김 */ box-sizing: border-box; /* 패딩, 보더 포함 너비 계산 */ pointer-events: none; z-index: 100; /* 다른 요소 위에 표시 */ /* 줄 애니메이션을 위한 가상 요소 설정 */ &::after { content: ''; position: absolute; bottom: -2px; /* 메시지 하단에 위치 */ left: 0; height: 2px; background-color: #e74c3c; width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 3s ease-out; } } .validation-message.show { opacity: 1; visibility: visible; transform: translateY(0); /* 최종 위치: 제자리로 돌아옴 (아래에서 위로 나타나는 효과) */ /* 밑줄 애니메이션 트리거 */ &::after { transform: scaleX(1); } } .validation-message i { font-size: 1.2em; /* 아이콘 크기 */ } /* 새로운 래퍼 스타일 (input-autocomplete-wrapper) */ .input-autocomplete-wrapper { position: relative; /* 자동 완성 목록 및 유효성 메시지의 절대 위치를 위한 기준점 */ width: 300px; /* nicknameInput의 고정 너비와 일치 */ transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; z-index: 1000; } /* 검색창 래퍼에 호버 효과 */ .input-autocomplete-wrapper:hover { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* nicknameInput의 너비는 래퍼에 꽉 차도록 */ .search-section input[type="text"] { width: 100%; /* 래퍼의 100% 너비를 차지 */ padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1.1rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); transition: border-color 0.3s, box-shadow 0.3s; } /* 검색창 포커스 시 뉴모피즘 디자인 */ .search-section input[type="text"]:focus { border-color: #3498db; outline: none; box-shadow: 0px 2px 5px rgba(52, 152, 219, 0.2), inset 0px 0px 5px rgba(52, 152, 219, 0.3), 0px 0px 10px rgba(52, 152, 219, 0.1); } /* 자동 완성 목록 컨테이너 스타일 (래퍼 기준) */ .autocomplete-list { position: absolute; top: calc(100% + 2px); /* Input 바로 아래에 여유 공간 5px */ left: 0; width: 100%; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; background-color: #f6f6f6; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 0 0 8px 8px; display: none; } .autocomplete-list-item { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; font-size: 1rem; color: #333; transition: background-color 0.2s ease; } .autocomplete-list-item:last-child { border-bottom: none; border-radius: 0 0 8px 8px; } .autocomplete-list-item:hover, .autocomplete-active { background-color: #e9e9e9; color: #2c3e50; } /* ==================== 버튼 스타일 ==================== */ .btn-primary { background-color: #3498db; color: #fff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s, transform 0.2s; height: 44px; /* nicknameInput과 동일한 높이로 맞춰줌 */ line-height: 44px; /* 텍스트 세로 중앙 정렬을 위해 line-height도 높이에 맞춤 */ padding: 0 20px; /* 패딩 조정 */ flex-shrink: 0; /* 버튼이 줄어들지 않도록 */ } .btn-primary:hover { background-color: #2980b9; transform: translateY(-2px); } .btn-secondary { background-color: #7f8c8d; color: #fff; padding: 12px 25px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .btn-secondary:hover { background-color: #5e6060; transform: translateY(-2px); } /* 프로필 대시보드 (그리드 레이아웃) */ .profile-dashboard { background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 30px; display: grid; /* 그리드 컨테이너 */ grid-template-columns: 1fr; /* 초기 1단 설정 */ gap: 30px; margin-bottom: 50px; min-height: 400px; position: relative; overflow: hidden; /* 내부 요소가 넘치지 않도록 */ } /* 초기 검색 메시지 (그리드 아이템 내에서 절대 위치로 중앙 정렬) */ .profile-dashboard .no-results-message { position: static; /* absolute 포지션 해제 */ width: 100%; /* 너비는 부모에 맞춰 전체 사용 */ height: 100%; text-align: center; font-size: 1.2rem; color: #555; margin: 0; padding: 30px; /* 충분한 패딩으로 여유 공간 확보 */ display: flex; /* 내부 텍스트 중앙 정렬을 위해 */ justify-content: center; align-items: center; min-height: 200px; /* 메시지가 충분히 보이도록 높이 확보 */ z-index: 10; box-sizing: border-box; background-color: #fff; /* 배경색 추가로 시각적 통일성 유지 */ border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); } /* 닉네임 찾을 수 없을 때의 메시지 - 기본 스타일 외에 특별한 상자 모양을 갖지 않음 */ /* `.profile-dashboard` 내에서 가운데 정렬되는 초기 메시지 역할을 할 때 사용됩니다. */ #initialSearchMessage { position: absolute; /* 절대 위치로 띄워서 중앙 정렬 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 정확히 중앙 정렬 */ width: calc(100% - 0px); /* .profile-dashboard의 padding 30px*2 고려 */ min-height: 150px; /* 메시지 컨테이너의 최소 높이 확보 */ background-color: #fff; /* 배경색 */ border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 30px; /* 내용물 패딩 */ box-sizing: border-box; display: flex; /* 내부 텍스트를 flex로 가운데 정렬 */ justify-content: center; align-items: center; text-align: center; font-size: 1.2rem; color: #555; z-index: 100; /* 다른 요소 위에 오도록 z-index 설정 */ } .no-results-message.error { color:#e74c3c !important; } /* 데이터 비교 불가능 섹션 내의 오류 메시지 (상자 모양) */ #comparisonResults .no-results-message.error { grid-column: 1 / -1; /* 그리드 전체 너비 차지 */ position: static !important; /* absolute 포지션 해제 */ transform: none !important; left: unset !important; top: unset !important; z-index: auto !important; height: auto !important; /* 높이 자동 조절 */ font-size: 1.0rem !important; /* 다른 텍스트와 어울리게 1.0rem */ color: #e74c3c !important; /* 오류 메시지 색상 */ text-align: center !important; word-break: keep-all !important; /* 단어 잘림 방지하여 가독성 향상 */ line-height: 1.4 !important; margin-top: 5px !important; /* `.comparison-results-header`와의 간격 조정 */ margin-bottom: 0 !important; padding: 15px !important; /* 오류 메시지 자체의 내부 패딩 */ background-color: #ffebee !important; /* 오류 메시지 배경색으로 시각적 구분 */ border: 1px solid #ef9a9a !important; /* 테두리 */ border-radius: 8px !important; /* 둥근 모서리 */ box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* 가벼운 그림자 */ max-width: 100% !important; /* 부모의 100% 사용 */ box-sizing: border-box !important; display: flex !important; /* 내부 텍스트 정렬을 위해 flex 사용 */ align-items: center !important; justify-content: center !important; } /* 부계정 선택 컨테이너 (탭 형태로 변경) */ .account-selector-container { grid-column: 1 / -1; /* 기본적으로 그리드 전체 너비 사용 */ text-align: center; width: 100%; /* 부모의 전체 너비 */ display: none; /* JS에서 필요할 때 display: block */ } .account-selector-title { font-size: 1.1rem; color: #2c3e50; margin-bottom: 10px; font-weight: 600; } .job-selection-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } .job-selection-tabs .tab-button { background-color: #ecf0f1; color: #34495e; padding: 10px 20px; border: 1px solid #ccc; border-radius: 20px; /* 둥근 버튼 */ cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ } .job-selection-tabs .tab-button:hover { background-color: #dbe2e6; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .job-selection-tabs .tab-button.active { background-color: #3498db; color: #fff; border-color: #3498db; box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); transform: translateY(-2px); } /* 유저 프로필 카드 크기 조정 및 그리드 아이템 */ .user-profile-card { background-color: #fdfdfd; border-radius: 10px; padding: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); text-align: center; border: 1px solid #eee; height: fit-content; max-width: 380px; /* 프로필 카드 최대 너비 제한 */ justify-self: start; /* 그리드 시작점에 정렬 (왼쪽) */ display: none; /* JS에서 필요할 때 display: block */ } .profile-summary { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 25px; } .user-skin { width: 96px; /* 마크 스킨 기본 크기 */ height: 96px; border-radius: 50%; /* 동그란 스킨 */ border: 4px solid #3498db; background-color: #eee; /* 로딩 중 배경색 */ object-fit: cover; image-rendering: pixelated; /* 픽셀 깨짐 방지 */ transform: translateY(0px); /* 스킨 10px 아래로 이동 */ } .user-skin.loaded { width: 96px; /* 마크 스킨 기본 크기 */ height: 96px; border-radius: 50%; /* 동그란 스킨 */ border: 4px solid #3498db; background-color: #eee; /* 로딩 중 배경색 */ object-fit: cover; image-rendering: pixelated; /* 픽셀 깨짐 방지 */ transform: translateY(0px); /* 스킨 10px 아래로 이동 */ object-position: 50% 5px; } .user-info h3 { font-size: 1.8rem; color: #2c3e50; margin-bottom: 10px; } .user-info p { font-size: 1.05rem; color: #555; line-height: 1.6; margin-bottom: 5px; } .user-info p strong { color: #333; } .combat-power-stats { border-top: 1px solid #eee; padding-top: 20px; text-align: left; } .combat-power-stats p { font-size: 1rem; color: #666; margin-bottom: 8px; display: flex; justify-content: space-between; } .combat-power-stats p span { font-weight: 600; color: #333; } /* 데이터 변화 추이 섹션 (프로필 바로 옆 작은 상자들) */ .comparison-section { background-color: #fff; /* 배경색 통일 */ border-radius: 12px; /* 둥근 모서리 통일 */ box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 그림자 통일 */ padding: 30px; /* 패딩 통일 */ border: 1px solid #eee; display: none; /* JS에서 필요할 때 display: block */ max-width: 550px; /* 가로 너비 확장 */ justify-self: start; /* 그리드 시작점 정렬 (프로필 옆) */ } .comparison-title { font-size: 1.6rem; color: #2c3e50; margin-bottom: 20px; text-align: center; } .comparison-buttons { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .comparison-buttons .comparison-btn.active { background-color: #3498db; color: #fff; } .comparison-results { /* 작은 상자들을 담는 그리드 컨테이너 */ display: grid; grid-template-columns: repeat(2, 1fr); /* 2열 배치 */ gap: 15px; /* 상자들 간의 간격 */ margin-top: 20px; min-height: 160px; /* 메시지가 떴을 때도 최소 높이 유지 */ align-content: start; /* 콘텐츠가 상단에서 시작하도록 */ } .comparison-results .initial-comparison-message { /* 이 메시지도 그리드 아이템으로 */ grid-column: 1 / -1; /* 그리드 전체 너비 사용 */ text-align: center; font-size: 1.1rem; color: #555; margin: 0; /* 마진 초기화 */ padding: 15px; /* 충분한 패딩 제공 */ display: flex; /* 내부 텍스트 중앙 정렬을 위해 */ justify-content: center; align-items: center; min-height: 100px; /* 메시지가 충분히 보이도록 높이 확보 */ background-color: #f8f8f8; /* 배경색 추가 */ border-radius: 8px; /* 둥근 모서리 */ /* 여기에서는 position: absolute를 제거하고 레이아웃 흐름에 맞게 배치 */ position: static; transform: none; left: unset; top: unset; z-index: auto; } .comparison-results .comparison-results-header { /* 비교 날짜/기간을 표시하는 메시지 스타일 */ grid-column: 1 / -1; /* 그리드 전체 너비 차지 (기존 유지) */ font-size: 1.1rem; font-weight: 600; color: #2c3e50; margin-bottom: 0; /* 아래 오류 메시지와의 간격은 오류 메시지 자체 스타일로 조절 */ padding-bottom: 5px; /* 헤더 아래에 약간의 패딩을 주어 아래 메시지와의 시각적 간격 확보 */ text-align: center; box-sizing: border-box; } .comparison-item { /* 각 변화 수치 상자 */ display: flex; flex-direction: column; /* 내용이 세로로 쌓이도록 */ align-items: center; /* 가운데 정렬 */ justify-content: center; padding: 15px 10px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f8f9fa; box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 그림자 강화 */ margin: 0; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .comparison-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .comparison-item .label { /* 글씨 작게 */ font-weight: 700; color: #555; margin-bottom: 5px; font-size: 1rem; /* 라벨 글씨 작게 */ } .comparison-item .value { /* 숫자 크게 */ font-weight: 700; font-size: 1.5rem; /* 숫자 글씨 크게 */ color: #2c3e50; line-height: 1.2; } .comparison-item .value .change-icon { margin-left: 8px; font-size: 0.9em; } .change-up { color: #2ecc71; /* 초록색 */ } .change-down { color: #e74c3c; /* 빨간색 */ } .change-same { color: #7f8c8d; /* 회색 */ } /* 그래프 섹션 (탭 인터페이스) */ .charts-wrapper { grid-column: 1 / -1; /* 그리드 전체 너비 차지 */ margin-top: 30px; display: none; /* JS에서 필요할 때 display: block */ max-width: 1000px; /* 그래프 래퍼 최대 너비 제한 */ justify-self: center; /* 그리드 내 중앙 정렬 */ } .chart-controls { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 20px; margin-bottom: 20px; background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .chart-selection-tabs { display: flex; gap: 10px; flex-wrap: wrap; } .chart-data-toggle, .chart-time-filter { display: flex; align-items: center; gap: 10px; /* 요소들 사이의 간격 조정 */ flex-wrap: wrap; } /* chart-data-toggle label에 버튼 스타일 적용 */ .chart-data-toggle label { background-color: #ecf0f1; color: #34495e; padding: 8px 15px; border: 1px solid #ccc; border-radius: 20px; /* 둥근 모서리 */ font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; /* 아이콘과 텍스트 정렬 */ align-items: center; gap: 8px; /* 아이콘과 텍스트 사이 간격 */ user-select: none; /* 텍스트 선택 방지 */ } .chart-data-toggle label:hover:not(.disabled-option) { /* 비활성화 상태에서는 hover 효과 없음 */ background-color: #dbe2e6; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .chart-data-toggle input[type="checkbox"] { /* 실제 체크박스를 시각적으로 숨깁니다 */ position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 체크박스 상태에 따라 label 스타일 변경 */ .chart-data-toggle label:has(input[type="checkbox"]:checked) { /* :has() 가상 클래스 활용 */ background-color: #3498db; color: #fff; border-color: #3498db; box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3); } .chart-data-toggle label:has(input[type="checkbox"]:checked) i, .chart-data-toggle label:has(input[type="checkbox"]:checked) span { color: #fff; } .chart-data-toggle label i { /* 아이콘 기본 스타일 */ font-size: 1.1rem; color: #7f8c8d; /* 기본 아이콘 색상 */ transition: color 0.3s ease; } /* 비활성화된 체크박스 label 스타일 */ .chart-data-toggle label.disabled-option { background-color: #f2f2f2; /* 회색 배경 */ color: #b0b0b0; /* 흐릿한 글자색 */ border-color: #e0e0e0; cursor: not-allowed; /* 마우스 커서 변경 */ box-shadow: none; pointer-events: none; /* 클릭 이벤트 방지 (JS에서도 처리) */ opacity: 0.7; /* 조금 투명하게 */ } .chart-data-toggle label.disabled-option i, .chart-data-toggle label.disabled-option span { color: #b0b0b0; /* 비활성화 아이콘 및 텍스트 색상 */ } /* 커스텀 select 스타일 */ .chart-time-filter label { /* 기간 라벨 */ font-size: 0.95rem; color: #555; white-space: nowrap; font-weight: 600; margin-right: 5px; /* 드롭다운과의 간격 */ } .chart-time-filter select { appearance: none; /* 기본 브라우저 스타일 제거 */ background-color: #ecf0f1; color: #34495e; padding: 8px 15px; border: 1px solid #ccc; border-radius: 20px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2334495e' d='M9.293 12.95l1.414 1.414L15.414 10l-4.707-4.707-1.414 1.414L12.586 10z'/%3E%3C/svg%3E"); /* 커스텀 화살표 아이콘 */ background-repeat: no-repeat; background-position: right 10px center; background-size: 1.2em; padding-right: 30px; /* 화살표 아이콘 공간 확보 */ min-width: 120px; /* 최소 너비 지정 */ } .chart-time-filter select:hover { background-color: #dbe2e6; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .chart-time-filter select:focus { border-color: #3498db; outline: none; } /* 기존 .chart-tab-button 스타일은 그대로 유지됩니다 */ .chart-tab-button { background-color: #ecf0f1; color: #34495e; padding: 10px 20px; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; white-space: nowrap; } .chart-tab-button:hover { background-color: #dbe2e6; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .chart-tab-button.active { background-color: #3498db; color: #fff; border-color: #3498db; box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); transform: translateY(-2px); } /* 토스트 메시지 스타일 추가 (script.js의 showToast와 함께 사용) */ #toast-message-container { position: fixed; bottom: 30px; /* 화면 하단에 표시 */ left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; pointer-events: none; /* 클릭 방지 */ } .toast-message { background-color: rgba(44, 62, 80, 0.9); /* 어두운 배경 */ color: #fff; padding: 12px 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); font-size: 1rem; opacity: 0; /* 초기에는 숨김 */ visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(20px); /* 아래에서 위로 나타나는 효과 */ margin-bottom: 10px; /* 여러 토스트 메시지 대비 */ white-space: nowrap; } .toast-message.show { opacity: 1; visibility: visible; transform: translateY(0); } .charts-container { position: relative; /* 자식 요소의 absolute 기준점 */ display: flex !important; /* JS에서 block으로 강제할 경우 대비해 !important 추가 */ justify-content: center !important; /* 강제 중앙 정렬 */ align-items: center !important; /* 강제 중앙 정렬 */ min-height: 400px; /* 그래프 영역 최소 높이 */ background-color: #fdfdfd; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #eee; padding: 20px; overflow: hidden; } .charts-container .chart-box { /* 각 개별 그래프 상자 */ display: none; /* 기본적으로 모든 차트 상자 숨김 */ flex-direction: column; align-items: center; width: 100%; max-width: 800px; /* 그래프 캔버스의 최대 너비 제한 */ aspect-ratio: 16 / 10; /* 너비 16에 높이 10 비율 */ } .charts-container .chart-box.active { display: flex; /* 활성화된 차트 상자만 표시 */ } .charts-container .chart-box h3 { flex-shrink: 0; margin-bottom: 15px; font-size: 1.5rem; text-align: center; } .charts-container .chart-box canvas { flex-grow: 1; width: 100% !important; /* Chart.js의 인라인 스타일 재정의 */ height: 100% !important; /* height: 100% 추가 */ max-height: 100% !important; /* max-height: 100% 추가 */ object-fit: contain; /* 캔버스 내용이 잘리지 않고 컨테이너에 맞게 */ } /* --- #chartMessageOverlay: 메시지 오버레이 --- */ #chartMessageOverlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; /* 배경 투명 (유지) */ display: flex; align-items: center; justify-content: center; text-align: center; z-index: 10; display: none; /* JS에서 제어 */ } #chartMessageText.no-results-message { color: red; /* 빨간색 글씨 (유지) */ font-size: 1.2em; } /* 서버 전체 통계 섹션 */ .guild-overview-content { display: grid; grid-template-columns: 1fr; grid-template-areas: "summary" "chart-area-group" "level-analysis"; gap: 30px; margin-top: 40px; background-color: transparent; border-radius: 12px; box-shadow: none; padding: 0; } /* 992px 이상 화면에서 2단 레이아웃 (summary-cards 제외한 나머지) */ @media (min-width: 992px) { .guild-overview-content { grid-template-columns: 2fr 1fr; /* guild-chart-area 그룹이 레벨 분석보다 2배 넓게 */ grid-template-areas: "summary summary" "chart-area-group level-analysis"; /* 직업분포 그룹과 레벨 분석이 나란히 */ padding: 20px; /* 전체 섹션의 내부 여백 */ background-color: #fff; /* 전체 섹션의 배경 */ box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 전체 섹션의 그림자 */ grid-template-rows: auto 1fr; /* summary는 콘텐츠 높이, 나머지는 사용 가능한 공간을 동일하게 배분 */ align-items: stretch; /* 그리드 아이템들이 높이를 꽉 채우도록 명시 */ } /* .guild-overview-content의 직속 자식 요소들이 grid-area를 가지도록 재구성 */ /* .guild-summary-cards와 .guild-chart-area (그룹), .level-analysis-section */ .guild-summary-cards { grid-area: summary; } /* guild-chart-area 그룹은 이미 .guild-overview-content 내에 위치함 */ .guild-chart-area { /* 여기서는 group 이라는 의미 */ grid-area: chart-area-group; /* 그리드 영역 지정 (그룹) */ height: 100%; /* 부모 그리드 행의 높이를 꽉 채우도록 */ } .level-analysis-section { grid-area: level-analysis; height: 100%; /* 부모 그리드 행의 높이를 꽉 채우도록 */ } } .guild-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 10px; text-align: center; } .summary-card { background-color: #fff; padding: 25px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #e0e0e0; } .summary-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); } .summary-card h4 { font-size: 1.2rem; color: #3498db; margin-bottom: 10px; } /* summary-card p 내부 요소 정렬 및 높이 조정 */ .summary-card p { line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; /* 초기에 중앙 정렬 */ margin: 0; min-height: 50px; /* 변화량이 나타날 공간 확보 (값과 변화량 합친 대략적인 높이) */ position: relative; /* 자식 요소의 transform 기준 */ } /* 주요 통계 값 스타일 (초기 상태) */ .summary-card p .main-stat-value { font-size: 1.6rem; font-weight: 700; color: #2c3e50; line-height: 1.2; transition: transform 0.3s ease-out; /* 호버 시 이동을 위한 트랜지션 */ } /* 변화량 표시 스타일 (초기 상태: 숨겨짐) */ .stat-change { font-size: 1.3em; /* 1.3em에서 0.9em으로 조정하여 주요 값보다 작게 */ font-weight: 600; display: flex; align-items: center; gap: 2px; line-height: 1; color: #7f8c8d; position: absolute; /* 값 아래로 내려가도록 절대 위치 지정 */ opacity: 0; /* 초기에는 투명하게 */ visibility: hidden; /* 초기에는 숨김 처리 */ transform: translateY(calc(100% + 5px)); /* 초기 위치는 값 아래로 내려가 숨겨진 상태 */ transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out; /* 나타나는 모션 */ white-space: nowrap; /* 텍스트 줄바꿈 방지 */ } /* 호버 시 .main-stat-value의 이동 */ .summary-card:hover p .main-stat-value { transform: translateY(-40%); /* 호버 시 위로 이동 */ } /* 호버 시 .stat-change 나타나기 */ .summary-card:hover p .stat-change { opacity: 1; visibility: visible; transform: translateY(100%); /* 나타나는 최종 위치 (값 아래) */ margin-top: 5px; /* 값과 변화량 사이 간격 (필요시) */ } .stat-change.change-up { color: #2ecc71; } /* 증가 시 초록색 */ .stat-change.change-down { color: #e74c3c; } /* 감소 시 빨간색 */ .stat-change.change-same { color: #7f8c8d; } /* 변화 없을 시 회색 */ .stat-change i { margin-left: 8px; font-size: 0.9em; /* 부모 폰트 크기 기준 */ } /* 직업 분포 그룹 (차트 + 순위) 컨테이너 */ .guild-chart-area { background-color: #fdfdfd; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 20px; border: 1px solid #e0e0e0; display: flex; flex-direction: column; /* 모바일 우선: 세로 정렬 */ gap: 20px; height: 100%; /* 부모 그리드 행의 높이를 꽉 채우도록 */ min-height: 250px; } /* 직업 분포 원형 차트 (개별 상자) */ .guild-chart-area .chart-box.guild-chart-box { /* 원형 그래프 */ flex-basis: 40%; flex-grow: 1; min-width: 200px; max-width: 100%; background-color: #fff; padding: 0px 20px 20px 20px; /* 상자 패딩 (제목 위에 패딩은 h3 margin으로 제어) */ border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #eee; width: auto; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; /* 제목이 상단에서 시작하도록 */ height: 100%; } .guild-chart-area .chart-box.guild-chart-box h3 { font-size: 1.4rem; color: #2c3e50; margin-top: 20px; /* 상단 패딩 대신 제목 자체의 마진으로 위치 제어 */ margin-bottom: 15px; text-align: center; flex-shrink: 0; justify-content: center; } .guild-chart-area canvas { /* 캔버스 크기 조정 */ max-height: 250px; max-width: 250px; height: auto; width: 100%; flex-grow: 1; } /* 직업 순위 목록 (개별 상자) */ .guild-chart-area .job-distribution-list { /* 직업 분포 목록 */ flex-basis: 55%; flex-grow: 2; background-color: #fff; border: 1px solid #eee; border-radius: 8px; padding: 0px 20px 20px 20px; /* 상자 패딩 (제목 위에 패딩은 h3 margin으로 제어) */ box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: left; overflow-y: auto; max-width: none; height: 100%; display: flex; flex-direction: column; justify-content: center; /* 콘텐츠를 수직 중앙에 정렬 */ } .job-distribution-list h3 { font-size: 1.4rem; color: #2c3e50; margin-top: 20px; /* 상단 패딩 대신 제목 자체의 마진으로 위치 제어 */ margin-bottom: 20px; /* 직업 순위 목록과의 간격 유지 */ text-align: center; flex-shrink: 0; } .job-distribution-list ol { list-style-type: none; padding: 0; margin: 0; flex-grow: 0; display: flex; flex-direction: column; justify-content: center; } /* 직업 순위 li 항목 정렬 */ .job-distribution-list li { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed #e0e0e0; font-size: 1rem; color: #444; } .job-distribution-list li:last-child { border-bottom: none; } .job-distribution-list li .job-name { font-weight: 600; flex-grow: 1; text-align: left; min-width: 80px; padding-right: 10px; /* 직업 이름과 숫자 사이의 최소 간격 확보 */ } /* 값과 변화량을 담는 래퍼 */ .job-distribution-list li .job-stats { display: flex; align-items: baseline; flex-shrink: 0; gap: 10px; /* "N명"과 "변화량" 사이 10px 간격 */ /* min-width는 job-value와 job-change-value에 주어 전체 너비 조절 */ } /* "N명" 부분을 위한 스타일 */ .job-distribution-list li .job-stats .job-value { color: #3498db; font-weight: 700; /* 굵기 유지 */ white-space: nowrap; /* 줄바꿈 방지 */ min-width: 40px; /* "N명"이 들어갈 최소 너비. 값의 길이에 따라 가변 너비 */ text-align: right; /* "N명"을 오른쪽으로 정렬하여 세로줄 맞춤 */ } /* "(변화량)" 부분을 위한 스타일 */ .job-distribution-list li .job-stats .job-change-value { font-weight: 700; /* 굵기 유지 (normal -> 700) */ font-size: 0.9em; white-space: nowrap; /* 줄바꿈 방지 */ min-width: 50px; /* "(변화량)"이 들어갈 최소 너비. 값의 길이에 따라 가변 너비 */ text-align: left; /* "(변화량)"을 왼쪽으로 정렬 */ } /* 변화량 색상 클래스는 기존처럼 유지 */ .job-distribution-list li .job-stats .job-change-value.change-up { color: #2ecc71; } .job-distribution-list li .job-stats .job-change-value.change-down { color: #e74c3c; } .job-distribution-list li .job-stats .job-change-value.change-same { color: #7f8c8d; } /* 레벨별 통계 분석 섹션 */ .level-analysis-section { grid-area: level-analysis; background-color: #fdfdfd; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 0px 20px 20px 20px; /* 상자 패딩 (제목 위에 패딩은 h3 margin으로 제어) */ border: 1px solid #e0e0e0; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 250px; } .level-analysis-section h3 { font-size: 1.6rem; color: #2c3e50; margin-top: 20px; /* 상단 패딩 대신 제목 자체의 마진으로 위치 제어 */ margin-bottom: 20px; text-align: center; flex-shrink: 0; } /* 레벨 조정 버튼들 위치 변경 */ .level-analysis-controls { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 10px; background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); flex-shrink: 0; /* 버튼 그룹이 축소되지 않도록 */ } .level-analysis-controls label { font-size: 1rem; color: #555; white-space: nowrap; margin-bottom: 5px; } #currentAnalyzedLevel { font-size: 1.2rem; font-weight: 700; color: #3498db; margin: 0 5px; } .level-control-buttons { display: flex; gap: 5px; } .level-change-btn { padding: 8px 12px; font-size: 0.95rem; min-width: 40px; } #resetLevelAnalysis { padding: 8px 15px; font-size: 0.95rem; display: flex; /* 상하 중앙 정렬 */ align-items: center; /* 가운데 정렬 */ max-height: 38px; } .level-analysis-results { background-color: #f8f9fa; border-radius: 8px; padding: 15px; margin-top: 10px; /* min-height: 120px; min-height 제거 또는 auto로 변경 */ height: 100%; /* flex item으로 부모 공간을 채우도록 */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: left; border: 1px solid #eee; flex-grow: 1; /* 남은 공간을 채우도록 */ } .level-analysis-results ul { list-style-type: none; padding: 0; margin: 15px 0 0 0; max-width: 400px; width: 100%; } .level-analysis-results li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e0e0e0; font-size: 1rem; color: #444; } .level-analysis-results li:last-child { border-bottom: none; } .level-analysis-results li strong { color: #2c3e50; } .level-analysis-results li span { color: #3498db; font-weight: 700; } /* 서버 TOP 10 랭킹 리스트 */ .top10-ranking-list { background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; min-height: 200px; /* 로딩 메시지 등을 위한 최소 높이 */ } .top10-ranking-item { display: flex; align-items: center; background-color: #f8f9fa; border: 1px solid #eee; border-radius: 8px; padding: 15px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; } .top10-ranking-item:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .top10-ranking-item img.rank-skin { width: 48px; height: 48px; border-radius: 50%; margin-right: 15px; border: 2px solid #3498db; object-fit: contain; image-rendering: pixelated; transform: translateY(0px); /* 스킨 10px 아래로 이동 */ object-position: 50% 3px; } .top10-ranking-item .rank-info { flex-grow: 1; text-align: left; } .top10-ranking-item .rank-info h4 { font-size: 1.2rem; color: #2c3e50; margin: 0 0 5px 0; } .top10-ranking-item .rank-info p { font-size: 0.95rem; color: #555; margin: 0; } .top10-ranking-item .rank-number { font-size: 1.5rem; font-weight: 700; color: #3498db; margin-right: 15px; width: 30px; /* 랭킹 숫자 고정 너비 */ text-align: right; flex-shrink: 0; /* 넘버가 줄어들지 않도록 */ } /* 모바일 반응형 */ @media (min-width: 992px) { .profile-dashboard { grid-template-columns: minmax(320px, 380px) minmax(400px, 1fr); /* 프로필(고정)과 변화추이(유동) 너비 조정 */ grid-template-areas: "accountSelector accountSelector" "userProfile profileComparison" "charts charts"; /* 차트 영역은 그 아래에 전체 너비로 */ justify-items: start; /* 그리드 시작점에 아이템 정렬 */ gap: 20px 30px; /* 행과 열 간격 조정 */ } /* 개별 그리드 아이템 위치 지정 */ .account-selector-container { grid-area: accountSelector; justify-self: center; max-width: 100%; min-width: unset; } .user-profile-card { grid-area: userProfile; justify-self: end; align-self: stretch; /* 세로 길이 맞추기 */ display: flex; flex-direction: column; justify-content: space-between; /* 내용 배분 */ width: 88%; /* 필요에 따라 원하는 너비 설정 */ box-sizing: border-box; /* 패딩과 보더 포함 너비 계산 */ } .comparison-section { grid-area: profileComparison; margin-top: 0; justify-self: stretch; /* 가로 채우고 */ align-self: stretch; /* 세로 길이 맞추기 */ width: 93%; max-width: unset; /* max-width 해제하여 가로로 늘림 */ } .charts-wrapper { grid-area: charts; margin-top: 30px; width: 100%; /* 부모 그리드 영역 내에서 최대한 차지 */ } .charts-container { min-height: 450px; /* 그래프 컨테이너 최소 높이 */ } .guild-overview-content { display: grid; /* 기존 flex에서 grid로 변경 */ grid-template-columns: 1fr minmax(300px, 400px); /* 왼쪽: 요약 카드, 오른쪽: 차트 및 목록 */ grid-template-areas: "summaryArea summaryArea" /* 요약 카드는 항상 상단 전체 */ "chartAndList analysisArea"; /* 아래에 직업차트/리스트와 레벨분석이 나란히 */ gap: 20px; align-items: start; /* 컨텐츠 상단 정렬 */ padding: 0; /* 내부 패딩은 각 섹션에서 처리 */ box-shadow: none; /* 최상위 컨테이너이므로 그림자 없음 */ background-color: transparent; /* 배경색 투명 */ } .guild-summary-cards { grid-area: summaryArea; padding: 30px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); } .guild-chart-area { /* 직업분포 차트와 목록을 감싸는 컨테이너 */ grid-area: chartAndList; /* 그리드 영역 이름 변경 */ display: grid; grid-template-columns: minmax(300px, 1fr) minmax(200px, 1fr); /* 차트와 목록이 옆으로 */ gap: 20px; min-height: unset; /* 이제 grid-area에 맞게 조정 */ background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); padding: 30px; } .guild-chart-area .chart-box.guild-chart-box { /* 원형 그래프 */ max-width: 100%; /* 부모 그리드 셀에 맞춰 */ height: auto; min-height: 300px; /* 최소 높이 설정 */ } .job-distribution-list { /* 직업 분포 목록 */ max-width: 100%; } .level-analysis-section { grid-area: analysisArea; margin-top: 0; /* 이제 그리드 안에 있으므로 마진 초기화 */ } } /* ==================== 모바일 전용 미디어 쿼리 (480px 이하) ==================== */ /* 전역 box-sizing: border-box 적용 권장 (스타일시트 최상단에 한번만 선언) */ *, *::before, *::after { box-sizing: border-box; } /* 모바일 전용 오버플로우 숨김 (강제) */ body, html { overflow-x: hidden !important; } @media (max-width: 720px) { #userProfileCard { max-width: 100% !important; justify-self: center !important; padding: 8px !important; gap: 5px !important; box-sizing: border-box !important; min-height: unset !important; flex-direction: column !important; align-items: center !important; } #comparisonSection { max-width: 100% !important; /* 할당된 공간 내에서 최대 너비 */ padding: 8px !important; /* 내부 패딩 줄임 */ box-sizing: border-box !important; min-height: unset !important; justify-self: center !important; } } @media (max-width: 480px) { .profile-badge-item { width: 24px; height: 24px; } .guild-overview-content { grid-template-columns: 1fr !important; /* 480px 이하에서는 1단으로 쌓기 */ grid-template-areas: "summaryArea" "chartAndList" "analysisArea" !important; /* 요약카드, 직업분포 그룹, 레벨분석이 세로로 */ padding: 5px !important; /* 전체 섹션의 내부 여백을 극도로 줄임 */ gap: 10px !important; /* 그리드 간격 최소화 */ max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; /* 내부 오버플로우 발생 시 숨김 */ } /* --- 개별 서브 섹션 컨테이너 조정 (480px 전용) --- */ .guild-summary-cards { grid-area: summaryArea; padding: 5px !important; /* 내부 패딩 최소화 */ gap: 5px !important; /* 카드 간 간격 최소화 */ grid-template-columns: repeat(2, 1fr) !important; /* 2x2 레이아웃 유지 */ max-width: 100% !important; box-sizing: border-box !important; } .summary-card { padding: 5px !important; /* 카드 내부 패딩 최소화 */ min-width: unset !important; /* 최소 너비 해제 */ max-width: 100% !important; font-size: 0.8rem !important; /* 폰트 극도로 작게 */ } .summary-card h4 { font-size: 0.8rem !important; /* 폰트 극도로 작게 */ margin-bottom: 3px !important; } .summary-card p .main-stat-value { font-size: 1.1rem !important; /* 폰트 극도로 작게 */ } .stat-change { font-size: 1.1em !important; /* 폰트 극도로 작게 */ } .guild-chart-area { grid-template-columns: 1fr 2fr !important; /* 차트 1fr, 목록 2fr로, 목록에 훨씬 더 많은 공간 할당 */ flex-direction: column !important; padding: 5px !important; gap: 3px !important; /* 내부 간격을 3px로 최소화 */ max-width: 100% !important; box-sizing: border-box !important; min-height: unset !important; } /* --- 프로필 대시보드 (`profileDashboard`) 섹션 --- */ #profileDashboard { padding: 10px !important; /* 프로필 대시보드 전체 패딩 줄임 */ gap: 10px !important; /* 내부 요소 간 간격 줄임 */ margin-bottom: -20px !important; /* 프로필 대시보드 아래 여백을 10px로 축소 */ } #guild-stats-overview { padding: 5px !important; } /* "profile-and-comparison" 영역 정의 (프로필 카드와 변화 추이를 나란히) */ .profile-and-comparison-wrapper { /* 이 래퍼를 새로 정의하여 grid-area에 할당 */ grid-area: profile-and-comparison; grid-template-columns: 1fr 1fr !important; /* 두 요소를 1:1 비율로 나란히 배치 */ gap: 5px !important; /* 내부 요소 간 간격 */ max-width: 100% !important; box-sizing: border-box !important; align-items: start; /* 콘텐츠 상단 정렬 */ } /* 계정 선택 버튼 (`.tab-button`) 크기 조절 */ .job-selection-tabs { gap: 5px !important; /* 버튼들 사이 간격 줄임 */ flex-wrap: wrap !important; justify-content: center !important; } .job-selection-tabs .tab-button { font-size: 1rem !important; /* 폰트 크기를 0.7rem으로 줄임 */ padding: 4px 8px !important; /* 패딩도 줄임 */ white-space: nowrap !important; /* 텍스트 줄바꿈 방지 */ max-width: calc(50% - 5px) !important; /* 한 줄에 2개씩 최대 배치 (gap 고려) */ box-sizing: border-box !important; } /* 유저 프로필 카드 (`user-profile-card`) */ #userProfileCard { max-width: 100% !important; justify-self: center !important; padding: 8px !important; gap: 5px !important; box-sizing: border-box !important; min-height: unset !important; flex-direction: column !important; align-items: center !important; } .profile-summary { display: flex !important; /* flex로 변경하여 내부 요소 정렬 */ flex-direction: column !important; /* 세로로 쌓이도록 */ align-items: center !important; /* 중앙 정렬 */ gap: 3px !important; margin-bottom: 5px !important; } .user-skin { width: 50px !important; height: 50px !important; border-width: 2px !important; } .user-info { text-align: left !important; /* user-info 블록 자체는 왼쪽 정렬 (내부 p에 flex 적용 예정) */ width: 100% !important; /* 할당된 공간을 최대한 차지하도록 */ } .user-info h3 { font-size: 0.9rem !important; margin-bottom: 1px !important; text-align: center !important; /* 닉네임만 다시 중앙 정렬 */ } .user-info p { font-size: 0.9rem !important; /* 폰트 크기 유지 (1rem) */ line-height: 1.1 !important; margin-bottom: 0px !important; display: flex !important; /* Flexbox로 변경 */ justify-content: space-between !important; /* 좌우 끝으로 정렬 */ align-items: baseline !important; /* 텍스트 베이스라인에 맞춰 수직 정렬 */ } .user-info p strong { margin-right: 20px !important; /* "랭킹:" 뒤에 여백 추가 */ } .combat-power-stats { padding-top: 5px !important; border-top: 1px solid #eee !important; width: 100% !important; text-align: left !important; /* combat-power-stats 블록 자체도 왼쪽 정렬 */ } .combat-power-stats p { font-size: 0.9rem !important; /* 폰트 크기 유지 (1rem) */ margin-bottom: 0px !important; display: flex !important; /* Flexbox로 변경 */ justify-content: space-between !important; /* 좌우 끝으로 정렬 */ align-items: baseline !important; /* 텍스트 베이스라인에 맞춰 수직 정렬 */ } .combat-power-stats p strong { margin-right: 5px !important; /* "직업:" 뒤에 여백 추가 */ } /* 유저 프로필 값 폰트 크기 조절 */ .user-info p span, .combat-power-stats p span { /* p 태그 안의 span에만 폰트 크기를 적용 */ font-size: 0.9rem !important; /* "10등", "Lv. 49" 등의 값 폰트 크기를 0.7rem으로 줄임 */ } /* 데이터 변화 추이 섹션 (`comparisonSection`) --- 기존 HTML 구조 유지 */ #comparisonSection { max-width: 100% !important; /* 할당된 공간 내에서 최대 너비 */ padding: 8px !important; /* 내부 패딩 줄임 */ box-sizing: border-box !important; min-height: unset !important; justify-self: center !important; } .comparison-title { font-size: 0.8rem !important; margin-top: 5px !important; } /* 데이터 변화 추이 버튼 크기 및 글씨 조절 */ .comparison-buttons { gap: 3px !important; /* 버튼 간격 줄임 */ margin-bottom: 5px !important; } .comparison-buttons .comparison-btn { font-size: 0.8em !important; /* 폰트 크기 줄임 */ padding: 8px 10px !important; /* 패딩 줄임 */ min-width: unset !important; /* 필요시 최소 너비 제한 해제 */ flex-shrink: 1 !important; /* 공간이 부족하면 줄어들도록 허용 */ max-width: calc(33.33% - 2px) !important; /* 한 줄에 3개 배치 (gap 고려) */ } .comparison-results { gap: 3px !important; margin-top: 15px !important; } .comparison-item { padding: 5px 3px !important; } .comparison-item .label { font-size: 0.6rem !important; } .comparison-item .value { font-size: 0.8rem !important; } /* 직업 분포 그룹 내부 (차트 / 목록 레이아웃 비율 조정) */ .guild-chart-area { /* 차트와 목록이 옆으로 나란히. 목록이 차트보다 1.5배 넓게 공간 차지 */ grid-template-columns: 1fr 1.5fr !important; /* 목록에 더 많은 공간 할당 */ flex-direction: column !important; /* flex가 사용될 경우를 대비 (grid가 우선) */ padding: 5px !important; gap: 5px !important; /* 내부 간격 유지 */ max-width: 100% !important; box-sizing: border-box !important; min-height: unset !important; } /* 직업 분포 그래프 크기 조정 */ .guild-chart-area canvas { max-height: 180px !important; max-width: 180px !important; width: 100% !important; height: 100% !important; flex-shrink: 0; } /* 직업 순위 목록 크기 및 글씨 조정 (여기서 목록을 더 넓게 보이도록) */ .job-distribution-list { padding: 8px !important; width: 100% !important; /* 사용 가능한 공간을 무조건 100% 차지하도록 강제 */ max-width: 100% !important; /* 혹시 모를 제한 제거 및 확실하게 100% 사용 */ box-sizing: border-box !important; min-width: unset !important; flex-grow: 1; overflow-y: auto; height: auto !important; } .job-distribution-list h3 { font-size: 0.8rem !important; margin-top: 5px !important; margin-bottom: 8px !important; } .job-distribution-list li { font-size: 0.7rem !important; padding: 3px 0 !important; } .job-distribution-list li .job-name { font-size: 0.7rem !important; min-width: 45px !important; padding-right: 5px !important; } .job-distribution-list li .job-stats { gap: 4px !important; } .job-distribution-list li .job-stats .job-value { font-size: 0.7rem !important; min-width: 30px !important; } .job-distribution-list li .job-stats .job-change-value { font-size: 0.9em !important; min-width: 35px !important; } /* --- 레벨 분석 섹션 (480px 전용) --- */ .level-analysis-section { grid-area: analysisArea; padding: 5px !important; /* 외부 패딩 유지 */ max-width: 100% !important; box-sizing: border-box !important; min-height: 100px !important; } .level-analysis-section h3 { font-size: 1rem !important; /* 제목 폰트 크기 유지 */ margin-top: 5px !important; margin-bottom: 5px !important; } /* 레벨 변경 컨트롤 버튼 관련 스타일 유지 */ .level-analysis-controls { flex-direction: column !important; gap: 10px !important; padding: 5px !important; align-items: center !important; } .level-analysis-controls label { font-size: 1rem !important; margin-bottom: 0 !important; text-align: center !important; flex-grow: 1; } #currentAnalyzedLevel { font-size: 1rem !important; color: #3498db !important; } .level-control-buttons { display: flex; gap: 5px !important; flex-wrap: wrap !important; justify-content: center !important; width: 70% !important; } .level-change-btn { padding: 7px 6px !important; font-size: 0.8rem !important; min-width: 30px !important; flex-grow: 1; max-width: calc(25% - 2px) !important; } #resetLevelAnalysis { font-size: 0.8rem !important; padding: 10px 15px !important; min-width: unset !important; max-width: 80% !important; align-self: center !important; text-align: center !important; box-sizing: border-box !important; } /* 레벨 분석 결과 (.level-analysis-results) 데스크톱 디자인 유지 및 폰트 축소 */ .level-analysis-results { background-color: #f8f9fa; /* 배경색 유지 */ border-radius: 8px; /* 모서리 둥글게 유지 */ padding: 8px !important; /* 내부 패딩 축소 (15px -> 8px) */ margin-top: 5px !important; /* 상단 마진 축소 (10px -> 5px) */ height: auto !important; /* 높이를 유동적으로 */ display: flex; flex-direction: column; justify-content: center; /* 전체 블록 내용 중앙 정렬 */ align-items: center; /* 전체 블록 내용 중앙 정렬 */ text-align: left; /* 내부 ul의 텍스트 정렬은 left */ border: 1px solid #eee; /* 테두리 유지 */ flex-grow: 1; /* 남은 공간 채우도록 유지 */ } .level-analysis-results ul { list-style-type: none; padding: 0; margin: 5px 0 0 0 !important; /* ul 상단 마진 축소 */ max-width: 95% !important; /* ul의 최대 너비를 부모의 95%로 설정 */ width: 100%; /* 너비는 항상 100% */ } .level-analysis-results li { display: flex; /* 데스크톱처럼 flex로 유지 */ justify-content: space-between !important; /* 좌우 분리 정렬 유지 */ align-items: baseline !important; /* 기준선 정렬 유지 */ padding: 4px 0 !important; /* 항목별 상하 패딩 축소 (8px -> 4px) */ border-bottom: 1px dashed #e0e0e0; font-size: 0.7rem !important; /* li 자체의 폰트 크기 축소 (1rem -> 0.7rem) */ color: #444; } .level-analysis-results li:last-child { border-bottom: none; } .level-analysis-results li strong { color: #2c3e50; font-size: 0.75rem !important; /* strong 태그 폰트 크기 축소 */ } .level-analysis-results li span { color: #3498db; font-weight: 700; font-size: 0.75rem !important; /* span 태그 폰트 크기 축소 */ } /* 제목 크기 및 간격 조정 */ .section-title, .comparison-title, .user-info h3, .guild-chart-area h3, .chart-box h3 { font-size: 1.2rem !important; margin-bottom: 15px !important; } /* 검색 섹션 - 요소들이 옆으로 유지되도록 조절 */ .search-section { flex-direction: row; /* 원래대로 가로 정렬 시도 */ align-items: center; justify-content: center; /* 가운데 정렬 */ gap: 5 px; /* 간격 최소화 */ flex-wrap: wrap; /* 너무 작으면 줄바꿈 허용 */ } .input-autocomplete-wrapper { width: 180px; /* 데스크톱 대비 축소 */ max-width: calc(100% - 70px); /* 버튼 고려 */ } .search-section input[type="text"] { font-size: 0.8rem; /* 폰트 매우 작게 */ padding: 8px 10px; height: auto; /* 높이 유동적으로 */ flex-shrink: 1; /* 필요시 줄어들도록 허용 */ } .btn-primary { height: auto; /* 높이 유동적으로 */ align-items: center; font-size: 0.8rem; /* 폰트 매우 작게 */ padding: 8px 10px; line-height: 100%; flex-shrink: 1; /* 필요시 줄어들도록 허용 */ } .validation-message { font-size: 0.7rem; padding: 5px 8px; bottom: calc(100% + 2px); } .autocomplete-list-item { font-size: 1rem; padding: 5px; } /* 프로필 카드 크기 축소 */ .user-profile-card { max-width: 95% !important; padding: 20px !important; } .user-skin { width: 70px !important; height: 70px !important; border-width: 3px !important; } .comparison-buttons { font-size: 90%; } /* 레벨 조정 버튼 그룹 모바일 최적화 */ .level-analysis-controls { flex-direction: column !important; padding: 10px !important; } .level-analysis-controls label, .level-analysis-controls input, .level-analysis-controls select { width: 100% !important; text-align: center !important; } /* 인기 검색 프로필 섹션 모바일에서는 숨김 */ .trending-profiles-section { display: none !important; } /* 세부 UI 마진 및 간격 축소 */ .comparison-buttons { gap: 5px !important; } .comparison-results { gap: 8px !important; } .comparison-item { padding: 10px 8px !important; font-size: 0.9rem !important; } .comparison-item .label { font-size: 0.9rem !important; /* 폰트 더욱 작게 */ } .comparison-item .change-up { font-size: 1rem !important; /* 폰트 더욱 작게 */ } .chart-controls { display: flex !important; flex-direction: column !important; /* 컨트롤 그룹들을 세로로 쌓음 */ gap: 8px !important; /* 컨트롤 그룹 (탭, 토글, 필터) 간의 간격 */ padding: 5px !important; box-sizing: border-box !important; } /* 공통 스타일: 탭, 토글, 필터 섹션 자체의 레이아웃 */ .chart-selection-tabs, .chart-data-toggle, .chart-time-filter { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 3px !important; } /* 차트 탭 버튼 및 기간 필터 셀렉트박스 스타일 (폰트 0.9rem) */ /* .chart-data-toggle label span 은 이제 이 블록에 함께 포함됩니다. */ .chart-tab-button, .chart-time-filter select { font-size: 0.9rem !important; /* 폰트 크기 0.9rem으로 설정 */ padding: 5px 8px !important; /* 패딩 유지 */ height: auto !important; border-radius: 15px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* 차트 선택 탭 버튼 (랭킹, 레벨, 전투력, 플레이 타임) */ .chart-selection-tabs .chart-tab-button { max-width: calc(50% - 1.5px) !important; /* 한 줄에 2개씩 배치될 때 (3px gap 고려) */ } /* 데이터 토글 (내 데이터, 서버 평균) 라벨 스타일 재정의 */ .chart-data-toggle label { /* 라벨 자체의 폰트 크기는 내부 span에서 결정되므로, 라벨의 font-size는 삭제하거나 기본값으로 둠 */ padding: 5px 8px !important; /* 라벨 내부 패딩을 5px 8px로 설정하여 버튼 크기 조절 */ height: auto !important; border-radius: 15px !important; white-space: nowrap !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9rem !important; /* 라벨 자체의 폰트 사이즈를 0.9rem으로 설정 (내부 요소에 영향) */ } .chart-data-toggle label input[type="checkbox"] { margin-right: 3px !important; } .chart-data-toggle label i { font-size: 0.8em !important; /* 라벨 폰트(0.9rem)에 비례한 0.8em 크기 */ margin-right: 3px !important; vertical-align: middle !important; } .chart-data-toggle label span { font-size: 1em !important; /* 부모 라벨의 폰트(0.9rem)를 상속하도록 1em으로 설정 */ } /* 차트 기간 필터 (기간: 선택 박스) */ .chart-time-filter label { font-size: 0.7rem !important; /* "기간:" 라벨 폰트 크기 0.7rem으로 줄임 */ margin-right: 0 !important; } /* 서버 TOP 15 랭킹 섹션 (세부 정렬 및 거리 조정) */ #server-top-10 { padding: 5px !important; } .sort-controls { margin-top: 15px !important; /* 제목과의 간격을 충분히 확보 */ margin-bottom: 20px !important; /* 랭킹 리스트와의 간격도 조정 */ gap: 8px; /* 버튼 사이 간격 조금 줄임 */ } .sort-controls .sort-btn { padding: 8px 15px; /* 버튼 패딩 조정 */ font-size: 0.9rem; /* 폰트 크기 조정 */ min-width: 80px; /* 버튼 최소 너비 조정 */ } .section-title { margin-bottom: 20px !important; /* 제목 하단 마진도 함께 조정 */ } #top10RankingList { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 5px !important; padding: 5px !important; max-width: 100% !important; box-sizing: border-box !important; justify-content: center !important; margin-bottom: 20px !important; } .top10-ranking-item { background-color: #fdfdfd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 8px !important; border: 1px solid #eee; display: flex; flex-direction: column; align-items: center; /* 내부 요소들을 중앙 정렬 유지 */ text-align: center; /* 내부 텍스트 기본 중앙 정렬 (필요시 하위에서 오버라이드) */ max-width: 100% !important; box-sizing: border-box !important; min-width: unset !important; } .rank-number { font-size: 0.8rem !important; margin-bottom: 3px !important; width: 18px !important; height: 18px !important; line-height: 18px !important; display: flex !important; /* 플렉스 컨테이너로 만들어 내부 숫자 완벽 중앙 정렬 */ justify-content: center !important; align-items: center !important; } .rank-skin { width: 40px !important; height: 40px !important; margin-bottom: 5px !important; } .rank-info { flex-grow: 1; width: 100%; text-align: left !important; /* 닉네임, 직업, 전투력 왼쪽 정렬 */ padding-left: 5px !important; /* 좌측에 5px 거리 추가 */ padding-right: 5px !important; /* 우측에도 5px 거리 추가 (균형) */ box-sizing: border-box !important; /* 패딩 포함 너비 계산 */ } .rank-info h4 { font-size: 0.75rem !important; margin-bottom: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-info p { font-size: 0.65rem !important; margin-bottom: 1px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 푸터 (