/* 모든 html에 공통으로 적용되는 css */

/*  <----------------------------- css reset start  -----------------------------> */
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'); /* normalize.css */

:root {
    --primary-color: #eaeaea; /* 주 색상 */
    --secondary-color: #181818; /* 보조 색상 */
    --point-color: #52B3F8; /* 포인트 색상 */
    --transition: .3s ease-in-out; /* 트랜지션 */
    /* 다크 모드 일 때는 주 색상과 보조 색상이 반대가 되므로 코드상에 혼란을 줄 수 있음. 좋은 방법이 생각나면 이 부분은 추후 수정해야 할 듯. */
}

*, *::before, *::after {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-optical-sizing: auto;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    width: 100vw;
    max-width: 2560px;
    height: 100%;
    padding: 0 6.25rem; /* 상하 마진 0px, 좌우 마진 100px */
    color: var(--secondary-color);
    background: var(--primary-color);
    overflow-x: hidden;
    transition: background var(--transition) , color var(--transition);
    display: flex;
    flex-direction: column;
}

button {
    all: unset;
}

button {
    all: unset;
}

a {
    text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    line-height: 1.6;
}

p {
    margin: 0;
    line-height: 1.6;

}

input,button,textarea {
    outline: none;
}

button {
    cursor: pointer;
}

ul {
    list-style-type: none;
}

li {
    list-style-type: none;
    cursor: pointer;
}

img {
    pointer-events: none
}

body.loading * {
    visibility: hidden;
}

body.loading .background-video {
    visibility: visible;
    opacity: 0;
}
/*  <----------------------------- css reset end  -----------------------------> */





/* <----------------------------- header css start -----------------------------> */
header {
    position: relative; /* 상대 위치 */
    width: 100%; /* 너비 100% */
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-link {
    transition: all var(--transition);
}

.header-link:hover {
    opacity: 0.5;
}

.header-logo {
    width: 5rem;
}

.nav-links {
    display: none;
    gap: 1.5rem;
}

.nav-link {
    text-decoration: none;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    width: auto;
    height: 1.875rem;
    border: solid 0.0625rem var(--secondary-color);
    border-radius: 1rem;
    padding: 0.3rem 0.5rem; /* 상하 패딩 4.8px, 좌우 패딩 8px */
    cursor: pointer;
    transition: all var(--transition);
}

.nav-link:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

 /* The switch - the box around the slider */
.switch {
    display: block;
    --width-of-switch: 3.5rem;
    --height-of-switch: 1.875rem; /* size of sliding icon -- sun and moon */
    --size-of-icon: 1.4rem; /* it is like a inline-padding of switch */
    --slider-offset: 0.3rem;
    position: relative;
    width: var(--width-of-switch);
    height: var(--height-of-switch);
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    border:  solid 1px var(--secondary-color);
    transition: .4s;
    border-radius: 1rem;
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--size-of-icon, 1.4rem);
    width: var(--size-of-icon, 1.4rem);
    border-radius: 20px;
    left: var(--slider-offset, 0.3rem);
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
    transition: .4s;
}

input:checked+.slider {
    background-color: #181818;
    border: solid 1px var(--primary-color);
}

input:checked+.slider:before {
    left: calc(100% - (var(--size-of-icon, 11.4rem) + var(--slider-offset, 0.3rem)));
    background: #181818;
    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
}

.menu-btn {
    display: none;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.menu-btn:hover {
    opacity: 0.5;
    transform: rotate(360deg);
}

.tech-btn {
    width: 2rem;
    height: 2rem;
}

.toggle-nav-container {
    display: none;
    justify-content: center;
    animation: slideOut 0.3s ease-in-out; /* 애니메이션 추가 */
}

.toggle-nav-container.active {
    display: flex;
    position: absolute;
    top: calc(100% + 0.5rem); /* .menu-btn의 높이 + 여백 */
    right: 0; /* 오른쪽 정렬 */
    animation: slideIn 0.3s ease-in-out; /* 애니메이션 추가 */

}

.toggle-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    text-align: center;
    gap: 1rem;
    width: 8.5rem;
    height: 15rem;
    border-radius: 20px;
    transition: all var(--transition);
    z-index: 1;
}

