@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
@import url('https://cdn.jsdelivr.net/gh/spoqa/spoqa-han-sans@latest/css/SpoqaHanSansNeo.css');

/* ===== Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --line-color: #00FFFF;
}

html {
    font-size: clamp(15.2px, 0.95vw, 17.1px);
    background-color: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 스크롤 끝에서의 고무줄(바운스) 효과 제거 */
    overscroll-behavior: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body {
    font-family: 'Jost', 'Spoqa Han Sans Neo', sans-serif;
    font-weight: 400;
    word-break: keep-all;
    min-height: 100vh;
    background-color: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ===== Content Box & 좌우 외곽 세로선 ===== */
.content-box {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: relative;
}

.content-box::before,
.content-box::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 150;
}

.content-box::before {
    left: 20px;
}

.content-box::after {
    right: 20px;
}

/* ===== Navigation Bar ===== */
.nav-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 4fr;
    align-items: stretch;
    height: 32px;
    flex-shrink: 0;
    margin: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

.nav-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 5;
}

.nav-cell {
    display: flex;
    align-items: center;
    padding: 0 0.778rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #000;
    background-color: #fff;
    border-right: 1px solid var(--line-color);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.nav-cell-text {
    display: inline;
}

.nav-cell:hover .nav-cell-text {
    display: none;
}

.nav-cell:hover::before {
    content: attr(data-ko);
    display: inline;
}

.nav-cell.active,
.nav-cell:hover {
    background-color: var(--line-color);
    color: #000000;
}

/* Marquee */
.nav-marquee {
    overflow: hidden;
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 0.778rem;
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee 10s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-right: 3rem;
}

.marquee-content span {
    font-size: 1rem;
    color: #000;
    white-space: nowrap;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Sort 버튼 (ARCHIVE) */
.nav-sort {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 0.778rem;
    min-width: 0;
}

/* 래퍼를 레이아웃에서 제외해 5개 버튼이 모두 동일한 gap을 갖도록 함 */
.nav-sort-left {
    display: contents;
}

.sort-label {
    font-size: 1rem;
    color: #000;
    font-weight: 400;
}

.sort-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1rem;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.sort-btn:hover,
.sort-btn.active {
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== Content Grid (공통 골격) ===== */
.content-grid {
    display: grid;
    flex: 1 1 0;
    min-height: calc(114vh - 32px);
    margin: 0 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: calc(50vh - 16px) minmax(0, 1fr) auto;
    position: relative;
    z-index: 1;
}

/* 중앙 가로선 (뷰포트 50% 지점, 전체 가로선) */
.content-grid::after {
    content: '';
    position: absolute;
    top: calc(50vh - 16px);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 5;
}

/* ABOUT / IDENTITY: 중앙 가로선을 50% 세로선까지만 그리고 오른쪽으로 넘기지 않음 */
.page-about .content-grid::after,
.page-identity .content-grid::after {
    right: 50%;
}

/* 세 번째 가로선 (로고 행 시작) */
.content-grid::before {
    content: '';
    position: absolute;
    top: calc(100vh - 32px);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 5;
}

/* Cell 기본 */
.cell {
    padding: 0.778rem 0.778rem 24px;
    border-right: 1px solid var(--line-color);
    min-width: 0;
    overflow: hidden;
}

.cell h2 {
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    text-underline-offset: 4px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.cell h2:not(:first-child) {
    margin-top: 28px;
}

.cell p {
    font-size: 1rem;
    line-height: 1.6;
    color: #111;
    margin-bottom: 20px;
}

.cell p:last-child {
    margin-bottom: 0;
}

/* 3열(빈칸) 오른쪽 선 제거 */
.cell:nth-child(3n) {
    border-right: none;
}

/* ===== ABOUT / COMMISSION: 스크롤 없이 뷰포트에 맞춤 ===== */
.grid-fixed {
    min-height: 0;
    height: calc(100vh - 32px);
    grid-template-rows: calc(50vh - 16px) minmax(0, 1fr);
}

.grid-fixed::before {
    display: none;
}

body.page-fixed .content-box {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

/* ===== ABOUT 배경 떠다니는 심볼 ===== */
#floating-symbol {
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
    will-change: transform;
    background-color: var(--line-color);
    -webkit-mask: url('../assets/symbol.svg') no-repeat center / contain;
    mask: url('../assets/symbol.svg') no-repeat center / contain;
}

/* ===== ABOUT 우측 절반: 심볼 물리 놀이터 ===== */
.cell-playground {
    grid-column: 3;
    grid-row: 1 / 3;
    position: relative;
    overflow: hidden;
    padding: 0;
    border-right: none;
}

.playground-canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* 드래그 중 브라우저 기본 제스처(스크롤·당겨서 새로고침) 차단 */
    touch-action: none;
}

/* ===== ARCHIVE (Split Layout: 50% Fixed Left + 50% Scroll Right) ===== */
.page-archive .content-box {
    min-height: 100vh;
    height: auto;
    overflow: visible;
    position: relative;
}

/* 좌측 50% 고정 패널 */
.archive-left {
    position: fixed;
    top: 32px;
    left: 20px;
    width: calc(50% - 20px);
    height: calc(100vh - 32px);
    z-index: 10;
    background-color: #fff;
    border-right: 1px solid var(--line-color);
    /* 50% 중앙 세로선 */
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
}

/* 50% 높이 가로선: 좌측 0부터 50% 세로선까지 연결 (마진 밖으로 나가지 않음) */
.archive-left::before {
    content: '';
    position: absolute;
    top: calc(50vh - 16px);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 15;
}

/* 1~2사분면, 3~4사분면 컨테이너 (좌측 전체 높이) */
.year-panel-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    overscroll-behavior: none;
}

/* 연도별 콘텐츠 패널: 2열 x 2행 (각 사분면 완벽히 50% x 50% 동일 크기) */
.year-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(50vh - 16px) calc(50vh - 16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: #fff;
    overscroll-behavior: none;
}

.year-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 2사분면 (좌상): 포스터 이미지 (스크롤) */
.year-panel .cell-q2 {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--line-color);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.year-panel .cell-q2::-webkit-scrollbar {
    display: none;
}

.page-archive .poster-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-bottom: 1px solid var(--line-color);
    box-sizing: border-box;
}

.page-archive .poster-img:last-child {
    border-bottom: none;
}

/* ===== 포스터 확대 보기 (배경 블러 + 라이트박스) ===== */
#poster-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    /* 어둡게 덮지 않고, 페이지와 동일한 흰 톤을 유지한 채 뒤쪽만 흐리게 */
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    cursor: zoom-out;
}

