@import url('https://fonts.googleapis.com/css2?family=Comic+Relief:wght@400;700&family=Dongle&family=Fugaz+One&family=Protest+Guerrilla&display=swap');

@font-face {
    font-family: 'custom_ko';
    src: url('../fonts/koBold.ttf') format('truetype');
    font-style: bold;
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'custom_ko';
    src: url('../fonts/koRegular.ttf') format('truetype');
    font-style: normal;
    unicode-range: U+AC00-D7A3;
}

@font-face {
    font-family: 'custom';
    src: url('../fonts/enBold.ttf') format('truetype');
    font-style: bold;
}

@font-face {
    font-family: 'custom';
    src: url('../fonts/enRegular.ttf') format('truetype');
    font-style: normal;
}

/* ---  --- */
body {
    overflow-x: hidden;
    min-width: 1280px;
    background-color: #000;

    /* font-family: "Comic Relief", system-ui; */
    font-family: 'custom', 'custom_ko', system-ui;
    /* font-weight: 400;
    font-style: normal; */

    /* font-family: "korBold";
    font-family: "korRegular"; */
}

body,
ul,
h1,
p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}


/* --- Header --- */
.main-header {
    background-color: #202020;
    padding: 18px 24px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
    /* height: 85px; */
}

/* --- Header Container */
.header-container {
    max-width: 1140px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Header Menu(Left Logo) --- */
.header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

img.logo {
    height: 50px;
    margin-right: 24px;
}

.nav-menu {
    flex-grow: 1;
}

.nav-menu ul {
    display: flex;
    gap: 50px;
    justify-content: center;
}

.nav-menu li {}

.nav-menu a {
    color: #c0c0c0;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.nav-menu a:hover {
    color: #ffffff;
}

/* Arrow Icon */
.nav-menu .fa-caret-down {
    font-size: 0.8em;
    margin-left: 4px;
}

.dropdown {
    position: relative;
    transition: all 0.5s;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 8px;
    padding: 10px 0;
    min-width: 160px;
    z-index: 1000;
}

.dropdown ul {
    display: none;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    color: #333333;
    padding: 8px 16px;
    display: block;
    white-space: nowrap;
    transition: all 0.5s;
}

.dropdown-menu a:hover {
    background-color: #f4f4f4;
    color: #333;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.login-button {
    background-color: #0d6efd;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;

    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
}

.login-button:hover {
    background-color: #0b5ed7;
}

.login-button .fa-play {
    font-size: 0.8em;
    margin-right: 8px;
}


.page-background {
    background: url(../img/background.jpg) no-repeat;
    background-position: center;
    /* margin-top: -40px; */
    height: 2280px;
}

.subpage-background {
    background: url(../img/background_page.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
}


.page-wrapper {
    min-height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#content-area {
    /* padding: 0; */
    color: white;
}

#content-area h2 {
    margin-top: 0;
}


.main-container {
    /* [수정] 이 한 줄을 추가하여 부드럽게 나타나도록 합니다. */
    transition: opacity 0.3s ease-in-out;
}

.container {
    padding: 30px;
    animation: fadeIn 0.5s;
}

/* banner section */
.banner-section {
    display: flex;
    gap: 24px;
    margin-bottom: 60px;
}


.banner-buttons {
    flex: 1.5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-template-areas:
        "btn1 btn1"
        "btn2 btn2"
        "btn3 btn4"
        "btn5 btn6";
}

.banner-buttons .magic-btn:nth-child(1) {
    grid-area: btn1;
}

.banner-buttons .magic-btn:nth-child(2) {
    grid-area: btn2;
}

.banner-buttons .magic-btn:nth-child(3) {
    grid-area: btn3;
}

.banner-buttons .magic-btn:nth-child(4) {
    grid-area: btn4;
}

.banner-buttons .magic-btn:nth-child(5) {
    grid-area: btn5;
}

.banner-buttons .magic-btn:nth-child(6) {
    grid-area: btn6;
}


.magic-btn {
    height: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    /* font-family: Arial, sans-serif; */
    font-weight: bold;

    border: 2px solid #4f65bd;
    border-radius: 12px;

    /* background: l--inear-gradient(145deg, #4f65bd, #2d46b6 50%, #223B6A 100%); */
    background: linear-gradient(145deg, #744fbd, #422db6 50%, #223B6A 100%);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.4);

    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;

    animation: pulse-glow 3s infinite ease-in-out;
}

.banner-buttons .magic-btn:nth-child(1),
.banner-buttons .magic-btn:nth-child(2) {
    padding-top: 16px;
    padding-bottom: 16px;
}

.magic-btn:hover {
    transform: scale(1.03) translateY(-5px);
    border-color: #8a9ff0;
    animation-play-state: paused;
    box-shadow: 0 12px 30px rgba(106, 130, 224, 0.7),
        inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

.magic-btn:active {
    transform: scale(0.98) translateY(0);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(255, 255, 255, 0.4);
    transition-duration: 0.1s;
}

.magic-btn-icon {
    font-size: 2.5em;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
}

.magic-btn-main {
    font-size: 1.2em;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}

.magic-btn:hover .magic-btn-icon {
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
}

.magic-btn::before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(100deg,
            transparent 20%,
            rgba(255, 255, 255, 0.6) 50%,
            transparent 80%);
    left: -100%;

    z-index: 3;
}

.magic-btn:hover::before {
    left: auto;
    animation: shimmer-loop 1s ease-in-out infinite;
}

.magic-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    opacity: 0.6;
    transition: opacity 0.3s ease;

    z-index: 0;
}

.magic-btn:nth-child(1)::after,
.magic-btn:nth-child(2)::after {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='white' fill-opacity='0.15'%3E%3Cpath d='M 25 90 Q 5 55, 35 20 L 40 25 Q 15 55, 30 90 Z M 75 90 Q 95 55, 65 20 L 60 25 Q 85 55, 70 90 Z M 35 70 L 65 70 L 70 50 L 60 55 L 50 35 L 40 55 L 30 50 Z'/%3E%3C/svg%3E"); */
    background-size: 120% 260%;
}

.magic-btn:hover::after {
    opacity: 1;
}


.magic-btn-icon,
.magic-btn-main,
.magic-btn-sub {
    position: relative;
    z-index: 2;
}


.sparkle-crystal {
    position: absolute;
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #a0c4ff;
    animation: pulse-fade 3s infinite ease-in-out;

    z-index: 1;
    opacity: 0;
}

.sparkle-crystal.s1 {
    top: 15%;
    left: 12%;
    font-size: 16px;
    animation-delay: 0.1s;
}

.sparkle-crystal.s2 {
    top: 30%;
    left: 25%;
    font-size: 10px;
    animation-delay: 0.8s;
}

.sparkle-crystal.s3 {
    top: 40%;
    right: 15%;
    font-size: 12px;
    animation-delay: 1.5s;
}

.sparkle-crystal.s4 {
    bottom: 15%;
    left: 30%;
    font-size: 12px;
    animation-delay: 2.2s;
}

.sparkle-crystal.s5 {
    bottom: 25%;
    right: 25%;
    font-size: 10px;
    animation-delay: 0.5s;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
            inset 0 2px 3px rgba(255, 255, 255, 0.4),
            0 0 15px 0px rgba(106, 130, 224, 0.3);
    }

    50% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
            inset 0 2px 3px rgba(255, 255, 255, 0.4),
            0 0 25px 5px rgba(106, 130, 224, 0.6);
    }
}

