/* Exhibition page styles */
/* Breakpoints: 768, 1024, 1280 (global.css) */

/* Exhibition 페이지: body 좌우 갭 제거해 콘텐츠가 화면 가운데에 모이도록 */
body:has(.exhibition-layout) {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Exhibition(map) 페이지: 푸터 숨김 */
body:has(.exhibition-layout) .site-footer {
    display: none !important;
}

/* Exhibition 페이지: 메인(맵) 고정, 네비 아래 ~ 푸터 위 영역에 맵 세로·가로 중앙 */
.main-container:has(.exhibition-layout) {
    position: fixed;
    /* top: calc(var(--nav-height) + env(safe-area-inset-top, 0)); */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: auto;
}

/* 맵+리스트를 가운데에 모아서 배치 (갭 최소화) */
.exhibition-layout {
    display: flex;
    flex-direction: row;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--max-container);
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: var(--pad-bottom-pct);
}

/* 맵 영역: 비율 유지, 가로 조금 더 넓게 */
.exhibition-layout > .exhibition-section {
    min-width: 26rem;
    max-width: 54rem;
    max-height: 75vh;
    aspect-ratio: 313.85 / 294.03;
}

.exhibition-layout > .content-section {
    flex: 0 0 auto;
    min-width: 20rem;
    max-width: 26rem;
    max-height: 70vh;
    min-height: 0;
    overflow-y: auto;
    align-self: stretch;
}

/* 맵 영역: SVG 크기 제한 */
.exhibition-section {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.exhibition-map {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exhibition-svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
}

/* __name 영역 hover 시 파란색 (rect, 배경 .cls-1 제외) */
#exhibition-svg [class*="__name"]:hover path:not(.cls-1),
#exhibition-svg [class*="__name"]:hover polygon:not(.cls-1),
#exhibition-svg [class*="__name"]:hover circle:not(.cls-1),
#exhibition-svg [class*="__name"]:hover .cls-5 {
    fill: #0000ff !important;
}

/* 모든 artist_X__point 그룹: 기본 숨김, 내부 .cls-6 → black */
#exhibition-svg [class*="__point"] {
    display: none !important;
}
#exhibition-svg [class*="__point"] .cls-6 {
    fill: black !important;
}
/* artist_X__name hover 시 해당 __point 표시 */
#exhibition-svg [class*="artist_"]:has([class*="__name"]:hover) [class*="__point"] {
    display: block !important;
}

/* 아티스트 그룹 안에 있는 .cls-4만 white 유지 (그 밖의 white는 exhibition-svg.txt에서 fill: none) */
#exhibition-svg [class*="artist_"] .cls-4 {
    fill: #fff !important;
}

