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

THREE.js

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

::selection{
    background-color:rgb(0,53,255,0.5);
}
::-moz-selection {
    background-color:rgb(0,53,255,0.5);
}

body {
    margin: 0;
    height: 100vh;
}

.scroll-lock {
    overflow: hidden;            /* 수직·수평 스크롤 모두 잠금 */
    overscroll-behavior: none;   /* 터치 바운스(모바일) 방지 */
    height: 100vh;               /* iOS Safari 등에서 바디 높이 고정 */
}
canvas {
    pointer-events: none;
}
#intro-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: transparent !important; /* 진짜 중요 */
    z-index: 90;
    pointer-events: none;
}

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

index css

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

h1 {
    opacity: 0;
}
#container::-webkit-scrollbar {
    display: none;
}
#container {
    display: flex;
    position: absolute;
    top: calc(50% - 45vh);
    left: 0;
    height: 90vh;
    width: 100vw; /* 전체 화면 너비 */
    overflow-x: auto; /* 가로 스크롤 허용 */
    overflow-y: hidden;
    padding-top: 10px; /* padding을 추가해서 스크롤 시 겹침 방지 */
    opacity: 1;
    transition: opacity 0.5s ease;
}

/*  #BACKROUND  */

div#backRound {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}
@keyframes dashRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dashRound {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    border: 1px dashed var(--sub-color);
    animation: dashRotate 360s linear infinite;
    opacity:0;
    pointer-events:none;
    transform: translate(0, 5px);
}
div#backRound > div:nth-child(1) {
    top: 6vw;
    left: -2vw;
}
div#backRound > div:nth-child(2) {
    top: 9vw;
    right: 7vw;
}
div#backRound > div:nth-child(3) {
    top: -10vw;
    right: -3vw;
}

/*  SECTION  */

section {
    flex: 0 0 100vw;
}
section #sectionTxt {
    display:flex;
    height:100%;
    justify-content:flex-end;
    flex-direction: column;;
}

div#sectionContainer {
}
div#sectionMAuto {
    margin: auto;
}
#sectionTxt {
    margin: 0 auto;
    padding: 0 6vw;
}
#sectionTxt p {
    line-height: 160%;
}
#sectionTxt div.text_wrap {
}
#sectionTxt div.text_wrap:nth-child(2) {
    margin-bottom:5vh;
}
#sectionTxt div p.title {
font-family: "organda-mn", sans-serif;
font-weight: 700;
font-style: normal;

    font-size: clamp(5rem, 10.5vw, 14rem);
    line-height: 1;
}
#sectionTxt div:nth-child(2) p.title{
    margin-top:0;
}
#sectionTxt div p.subTxt {
    font-size: 2vw;
    margin-top:5vh;
}
#sectionTxt div + p {
    font-size: 1.1vw;
    font-weight: 300;
    margin-top:8.5vh;
}
#section03 {
    position: absolute;
    bottom: 0;
    left: 0;
}

/*  #TXTCONTAINER  */

div#txtcontainer {
    position: relative;
    flex: 0 0 115vw;
    height: 100%;
}
div#txtcontainer .txt {
        opacity:0;
        transform:translateY(20px);
    padding-bottom: 10px;
    border-bottom: 3px dotted transparent;
    transition: border-bottom 0.3s ease-in-out, opacity 0.6s, transform 0.6s;
    position: absolute;
    width: 50%;
}
div#txtcontainer .txt.animate-text{
    opacity:1;
    transform:translateY(0);
}
div#txtcontainer p strong{

}

div#txtcontainer p {
    font-size: clamp(19px,2vw,2vw);
    font-weight: 200;
    line-height: 140%;
}
/* div#txtcontainer span {
  color: var(--sub-color);
  font-weight: 600;
} */
div#txtcontainer div:nth-child(1) {
    top: 8vh;
    left: -30vw;
}
div#txtcontainer div:nth-child(2) {
    bottom: 5vh;
    left: -12vw;
}
div#txtcontainer div:nth-child(3) {
    top: 32vh;
    left: 10vw;
}
div#txtcontainer div:nth-child(4) {
    top: 8vh;
    left:40vw;
}
div#txtcontainer div:nth-child(5) {
    bottom: 5vh;
    left: 60vw;
}

