@charset "utf-8";

/* 전역 수중 로딩 애니메이션 */
.water-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: block;
    overflow: hidden;
    pointer-events: none;
    /* 컨테이너 자체를 내려놓음 */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

/* 활성화 시 위로 올라옴 */
.water-loader.is-loading {
    transform: translateY(0);
    pointer-events: auto;
}

/* 퇴장 시: 컨테이너가 그대로 위로 끝까지 빠져나감 */
.water-loader.exiting {
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

/* 퇴장 완료 후 즉시 하단으로 순간이동 시키기 위한 클래스 */
.water-loader.reset {
    transition: none !important;
    transform: translateY(100%) !important;
}

/* 첫 접속 시 즉시 제거 */
.water-loader.no-anim {
    display: none !important;
    transform: translateY(100%) !important;
}

.loader-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 정적 그라데이션 고정 */
    background: linear-gradient(135deg, #00CCC6 0%, #0559B3 100%);
}

.loader-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5); /* 뿅! 하고 나타나기 위한 초기 크기 */
    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 클릭 시 미리 등장 (entering) 또는 새 페이지 진입 후 상태 유지 */
.water-loader.entering .loader-content,
.water-loader.is-loading .loader-content {
    opacity: 1;
    transform: scale(1);
}

/* 새 페이지에서 이어받을 때는 등장 효과를 주지 않는다.
   잠수함이 이미 날아가는 중인데 거기서 또 커졌다 하면 한 번 튄다 */