#poster-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

#poster-lightbox img {
    max-width: min(90vw, 900px);
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid var(--line-color);
    transform: scale(0.97);
    transition: transform 0.25s ease;
}

#poster-lightbox.is-active img {
    transform: scale(1);
}

/* 라이트박스가 열려 있는 동안 뒤쪽 페이지 스크롤 잠금 */
html.lightbox-open,
html.lightbox-open body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    #poster-lightbox,
    #poster-lightbox img {
        transition: none;
    }

    #poster-lightbox img {
        transform: none;
    }
}

/* 1사분면 (우상): 전시 서문 (스크롤) */
.year-panel .cell-q3 {
    grid-column: 2;
    grid-row: 1;
    border-right: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.year-panel .cell-q3::-webkit-scrollbar {
    display: none;
}

/* 3사분면 (좌하): 전시 정보 (ABOUT 셀과 동일하게 스크롤) */
.year-panel .cell-q1 {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--line-color);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.year-panel .cell-q1::-webkit-scrollbar {
    display: none;
}

/* 4사분면 (우하): 졸업준비위원회 (스크롤) */
.year-panel .cell-q4 {
    grid-column: 2;
    grid-row: 2;
    border-right: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.year-panel .cell-q4::-webkit-scrollbar {
    display: none;
}

/* GPC 명단 (4사분면) */
.gpc-list {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.gpc-row {
    display: flex;
    align-items: baseline;
    line-height: 1.6;
}

.gpc-role {
    flex-shrink: 0;
    width: 7rem;
    color: #111;
}

.gpc-name {
    color: #111;
}

/* ===== 우측 50% 스크롤 영역 ===== */
.archive-right {
    margin-left: 50%;
    width: calc(50% - 20px);
    padding-right: 0;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.year-section {
    padding-bottom: 0;
}

.year-header {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.778rem;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    color: #000000;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid var(--line-color);
    box-sizing: border-box;
}

.index-row {
    display: grid;
    grid-template-columns: 2.5rem 10rem 1fr 10rem;
    align-items: center;
    column-gap: 1rem;
    height: 28px;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.778rem;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid var(--line-color);
    box-sizing: border-box;
}

.index-row:hover {
    background-color: var(--line-color);
    color: #000000;
}

.idx-num {
    text-align: left;
}

.idx-name,
.idx-work,
.idx-cat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* overflow: hidden 상태에서 line-height:1 이면 g·y 등 디센더가 잘리므로 여유를 줌 */
    line-height: 1.4;
}

/* ARCHIVE 호버 썸네일 미리보기 (커서 추적) */
#hover-preview-thumb {
    position: fixed;
    top: 0;
    left: 0;
    width: 140px;
    height: auto;
    max-height: 190px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translate(15px, 15px);
    transition: opacity 0.15s ease, visibility 0.15s ease;
    border: 1px solid var(--line-color);
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#hover-preview-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#hover-preview-thumb.is-active {
    opacity: 1;
    visibility: visible;
}

/* ARCHIVE 푸터 로고 */
.savcd-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.footer-logo {
    height: 48px;
    width: auto;
    display: block;
    margin-top: 8px;
}

/* ===== DETAIL PAGE ===== */
.page-detail .content-box {
    display: block;
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.detail-sub-nav {
    display: grid;
    /* 좌: 전시명 / 우: 작가·작품명. 우측 셀이 정확히 화면 50% 지점에서 시작 */
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    height: 32px;
    flex-shrink: 0;
    margin: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

.detail-sub-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--line-color);
    pointer-events: none;
    z-index: 5;
}

.sub-nav-left {
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--line-color);
    min-width: 0;
    overflow: hidden;
}

.sub-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    flex-shrink: 0;
    border-right: 1px solid var(--line-color);
    color: #000;
}

