/* 페이지별 섹션 스타일. tokens.css, base.css, layout.css, components.css 다음에 로드한다. */

/* 01. 메인 */
/* 메인 배너 Section_mainbanner (498:10966): h978, 카피 pt400, 오버레이 그라디언트 */
.c-hero { position: relative; height: min(780px, 78vh); height: min(780px, 78svh); min-height: 420px; color: var(--color-white); overflow: hidden; background: var(--color-primary-deep); }
.c-hero .swiper, .c-hero__slides { height: 100%; }
.swiper:not(.swiper-initialized) { overflow: hidden; } /* CDN 미로드 폴백: 가로 나열 슬라이드가 문서 폭을 키우지 않음 */
.c-hero__slide { position: relative; height: 100%; }
.c-hero__bg { position: absolute; inset: 0; }
.c-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.c-hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--gradient-banner); }
.c-hero__inner { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); height: 100%; box-sizing: border-box; padding-top: var(--size-header); padding-bottom: 110px; }
.c-hero__title { font-size: var(--text-hero); font-weight: var(--font-weight-bold); line-height: var(--lh-tight); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-hero__desc { width: 590px; max-width: 100%; font-size: var(--text-h6); line-height: var(--lh-relaxed); color: var(--color-white-82); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 컨트롤: 우측 하단 (Figma left 1366 / top 892 → right 250, bottom 48) */
.c-hero__ctrl { position: absolute; right: var(--l-side); bottom: var(--space-12); z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-4); }
.c-hero__ctrl .c-icon-btn { border-radius: var(--radius-none); } /* 메인 배너 화살표는 원형이 아닌 사각형 */
.c-hero__num { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.c-hero__bar { position: relative; width: 130px; height: 2px; background: var(--color-white-35); overflow: hidden; }
.c-hero__bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 33.333%; background: var(--color-white); transition: transform var(--dur-slow) var(--ease); }
@media (max-width: 1024px) {
    .c-hero { height: min(640px, 75vh); height: min(640px, 75svh); }
    .c-hero__inner { padding-top: var(--size-header); padding-bottom: 100px; }
    .c-hero__title { font-size: var(--text-h2); }
    .c-hero__desc { font-size: var(--text-md); }
}

/* 관람정보 바 Section_info (498:10981): py16, 그라디언트 */
.c-info-bar { background: var(--gradient-info-bar); color: var(--color-white); }
.c-info-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--size-info-bar); padding-block: var(--space-4); }
.c-info-bar__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); min-width: 0; }
.c-info-bar__item { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--text-xl); line-height: var(--lh-normal); min-width: 0; }
.c-info-bar__item .c-icon { width: var(--size-icon); height: 1lh; flex-shrink: 0; align-self: flex-start; }
.c-info-bar__item strong { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.c-info-bar__item span { min-width: 0; overflow-wrap: anywhere; }
.c-info-bar__item small { display: block; margin-top: var(--space-1); font-size: var(--text-sm); }
.c-info-bar__divider { width: 1px; height: 18px; background: var(--color-line-white); }
.c-info-bar__actions { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 1024px) {
    .c-info-bar__inner { flex-direction: column; align-items: flex-start; }
    .c-info-bar__items { flex-wrap: wrap; }
    .c-info-bar__item { font-size: var(--text-md); }
}

/* 통합검색 Section_serach (498:11000): py80 bg soft, 좌 카피 + 우 폼 793 */
.c-search-section { background: var(--color-primary-bg); }
.c-search-section__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); padding-block: var(--section-py-sm); }
.c-search-section__text { display: flex; flex-direction: column; gap: var(--space-2); }
.c-search-section__title { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--lh-tight); }
.c-search-section__desc { font-size: var(--text-md); line-height: var(--lh-relaxed); }
@media (max-width: 1024px) { .c-search-section__inner { flex-direction: column; align-items: stretch; } .c-search-hero { width: 100%; } }

/* 전시 슬라이드 Section_exxhibition (498:11015): pt80 pb100, 카드 4×340 gap20 */
.c-exhibit-slider { padding-top: var(--section-py-sm); padding-bottom: var(--section-py); }
.c-exhibit-slider__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--section-body-gap); }
.c-exhibit-slider__nav { display: flex; align-items: center; gap: var(--space-3); }
.c-exhibit-slider .swiper { overflow: hidden; }
.c-exhibit-slider .swiper-slide { width: var(--card-exhibit-w); }
@media (max-width: 1024px) { .c-exhibit-slider .swiper-slide { width: calc(50% - var(--grid-gap-sm) / 2); } .c-card-exhibit { width: 100%; } .c-card-exhibit__thumb { height: auto; aspect-ratio: 340 / 481; } }

/* 프로그램 Section_program (498:11029): py100 bg soft; 대표 699 + 목록 697×3 gap24 */
.c-program-section { background: var(--color-primary-bg); }
.c-program-section__head { display: flex; align-items: center; justify-content: space-between; min-height: 87px; margin-bottom: var(--section-body-gap); }
.c-program-section__grid { display: flex; gap: var(--grid-gap); align-items: flex-start; }
.c-program-section__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--grid-gap); }
.c-program-section .c-card-program__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 컨테이너 90% 구간(1025~1419): 대표 카드 고정 699 → 축소 허용, 목록 열 최소 380 확보 */
@media (max-width: 1419px) { .c-program-section__grid .c-card-program--feature { width: auto; flex: 0 1 var(--card-program-w); min-width: 0; } .c-program-section__grid .c-card-program--feature .c-card-program__thumb { height: auto; aspect-ratio: 699 / 460; } .c-program-section__list { min-width: 380px; } }
@media (max-width: 1024px) { .c-program-section__grid { flex-direction: column; align-items: stretch; } /* 세로 배치에서 flex-start 는 목록 폭을 내용물 크기(638)로 줄인다 */ .c-program-section__grid .c-card-program--feature { width: 100%; flex: 0 0 auto; } .c-program-section__list { min-width: 0; } .c-program-section__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); } }

/* 소식·관람안내 Section_noti (498:11076): py100, 카드 2개 gap24 (소식 flex1 / 안내 707) */
.c-noti-section__grid { display: flex; gap: var(--grid-gap); align-items: stretch; margin-top: var(--space-6); }
.c-news-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--card-pad-lg); background: var(--color-bg); border: var(--border-w) solid var(--color-line); }
.c-news-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.c-news-card__title { font-size: var(--text-h6); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); }
.c-news-card__desc { margin-top: var(--space-1); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-news-card__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--card-news-item-h); border-bottom: var(--border-w) solid var(--color-line); }
.c-news-card__item-text { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.c-news-card__date { flex: 0 0 auto; font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.c-news-card__subject { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: var(--lh-relaxed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-news-card__arrow { display: inline-flex; width: var(--size-icon); height: var(--size-icon); align-items: center; justify-content: center; flex: 0 0 auto; }
.c-news-card__arrow .c-icon { width: var(--size-icon); height: var(--size-icon); }
.c-guide-card { width: var(--card-guide-w); flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--card-pad-lg); background: var(--color-bg); border: var(--border-w) solid var(--color-line); }
.c-guide-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-guide-card__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--card-guide-item-h); border-bottom: var(--border-w) solid var(--color-line); }
.c-guide-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--size-icon-xl); height: var(--size-icon-xl); border: var(--border-w) solid var(--color-line); border-radius: var(--radius-round); background: var(--color-bg); }
.c-guide-card__icon .c-icon { width: var(--size-icon-guide); height: var(--size-icon-guide); }
.c-guide-card__label { display: block; font-size: var(--text-sm-plus); font-weight: var(--font-weight-semibold); line-height: normal; }
.c-guide-card__value { display: block; margin-top: var(--space-1); font-size: var(--text-sm-plus); line-height: var(--lh-guide-value); }
@media (max-width: 1024px) { .c-noti-section__grid { flex-direction: column; } .c-guide-card { width: 100%; } .c-guide-card__grid { grid-template-columns: 1fr; } }

