/* menus */
*{
margin: 0;
}

body{
    width: 100%;
}
/* Auto layout */
.menu{
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: min(45px, 2.34vw);

position: absolute;
/* width: min(283px, 14.74vw); */
height: min(29px, 1.51vw);
left: 50%;
transform: translateX(-50%);
top: min(40px, 2.08vw);
z-index: 1000;
}
.menu-item a{
height: min(29px, 1.51vw);

font-family: 'NanumSquareRound', 'Nanum Square Round', sans-serif;
font-style: normal;
font-weight: 700;
font-size: clamp(10px, 0.94vw, 18px);
line-height: 160%;
text-align: center;
letter-spacing: -0.01em;
text-decoration: none;

color: #000000;
}

.intro-container {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    

    background-image: url(../images/bg/intro-bg.png);
    background-repeat: no-repeat;
    background-position: center; /* 이미지 위치를 아래 중앙으로 */
    background-size: 100% auto; /* 가로를 100%로 꽉 채우고, 세로는 비율대로 */

    padding-top : 5rem; /* 상하 패딩 */
    padding-bottom: 7vw;
}

/* /////////////////////////// */
/* 랜딩 */
.landing {
    position: relative;
    width: 100%;
    /* min-height: 100vh; */
    background: url('../images/landing-bg.png') no-repeat center center;
    background-color: #FBE3E5;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100%;

    /* 이미지 비율에 맞춰 높이 설정 */
    aspect-ratio: 16/9; /* 예시: 이미지가 16:9 비율인 경우 */
    min-width:100px
    
}

.landing-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(20px, 2.08vw);
    width: min(550px, 28.65vw);
    padding: min(20px, 1.04vw);
    margin-top: min(40px, 2.08vw);
}

.title {
    width: 22vw;
    height: auto;
    /* max-width: 28.65vw; */
}

.ex-days {
    font-family: 'NanumSquareRound';
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.2;
    text-align: center;
    color: #202D5B;
    white-space: nowrap;
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: min(10px, 0.63vw) max(1vw, 10px);
    background: #232E5E;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: min(177px, 9.22vw);
    height: min(52px, 2.5vw);
}

.btn:hover {
    background: #1a2347;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(35, 46, 94, 0.3);
}

.btn-text {
    font-family: 'NanumSquareRound', 'Nanum Square Round', sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 120%;
    text-align: center;
    color: #FFFFFF;
}

/* 모바일 대응 */
/* 태블릿 */
@media (max-width: 768px) {
    .landing {
        background-position: center center;
    }
    
    .landing-info {
        /* gap: 5.21vw; 40px / 768px * 100 */
        width: 80vw;
        margin-top: 1rem;
        background-size: 75%;

    }
    

    .ex-days {
        font-size: 2.6vw; /* 20px / 768px * 100 */
    }
    
    .btn {
        height: 5vw; /* 44px / 768px * 100 */
    }
    
    .btn-text {
        font-size: 2.34vw; /* 18px / 768px * 100 */
    }

}

/* 모바일 */
@media (max-width: 480px) {
    .landing {
        background-size: auto 100%;
        background-position: center center;
        align-items: flex-start;
        padding-top: 10.67vw; /* 80px / 480px * 100 */
    }
    
    .landing-info {
        gap: 3vw; /* 30px / 480px * 100 */
        width: 90vw;
        /* padding: 6.25vw 4.17vw; 30px 20px / 480px * 100 */
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3.33vw; /* 16px / 480px * 100 */
    }
    
    .ex-days {
        font-size: 3.33vw; /* 16px / 480px * 100 */
    }
    
    .btn {
        height: 4vw; /* 40px / 480px * 100 */
        padding: 2.6vw 4vw; /* 8px 32px / 480px * 100 */
    }
    
    .btn-text {
        font-size: 3.33vw; /* 16px / 480px * 100 */
    }
}

/* ////////////////////////////// */
/* intro */

.intro {
    width: 100%; /* 부모는 화면 전체를 차지하되 */
    display: flex;
    justify-content: center; /* 내부를 수평 중앙 정렬 */
    padding: 50px 0;
}

