/* ===================================================================
   exhibition-detail.css - 전시 상세 페이지 스타일
   =================================================================== */

/* ===================================================================
   ARTICLE TOKENS
   =================================================================== */
:root {
    --section-gap: var(--spacing-20);
    --group-gap: var(--spacing-12);
    --caption-gap: var(--spacing-2);
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.article-list p {
    margin: 0;
}

.article-body p + .article-list {
    margin-top: 0;
}

.article-body .intro__title {
    margin-bottom: 0 !important;
}

.article-body {
    display: block;
}

.article-body > [class^="article-section-"],
.article-body > [class*=" article-section-"] {
    display: flex;
    flex-direction: column;
    gap: var(--group-gap);
}

.article-body :is([class*="article-section-"], [class*="article-section--"]):not(:first-of-type)::before {
    content: "";
    display: block;
    height: var(--section-gap) !important;
}

.article-body [class^="article-section-"] > .block,
.article-body [class^="article-section-"] > .intro {
    margin-bottom: 0;
}

.article-body [class^="article-section-"] .block__subtitle {
    margin: 0 0 var(--spacing-3);
}

.article-body [class^="article-section-"] .block__text p {
    margin: 0;
}
.article-body [class^="article-section-"] .block__text p + p {
    margin-top: var(--spacing-3);
}

.article-body [class^="article-section-"] .block__text {
    margin-top: 0;
}

.block__item {
    display: flex;
    flex-direction: column;
    gap: var(--group-gap);
}

.article-source {
    margin-top: 0;
}
.article-source__label {
    margin: 0;
}
.article-source__text {
    margin: var(--caption-gap) 0 0;
}

.article-body :is(.caption, .exhibition-caption, .exhibition-article__caption, figcaption) {
    margin-top: var(--caption-gap);
}

.article-quote {
    font-style: italic;
}

.article-section--youtube .youtube-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-black);
}

.article-section--youtube .youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.article-section--youtube + .article-credit {
    margin-top: var(--section-gap);
}

/* ===================================================================
   전시 상세 페이지 기본 스타일
   =================================================================== */

.exhibition-detail-page {
    background-color: var(--color-jungeum-warm-white);
    min-height: 100vh;
}

.exhibition-detail-page .navbar {
    transition: transform 0.3s ease;
}

.exhibition-detail-page .navbar.hidden {
    transform: translateY(-100%);
}

.exhibition-detail-page .navbar--transparent {
    background-color: transparent;
}

.is-exhibition .navbar--theme-dual:not(.scrolled) {
    --nav-logo-filter: brightness(0) invert(1);
    --nav-link-color: var(--text-primary);
    --nav-toggle-stroke: var(--text-primary);
}

.is-exhibition .navbar--theme-dual:has(.navbar-menu:hover),
.is-exhibition .navbar--theme-dual:has(.navbar-submenu-group.active) {
    background-color: var(--bg-primary);
    --nav-logo-filter: none;
    --nav-link-color: var(--text-primary);
    --nav-toggle-stroke: var(--text-primary);
}

.is-exhibition .navbar--theme-dual.scrolled {
    background-color: var(--bg-primary);
    --nav-logo-filter: none;
    --nav-link-color: var(--text-primary);
    --nav-toggle-stroke: var(--text-primary);
}

.exhibition-detail {
    width: 100%;
}


.exhibition-hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    background-color: var(--color-jungeum-warm-white);
    z-index: 1;
}

.exhibition-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(23, 20, 20, 0.3) 0%,
        rgba(23, 20, 20, 0.1) 20%,
        transparent 40%
    );
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exhibition-hero.overlay-active::before {
    opacity: 1;
}

.exhibition-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--spacing-1);
    background-color: transparent;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exhibition-progress.visible {
    opacity: 1;
}

.exhibition-progress__bar {
    height: 100%;
    background-color: var(--accent-primary);
    width: 0%;
    transition: width 0.1s ease;
}

.exhibition-hero__content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100svh;
    height: calc(var(--vh, 1vh) * 100);
}

.exhibition-hero__image-section {
    position: relative;
    overflow: hidden;
}

.exhibition-hero__image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.exhibition-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.exhibition-hero__scroll-indicator {
    display: none;
}