/* exhibition-artist-list 리스트 호버 시 해당 아티스트 SVG 반응 (__name 파란색, __point 표시) */
body[data-artist-list-hover] #exhibition-svg [class*="__name"] path:not(.cls-1),
body[data-artist-list-hover] #exhibition-svg [class*="__name"] polygon:not(.cls-1),
body[data-artist-list-hover] #exhibition-svg [class*="__name"] circle:not(.cls-1),
body[data-artist-list-hover] #exhibition-svg [class*="__name"] .cls-5 {
    fill: #999999 !important;
}
/* 리스트 id → SVG 영역: 1→10, 2→1, 3→2, … 9→8, center/10→10, 11–13 동일 */
body[data-artist-list-hover="1"] #exhibition-svg [class*="artist_10__name"] path:not(.cls-1),
body[data-artist-list-hover="1"] #exhibition-svg [class*="artist_10__name"] polygon:not(.cls-1),
body[data-artist-list-hover="1"] #exhibition-svg [class*="artist_10__name"] circle:not(.cls-1),
body[data-artist-list-hover="1"] #exhibition-svg [class*="artist_10__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="1"] #exhibition-svg [class*="artist_10__point"] { display: block !important; }
body[data-artist-list-hover="2"] #exhibition-svg [class*="artist_1__name"] path:not(.cls-1),
body[data-artist-list-hover="2"] #exhibition-svg [class*="artist_1__name"] polygon:not(.cls-1),
body[data-artist-list-hover="2"] #exhibition-svg [class*="artist_1__name"] circle:not(.cls-1),
body[data-artist-list-hover="2"] #exhibition-svg [class*="artist_1__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="2"] #exhibition-svg [class*="artist_1__point"] { display: block !important; }
body[data-artist-list-hover="3"] #exhibition-svg [class*="artist_3__name"] path:not(.cls-1),
body[data-artist-list-hover="3"] #exhibition-svg [class*="artist_3__name"] polygon:not(.cls-1),
body[data-artist-list-hover="3"] #exhibition-svg [class*="artist_3__name"] circle:not(.cls-1),
body[data-artist-list-hover="3"] #exhibition-svg [class*="artist_3__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="3"] #exhibition-svg [class*="artist_3__point"] { display: block !important; }
body[data-artist-list-hover="4"] #exhibition-svg [class*="artist_2__name"] path:not(.cls-1),
body[data-artist-list-hover="4"] #exhibition-svg [class*="artist_2__name"] polygon:not(.cls-1),
body[data-artist-list-hover="4"] #exhibition-svg [class*="artist_2__name"] circle:not(.cls-1),
body[data-artist-list-hover="4"] #exhibition-svg [class*="artist_2__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="4"] #exhibition-svg [class*="artist_2__point"] { display: block !important; }
body[data-artist-list-hover="5"] #exhibition-svg [class*="artist_4__name"] path:not(.cls-1),
body[data-artist-list-hover="5"] #exhibition-svg [class*="artist_4__name"] polygon:not(.cls-1),
body[data-artist-list-hover="5"] #exhibition-svg [class*="artist_4__name"] circle:not(.cls-1),
body[data-artist-list-hover="5"] #exhibition-svg [class*="artist_4__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="5"] #exhibition-svg [class*="artist_4__point"] { display: block !important; }
body[data-artist-list-hover="6"] #exhibition-svg [class*="artist_5__name"] path:not(.cls-1),
body[data-artist-list-hover="6"] #exhibition-svg [class*="artist_5__name"] polygon:not(.cls-1),
body[data-artist-list-hover="6"] #exhibition-svg [class*="artist_5__name"] circle:not(.cls-1),
body[data-artist-list-hover="6"] #exhibition-svg [class*="artist_5__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="6"] #exhibition-svg [class*="artist_5__point"] { display: block !important; }
body[data-artist-list-hover="7"] #exhibition-svg [class*="artist_8__name"] path:not(.cls-1),
body[data-artist-list-hover="7"] #exhibition-svg [class*="artist_8__name"] polygon:not(.cls-1),
body[data-artist-list-hover="7"] #exhibition-svg [class*="artist_8__name"] circle:not(.cls-1),
body[data-artist-list-hover="7"] #exhibition-svg [class*="artist_8__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="7"] #exhibition-svg [class*="artist_8__point"] { display: block !important; }
body[data-artist-list-hover="8"] #exhibition-svg [class*="artist_7__name"] path:not(.cls-1),
body[data-artist-list-hover="8"] #exhibition-svg [class*="artist_7__name"] polygon:not(.cls-1),
body[data-artist-list-hover="8"] #exhibition-svg [class*="artist_7__name"] circle:not(.cls-1),
body[data-artist-list-hover="8"] #exhibition-svg [class*="artist_7__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="8"] #exhibition-svg [class*="artist_7__point"] { display: block !important; }
body[data-artist-list-hover="9"] #exhibition-svg [class*="artist_9__name"] path:not(.cls-1),
body[data-artist-list-hover="9"] #exhibition-svg [class*="artist_9__name"] polygon:not(.cls-1),
body[data-artist-list-hover="9"] #exhibition-svg [class*="artist_9__name"] circle:not(.cls-1),
body[data-artist-list-hover="9"] #exhibition-svg [class*="artist_9__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="9"] #exhibition-svg [class*="artist_9__point"] { display: block !important; }
body[data-artist-list-hover="10"] #exhibition-svg [class*="artist_11__name"] path:not(.cls-1),
body[data-artist-list-hover="10"] #exhibition-svg [class*="artist_11__name"] polygon:not(.cls-1),
body[data-artist-list-hover="10"] #exhibition-svg [class*="artist_11__name"] circle:not(.cls-1),
body[data-artist-list-hover="10"] #exhibition-svg [class*="artist_11__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="10"] #exhibition-svg [class*="artist_11__point"] { display: block !important; }
body[data-artist-list-hover="11"] #exhibition-svg [class*="artist_6__name"] path:not(.cls-1),
body[data-artist-list-hover="11"] #exhibition-svg [class*="artist_6__name"] polygon:not(.cls-1),
body[data-artist-list-hover="11"] #exhibition-svg [class*="artist_6__name"] circle:not(.cls-1),
body[data-artist-list-hover="11"] #exhibition-svg [class*="artist_6__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="11"] #exhibition-svg [class*="artist_6__point"] { display: block !important; }
body[data-artist-list-hover="12"] #exhibition-svg [class*="artist_14__name"] path:not(.cls-1),
body[data-artist-list-hover="12"] #exhibition-svg [class*="artist_14__name"] polygon:not(.cls-1),
body[data-artist-list-hover="12"] #exhibition-svg [class*="artist_14__name"] circle:not(.cls-1),
body[data-artist-list-hover="12"] #exhibition-svg [class*="artist_14__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="12"] #exhibition-svg [class*="artist_14__point"] { display: block !important; }
body[data-artist-list-hover="13"] #exhibition-svg [class*="artist_13__name"] path:not(.cls-1),
body[data-artist-list-hover="13"] #exhibition-svg [class*="artist_13__name"] polygon:not(.cls-1),
body[data-artist-list-hover="13"] #exhibition-svg [class*="artist_13__name"] circle:not(.cls-1),
body[data-artist-list-hover="13"] #exhibition-svg [class*="artist_13__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="13"] #exhibition-svg [class*="artist_13__point"] { display: block !important; }
body[data-artist-list-hover="14"] #exhibition-svg [class*="artist_14__name"] path:not(.cls-1),
body[data-artist-list-hover="14"] #exhibition-svg [class*="artist_14__name"] polygon:not(.cls-1),
body[data-artist-list-hover="14"] #exhibition-svg [class*="artist_14__name"] circle:not(.cls-1),
body[data-artist-list-hover="14"] #exhibition-svg [class*="artist_14__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="14"] #exhibition-svg [class*="artist_14__point"] { display: block !important; }
/* 리스트 "중앙 투고 테이블"(center) 호버 시 SVG artist_11 영역 강조 */
body[data-artist-list-hover="center"] #exhibition-svg [class*="artist_11__name"] path:not(.cls-1),
body[data-artist-list-hover="center"] #exhibition-svg [class*="artist_11__name"] polygon:not(.cls-1),
body[data-artist-list-hover="center"] #exhibition-svg [class*="artist_11__name"] circle:not(.cls-1),
body[data-artist-list-hover="center"] #exhibition-svg [class*="artist_11__name"] .cls-5 { fill: #0000ff !important; }
body[data-artist-list-hover="center"] #exhibition-svg [class*="artist_11__point"] { display: block !important; }

