/* 일반 모드 스타일 */
.logo .under_txt {
    font-size: 12px;
    color: black;
}

.logo a {
    color: #435ebe;
}

.logo .fas {
    margin-right: 2px;
    font-size: x-large;
}

.theme-toggle .iconify {
    width: 25px;
    height: 25px;
}

.theme-toggle .form-check-input {
    width: 50px; /* 원하는 크기로 설정 */
    height: 25px; /* 원하는 크기로 설정 */
}

.theme-toggle .burger-btn {
    margin-top: 0px; /* y 위치 조절 */
    font-size: 34px;  /* 아이콘 사이즈 조절 */
    width: 50px;      /* 너비 조절 */
    height: 50px;     /* 높이 조절 */
}

.card:hover {
    background-color: bisque;
}

@media (max-width: 576px) {
    .logo.custom a {
        font-size: 0.9rem;
        /* 링크 전체에 적용되는 기본 폰트 크기 */
    }

    .logo.custom a .under_txt {
        font-size: 0.55rem;
        /* '웹에서 사용하는 유용한 어플리케이션' 텍스트에만 적용 */
    }

    .logo .fas {
        margin-right: 2px;
        font-size: small;
    }

    .theme-toggle .iconify {
        width: 20px;
        height: 20px;
    }
    
    .theme-toggle .form-check-input {
        width: 40px; /* 원하는 크기로 설정 */
        height: 20px; /* 원하는 크기로 설정 */
    }
    
    ul.flip {
        position: relative;
        float: left;
        margin: 3px;
        width: 50px;
        height: 70px;
        font-size: 3.5rem;
        font-weight: bold;
        line-height: 70px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
    }

    /* Separator Style */
    .separator {
        float: left;
        margin: 5px;
        font-size: 2rem;
        line-height: 70px;
        color: #ccc;
        text-shadow: 0 1px 2px #000;
    }

    .theme-toggle .burger-btn {
        margin-top: -18px; /* y 위치 조절 */
        font-size: 24px;  /* 아이콘 사이즈 조절 */
        width: 20px;      /* 너비 조절 */
        height: 20px;     /* 높이 조절 */
    }
}

/* 다크 모드 스타일 */
html[data-bs-theme=dark] .logo .under_txt {
    font-size: 12px;
    color: rgb(222, 226, 230);
}

html[data-bs-theme=dark] .logo a {
    color: #a3bffa; /* 다크 모드에서 링크 색상 */
}

html[data-bs-theme=dark] .logo .fas {
    margin-right: 2px;
    font-size: x-large;
    color: #a3bffa; /* 다크 모드에서 아이콘 색상 */
}

html[data-bs-theme=dark] .theme-toggle .iconify {
    width: 25px;
    height: 25px;
    color: #a3bffa; /* 다크 모드에서 아이콘 색상 */
}

html[data-bs-theme=dark] .theme-toggle .form-check-input {
    width: 50px !important; /* 원하는 크기로 설정 */
    height: 25px; /* 원하는 크기로 설정 */
    background-color: #2b2b2b; /* 다크 모드에서 배경색 */
}

html[data-bs-theme=dark] .theme-toggle .burger-btn {
    margin-top: 0px; /* y 위치 조절 */
    font-size: 34px;  /* 아이콘 사이즈 조절 */
    width: 50px;      /* 너비 조절 */
    height: 50px;     /* 높이 조절 */
    color: #a3bffa;   /* 다크 모드에서 버튼 색상 */
}

html[data-bs-theme=dark] .card:hover {
    background-color: dimgray;
}

@media (max-width: 576px) {
    html[data-bs-theme=dark] .logo.custom a {
        font-size: 0.9rem;
        color: rgb(222, 226, 230); /* 다크 모드에서 링크 색상 */
    }

    html[data-bs-theme=dark] .logo.custom a .under_txt {
        font-size: 0.55rem;
        color: rgb(222, 226, 230); /* 다크 모드에서 텍스트 색상 */
    }

    html[data-bs-theme=dark] .logo .fas {
        margin-right: 2px;
        font-size: small;
        color: #a3bffa; /* 다크 모드에서 아이콘 색상 */
    }

    html[data-bs-theme=dark] .theme-toggle .iconify {
        width: 20px;
        height: 20px;
        color: #a3bffa; /* 다크 모드에서 아이콘 색상 */
    }
    
    html[data-bs-theme=dark] .theme-toggle .form-check-input {
        width: 40px !important; /* 원하는 크기로 설정 */
        height: 20px; /* 원하는 크기로 설정 */
        background-color: #2b2b2b; /* 다크 모드에서 배경색 */
    }
    
    html[data-bs-theme=dark] ul.flip {
        position: relative;
        float: left;
        margin: 3px;
        width: 50px;
        height: 70px;
        font-size: 3.5rem;
        font-weight: bold;
        line-height: 70px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
        color: #a3bffa; /* 다크 모드에서 텍스트 색상 */
    }

    /* Separator Style */
    html[data-bs-theme=dark] .separator {
        float: left;
        margin: 5px;
        font-size: 2rem;
        line-height: 70px;
        color: #ccc;
        text-shadow: 0 1px 2px #000;
    }

    html[data-bs-theme=dark] .theme-toggle .burger-btn {
        margin-top: -18px; /* y 위치 조절 */
        font-size: 24px;  /* 아이콘 사이즈 조절 */
        width: 20px;      /* 너비 조절 */
        height: 20px;     /* 높이 조절 */
        color: #a3bffa;   /* 다크 모드에서 버튼 색상 */
    }
}


/* 쿠키배너 */
.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1040;
    display: none; /* 기본적으로 숨김 */
}

.btn-group-custom {
    display: flex;
    justify-content: start;
}