@charset "UTF-8";

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/Pretendard/PretendardVariable.woff2') format('woff2-variations');
}

/*---------------------------------------------------------------------*/

html,
body,
input,
select,
textarea,
a,
button,
pre {
    font-family: "Pretendard Variable", Pretendard, sans-serif !important;
}

*, *:focus {
    appearance: none; /* 모든 요소의 기본 스타일 제거 */
    outline: none; /* 포커스 시 아웃라인 제거 */
}

input, button, select, textarea {
    appearance: none; /* 폼 요소의 브라우저 기본 스타일 제거 */
}

*:focus {
    outline: none; /* 포커스 시 아웃라인 제거 */
    ring: 0; /* 필요한 경우, Tailwind CSS의 ring 크기 제거 (CSS 원시 속성이 아님) */
}

.bg-grid-pattern {
    background-image:
            linear-gradient(to right, #e5e5e5 1px, transparent 1px),
            linear-gradient(to bottom, #e5e5e5 1px, transparent 1px);
    background-size: 35px 35px;
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #4b5563;
    margin-left: 4px;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@media (min-width: 768px) {
    .tracking-in-expand-fwd {
        animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    }
}
@keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-700px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        transform: translateZ(0);
        opacity: 1;
    }
}

/*@media (max-width: 480px) {
    .cursor {
        display: none !important;
    }
}*/

.slide-out-left {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
}

.highlight {
    position: relative;
}

.highlight:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-color: #78DCFF;
    z-index: -1;
}

