/* 1. 변수 및 초기화 */
:root {
    --primary-color: #3d5afe;
    --bg-color: #f4f7f9;
    --header-bg: #ffffff;
    --card-bg: #ffffff;
    --text-main: #2c3e50;
    --text-sub: #7f8c8d;
    --border-color: #e0e6ed;
    --accent-gold: #f1c40f;
}

/* 다크 테마 변수 */
.dark-theme {
    --bg-color: #1a1c1e;
    --header-bg: #25282c;
    --card-bg: #2d3136;
    --text-main: #ececec;
    --text-sub: #b0b0b0;
    --border-color: #3f444a;
}

* { box-sizing: border-box; }
/* 1. body 설정을 Flex Container로 변경 */
body {
    margin: 0;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    transition: background 0.3s, color 0.3s;

    /* [추가/변경] 전체 화면 레이아웃 설정 */
    display: flex;              /* Flexbox 모드 활성화 */
    flex-direction: column;     /* 위에서 아래로 수직 배치 */
    height: 100vh;              /* 화면 전체 높이(100%) 사용 */
    overflow: hidden;           /* body 전체 스크롤 방지 (내부 스크롤 유도) */
}

/* 2. 배경 이미지 (20% 투명도 가상 요소) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('../images/background.png') no-repeat center center / cover;
    opacity: 0.2;
    z-index: -1;
}

/* 3. 공통 레이아웃 (최대 1200px) */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* 4. Header 스타일 (상단 고정) */
.main-header {
    /* 공통 레이아웃 (최대 1200px) */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;

    /* [변경] sticky 대신 Flex 구조 안에서 자연스럽게 상단 배치 */
    /* position: sticky;  <-- 삭제해도 됨 (flex-direction: column이라 자동 상단 배치) */
    
    height: 60px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    
    /* [추가] 공간이 부족해도 찌그러지지 않게 고정 */
    flex-shrink: 0; 
}

/* 5. Main Body 설정 (가변 영역 + 내부 스크롤) */
.main-body {
    /* [추가] 남은 공간을 모두 차지함 */
    flex: 1; 
    
    /* [추가] 내용이 넘치면 이 영역 안에서만 스크롤 생김 */
    overflow-y: auto; 
    
    /* 기존 스타일 유지 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0; /* 내부 여백이 좀 있으면 좋습니다 */
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
}

.logo { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 1.2rem; }

/* 새소식 슬라이더 */
.notice-slider {
    flex: 1;
    margin: 0 40px;
    background: rgba(0,0,0,0.05);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.notice-text { 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}

.header-tools { display: flex; gap: 10px; align-items: center; } /* gap 조정 */

.header-tools select {
    padding: 5px; border-radius: 4px; border: 1px solid var(--border-color);
    background: var(--card-bg); color: var(--text-main);
    height: 32px; /* 높이 통일 */
}

/* [추가/수정] 헤더 툴바 버튼 공통 스타일 */
.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color); /* 테두리 추가로 버튼 느낌 강화 */
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    text-decoration: none; /* a 태그 밑줄 제거 */
    font-size: 0.9rem;
    transition: all 0.2s;
}

.tool-btn:hover {
    background: var(--border-color); /* 호버 효과 */
    color: var(--primary-color);
}

/* 5. 계정별 탭 (Account Tabs) */
.account-tabs {
    display: flex;
    gap: 5px;
    margin: 20px 0;
    padding: 0 10px;
}

.tab-item {
    padding: 10px 20px;
    background: var(--border-color);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 0.9rem;
    position: relative;
    transition: 0.2s;
    color: var(--text-sub);
}

.tab-item.active {
    background: var(--card-bg);
    color: var(--primary-color);
    font-weight: bold;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.tab-item .fa-times {
    margin-left: 10px;
    font-size: 0.7rem;
}
.tab-item .fa-times:hover { color: #ff4d4f; }

/* 6. 캐릭터 그리드 (6개 단위) */
.character-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 핵심: 6컬럼 그리드 */
    gap: 15px;
    padding: 10px;
}

/* 반응형: 화면이 좁아지면 컬럼 수 조절 */
@media (max-width: 1100px) { .character-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .character-grid { grid-template-columns: repeat(1, 1fr); } }

.char-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}

.char-card:hover { transform: translateY(-5px); }

.char-info { margin-bottom: 15px; }
.char-name { display: block; font-weight: bold; font-size: 0.95rem; margin-bottom: 5px; }
.char-level { color: var(--accent-gold); font-weight: bold; font-size: 0.85rem; }
.char-class { font-size: 0.8rem; color: var(--text-sub); margin-left: 5px; }

/* 게이지 바 스타일 */
.raid-status { font-size: 0.8rem; }
progress {
    width: 100%;
    height: 8px;
    appearance: none;
    margin-top: 5px;
}
progress::-webkit-progress-bar { background: var(--border-color); border-radius: 10px; }
progress::-webkit-progress-value { background: var(--primary-color); border-radius: 10px; }

/* 7. Footer 설정 (하단 고정 및 수축 방지) */
.main-footer {
    /* 공통 레이아웃 (최대 1200px) */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;

    /* 기존 스타일 유지 */
    text-align: center;
    padding: 5px 0; /* 높이를 고려해 여백 조정 */
    color: var(--text-sub);
    font-size: 0.85rem;
    
    /* [추가] 하단 고정 및 배경색 지정 (컨텐츠 위로 겹쳐 보이지 않게) */
    flex-shrink: 0;         /* 찌그러짐 방지 */
    background-color: var(--bg-color); /* 배경색을 주어 스크롤되는 내용 가림 */
    border-top: 1px solid var(--border-color); /* 상단 구분선 추가 추천 */
}