/* 기본 배경 및 폰트 세팅 */
body {
    margin: 0;
    padding: 20px;
    background-color: #121212;
    color: #ffffff;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    display: flex;
    justify-content: center;
}

/* 메인 타이틀 & 대문 텍스트 단어 단위 줄바꿈 */
.site-title {
    word-break: keep-all;
    overflow-wrap: break-word; /* 너무 긴 단어 예외 처리 */
}

/* 검색 상자 (input 태그) */
.search-input {
    word-break: keep-all;
}

/* 모바일 모드 전체 기본 적용 (추천) */
@media (max-width: 650px) {
    body {
        word-break: keep-all; /* 모바일에서 텍스트가 단어 단위로 자연스럽게 넘어감 */
    }
}

.main-container {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

/* 타이틀 */
.site-title {
    font-size: 2.5rem;
    margin-bottom: 25px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* 검색창 디자인 */
.search-box {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.search-box input {
    width: 70%;
    max-width: 400px;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #333;
    border-radius: 8px;
    background-color: #1e1e1e;
    color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: #0070f3;
}

.search-box button {
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background-color: #0070f3;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-box button:hover {
    background-color: #0051a8;
}

/* 캐릭터 카드 그리드 (모바일 반응형 핵심) */
.character-grid {
    display: grid;
    /* 화면 너비에 따라 한 줄에 개수가 자동으로 맞춰집니다 */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
    justify-items: center;
}

/* 캐릭터 아이콘 카드 */
.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    width: 90px;
}

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

/* 메인화면 캐릭터 이미지 (완벽 통일) */
.character-img {
    /* 박스 크기 고정 */
    width: 70px;
    height: 70px; /* 세로 크기도 동일하게 고정 */

    /* 모서리 */
    border-radius: 8px;

    /* ★핵심★ 비율 유지하며 자르기 */
    object-fit: cover;

    /* 기존 스타일 */
    border: 1px solid #333;
    background-color: #1a1a1a;
}

/* 캐릭터 이름 */
.character-name {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #ddd;
    text-align: center;
    word-break: keep-all;
}

/* 전역 화면 우측 하단 고정 제작자 표시 */
.maker-tag {
    position: fixed;
    bottom: 12px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #a0a0a0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid #333;
    z-index: 9999;
    pointer-events: none;
}

.maker-tag strong {
    color: #0070f3;
    font-weight: bold;
}

/* ==========================================
   캐릭터 상세 페이지 공략 스타일 (공통)
========================================== */

/* 상세 페이지 전용 레이아웃 */
.detail-wrapper {
    display: flex;
    gap: 30px;
    background-color: #1e1e1e;
    padding: 30px;
    border-radius: 12px;
    margin-top: 20px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* 좌측 메인 캐릭터 영역 (사진 + 이름 묶음) */
/* 좌측 영역 세로 정렬 */
.char-left-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* 사진 바로 아래 캐릭터 이름 스타일 */
.char-main-name {
    margin-top: 12px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
}

/* 메인 캐릭터 대형 사진 */
/* 메인 대형 캐릭터 사진 */
.char-main-img {
    width: 320px;
    height: 455px;
    object-fit: cover; /* ★ contain 대신 cover로 변경 (공백 없이 박스 꽉 채움) */
    object-position: top; /* 얼굴/상반신 위주로 보이게 상단 기준 정렬 */
    border-radius: 12px;
    border: 2px solid #333;
    background-color: #2a2a2a;
}

/* 메인 화면 캐릭터 목록 카드 이미지 (혹시 있으시다면) */
.char-card-img, .party-icon-img {
    object-fit: cover; /* ★ 1:1 박스에 여백 없이 꽉 채우기 */
    object-position: center;
}

/* 우측 공략 정보 리스트 영역 */
.info-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

/* 레벨별 공략 아이템 줄 */
.level-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
}

/* 레벨별 소형 아이콘 박스 너비 조정 */
.icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px; /* 기존 90px에서 축소 */
    flex-shrink: 0;  /* 글자가 길어져도 아이콘 박스가 구겨지지 않게 고정 */
}

/* 레벨별 뱃지 아이콘 이미지 크기 줄이기 */
.icon-box img {
    width: 60px;  /* 기존 80px ➔ 60px로 축소 */
    height: 60px; /* 기존 80px ➔ 60px로 축소 */
    border-radius: 8px;
    object-fit: contain;
    background-color: #1a1a1a;
}

/* 레벨 텍스트 */
.icon-box span {
    font-size: 0.85rem;
    font-weight: bold;
    color: #cccccc;
    margin-top: 5px;
}

/* 설명글 텍스트 여백 및 가독성 향상 */
.desc-text {
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.6;
    word-break: keep-all; /* 단어 끊김 방지 */
    padding-left: 10px;  /* 아이콘과의 사이에 쾌적한 간격 추가 */
}

/* 화살표 및 스킬명 띄어쓰기 간격 살리기 */
.desc-text .arrow {
    color: #ffb703;
    font-weight: bold;
    margin: 0 8px; /* 화살표 양옆 띄어쓰기 간격 넓힘 */
}

.desc-text strong {
    color: #4cc9f0; /* 스킬명 하늘색 포인트 */
    font-weight: 700;
}

/* 뒤로가기 버튼 */
.back-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    transition: background 0.2s;
}

.back-btn:hover {
    background-color: #555;
}

/* 추천 조합 영역 */
.recommend-party-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 15px;
}

.recommend-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
}

.party-icons {
    display: flex;
    gap: 12px;
}

.party-icon-link {
    text-decoration: none;
    transition: transform 0.2s;
}

.party-icon-link:hover {
    transform: scale(1.1);
}

.party-icon-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #1a1a1a;
    border: 1px solid #444;
}

/* 모바일 화면 대응 */
@media (max-width: 650px) {
    .detail-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .char-main-img {
        width: 100%;
        max-width: 320px;
        height: 450px;
    }
}