@keyframes pulse-fade {
    0% {
        opacity: 0.1;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0.1;
        transform: scale(0.8);
    }
}

@keyframes shimmer-loop {
    from {
        left: -100%;
    }

    to {
        left: 100%;
    }
}

.banner-banner {
    flex: 3;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: #333;
}

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

.banner-banner .banner-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.banner-banner h3 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 1.5em;
}

.banner-banner p {
    margin: 0;
    color: #ddd;
}

.banner-banner p span {
    color: #ae62ff;
    font-weight: bold;
}

/* News Section */

.news-section {
    padding-top: 100px;
    margin-bottom: 40px;
}

.news-empty {
    padding: 20px;
    font-size: 1.1em;
    color: #ccc;
    text-align: center;

    min-height: 250px;

    grid-column: 1 / -1;
}

.news-section .magic-btn::after {
    background-image: none;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #eee;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 30px;
    font-family: "Fugaz One", 'custom_ko', sans-serif;
    /* font-weight: 400; */
    font-style: normal;
}

.section-title .title-line {
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to left, #ae62ff, transparent);
}

.section-title .title-line:first-child {
    background: linear-gradient(to right, #ae62ff, transparent);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.newsi-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;

    border: 2px solid #4f65bd;
    background: linear-gradient(145deg, #744fbd, #422db6 50%, #223B6A 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.4);

    animation: pulse-glow 3s infinite ease-in-out;

    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


.newsi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 10%, transparent 40%),
        radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 5%, transparent 20%),
        radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.1) 5%, transparent 20%);

    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    opacity: 0.6;
    transition: opacity 0.3s ease;

    z-index: 1;
}