.exhibition-hero__label--desktop {
    position: absolute;
    bottom: var(--spacing-10);
    left: var(--spacing-10);
    z-index: 5;
}

.exhibition-hero__label {
    position: absolute;
    bottom: var(--spacing-10);
    left: var(--spacing-10);
    z-index: 5;
}

@media (min-width: 769px) {
    .exhibition-hero__label--mobile {
        display: none !important;
    }
}

.exhibition-hero__label img {
    width: 10rem;
    height: var(--spacing-20);
    object-fit: contain;
}

.exhibition-hero__info-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--spacing-10);
    position: relative;
}

.exhibition-hero__text-area {
    margin-bottom: var(--spacing-12);
}

.exhibition-hero__title,
.exhibition-hero__date {
    color: var(--color-warm-grey-100);
}

.exhibition-hero__title {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-5xl);
    letter-spacing: calc(var(--font-size-5xl) * -0.02);
}

.exhibition-hero__date {
    font-size: var(--font-size-2xl);
    letter-spacing: calc(var(--font-size-2xl) * -0.02);
}

.exhibition-hero__actions {
    position: absolute;
    bottom: var(--spacing-10);
    left: var(--spacing-10);
    right: var(--spacing-10);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.exhibition-detail-page .scroll-indicator--dark .scroll-indicator__text {
    color: var(--color-warm-grey-100);
}

.exhibition-detail-page .scroll-indicator--dark .scroll-indicator__icon svg {
    stroke: var(--color-warm-grey-100);
}

.exhibition-detail-page .scroll-indicator--dark .scroll-indicator__icon svg path {
    stroke: var(--color-warm-grey-100);
}

.scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.041875rem;
    height: 1.041875rem;
}

.scroll-arrow svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}


.exhibition-content {
    position: relative;
    z-index: 2;
    background-color: var(--color-jungeum-warm-white);
    padding: var(--spacing-20) 0;
    margin-top: 100svh;
    margin-top: calc(var(--vh, 1vh) * 100);
    min-height: calc(100vh - 100vh);
}

.exhibition-reservation-btn-mobile {
    display: none;
}

.exhibition-reservation-btn-fixed {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--bg-primary);
    padding: var(--spacing-4) var(--spacing-5);
        box-shadow: 0 calc(var(--spacing-0-5, 0.125rem) * -1) 0.625rem rgba(0, 0, 0, 0.1);
}

.exhibition-content__body {
    max-width: 59.5rem;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.intro {
    margin-bottom: 0;
}

.intro__title {
    color: var(--color-warm-grey-100);
}

.intro__text {
    color: var(--color-warm-grey-100);
}

.block__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

.block__text {
    color: var(--color-warm-grey-100);
}

.block__subtitle {
    color: var(--color-warm-grey-100);
    margin-bottom: var(--spacing-3);
}

.block__schedule {
    margin-top: var(--spacing-lg);
}

.block__schedule p {
    margin-bottom: var(--spacing-sm);
}

.block__schedule strong {
    font-weight: var(--font-weight-bold);
}

.exhibition-info {
    border-top: var(--spacing-0-5, 0.0625rem) solid var(--color-warm-grey-100);
    padding: var(--spacing-12) 0 var(--spacing-20);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-20);
}

.exhibition-info__title {
    color: var(--color-warm-grey-100);
    margin-bottom: var(--spacing-md);
}

.exhibition-info__row {
    display: block; /* dt/dd를 줄바꿈 단위로 처리 */
    margin-bottom: var(--spacing-6);
}

.exhibition-info__row:last-child {
    margin-bottom: 0;
}