.sub-nav-back:hover {
    background-color: var(--line-color);
    color: #000000;
}

.sub-nav-title,
.sub-nav-right {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 0.778rem;
    font-size: 1rem;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-main-flow {
    margin: 0 20px;
    display: block;
}

.detail-viewer {
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--line-color);
    background-color: #fff;
    overflow: hidden;
    user-select: none;
}

.viewer-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.viewer-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 10;
}

.viewer-prev {
    left: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M22 16H8M8 16L14 10M8 16L14 22' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize;
}

.viewer-next {
    right: 0;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 16H24M24 16L18 10M24 16L18 22' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize;
}

.detail-bottom-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line-color);
}

.detail-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 0.778rem;
    border-right: 1px solid var(--line-color);
}

.meta-item {
    display: flex;
    align-items: baseline;
    font-size: 1rem;
    line-height: 1.6;
}

.meta-item .meta-label {
    width: 8rem;
    flex-shrink: 0;
    color: #666;
}

.meta-item .meta-val {
    color: #111;
}

.detail-description-block {
    padding: 1.5rem 0.778rem;
}

.detail-description-block h2 {
    font-size: 1rem;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.detail-desc-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #111;
    margin-bottom: 1rem;
}

/* ===== IDENTITY PAGE ===== */
.identity-header {
    margin-bottom: 2rem;
}

.identity-header h2 {
    margin-bottom: 0;
    line-height: 1.6;
}

/* ===== IDENTITY 가이드라인 지면 (우측 셀 내부 스크롤) ===== */
/* 이미지가 셀 전체를 가장자리까지 채우도록 패딩을 없앤다 */
.cell-id-guidelines {
    padding: 0;
}