.water-loader.show-content .loader-content {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 퇴장 시: 로고가 뿅! 하고 작아지며 사라짐 */
.water-loader.exiting .loader-content {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.loader-logo {
    max-width: 200px;
    z-index: 10;
}

/* 잠수함이 화면을 가로지른다.
   문제는 중간에 진짜로 페이지가 바뀐다는 점이다. 그래서 한 번에 건너지 않고
   나가는 화면에서 왼쪽→가운데, 새 화면에서 가운데→오른쪽으로 나눠 잇는다.
   이음매가 화면 한가운데라 끊긴 것이 보이지 않는다 */
.loader-logo {
    max-width: 200px;
    z-index: 10;
    /* 잠수함이 화면 밖까지 나가야 하므로 자리를 잡아만 둔다 */
    width: 200px;
}

/* 로고 잠수함은 왼쪽을 보고 있다. 그러니 오른쪽에서 들어와 왼쪽으로 빠져야
   앞으로 나아가는 것이 된다 */
.loader-logo img {
    width: 100%;
    height: auto;
    transform: translateX(60vw);
}

/* 1단계 — 링크를 누른 화면. 오른쪽에서 들어와 가운데에 선다 */
.water-loader.is-loading:not(.show-content) .loader-logo img {
    animation: subEnter .5s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes subEnter {
    0% { transform: translateX(60vw) translateY(6px) rotate(3deg) scale(.85); }
    100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

/* 2단계 — 새 화면. 가운데에서 이어받아 왼쪽으로 빠져나간다 */
.water-loader.show-content .loader-logo img {
    animation: subLeave 1.5s cubic-bezier(.5, 0, .75, 1) forwards;
}

@keyframes subLeave {
    /* 잠깐 떠 있다가 */
    0% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
    22% { transform: translateX(-4px) translateY(-8px) rotate(-2deg) scale(1); }
    38% { transform: translateX(0) translateY(2px) rotate(1deg) scale(1); }
    /* 가속해서 빠진다 */
    100% { transform: translateX(-70vw) translateY(-14px) rotate(-4deg) scale(.8); }
}

/* 물방울 연출 */
.loader-bubbles {
    position: absolute;
    bottom: -50px;
    width: 100%;
    height: 100%;
}

.l-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    bottom: -50px;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
}

.water-loader.show-content .l-bubble {
    animation: riseBubbleLoader 2s infinite ease-in;
}

.l-bubble:nth-child(1) { width: 30px; height: 30px; left: 10%; animation-duration: 1.5s; }
.l-bubble:nth-child(2) { width: 15px; height: 15px; left: 25%; animation-duration: 2.2s; animation-delay: 0.2s; }
.l-bubble:nth-child(3) { width: 45px; height: 45px; left: 45%; animation-duration: 1.8s; animation-delay: 0.5s; }
.l-bubble:nth-child(4) { width: 25px; height: 25px; left: 60%; animation-duration: 2s; animation-delay: 0.3s; }
.l-bubble:nth-child(5) { width: 40px; height: 40px; left: 80%; animation-duration: 1.6s; animation-delay: 0.7s; }
.l-bubble:nth-child(6) { width: 20px; height: 20px; left: 90%; animation-duration: 2.5s; animation-delay: 0.1s; }
.l-bubble:nth-child(7) { width: 35px; height: 35px; left: 15%; animation-duration: 1.9s; animation-delay: 0.4s; }
.l-bubble:nth-child(8) { width: 10px; height: 10px; left: 70%; animation-duration: 2.1s; animation-delay: 0.8s; }

@keyframes riseBubbleLoader {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; transform: translateY(-80vh) scale(1) translateX(20px); }
    100% { transform: translateY(-110vh) scale(1.5) translateX(-20px); opacity: 0; }
}

/* Reset & Base */
html {
    scroll-behavior: smooth;
    /* 네이티브 스크롤바는 어떤 색을 줘도 자기 자리(띠)를 차지한다.
       그래서 아예 감추고, 본문 위에 뜨는 막대를 따로 그린다 (.jt-scroll) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 떠 있는 스크롤 막대 — 자리를 차지하지 않아 배경 띠가 생기지 않는다 */
.jt-scroll {
    position: fixed;
    top: 0;
    right: 4px;
    width: 6px;
    height: 100vh;
    z-index: 9998;
    pointer-events: none;
}

.jt-scroll-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 999px;
    background: var(--point-mint);
    opacity: .85;
    transition: opacity .3s;
}

/* 멈춰 있을 때는 옅게 둔다 */
.jt-scroll.is-idle .jt-scroll-bar { opacity: .35; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 드래그(선택) 영역 포인트 컬러 적용 */
::selection {
    background-color: var(--point-blue);
    color: #fff;
}
::-moz-selection {
    background-color: var(--point-blue);
    color: #fff;
}

body {
    font-family: var(--font-family-base);
    color: var(--text-dark);
    background-color: var(--bg-white);
    line-height: 1.6;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: top;
}

/* Container Structure */
#layout-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

main#container {
    flex: 1;
}

/* NHN Style Layout (Full-width, Generous Space) */
.gallery-mode {
    width: 100%;
    margin: 0 auto;
    padding: 120px 0; /* 메인 페이지 위아래 넉넉한 여백 */
}

/* 본문 안쪽 제약 (일반 서브페이지 및 특정 컨텐츠만 적용) */
.inner-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* For sub pages */
.sub-content.gallery-mode {
    padding-top: 150px; /* Space for fixed header */
    min-height: 70vh;
}

/* 일반 헤더 서브 페이지: 상단 비주얼이 없으므로 고정 헤더(80px) 바로 아래 약간의 여백만 둔다 */
.sub-content.sub-plain.gallery-mode {
    padding-top: 120px;
}

/* 게시판 등 목록형 콘텐츠는 화면 가로를 꽉 채운다.
   좌우 여백은 헤더(.header-inner)와 동일한 60px으로 맞춰 로고/GNB와 시작선을 일치시킨다 */
.sub-content.sub-plain .inner-wrap {
    max-width: none;
    padding: 0 60px;
}

@media (max-width: 1024px) {
    /* 모바일 헤더 높이 70px 기준 */
    .sub-content.sub-plain.gallery-mode {
        padding-top: 100px;
    }

    .sub-content.sub-plain .inner-wrap {
        padding: 0 20px; /* 헤더 모바일 패딩과 동일 */
    }
}

/* Animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* General Content Wrap */
.content-wrap.gallery-mode {
    position: relative;
    background: #ffffff;
}