.intro-inner {
    max-width: 1920px;

    padding: 0 0 0 29.53vw ; /* 원하는 좌측 여백 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.intro-inner h2 {
    font-family: 'NanumSquareRound', 'Tmoney RoundWind', sans-serif;
    font-weight: 900;
    font-size: clamp(24px, 2.08vw, 40px);
    line-height: min(52px, 2.71vw);
    color: #232E5E;
    -webkit-text-stroke: 0.5px #232E5E;
    /* text-shadow: 0.5px 0.5px 0 #232E5E, -0.5px -0.5px 0 #232E5E, 0.5px -0.5px 0 #232E5E, -0.5px 0.5px 0 #232E5E; */
}

.intro-inner p {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 20px); /* 더 작은 범위로 조정 */
    line-height: 1.6; /* 고정값으로 변경 */
    letter-spacing: -0.02em;
    margin-bottom: 1em; /* 문단 간격 */
    max-width: 750px; /* 최대 너비 제한으로 가독성 향상 */
    color: #000000;
}


/* 태블릿 */


/* ////////////// */

.submission-status {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;  /* 세로로 가운데 정렬 */
            justify-content: center;  /* 가로로 가운데 정렬 */
            padding: 0px;
            gap: 74px;
            width: 100vw;
            height: auto;
            margin: 0 auto;
            padding: 30px 0;

            gap: 10px
            
        }

        .section {
            position: relative;
        }

        .baby-section {
            flex: none;
            order: 0;
            flex-grow: 0;
        }

        .adult-section {
            flex: none;
            order: 2;
            flex-grow: 0;
        }

        .section-title {
            top: 0px;
            font-family: 'NanumSquareRound', 'Tmoney RoundWind', sans-serif;
            font-style: normal;
            font-weight: 800;
            font-size: clamp(16px, 1.8vw, 22px);
            line-height: 150%;
            text-align: center;
            color: #232E5E;
            padding-bottom: 10px;
        }


        .numbers-container {
            /* position: absolute; */
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0px;
            top: 60.45px;
            gap: 76px
        }



        .number {
            font-family: 'Nanum Square Round', sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: clamp(20px, 2.2vw, 28px);
            line-height: 150%;
            text-align: center;
            letter-spacing: -0.02em;
            color: #3C3C3C;
            flex: none;
            flex-grow: 1; /* 자식 요소가 가로 공간을 채우도록 */
            text-align: center; /* 가운데 정렬 */

            
        }


        .baby-section {
            gap: 76px;
        }

        .adult-section{
            gap: 75px;
        }

        .category {
            font-family: 'NanumSquareRound', sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: clamp(14px, 1.6vw, 20px);
            line-height: 150%;
            text-align: center;
            letter-spacing: -0.02em;
            color: #797979;
            flex: none;
            flex-grow: 0;
        }



.intro-bg{
position: absolute;
width: 2445.28px;
height: 1855.34px;
left: -467px;
top: -262px;
/* background: url('images/-bg.svg'); */
z-index: -2; /* 배경 이미지가 다른 요소 뒤에 오도록 설정 */
}


.divider {
    width: 100px;
    height: 0px;
    border: 2px solid #E1E1E1;
    transform: rotate(90deg);
    flex: none;
    order: 1;
    flex-grow: 0;
    align-self: center;
}

/* 화면 크기가 768px 이하일 때 세로로 쌓이게 설정 */
@media (max-width: 1024px) {
    .submission-status {
        flex-direction: column;  /* 세로로 배치 */
        gap: 20px;  /* 세로 간격을 더 좁게 설정 */
        width: 100%;  /* 가로 폭을 100%로 설정 */
    }

    .divider {
        transform: rotate(0deg);
        width: 300px;
        border: 1px solid #E1E1E1;
    }
    


    .intro-bg{
        padding-left:0 ;
    }


}

@media (max-width: 768px) {
    .intro-inner{
        padding: 0vw 10vw;
        align-items: center !important;
        /* text-align: center !important; */
    }
    
    .intro-inner br {
        display: none;
    }
    .intro-inner br:before {
        content: " ";
    }
    .intro-inner p {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .submission-status {
        padding: 6vw 4vw;
    }
 
}

/* Lightbox Modal (작품 상세) */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    box-sizing: border-box;
    z-index: 9999;
    opacity: 0;
    animation: lb-fade-in 160ms ease forwards;
}

@keyframes lb-fade-in {
    to { opacity: 1; }
}

