/* 전역 스타일 초기화 */
:root {
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --card-border: #4a4a4a;
    --text-main: #f5f5f5;
    --text-muted: #aaaaaa;
    --online-color: #55ff55;
    --offline-color: #ff5555;
    --badge-bg: #3c3c3c;
    --badge-text: #ffffff;
}

body {
    font-family: 'IBM Plex Sans KR', sans-serif; /* 본문용 가독성 좋은 각진 폰트 */
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 900px;
}

/* 헤더 & 타이틀 스타일 */
.main-header {
    text-align: center;
    margin-bottom: 40px;
}

.pixel-title {
    font-family: 'Press Start 2P', cursive; /* 마인크래프트 감성 픽셀 폰트 */
    font-size: 2.5rem;
    color: #fdb813;
    text-shadow: 3px 3px 0px #3f2a00;
    margin: 0 0 15px 0;
    letter-spacing: 2px;
}

.sub-title {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

/* 서버 카드 그리드 레이아웃 */
.server-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* [수정] 서버 카드 기본 구조: 다시 내부에 안정적인 기본 여백을 줍니다 */
.server-card {
    background-color: var(--card-bg);
    border: 3px solid var(--card-border);
    border-radius: 8px;
    padding: 24px; /* 내부에 전체적인 여백을 주어 카드 테두리와 아이콘 사이의 간격 생성 */
    display: flex;
    gap: 24px;     /* 좌측 아이콘 영역과 우측 정보 영역 사이의 마진(간격) */
    align-items: flex-start; /* 내용이 늘어나도 아이콘이 억지로 세로로 길어지지 않게 방지 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s, border-color 0.2s;
}

.server-card:hover {
    transform: translateY(-2px);
    border-color: #888;
}

/* [수정] 좌측 서버 아이콘 감싸는 구역 */
.server-icon-wrapper {
    flex-shrink: 0; /* 우측 텍스트 때문에 아이콘 영역이 찌그러지지 않도록 고정 */
}

/* [수정] 아이콘 이미지 스타일 */
.server-icon {
    width: 128px;        /* 마인크래프트 배수(64px * 2)에 맞춘 넉넉한 가로 크기 */
    height: 128px;       /* 가로와 동일한 세로 크기를 지정하여 완벽한 정사각형 유지 */
    object-fit: contain; /* [중요] 이미지가 잘리지 않고 정해진 크기 안에 온전히 다 보이도록 설정 */
    image-rendering: pixelated; /* 마인크래프트 특유의 픽셀 감성 선명하게 유지 */
    border-radius: 6px;
    background-color: #151515; /* 아이콘 뒤 투명한 영역이나 여백을 채워줄 어두운 배경 */
    border: 2px solid #555;    /* 아이콘 자체를 돋보이게 하는 내부 얇은 보더 */
}

/* [수정] 우측 서버 정보 구역 */
.server-info {
    flex-grow: 1;
    min-width: 0; /* 텍스트가 넘칠 때 레이아웃이 터지는 현상 방지 */
}

.server-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 8px;
}

.server-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

/* 상태 표시등 */
.status-indicator {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.2);
}
.status-indicator.online { color: var(--online-color); }
.status-indicator.offline { color: var(--offline-color); }

/* 서버 세부 스펙 스케줄 */
.server-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.server-details span {
    background: rgba(0,0,0,0.15);
    padding: 6px 10px;
    border-radius: 4px;
}

.server-details strong {
    color: var(--text-main);
}

/* 접속 중인 플레이어 구역 */
.player-section h3 {
    margin: 16px 0 8px 0;
    font-size: 1rem;
    color: var(--text-main);
}



.player-name {
    line-height: 1;
}


.no-players {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

.loading, .error-msg {
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
    color: var(--text-muted);
}