/*  #TXTCONTAINER - hover  */
div#txtcontainer .txt:hover {
    border-bottom: 3px dotted var(--sub-color);
}
/* div#txtcontainer .txt > p > span {
  transition: background-color 0.3s ease-out;
  transition: color 0.3s ease-out;
}
div#txtcontainer .txt:hover > p > span {
  background-color: var(--sub-color);
  color: var(--main-color);
} */

/*  #HISTORY  */
div#history {
    flex: 0 0 4300px;
    height: 100%;
    overflow: hidden;
}
#historyLineM {
    display: none;
}
#historyLine {
    position: relative;
}
.wavy-svg {
    position: absolute;
    /* 부모(#history) 안에서 절대 위치 */
    top: 35.5vh;
    left:0;
    width: 3024px;
    height: 170px; /* viewBox 높이와 맞춰줌 */
    z-index: -1;
}
#historyLine > svg.second {
    left: 3024px;
}
#historyContent > div:nth-child(3) .historyTxt .historyImg{
    top:-42vh;
}

/* 기존 keyframes는 그대로 둡니다 */
@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes fadeOut {
    to {
        opacity: 0;
    }
}
@keyframes dashFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 4.8;
    }
}
@keyframes MdashFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 50;
    }
}
@keyframes dashFadeIn {
    to {
        opacity: 1;
    }
}

/* 기본 상태에서는 애니메이션 없음 */
.wavy-svg.draw {
    /* 애니메이션 정의 없음 – 초기에는 단순히 보이는 상태 */
    opacity: 0;
}
.wavy-svg.dash {
}

/* animate 클래스가 붙었을 때 애니메이션이 시작됨 */
.animate .wavy-svg.draw path {
    stroke-dasharray: 3024;
    stroke-dashoffset: 3024;
    animation: drawLine 2.5s linear forwards, fadeOut 0.5s linear 3s forwards;
}
.animate .wavy-svg.dash path {
    animation: dashFlow 0.5s linear 3s infinite;
}

div#historyContent {
    position:relative;
    margin-top:10.4vh;
    text-align: center;
}
div#historyContent > div {
    display: flex;
    width: 300px;
    float: left;
    margin: 0 102px;
    cursor: pointer;
}
div#historyContent > div:nth-child(odd) {
    flex-direction: column;
    margin-top: 20.5vh;
}
div#historyContent > div:nth-child(even) {
    flex-direction: column-reverse;
    margin-top: 13.5vh;
}
div#historyContent > div:nth-child(odd) .historyImg {
    top: -38vh;
}
div#historyContent > div:nth-child(even) .historyImg{
    top: 30vh;
}

div#historyContent .historyDot_2{
    position:absolute !important;
    left:0; top:0;
    width: 22px; height: 22px;
    margin:0 !important;
    border-radius: 50%;
    background-image: var(--sub-gradient);
    background-size:cover;
    transition: all 0.3s ease-out;
    animation: lite 1.5s infinite  linear alternate;
    opacity:0;
    transform:translateY(10px);
    outline: 10px solid transparent;
    box-sizing: content-box; 
    cursor: pointer;
}
.historyDot_2:hover {
    transform:scale(1.2) !important;
}
div#historyContent .historyDot {
    position:relative;
    width: 22px; height: 22px;
    margin: 8vh auto;
    border-radius: 50%;
    background-image: var(--sub-gradient);
    transition: all 0.3s ease-out;
    animation: lite 1.5s infinite  linear alternate;
    transform:translate(-50%,0);
    opacity:0;
}




@keyframes lite {
    0% {
        box-shadow: 0 0 0px var(--sub-color);
    }
    100% {
        box-shadow: 0 0 8px var(--sub-color);
    }
}