@keyframes slideIn {
    0% {
        transform: translateX(+100%); /* 초기 위치: 위로 이동 */
    }
    100% {
        transform: translateX(0); /* 최종 위치: 원래 위치로 이동 */
    }
}

@keyframes slideOut {
    0% {
      transform: translateX(0); /* 초기 위치: 원래 위치 */
    }
    100% {
      transform: translateX(+100%); /* 최종 위치: 위로 이동 */
    }
}
/* <----------------------------- header css end -----------------------------> */





/* <----------------------------- main css start -----------------------------> */
main {
    position: relative;
    width: 100%;
    height: auto;
    flex: 1 0 auto;
}

section {
    width: 100%;
}
/* <----------------------------- main css end -----------------------------> */





/* <----------------------------- footer css start -----------------------------> */
footer {
    position: relative;
    width: 100%;
    height: 4.375rem; /* 높이 70px */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 6.25rem;
    flex-shrink: 0;
}

.footer-link {
    transition: var(--transition);
    margin-bottom: 0.625rem;

}

.footer-link:hover {
    opacity: 0.5;
}

.footer-logo {
    width: 3rem;
}

.footer-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.1rem;

}
.footer-text {
    font-size: 0.75rem;
    font-weight: 300;
    text-align: right;
    color: var(--secondary-color);
}

/* <----------------------------- footer css end -----------------------------> */


/*  <----------------------------- dark mode start  -----------------------------> */
.dark-mode {
    background: var(--secondary-color); 
    color: var(--primary-color);
}

.dark-mode body {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.dark-mode .header-logo,
.dark-mode .footer-logo {
    filter: invert(1);
}

.dark-mode .nav-link {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.dark-mode .nav-link:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.dark-mode .menu-btn img {
    filter: invert(1);
}

.dark-mode .footer-text {
    color: var(--primary-color);
}
/*  <----------------------------- dark mode end  -----------------------------> */





/*  <----------------------------- responsible css start  -----------------------------> */
@media screen and (min-width: 2561px) {
    html {
        font-size: 30px;
    }

    body {
        padding: 0 12.5rem; /* 상하 마진 0px, 좌우 마진 200px */
    }
    
}

@media screen and (max-width: 2560px) {
    html {
        font-size: 25px;
    }

    body {
        padding: 0 12.5rem; /* 상하 마진 0px, 좌우 마진 200px */
    }
    
}
@media screen and (max-width: 1920px) {
    html {
        font-size: 21px;
    }

    body {
        padding: 0 9.375rem; /* 상하 마진 0px, 좌우 마진 150px */
    }
}

@media screen and (max-width: 1440px) {
    html {
        font-size: 16px;
    }
    body {
        padding: 0 6.25rem; /* 상하 마진 0px, 좌우 마진 100px */
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 14.5px;
    }

    body {
        padding: 0 4.688rem; /* 상하 마진 0px, 좌우 마진 75px */
    }
    
}

@media screen and (max-width: 930px) {
    html {
        font-size: 13.5px;
    }

    body {
        padding: 0 4.688rem; /* 상하 마진 0px, 좌우 마진 75px */
    }
    
}

@media screen and (max-width: 870px) {
    html {
        font-size: 13px;
    }

    body {
        padding: 0 4.688rem; /* 상하 마진 0px, 좌우 마진 75px */
    }
    
}

@media (max-width: 850px) {

    .nav-links {
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 12.5px;
    }
    body {
        padding: 0 3.125rem; /* 상하 마진 0px, 좌우 마진 50px */
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 12px;
    }

    body {
        padding: 0 1.563rem; /* 상하 마진 0px, 좌우 마진 25px */
        height: 60vh;
    }

}
/*  <----------------------------- responsible css end  -----------------------------> */