/* 리스트 호버 시 해당 동적 마커(원) 강조 — 마커 id = 리스트 artist id */
body[data-artist-list-hover="1"] #exhibition-svg .marker-group[data-marker-id="1"] > circle:first-of-type,
body[data-artist-list-hover="2"] #exhibition-svg .marker-group[data-marker-id="2"] > circle:first-of-type,
body[data-artist-list-hover="3"] #exhibition-svg .marker-group[data-marker-id="3"] > circle:first-of-type,
body[data-artist-list-hover="4"] #exhibition-svg .marker-group[data-marker-id="4"] > circle:first-of-type,
body[data-artist-list-hover="5"] #exhibition-svg .marker-group[data-marker-id="5"] > circle:first-of-type,
body[data-artist-list-hover="6"] #exhibition-svg .marker-group[data-marker-id="6"] > circle:first-of-type,
body[data-artist-list-hover="7"] #exhibition-svg .marker-group[data-marker-id="7"] > circle:first-of-type,
body[data-artist-list-hover="8"] #exhibition-svg .marker-group[data-marker-id="8"] > circle:first-of-type,
body[data-artist-list-hover="9"] #exhibition-svg .marker-group[data-marker-id="9"] > circle:first-of-type,
body[data-artist-list-hover="10"] #exhibition-svg .marker-group[data-marker-id="10"] > circle:first-of-type,
body[data-artist-list-hover="11"] #exhibition-svg .marker-group[data-marker-id="11"] > circle:first-of-type,
body[data-artist-list-hover="12"] #exhibition-svg .marker-group[data-marker-id="12"] > circle:first-of-type,
body[data-artist-list-hover="13"] #exhibition-svg .marker-group[data-marker-id="13"] > circle:first-of-type,
body[data-artist-list-hover="center"] #exhibition-svg .marker-group[data-marker-id="10"] > circle:first-of-type {
    fill: #0000ff !important;
}