.newsi-card:hover::after {
    opacity: 1;
}

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

    border-color: #8a9ff0;
    animation-play-state: paused;
    box-shadow: 0 12px 30px rgba(106, 130, 224, 0.7),
        inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

.card-image-wrapper,
.card-content {
    position: relative;
    z-index: 2;
}

.card-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 3;
}

.card-tag.red {
    background-color: #e63946;
}

.card-tag.blue {
    background-color: #007bff;
}

.card-tag.green {
    background-color: #28a745;
}

.card-content {
    padding: 20px;
}

.card-content h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #fff;
}

.card-content p {
    margin: 0 0 15px 0;
    font-size: 0.9em;
    color: #ccc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1.5em * 2);
    line-height: 1.5em;
}

.card-content .card-date {
    font-size: 0.8em;
    color: #888;
}



.ranking-section {
    padding-top: 100px;
    margin-bottom: 40px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ranking-card {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;

    border: 2px solid #4f65bd;
    background: linear-gradient(145deg, #744fbd, #422db6 50%, #223B6A 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.4);

    animation: pulse-glow 3s infinite ease-in-out;

    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ranking-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='white' fill-opacity='0.05'%3E%3Cpath d='M 25 90 Q 5 55, 35 20 L 40 25 Q 15 55, 30 90 Z M 75 90 Q 95 55, 65 20 L 60 25 Q 85 55, 70 90 Z M 35 70 L 65 70 L 70 50 L 60 55 L 50 35 L 40 55 L 30 50 Z'/%3E%3C/svg%3E"); */
    background-size: 100% 260%;

    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    opacity: 0.6;
    transition: opacity 0.3s ease;

    z-index: 1;
}

.ranking-card:hover::after {
    opacity: 1;
}

.ranking-card .card-header,
.ranking-list {
    position: relative;
    z-index: 2;
}

.ranking-card .card-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #ae62ff;
    padding-bottom: 15px;
}

.ranking-card .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.ranking-card .card-header h4 {
    margin: 0;
    font-size: 1.3em;
    color: #fff;
}

.ranking-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ranking-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
}

.ranking-list .rank-num {
    flex-shrink: 0;
    font-weight: bold;
    font-style: italic;
    font-size: 1.1em;
    color: #6b6b6b;
    width: 30px;
    text-align: center;
}

.ranking-list .rank-num.gold {
    color: #ffd700;
}

.ranking-list .rank-num.silver {
    color: #c0c0c0;
}

.ranking-list .rank-num.bronze {
    color: #cd7f32;
}

.ranking-list .rank-name {
    flex-grow: 1;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-list .rank-score {
    flex-shrink: 0;
    color: #a0c4ff;
    font-weight: bold;
    font-size: 0.9em;
}


/* Button Styles */
.btn {
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    border-color: hsl(var(--b2) / var(--tw-border-opacity));
    text-align: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function:
        cubic-bezier(.4, 0, .2, 1);
    transition-timing-function:
        cubic-bezier(0, 0, .2, 1);
    transition-duration: .2s;
    border-radius: var(--rounded-btn, .5rem);
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 3rem;
    font-size: .875rem;
    line-height: 1em;
    gap: .5rem;
    font-weight: 600;
    text-decoration-line: none;
    border-width: var(--border-btn, 1px);
    animation: button-pop var(--animation-btn, .25s) ease-out;
    text-transform: var(--btn-text-case, uppercase);
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    background-color: hsl(var(--b2) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--bc) / var(--tw-text-opacity));
    outline-color: hsl(var(--bc) / 1);

    transition: transform 0.2s ease;
}

.btn:hover {
    transform: scale(1.1);
}

