@charset "UTF-8";

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
        scroll-behavior: smooth; /* 링크 이동 시 부드럽게 스크롤되도록 설정 */
        }
        a{
            color: #000;
            text-decoration: none;
        }
        p{
            font-weight: normal;
            font-size: 13px;
        }
        ul{
            list-style: none;
        }

        body{
            background-color: #f2f2f2;
            font-family: "jjjgothic", sans-serif;

        }

        #wrap{
            width: 100%;
            font-weight: 200;
            padding: 15px;
            font-size: 14px;
        }

        /****** header ******/
        header{
            width: 100%;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-family: "ZCOOL KuaiLe", sans-serif;
        }
        h1{
            font-size: 14px;
        }

        li .title{
            font-size: 13px;
        }

        #gnb2{
            display: flex;
            gap: 14px;
            margin-bottom: 12px;
            cursor: pointer;
        }
        i{
            font-size: 12px;
        }

        /****** container ******/
        #container{
            width: 100%;
        }

        .filter-radio{
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        /* web 선택 시: 전부 숨기고 .web만 표시 */
        #filter-web:checked ~ #container .gallery li{
            display: none;
        }
        #filter-web:checked ~ #container .gallery li.web{
            display: block;
        }

        /* book 선택 시: 전부 숨기고 .book만 표시 */
        #filter-etc:checked ~ #container .gallery li{
            display: none;
        }
        #filter-etc:checked ~ #container .gallery li.etc{
            display: block;
        }

        /* 현재 선택된 필터 라벨 강조 */
        #filter-all:checked ~ #container label[for="filter-all"],
        #filter-web:checked ~ #container label[for="filter-web"],
        #filter-etc:checked ~ #container label[for="filter-etc"]{
            font-weight: bold;
            border-bottom: 1.5px dotted rgb(0, 0, 0);
        }
        .visual{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;

        }
        .video-bg{
            width: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        .gallery ul{
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .gallery li{
            width: 24.35%;            
        }

        .gallery li img{
            width: 100%;
        }
        .gallery li a{
            display: block;
            position: relative;     /* title을 이 기준으로 겹치게 함 */
            overflow: hidden;       /* 살짝 확대 효과 줄 때 삐져나옴 방지 */
        }
        .gallery li .title{
        position: absolute;
        left: 0;
        top: 0;
        padding: 5px;
        width: max-content;
        font-size: 13px;
        color: black;
        background-color: white;
        border: 1px dotted gray;
        opacity: 0;
        pointer-events: none;   /* 텍스트가 클릭을 가로채지 않게 */
    }

        .gallery li a:hover .title{
        opacity: 1;
        transform: translateY(0);
    }
        .modal {
            position: fixed;
            inset: 0;
            display: none;
            z-index: 9999;
        }
        .modal:target{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .modal-bg{
            position: absolute;
            inset: 0;
            backdrop-filter: blur(20px);
        }
        .modal-content{
            position: relative;
            border: 1px dotted gray;
            max-width: 70%;
            max-height: 70vh;
            display: flex;
            background-color: white;
            flex-wrap: nowrap;
            overflow: hidden;
            overflow-y: auto;
        }
        .modal-content img{
            max-height: 85vh;
            width: 600px;
            object-fit: contain;
            display: block;
            border-right: 1px dotted gray;
            background-color: #f2f2f2;
        }
        .modal-content .close{
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 10;
            color: gray;
            font-weight: bold;
            background-color: white;
            border: 1px dotted gray;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            text-align: center;
            padding: 2px 0 0 0;
        }


        .modal-title{
            flex-shrink: 0;
            width: 100px;
            margin-top: 15px;
            margin-left: 15px;
            margin-right: 15px;
            line-height: 1.72;
        }
        .modal-main{
            flex: 1 1 auto;
            min-width: 0;
            margin-top: 15px;
            margin-bottom: 15px;
            padding-right: 26px;
            line-height: 1.72;
            word-break: keep-all;
        }

        .link{
            display: inline-block;
            margin-top: 0px;
            color: #929292;
            font-weight: normal;
            text-decoration: underline dotted;
            text-underline-offset: 2px;
            padding: 0;
        }
        .link:hover{
            text-decoration: none;
        }

        .copyright small {
            display: inline-flex;
            align-items: center;
            gap: 4px; /* 기호와 연도 사이의 간격 (원하는 만큼 조절) */
        }

        .copyright small span {
            font-size: 1.4em; /* 원래 글자 크기보다 약 1.4배 키움 */
            line-height: 1;   /* 커진 기호 때문에 행간이 늘어나 정렬이 깨지는 것 방지 */
        }

/* --- 반응형 미디어쿼리 대응 --- */
@media (max-width: 1400px) {
    .modal-slider {
        width: 100%;
        height: 40vh; /* 이미지 영역 높이 확보 */
        border-right: none;
        border-bottom: 1px dotted gray;
    }
    .slides {
        min-height: auto;
        height: 100%;
    }
}

        /****** footer ******/
        footer{
            position: fixed;
            bottom: 10px;
            width: 100%;
            margin-top: 20px;
        }
        .sns{
            display: flex;
        }

@media (max-width: 1400px) {
    .gallery li {
        width: 32%;
        justify-content: space-between;
    }

    /* 모달 컨텐츠 수정 */
    .modal-content {
        flex-direction: row;    /* 세로(column)에서 다시 가로(row)로 변경 */
        max-width: 90%;
        max-height: 85vh;
        overflow-y: auto;       /* 세로 스크롤 허용 */
        align-items: stretch;   /* 이미지와 텍스트 영역 높이를 맞춤 */
    }

    .modal-content img {
        width: 50%;            /* 이미지 너비를 가로의 절반(50%)으로 설정 */
        max-height: none;      /* 기존에 설정했던 세로 높이 제한 해제 */
        object-fit: cover;     /* 비율이 깨지지 않게 꽉 채움 */
        border-right: 1px dotted gray; /* 오른쪽에 구분 점선 추가 */
        border-bottom: none;   /* 기존 밑줄 제거 */
    }

    /* 텍스트 영역을 감싸는 부모 layout이 있다고 가정하거나, 
       title과 main이 직접 들어있다면 아래처럼 조절합니다. */
    
    /* 팁: 만약 title과 main을 하나의 div로 감싸고 있다면 
       그 감싸는 div에 width: 50%를 주시는 것이 가장 깔끔합니다. */

    .modal-title {
        width: 50%;            /* 텍스트 영역도 가로의 나머지 절반 차지 */
        flex-shrink: 1;
        font-weight: bold;
        margin: 15px; 
    }

    .modal-main {
        margin: 15px;
        padding-right: 0;           
    }
}

@media (max-width: 950px) {
    body{
        font-size: 12px;
    }
    .gallery li {
        width: 100%;
    }

    .modal-content {
        flex-direction: column;
        max-height: 90vh;       
    }

    .modal-content img {
        width: 100%;
        max-height: 45vh;
        object-fit: contain;
        object-position: center;
        border-right: none;
        border-bottom: 1px dotted gray;
    }

    .modal-title, .modal-main {
        width: auto;
        margin: 17px 18px 5px 17px;
    }
    
    .modal-main {
        margin: 5px 18px 15px 17px;
    }

    .modal-content .close{
            padding: 1px 0 0 0.4px;
        }
}