body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #0c1821;
    color: #e5e5e5;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 900px;
    margin: auto;
    background-color: #1a2a33;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

h1, h2 {
    color: #4a90e2;
    text-align: center;
}

.tip-text {
    text-align: center;
    color: #a0b3c1;
    font-weight: 400;
    font-size: 0.9em;
    margin-bottom: 25px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}

.input-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

/* --- 상징 선택 --- */
.synergy-buttons-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    justify-items: center;
}

.synergy-image-button {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 1 / 1;
}

    .synergy-image-button img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .synergy-image-button:hover {
        transform: scale(1.05);
    }

    .synergy-image-button.active {
        border-color: #4a90e2;
        box-shadow: 0 0 10px #4a90e2;
        transform: scale(1.05);
    }

/* --- 선택된 상징 --- */
.selected-synergies-grid {
    padding: 10px;
    border: 1px solid #334d5c;
    border-radius: 5px;
    min-height: 96px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.selected-synergy-image {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;
    border: 2px solid #4a90e2;
    cursor: pointer;
}

/* --- 챔피언 선택 (UI 개선 버전) --- */
.champion-select-container {
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.2); /* 배경색을 살짝 주어 구분감 향상 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

    .champion-select-container h2 {
        color: #eee;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.3em;
    }

.champion-pool-grid {
    display: grid;
    /* 챔피언 이름이 들어갈 공간을 고려해 minmax 너비 조정 */
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 15px; /* 아이템 간 간격 조정 */
    justify-items: center;
    max-height: 300px; /* 스크롤바를 위한 최대 높이 */
    overflow-y: auto; /* 세로 스크롤바는 유지 */
    overflow-x: hidden; /* 가로 스크롤바는 숨김 처리 */
    padding: 10px 5px 10px 10px; /* 스크롤바 공간 확보 및 패딩 조정 */
}

/* 챔피언 아이템 컨테이너 */
.champion-item {
    position: relative; /* 체크마크 아이콘을 위한 기준점 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

    /* 챔피언 이미지 */
    .champion-item img {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #555; /* 기본 테두리 색상 (코스트 색상에 의해 덮어씌워짐) */
        transition: all 0.2s ease-in-out;
        opacity: 0.6; /* 선택되지 않은 챔피언은 살짝 어둡게 */
    }

        /* ===== [추가] 코스트별 테두리 색상 ===== */
        .champion-item img.cost-1 {
            border-color: #808080;
        }

        .champion-item img.cost-2 {
            border-color: #1DB954;
        }

        .champion-item img.cost-3 {
            border-color: #00A2E8;
        }

        .champion-item img.cost-4 {
            border-color: #9B59B6;
        }

        .champion-item img.cost-5 {
            border-color: #FFD700;
        }
/* ==================================== */

/* 챔피언 이름 */
.champion-name-input {
    font-size: 12px;
    color: #a0b3c1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* 마우스를 올렸을 때 효과 */
.champion-item:hover {
    transform: translateY(-3px); /* 살짝 위로 이동하는 효과 */
}

    .champion-item:hover img {
        opacity: 1;
    }

/* 'selected' 클래스가 추가되었을 때의 스타일 */
.champion-item.selected img {
    opacity: 1;
    border-color: gold; /* 선택 시에는 코스트 색상과 관계없이 금색으로 표시 */
    box-shadow: 0 0 10px gold; /* 빛나는 효과 추가 */
}

.champion-item.selected .champion-name-input {
    color: gold;
    font-weight: bold;
}

/* 선택되었을 때 나타나는 체크마크 아이콘 (가상요소 ::after 사용) */
.champion-item.selected::after {
    content: '✔';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    background-color: #5cb85c; /* 성공/선택을 의미하는 초록색 */
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* --- 커스텀 스크롤바 (웹킷 브라우저용: 크롬, 사파리, 엣지 등) --- */
.champion-pool-grid::-webkit-scrollbar {
    width: 8px;
}

.champion-pool-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.champion-pool-grid::-webkit-scrollbar-thumb {
    background-color: #4a90e2;
    border-radius: 4px;
}

    .champion-pool-grid::-webkit-scrollbar-thumb:hover {
        background-color: #357ABD;
    }

.champion-portrait {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent; /* 기본 테두리 */
    transition: all 0.2s ease-in-out;
    opacity: 0.5; /* 선택되지 않은 챔피언은 투명하게 */
}

.champion-portrait:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.champion-portrait.selected {
    opacity: 1;
    border: 2px solid gold; /* 선택된 챔피언은 금색 테두리 */
    transform: scale(1.05);
}

/* 기존 스타일 유지 */
.level-select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#level-select {
    padding: 12px 18px;
    font-size: 1.1em;
    font-weight: bold;
    color: #e5e5e5;
    background-color: #334d5c;
    border: 2px solid #4a90e2;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    width: 200px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234a90e2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 18px top 50%;
    background-size: .65em auto;
}

/* --- 토글 스위치 --- */
.toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-label {
    font-weight: 500;
    font-size: 1.1em;
    color: #e5e5e5;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334d5c;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #5cb85c;
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

#include-4cost-toggle:checked + .slider {
    background-color: #9B59B6;
}

#include-5cost-toggle:checked + .slider {
    background-color: #FFD700;
}

/* --- 실행 버튼 --- */
#run-button {
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #5cb85c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    #run-button:disabled {
        background-color: #666;
        cursor: not-allowed;
    }