div#historyContent .historyTxt {
    clear: both;
    position: relative;
}
.historyTxt h3 {
    font-weight: 600;
    font-size: 36px;
    background-image: var(--sub-gradient);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    padding-bottom: 1vh;
}
.historyTxt p {
    font-size: 16px;
    padding-top: 1vh;
    line-height: 160%;
}
.historyImg {
    position: absolute;
    transition: opacity 0.3s ease-in-out;
    top: 0;
    left: 0;
}



div#historyContent > div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}
div#historyContent > div.visible {
    opacity: 1;
    transform: translateY(0);
    position:relative;
}
.textmarker{
  position:relative;

}
.textmarker::after{
  content:"";
  position:absolute;
  width:0%;
  height:65%;
  left:0; bottom:-18%;
  transform:translate(-3%,0);
  background:rgba(124,218,203,1);
  z-index:-1;
  transition: width 0.3s ease-out;
}
div#txtcontainer p strong.textmarker.animate-strong:after{
    width:105%;
}
div#txtcontainer p strong.textmarker:nth-child(1):after{
    transition-delay: 500ms;
}
.historyTxt{
    font-family: 'SUITE', sans-serif;
    font-weight:600;
}
.historyTxt h3{
    font-weight:700;
}

#dotPreview {

    position: fixed;
    pointer-events: none;       /* 마우스 이벤트 무시 */
    display: block;              /* 기본 숨김 */
    z-index: 9999;
    opacity:0;
    transition: opacity 0.3s ease-in-out;
}
/* img는 원본 크기대로 보여줌(너비/높이를 지정하지 않음) */
#dotPreview img {
    display: block;
}
@media (max-width: 1300px) {
    #intro-canvas {
        top: 50%;
    }

    /*  SECTION  */




    /*  #TXTCONTAINER  */

    div#txtcontainer p {
    }
    div#txtcontainer .txt {
        border-bottom: 2px dotted transparent;
    }
    div#txtcontainer .txt:hover {
        border-bottom: 2px dotted var(--sub-color);
    }

    /*  HISTORY  */

    div#historyContent > div:nth-child(odd) {
        margin-top: 26vh;
    }
    div#historyContent > div:nth-child(even) {
        margin-top: 18vh;
    }
    div#historyContent .historyDot {
        height: 22px;
        width: 22px;
        border-radius: 50%;
        background-image: var(--sub-gradient);
        margin: 4vh auto;
        transition: all 0.3s ease-out;
    }
    div#historyContent > div:hover > .historyDot {
        height: 40px;
        width: 40px;
        box-shadow: 0 0 10px var(--sub-color);
        margin-top: calc(4vh - 9px);
        margin-bottom: calc(4vh - 9px);
    }
    div#historyContent .historyTxt {
        clear: both;
    }
    .historyTxt h3 {
        font-size: 32px;
    }
}