.exhibition-info__label {
    color: var(--color-warm-grey-70);
    display: block;
    margin-bottom: var(--spacing-2);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.exhibition-info__value {
    color: var(--color-warm-grey-100);
    display: block;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.exhibition-info__value br {
    content: "";
    display: block;
    margin-bottom: var(--spacing-2);
}

.exhibition-actions {
    margin-top: var(--spacing-20);
    display: flex;
    justify-content: flex-start;
}


@media (max-width: 768px) {
    .exhibition-hero {
        position: relative !important;
        height: auto !important;
    }
    
    .exhibition-content {
        margin-top: 0 !important;
    }
    
    .exhibition-hero__image-section {
        position: relative;
    }
    
    .exhibition-hero__label {
        bottom: var(--spacing-5); /* 20px */
        left: var(--spacing-5);   /* 20px */
    }
}

/* 모바일 반응형 디자인 */
@media (max-width: 768px) {
    /* Container 패딩 제거 (이중 패딩 방지) */
    .exhibition-content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .exhibition-content__body {
        padding-left: var(--spacing-5) !important; /* 20px - 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important;
    }
    
    /* 히어로 섹션: 모바일에서 상하 배치 */
    .exhibition-hero__content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        height: auto !important;
    }
    
    .exhibition-hero__image-section {
        width: 100%;
        order: 1; /* 이미지를 먼저 표시 */
        height: 100svh;
        height: calc(var(--vh, 1vh) * 100);
    }
    
    .exhibition-hero__image {
    height: 100svh;
    height: calc(var(--vh, 1vh) * 100);
        min-height: 100svh;
        min-height: calc(var(--vh, 1vh) * 100);
        /* 스크롤 시 부드러운 확대 효과 */
        transition: transform 0.3s ease-out;
        will-change: transform;
    }
    
    .exhibition-hero__image img {
        /* 스크롤 시 부드러운 확대 효과 */
        transition: transform 0.3s ease-out;
        will-change: transform;
    }
    
    /* 모바일: 히어로 이미지 위에 오버레이 추가 (메인 히어로 슬라이더와 동일) */
    .exhibition-hero__image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }
    
    .exhibition-hero__image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }
    
    /* 모바일: 액션 영역 숨김 (스크롤 인디케이터와 예약 버튼) - 이미지 섹션 우하단 스크롤 인디케이터만 표시 */
    .exhibition-hero__actions {
        display: none !important;
    }
    
    /* 모바일: 스크롤 인디케이터 우하단에 배치 */
    .exhibition-hero__scroll-indicator {
        display: block !important;
        position: absolute;
        bottom: var(--spacing-5); /* 20px - 우하단 여백 */
        right: var(--spacing-5);   /* 20px - 우하단 여백 */
        z-index: 2; /* 오버레이 위에 표시 */
    }
    
    /* 모바일: 스크롤 인디케이터 화이트 스타일 (오버레이 위에서 잘 보이도록) */
    .exhibition-hero__scroll-indicator .scroll-indicator--light .scroll-indicator__text {
        color: var(--color-white);
    }
    
    .exhibition-hero__scroll-indicator .scroll-indicator--light .scroll-indicator__icon svg {
        color: var(--color-white);
    }
    
    .exhibition-hero__scroll-indicator .scroll-indicator--light .scroll-indicator__icon svg path {
        stroke: var(--color-white);
    }
    
    /* 모바일: 라벨 이미지 스케일 다운 */
    .exhibition-hero__label img {
        width: 5.625rem;
        height: auto; /* 비율 유지 */
    }
    
    /* 네비게이션: 모바일에서 히어로 풀 블리드(이미지 위)이므로 모든 요소 화이트 색상 */
    .exhibition-detail-page .navbar--transparent .navbar-menu a {
        color: var(--color-warm-grey-100) !important; /* 메뉴 텍스트를 화이트로 */
    }
    
    .exhibition-detail-page .navbar--transparent .navbar-toggle svg path {
        stroke: var(--text-inverse) !important; /* 햄버거 버튼은 화이트 */
    }
    
    /* 모바일: 텍스트 영역을 이미지 위에 배치 (메인 히어로 슬라이더와 동일한 레이아웃) */
    .exhibition-hero__image-section {
        position: relative !important; /* 텍스트 배치를 위한 relative */
    }
    
    .exhibition-hero__info-section {
        position: absolute !important; /* 이미지 위에 배치 */
        top: var(--spacing-20) !important; /* 80px - 상단 간격 (메인 히어로 슬라이더와 동일) */
        left: 0 !important;
        width: 100% !important;
        padding: var(--spacing-md) var(--spacing-5) !important; /* 상하 16px, 좌우 20px (메인 히어로 슬라이더와 동일) */
        order: 1 !important; /* 이미지 위에 표시 */
        z-index: 2 !important; /* 오버레이 위에 표시 */
    }
    
    .exhibition-hero__text-area {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm); /* 8px - 메인 히어로 슬라이더와 동일 */
        margin-bottom: 0 !important;
    }
    
    /* 모바일: 텍스트 색상을 화이트로 변경 */
    .exhibition-hero__title {
        color: var(--color-white) !important;
        font-size: var(--font-size-6xl) !important;
        line-height: var(--line-height-tight) !important;
        letter-spacing: var(--letter-spacing-display) !important;
        margin-top: 0 !important;
        margin-bottom: var(--spacing-sm) !important; /* 8px */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }
    
    .exhibition-hero__date {
        color: var(--color-white) !important;
        font-size: var(--font-size-2xl) !important;
        line-height: 1.4 !important;
        letter-spacing: var(--letter-spacing-heading) !important; /* heading-h4의 letter-spacing 적용 */
        font-weight: var(--font-weight-normal) !important; /* 기본 폰트 웨이트 적용 (body-lg와 동일) */
        font-family: var(--font-family-regular) !important; /* 기본 폰트 패밀리 적용 (body-lg와 동일) */
        margin: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }
    
    /* 모바일: 데스크탑 라벨 숨김 */
    .exhibition-hero__label--desktop {
        display: none !important;
    }
    
    /* 모바일: 텍스트 영역 안의 라벨만 표시 */
    .exhibition-hero__label--mobile {
        position: static !important; /* absolute에서 static으로 변경 */
        bottom: auto !important;
        left: auto !important;
        margin-top: var(--spacing-sm) !important; /* 8px - 날짜와 간격 */
        margin-bottom: 0 !important;
        z-index: auto !important;
        display: block !important;
    }
    
    .exhibition-hero__label--mobile img {
        width: 90px !important; /* 모바일에서 스케일 다운 */
        height: auto !important;
        margin: 0 !important;
    }
    