/* --- 결과 카드 --- */
.result-card {
    background-color: #334d5c;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

    .result-card h3 {
        margin-top: 0;
        color: #4a90e2;
    }

.champion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
}

.champion-portrait {
    width: 64px;
    text-align: center;
}

.champion-image {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    border: 3px solid;
    object-fit: cover;
    transition: all 0.2s ease;
}

    .champion-image:hover {
        transform: scale(1.1);
    }

.champion-name {
    display: block;
    font-size: 12px;
    color: #e0e0e0;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.champion-image.cost-1 {
    border-color: #808080;
}

.champion-image.cost-2 {
    border-color: #1DB954;
}

.champion-image.cost-3 {
    border-color: #00A2E8;
}

.champion-image.cost-4 {
    border-color: #9B59B6;
    box-shadow: 0 0 8px #9B59B6;
}

.champion-image.cost-5 {
    border-color: #FFD700;
    box-shadow: 0 0 12px #FFD700;
}

/* --- 결과 카드 시너지 UI --- */
.synergy-toggle-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a3a43;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.2s ease;
}

    .synergy-toggle-button:hover {
        background-color: #334d5c;
    }

    .synergy-toggle-button strong {
        color: #e0e0e0;
        font-weight: 500;
    }

.toggle-arrow {
    font-size: 1.2em;
    color: #4a90e2;
    transition: transform 0.3s ease;
}

.synergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 10px;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}

    .synergy-grid.hidden {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
    }

.synergy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.25);
    padding: 8px;
    border-radius: 5px;
}

.synergy-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 4px;
    box-sizing: border-box;
    background-clip: padding-box;
    transition: transform 0.2s ease;
}

.synergy-item:hover .synergy-icon {
    transform: scale(1.1);
}

.synergy-name-and-count {
    font-size: 15px;
    font-weight: 500;
    color: #e0e0e0;
}

.tier-bronze .synergy-icon {
    background-color: #CD7F32;
}

.tier-silver .synergy-icon {
    background-color: #C0C0C0;
}

.tier-gold .synergy-icon {
    background-color: #FFD700;
    box-shadow: 0 0 7px #FFD700;
}

.tier-prismatic .synergy-icon {
    background-color: #B9F2FF;
    box-shadow: 0 0 10px #00D1FF;
    animation: prismatic-glow 2s infinite alternate;
}

.tier-unique .synergy-icon {
    background-color: #FF8C00;
    box-shadow: 0 0 8px #FFA500;
}

@keyframes prismatic-glow {
    from {
        box-shadow: 0 0 10px #00D1FF;
    }

    to {
        box-shadow: 0 0 15px #B9F2FF;
    }
}

/* --- 상단 버전 및 언어 --- */
.version-display {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #999;
}

.language-switcher {
    position: absolute;
    top: 17px;
    right: 23px;
    display: flex;
    gap: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 16px;
}

    .language-switcher a {
        color: #a0b3c1;
        text-decoration: none;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: bold;
        font-size: 0.6em;
        transition: all 0.2s ease-in-out;
    }

        .language-switcher a:hover {
            background-color: #334d5c;
            color: #fff;
        }

        .language-switcher a.active {
            background-color: #4a90e2;
            color: #fff;
            cursor: default;
        }

/* --- 가이드 페이지 관련 --- */
.guide-link-container {
    text-align: center;
    margin-bottom: 25px;
}

    .guide-link-container a {
        color: #4a90e2;
        text-decoration: none;
        font-weight: 500;
        border: 1px solid #4a90e2;
        padding: 8px 15px;
        border-radius: 20px;
        transition: all 0.2s ease;
    }

        .guide-link-container a:hover {
            background-color: #4a90e2;
            color: #fff;
        }

.back-button {
    display: inline-block;
    color: #a0b3c1;
    text-decoration: none;
    margin-bottom: 30px;
    font-weight: 500;
}

    .back-button:hover {
        color: #e5e5e5;
    }