/* 온라인 관람 (498:11172 / 498:11844): 이미지 840×472 + 딥네이비 패널 */
.c-online-view { display: flex; align-items: stretch; }
.c-online-view__media { position: relative; width: var(--online-img-w); height: var(--online-img-h); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-line); }
.c-online-view__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-online-view__360 { position: relative; width: var(--size-icon-360); height: var(--size-icon-360); }
.c-online-view__panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-10); background: var(--color-primary-deep); color: var(--color-white); }
.c-online-view__panel > .c-btn { align-self: flex-start; } /* Figma btn 187×52 (내용 폭) — 세로 flex 늘어남 방지 */
.c-online-view__info { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--border-w) solid var(--color-line-white); }
.c-online-view__title { font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-online-view__desc { font-size: var(--text-md); line-height: var(--lh-relaxed); opacity: 0.8; overflow-wrap: anywhere; }
body[data-menu="home"] .c-online-view__title,
body[data-menu="home"] .c-online-view__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-menu="home"] .c-online-view__desc { -webkit-line-clamp: 3; }
.c-online-view__meta { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-6); line-height: var(--lh-relaxed); }
.c-online-view__meta dt { font-size: var(--text-sm); opacity: 0.8; }
.c-online-view__meta dd { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
@media (max-width: 1419px) { .c-online-view__media { width: auto; height: auto; flex: 1 1 55%; aspect-ratio: 840 / 472; } .c-online-view__panel { flex: 1 1 45%; } } /* 이미지 고정 840 → 비율 유지 축소, 패널 최소 45% */
@media (max-width: 1024px) { .c-online-view { flex-direction: column; } .c-online-view__media { width: 100%; height: auto; flex: 0 0 auto; aspect-ratio: 840 / 472; } }

/* 02. 전시 공통 (상설전시 · 기획전시 상세) */
/* 상설전시 대표 배너: 권장 이미지 1920×700 비율로 표시한다. */
.c-sub-banner { width: 100%; aspect-ratio: 1920 / 700; overflow: hidden; background: var(--color-bg-blue); }
.c-sub-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* 소개 Section (498:11757 / 498:13585): bg soft py80, 좌 제목 40 (450w) + 우 본문 18 lh34 (830w). 장식 벡터 2개는 이미지 수령 후 배치 */
.c-intro { position: relative; background: var(--color-primary-bg); } /* 소개 섹션 이미지 배치. */
/* 소개 섹션 이미지형: 섹션 전체를 이미지 1장으로. picture 로 PC·태블릿(768~)/모바일(~767) 분리 */
.c-intro--image { padding: 0; overflow: hidden; }
/* 좌우 배경 장식(원본 이미지의 0~240 / 1660~1920 구간): 콘텐츠 이미지 양옆에 같은 배율로 붙임. 1920 에서 원본과 동일, 더 좁으면 섹션 밖은 잘림, 더 넓으면 바깥은 배경색 */
.c-intro--image .c-intro__deco { position: absolute; top: 0; width: calc(var(--l-container) * 240 / 1420); height: auto; pointer-events: none; } /* .c-intro--image img 규칙(width:100%)보다 우선하도록 두 클래스 선택자 */
.c-intro--image .c-intro__deco--l { right: calc(50% + var(--l-container) / 2); }
.c-intro--image .c-intro__deco--r { left: calc(50% + var(--l-container) / 2); width: calc(var(--l-container) * 260 / 1420); } /* 우측 구간은 1660~1920 = 260px */
@media (max-width: 1419px) { .c-intro--image .c-intro__deco { width: calc(var(--l-container-fluid) * 240 / 1420); } .c-intro--image .c-intro__deco--l { right: calc(50% + var(--l-container-fluid) / 2); } .c-intro--image .c-intro__deco--r { left: calc(50% + var(--l-container-fluid) / 2); width: calc(var(--l-container-fluid) * 260 / 1420); } }
@media (max-width: 767px) { .c-intro--image .c-intro__deco { display: none; } }
/* 소개 이미지를 콘텐츠 컨테이너에 맞춰 중앙 배치한다. 모바일은 별도 이미지를 화면 폭에 맞춘다. */
.c-intro--image .c-intro__picture, .c-map-image .c-map-image__picture { display: block; width: var(--l-container); margin-inline: auto; }
.c-intro--image img, .c-map-image img { display: block; width: 100%; height: auto; }
@media (max-width: 1419px) { .c-intro--image .c-intro__picture, .c-map-image .c-map-image__picture { width: var(--l-container-fluid); } }
@media (max-width: 767px) { .c-intro--image .c-intro__picture, .c-map-image .c-map-image__picture { width: 100%; } }

/* 전시 구성(상설) Section (498:11762): 3 article, 이미지 640×420 + 텍스트 640, gap80, 세로 py40 */
.c-story { display: flex; flex-direction: column; gap: var(--space-14); }
.c-story__list { display: flex; flex-direction: column; }
.c-story__item { display: flex; align-items: center; gap: var(--space-16); padding-block: var(--space-10); }
.c-story__item:first-child { padding-top: 0; }
.c-story__item--reverse { flex-direction: row-reverse; justify-content: flex-end; } /* row-reverse 는 우측 정렬이 기본 → 좌측 라인(컨테이너 시작선)에 맞춤 */
.c-story__media { width: var(--story-img-w); height: var(--story-img-h); flex: 0 0 auto; overflow: hidden; background: var(--color-line); }
.c-story__media img { width: 100%; height: 100%; object-fit: cover; }
.c-story__body { width: var(--story-img-w); flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.c-story__num { font-size: var(--text-display); font-weight: var(--font-weight-light); line-height: 1; color: var(--color-primary-deep); }
.c-story__text { display: flex; flex-direction: column; gap: var(--space-6); max-width: 600px; }
.c-story__title { font-size: var(--text-h3); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-story__subtitle { font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: var(--lh-relaxed); }
.c-story__desc { font-size: var(--text-md); line-height: var(--lh-loose); }
@media (max-width: 1419px) { .c-story__media, .c-story__body { flex: 1 1 0; width: auto; min-width: 0; max-width: var(--story-img-w); } .c-story__media { height: auto; aspect-ratio: 640 / 420; } .c-story__item { gap: var(--space-10); } } /* 컨테이너 90% 구간: 고정 640+80+640(1360) 이 넘치지 않도록 두 열 유동 폭 */
@media (max-width: 1024px) { .c-story__item, .c-story__item--reverse { flex-direction: column; align-items: stretch; gap: var(--space-6); } .c-story__media, .c-story__body { flex: 0 0 auto; width: 100%; max-width: none; } .c-story__media { height: auto; aspect-ratio: 640 / 420; } }

/* 전시 하이라이트 Section (498:11794): 대형 784h p32 캡션 + 썸네일 3열 220h gap24, 화살표 컨테이너 밖 80px */
.c-highlight { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.c-highlight__main { position: relative; height: var(--highlight-h); overflow: hidden; background: var(--color-line); }
.c-highlight__main .swiper, .c-highlight__main .swiper-wrapper { height: 100%; }
.c-highlight__main .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; } /* Swiper 미로드 시에도 1장 폭 유지 */
.c-highlight__slide { position: relative; height: 100%; }
.c-highlight__slide img { width: 100%; height: 100%; object-fit: cover; }
.c-highlight__slide::after { content: ""; position: absolute; inset: 0; background: var(--gradient-highlight); }
.c-highlight__caption { position: absolute; left: var(--space-8); bottom: var(--space-8); z-index: var(--z-raised); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--color-white); }
.c-highlight__thumbs { overflow: hidden; }
.c-highlight__thumbs .swiper-slide { width: calc((100% - var(--grid-gap) * 2) / 3); height: var(--highlight-thumb-h); overflow: hidden; background: var(--color-line); cursor: pointer; }
.c-highlight__thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.c-highlight__thumbs .swiper-slide-thumb-active { outline: var(--border-w-thick) solid var(--color-primary); outline-offset: -2px; }
/* 좌우 버튼 = Figma Arrow_btn 48 (559:9829): 사각·line 테두리·연한 배경, 썸네일 행 세로 중앙, 컨테이너 바깥 22px */
.c-highlight__nav { position: absolute; top: auto; bottom: calc(var(--highlight-thumb-h) / 2); transform: translateY(50%); z-index: var(--z-raised); border-radius: var(--radius-none); border-color: var(--color-line); background: var(--color-primary-bg); }
.c-highlight__nav--prev { left: calc((var(--size-icon-2xl) + var(--highlight-nav-gap)) * -1); }
.c-highlight__nav--next { right: calc((var(--size-icon-2xl) + var(--highlight-nav-gap)) * -1); }
.c-highlight__count { display: none; } /* 현재 위치 텍스트는 모바일에서만 표시 (767:17156) */
/* 1560px 미만에서는 슬라이더 화살표를 안쪽에 배치해 가로 넘침을 방지한다. */
@media (max-width: 1559px) { .c-highlight__nav--prev { left: var(--space-2); } .c-highlight__nav--next { right: var(--space-2); } }
@media (max-width: 1024px) { .c-highlight__main { height: auto; aspect-ratio: 1420 / 784; } .c-highlight__thumbs .swiper-slide { height: 140px; } .c-highlight__nav { bottom: 70px; } }

/* 전시 자료 Section (498:11813): 도록 카드 341×484 p24 오버레이 + 다운로드 카드 p34 */
.c-materials { display: flex; gap: var(--grid-gap); align-items: stretch; }
.c-catalog-card { position: relative; width: var(--card-catalog-w); height: var(--card-catalog-h); flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-6); color: var(--color-white); background: var(--color-line); overflow: hidden; }
.c-catalog-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-catalog-card::after { content: ""; position: absolute; inset: 0; background: var(--gradient-catalog); }
.c-catalog-card__text { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--space-2); line-height: var(--lh-normal); }
.c-catalog-card__title { font-size: var(--text-md); font-weight: var(--font-weight-semibold); }
.c-catalog-card__desc { font-size: var(--text-base); }
.c-download-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-9); background: var(--color-bg); border: var(--border-w) solid var(--color-line); }
.c-download-card__title { font-size: var(--text-h6); font-weight: var(--font-weight-bold); line-height: normal; }
.c-download-card__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-2) var(--space-6) 0; border-bottom: var(--border-w) solid var(--color-line); }
.c-download-card__item:last-child { border-bottom: 0; }
.c-download-card__info { display: flex; flex: 1 1 0; align-items: center; gap: var(--space-4); min-width: 0; }
.c-download-card__info .c-badge, .c-download-card__item > .c-btn-download { flex-shrink: 0; }
.c-download-card__name { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: normal; }
@media (max-width: 1024px) { .c-materials { flex-direction: column; } .c-catalog-card { width: 100%; height: auto; aspect-ratio: 341 / 484; } }

/* 관람지도 및 동선안내 Section (498:11869): bg soft py100, 좌 평면도 + 범례 / 우 제목 + 목록 630 */
/* 관람지도 섹션 이미지형: 제목·평면도·목록 포함 1장. 섹션 패딩은 이미지에 포함. PC·태블릿(768~)/모바일(~767) 분리 */
.l-section.c-map-image { padding: 0; } /* 이미지 배치 규칙은 위 .c-intro--image 와 공통 (1420 컨테이너 기준) */
/* 상설전시 관람지도 이미지는 콘텐츠만 포함하므로 섹션 여백을 별도로 적용한다. */
@media (min-width: 768px) { .l-section.c-map-image--white { padding-block: var(--section-py); } }

/* 03. 기획전시 목록 · 상세 */
/* 목록 Section:margin (498:12052): pt64 pb80, 헤더 gap32, 카드 3열 gap54, 페이지네이션 */
.c-list-section { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding-top: var(--space-15); padding-bottom: var(--section-py-sm); }
.c-list-section > .c-tab-btns { align-self: flex-start; }
.c-list-section__head { width: 100%; display: flex; flex-direction: column; gap: var(--space-8); }
.c-list-bar__tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
@media (max-width: 1419px) { .c-list-bar { flex-wrap: wrap; } .c-list-bar__tools { flex-wrap: wrap; } } /* 필터(드롭다운·검색) 폭이 컨테이너를 넘으면 줄바꿈 */
.c-list-grid { width: 100%; display: grid; grid-template-columns: repeat(3, var(--card-exhibit-lg-w)); column-gap: var(--list-card-gap); row-gap: var(--space-15); }
.c-list-grid[hidden] { display: none; }
.c-list-grid .c-card-exhibit--large { width: 100%; }
@media (max-width: 1439px) { .c-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); } }
@media (max-width: 1024px) { .c-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-10); } .c-list-bar { flex-wrap: wrap; } .c-form-search__input { width: 240px; } }
/* 모바일에서는 도구 영역을 별도 행에 배치하고 검색창을 남은 폭에 맞춘다. */
@media (max-width: 767px) {
    .c-list-bar__tools { flex: 1 1 100%; min-width: 0; justify-content: flex-start; }
    .c-form-search { flex: 1 1 0; min-width: 0; }
    .c-form-search__input { flex: 1 1 0; width: auto; min-width: 0; }
}

/* 상세 "목록으로" 바 Container (498:13533): h109 */
.c-back-bar { display: flex; align-items: center; min-height: var(--back-bar-h); }
.c-back-bar__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--lh-normal); }
.c-back-bar__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--back-icon); height: var(--back-icon); }
.c-back-bar__icon .c-icon { width: var(--back-icon); height: var(--back-icon); } /* icn-arrow-back: Figma Back Icon 40 프레임 그대로 */

/* 상세 상단 Section:margin (498:13538): 포스터 521×737 + 텍스트 gap64, pb100 */
.c-detail-hero { display: flex; align-items: flex-start; gap: var(--space-15); padding-bottom: var(--section-py); }
.c-detail-hero__poster { width: var(--poster-detail-w); height: var(--poster-detail-h); flex: 0 0 auto; overflow: hidden; background: var(--color-line); }
.c-detail-hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.c-detail-hero__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.c-detail-hero__head { display: flex; flex-direction: column; gap: var(--space-5); }
.c-detail-hero__label { font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: normal; color: var(--color-text-muted-444); }
.c-detail-hero__title { margin-top: var(--space-6); font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: normal; }
.c-detail-hero__subtitle { margin-top: var(--space-5); font-size: var(--text-h6); font-weight: var(--font-weight-medium); line-height: normal; }
.c-detail-hero__section { display: flex; flex-direction: column; gap: var(--space-3); }
.c-detail-hero__section-title { font-size: var(--text-h6); font-weight: var(--font-weight-semibold); line-height: normal; }
.c-detail-hero__desc { max-width: 835px; font-size: var(--text-lg); line-height: var(--lh-relaxed); }
.c-detail-hero:not(.c-program-hero) .c-detail-hero__desc {
    max-height: 8lh; overflow-y: auto; overflow-x: hidden;
    padding-inline-end: var(--space-3); overscroll-behavior-y: contain;
}
/* 정보 박스 (498:13552): bg blue, border-top text, p24, 라벨 90 SemiBold 18 / 값 20 */
.c-detail-info { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-bg-blue); border-top: var(--border-w) solid var(--color-text); }
.c-detail-info__row { display: flex; align-items: center; gap: var(--space-5); min-height: 36px; }
.c-detail-info__row dt { width: 90px; flex: 0 0 auto; font-size: var(--text-md); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); }
.c-detail-info__row dd { font-size: var(--text-lg); line-height: var(--lh-relaxed); }
@media (max-width: 1024px) { .c-detail-hero { flex-direction: column; align-items: stretch; } /* 세로 배치에서 flex-start 는 자식 폭을 내용물 크기로 줄인다 */ .c-detail-hero__poster { width: 100%; max-width: 521px; height: auto; aspect-ratio: 521 / 737; } .c-detail-info__row { align-items: flex-start; flex-direction: column; gap: var(--space-1); } }