.btn-primary {
    background: linear-gradient(#283EA2, #223B6A);
    border: 1px solid #4458A6;
    color: #cdcdcd;
}

.btn-primary:hover {
    background: linear-gradient(#2d46b6, #2a4981);
    border: 1px solid #4f65bd;
}


/* KeyFrame Effect */
/* Heart Pulse Effect */
/* Usage: animation: heartBeat 1.3s ease-in-out infinite; */
@keyframes heartBeat {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    14% {
        transform: scale(1.3);
        opacity: 0.9;
    }

    28% {
        transform: scale(1);
        opacity: 1;
    }

    42% {
        transform: scale(1.3);
        opacity: 0.9;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*  FadeIn Effect */
/* Ex) animation: fadeIn 0.5s; < in style tag */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 0;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(-10px);
    }
}


/* Page - Home */
.page_logo {
    margin-top: 100px;
    animation: heartBeat 2.2s ease-in-out infinite;
    display: block;
    transform-origin: center;
    text-align: center;
    padding: 0 0 80px 0;
}

.page_logo img {
    width: 400px;

    margin-left: auto;
    margin-right: auto;
}



/* Loading */
#fullscreen-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

    display: flex;
    justify-content: center;
    align-items: center;
}

#fullscreen-loader.is-loading {
    opacity: 1;
    visibility: visible;
}

#fullscreen-loader img {
    animation: heartBeat 2.2s ease-in-out infinite;
    width: 7%;
}




/* SweetAlert2 Custom */
.swal2-popup {
    border: 2px solid #4f65bd !important;
    border-radius: 12px !important;

    background: linear-gradient(145deg, #4f65bd, #2d46b6 50%, #223B6A 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.4) !important;
}

.swal2-popup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;


    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    border-radius: 10px;
    opacity: 0.6;
    z-index: 0;
}

.swal2-title,
.swal2-html-container,
.swal2-icon {
    position: relative;
    z-index: 1;
}

.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    background: linear-gradient(#283EA2, #223B6A) !important;
    border: 1px solid #4458A6 !important;
    color: #cdcdcd !important;
    border-radius: var(--rounded-btn, .5rem) !important;
    transition: all 0.2s ease !important;
}