/* 데스크탑/태블릿: 본문 영역의 전시 예약 버튼 숨김 (히어로 영역에 이미 있음) */
.exhibition-reservation-btn-mobile,
.exhibition-reservation-btn-fixed {
    display: none !important;
}

/* 모바일: 전시 예약 버튼 본문 상단에 표시 (기본적으로 표시, JavaScript로 조건부 제어) */
@media (max-width: 768px) {
    .exhibition-reservation-btn-mobile {
        display: block !important;
        margin-bottom: var(--spacing-8) !important; /* 32px - 본문과 간격 */
        padding: 0 var(--spacing-5) !important; /* 좌우 20px 패딩 */
    }

    .exhibition-reservation-btn-mobile .exhibition-reservation-btn {
        width: 100% !important;
    }

    .exhibition-reservation-btn-mobile .exhibition-reservation-btn .btn,
    .exhibition-reservation-btn-mobile .exhibition-reservation-btn a.btn,
    .exhibition-reservation-btn-mobile .exhibition-reservation-btn a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 모바일: 하단 고정 버튼 스타일 */
    .exhibition-reservation-btn-fixed {
        display: none !important; /* 기본적으로 숨김 (JavaScript로 제어) */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background-color: var(--bg-primary) !important;
        padding: var(--spacing-4) var(--spacing-5) !important; /* 상하 16px, 좌우 20px */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important; /* 위쪽 그림자 */
        /* iOS 하단 안전 영역 고려 */
        padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom)) !important;
    }

    .exhibition-reservation-btn-fixed .exhibition-reservation-btn {
        width: 100% !important;
    }

    .exhibition-reservation-btn-fixed .exhibition-reservation-btn .btn,
    .exhibition-reservation-btn-fixed .exhibition-reservation-btn a.btn,
    .exhibition-reservation-btn-fixed .exhibition-reservation-btn a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 하단 고정 버튼이 표시될 때 본문 하단 패딩 추가 (JavaScript로 클래스 추가) */
    .exhibition-content.has-fixed-button {
        padding-bottom: calc(var(--spacing-20) + var(--spacing-20)) !important;
    }
}
    
    .intro__title,
    .artists__title,
    .artist__name {
        line-height: 1.3;
    }
    
    /* intro__title은 모바일에서 커버 타이틀(32px)보다 작게 설정하여 텍스트 위계 유지 */
    .intro__title {
        font-size: var(--font-size-3xl); /* 28px - 커버 타이틀(32px)보다 작지만 서브 제목(20px)보다 큼 */
    }
    
    /* 모바일에서 제목 텍스트 단어 단위로 줄바꿈 처리 */
    .exhibition-hero__title,
    .intro__title,
    .block__subtitle,
    .article-group__title {
        white-space: normal !important; /* 모바일에서 단어 단위로 줄바꿈 */
        word-break: keep-all !important; /* 단어 단위로 줄바꿈 (한글 최적화) */
        overflow-wrap: break-word !important; /* 긴 단어는 줄바꿈 허용 */
    }
    
    /* 모바일에서 <br> 태그 숨김 */
    .exhibition-hero__title br,
    .intro__title .intro__title-br,
    .intro__title br,
    .block__subtitle br,
    .article-group__title br {
        display: none !important;
    }
    
    .artists__title {
        font-size: var(--font-size-xl);
    }
    
    .artist__name {
        font-size: var(--font-size-lg);
    }
    
    /* 모바일에서 크레딧 섹션 세로 배치 */
    .exhibition-info {
        grid-template-columns: 1fr !important; /* 모바일에서 세로 배치 */
        gap: 0 !important; /* 모바일에서 열 사이 간격 제거 */
    }
}