/* SVG 마커 호버 시 해당 리스트 행 강조 */
body[data-artist-list-hover="1"] .exhibition-artist-item[data-artist-id="1"],
body[data-artist-list-hover="2"] .exhibition-artist-item[data-artist-id="2"],
body[data-artist-list-hover="3"] .exhibition-artist-item[data-artist-id="3"],
body[data-artist-list-hover="4"] .exhibition-artist-item[data-artist-id="4"],
body[data-artist-list-hover="5"] .exhibition-artist-item[data-artist-id="5"],
body[data-artist-list-hover="6"] .exhibition-artist-item[data-artist-id="6"],
body[data-artist-list-hover="7"] .exhibition-artist-item[data-artist-id="7"],
body[data-artist-list-hover="8"] .exhibition-artist-item[data-artist-id="8"],
body[data-artist-list-hover="9"] .exhibition-artist-item[data-artist-id="9"],
body[data-artist-list-hover="10"] .exhibition-artist-item[data-artist-id="10"],
body[data-artist-list-hover="11"] .exhibition-artist-item[data-artist-id="11"],
body[data-artist-list-hover="12"] .exhibition-artist-item[data-artist-id="12"],
body[data-artist-list-hover="13"] .exhibition-artist-item[data-artist-id="13"],
body[data-artist-list-hover="center"] .exhibition-artist-item[data-artist-id="center"] {
    background: #e8e8ff !important;
}

.content-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-y: auto;
}

/* Map 전용 artist list (별도 HTML/CSS 구조) */
.exhibition-artist-list {
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--max-content);
    min-height: 0;
    padding: var(--pad-block);
    background: white;
    border: var(--border);
    height: fit-content;
}

.exhibition-artist-list-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: var(--space-5);
    padding: 0;
}

.exhibition-artist-list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.exhibition-artist-list-ul .exhibition-artist-item {
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    cursor: pointer;
    transition: background 0.15s;
    padding-top: var(--space-3);
}

.exhibition-artist-list-ul .exhibition-artist-item:first-child {
    border-top: none;
}

.exhibition-artist-list-ul .exhibition-artist-item:hover {
    background: #f5f5f5;
}

.exhibition-artist-list-ul .exhibition-artist-num {
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    font-size: 0.95em;
}

.exhibition-artist-list-ul .exhibition-artist-name {
    flex: 1;
    min-width: 0;
    font-weight: bold;
    word-break: break-word;
}

.exhibition-modal .modal-title .marker-number-badge {
    display: inline;
    background: none;
    padding: 0;
    margin-right: var(--space-2);
}

/* Map 모달: global 비율(9:16) + 높이 꽉 채워서 댓글 목록·댓글쓰기 영역 모두 표시 */
.exhibition-modal .exhibition-modal-content {
    /* global .modal-content의 aspect-ratio + max-height 유지, flex로 내부 채움 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* 닫기 버튼은 global에서 position: fixed로 통일 */

.exhibition-modal .modal-header-row .modal-title {
    z-index: 0; /* close 버튼 아래로 */
}

.exhibition-modal .exhibition-modal-body {
    z-index: 0; /* close 버튼 아래로 */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* 댓글 목록 스크롤 / 댓글쓰기 영역 하단 고정 */
.exhibition-modal .modal-two-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 댓글 쓰기 / 접기 (데스크톱·모바일 공통) */
.exhibition-modal-write-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    margin: 0;
    border: var(--border-width) solid var(--border-color);
    border-top: var(--border-width) solid var(--border-color);
    background: #000;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--font-ui-size);
    font-weight: 500;
    flex-shrink: 0;
    min-height: var(--touch-target);
}

.exhibition-modal-write-trigger:hover {
    background: #000;
    color: #fff;
}

/* 패널 열렸을 때 트리거 숨김 → 접기 버튼은 패널 안에 하나만 */
.exhibition-modal .modal-two-col.write-panel-open .exhibition-modal-write-trigger {
    display: none;
}

.exhibition-modal .exhibition-modal-write-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
    flex-shrink: 0;
}

/* 데스크톱: 펼치면 남는 높이 꽉 채움, 작성 영역 흰색, 보더 없음 */
.exhibition-modal .exhibition-modal-write-wrap.is-open {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}

@keyframes exhibition-write-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.exhibition-modal .exhibition-modal-write-close {
    width: 100%;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: var(--border-width) solid var(--border-color);
    background: #000;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--font-ui-size);
    font-weight: 500;
    min-height: var(--touch-target);
}

.exhibition-modal .exhibition-modal-write-close:hover {
    background: #000;
    color: #fff;
}