@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
        height:auto;
    }
    #intro-canvas {
        top: 0;
        left: 0;
        position: absolute;
    }

    h1 {
        opacity: 1;
    }

    /*   #CONTAINER  */

    #container {
        top:0;
        display: block;
        position:relative;
        height: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        margin-top: 90vh;
        opacity: 1;
    }

    /*  #BACKROUND  */

    .dashRound {
        position: absolute;
        width: 50vw;
        height: 50vw;
    }
    div#backRound > div:nth-child(1) {
        top: 8vw;
        left: -6vw;
    }
    div#backRound > div:nth-child(2) {
        top: 90vw;
        right: 10vw;
    }
    div#backRound > div:nth-child(3) {
        top: 90vw;
        right: -5vw;
    }

    /*   #SECTION  */

    #section {
        overflow: hidden;
    }
    #sectionTxt {
        margin: 10vh auto;
        max-width: 100%;
        padding: 0 3vw;
    }

    /*  #TXTCONTAINER  */

    div#txtcontainer {
        position: static;
        height: 100vh;
        width: 100%;
        padding: 0 5vw;
        overflow: hidden;
    }
    div#txtcontainer .txt {
        border-bottom: 2px dashed var(--sub-color);
        position: static;
        width: 53vw;
        margin-bottom: 8vw;
    }
    div#txtcontainer p {
    }
    div#txtcontainer span {
    }
    div#txtcontainer div:nth-child(odd) {
        float: left;
    }
    div#txtcontainer div:nth-child(even) {
        float: right;
        text-align: right;
    }

    /*  HISTORY  */

    div#history {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        padding-top: 20vw;
        padding-bottom:10vw;
    }
    #historyLine {
        display: none;
    }
    #historyLineM {
        display: block;
        position: relative;
    }

    .wavy-svg {
        position: absolute;
        /* 부모(#history) 안에서 절대 위치 */
        top: 0;
        left: 40vw;
        width: 20vw;
        height: 250vw; /* viewBox 높이와 맞춰줌 */
        z-index: -1;
    }

    #historyLineM > svg:nth-child(2) {
        top: 250vw;
    }

    div#historyContent {
        padding-left: 0;
    }
    div#historyContent > div {
        width: 50vw;
        float: none;
        display: flex;
        margin: 0;
    }
    div#historyContent > div:nth-child(odd) {
        flex-direction: row;
        margin-top: 23vw;
        margin-left: 41.5vw;
    }
    div#historyContent > div:nth-child(even) {
        flex-direction: row-reverse;
        margin-top: 23vw;
        margin-left: 8.5vw;
    }
    div#historyContent > div:nth-child(1) {
        margin-top: 10vw;
    }

    div#historyContent .historyDot {
        margin: 8vw 2vw;
        animation: lite 1.5s infinite linear;
    }
    div#historyContent > div:hover > .historyDot {
        height: 22px;
        width: 22px;
        border-radius: 50%;
        margin: 8vw 2vw;
    }

    @keyframes lite {
        0% {
            box-shadow: 0 0 0px var(--sub-color);
        }
        50% {
            box-shadow: 0 0 10px var(--sub-color);
        }
        100% {
            box-shadow: 0 0 0px var(--sub-color);
        }
    }
    div#historyContent > div:active > .historyDot {
        height: 32px;
        width: 32px;
        box-shadow: 0 0 10px var(--sub-color);
        margin-top: calc(8vw - 5px);
        margin-bottom: calc(8vw - 5px);
        margin-left: calc(2vw - 5px);
        margin-right: calc(2vw - 5px);
    }
    div#historyContent .historyTxt {
        clear: both;
        position: relative;
        width: 40vw;
    }

    .historyDot:hover ~ .historyTxt .historyImg {
        opacity: 1 !important;
    }
    .historyTxt h3 {
        font-size: 32px;
        padding-bottom: 1vw;
        font-weight: 700;
    }
    .historyTxt p {
        font-size: 16px;
        padding-top: 1vw;
    }
    .historyImg {
        position: absolute;
        transition: opacity 0.3s ease-in-out;
        top: 0 !important;
        left: 0;
        opacity: 1;
    }
    .historyImg img{
        width: auto;
        height: 20vw;
    }
    div#historyContent > div:nth-child(odd) .historyImg{
        left: -40vw;
    }
    div#historyContent > div:nth-child(even) .historyImg{
        left:50vw;
        
    }
    div#historyContent > div:last-child{
        margin-bottom: 10vw;
    }
    .historyDot:hover + .historyTxt .historyImg {
        opacity: 0;
    }
    div#historyContent > div:active + .historyTxt .historyImg {
        opacity: 1;
    }


    .animate .wavy-svg.draw path {
        animation: drawLine 4.5s linear forwards,
            fadeOut 0.5s linear 5s forwards;
    }
    .animate .wavy-svg.dash {
        animation: dashFadeIn 0.5s forwards 4.5s;
    }
    .animate .wavy-svg.dash path {
        animation: MdashFlow 2s linear 5.5s infinite;
    }

    #dotPreview {
        /* pointer-events 허용 & 전체 화면 */
        pointer-events: auto;
        top: 0; left: 0;
        width: 100vw;  height: 100vh;
        display: none; /* JS에서 block 또는 flex로 토글 */
        background: rgba(0,0,0,0.8);
        justify-content: center;
        align-items: center;
    }
    #dotPreview img {
        /* 화면에 꽉 차게, 종횡 비율 유지 */
        max-width: 70vw;
        max-height: 70vh;
    }
}