/* 태블릿 반응형 디자인 (데스크탑 레이아웃 유지 - 좌우 배치) */
@media (min-width: 769px) and (max-width: 1199px) {
    /* 태블릿: 본문 영역의 전시 예약 버튼 숨김 (히어로 영역에 이미 있음) */
    .exhibition-reservation-btn-mobile,
    .exhibition-reservation-btn-fixed {
        display: none !important;
    }
    
    /* Container 패딩 제거 (이중 패딩 방지) */
    .exhibition-content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .exhibition-content__body {
        padding-left: var(--spacing-8) !important; /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8) !important;
        max-width: 56.25rem !important;
    }
    
    /* 히어로 섹션: 태블릿에서 데스크탑 레이아웃 유지 (좌우 배치, fixed로 본문이 위로 올라옴) */
    .exhibition-hero {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        /* 신형 브라우저 우선: 주소창/바텀바가 보이는 상태 기준 */
        height: 100svh !important;
        min-height: 100dvh !important; /* Dynamic viewport height 폴백 */
        /* 구형 폴백: JS로 설정한 --vh 사용 */
        height: calc(var(--vh, 1vh) * 100) !important;
        z-index: 1;
    }
    
    /* 태블릿: 본문이 히어로 위로 올라오도록 margin-top 설정 */
    .exhibition-content {
        /* 신형 브라우저 우선: 주소창/바텀바가 보이는 상태 기준 */
        margin-top: 100svh !important;
        /* 구형 폴백: JS로 설정한 --vh 사용 */
        margin-top: calc(var(--vh, 1vh) * 100) !important;
        position: relative;
        z-index: 2;
    }
    
    .exhibition-hero__content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 신형 브라우저 우선: 주소창/바텀바가 보이는 상태 기준 */
        height: 100svh !important;
        min-height: 100dvh !important; /* Dynamic viewport height 폴백 */
        /* 구형 폴백: JS로 설정한 --vh 사용 */
        height: calc(var(--vh, 1vh) * 100) !important;
    }
    
    .exhibition-hero__image-section {
        width: 100%;
        position: relative;
        height: 100%;
    }
    
    .exhibition-hero__image {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    
    .exhibition-hero__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .exhibition-hero__info-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 var(--spacing-8) var(--spacing-20) var(--spacing-8) !important;
        /* 태블릿 좌우 32px, 하단 80px (버튼 공간 확보) */
        position: relative;
    }
    
    .exhibition-hero__text-area {
        margin-bottom: var(--spacing-12) !important; /* 태블릿 간격 48px */
    }
    
    .exhibition-hero__actions {
        position: absolute !important;
        bottom: var(--spacing-8) !important; /* 32px - 브라우저 하단쪽에 위치 */
        left: var(--spacing-8) !important;   /* 32px - 좌우 패딩과 동일하게 */
        right: var(--spacing-8) !important;  /* 32px */
        margin-top: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: var(--spacing-4) !important;
    }
    
    /* 스크롤 인디케이터 숨기기 (큰 태블릿 단계) */
    .exhibition-hero__actions .scroll-indicator {
        display: none !important;
    }
    
    /* 버튼은 데스크탑과 동일하게 기본 컴포넌트 스타일 사용 (오버라이드 없음) */
    
    /* 태블릿 타이틀 크기 조정 */
    .exhibition-hero__title {
        font-size: var(--font-size-4xl) !important;
        letter-spacing: calc(var(--font-size-4xl) * -0.02) !important;
    }
    
    .exhibition-hero__date {
        font-size: var(--font-size-xl) !important; /* 20px - 태블릿 날짜 크기 */
        letter-spacing: calc(var(--font-size-xl) * -0.02) !important;
    }
}