/* 헤더는 높이를 차지하지 않고 이미지 위에 떠 있게 한다.
   height:0 인 sticky 박스를 상단에 붙이고 자식만 넘쳐 보이게 하면,
   배경 없이도 제목과 Download 가 계속 같은 자리에 남는다. */
.cell-id-guidelines .identity-header {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: transparent;
    border-bottom: none;
    pointer-events: none;
}

.cell-id-guidelines .identity-header h2 {
    margin: 0;
    padding: 0.778rem 0.778rem 0;
}

.cell-id-guidelines .identity-download-link {
    margin-left: 0.778rem;
    /* 헤더 자체는 클릭을 통과시키고 링크만 누를 수 있게 */
    pointer-events: auto;
}

.identity-guide-pages {
    display: flex;
    flex-direction: column;
}

.identity-guide-page {
    display: block;
    width: 100%;
    height: auto;
}

.identity-download-link {
    display: inline-block;
    color: #000000;
    font-size: 1rem;
    line-height: 1.6;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.identity-download-link:hover {
    opacity: 0.75;
}

/* 심볼 하나만 셀 정중앙에 놓는다.
   헤더가 위쪽 공간을 차지해도 영향을 받지 않도록 절대 배치로 중앙에 고정한다. */
.identity-symbol-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    max-width: 80%;
    height: auto;
    display: block;
}

/* ===== IDENTITY 페이지 스크롤 및 그리드 설정 ===== */
/* ARCHIVE 사분면과 동일: 페이지는 뷰포트에 고정, 넘치는 콘텐츠는 셀 내부에서 스크롤 */
.page-identity {
    overflow: hidden;
}

.page-identity .content-box {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.page-identity .content-grid {
    min-height: 0;
    height: calc(100vh - 32px);
    flex: none;
    grid-template-rows: calc(50vh - 16px) minmax(0, 1fr);
}

/* 셀 내부 독립 세로 스크롤 (스크롤바는 ARCHIVE와 동일하게 숨김) */
.page-identity .cell {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: none;
}

.page-identity .cell::-webkit-scrollbar {
    display: none;
}

/* IDENTITY 탭 상단 1행: 좌측 심볼/락업 영역이 0%~50% 전체 폭 차지 */
.page-identity .cell-id-symbols {
    grid-column: 1 / 3;
    grid-row: 1;
    border-right: 1px solid var(--line-color);
    position: relative;
}

.page-identity .cell-id-guidelines {
    grid-column: 3;
    /* 1~2행 전체를 차지해 화면 세로 100% 를 이미지로 채운다 */
    grid-row: 1 / 3;
    border-right: none;
}

/* IDENTITY 탭 하단 2행: 1열(국문 0%~25%) 및 2열(영문 25%~50%) */
.page-identity .cell-id-bottom-korean {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--line-color);
    position: relative;
}

.page-identity .cell-id-bottom-korean::after {
    display: none;
}

.page-identity .cell-id-bottom-english {
    grid-column: 2;
    grid-row: 2;
    border-right: 1px solid var(--line-color);
}

/* 표기 규정 (Naming Convention) 스타일 */
.naming-convention-block {
    display: flex;
    flex-direction: column;
}

.naming-group {
    margin-bottom: 1.5rem;
}

.naming-tag {
    display: block;
    font-size: 1rem;
    color: #000000;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.naming-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #111;
    margin-bottom: 0;
}

.naming-strike-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.naming-strike-list p {
    font-size: 1rem;
    line-height: 1.6;
    color: #111;
    margin-bottom: 0.15rem;
}

.naming-strike-list del {
    text-decoration: line-through;
    color: #111;
}

/* ===== COMMISSION 페이지 스타일 ===== */
.page-commission .content-grid::after,
.page-commission .content-grid::before {
    display: none;
}

.page-commission .cell-commission-left {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    border-right: 1px solid var(--line-color);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0.778rem;
}

/* ============================================================
   모바일 (ARCHIVE 전용) — 768px 미만
   좌우 50:50 분할을 세로 한 줄로 펼친다.
   ============================================================ */
