/* =========================================
   1. 기본 초기화
========================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
}


/* =========================================
   2. 화면 전체
========================================= */

body {
    overflow-x: auto;
    overflow-y: hidden;

    background: #000;
}


/* =========================================
   3. 미술관 전체
========================================= */

.gallery {
    position: relative;

    width: max-content;
    height: 100vh;
}


/* =========================================
   4. 미술관 배경 줄
========================================= */

.rooms {
    display: flex;

    width: max-content;
    height: 100vh;

    position: relative;

    z-index: 1;
}


/* =========================================
   5. 미술관 배경 한 구역
========================================= */

.gallery-room {
    width: 1600px;
    height: 100vh;

    flex-shrink: 0;

    background-image:
        url("images/gallery-bg.png");

    background-repeat: no-repeat;

    background-position:
        center bottom;

    background-size:
        auto 100%;
}


/* =========================================
   6. 배경 사이 검은 기둥
========================================= */


.pillar {
    width: 250px;
    height: 100vh;

    flex-shrink: 0;

    background-image: url("images/pillar.png");

    background-repeat: no-repeat;

    background-position: center bottom;

    background-size: auto 100%;
}


/* =========================================
   7. 액자 전체 줄
========================================= */

.artworks {
    position: absolute;

    left: 0;
    top: 0;

    height: 100vh;

    display: flex;

    align-items: center;

    gap: 300px;

    padding-left: 400px;
    padding-right: 800px;

    z-index: 10;

    pointer-events: none;
}


/* =========================================
   8. 개별 액자
========================================= */

.frame {
    width: 220px;

    flex-shrink: 0;

    display: block;

    position: relative;

    text-align: center;

    text-decoration: none;

    color: #111;

    pointer-events: auto;

    transition:
        transform 0.2s ease;
}


/* =========================================
   9. 액자 그림
========================================= */

.frame img {
    display: block;

    width: 220px;
    height: 280px;

    object-fit: cover;

    background: white;

    border:
        14px solid #111;

    box-shadow:
        0 8px 14px
        rgba(0, 0, 0, 0.4);
}


/* =========================================
   10. 작품 설명표
========================================= */

.frame-title {
    display: inline-block;

    margin-top: 12px;

    padding:
        5px 10px;

    background:
        #eeeeee;

    border:
        1px solid #222;

    font-size:
        12px;
}


/* =========================================
   11. 마우스를 올렸을 때
========================================= */

.frame:hover {
    transform:
        scale(1.05);
}


/* =========================================
   12. 최신 게시글
========================================= */

/*
latest는 디자인용이 아닙니다.

사이트에 처음 들어왔을 때
어느 액자를 중앙에 보여줄지
JavaScript에게 알려주는 표시입니다.
*/

.frame.latest {
}