/* 전시 구성(기획) Section (498:13590): 타임라인 3행, 번호 원 88 + 이미지 522.85×310 + 텍스트, gap55, 세로선 x=44 */
.c-composition { position: relative; display: flex; flex-direction: column; gap: 65px; }
.c-composition::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--composition-num) / 2); width: 1px; background: var(--color-line); }
.c-composition__item { position: relative; display: grid; grid-template-columns: var(--composition-num) var(--composition-img-w) minmax(0, 1fr); column-gap: var(--composition-gap); align-items: center; }
.c-composition__num { display: inline-flex; align-items: center; justify-content: center; width: var(--composition-num); height: var(--composition-num); border: var(--border-w) solid var(--color-primary); border-radius: 50%; background: var(--color-bg); font-size: var(--text-h6); font-weight: var(--font-weight-medium); color: var(--color-primary); }
.c-composition__media { height: var(--composition-img-h); overflow: hidden; background: var(--color-line); }
.c-composition__media img { width: 100%; height: 100%; object-fit: cover; }
.c-composition__body { display: flex; flex-direction: column; gap: var(--space-2); }
.c-composition__label { font-size: var(--text-label); font-weight: var(--font-weight-medium); line-height: normal; }
.c-composition__title { font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: normal; }
.c-composition__desc { padding-top: var(--space-4); font-size: var(--text-base); line-height: var(--lh-detail-para); color: var(--color-text-sub); }
@media (max-width: 1024px) { .c-composition::before { display: none; } .c-composition__item { grid-template-columns: 1fr; row-gap: var(--space-4); } .c-composition__num { width: 56px; height: 56px; font-size: var(--text-md); } .c-composition__media { height: auto; aspect-ratio: 522 / 310; } }

/* 이전/다음 전시 Container (498:13869): h120 bg #f8f9fb border-t, 화살표 42 */
.c-prevnext { background: var(--color-prevnext-bg); border-top: var(--border-w) solid var(--color-line); }
.c-prevnext__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--prevnext-h); }
.c-prevnext__link { display: inline-flex; flex: 1 1 0; align-items: center; gap: var(--space-6); min-width: 0; }
.c-prevnext__link > span:last-child { min-width: 0; }
.c-prevnext__link--next { flex-direction: row-reverse; text-align: right; }
.c-prevnext__btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--prevnext-btn); height: var(--prevnext-btn); border: var(--border-w) solid var(--color-line); }
.c-prevnext__btn .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-prevnext__label { display: block; font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-prevnext__title { display: block; margin-top: var(--space-1); font-size: var(--text-md); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-prevnext__link:hover .c-prevnext__title { text-decoration: underline; }

/* 04. 검색결과 (498:12675 / 498:12747 / 498:12714 / 498:12780) */
.c-search-page { display: flex; flex-direction: column; align-items: center; padding-top: var(--space-15); padding-bottom: var(--section-py-sm); }
.c-search-page .c-search-panel { width: var(--size-search-panel-w); }
.c-search-page .c-search-panel__form { margin-top: 0; }
/* 결과 분류 탭: 3등분, 활성 border-b 4px primary Bold 18 */
.c-search-tabs { display: flex; width: 100%; margin-top: var(--space-9); }
.c-search-tabs__item { flex: 1 1 0; }
.c-search-tabs__link { display: flex; align-items: center; justify-content: center; gap: var(--space-1); height: var(--search-tab-h); padding-block: 18px; font-size: var(--text-md); line-height: var(--lh-search-tab); color: var(--color-text-sub); border-bottom: var(--border-w) solid var(--color-line); }
.c-search-tabs__count { font-size: var(--text-md); line-height: 21px; }
.c-search-tabs__item.is-active .c-search-tabs__link { color: var(--color-primary); font-weight: var(--font-weight-bold); border-bottom: var(--search-tab-border) solid var(--color-primary); }
.c-search-summary { display: block; width: 100%; min-height: var(--search-summary-h); padding-block: calc((var(--search-summary-h) - var(--lh-search-summary)) / 2) 0; font-size: var(--text-xl); line-height: var(--lh-search-summary); color: var(--color-search-label); }
.c-search-summary strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.c-search-page .c-search-list { width: 100%; }
.c-search-page .c-search-list[hidden] { display: none; }
.c-search-empty, .c-list-empty { width: 100%; padding-block: var(--section-py); text-align: center; font-size: var(--text-md); color: var(--color-text-sub); border-top: var(--border-w) solid var(--color-line); border-bottom: var(--border-w) solid var(--color-line); }
/* 검색결과 타이틀 배너 바탕 (Figma #110c07 + 이미지 우측 배치) */
.c-page-title--search .c-page-title__bg { background: var(--color-search-title-dark); }

/* 05. Swiper 폴백 — CDN 미로드 시 슬라이드가 가로 나열/첫 장만 보이도록 */
.swiper { position: relative; overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex: 0 0 auto; }
.c-hero .swiper-slide { width: 100%; }
.c-exhibit-slider .swiper-wrapper { gap: var(--grid-gap-sm); }
.c-exhibit-slider .swiper-initialized .swiper-wrapper { gap: 0; }
.c-highlight__thumbs .swiper-wrapper { gap: var(--grid-gap); }
.c-highlight__thumbs .swiper-initialized .swiper-wrapper { gap: 0; }

/* 06. 전시관 소개: c-about-intro / c-greeting / c-visit-box / c-about-section /
c-reserve / c-notes / c-directions */
/* 소개 페이지 공통 상단 (Figma Main Content: pt64, 제목 40 Bold lh1.3 + 설명 18 lh1.8, 하단 46) */
.c-about-main { padding-top: var(--space-15); padding-bottom: var(--space-16); }
.c-about-intro { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: 46px; }
.c-about-intro__title { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--lh-snug); letter-spacing: -1px; }
.c-about-intro__title em { font-style: normal; color: var(--color-primary); }
.c-about-intro__desc { font-size: var(--text-md); line-height: var(--lh-para); color: var(--color-text-sub); }

/* 인사말 (498:12813): 사진 655×680 + 캡션 / 본문(상단 2px 라인, pt30) */
.c-greeting { display: flex; align-items: flex-start; gap: var(--about-col-gap); }
.c-greeting__figure { width: var(--about-figure-w); flex: 0 0 auto; margin: 0; }
.c-greeting__figure img { display: block; width: 100%; height: var(--about-figure-h); object-fit: cover; background: var(--color-line); }
.c-greeting__caption { padding-top: 14px; font-size: var(--text-sm); line-height: var(--lh-para); color: var(--color-text-sub); }
.c-greeting__article { flex: 1 1 0; min-width: 0; padding-top: 30px; padding-bottom: var(--about-article-pb); border-top: var(--border-w-thick) solid var(--color-text); }
.c-greeting__heading { font-size: var(--text-h5); font-weight: var(--font-weight-bold); line-height: var(--lh-normal); letter-spacing: -0.65px; }
.c-greeting__para { font-size: var(--text-md); line-height: var(--lh-para); letter-spacing: var(--letter-spacing); color: var(--color-text); } /* 2026-10-06 Figma 498:12821: 본문 Text/Normal, 문단 사이 여백 없음(줄바꿈). 자간은 body(16px) 계산값 -0.4 상속 대신 18px 기준 -0.45 재계산 */
.c-greeting__para--lead, .c-greeting__para--closing { margin-top: var(--space-7); }
.c-greeting__sign { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-7); padding-top: 25px; border-top: var(--border-w) solid var(--color-line); line-height: var(--lh-para); }
.c-greeting__sign strong { font-size: var(--text-md-plus); font-weight: var(--font-weight-bold); letter-spacing: -0.475px; } /* 498:12833: Bold 19 / lh 1.8 */

/* 관람안내 상단 박스 (498:12499): 사진 710 + 안내 6항목(관람안내 카드 항목 재사용) */
.c-visit-box { display: flex; align-items: stretch; min-height: var(--visit-box-h); }
.c-visit-box__media { position: relative; width: var(--visit-img-w); flex: 0 0 auto; overflow: hidden; background: var(--color-line); }
.c-visit-box__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 사진 고유 비율이 행 높이를 키우지 않도록 절대배치 */
.c-visit-box__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-8) var(--space-10); background: var(--color-primary-bg); }
.c-visit-box__title { font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.7px; }
.c-visit-box__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 소개 페이지 소제목 섹션 (pt48, 제목 22 Bold, 제목-내용 24) */
.c-about-section { padding-top: var(--space-12); }
.c-about-section__title { margin-bottom: var(--space-6); font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.55px; }

/* 관람 및 예약 (498:12556): 2열, 상단 2px, 각 열 px36 pt34 pb35 */
.c-reserve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-w-thick) solid var(--color-text); }
.c-reserve__item { display: flex; flex-direction: column; align-items: flex-start; min-height: var(--reserve-item-h); padding: var(--space-9) 36px 35px; border-bottom: var(--border-w) solid var(--color-line); }
.c-reserve__item + .c-reserve__item { border-left: var(--border-w) solid var(--color-line); }
.c-reserve__head { display: flex; align-items: center; gap: 17px; }
.c-reserve__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--reserve-icon); height: var(--reserve-icon); background: var(--color-badge-bg-bright); color: var(--color-primary); }
.c-reserve__icon .c-icon { width: var(--reserve-icon-inner); height: var(--reserve-icon-inner); }
.c-reserve__title { padding-bottom: 5px; font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-reserve__tag { display: inline-block; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); line-height: var(--lh-relaxed); background: var(--color-badge-bg-gray); }
.c-reserve__tag--blue { background: var(--color-badge-bg-bright); color: var(--color-primary); }
.c-reserve__desc { margin-top: var(--space-5); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-reserve__dl { display: grid; grid-template-columns: var(--dl-term-w) minmax(0, 1fr); column-gap: var(--space-3); row-gap: 14px; margin: var(--space-6) 0 var(--space-7); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-reserve__dl dt { color: var(--color-badge-text-gray); }
.c-reserve__dl dd { color: var(--color-text); }

/* 관람 시 유의사항 (498:12627): 4열 카드, 1px 외곽선 */
.c-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--border-w) solid var(--color-line); }
.c-notes__item { padding: 27px var(--space-7); }
.c-notes__item + .c-notes__item { border-left: var(--border-w) solid var(--color-line); }
.c-notes__num { font-size: var(--text-sm); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); color: var(--color-primary); }
.c-notes__title { margin-top: var(--space-5); font-size: var(--text-md-plus); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-notes__desc { margin-top: var(--space-1); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }

/* 오시는 길 (498:16069 프로토타입: pt40 pb80, 제목-내용 36) */
.c-directions { margin-top: 36px; padding: var(--space-10) 0 var(--space-16); } /* 앞 섹션과 36 (Figma 오시는길 인스턴스 y) */
.c-directions__title { margin-bottom: 36px; font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-tight); letter-spacing: -0.55px; }
.c-directions__addr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-4); padding: var(--space-8) 36px; background: var(--color-primary-bg); border-top: var(--border-w-thick) solid var(--color-text); }
.c-directions__name { font-size: var(--text-search-title); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.625px; }
.c-directions__text { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-directions__btns { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.c-tab--flat { border-top: 0; } /* 오시는길 탭: 하단 선만 */
.c-directions__row { display: flex; align-items: flex-start; padding: var(--space-10) 0; border-bottom: var(--border-w) solid var(--color-line); }
.c-directions__label { width: var(--dir-label-w); flex: 0 0 auto; font-size: var(--text-h7); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.525px; }
.c-directions__content { flex: 1 1 0; min-width: 0; font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-directions__content h4 { font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text); }
.c-directions__content h4 + h4, .c-directions__content p + h4 { margin-top: 22px; }
.c-directions__content .c-directions__note { margin-top: var(--space-2); font-size: var(--text-sm); }
.c-directions__stop { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text); }
.c-directions__line { display: inline-flex; align-items: center; height: 28px; padding-inline: 9px; font-size: var(--text-sm); font-weight: var(--font-weight-regular); line-height: var(--lh-relaxed); color: var(--color-white); background: var(--color-subway-2); }
@media (max-width: 1024px) {
    .c-greeting { flex-direction: column; gap: var(--space-10); }
    .c-greeting__figure { width: 100%; }
    .c-greeting__figure img { height: auto; aspect-ratio: 655 / 680; }
    .c-visit-box { flex-direction: column; }
    .c-visit-box { min-height: 0; }
    .c-visit-box__media { width: 100%; aspect-ratio: 710 / 444; }
    .c-reserve, .c-notes { grid-template-columns: 1fr; }
    .c-reserve__item + .c-reserve__item, .c-notes__item + .c-notes__item { border-left: 0; }
    .c-notes__item + .c-notes__item { border-top: var(--border-w) solid var(--color-line); }
    .c-directions__addr { flex-direction: column; align-items: flex-start; }
    .c-directions__row { flex-direction: column; gap: var(--space-3); }
}
@media (max-width: 767px) {
    .c-visit-box__grid { grid-template-columns: 1fr; }
    .c-reserve__dl { grid-template-columns: 1fr; row-gap: var(--space-1); }
    .c-reserve__dl dd { margin-bottom: var(--space-2); }
}

/* 07. 전시관 소개 목록형: c-filter-bar / c-faq / c-board / c-post */
/* 필터 바 (FAQ 498:12973 / 소식 498:12846): 카테고리 버튼(48) + 검색 폼(360+47), 아래 "총 N건" */
.c-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.c-filter-count { margin-top: var(--space-4); font-size: var(--text-md); line-height: var(--lh-body-lg); }
.c-filter-count strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }

/* FAQ 아코디언 (498:12988): 행 88 p24 gap10, 열림 시 질문 SemiBold primary + 답변(primary-bg, px60 py24) */
.c-faq { margin-top: var(--space-5); border-top: var(--border-w) solid var(--color-line); }
.c-faq__item { border-bottom: var(--border-w) solid var(--color-line); }
.c-faq__item[hidden] { display: none; }
.c-faq__q { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--faq-row-h); padding: var(--space-6); text-align: left; color: var(--color-text); }
.c-faq__mark { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--lh-normal); color: var(--color-primary); }
.c-faq__cat { width: var(--faq-cat-w); flex: 0 0 auto; }
.c-faq__badge { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: var(--space-1) 10px; font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: normal; background: var(--color-bg-blue); color: var(--color-primary); }
.c-faq__badge--reserve { background: var(--color-faq-reserve-bg); color: var(--color-faq-reserve); }
.c-faq__badge--program { background: var(--color-faq-program-bg); color: var(--color-faq-program); }
.c-faq__badge--traffic { background: var(--color-faq-traffic-bg); color: var(--color-faq-traffic); }
.c-faq__title { flex: 1 1 0; min-width: 0; font-size: var(--text-md); line-height: var(--lh-normal); }
.c-faq__arrow { display: inline-flex; flex: 0 0 auto; width: var(--space-6); height: var(--space-6); align-items: center; justify-content: center; }
.c-faq__arrow .c-icon { width: var(--space-6); height: var(--space-6); transition: transform var(--dur-fast) var(--ease); }
.c-faq__item.is-open .c-faq__title { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.c-faq__item.is-open .c-faq__arrow .c-icon { transform: rotate(180deg); }
.c-faq__a { display: none; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) var(--faq-answer-px); background: var(--color-primary-bg); border-top: var(--border-w) solid var(--color-line); }
.c-faq__item.is-open .c-faq__a { display: flex; }
.c-faq__a-mark { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: calc(var(--text-base) * var(--lh-normal)); color: var(--color-text-sub); } /* 답변 첫 줄(16 × 1.4 = 22.4) 높이 박스에 가운데 정렬 */
.c-faq__a-text { flex: 1 1 0; min-width: 0; font-size: var(--text-base); line-height: var(--lh-normal); }