/* 펼쳤을 때 접기 버튼이 폼 위에 고정, 끊기지 않게 */
.exhibition-modal .exhibition-modal-write-wrap.is-open .exhibition-modal-write-close {
    flex-shrink: 0;
}

/* 댓글 쓰기 열렸을 때 댓글 목록은 공간 안 차지하게 → 접기·폼이 화면에 꽉 차게 */
.exhibition-modal .modal-two-col.write-panel-open .modal-posts-col {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.exhibition-modal .modal-posts-col {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.exhibition-modal .exhibition-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* 왼쪽 리스트: 인덱스 갤러리 카드처럼 (이미지 위, 댓글 아래) */
.exhibition-modal .exhibition-post-card {
    margin: 0;
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 20rem;
    overflow-y: auto;
    flex-shrink: 0;
    text-align: center;
}

.exhibition-modal .exhibition-post-image {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.exhibition-modal .exhibition-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.exhibition-modal .exhibition-post-card .post-comment {
    padding: var(--space-2) var(--space-3);
    margin: 0;
    word-break: break-word;
    text-align: center;
}

.exhibition-modal .exhibition-post-card .link-preview {
    margin-top: var(--space-2);
}

.exhibition-modal .exhibition-post-card .post-meta {
    margin-top: auto;
    border-top: var(--border);
    font-size: 0.9em;
    text-align: center;
}

.exhibition-modal .modal-form-col {
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    -webkit-overflow-scrolling: touch;
}

.exhibition-modal .exhibition-modal-write-wrap.is-open .modal-form-col {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* 폼이 남는 높이 100% 채움 (갤러리 모달과 동일) */
.exhibition-modal .modal-form-col .post-form {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.exhibition-modal .post-form div {
    width: 100%;
}

/* 2단(이미지 + 댓글): flex 세로, 남는 높이 채움 */
.exhibition-modal .exhibition-form-two-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
}

.exhibition-modal .exhibition-form-col {
    min-width: 0;
}

/* 이미지 추가 영역: 고정 높이 */
.exhibition-modal .exhibition-form-col-left {
    position: relative;
    flex: 0 0 auto;
    height: 10rem;
    min-height: 10rem;
    min-width: 0;
    overflow: hidden;
}

.exhibition-modal .exhibition-form-col-left .exhibition-add-image-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px dashed var(--border-color);
    cursor: pointer;
    z-index: 0;
}

.exhibition-modal .exhibition-form-col-left .exhibition-image-previews {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: center;
    gap: var(--space-2);
    overflow: hidden;
    pointer-events: none;
}

.exhibition-modal .exhibition-form-col-left .exhibition-image-previews .exhibition-preview-item {
    position: relative;
    pointer-events: auto;
    flex-shrink: 0;
    border: var(--border);
    overflow: hidden;
}

.exhibition-modal .exhibition-form-col-left .exhibition-image-previews .exhibition-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.exhibition-modal .exhibition-form-col-left .exhibition-add-image-label:hover {
    background: #f5f5f5;
}

.exhibition-modal .exhibition-add-image-icon {
    font-size: 1.25rem;
    font-family: var(--font-ui);
    font-weight: 500;
}

.exhibition-modal .exhibition-image-previews {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.exhibition-modal .exhibition-image-previews .exhibition-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border: var(--border);
    overflow: hidden;
}

.exhibition-modal .exhibition-form-col-left .exhibition-image-previews .exhibition-preview-item {
    width: 100%;
    height: 100%;
}

.exhibition-modal .exhibition-image-previews .exhibition-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exhibition-modal .exhibition-form-col-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}

.exhibition-modal .exhibition-form-col-right .form-group {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.exhibition-modal .exhibition-form-col-right .form-group label {
    flex-shrink: 0;
}

/* 댓글+올리기 한 묶음: form-group이 남는 높이 차지, textarea 반응형, 올리기는 맨 아래 */
.exhibition-modal .exhibition-form-col-right .form-group-comment {
    margin-bottom: 0;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.exhibition-modal .exhibition-form-col-right .form-group-comment textarea {
    width: 100%;
    flex: 1 1 0;
    min-height: 10rem;
    resize: none;
    box-sizing: border-box;
    display: block;
}

.exhibition-modal .exhibition-form-col-right .form-group-comment .btn-submit {
    flex-shrink: 0;
}

.posts-container {
}

.post-item {
    border: var(--border);
}

.post-item:last-child {
}

.post-item .post-comment {
    padding: var(--space-2) var(--space-3);
}

.post-item .post-meta {
    margin-top: auto;
    padding: var(--space-2) 0;
    border-top: var(--border);
    font-size: 0.9em;
}

.post-item .post-image img {
    max-width: 500px;
    max-height: 500px;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.post-item .post-link {
}

.post-item .post-link a,
.post-item .post-comment a {
    text-decoration: underline;
}

.post-item .post-comment a:hover {
    text-decoration: underline;
}

.post-item .link-preview {
    border: var(--border);
}

.post-item .link-preview img {
    width: 100%;
    display: block;
}

.post-item .link-preview-info {
    border-top: var(--border);
}

.post-item .link-preview-title {
    font-weight: bold;
    margin-bottom: var(--space-2);
}

.post-item .link-preview-url {
}

.post-item .instagram-preview {
    border: var(--border);
}

.post-form {
    border-top: var(--border);
}

.post-form-title {
    font-weight: bold;
}

@media (max-width: 1280px) {
    .exhibition-layout {
        gap: var(--space-3);
    }
}

@media (max-width: 1024px) {
    .exhibition-layout {
        gap: var(--space-4);
    }
    .exhibition-artist-list {
    }
}

@media (max-width: 768px) {
    /* 768 이하: 메인 스크롤 없음, 맵만 세로 가운데 고정 */
    .main-container:has(.exhibition-layout) {
        overflow: hidden;
    }

    .exhibition-layout {
        padding-bottom: var(--pad-bottom-pct);
        flex-direction: column;
        gap: 0;
        font-size: 0.7rem;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        min-height: 0;
    }

    /* 리스트 숨김, 맵만 100% 노출 */
    .exhibition-layout > .content-section {
        display: none;
    }

    /* 맵 영역: 비율 유지한 채 세로 가운데, 가로 90vw (min-width 제거해 90vw 적용) */
    .exhibition-layout > .exhibition-section {
        flex: 0 0 auto;
        min-width: 0;
        width: 90vw;
        max-width: 90vw;
        max-height: 100%;
        aspect-ratio: 313.85 / 294.03;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* map 모달 크기는 global 768px .modal-content와 동일 */

    .exhibition-section {
        min-width: 0;
        width: 90vw;
        max-width: 90vw;
        max-height: 100%;
    }

    .content-section {
        display: flex;
        min-height: 0;
    }

    /* 맵이 가용 영역에 맞춰 비율 유지, 스크롤 없음 */
    .exhibition-section .exhibition-map {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        max-width: 100%;
        max-height: 100%;
    }

    .exhibition-section #exhibition-svg {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .exhibition-artist-list {
    }

    .exhibition-artist-list-title {
    }

    .exhibition-artist-list-ul .exhibition-artist-item {
    }

    .exhibition-modal .modal-title .marker-number-badge {
        margin-right: var(--space-2);
    }

    .post-item {
        border: var(--border-width) solid var(--border-color);
    }

    .post-item .post-comment {
    }

    .post-item .post-link {
    }

    .post-item .link-preview {
        border: var(--border-width) solid var(--border-color);
    }

    .post-item .link-preview-info {
        border-top: var(--border-width) solid var(--border-color);
    }

    .post-form {
        border-top: var(--border-width) solid var(--border-color);
    }

    .post-form-title {
    }

    .exhibition-modal .modal-two-col {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        min-height: 0;
        position: relative;
    }

    .exhibition-modal .modal-posts-col {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* 768px 이하: 펼치면 모달 전체 오버레이, 접기가 맨 위에만 보이게 */
    .exhibition-modal .exhibition-modal-write-wrap.is-open {
        position: absolute;
        inset: 0;
        z-index: 10;
        max-height: none;
        min-height: 100%;
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: exhibition-write-overlay-in 0.3s ease-out;
    }

    .exhibition-modal .exhibition-modal-write-wrap.is-open .exhibition-modal-write-close {
        flex-shrink: 0;
    }

    .exhibition-modal .exhibition-modal-write-wrap.is-open .modal-form-col {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .exhibition-modal .exhibition-form-col-left {
        height: 7rem;
        min-height: 7rem;
    }

    .exhibition-modal .exhibition-form-col-left .exhibition-add-image-label {
    }

    .exhibition-modal .exhibition-form-col-right .form-group textarea,
    .exhibition-modal .exhibition-form-col-right .form-group-comment textarea {
        min-height: 8rem;
    }

    .post-item,
    .exhibition-modal .exhibition-modal-write-wrap.is-open .exhibition-modal-write-close {
        margin-bottom: var(--space-2);
    }
}