/* 데스크탑 반응형 디자인 */
@media (min-width: 1200px) {
    /* 데스크탑: 본문 영역의 전시 예약 버튼 숨김 (히어로 영역에 이미 있음) */
    .exhibition-reservation-btn-mobile,
    .exhibition-reservation-btn-fixed {
        display: none !important;
    }
    
    .exhibition-content__body {
        padding-left: var(--spacing-10);  /* 40px - 데스크탑 좌우 패딩 */
        padding-right: var(--spacing-10);
    }
    
    .exhibition-hero__info-section {
        padding: 0 var(--spacing-10);
    }
    
    .exhibition-hero__actions {
        position: absolute;
        bottom: var(--spacing-10);  /* 40px */
        left: var(--spacing-10);    /* 40px */
        right: var(--spacing-10);   /* 40px */
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

/* 작은 모바일 반응형 디자인 */
@media (max-width: 480px) {
    .exhibition-content__body {
        padding-left: var(--spacing-5) !important; /* 20px - 작은 모바일 좌우 패딩 */
        padding-right: var(--spacing-5) !important;
    }
    
    /* 작은 모바일: 텍스트 크기 조정 (메인 히어로 슬라이더와 동일) */
    .exhibition-hero__title {
        font-size: var(--font-size-4xl) !important;
        line-height: 1.2 !important;
        letter-spacing: var(--letter-spacing-display) !important;
        margin-top: 0 !important;
        margin-bottom: var(--spacing-xs) !important; /* 작은 모바일: spacing-xs (4px) - 메인 히어로 슬라이더와 동일 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }
    
    .exhibition-hero__date {
        font-size: var(--font-size-xl) !important;
        line-height: 1.4 !important;
        letter-spacing: var(--letter-spacing-heading) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: flex-start !important;
    }
    
    .exhibition-hero__info-section {
        padding: var(--spacing-5) !important; /* 작은 모바일 패딩 20px */
    }
    
    /* intro__title은 작은 모바일에서도 커버 타이틀(28px)보다 작게 설정하여 텍스트 위계 유지 */
    .intro__title {
        font-size: var(--font-size-2xl); /* 24px - 커버 타이틀(28px)보다 작지만 서브 제목(20px)보다 큼 */
    }
    
    /* 작은 모바일에서도 제목 텍스트 단어 단위로 줄바꿈 처리 (위의 스타일과 동일) */
    /* .exhibition-hero__title, .intro__title, .block__subtitle, .article-group__title 스타일은 상위 미디어 쿼리에서 상속 */
    
    /* 작은 모바일: 라벨 이미지 더 작게 스케일 다운 */
    .exhibition-hero__label img {
        width: var(--spacing-20);
        height: auto; /* 비율 유지 */
    }
    
    .artists__title {
        font-size: var(--font-size-lg);
    }
    
    .artist__name {
        font-size: var(--font-size-md);
    }
    
    /* 작은 모바일에서도 크레딧 섹션 세로 배치 */
    .exhibition-info {
        grid-template-columns: 1fr !important; /* 작은 모바일에서도 세로 배치 */
        gap: 0 !important; /* 작은 모바일에서도 열 사이 간격 제거 */
    }
}