@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.content_area {
    width: 100%;
    height: auto;
}

.container {
    width: 100%;
    position: relative;
}

.box {
    border: 6px solid #afafaf;
    cursor: pointer;
    position: relative;
    opacity: 0;
    animation: box 0.2s linear 3s;
    animation-fill-mode: forwards;
    /* transition: opacity 0.2s linear; */
}

@keyframes box {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.introduce h2 {
    font-family: 'OneStoreMobilePop', sans-serif;
    color: #81A9CC;
}

@media (min-width:1025px) {
    .container {        
        height: 88vh;
    }

    .profile_img {
        display: block;
        width: clamp(30rem,35vw,40rem);
        aspect-ratio: 1 / 1;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .profile_img img {
        width: 100%;
        object-fit: cover;
    }

    .point_group {
        width: 0;
        height: 0;
        z-index: 10;
    }

    .box {
        width: 4rem;
        height: 4rem;
    }

    .line_svg {
        width: 4rem;
        height: 4rem;
        position: absolute;
        /* 박스의 정중앙을 SVG 도화지의 시작점으로 맞춤 */
        top: 0%; 
        left: 0%;
        overflow: visible; /* 선이 밖으로 나가도 보이게 */
        pointer-events: none;
    }

    .draw_path {
        fill: none;
        stroke: #afafaf;
        stroke-width: 4;
        /* 선 길이를 넉넉히 지정 (나중에 JS로 정확히 계산 가능) */
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
        transition: stroke-dashoffset 0.8s ease;
    }

    .point_group.active .draw_path {
       stroke-dashoffset: 0 !important; /* 밀려있던 선을 0으로 당겨서 보여줌 */
    }

    .data_group {
        position: absolute;
        top: 8rem;
        left: 65rem;
    }

    .my_data {
        position: absolute;
        top: 2.5rem;
        left: -40rem;
    }

    .license_group {
        position: absolute;
        top: 24rem;
        right: 47rem;
    }

    .my_license {
        position: absolute;
        top: 8rem;
        right: -25rem;
    }

    .hobby_group {
        position: absolute;
        top: 18rem;
        right: 50rem;
    }

    .my_hobby {
        position: absolute;
        top: -11rem;
        right: -37rem;
    }

    .tmi_group {
        position: absolute;
        top: 35rem;
        left: 50rem;
    }

    .my_tmi {
        position: absolute;
        top: -10rem;
        left: -32rem;
    }

    .introduce {
        font-size: clamp(0.8rem ,0.9vw, 1.2rem);
        font-weight: 600;
        padding: 2rem;
        line-height: 150%;
        color: #3C668F;
        border: 4px solid #afafaf;
        transform: translateY(10%);
        opacity: 0;

        background: #ffe9b2;
        border-radius: 2rem;
    }

    .introduce h2 {
        font-size: 1.2vw;
        color: #2D3D57;
        letter-spacing: 20%;
        line-height: 200%;
    }

    .point_group.active .introduce {
        animation: upper 1s ease-in;
        animation-fill-mode: forwards;
    }

    @keyframes upper {
        0%{
            transform: translateY(10%);
            opacity: 0;
        }
        100%{
            transform: translateY(0%);
            opacity: 1;
        }
    }
}

@media (max-width:1024px) {
    .container {        
        height: 88vh;
    }

    .profile_img {
        display: block;
        width: clamp(30rem,60vw,40rem);
        aspect-ratio: 1 / 1;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .profile_img img {
        width: 100%;
        object-fit: cover;
    }

    .point_group {
        width: 0;
        height: 0;
        z-index: 10;
    }

    .box {
        width: 4rem;
        height: 4rem;
    }

    .line_svg {
        display: none;
    }

    .data_group {
        position: absolute;
        top: 20rem;
        left: 38rem;
    }

    .license_group {
        position: absolute;
        top: 37rem;
        right: 20rem;
    }

    .hobby_group {
        position: absolute;
        top: 30rem;
        right: 24rem;
    }

    .tmi_group {
        position: absolute;
        top: 48rem;
        left: 22rem;
    }

    .introduce {
        width: 100%;
        height: 40%;
        padding: 5rem;
        position: fixed;
        bottom: 0%;
        left: 0%;
        transform: translate(0%, 100%);
        background: #ffe9b2 url(./img/etc/logo_white.png) no-repeat bottom 50px right 50px / 25%;
        border-radius: 5rem 5rem 0 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s linear;

        font-size: 2.6vw;
        font-weight: 800;        
        line-height: 200%;
        color: #3C668F;
    }

    .introduce h2 {
        font-size: 5vw;
        color: #2D3D57;
        line-height: 200%;
        letter-spacing: 15%;
    }

    .my_tmi img {
        position: absolute;
        bottom: 10px;
        right: 0px;
        width: 20rem;
        aspect-ratio: 1/1;
    }

    
    .container.modal_open .box {
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s linear;
    }

    .point_group.active .introduce{
       transform: translate(0%, 0%);
       opacity: 1;
       visibility: visible;
       z-index: 999;
    }
}

@media (max-width:768px) {
    .container {        
        height: 90vh;
        background: linear-gradient(0deg, rgba(255, 219, 131, 1) 0%, rgba(129, 169, 238, 1) 10%,rgba(255, 255, 255, 1)  50%);
    }

    .profile_img {
        display: block;
        width: 75vw;
        aspect-ratio: 1 / 1;
        z-index: 1;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .profile_img img {
        width: 100%;
        object-fit: cover;
    }

    .point_group {
        width: 0;
        height: 0;
        z-index: 10;
    }

    .box {
        width: 2.5rem;
        height: 2.5rem;
    }

    .line_svg {
        display: none;
    }

    .data_group {
        position: absolute;
        top: 6rem;
        left: 16rem;
    }

    .license_group {
        position: absolute;
        top: 14rem;
        left: 19rem;
    }

    .hobby_group {
        position: absolute;
        top: 11rem;
        left: 17rem;
    }

    .tmi_group {
        position: absolute;
        top: 19rem;
        left: 9rem;
    }

    .introduce {
        width: 100%;
        height: 35%;
        padding: 2.5rem;
        position: fixed;
        bottom: 0%;
        left: 0%;
        transform: translate(0%, 100%);
        background: #ffe9b2 url(./img/etc/logo_white.png) no-repeat bottom 20px right 20px / 25%;
        border-radius: 3rem 3rem 0 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s linear;

        font-size: 3.2vw;
        font-weight: 800;        
        line-height: 200%;
        color: #3C668F;
    }

    .introduce h2 {
        font-size: 8vw;
        color: #2D3D57;
        line-height: 200%;
        letter-spacing: 15%;
    }

    .my_tmi img {
        position: absolute;
        bottom: 10px;
        right: 0px;
        width: 8rem;
        aspect-ratio: 1/1;
    }
    
    .container.modal_open .box {
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s linear;
    }

    .point_group.active .introduce{
       transform: translate(0%, 0%);
       opacity: 1;
       visibility: visible;
       z-index: 999;
    }
}