.guide-section {
    margin-bottom: 40px;
}

    .guide-section h2 {
        text-align: left;
        border-bottom: 2px solid #334d5c;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .guide-section p, .guide-section li {
        line-height: 1.8;
        color: #c0d3e2;
    }

    .guide-section ol, .guide-section ul {
        padding-left: 25px;
    }

.feedback-section {
    text-align: center;
    margin-top: 50px;
}

.feedback-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background-color: #4a90e2;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .feedback-button:hover {
        background-color: #357ABD;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

.error-message {
    color: #ff6b6b;
    text-align: center;
}

/* --- 반응형 스타일 (모바일) --- */
@media (max-width: 600px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 1.3em;
    }

    h2 {
        font-size: 1.1em;
    }

    .synergy-buttons-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .champion-image {
        width: 45px;
        height: 45px;
    }

    .champion-portrait {
        width: 45px;
    }

    .synergy-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .synergy-icon {
        width: 30px;
        height: 30px;
    }

    .synergy-name-and-count {
        font-size: 14px;
    }
}
/* style.css */

/* ===== 로딩 스피너 스타일 (수정본) ===== */
#loading-spinner {
    display: flex;
    flex-direction: column; /* 아이템을 세로로 정렬 */
    justify-content: center;
    align-items: center;
    gap: 20px; /* 스피너와 텍스트 사이 간격 */
    padding: 50px 0;
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4a90e2;
    animation: spin 1s linear infinite;
}

/* 로딩 텍스트 스타일 (새로 추가) */
.loading-text {
    color: #a0b3c1;
    font-size: 1.1em;
    font-weight: 500;
    margin: 0; /* 단락(p) 태그의 기본 마진 제거 */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* style.css (맨 아래에 추가할 코드) */

/* --- 결과 카드 헤더 (챔피언 제목 + 복사 버튼) --- */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* 챔피언 목록과의 간격 */
}

    .card-header strong {
        color: #e0e0e0;
        font-weight: 500;
        font-size: 1.1em;
    }

.copy-team-code-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    color: #e5e5e5;
    background-color: #334d5c;
    border: 1px solid #4a90e2;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .copy-team-code-btn:hover {
        background-color: #4a90e2;
        color: #fff;
    }

    /* 복사 완료 시 스타일 */
    .copy-team-code-btn.copied {
        background-color: #5cb85c;
        border-color: #5cb85c;
        color: #fff;
        cursor: default;
    }
/* style.css (맨 아래에 추가할 코드 - 수정본) */

/* --- 플로팅 광고 배너 --- */
.floating-ad {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 650px;
    z-index: 1000;
    /* 아래 3줄 추가: 광고가 배너 영역 중앙에 오도록 보강 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* style.css (맨 아래 코드 교체) */

#left-ad-banner {
    /* 50%: 화면 중앙, 450px: 본문 너비(900px)의 절반, 120px: 배너 너비 */
    left: calc(50% - 450px - 230px - 10px);
}

#right-ad-banner {
    /* 50%: 화면 중앙, 450px: 본문 너비(900px)의 절반 */
    left: calc(50% + 450px + 120px);
}

/* --- 반응형 스타일 (플로팅 배너 숨기기) --- */
@media (max-width: 1200px) {
    .floating-ad {
        display: none;
    }
}

/* ===== 결과 카드 챔피언 UI 정렬 문제 수정 ===== */

/* .champion-grid 내부에 있는 .champion-portrait 에만 스타일을 적용합니다.
  이렇게 하면 입력 창의 챔피언 선택 부분 스타일과 충돌하지 않습니다.
*/
.champion-grid .champion-portrait {
    width: 64px; /* 결과 카드에서의 챔피언 너비 */
    height: auto; /* 높이는 이미지와 텍스트에 맞게 자동 조절 */
    text-align: center;
    border-radius: 0; /* 입력 창의 원형 스타일 제거 */
    opacity: 1; /* 입력 창의 투명도 스타일 제거 */
    border: none; /* 입력 창의 선택 테두리 스타일 제거 */
    margin: 0; /* 불필요한 여백 제거 */
    cursor: default; /* 마우스 포인터를 기본 모양으로 */
}

    /* 결과 카드 챔피언 목록에서는 불필요한 hover 효과를 제거합니다.
*/
    .champion-grid .champion-portrait:hover {
        transform: none;
    }

/* 기존에 작성하신 반응형 스타일에도 동일하게 구체적인 선택자를 적용해 줍니다.
*/
@media (max-width: 600px) {
    .champion-grid .champion-portrait {
        width: 45px; /* 모바일 너비에 맞게 조정 */
    }
}