.swal2-confirm:hover,
.swal2-cancel:hover,
.swal2-deny:hover {
    background: linear-gradient(#2d46b6, #2a4981) !important;
    border: 1px solid #4f65bd !important;
    transform: scale(1.05);
}

.swal2-cancel {
    background: #555 !important;
}

.swal2-cancel:hover {
    background: #777 !important;
}


/* ================================================= */
/* Footer Section */
/* ================================================= */

.main-footer {
    background-color: #202020;
    padding: 40px 24px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    color: #888;
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo {
    /* height: 80px; */
    width: 80px;
    margin-right: 24px;

    filter: grayscale(100%) brightness(0.4) opacity(0.7);
}

.footer-text {
    font-size: 0.85em;
    line-height: 1.7;
}

.footer-text .text-gold {
    color: hsl(var(--wa));
    font-weight: bold;
}

.footer-links {
    margin-top: 10px;
}

.footer-links a {
    color: #aaa;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

/* ================================================= */
/* ✨ Download Page Styles ✨ */
/* ================================================= */

/* --- 1. Breadcrumbs (페이지 경로) --- */
.breadcrumb-nav {
    padding: 20px 0;
    font-size: 0.9em;
    font-weight: 500;
}

.breadcrumb-nav a {
    color: #aaa;
    transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
    color: #fff;
}

/* 현재 페이지 (활성화) */
.breadcrumb-nav a.active {
    color: #fff;
    font-weight: bold;
}

.breadcrumb-nav span {
    margin: 0 10px;
    color: #777;
}

/* --- 2. Page Title --- */
.page-title-header {
    text-align: center;
    padding: 20px 0 40px 0;
    border-bottom: 2px solid #4458A6;
    margin-bottom: 40px;
}

.page-title-header h2 {
    font-size: 2.5em;
    color: #fff;
    margin: 0;
}

.page-title-header p {
    font-size: 1.1em;
    color: #ccc;
    margin: 10px 0 0 0;
}

/* --- 3. Download List --- */
/* .ranking-card에 .download-card 클래스 추가해서 여백 조정 */
.download-card:not(:last-child) {
    margin-bottom: 30px;
    /* 카드 간 간격 */
    padding: 10px 20px;
    /* 랭킹 카드(20px)보다 상하 여백 줄임 */
}

/* .ranking-card .card-header 재활용 */
.download-card .card-header {
    text-align: left;
    /* 왼쪽 정렬 */
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.download-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.download-list-item {
    position: relative;
    /* z-index 스택 */
    z-index: 2;
    /* 문양(::after)보다 위에 오도록 */

    display: flex;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #4458A6;
}

.download-list-item:last-child {
    border-bottom: none;
    /* 마지막 아이템 밑줄 제거 */
}

.item-icon {
    font-size: 1.8em;
    color: #afa0ff;
    margin-right: 20px;
    width: 30px;
    text-align: center;
}

.item-info {
    flex-grow: 1;
    /* 남은 공간 모두 차지 */
}

.item-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #fff;
}

.item-info p {
    margin: 0;
    font-size: 0.9em;
    color: #ccc;
}

.item-button-wrap {
    flex-shrink: 0;
    /* 버튼이 줄어들지 않도록 */
    margin-left: 20px;
}

/* [신규] 다운로드 버튼 (초록색) */
.btn-download {
    /* 기존 .btn-primary 기반 */
    background: linear-gradient(#28a745, #228B22);
    border: 1px solid #3CB371;
    color: #fff;
    border-radius: var(--rounded-btn, .5rem);
    padding: 10px 25px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-download:hover {
    background: linear-gradient(#32CD32, #2E8B57);
    border-color: #98FB98;
    transform: scale(1.05);
}


/* --- 4. System Requirements Table --- */
.sys-req-table {
    position: relative;
    /* z-index 스택 */
    z-index: 2;
    /* 문양(::after)보다 위에 오도록 */
    width: 100%;
    border-collapse: collapse;
    /* 테두리 한 줄로 */
    color: #ccc;
}

.sys-req-table thead th {
    background-color: rgba(0, 0, 0, 0.3);
    /* 어두운 헤더 */
    padding: 15px;
    text-align: left;
    font-size: 1.1em;
    color: #fff;
}

.sys-req-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #4458A6;
}

/* 테이블 줄무늬 */
.sys-req-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.1);
}

.sys-req-table tbody tr:last-child td {
    border-bottom: none;
}

.sys-req-table .col-item {
    width: 20%;
    font-weight: bold;
    color: #fff;
}

.sys-req-table .col-rec {
    width: 40%;
}

.sys-req-table .col-min {
    width: 40%;
    color: #aaa;
    /* 최소사양은 살짝 어둡게 */
}


/* ================================================= */
/* ✨ Login Page Styles ✨ */
/* ================================================= */

/* .ranking-card를 로그인 폼 카드로 재활용 */
.login-form-card {
    max-width: 500px;
    /* 폼 너비 고정 */
    margin: 40px auto;
    /* 중앙 정렬 */
    padding: 30px 40px;
}

#login-form {
    position: relative;
    /* z-index 스택 */
    z-index: 2;
    /* 문양(::after)보다 위에 오도록 */
    width: 100%;
}

.login-form-group {
    margin-bottom: 20px;
}

.login-form-group label {
    display: block;
    font-size: 1em;
    font-weight: bold;
    color: #eee;
    margin-bottom: 8px;
}

.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    box-sizing: border-box;
    /* 패딩 포함 크기 계산 */

    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    border-radius: 8px;

    color: #fff;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

/* 입력창 포커스 시 보라색 테마 적용 */
.login-form-group input[type="text"]:focus,
.login-form-group input[type="password"]:focus {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #744fbd;
    /* magic-btn의 보라색 */
    box-shadow: 0 0 15px rgba(116, 79, 189, 0.5);
    outline: none;
}

/* 로그인 버튼 (magic-btn 기반) */
.login-btn-full {
    width: 100%;
    height: 60px;
    /* 더 크고 굵게 */
    margin-top: 10px;
    margin-bottom: 25px;
}

.login-btn-full .magic-btn-main {
    font-size: 1.3em;
    /* 텍스트 강조 */
}

/* 하단 링크 (비밀번호 찾기, 회원가입) */
.login-form-footer {
    text-align: center;
    font-size: 0.9em;
}

.login-form-footer a {
    color: #aaa;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.login-form-footer a:hover {
    color: #fff;
}

.login-form-footer span {
    color: #777;
    margin: 0 10px;
}


/* ================================================= */
/* ✨ User Profile Dropdown Styles ✨ */
/* ================================================= */

/* (1) 드롭다운 트리거 (보이는 부분) */
.user-profile-dropdown {
    position: relative;
    /* 드롭다운 메뉴의 기준점 */
}

.user-profile-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.user-profile-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 1px solid #49566b;
    background: #374151;
}

.profile-name {
    position: relative;
    top: -10px;
    margin-left: 12px;
    margin-right: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
}

.user-profile-trigger .fa-caret-down {
    color: #aaa;
}

.profile-icon {
    position: relative;
    top: -10px;
    color: white;
}

/* (2) 드롭다운 메뉴 (숨겨진 부분) */
.user-dropdown-menu {
    /* [중요] 기존 .dropdown-menu와 달리 display: none; 이 없습니다.
       .dropdown:hover .user-dropdown-menu 에서 제어합니다.
    */
    position: absolute;
    top: 100%;
    right: 0;
    /* 오른쪽 정렬 */
    margin-top: 0;
    /* 트리거와 간격 */

    width: 280px;
    /* 예시 이미지처럼 넓게 */

    /* [테마] 크리스탈 카드 스타일 적용 */
    border: 2px solid #744fbd;
    /* 새 보라색 테마 */
    border-radius: 12px;
    background: linear-gradient(145deg, #744fbd, #422db6 50%, #223B6A 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

    overflow: hidden;
    /* 내부 요소가 둥근 모서리를 넘지 않도록 */

    /* [중요] 평소엔 숨김 */
    display: none;
    z-index: 1000;
}

/* [중요] .dropdown에 호버 시 .user-dropdown-menu 표시 */
.dropdown:hover .user-dropdown-menu {
    display: block;
}

/* (3) 드롭다운 내부 컨텐츠 */

/* 재화 정보 */
.currency-info {
    position: relative;
    z-index: 2;
    /* 문양(::after)보다 위에 오도록 */
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.1em;
}

.currency-info div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.currency-info div:last-child {
    margin-bottom: 0;
}

.currency-info i {
    width: 20px;
    margin-right: 10px;
    color: #d0bfff;
    /* 밝은 보라색 */
}

.currency-info .currency-value {
    font-weight: bold;
    margin-left: auto;
    /* 오른쪽 끝으로 밀기 */
}

/* 프로필 링크 */
.profile-links {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-links a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #ccc;
    text-decoration: none;
    transition: all 0.2s ease;
}

.profile-links a i {
    width: 20px;
    margin-right: 15px;
    color: #d0bfff;
}

.profile-links a:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.mypage-wrap {
    position: relative;
    z-index: 2;
    padding: 15px;
}

/* 로그아웃 버튼 */
.logout-wrap {
    position: relative;
    z-index: 2;
    padding: 0 15px 15px 15px;
}

.mypage-btn,
.logout-btn {
    width: 86%;
}

/* [테마] 드롭다운에도 문양 적용 */
.user-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='white' fill-opacity='0.05'%3E%3Cpath d='M 25 90 Q 5 55, 35 20 L 40 25 Q 15 55, 30 90 Z M 75 90 Q 95 55, 65 20 L 60 25 Q 85 55, 70 90 Z M 35 70 L 65 70 L 70 50 L 60 55 L 50 35 L 40 55 L 30 50 Z'/%3E%3C/svg%3E"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60% 60%;
    border-radius: 10px;
    opacity: 0.6;
    z-index: 1;
    /* 컨텐츠(z-index: 2)보다 아래 */
}

/* ================================================= */
/* ✨ Account Info Card Styles (for banner) ✨ */
/* ================================================= */

/* --- 1. 메인 컨테이너 --- */
/* (기존 .ranking-card 테마 재활용) */
.account-info-card {
    /* [중요] 3번 ~ 6번 버튼 영역을 모두 차지합니다 */
    grid-row: 3 / 5;
    /* 3번 행에서 시작해서 5번 행 직전까지 */
    grid-column: 1 / 3;
    /* 1번 열에서 시작해서 3번 열 직전까지 */

    /* .ranking-card 스타일 복사 */
    position: relative;
    border-radius: 12px;
    padding: 20px 25px;
    /* 패딩 좌우 살짝 넓게 */
    box-sizing: border-box;
    border: 2px solid #4f65bd;
    background: linear-gradient(145deg, #744fbd, #422db6 50%, #223B6A 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 3px rgba(255, 255, 255, 0.4);
    animation: pulse-glow 3s infinite ease-in-out;
    overflow: hidden;

    /* 내부 컨텐츠 정렬 */
    display: flex;
    flex-direction: column;
}

/* .ranking-card 문양 복사 */
.account-info-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='white' fill-opacity='0.05'%3E%3Cpath d='M 25 90 Q 5 55, 35 20 L 40 25 Q 15 55, 30 90 Z M 75 90 Q 95 55, 65 20 L 60 25 Q 85 55, 70 90 Z M 35 70 L 65 70 L 70 50 L 60 55 L 50 35 L 40 55 L 30 50 Z'/%3E%3C/svg%3E"); */
    background-size: 100% 260%;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    opacity: 0.6;
    z-index: 1;
}

/* 모든 자식 요소는 문양(z-index: 1) 위에 표시 */
.account-info-card>* {
    position: relative;
    z-index: 2;
}

/* --- 2. 상단 (프로필) --- */
.account-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #ae62ff;
    /* .ranking-card 헤더 선 색상 */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.account-avatar {
    width: 40px;
    /* height: 32px; */
    border-radius: 50%;
    /* box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); */
}

.account-username {
    font-size: 1.3em;
    font-weight: bold;
    color: #fff;
    /* 이름이 길 경우 ... 처리 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- 3. 중단 (재화 정보) --- */
.account-stats {
    display: grid;
    /* [수정] 2열 그리드에서 1열 그리드(한 줄에 한 칸)로 변경 */
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
    flex-grow: 1;
    /* 남은 공간 차지 */
}

.stat-item {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    color: #eee;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 10px 10px 20px;
    border-radius: 8px;
    border: 1px solid #4458A6;
    /* .btn-primary 테두리 색상 */
}

.stat-item i {
    font-size: 1.2em;
    color: #d0bfff;
    /* 유저 드롭다운 아이콘 색상 */
    width: 20px;
    text-align: center;
    padding-right: 2px;
}

.stat-item span {
    font-weight: bold;
    color: #fff;
    /* 숫자가 길 경우 ... 처리 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stat-item-full-width {
    /* [중요] 내부 요소를 좌우로 정렬 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2. 스탯 정보 래퍼 (아이콘 + 텍스트) */
.stat-info-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 기존 .stat-item의 gap과 동일하게 */

    /* [중요] 내용이 길어져도 버튼에 밀려나도록 */
    overflow: hidden;
}

.stat-info-wrap .point {
    /* 숫자가 길어질 경우 ... 처리 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 3. 작은 Topup 버튼 (신규) */
.btn-topup-sm {
    flex-shrink: 0;
    /* 버튼 크기 고정 */

    /* 기본 .btn 스타일 일부 적용 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* 아이콘과 텍스트 간격 */
    font-weight: 600;
    border-radius: var(--rounded-btn, .5rem);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;

    /* [중요] 작은 크기 설정 */
    font-size: 0.8em;
    padding: 6px 12px;
    height: auto;
    min-height: 0;

    /* 초록색 테마 */
    background: linear-gradient(#28a745, #228B22);
    border: 1px solid #3CB371;
    color: #fff;
}

.btn-topup-sm:hover {
    background: linear-gradient(#32CD32, #2E8B57);
    border-color: #98FB98;
    transform: scale(1.05);
}

/* --- 4. 하단 (버튼) --- */
.account-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* .btn 스타일 재정의 (높이 고정 해제) */
.account-links .btn {
    height: auto;
    min-height: 0;
    padding: 12px;
    font-size: 1em;
}

/* [신규] .logout-btn과 동일한 스타일의 .btn-danger */
.btn-danger {
    background: linear-gradient(#e63946, #d00000);
    border: 1px solid #e63946;
    color: #ffffff;
}

.btn-danger:hover {
    background: linear-gradient(#ff4757, #e63946);
    border: 1px solid #ff4757;
    color: #ffffff;
    /* 호버 시 색상 유지 */
}


.ranking-card:hover,
.download-card:hover,
.news-page-card:hover,
.account-card:hover,
.login-form-card:hover,
.shop-card:hover {
    transform: none !important;
}