/* 게시판 목록 (498:12862): 상단 2px, 머리행 56 primary-bg 14 Medium, 행 76, 열 120/120/1fr/160 px20 */
.c-board { margin-top: var(--space-5); border-top: var(--border-w-thick) solid var(--color-text); }
.c-board__head, .c-board__row { display: flex; align-items: center; border-bottom: var(--border-w) solid var(--color-line); }
.c-board__head { min-height: var(--board-head-h); background: var(--color-primary-bg); font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-board__row { min-height: var(--board-row-h); color: var(--color-text); }
.c-board__row:hover .c-board__col--title { text-decoration: underline; }
.c-board__col { padding-inline: var(--space-5); text-align: center; font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.c-board__col--num { width: var(--board-col-num); flex: 0 0 auto; color: var(--color-badge-text-gray); }
.c-board__col--cat { width: var(--board-col-num); flex: 0 0 auto; }
.c-board__col--title { flex: 1 1 0; min-width: 0; text-align: left; font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-board__head .c-board__col--title { text-align: center; font-size: var(--text-sm); }
.c-board__col--date { width: var(--board-col-date); flex: 0 0 auto; color: var(--color-text-sub); }
.c-board + .c-pagination { margin-top: var(--space-5); }

/* 게시글 상세 (498:13091): 목록으로(109) → 제목 블록(pb24) → 본문(py48, 16 lh1.8) → 다음 글(60) */
.c-post { padding-bottom: var(--space-16); }
.c-post__head { padding-bottom: var(--space-6); border-bottom: var(--border-w) solid var(--color-line); }
.c-post__title { margin-top: var(--space-4); font-size: var(--text-h6); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.6px; }
.c-post__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-post__meta span + span::before { content: ""; display: inline-block; width: var(--border-w); height: 11.5px; margin-right: var(--space-2); vertical-align: middle; background: var(--color-line); }
.c-post__body { padding: var(--space-12) 0; border-bottom: var(--border-w) solid var(--color-line); font-size: var(--text-base); line-height: var(--lh-para); }
.c-post__body p + p { margin-top: 0; }
.c-post__attachments { margin-block: var(--space-8); }
.c-post__attachments-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.c-post__attachments-head h3 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); }
.c-post__attachments-count { padding: 2px 8px; background: var(--color-primary-bg); color: var(--color-primary); font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.c-post__attachment-list { border: var(--border-w) solid var(--color-line); background: var(--color-primary-bg); }
.c-post__attachment-list li + li { border-top: var(--border-w) solid var(--color-line); }
.c-post__attachment { display: flex; align-items: center; gap: var(--space-4); min-height: 88px; padding: var(--space-4) var(--space-6); transition: background-color var(--dur-fast) var(--ease); }
.c-post__attachment:hover { background: var(--color-bg-blue); }
.c-post__attachment:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.c-post__attachment-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 auto; background: var(--color-bg); color: var(--color-primary); }
.c-post__attachment-icon .c-icon { width: 32px; height: 32px; }
.c-post__attachment-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-post__attachment-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding-inline: var(--space-3); flex: 0 0 auto; border: var(--border-w) solid var(--color-primary); background: var(--color-bg); color: var(--color-primary); font-size: var(--text-sm); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.c-post__attachment-action .c-icon { width: 18px; height: 18px; }
.c-post__attachment:hover .c-post__attachment-action { background: var(--color-primary); color: var(--color-white); }
@media (max-width: 767px) {
    .c-post__attachments { margin-block: var(--space-6); }
    .c-post__attachment { gap: var(--space-3); min-height: 76px; padding: var(--space-4); }
    .c-post__attachment-icon { width: 40px; height: 40px; }
    .c-post__attachment-icon .c-icon { width: 28px; height: 28px; }
    .c-post__attachment-action { width: 40px; padding-inline: 0; }
    .c-post__attachment-action-label { display: none; }
}
.c-post__nav { display: flex; align-items: center; min-height: var(--post-nav-h); border-bottom: var(--border-w) solid var(--color-line); }
.c-post__nav-label { width: var(--board-col-num); flex: 0 0 auto; font-size: var(--text-sm); color: var(--color-badge-text-gray); }
.c-post__nav-title { padding-inline: var(--space-5); font-size: var(--text-base); line-height: var(--lh-relaxed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-post__nav-title:hover { text-decoration: underline; }
@media (max-width: 1024px) {
    .c-filter-bar { flex-direction: column; align-items: stretch; }
    .c-filter-bar .c-tab-btns { flex-wrap: wrap; }
    .c-filter-bar .c-form-search { justify-content: flex-end; }
    .c-faq__q { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4); }
    .c-faq__cat { width: auto; }
    .c-faq__title { flex-basis: 100%; }
    .c-faq__a { padding-inline: var(--space-4); }
    .c-board__col--num, .c-board__col--cat { width: 72px; }
    .c-board__col--date { width: 110px; }
}
@media (max-width: 767px) {
    .c-filter-bar .c-form-search { width: 100%; }
    .c-filter-bar .c-form-search__input { flex: 1 1 0; width: auto; min-width: 0; }
    .c-board__head { display: none; }
    .c-board__row { flex-wrap: wrap; padding: var(--space-4) 0; }
    .c-board__col--num { display: none; }
    .c-board__col--title { flex-basis: 100%; order: -1; white-space: normal; }
}

/* 08. 기증·후원 (498:15163 기증 / 578:10300 후원): c-donate / c-notes--icon / c-guide-rows / c-check-row / c-cta-banner */
.c-donate { padding-top: var(--space-15); padding-bottom: var(--space-16); }
.c-donate .c-tab--flat { margin-bottom: var(--space-10); }
.c-donate__main { display: flex; flex-direction: column; gap: var(--space-12); }
.c-donate__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.c-donate__title { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--lh-snug); letter-spacing: -1px; }
.c-donate__lead { font-size: var(--text-lg); line-height: var(--lh-loose); letter-spacing: -0.5px; }
/* 카드 격자 아이콘형 (수집 대상 4열 / 후원 가치 3열): c-notes 재사용 + 아이콘 32 */
.c-notes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-notes__icon { display: block; width: var(--reserve-icon-inner); height: var(--reserve-icon-inner); color: var(--color-primary); }
.c-notes__icon + .c-notes__title { margin-top: var(--space-4); }
.c-notes--icon .c-notes__desc { margin-top: 9px; }
/* 안내 행 (주요 기록물 관리 안내 / 후원 참여 안내): 제목 260 + 행 목록 1110, 아래 36 + 선 */
.c-guide-rows { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 50px; padding-bottom: 36px; border-bottom: var(--border-w) solid var(--color-line); }
.c-guide-rows__title { font-size: 23px; font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.575px; }
.c-guide-rows__item { display: flex; gap: 35px; padding-bottom: var(--space-4); border-bottom: var(--border-w) solid var(--color-line); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-guide-rows__item + .c-guide-rows__item { margin-top: var(--space-4); }
.c-guide-rows__item dt { min-width: 120px; flex: 0 0 auto; font-weight: var(--font-weight-semibold); }
.c-guide-rows__item dd { color: var(--color-text-sub); }
/* 확인 행 (기증/후원 전 확인해 주세요): 제목 200 + 본문, 아래 48 + 선 */
.c-check-row { display: flex; align-items: flex-start; gap: 30px; padding-bottom: var(--space-12); border-bottom: var(--border-w) solid var(--color-line); }
.c-check-row__label { width: 200px; flex: 0 0 auto; font-size: var(--text-h7); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.525px; }
.c-check-row__text { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-check-row--list { gap: 50px; padding-bottom: var(--space-12); }                                   /* 후원 '세제 혜택 및 사용 문의' (578:10682): 제목 260 + 50 간격, 하단 48 */
.c-check-row--list .c-check-row__label { width: 260px; font-size: 21px; letter-spacing: -0.525px; }
.c-check-row__list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
/* CTA 배너: 로고 네이비 배경, 장식 원·방사선(흰색 10%) */
.c-cta-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: 35px var(--space-10); overflow: hidden; background: var(--color-logo-navy); color: var(--color-white); }
.c-cta-banner__text { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--space-2); line-height: var(--lh-relaxed); }
.c-cta-banner__title { font-size: var(--text-h5); font-weight: var(--font-weight-bold); letter-spacing: -0.65px; }
.c-cta-banner__desc { font-size: var(--text-base); opacity: 0.8; }
.c-cta-banner .c-btn { position: relative; z-index: var(--z-raised); flex: 0 0 auto; }
.c-cta-banner__deco { position: absolute; pointer-events: none; }
.c-cta-banner__deco--circles { left: 1014px; top: 69.84px; width: 235px; height: 235px; }
.c-cta-banner__deco--rays { left: 662px; top: -72.16px; width: 204px; height: 204px; }
@media (max-width: 1024px) {
    .c-notes--3 { grid-template-columns: 1fr; }
    .c-guide-rows { grid-template-columns: 1fr; row-gap: var(--space-4); }
    .c-check-row { flex-direction: column; gap: var(--space-2); }
    .c-check-row__label { width: auto; }
    .c-check-row--list .c-check-row__label { width: auto; }
    .c-cta-banner { flex-direction: column; align-items: flex-start; }
    .c-cta-banner__deco--circles { left: auto; right: -60px; }
}

/* 09. 프로그램 — 관람예약 안내 / 캘린더: c-prog / c-notice-box / c-reserve-guide / c-steps / c-rule-rows / c-cal / c-day-list */
.c-prog { padding-top: var(--space-10); padding-bottom: var(--space-16); }           /* Section:margin: 탭 pt40, 하단 80 */
.c-prog .c-tab--flat { margin-bottom: 36px; }
.c-prog--filter { padding-top: var(--space-15); }                                     /* 캘린더: 필터 바 pt64 */
.c-prog--filter .c-filter-bar { margin-bottom: 36px; }
.c-btn--with-icon { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-btn--with-icon .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.c-icon-btn--square { border-radius: var(--radius-none); border-color: var(--color-line); }   /* Arrow_btn Black 48 (사각) */
/* 안내 박스 (498:12144) */
.c-notice-box { margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6); background: var(--color-bg-blue); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-notice-box strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
/* 단체 관람 안내 2열 (578:10797): 상단 2px, 좌 정보(px34 pt34 pb35) / 우 신청 안내(bg-blue px34 py30) */
.c-reserve-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-w-thick) solid var(--color-text); }
.c-reserve-guide__info { padding: var(--space-9) var(--space-9) 35px; border-bottom: var(--border-w) solid var(--color-line); }
.c-reserve-guide__head { display: flex; align-items: center; gap: var(--space-3); }
.c-reserve-guide__title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-reserve-guide__info .c-reserve__dl { margin: var(--space-6) 0 var(--space-7); }
.c-reserve-guide__mail { padding: 30px var(--space-9); background: var(--color-bg-blue); }
.c-reserve-guide__mail h3 { font-size: var(--text-h7); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-reserve-guide__mail > p { padding-top: var(--space-2); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-reserve-guide__mail .c-btn--with-icon { margin-top: 22px; }
.c-mail-box { margin-top: 22px; padding-top: var(--space-5); border-top: var(--border-w) solid var(--color-line); }
.c-mail-box__label { padding-top: 6px; font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-mail-box__row { display: flex; align-items: center; gap: var(--space-2); }
.c-mail-box__addr { font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); color: var(--color-primary); }
.c-mail-box__copy { height: var(--size-icon-xl); padding-inline: var(--space-4); font-size: var(--text-sm); }
.c-mail-box__status { padding-top: 6px; font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
/* 예약 절차 (498:12220): c-notes 4열 + 열 경계 원형 화살표 26 */
.c-steps { position: relative; }
.c-steps .c-notes__title { margin-top: var(--space-4); }
.c-steps .c-notes__desc { margin-top: 9px; }
.c-steps__arrow { position: absolute; top: 50%; z-index: var(--z-raised); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: var(--border-w) solid var(--color-line); border-radius: 50%; background: var(--color-bg); color: var(--color-text); }
.c-steps__arrow .c-icon { width: 14px; height: 14px; }
.c-steps__arrow--1 { left: 25%; } .c-steps__arrow--2 { left: 50%; } .c-steps__arrow--3 { left: 75%; }
/* 규칙 행 (498:12265): 첫 행 상단 2px, py30, 제목 200 + 불릿 목록 */
.c-rule-rows { margin-top: var(--space-12); }
.c-rule-rows__link { display: flex; align-items: center; gap: var(--space-1); width: max-content; max-width: 100%; margin-top: var(--space-1); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); color: var(--color-primary); text-decoration: underline; text-underline-position: from-font; } /* 항목 안 외부 링크 (Figma text_btn 840:16939: 16 SemiBold primary 밑줄 + 바로가기 18) */
.c-rule-rows__link .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: 0 0 auto; }
.c-rule-row { display: flex; align-items: flex-start; gap: 30px; padding: 30px 0; border-top: var(--border-w) solid var(--color-line); }
.c-rule-row:first-child { border-top: var(--border-w-thick) solid var(--color-text); }
.c-rule-row:last-child { border-bottom: var(--border-w) solid var(--color-line); }
.c-rule-row__label { width: var(--rule-label-w); flex: 0 0 auto; font-size: var(--text-h7); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.525px; }
.c-rule-row__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-bullet { position: relative; padding-left: var(--space-4); }
.c-bullet::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.c-rule-row__example { padding: var(--space-4) var(--space-5); background: var(--color-bg-blue); }
.c-rule-row__example strong { font-weight: var(--font-weight-semibold); }
.c-prog__note { padding-top: var(--space-5); font-size: var(--text-base); line-height: var(--lh-para); color: var(--color-text-sub); } /* 글자 크기16px. */
.c-prog__note strong { font-weight: var(--font-weight-semibold); color: var(--color-text); }
/* 캘린더 (565:10192 / 498:13137) */
.c-cal__toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.c-cal__nav { display: flex; align-items: center; gap: 13px; }
.c-cal__month { min-width: 128px; text-align: center; font-size: 23px; font-weight: var(--font-weight-extrabold); line-height: normal; letter-spacing: -0.575px; }
.c-cal__legend { display: flex; align-items: center; gap: 18px; font-size: var(--text-sm); line-height: normal; }
.c-cal__legend span { display: inline-flex; align-items: center; gap: 7px; }
.c-cal__legend span::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--dot, var(--color-cal-general)); }
.c-cal__grid { border: var(--border-w) solid var(--color-line); }
.c-cal__head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 42px; border-bottom: var(--border-w) solid var(--color-line); background: var(--color-primary-bg); font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: normal; }
.c-cal__head span { display: flex; align-items: center; justify-content: center; }
.c-cal__head span:first-child { color: var(--color-cal-holiday); }
.c-cal__head span:last-child { color: var(--color-primary); }
.c-cal__body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.c-cal__cell { display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--cal-cell-min); padding: var(--space-2) var(--space-2) 10px; border-right: var(--border-w) solid var(--color-line); border-bottom: var(--border-w) solid var(--color-line); text-align: left; background: var(--color-bg); color: var(--color-text); }
.c-cal__cell:nth-child(7n) { border-right: 0; }
.c-cal__cell:nth-last-child(-n+7) { border-bottom: 0; }
.c-cal__cell--other { background: var(--color-cal-other-bg); color: var(--color-text-alt); }
.c-cal__cell--sun .c-cal__day { color: var(--color-cal-holiday); }
.c-cal__cell--sat .c-cal__day { color: var(--color-primary); }
.c-cal__cell.is-selected { background: var(--color-bg-blue); box-shadow: inset 0 0 0 var(--border-w-thick) var(--color-primary); }
.c-cal__cell:focus-visible { outline-offset: calc(-1 * var(--border-w-thick)); } /* 키보드 포커스 외곽선을 셀 안쪽 2px 로 → 선택 테두리(inset box-shadow)와 겹쳐 박스가 두 겹으로 보이지 않음 */
.c-cal__day { display: flex; align-items: center; justify-content: center; width: var(--cal-day); height: var(--cal-day); font-size: var(--text-label); line-height: normal; }
.c-cal__cell.is-today .c-cal__day { background: var(--color-primary); color: var(--color-white); font-weight: var(--font-weight-extrabold); }
.c-cal__events { display: flex; flex-direction: column; gap: 6px; width: 100%; padding-top: var(--space-1); }
.c-cal__event { display: block; height: var(--cal-event-h); padding-inline: 7px; font-size: var(--text-label); font-weight: var(--font-weight-semibold); line-height: var(--cal-event-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: var(--border-w-thick) solid currentColor; color: var(--color-cal-general); background: var(--color-cal-general-bg); } /* 기본(일반) = 빨강 (Figma 498:13206) */
.c-cal__event--group { color: var(--color-cal-group); background: var(--color-cal-group-bg); }
.c-cal__event--exhibit { color: var(--color-primary); background: var(--color-cal-exhibit-bg); }
.c-cal__event--program { color: var(--color-faq-program); background: var(--color-faq-program-bg); }
/* 선택일 일정 목록 (578:11702 / 498:13363) */
.c-day-list { margin-top: 36px; }
.c-day-list__head { display: flex; align-items: center; justify-content: space-between; height: 87px; border-bottom: var(--border-w-thick) solid var(--color-text); }
.c-day-list__title { font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.7px; }
.c-day-list__count { font-size: var(--text-lg); line-height: var(--lh-body-lg); }
.c-day-list__count strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.c-day-list__item { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-8) 0; border-bottom: var(--border-w) solid var(--color-line); }
.c-day-list__tag { width: 72px; flex: 0 0 auto; }
.c-tag-type { display: inline-flex; align-items: center; height: var(--size-badge); padding-inline: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); white-space: nowrap; color: var(--color-cal-group); background: var(--color-cal-group-bg); }
.c-tag-type--exhibit { color: var(--color-primary); background: var(--color-cal-exhibit-bg); }
.c-tag-type--program { color: var(--color-faq-program); background: var(--color-faq-program-bg); }
.c-tag-type--general { color: var(--color-cal-general); background: var(--color-cal-general-bg); } /* 캘린더 일반 일정과 같은 색을 사용한다. */
.c-day-list__body { flex: 1 1 0; min-width: 0; }
.c-day-list__body .c-badge-group { margin-bottom: var(--space-2); }
.c-day-list__name { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-day-list__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-day-list__meta li { display: inline-flex; align-items: flex-start; gap: var(--space-1); min-width: 0; max-width: 100%; }
.c-day-list__meta li span { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-day-list__meta .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); flex-shrink: 0; }
.c-day-list__btn { flex: 0 0 auto; }
.c-day-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: 30px; padding: 27px 30px; border: var(--border-w) solid var(--color-line); }
.c-day-cta__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-day-cta__desc { padding-top: 6px; font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
@media (max-width: 1024px) {
    .c-reserve-guide { grid-template-columns: 1fr; }
    .c-steps__arrow { display: none; }
    .c-rule-row { flex-direction: column; gap: var(--space-2); }
    .c-rule-row__label { width: auto; }
    .c-cal__toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .c-cal__cell { min-height: 110px; }
    .c-cal__event { padding-inline: 4px; font-size: 11px; }
    .c-day-list__item { flex-wrap: wrap; gap: var(--space-3); }
    .c-day-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
    .c-cal__cell { min-height: 72px; padding: 4px; }
    .c-cal__events { gap: 3px; }
    .c-cal__event { height: 6px; padding: 0; font-size: 0; line-height: 0; border-left: 0; } /* 모바일: 일정을 색 막대로만 표시 */
}

/* 10. 프로그램 — 목록 (498:13431) / 상세 (498:13883): c-program-list / c-program-card / c-program-hero / c-prog-section */
.c-program-list { margin-top: 17px; padding-top: var(--space-8); border-top: var(--border-w) solid var(--color-line); }
.c-program-list[hidden] { display: none; }
.c-program-grid { display: grid; grid-template-columns: repeat(3, var(--program-card-w)); column-gap: var(--program-card-gap); row-gap: var(--space-8); }
.c-program-grid + .c-pagination { margin-top: var(--space-8); }
@media (max-width: 1419px) { .c-program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); } } /* 컨테이너 90% 구간: 카드 고정 437 → 3열 유동 */
/* Program_card (554:22600): 포스터 438.67/625 + 배지(32) + 제목 22 + 정의목록 18 */
.c-program-card { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.c-program-card__thumb { display: block; aspect-ratio: 438.67 / 625; overflow: hidden; background: var(--color-line); }
.c-program-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-program-card__body { padding-top: var(--space-5); }
.c-program-card__title { margin-top: var(--space-3); font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.55px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-program-card__title a:hover { text-decoration: underline; }
.c-program-card__dl { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.c-program-card__dl div { display: flex; gap: var(--space-3); }
.c-program-card__dl dt { color: var(--color-text-sub); flex-shrink: 0; }
.c-program-card__dl dd { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 상세 화면은 긴 제목·장소를 생략하지 않고 본문 폭 안에서 줄바꿈한다. */
.c-detail-hero__title, .c-detail-hero__subtitle, .c-post__title,
.c-faq__title, .c-detail-info__row dd, .c-online-view__title { overflow-wrap: anywhere; }
.c-news-card__item-text { flex: 1 1 0; }
/* 상세 상단 (498:13896): 기획전시 상세 hero 재사용 + 42 배지 3종 + 정보박스 '신청 방법' 다중행 */
.c-program-hero .c-detail-hero__title { margin-top: var(--space-2); } /* 배지 42 → 제목 28 (head gap 20 + 8) */
.c-badge--lg-line { height: var(--size-badge-lg); background: var(--color-bg); color: var(--color-text); border-color: var(--color-text); }
.c-detail-info__row--multi { align-items: flex-start; }
.c-detail-info__row--multi dt { line-height: var(--lh-body-lg); }
.c-detail-info__apply { display: flex; flex-direction: column; gap: 6px; }
.c-detail-info__apply > p { font-size: var(--text-lg); line-height: var(--lh-loose); }
.c-detail-info__example { font-size: var(--text-md) !important; line-height: var(--lh-relaxed) !important; color: var(--color-text-sub); }
.c-detail-info__example strong { font-weight: var(--font-weight-semibold); }
.c-detail-info__mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: 15px 0 var(--space-2); }
.c-detail-info__row dd { min-width: 0; overflow-wrap: anywhere; } /* 좁은 폭에서 신청 안내·이메일 행이 카드 밖으로 넘치지 않도록 */
.c-detail-info__mail strong { font-size: var(--text-h7); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); color: var(--color-primary); }
.c-detail-info__mail .c-btn { height: 40px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.c-program-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: calc(var(--space-5) - var(--space-10)); } /* 정보박스와 20 (content gap 40 보정) */
.c-program-hero__note { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
/* 상세 본문 섹션 (498:13954 / 498:13991): 제목 40(lh60) + 내용, 상하 60 */
.c-prog-section { padding: 60px 0; }
.c-prog-section + .c-prog-section { padding-top: 60px; }
.c-prog-section__title { margin-bottom: 30px; font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -1px; }
.c-prog-section__subtitle { font-size: var(--text-h6); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); letter-spacing: -0.6px; }
.c-prog-section__desc { margin-top: var(--space-2); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-prog-section__list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: 30px; font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-prog-section__list--lg { margin-top: 0; font-size: var(--text-md); }
.c-prog-section__list--lg .c-bullet::before { top: 11.5px; }
.c-materials--full .c-download-card { width: 100%; }
@media (max-width: 1024px) {
    .c-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
    .c-detail-info__row--multi { flex-direction: column; }
}
@media (max-width: 767px) { .c-program-grid { grid-template-columns: 1fr; } }
.c-section-related__empty { padding: var(--space-16) 0; text-align: center; font-size: var(--text-md); color: var(--color-text-sub); } /* 연계 자료 없음 안내 */

/* 모바일 페이지 규칙 — 767px 이하 (Figma 375 프레임) */
@media (max-width: 767px) {
    /* 01 메인 배너 (663:12576): 590h, 헤드카피 top337 28/1.3, 설명 16, 컨트롤 하단 18 좌우 20 */
    .c-hero { height: min(520px, 72vh); height: min(520px, 72svh); min-height: 380px; }
    .c-hero__inner { gap: var(--hero-copy-gap); padding-top: var(--size-header); padding-bottom: 72px; }
    .c-hero__title { font-size: var(--text-hero); line-height: var(--lh-snug); }
    .c-hero__desc { width: 100%; font-size: var(--text-base); }
    .c-hero__ctrl { left: var(--l-gutter); right: var(--l-gutter); bottom: 18px; justify-content: space-between; gap: var(--space-2); }
    /* 관람정보 바 (663:12691): py16, 시간·관람료 한 줄 14 gap12, 버튼 2개 균등 */
    .c-info-bar__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); min-height: 0; padding-block: var(--space-4); }
    .c-info-bar__items { flex-wrap: wrap; gap: var(--space-3); min-height: var(--space-7); }
    .c-info-bar__divider { display: none; }
    .c-info-bar__item { font-size: var(--text-sm); gap: var(--space-1); }
    .c-info-bar__item .c-icon { width: var(--size-icon-md); height: 1lh; }
    .c-info-bar__actions { gap: var(--space-3); }
    .c-info-bar__actions .c-btn { flex: 1 1 0; height: auto; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
    /* 통합검색 (663:12766): py40 gap20, 입력 py16 15px, 태그 pt16 */
    .c-search-section__inner { gap: var(--space-5); padding-block: var(--section-py); }
    .c-search-section__title { line-height: var(--lh-tight); }
    .c-search-hero__input { font-size: var(--text-sm-plus); }
    .c-search-hero__tags { padding-top: var(--space-4); }
    /* 전시 (663:12868): 카드 4장 세로 나열 + 화살표 2개 하단 우측 */
    .c-exhibit-slider { padding-block: var(--section-py); }
    .c-exhibit-slider .l-container { display: flex; flex-direction: column; }
    .c-exhibit-slider__head { display: contents; }
    .c-exhibit-slider__head .c-section-head { margin-bottom: var(--section-body-gap); }
    .c-exhibit-slider__nav { order: 3; align-self: flex-end; margin-top: var(--space-6); }
    .c-exhibit-slider .swiper { overflow: visible; }
    .c-exhibit-slider .swiper-wrapper, .c-exhibit-slider .swiper-initialized .swiper-wrapper { flex-direction: column; gap: var(--space-8); transform: none !important; }
    .c-exhibit-slider .swiper-slide { width: 100%; }
    /* 프로그램 (663:12974): 카드 4장 세로 + 「전체 프로그램 보기」 48h 전체 폭 하단 */
    .c-program-section .l-container { display: flex; flex-direction: column; }
    .c-program-section__head { display: contents; }
    .c-program-section__head .c-section-head { margin-bottom: var(--section-body-gap); }
    .c-program-section__head > .c-btn { order: 3; width: 100%; height: var(--size-btn-md); margin-top: var(--space-6); }
    .c-program-section__grid { gap: var(--space-6); }
    .c-program-section__list { gap: var(--space-6); }
    /* 소식·관람안내 (686:14875): 카드 p20, 항목 아이콘 44 */
    .c-noti-section__grid { gap: var(--space-6); }
    .c-news-card__title, .c-guide-card__title { font-size: 20px; }
    /* 소식 카드 (686:14881): 제목·설명 → 목록(날짜 / 제목 2줄, 화살표 없음) → 「전체 보기」 44h 전체 폭 */
    .c-news-card__head { display: contents; }
    .c-news-card__head > .c-btn { order: 9; width: 100%; height: 44px; margin-top: var(--space-4); }
    .c-news-card__item { align-items: flex-start; min-height: 0; padding-block: var(--space-4); }
    .c-news-card__item-text { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .c-news-card__subject { white-space: normal; }
    .c-news-card__arrow { display: none; }
    .c-guide-card__item { min-height: var(--card-guide-item-h); }
    .c-news-card__desc { font-size: var(--text-sm); }
    /* 온라인 관람 (686:15025): 패널 p20/24 */
    .c-online-view__panel { flex: 0 0 auto; padding: var(--space-8) var(--space-5); }
    .c-online-view__title { font-size: var(--text-h2); }
    .c-online-view__desc { font-size: var(--text-h7); }
    .c-online-view__title + .c-online-view__desc { margin-top: var(--space-2); }
    /* 02 전시 공통 — 전시 구성 (686:27951): 번호 40 Regular, gap 16, 항목 pb40, 부제 16, 본문 14/1.6 */
    .c-story { gap: var(--space-6); }
    .c-story__item, .c-story__item--reverse { gap: var(--space-4); padding-block: 0 var(--space-10); }
    .c-story__media, .c-story__body { flex: 0 0 auto; }
    .c-story__body { gap: 0; }
    .c-story__num { font-size: var(--text-display); font-weight: var(--font-weight-regular); line-height: var(--lh-relaxed); }
    .c-story__text { gap: var(--space-3); max-width: none; }
    .c-story__subtitle { font-size: var(--text-base); }
    .c-story__desc { font-size: var(--text-sm); line-height: var(--lh-loose); }
    .c-story__item:last-child .c-story__desc { font-size: var(--text-base); }
    .c-story .c-section-head__desc, #sec-highlight .c-section-head__desc { font-size: var(--text-h7); line-height: var(--lh-normal); }
    /* 하이라이트 (686:28010): 대형 3:2, 썸네일 3열 gap12 100h, 화살표 38 중앙 하단 */
    .c-highlight { gap: var(--space-3); padding-bottom: calc(var(--size-icon-2xl) + var(--space-6)); }
    .c-highlight__main { height: auto; aspect-ratio: var(--highlight-mobile-ratio); }
    .c-highlight__caption { left: var(--space-5); bottom: var(--space-5); font-size: var(--text-h7); }
    .c-highlight__thumbs .swiper-slide { width: calc((100% - var(--space-2) * 2) / 3); height: var(--highlight-thumb-h); }
    .c-highlight__thumbs .swiper:not(.swiper-initialized) .swiper-wrapper { gap: var(--space-2); }
    /* 하단 컨트롤 (767:17156): 이전 38 · "1 / 3" · 다음 38 을 가운데 정렬, 간격 20 */
    .c-highlight__ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
    .c-highlight__nav { position: static; transform: none; }
    .c-highlight__count { display: block; font-size: var(--text-base); line-height: var(--lh-normal); color: var(--color-text); white-space: nowrap; }
    #sec-highlight .l-section__head { margin-bottom: var(--space-8); }
    .c-highlight { padding-bottom: calc(var(--size-icon-2xl) + var(--space-8)); }
    #sec-materials .c-section-head__desc { font-size: var(--text-h7); line-height: var(--lh-material-desc); }
    #sec-materials .l-section__head { margin-bottom: var(--space-10); }
    .c-materials { gap: var(--space-3); }
    .c-materials .c-catalog-card { height: var(--card-catalog-h); aspect-ratio: auto; }
    .c-materials .c-download-card { padding: var(--space-9) var(--space-5); }
    .c-materials .c-download-card__item { padding-block: var(--space-6); }
    /* 04 검색결과 (686:17157): 폼 pt24, 탭은 좌우 여백 없이 화면 폭 3등분 16px(활성 SemiBold·밑선 2), 요약 16 lh33 pt24, 목록 구분선 없음 */
    .c-search-page { padding-top: var(--space-6); padding-bottom: var(--section-py); }
    .c-search-tabs { width: calc(100% + 2 * var(--l-side-fluid)); margin-top: var(--space-6); margin-inline: calc(-1 * var(--l-side-fluid)); } /* 컨테이너 좌우 여백(20)만큼 내밀어 화면 풀폭 */
    .c-search-tabs__link { font-size: var(--text-base); padding-block: 0; }
    .c-search-tabs__count { font-size: var(--text-base); }
    .c-search-tabs__item.is-active .c-search-tabs__link { font-weight: var(--font-weight-semibold); border-bottom-width: var(--border-w-thick); }
    .c-search-summary { min-height: 0; padding-block: var(--space-6) 0; font-size: var(--text-base); line-height: var(--lh-search-summary); }
    .c-search-list > .c-search-item { border-top: 0; } /* 필터로 앞 항목이 숨겨져도 요약 아래 선이 생기지 않도록 항목 상단선 제거 */
    .c-search-list > .c-search-item:last-child { border-bottom: 0; }
}

/* 모바일 — 기획전시 목록·상세 (686:30263 / 686:31249) */
@media (max-width: 767px) {
    /* 목록: 헤더 40 → 검색 폼 48 전체 폭 → 총 N건 → 카드 1열 (카드 간격 32) → 페이지네이션 */
    .c-list-section { gap: var(--space-5); padding-top: var(--section-py); padding-bottom: var(--section-py); }
    .c-list-section__head { gap: var(--space-5); }
    .c-form-search__input { width: auto; } /* 1024 규칙(240px 고정) 해제 → flex 로 전체 폭 */
    .c-list-grid { grid-template-columns: 1fr; row-gap: var(--space-8); }
    [data-status-panel] .c-list-bar { padding-bottom: 0; }
    /* 상세 개요 (686:31859, 2026-10-08 재확인): 「목록으로」(아이콘 32) 상단 32 → 32 → 포스터 전체 폭 → 20 → 배지 → 20 → 라벨 16 → 12 → 제목 32/1.4 → 12 → 부제 20 → 32 → 소개 → 32 → 정보 박스(상단 1px 선, 행 간격 24, 라벨 위 / 값 아래) → 하단 40 */
    .c-back-bar:has(+ .c-detail-hero:not(.c-program-hero)) { padding-block: var(--space-8) 0; }
    .c-back-bar:has(+ .c-detail-hero:not(.c-program-hero)) .c-back-bar__icon,
    .c-back-bar:has(+ .c-detail-hero:not(.c-program-hero)) .c-back-bar__icon .c-icon { width: var(--space-8); height: var(--space-8); } /* Back Icon 767:17223: 32 */
    .c-detail-hero { flex-direction: column; gap: var(--space-5); padding-top: var(--space-8); padding-bottom: var(--section-py); }
    .c-detail-hero__poster { width: 100%; height: auto; aspect-ratio: 521 / 737; }
    .c-detail-hero__content { gap: var(--space-8); }
    .c-detail-hero__head { gap: var(--space-5); }
    .c-detail-hero__label { margin-top: 0; font-size: var(--text-base); }
    .c-detail-hero__title { margin-top: var(--space-3); font-size: var(--text-detail-title); }
    .c-detail-hero:not(.c-program-hero) .c-detail-hero__title { line-height: var(--lh-normal); } /* 686:31864: 32/1.4 — 프로그램 상세는 기존 유지 */
    .c-detail-hero__subtitle { margin-top: var(--space-3); font-size: var(--text-card-title); }
    .c-detail-hero__section-title { font-size: 20px; }
    .c-detail-hero__desc { font-size: var(--text-base); }
    .c-detail-info { gap: var(--space-5); padding: var(--space-6) var(--space-5); border-top: 0; }
    .c-detail-hero:not(.c-program-hero) .c-detail-info { gap: var(--space-6); border-top: var(--border-w) solid var(--color-text); } /* 기획전시 상세 686:31870: 상단 1px 선, 행 간격 24 */
    .c-detail-info__row { flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: 0; }
    .c-detail-info__row dt { width: auto; font-size: var(--text-sm); }
    .c-detail-info__row dd { font-size: var(--text-base); }
    /* 전시 구성 (686:31286): 번호 원 48, 이미지 전체 폭, 항목 간격 40 */
    .c-composition { gap: var(--space-10); }
    .c-composition__num { display: none; } /* 모바일 전시 구성(686:31291): 원형 번호 없이 이미지 → SECTION 라벨·제목·설명 */
    .c-composition__item { grid-template-columns: 1fr; row-gap: var(--space-4); }
    .c-composition__media { width: 100%; height: auto; aspect-ratio: 522.85 / 310; }
    .c-composition__title { font-size: var(--text-h3); }
    .c-composition__label { font-size: var(--text-sm); }
    .c-composition__desc { font-size: var(--text-base); line-height: var(--lh-loose); }
    /* 이전/다음 글 (686:32291): 2행 90h, 라벨 + 제목 */
    .c-prevnext__inner { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
    .c-prevnext__link { min-height: 90px; gap: var(--space-6); } /* 686:32291: 버튼 38 · 간격 24 · 라벨 14 */
    .c-prevnext__btn { width: 38px; height: 38px; }
    .c-prevnext__label { font-size: var(--text-sm); }
    .c-prevnext__link--next { justify-content: flex-start; border-top: var(--border-w) solid var(--color-line); } /* 다음 전시는 Figma 대로 우측 정렬(row-reverse) 유지 */
}
/* 모바일 — 목록 필터 바 (pages.css 1024 규칙보다 뒤에 두어 우선): 드롭다운 2개 균등(161.5) → 검색 폼 전체 폭 (686:35074) */
@media (max-width: 767px) {
    .c-list-bar__tools { flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-3); width: 100%; min-width: 0; }
    .c-list-bar__tools .c-dropdown { flex: 1 1 calc(50% - var(--space-3) / 2); width: auto; min-width: 0; max-width: 100%; }
    .c-list-bar__tools .c-dropdown__toggle { width: 100%; }
    .c-list-bar__tools .c-form-search { flex: 0 0 100%; width: 100%; }
    .c-list-bar__tools .c-form-search__input { flex: 1 1 0; width: auto; min-width: 0; }
}

/* 모바일 — 전시관 소개 (인사말 686:22246 / 관람안내 686:22694·686:33355 / 소식 686:24434·686:25680 / FAQ 686:27145 / 기증·후원 686:26380·686:26767) */
@media (max-width: 767px) {
    .c-about-main { padding-top: var(--section-py); padding-bottom: var(--section-py); }
    .c-about-intro { padding-bottom: var(--space-8); }
    .c-about-intro__desc { line-height: var(--lh-loose); }
    /* --text-xl 이 모바일에서 14(관람정보 바)로 재정의되므로 섹션 소제목은 20 으로 명시 */
    .c-about-section { padding-top: var(--section-py); }
    .c-about-section__title, .c-directions__title, .c-guide-rows__title, .c-check-row__label { font-size: 20px; }
    /* 방문 전 확인 (686:22694): 사진은 페이지 타이틀 바로 아래 좌우 여백 없이 화면 폭(375×234.5, 710:444), 본문 위아래 32 */
    .c-about-main:has(.c-visit-box) { padding-top: 0; }
    .c-visit-box { border: 0; }
    .c-visit-box__media { width: auto; margin-inline: calc(-1 * var(--l-gutter)); }
    .c-visit-box__body { flex: 0 0 auto; margin-inline: calc(-1 * var(--l-gutter)); padding: var(--space-8) var(--l-gutter); gap: 0; }
    .c-visit-box__title { font-size: var(--text-h3); }
    .c-visit-box .c-guide-card__item { min-height: var(--card-guide-item-h); border-bottom: 0; }
    .c-reserve__item { padding: var(--space-6) 0; }
    .c-notes__item { padding: var(--space-7) var(--space-5); } /* 유의사항 카드의 상하 패딩은28px. */
    .c-directions { margin-top: 0; padding: var(--space-6) 0 var(--space-10); }
    .c-directions__addr { padding: var(--space-6) var(--space-5); }
    .c-directions__row { padding: var(--space-6) 0; }
    /* 필터 바: 버튼 행 → 검색 48 전체 폭 → 소식·FAQ 총 건수 */
    .c-filter-bar { gap: var(--space-4); }
    .c-filter-count { display: none; }
    .c-about-main:has(.c-board, .c-faq) > .c-filter-count { display: block; margin-top: 0; padding-block: var(--space-4); font-size: var(--text-h7); line-height: var(--lh-relaxed); }
    .c-about-main:has(.c-board) > .c-filter-count { padding-block: var(--space-5); border-bottom: var(--border-w-thick) solid var(--color-text); }
    /* 소식 목록 (686:24434): 배지 32, 제목까지 12, 날짜까지 4, 행 py16 */
    .c-about-main:has(.c-board) { padding-top: var(--space-8); }
    .c-about-main:has(.c-board) .c-filter-bar { gap: var(--space-3); }
    .c-board { margin-top: 0; border-top: 0; }
    .c-board__row { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-4) 0; }
    .c-board__row:first-child { padding-top: var(--space-4); }
    .c-board + .c-pagination { margin-top: var(--space-7); }
    .c-board__col { padding-inline: 0; text-align: left; }
    .c-board__col--cat { width: auto; } /* 배지 모양은 내부 .c-badge--cat-* 가 담당 */
    .c-board__col--title { order: 0; margin-top: var(--space-3); font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
    .c-board__col--date { width: auto; margin-top: var(--space-1); font-size: var(--text-sm); }
    /* 소식 상세 (686:25680): 목록으로 → 배지 → 제목 22 → 메타 → 본문 py32 → 다음 글 */
    .c-back-bar { min-height: 0; padding-block: var(--space-10) var(--space-6); }
    .c-back-bar__icon, .c-back-bar__icon .c-icon { width: var(--space-6); height: var(--space-6); }
    .c-post { padding-bottom: var(--section-py); }
    .c-post__title { font-size: var(--text-h3); }
    .c-post__head .c-badge { height: var(--size-badge); }
    .c-post__head .c-badge--notice { background: var(--color-badge-bg-gray); color: var(--color-badge-text-gray); border-color: transparent; padding-inline: var(--badge-px); }
    .c-post__body { padding: var(--space-8) 0; }
    .c-post__nav-label { width: auto; margin-right: var(--space-5); }
    /* FAQ (686:27145): Q. + 배지 + 질문(한 줄, flex 1) + 화살표, 답변 px20 */
    .c-about-main:has(.c-faq) .c-filter-bar { gap: var(--space-3); }
    .c-faq { margin-top: 0; }
    .c-faq__q { flex-wrap: nowrap; align-items: center; gap: var(--faq-column-gap); padding: var(--space-4) 0; min-height: calc(var(--faq-row-h) - var(--border-w)); }
    .c-faq__mark { font-size: var(--text-subheading); }
    .c-faq__cat { width: var(--faq-cat-w); }
    .c-faq__title { flex: 1 1 0; font-size: var(--text-h7); line-height: var(--lh-normal); word-break: normal; }
    .c-faq__a { padding: var(--space-6) var(--space-5); }
    .c-faq__a-mark { font-size: var(--text-subheading); }
    /* 기증·후원 (686:26380): 2탭 균등 분할·중앙, 관리 안내 dt/dd 세로, CTA p40/20 */
    .c-donate { padding-top: 0; padding-bottom: var(--section-py); }
    .c-tab--flat .c-tab__list { gap: 0; }
    .c-tab--flat .c-tab__item { flex: 1 1 0; }
    .c-tab--flat .c-tab__link { width: 100%; }
    .c-donate .c-tab--flat, .c-prog > .c-tab--flat { width: calc(100% + 2 * var(--l-side-fluid)); margin-inline: calc(-1 * var(--l-side-fluid)); } /* 모바일 탭을 화면 너비에 맞춘다. */
    /* 오시는 길 탭 (686:23782 / 686:23945): 균등 분할 없이 좌측 정렬, 항목 내용 폭 + 간격 40, 높이 70, 활성 Bold primary 밑선 2 / 비활성 Medium Text/Alternative */
    .c-directions .c-tab--flat .c-tab__list { gap: var(--tab-gap); }
    .c-directions .c-tab--flat .c-tab__item { flex: 0 0 auto; }
    .c-directions .c-tab--flat .c-tab__link { width: auto; height: calc(var(--size-tab) - var(--border-w)); } /* 상단선 없는 flat 탭: 하단선 포함 70 */
    .c-guide-rows { padding-bottom: var(--space-8); row-gap: var(--space-5); }
    .c-guide-rows__item { flex-direction: column; gap: var(--space-1); padding-bottom: 0; border-bottom: 0; }
    .c-guide-rows__item + .c-guide-rows__item { margin-top: var(--space-4); }
    .c-guide-rows__item dt { min-width: 0; }
    .c-check-row { padding-bottom: var(--space-8); }
    .c-cta-banner { padding: var(--space-10) var(--space-5); }
    .c-cta-banner__title { font-size: var(--text-h4); }
}

/* 모바일 — 프로그램 (관람예약 686:32804 / 예약 캘린더 686:34351 / 캘린더 686:38778 / 목록 686:35074 / 상세 686:37578) */
@media (max-width: 767px) {
    .c-prog { padding-top: 0; padding-bottom: var(--section-py); } /* 탭을 브레드크럼 바로 아래 배치한다. */
    .c-prog:has(.c-cal) { padding-bottom: var(--space-8); }
    .c-prog .c-tab--flat { margin-bottom: var(--space-8); }
    .c-prog .c-tab--flat .c-tab__link { height: calc(var(--size-tab) - var(--border-w)); }
    .c-prog--filter:has(.c-cal) { padding-top: var(--space-8); }
    /* 캘린더 필터를 모바일에서 한 열로 배치한다. */
    .c-prog--filter .c-list-bar__tools { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; }
    .c-prog--filter .c-list-bar__tools .c-dropdown { width: 100%; flex: 0 0 auto; }
    .c-prog--filter .c-list-bar__tools .c-form-search { width: 100%; }
    .c-prog--filter .c-filter-bar { margin-bottom: var(--space-6); }
    .c-notice-box { margin-bottom: var(--space-8); padding: var(--space-5); }
    /* 단체 관람 안내 (686:32804): 좌 정보 px20 → 우 신청 안내 bg-blue p20, 이메일 20 Bold */
    .c-reserve-guide__info { padding: var(--space-8) 0; } /* 단체 관람 정보를 컨테이너에 맞춘다. */
    .c-reserve-guide__title { font-size: 20px; }
    .c-reserve-guide__mail { padding: var(--space-8) var(--space-5); }
    .c-mail-box__addr { font-size: 20px; }
    /* 예약 절차: STEP 카드 1열 + 카드 사이 원형 화살표(아래 방향) */
    .c-steps .c-notes__item { padding: var(--space-6) var(--space-5); }
    /* 카드 경계에 원형 화살표(아래 방향): 카드 높이가 내용에 따라 달라 절대 위치 대신 각 카드 하단에 ::after 로 배치 */
    .c-steps__arrow { display: none; }
    .c-steps .c-notes__item { position: relative; }
    .c-steps .c-notes__item:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -13px; z-index: var(--z-raised); width: 26px; height: 26px; margin-left: -13px; border: var(--border-w) solid var(--color-line); border-radius: 50%; background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' fill='none' stroke='%2322263f' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
    .c-rule-rows { margin-top: var(--section-py); }
    .c-rule-row { gap: var(--space-4); padding: var(--space-6) 0; }
    .c-rule-row__label { font-size: 20px; }
    /* 캘린더 (686:34351): 툴바 한 줄(← 월 → | 오늘), 범례 아래, 셀 72, 일정은 색 점 6 */
    .c-cal__toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
    .c-cal__nav { width: 100%; gap: var(--cal-nav-gap); }
    .c-cal__nav .c-icon-btn { width: var(--size-btn-md); height: var(--size-btn-md); }
    .c-cal__nav .c-btn { margin-left: auto; height: var(--size-btn-md); }
    .c-cal__month { flex: 0 0 auto; min-width: var(--cal-month-min); padding-inline: 0; font-size: var(--text-cal-month); }
    .c-cal__head { height: 44px; }
    .c-cal__cell { min-height: var(--cal-cell-min); padding: var(--space-2) 0 var(--cal-cell-pb); align-items: center; }
    .c-cal__events { flex-direction: row; justify-content: center; gap: 4px; padding-top: 6px; width: auto; }
    .c-cal__event { width: 6px; height: 6px; padding: 0; border-radius: 50%; border-left: 0; font-size: 0; line-height: 0; background: currentColor; }
    .c-cal__event--group { color: var(--color-cal-group); }
    .c-cal__event--exhibit { color: var(--color-primary); }
    .c-cal__event--program { color: var(--color-faq-program); }
    .c-cal__event--general { color: var(--color-cal-general); }
    /* 선택일 목록 (578:11702 / 498:13363 mobile): 제목 20 / 건수 아래, 항목 세로형(태그 → 뱃지 → 제목 → 메타), 상세보기 버튼 없음 */
    .c-day-list { margin-top: var(--space-4); }
    .c-day-list__head { flex-direction: column; align-items: flex-start; gap: 0; height: auto; padding-block: var(--space-6); }
    .c-day-list__title { font-size: 20px; }
    .c-day-list__count { font-size: var(--text-base); line-height: var(--lh-material-desc); }
    .c-day-list__item { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) 0; }
    .c-day-list__tag { width: auto; }
    .c-day-list__body { width: 100%; }
    .c-day-list__name { font-size: var(--text-h7); }
    .c-day-list__meta { gap: var(--space-2) var(--space-4); }
    .c-day-list__btn { display: none; }
    .c-day-cta { margin-top: var(--cal-cta-mt); padding: var(--cal-cta-py) var(--space-5); gap: var(--space-7); }
    .c-day-cta__title { font-size: var(--text-h7); }
    /* 프로그램 목록 (686:35074): 카드 래퍼 pt20 + pb32 → 카드 간격 52, 필터 순서 = 상태 버튼 → 드롭다운 2 균등 → 검색 */
    .c-program-list { margin-top: var(--space-6); padding-top: var(--space-6); }
    .c-program-grid { row-gap: calc(var(--space-8) + var(--space-5)); }
    .c-program-grid + .c-pagination { margin-top: calc(var(--space-8) + var(--space-6)); } /* 마지막 카드 pb32 + 24 */
    .c-program-card__thumb { aspect-ratio: 420 / 594; }
    .c-program-card__thumb img { object-fit: contain; }
    .c-about-main:has(.c-program-list) { padding-top: var(--space-8); }
    .c-about-main:has(.c-program-list) .c-filter-bar { gap: var(--space-3); margin-bottom: 0; }
    .c-about-main:has(.c-program-list) > .c-filter-count { display: block; font-size: var(--text-base); line-height: var(--lh-material-desc); }
    .c-program-list { margin-top: 0; padding-top: var(--space-5); border-top: 0; }
    .c-program-card__title { margin-top: var(--space-3); font-size: var(--text-search-title); } /* --text-xl 이 모바일 14 로 재정의되므로 22 명시 (686:35528) */
    .c-program-card__dl { margin-top: var(--space-1); gap: var(--space-1); font-size: var(--text-base); }
    .c-program-card__dl div { gap: var(--space-5); }
    .c-program-card__dl dt { width: 60px; flex: 0 0 auto; }
    /* 모바일 프로그램 상세: 정보 박스·신청서·본문 섹션 */
    .c-program-hero .c-detail-hero__title { font-size: var(--text-detail-title); }
    .c-back-bar:has(+ .c-program-hero) { padding-block: var(--space-6) var(--space-5); }
    .c-back-bar:has(+ .c-program-hero) .c-back-bar__icon,
    .c-back-bar:has(+ .c-program-hero) .c-icon { width: var(--back-icon); height: var(--back-icon); }
    .c-program-hero { padding-top: 0; padding-bottom: var(--space-8); }
    .c-program-hero__actions { margin-top: 0; }
    .c-detail-info__row--multi dt { line-height: var(--lh-relaxed); }
    .c-detail-info__apply > p { font-size: var(--text-base); }
    .c-detail-info__example { font-size: var(--text-sm) !important; }
    .c-detail-info__mail strong { font-size: var(--text-h7); }
    .c-prog-section { padding: var(--section-py) 0; }
    .c-prog-section + .c-prog-section { padding-top: var(--section-py); }
    .c-prog-section__title { margin-bottom: var(--space-5); font-size: var(--text-h2); line-height: var(--lh-tight); }
    .c-prog-section__subtitle { font-size: var(--text-h7); }
    .c-prog-section__desc { font-size: var(--text-base); }
    .c-prog-section__list { margin-top: var(--space-5); }
    .c-prog-section__list--lg { font-size: var(--text-base); }
    /* 전시 자료 다운로드 (797:17671): 항목을 배지 행 + (파일명 · 다운로드 버튼) 행 2단으로, py24 pr8 gap12, 마지막 항목 아래에도 선 */
    .c-download-card { padding: var(--space-9) var(--space-5); gap: 0; }
    .c-download-card__title { font-size: 20px; }
    .c-download-card__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-2) var(--space-6) 0; }
    .c-download-card__item:last-child { border-bottom: var(--border-w) solid var(--color-line); }
    .c-download-card__info { display: contents; }
    .c-download-card__info .c-badge { grid-column: 1 / -1; }
    .c-download-card .c-btn-download { width: var(--size-icon-2xl); height: var(--size-icon-2xl); } /* btn_download 38 (797:17680) */
    /* 프로그램 첨부자료 (686:38755): 상하 32, 항목 사이 구분선만 표시 */
    .c-materials--full .c-download-card { padding-block: var(--space-8); gap: 0; }
    .c-materials--full .c-download-card__item:last-child { border-bottom: 0; }
}

