/* 모두가 공통으로 import 해야하는 기초 세팅 파일 */

@import url('font.css');

:root {
    /* 변수를 사용할 때는 var(--main-color); 이렇게 사용 */
    --main-font: 'Pretendard';
    --main-font-weight: 400;

    --main-color-01: #608DFF;
    --main-color-02: #4BA2FF;
    --main-color-03: #47BEFF;

    --black-color-01: #424242;
    --black-color-02: #575757;
    --gray-color-01: #747474;
    --gray-color-02: #9E9E9E;
    --gray-color-03: #C4C4C4;

    /* 헤더 높이 */
    --header-height: 8.43vh;

    /* 기본 한 페이지 높이 */
    --page-height: calc(100vh - var(--header-height));
    
    /* 헤더 요소 크기 */
    --header-logo-width: 4.5vh;
    --header-font-size: 2vh;

    /* 기본 패딩 크기 */
    --basic-padding: 12.5vw;
    --mobile-padding: 10vw
}

* {
    margin: 0;
    padding: 0;
    /* 폰트 전역설정 완료 */
    font-family: var(--main-font);
    font-weight: var(--main-font-weight);
}

body {
    min-height: 100vh;
    padding-top: var(--header-height);
    font-family: var(--main-font);
    font-weight: var(--main-font-weight);
}  

a { 
    color: #fff;
    font-weight: 500;
    text-decoration-line: none; 
}
li { list-style: none; }

/* header */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--basic-padding);
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(117, 117, 117, 0.08);
    z-index: 55;
}

header .header-logo { width: var(--header-logo-width); }

.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

header .header-menu {
    color: var(--black-color-01);
    font-size: var(--header-font-size);
    font-weight: 600;
    margin-left: 5vw;
}
header ul>li>a:hover {
    color: var(--main-color-01);
    font-weight: 700;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 4vh;
}
.toggle {
    display: block;
    width: 4vh;
}

/* 메뉴 페이지 */
.menu-page {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;    height: 100%;
    background-color: white;
    transition: right 0.4s ease;
    z-index: 60;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top: 3vh;
}
.menu-page.active {
    right: 0;
}

.menu-header { margin: 10vh 0; }
.menu-header img { width: 19vh; }

.menu-item {
    display: block;
    color: var(--black-color-01);
    font-size: 3vh;
    font-weight: 500;
    padding: 2vh;
}

.menu-footer {
    display: flex;
    justify-content: center;
    margin: 3vh;
}
.support-link {
    border: 2px solid #fff;
    border-radius: 50px;
    box-shadow: 1px 3px rgba(117, 117, 117, 0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5vh 4vh;
}
.support-link img {
    width: 4vh;
    margin-right: 3vw;
}
.support-link p {
    color: var(--main-color-01);
    font-size: 2.2vh;
    font-weight: 500;
}

/* footer */
footer {
    color: #fff;
    background-color: var(--black-color-02);
    padding: 0 var(--basic-padding);
    max-width: 100%;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 5vh 0 3vh;
    gap: 4vw;
}

.footer-menu { padding: 0; }
.footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu li { display: flex; flex-wrap: wrap; gap: 0.5em 3vw; }
.footer-menu a {
    display: inline-block;
    font-size: 2.5vh;
    padding: 0.3em 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-menu a:hover {
    color: var(--main-color-01);
    opacity: 0.95;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.2em;
    flex-shrink: 0;
}

.footer-connect { font-size: 2vh; text-align: right; }
.footer-connect .president {
    display: inline-block;
    margin: 5px 0;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-connect .president:hover {
    color: var(--main-color-01);
    opacity: 0.95;
}
.footer-connect .president::after {
    content: '|';
    padding: 0 6px 0 15px;
}

.footer-instagram {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.2s ease;
}
.footer-instagram:hover { opacity: 0.9; }
.footer-instagram a {
    transition: color 0.2s ease;
}
.footer-instagram a:hover { color: var(--main-color-01); }
.footer-instagram img {
    width: 3.5vh;
    height: auto;
}

.footer-copyright {
    font-size: 1.5vh;
    text-align: center;
    padding: 1em 0;
    opacity: 0.87;
}

/* floating button */
.floating {
    position: fixed;
    top: 20vh;  right: 12vh;
    border: 2px solid #fff;
    border-radius: 50px;
    box-shadow: 0 2px rgba(117, 117, 117, 0.08);
    background-color: rgba(255, 255, 255, 0.5);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.3vh 1.2vw;
    z-index: 50;

    /* 기존 깜빡임 애니메이션 제거: 호버 시에만 색 변화가 일어나도록 수정 */
    animation: none;

    cursor: pointer;
}
.floating-logo {
    width: 1.5vw;
    margin-right: 0.6vw;
}
.floating p {
    color: var(--main-color-01);
    font-size: 0.9vw;
    font-weight: 500;
}
.bg-wrapper { 
    position: absolute; 
    top: 0;
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    overflow: hidden; 
} 

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

#mobile-notice {
  display: none;
}

/* 데스크톱이 아닌 화면(태블릿·모바일) → 안내 화면만 표시 */
@media screen and (max-width: 1024px) {
  #mobile-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;

    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #ffffff;
    z-index: 99999;

    text-align: center;
    padding: 40px;
    box-sizing: border-box;
  }

  .mobile-logo {
    width: 30%;
    max-width: 160px;
    height: auto;
  }

  #mobile-notice h1 {
    font-family: 'GMarketSans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #424242;
    margin: 0;
  }

  #mobile-notice p {
    font-family: 'Pretendard', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.9;
    color: #9e9e9e;
    margin: 0;
  }

  /* 데스크톱용 콘텐츠 전체 숨김 */
  body > *:not(#mobile-notice) {
    display: none !important;
  }
}