.lightbox {
    position: relative;
    width: min(96vw, 1400px);
    max-height: 95vh;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    display: grid;
    grid-template-columns: 1.8fr 1.2fr; /* 이미지 메인, 댓글 적당히 */
    gap: 0;
    transform: translateY(8px) scale(0.98);
    opacity: 0.98;
    animation: lb-pop-in 180ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes lb-pop-in {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.lightbox__media {
    position: relative;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__image {
    max-width: 95%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.lightbox__meta {
    padding: clamp(12px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 12px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}

.lightbox__pill {
    align-self: flex-start;
    background: #E6F8C2;
    color: #000;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, .9vw, 14px);
}

.lightbox__title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
}

.lightbox__medal {
    width: clamp(50px, 4vw, 80px);
    height: clamp(50px, 4vw, 80px);
    object-fit: contain;
    flex-shrink: 0;
}

.lightbox__info-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.8vw, 12px);
    text-align: center;
    width: 100%;
}

.lightbox__category {
    align-self: center;
    background: #E6F8C2;
    color: #000;
    border-radius: 999px;
    padding: 6px 16px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 18px);
    margin: 0;
}

.lightbox__title {
    font-family: 'Tmoney RoundWind', 'NanumSquareRound', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2vw, 28px);
    color: #232E5E;
    margin: 0;
}

.lightbox__subtitle {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(14px, 1.1vw, 18px);
    color: #5a5a5a;
    margin: 0;
}

/* 들여쓰기 클래스는 이제 사용하지 않음 */
.lightbox__subtitle--indent {
    padding-left: 0;
}

.lightbox__row {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(14px, 1vw, 16px);
    color: #3c3c3c;
}

.lightbox__label { color: #777; margin-right: 6px; }

.lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
    color: #232E5E;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s ease, transform 0.12s ease;
}

.lightbox__close:hover { background: rgba(0,0,0,0.08); }
.lightbox__close:active { transform: scale(0.96); }

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 72px;
    background: rgba(255,255,255,0.9);
    color: #555;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 400;
    transition: all 0.2s ease;
}

.lightbox__nav:hover { color: #333; background: #fff; }
.lightbox__nav:disabled { color: #ccc; background: rgba(255,255,255,0.6); cursor: not-allowed; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }

@media (min-width: 1025px) {
    .lightbox__nav--prev { left: 32px; }
    .lightbox__nav--next { right: 32px; }
}

.lightbox__fallback {
    color: #999;
    font-family: 'Pretendard', sans-serif;
    padding: 30px;
}

@media (max-width: 1024px) {
    .lightbox {
        width: min(98vw, 1100px);
        max-height: 94vh;
        grid-template-columns: 1fr;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lightbox__image { 
        max-height: 50vh;
        max-width: 80%;
    }
    
    .lightbox__meta {
        max-height: none; /* tablet에서는 제한 없음 */
        overflow-y: auto;
    }

    .lightbox__nav {
        width: 36px;
        height: 56px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .lightbox {
        width: 96vw;
        max-height: 85vh;
        border-radius: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    }
    .lightbox__meta { 
        padding: 14px; 
        gap: 10px;
        overflow-y: auto;
        max-height: calc(95vh - 200px); /* 이미지 영역을 고려한 높이 */
    }
    .lightbox__nav { display: none; }
    
    /* 댓글 섹션 모바일 최적화 */
    .lightbox .comment-section {
        margin-top: 15px;
    }
    
    .lightbox .comments-list {
        max-height: 250px; /* 모바일에서는 더 작게 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 댓글 시스템 스타일 */
.comment-section {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.comment-section h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.comment-form {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.comment-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.comment-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.comment-form-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.char-count {
    font-size: 12px;
    color: #666;
}

.char-count.warning {
    color: #ff6b6b;
}

.comment-submit {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.comment-submit:hover:not(:disabled) {
    background: #0056b3;
}

.comment-submit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.comments-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
}

.comment-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-content {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #333;
    word-wrap: break-word;
}

.comment-date {
    font-size: 12px;
    color: #999;
}

.no-comments {
    padding: 30px;
    text-align: center;
    color: #999;
    font-style: italic;
}

.comment-loading {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* 댓글 시스템 모바일 대응 */
@media (max-width: 768px) {
    .comment-section {
        margin-top: 20px;
        padding-top: 15px;
    }
    
    .comment-form {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .comment-form textarea {
        min-height: 70px;
        font-size: 16px; /* iOS 줌 방지 */
    }
    
    .comment-form-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .comment-submit {
        align-self: flex-end;
    }
    
    .comments-list {
        max-height: 300px;
    }
    
    .comment-item {
        padding: 12px;
    }

}