/* 모바일 화면별 글자와 간격 */
@media (max-width: 767px) {
    .c-greeting__heading { font-size: var(--text-h3); }
    .c-greeting__para { font-size: var(--text-h7); }
    .c-reserve__title { font-size: var(--text-h7); }
    .c-reserve__dl dt { font-size: var(--text-sm); }
    .c-directions__title, #res-steps { font-size: var(--text-search-title); }
    .c-directions__name { font-size: var(--text-card-title); }
    .c-directions__label { font-size: var(--text-transport-title); }
    #sec-intro.c-prog-section { padding-block: var(--space-intro-mobile); }
    #sec-intro .c-prog-section__title { font-size: var(--text-h3); }
    #sec-records .c-section-head__desc,
    #sec-related .c-section-head__desc,
    .c-list-section .c-section-head__desc,
    .l-section:has(.c-materials--full) .c-section-head__desc { font-size: var(--text-h7); }
    #sec-records .c-card-record__title { font-size: var(--text-card-title); }
    .c-notes--collection > :nth-child(2) { order: 3; }
    .c-notes--collection > :nth-child(3) { order: 1; }
    .c-notes--collection > :nth-child(4) { order: 2; }
    #donate-panel-gift .c-cta-banner .c-btn, .c-reserve .c-btn,
    .c-directions__btns a.c-btn, .c-day-cta .c-btn,
    .c-program-hero__note { font-size: var(--text-sm); }
    .c-materials--full .c-badge { font-size: var(--text-label); }
}

/* 기획전시 연계 기록물: 시안의 두 줄 설명과 카드 간격 */
body[data-menu="special"] #sec-records .c-card-record__desc { height: calc(var(--text-base) * 3); -webkit-line-clamp: 2; }
@media (max-width: 767px) {
    body[data-menu="special"] #sec-records .l-grid { gap: var(--space-8); }
}

/* ?? ?? ??? ??? ???? ???? ?? ??? ?? ??. */
.c-hero__link { position: absolute; inset: 0; z-index: 11; }
.c-hero__ctrl { z-index: 12; }
.c-exhibition-status-tabs { align-self: flex-start; }