/*----------------------------------------------------------------*/
.scale-in-center {
    -webkit-animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.scale-out-center {
    -webkit-animation: scale-out-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-out-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
}
/*----------------------------------------------------------------*/
.btn-purple-grad {background-image: linear-gradient(to right, #fc00ff 0%, #00dbde  51%, #fc00ff  100%)}
.btn-purple-grad {
    text-align: center;
    transition: 0.8s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn-purple-grad:hover {
    background-position: right center; /* change the direction of the change here */
    text-decoration: none;
}

/*----------------------------------------------------------------*/
.btn-blue-grad {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5  51%, #00d2ff  100%)}
.btn-blue-grad {
    transition: 0.8s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn-blue-grad:hover {
    background-position: right center; /* change the direction of the change here */
    text-decoration: none;
}
/*----------------------------------------------------------------*/
.btn-blue2-grad {background-image: linear-gradient(to right, #B721FF 0%, #21D4FD  51%, #3a7bd5  100%)}
.btn-blue2-grad {
    transition: 0.8s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn-blue2-grad:hover {
    background-position: right center; /* change the direction of the change here */
    text-decoration: none;
}
/*----------------------------------------------------------------*/
.btn-blue3-grad {
    background-image: linear-gradient(to right, #12D5FA 0%, #18BBFC  51%, #1EA5FE  100%);
    transition: 0.8s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #eee;
    display: block;
}

.btn-blue3-grad:hover {
    background-position: right center; /* change the direction of the change here */
    text-decoration: none;
}
/*----------------------------------------------------------------*/

.startBtn{
    background-image: linear-gradient(120deg, #69FF97 0%, #00E4FF 100%);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    /*width: 150px; height: 144px;*/
    animation: morph 3s linear infinite;
    transform-style: preserve-3d;
    outline: 1px solid transparent;
    will-change: border-radius;
}
.startBtn:before,
.startBtn:after{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0; top: 0;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    /*box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);*/
    will-change: border-radius, transform, opacity;
    animation-delay: 200ms;
    background-image: linear-gradient(120deg, #FEDC31 0%, #FA2CD7 70%, #33D0E0 100%);
}

.startBtn:before{
    animation: morph 3s linear infinite;
    opacity: .21;
    animation-duration: 1.5s;
}

.startBtn:after {
    content: "Start Now";
    width: 100%;
    height: 100%;
    display: flex; /* ★ flex로 */
    align-items: center; /* 세로 가운데 */
    justify-content: center; /* 가로 가운데 */
    position: absolute;
    left: 0; top: 0;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    /*box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);*/
    will-change: border-radius, transform, opacity;
    animation: morph 3s linear infinite;
    animation-delay: 400ms;
    opacity: 0.89;
    background-image: linear-gradient(120deg, #FEDC31 0%, #FA2CD7 70%, #33D0E0 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

@keyframes morph{
    0%,100%{
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
        opacity: .89;
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
        transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
}

@keyframes fadeIn {
    100% {
        transform: scale(1.03);
        opacity: 0;
    }
}

/*---------------------------------------------------------------------*/

.bg-dotted {
    background-color: #ffffff; /* 배경 색 */
    background-image:
            radial-gradient(circle, #EFEFEF 10%, transparent 10%),
            radial-gradient(circle, #EFEFEF 10%, transparent 10%);
    background-size: 5px 5px; /* 도트 크기와 간격 조절 */
    background-position: 0 0, 5px 5px;
}


/*-- 스크롤 --------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #4b6bfb;
    border-radius: 10px;
    background-clip: padding-box;
    cursor: pointer;
    border: 0px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: #b6b8c7;
}

/*다크모드 무시*/
@media (prefers-color-scheme: dark) {
    html,
    body {
        background: #fff !important;
        background-color: #fff !important;
    }
}

.shadow-up {
    box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.03);
}

.inputBox {
    position: relative;
    background: #C9C9C9;
    padding: 1px;
    border-radius: 9999em;
    display: inline-block;
}

.inputBox input:focus{
    background: #E3F3FF;
}

.inputBox label {
    position: relative;
    border-radius: inherit;
    border: none;
    outline: none;
    z-index: 1;
    font-family: inherit;
    line-height: inherit;
    background-color: #EFF5F9;
}

.inputBox-grad {
    position: relative;
    background: linear-gradient(21deg, #B721FF, #0270F4);
    padding: 1px;
    border-radius: 9999em;
    display: inline-block;
}

.inputBox-grad label {
    position: relative;
    border-radius: inherit;
    border: none;
    outline: none;
    z-index: 1;
    font-family: inherit;
    line-height: inherit;
    background-color: #EFF5F9;
}

.focus-in {
    -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/*input date 달력 이미지 안보이게 하기*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

select option {
    color: #474c57; /* 원하는 색상 코드로 변경 */
}

/*기본 테이블 스타일*/
.basicTable thead { background-color: #D9EEFF; }
.basicTable thead th {
    font-weight: 600;
    color: #3c4d67;
    padding: 0.75rem;
    white-space: nowrap;
}
.basicTable tbody td, tbody th {
    font-weight: 400;
    color: #636363;
    padding: 0.75rem;
    text-align: center;
    white-space: nowrap;
}

.basicTable tbody tr:hover {
    cursor: pointer;
    background-color: #faf8ff;
}

.basicTable tbody tr + tr {
    border-top: 1px solid #C6C6C6;
}


.tree ul {
    padding-top: 20px; position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: -10px; right: 50%;
    border-top: 1px solid #28CEFE;
    width: 50%; height: 30px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #28CEFE;
}

.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

.tree li:only-child{ padding-top: 0;}

.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}

.tree li:last-child::before{
    border-right: 1px solid #28CEFE;
    border-radius: 0 7px 0 0;
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
}
.tree li:first-child::after{
    border-radius: 7px 0 0 0;
    -webkit-border-radius: 7px 0 0 0;
    -moz-border-radius: 7px 0 0 0;
}

.tree ul ul::before{
    content: '';
    position: absolute; top: -10px; left: 50%;
    border-left: 1px solid #28CEFE;
    width: 0; height: 30px;
}

.tree li h3{
    display: inline-block;
}

/*-------------------------------------------------------------------*/
.bounce {
    animation: bounce 1.5s infinite ease-in-out;
    display: inline-block; /* 또는 block, 상황에 맞게 */
    transform-origin: center bottom; /* 튀는 느낌 중심을 아래로 */
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px); /* 위로 통통 */
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-5px); /* 두 번째, 약하게 튀기 */
    }
}


.aspect-square { aspect-ratio: 1 / 1; }


.custom-vertical-box {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1000;
}


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #0270F4;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*경연대회 > 커뮤니티 메뉴 내 탭버튼 css */
.tab-grad {
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to right, #22d3ee, #2563eb);
}

.tab-grad:hover {
    background: linear-gradient(to right, #06b6d4, #1d4ed8);
}

.nav-hover {
    text-align: center;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 2px;
    position:relative;
    overflow:hidden;
}

.nav-hover:before {
    content: "";
    position: absolute;
    width: 0;
    background : #fff;
    left: 45%;
    height: 2px;
    bottom: 0;
    transition: all .3s;
    opacity: 0.7;
}

.nav-hover:hover:before {
    width: 100%;
    left:0;
}