@media (max-width: 767px) {

    /* --- 네비게이션: 탭 4개 한 줄 + 정렬 바 아랫줄 --- */
    .page-archive .nav-bar {
        grid-template-columns: repeat(4, 1fr);
        height: 32px;
    }

    .page-archive .nav-cell {
        height: 32px;
        padding: 0 0.4rem;
        font-size: 0.75rem;
        letter-spacing: 0;
        justify-content: flex-start;
    }

    /* 정렬 바는 JS 가 인덱스 맨 위로 옮긴다(조작 대상 바로 옆).
       좁으면 좌우로 밀어서 본다. */
    .page-archive .nav-sort {
        height: 34px;
        justify-content: flex-start;
        gap: 1.2rem;
        padding: 0 0.6rem;
        border-bottom: 1px solid var(--line-color);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .page-archive .nav-sort::-webkit-scrollbar {
        display: none;
    }

    .page-archive .sort-btn {
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* --- 좌우 마진 절반(20px -> 10px). 외곽 세로선 위치도 함께 옮긴다 --- */
    .page-archive .content-box::before {
        left: 10px;
    }

    .page-archive .content-box::after {
        right: 10px;
    }

    .page-archive .nav-bar {
        margin: 0 10px;
    }

    /* --- 좌측 고정 패널 -> 문서 흐름 상단 블록 --- */
    .archive-left {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0 10px;
        border-right: none;
        border-bottom: 1px solid var(--line-color);
    }

    /* 50% 중앙 가로선은 세로 배치에서 의미가 없다 */
    .archive-left::before {
        display: none;
    }

    .year-panel-wrap {
        height: auto;
        flex: none;
    }

    /* 4사분면 -> 한 줄로 쌓기 (포스터 → 서문 → 전시정보 → GPC) */
    .year-panel {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .year-panel.active {
        display: block;
    }

    /* 셀 내부 스크롤을 없애고 내용만큼 늘어나게 한다 */
    .year-panel .cell-q2,
    .year-panel .cell-q3,
    .year-panel .cell-q1,
    .year-panel .cell-q4 {
        grid-column: auto;
        grid-row: auto;
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--line-color);
    }

    .year-panel .cell-q4 {
        border-bottom: none;
    }

    /* 포스터는 폭에 맞추면 한 장만 900px 가까이 되어 목록까지 한참 내려가야 한다.
       높이를 고정한 가로 띠로 바꿔 옆으로 넘겨 보게 한다. */
    .year-panel .cell-q2 {
        display: flex;
        height: 40vh;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .page-archive .poster-img {
        width: auto;
        height: 100%;
        max-width: none;
        flex: 0 0 auto;
        object-fit: contain;
        border-bottom: none;
        border-right: 1px solid var(--line-color);
    }

    .page-archive .poster-img:last-child {
        border-right: none;
    }

    /* --- 우측 인덱스 -> 전체 폭 --- */
    .archive-right {
        margin: 0 10px;
        width: auto;
        min-height: 0;
    }

    /* 스크롤 중 현재 연도를 놓치지 않도록 헤더를 네비 아래에 고정 */
    .year-header {
        position: sticky;
        top: 32px;
        z-index: 50;
        height: 34px;
        font-size: 1.05rem;
    }

    /* Category 는 폭이 부족해 숨기고 No./이름/작품명만 표시 */
    .index-row {
        grid-template-columns: 2.2rem 6.5rem 1fr;
        column-gap: 0.7rem;
        height: 40px;
        font-size: 1rem;
    }

    .idx-cat {
        display: none;
    }

    /* 커서 추적 썸네일은 터치 환경에서 불필요 */
    #hover-preview-thumb {
        display: none;
    }
}
/* Sanity 편집 글의 줄바꿈과 상세 설명 */
.cms-text, #detail-description { white-space: pre-wrap; overflow-wrap: anywhere; }
#detail-description, #detail-status, #detail-caption { margin: 16px 24px; line-height: 1.7; }
.cms-empty { padding: 24px; line-height: 1.6; }
.viewer-nav[hidden], .viewer-img[hidden] { display: none; }