@media (max-width: 480px) {
    /* html,
    body {
        height: 1250vw;
    } */

    /*  #BACKROUND  */

    .dashRound {
        position: fixed;
        width: 60vw;
        height: 60vw;
    }
    div#backRound > div:nth-child(1) {
        top: 15vw;
    }
    div#backRound > div:nth-child(2) {
        top: 75vh;
        right: 10vw;
    }
    div#backRound > div:nth-child(3) {
        top: 75vh;
    }

    /*   #SECTION  */

    #section {
        overflow: hidden;
    }
    /* #sectionTxt div {
        padding-bottom: 12vw;
    }
    #sectionTxt div p:first-child {
        font-size: 32px;
    }
    #sectionTxt div p:last-child {
        font-size: 20px;
    }
    #sectionTxt div + p {
        font-size: 14px;
    } */

    /*  #TXTCONTAINER  */

    div#txtcontainer {
        padding: 0 5vw;
        height: auto;
    }
    div#txtcontainer .txt {
        width: 70vw;
        margin-bottom: 30vw;
        border-bottom: 1px dashed var(--sub-color);
    }
    /* div#txtcontainer p {
        font-size: 14px;
    } */

    /*  HISTORY  */

    div#history {
        padding-top: 30vw;
    }

    div#historyContent > div:nth-child(odd) {
        margin-top: 36vw;
        margin-left: 4vw;
    }
    div#historyContent > div:nth-child(even) {
        margin-top: 36vw;
        margin-left: 13.5vw;
        flex-direction: row;
    }
    div#historyContent > div:nth-child(1) {
        margin-top: 20vw;
    }

    .wavy-svg {
        left: 2vw;
        height: 400vw;
    }
    #historyLineM > svg:nth-child(2){
        top: 400vw;
    }

    div#historyContent > div {
        width: 80vw;
        justify-content: space-between;
    }
    div#historyContent .historyDot {
        margin: 13vw 1vw;
        height: 16px;
        width: 16px;
        align-items: center;
    }
    div#historyContent > div:hover > .historyDot {
        margin: 13vw 1vw;
        height: 16px;
        width: 16px;
    }
    div#historyContent .historyTxt {
        clear: both;
        position: relative;
        width: 70vw;
    }
    .historyTxt h3 {
        font-size: 24px;
    }
    .historyTxt p {
        font-weight: 300;
        font-size: 13px;
        margin: auto;
        line-height:1.2em;
    }
    .historyTxt p:nth-child(2){
        padding-top:0;
    }
    .historyImg {
        position: absolute;
        transition: opacity 0.3s ease-in-out;
        top: 0 !important;
        left: 0;
        opacity: 1;
        margin-top:-31vw;
    }
    div#historyContent > div:nth-child(odd) .historyImg{
        left: 50%;
        transform: translate(-50%, 0);
    }
    div#historyContent > div:nth-child(even) .historyImg{
        left:50%;
        transform: translate(-50%, 0);
        
    }
    .historyImg img{
        width:auto;
        height: 28vw;
    }
    div#historyContent > div:active + .historyTxt .historyImg {
        opacity: 1;
    }
    div#historyContent > div:last-child{
        margin-bottom:45vw;
    }
}

.loading_hide{
    opacity:0;
    pointer-events:none;
    transform:translate(0,100%);
}

.overflow_hide{
    overflow:hidden;
}
#sectionTxt p{
    transition: all 500ms ease-out;
}