/* 공통 컴포넌트 스타일. 클래스 접두사: c-. */

/* 01. 아이콘 / 아이콘 버튼 */
.c-icon { display: inline-block; width: 1em; height: 1em; fill: none; flex: 0 0 auto; }
.c-icon--xs { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.c-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.c-icon--md { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-icon--base { width: var(--size-icon); height: var(--size-icon); }

/* Arrow_btn (498:14249): White 38 / Black 48 — 원형 테두리 화살표 */
.c-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--size-icon-2xl); height: var(--size-icon-2xl);
    border: var(--border-w) solid var(--color-text);
    border-radius: 50%;
    color: var(--color-text);
    background: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.c-icon-btn .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-icon-btn:hover { background: var(--color-interaction-hover); }
.c-icon-btn:active { background: var(--color-interaction-press); }
.c-icon-btn--white { width: var(--size-icon-lg); height: var(--size-icon-lg); border-color: var(--color-white); color: var(--color-white); }
.c-icon-btn--white:hover { background: var(--color-line-white); }
.c-icon-btn:disabled, .c-icon-btn.is-disabled { opacity: 0.35; cursor: default; background: transparent; }
@media (hover: none) { /* 터치 기기: 탭 후 :hover 가 남아 배경이 회색으로 고정되는 현상 방지 */
    .c-icon-btn:hover { background: transparent; }
    .c-icon-btn--search:hover { background: var(--color-primary-deep); }
}

/* 검색 버튼 (Button-검색, 48 정사각 채움) */
.c-icon-btn--search {
    border: 0; border-radius: var(--radius-none);
    background: var(--color-primary-deep); color: var(--color-white);
}
.c-icon-btn--search:hover { background: var(--color-primary); }
.c-icon-btn--search .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-icon-btn--search-line { border-radius: var(--radius-none); border-color: var(--color-logo-navy); color: var(--color-logo-navy); } /* Figma Button-검색(297:4556 / 498:14518): 테두리·아이콘 Logo/Navy #0a1d45 — 「역사기록관 바로가기」와 동일 */

/* btn_download (498:14266): 42 정사각 테두리 */
.c-btn-download {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--size-icon-xl); height: var(--size-icon-xl);
    border: var(--border-w) solid var(--color-text); color: var(--color-text);
}
.c-btn-download .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.c-btn-download:hover { background: var(--color-interaction-hover); }

/* 02. 버튼 btn (498:14175) — type × size(42/48/52)
type: --white-line | --blue-line | --black-line | --blue | --black | --gray-line
size: --sm(42, 14px) | 기본(48, 16px) | --lg(52, 16px) */
.c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--size-btn-md);
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: var(--lh-btn);
    white-space: nowrap;
    border: var(--border-w) solid transparent;
    border-radius: var(--radius-none);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.c-btn--sm { height: var(--size-btn-sm); font-size: var(--text-sm); }
.c-btn--lg { height: var(--size-btn-lg); }
.c-btn--white-line { border-color: var(--color-white); color: var(--color-white); }
.c-btn--white-line:hover { background: var(--color-line-white); }
.c-btn--blue-line { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); }
.c-btn--blue-line:hover { background: var(--color-bg-blue); }
.c-btn--black-line { background: var(--color-bg); border-color: var(--color-text); color: var(--color-text); }
.c-btn--black-line:hover { background: var(--color-interaction-hover); }
.c-btn--gray-line { background: var(--color-bg); border-color: var(--color-line); color: var(--color-text); }
.c-btn--gray-line:hover { background: var(--color-interaction-hover); }
.c-btn--blue { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.c-btn--blue:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); }
.c-btn--black { background: var(--color-btn-black); border-color: var(--color-btn-black); color: var(--color-white); }
.c-btn--black:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); }
/* 헤더 "역사기록관 바로가기" — navy line */
.c-btn--navy-line { border-color: var(--color-logo-navy); color: var(--color-logo-navy); }
.c-btn--navy-line:hover { background: var(--color-bg-blue); }
/* 연계기록물 "더보기" (498:15631): h60 px24 deep line SemiBold */
.c-btn--more { height: 60px; padding-inline: var(--space-6); border-color: var(--color-primary-deep); color: var(--color-primary-deep); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); }
.c-btn--more:hover { background: var(--color-bg-blue); }
/* 소식 "전체 보기" (498:11088): h42 p16 line SemiBold 14 */
.c-btn--text-line { height: var(--size-btn-sm); padding: var(--space-4); border-color: var(--color-line); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); }
.c-btn:disabled, .c-btn.is-disabled { color: var(--color-text-disabled); border-color: var(--color-line); background: var(--color-bg); cursor: default; }

/* 03. 배지 (Exhibition Status 498:14109 / Type 498:14116 / Program_Type 498:14121 / Audience 498:14130)
h32 px12 py9 14px SemiBold */
.c-badge {
    display: inline-flex; align-items: center;
    height: var(--size-badge); padding: var(--badge-py) var(--badge-px);
    font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed);
    white-space: nowrap;
    width: max-content; /* flex 세로 컨테이너 안에서 늘어나지 않도록 */
    border: var(--border-w) solid transparent;
}
.c-badge--status { background: var(--color-badge-bg-blue); color: var(--color-white); border-color: var(--color-badge-bg-blue); backdrop-filter: blur(var(--blur-badge)); }            /* 전시중 / 접수중 */
.c-badge--upcoming { background: var(--color-badge-bg-bright); color: var(--color-badge-text-blue); border-color: var(--color-badge-line-bright); backdrop-filter: blur(var(--blur-badge)); } /* 전시 예정 / 접수 예정 */
.c-badge--ended { background: var(--color-badge-bg-gray); color: var(--color-badge-text-gray); border-color: var(--color-badge-bg-gray); }   /* 종료 / 접수 마감 (Badge/Gray 변수) */
.c-badge--type { background: var(--color-bg); color: var(--color-text); border-color: var(--color-btn-black); }                           /* 상설전시·기획전시·전시연계·강연·PDF·전체·어린이 */
.c-badge--type-white { background: transparent; color: var(--color-white); border-color: var(--color-white); }                            /* 딥네이비 배경 위 */
.c-badge--cat-exhibit { background: var(--color-cat-exhibit-bg); color: var(--color-primary); }                                           /* 검색결과 "전시" */
.c-badge--cat-program { background: var(--color-cat-program-bg); color: var(--color-cat-program-text); }                                  /* 검색결과 "프로그램" */
.c-badge--cat-notice { background: var(--color-cal-general-bg); color: var(--color-text-sub); }                                       /* 전시관 소식 "공지" */
.c-badge--lg { height: var(--size-badge-lg); background: var(--color-badge-bg-ongoing-lg); color: var(--color-white); border-color: var(--color-badge-bg-ongoing-lg); } /* 기획전시 상세 상단 */
.c-badge--notice { height: var(--size-badge-sm); padding-inline: var(--space-2); font-weight: var(--font-weight-regular); background: var(--color-bg); color: var(--color-primary); border-color: var(--color-badge-line-bright); } /* 전시관소식 상세 구분 (498:13100, 26h) */
.c-badge-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.c-badge-group--tight { gap: 6px; } /* Program_card 배지 간격 6 (Figma 실측) */

/* Search_Tag (498:14212): h42 px14 pill 14px Regular */
.c-tag {
    display: inline-flex; align-items: center;
    height: var(--size-tag); padding-inline: var(--tag-px);
    font-size: var(--text-sm); line-height: var(--lh-relaxed);
    background: var(--color-bg); border: var(--border-w) solid var(--color-line); border-radius: var(--radius-pill);
    color: var(--color-text); white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease);
}
.c-tag:hover { background: var(--color-bg-blue); }
.c-tag-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* 04. 헤더 Header_scroll (498:14435) — 상태
.c-header--transparent : 최상단 오버레이(메인 배너·서브 타이틀 배너 위, 흰 글자, 배경 rgba(0,0,0,.1)) [white] — 전 페이지
.c-header (기본) : 흰 배경, 진한 글자 [scroll]
.c-header.is-open : 메가메뉴 펼침 (578:12098) [scroll2 / white_hover]
.c-header.is-search : 검색 패널 펼침 (498:11747) [Search]
.c-header.is-fixed : 스크롤 시 상단 고정 (JS) */
.c-header { position: relative; z-index: var(--z-header); width: 100%; background: var(--color-bg); color: var(--color-text); filter: drop-shadow(var(--shadow-popup)); }
.c-header.is-fixed { position: fixed; top: 0; left: 0; }
.c-header__bar {
    display: flex; align-items: center;
    height: var(--size-header);
    border-bottom: var(--border-w) solid var(--color-line);
    background: var(--color-bg);
}
.c-header__logo { display: block; width: var(--size-logo-w); height: var(--size-logo-h); flex: 0 0 auto; }
.c-header__logo img { width: 100%; height: 100%; }
.c-header__logo--white { display: none; }
.c-header__gnb { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; gap: var(--size-gnb-gap); height: 100%; }
.c-header__gnb-item { width: var(--size-gnb-item); flex: 0 0 auto; height: 100%; }
.c-header__gnb-link {
    display: flex; justify-content: center; align-items: flex-start;
    height: 100%; padding-block: var(--size-gnb-py);
    font-size: var(--text-md); font-weight: var(--font-weight-medium); line-height: var(--lh-relaxed);
    white-space: nowrap; position: relative;
}
.c-header__gnb-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--border-w-thick); background: var(--color-primary); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.c-header__gnb-item.is-active .c-header__gnb-link::after, .c-header__gnb-link:hover::after { opacity: 1; }
.c-header__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
/* 검색 버튼: Figma 'Button - 검색' 48 사각 테두리(모든 상태) — 열림 상태에서는 JS 가 아이콘을 icn-close 로 교체 */
.c-header__menu-btn { display: none; }

/* 메가메뉴 패널 (List 578:12100): pt22 pb40, 로고폭 만큼 빈칸 + GNB 정렬 + 우측 액션폭 빈칸 */
.c-header__panel { display: none; background: var(--color-bg); }
.c-header__mobile-footer { display: none; }
.c-header.is-open .c-header__panel { display: block; }
.c-header__panel-inner { display: flex; align-items: flex-start; justify-content: space-between; padding-top: var(--size-submenu-pt); padding-bottom: var(--size-submenu-pb); }
.c-header__panel-spacer { width: var(--size-logo-w); flex: 0 0 auto; }
.c-header__panel-spacer--end { display: flex; align-items: center; gap: var(--space-3); width: auto; visibility: hidden; } /* 헤더 actions 와 같은 간격이어야 열이 GNB 와 정확히 정렬됨 */
.c-header__sub-groups { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; gap: var(--size-gnb-gap); }
.c-header__sub-group { width: var(--size-gnb-item); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.c-header__sub-link {
    display: block; width: var(--size-submenu-w); height: var(--size-submenu-item);
    font-size: var(--text-base); line-height: var(--lh-submenu); text-align: center; white-space: nowrap;
    color: var(--color-text);
}
.c-header__sub-link:hover { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.c-header__sub-link--self { display: none; } /* 2depth 없는 1depth 이동 링크: PC 메가메뉴에서는 Figma 대로 빈 열, 1024 이하에서만 표시 */

/* 검색 패널 (List 498:14522): h236 py22, 폼 800 */
.c-header__search { display: none; background: var(--color-bg); }
.c-header.is-search .c-header__search { display: flex; }
.c-header.is-search .c-header__panel { display: none; }
.c-header__search-inner { display: flex; justify-content: center; align-items: center; height: var(--size-search-panel); padding-block: var(--size-submenu-pt); }
.c-search-panel { width: var(--size-search-panel-w); max-width: 100%; }
.c-search-panel__label { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); color: var(--color-text); } /* Figma serach_list 제목 Text/Normal */
.c-search-panel__form { display: flex; height: var(--size-search-input); margin-top: 15px; background: var(--color-bg); border: var(--border-w-thick) solid var(--color-search-border); overflow: hidden; }
.c-search-panel__input { flex: 1 1 0; min-width: 0; padding-inline: var(--space-5); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.c-search-panel__input:focus, .c-search-panel__input:focus-visible { outline: none; } /* 포커스 외곽선이 overflow 안에서 입력창·버튼 사이 세로선처럼 보임(Figma 에는 구분선 없음) → 폼 2px 테두리가 포커스 표시를 대신 */
.c-search-panel__submit { width: var(--size-search-input-btn); display: flex; align-items: center; justify-content: center; color: var(--color-text); }
.c-search-panel__submit .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* 투명 상태 (메인 배너 위) */
.c-header--transparent { position: absolute; top: 0; left: 0; background: transparent; color: var(--color-white); filter: none; box-shadow: var(--shadow-header); }
.c-header--transparent .c-header__bar { background: var(--color-header-bg); border-bottom-color: var(--color-line-white); }
.c-header--transparent .c-header__logo--navy { display: none; }
.c-header--transparent .c-header__logo--white { display: block; }
.c-header--transparent .c-header__gnb-link::after { background: var(--color-white); }
.c-header--transparent .c-btn--navy-line { border-color: var(--color-white); color: var(--color-white); }
.c-header--transparent .c-btn--navy-line:hover { background: var(--color-line-white); }
.c-header--transparent .c-icon-btn--search-line { border-color: var(--color-white); color: var(--color-white); }
/* 투명 상태에서 메가메뉴·검색이 열리면 흰 배경으로 전환 */
.c-header--transparent.is-open, .c-header--transparent.is-search { background: var(--color-bg); color: var(--color-text); }
.c-header--transparent.is-open .c-header__bar, .c-header--transparent.is-search .c-header__bar { background: var(--color-bg); border-bottom-color: var(--color-line); }
.c-header--transparent.is-open .c-header__logo--white, .c-header--transparent.is-search .c-header__logo--white { display: none; }
.c-header--transparent.is-open .c-header__logo--navy, .c-header--transparent.is-search .c-header__logo--navy { display: block; }
.c-header--transparent.is-open .c-btn--navy-line, .c-header--transparent.is-search .c-btn--navy-line { border-color: var(--color-logo-navy); color: var(--color-logo-navy); }
.c-header--transparent.is-open .c-icon-btn--search-line, .c-header--transparent.is-search .c-icon-btn--search-line { border-color: var(--color-logo-navy); color: var(--color-logo-navy); }
.c-header--transparent.is-open .c-header__gnb-link::after, .c-header--transparent.is-search .c-header__gnb-link::after { background: var(--color-primary); }

/* 반응형: 1024 이하 GNB 숨김 + 햄버거, 패널은 세로 목록 */
@media (max-width: 1024px) {
    /* 상세 앵커 탭(686:27929): 항목이 넘치면 가로 스와이프로 이동하되 스크롤바는 표시하지 않음. 활성 탭은 JS(initAnchorTabs)가 보이는 위치로 스크롤 */
    .c-tab__list { scrollbar-width: none; }
    .c-tab__list::-webkit-scrollbar { display: none; }
    /* 로고 251 + 버튼 48×2 가 콘텐츠 폭(뷰포트-80)을 넘으면 로고를 비례 축소 (가로 오버플로 방지) */
    .c-header__logo { flex: 0 1 var(--size-logo-w); min-width: 0; width: auto; height: auto; }
    .c-header__logo img { width: 100%; height: auto; display: block; }
    .c-header__gnb { display: none; }
    .c-header__menu-btn { display: inline-flex; }
    .c-header__actions .c-btn--navy-line { display: none; }
    .c-header__panel-spacer { display: none; }
    .c-header__sub-groups { flex-direction: column; gap: var(--space-4); align-items: stretch; }
    .c-header__sub-group { width: 100%; align-items: flex-start; }
    .c-header__sub-group::before { content: attr(data-label); display: block; font-size: var(--text-md); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); margin-bottom: var(--space-1); }
    .c-header__sub-link { width: auto; text-align: left; }
    .c-header__sub-link--self { display: block; } /* 2depth 없는 1depth 이동 링크 (모바일 전용) */
}
/* 모바일 (Figma Header 686:17171 / 메뉴 드로어 686:16819 / 검색 686:17904): 로고 180, 아이콘 버튼 38 gap 8, 세로 드로어 px20 py22 행 40 */
@media (max-width: 767px) {
    /* filter는 fixed 자식의 기준 영역을 헤더로 바꿔 드로어 높이를 0으로 만든다. */
    .c-header { filter: none; }
    .c-header:not(.c-header--transparent) { box-shadow: var(--shadow-popup); }
    .c-header__bar .l-row { gap: var(--space-2); }
    .c-header__actions { gap: var(--space-2); }
    .c-header__logo { flex: 0 0 var(--size-logo-w); width: var(--size-logo-w); height: var(--size-logo-h); }
    .c-header__logo img { height: 100%; }
    .c-header__panel-inner { flex-direction: column; padding-block: var(--size-submenu-pt); }
    .c-header__sub-groups { width: 100%; }
    .c-header__mobile-footer { display: block; width: 100%; margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-w) solid var(--color-line); }
    .c-header__mobile-footer .c-btn { height: var(--space-11); padding-inline: var(--space-4); font-size: var(--text-sm); }
    .c-header__sub-groups { gap: var(--space-3); }
    .c-header__sub-group + .c-header__sub-group { padding-top: var(--space-3); border-top: var(--border-w) solid var(--color-line); }
    .c-header__sub-group::before { font-size: 18px; font-weight: var(--font-weight-medium); line-height: 40px; margin-bottom: 0; }
    .c-header__sub-link { height: 40px; line-height: 40px; font-size: var(--text-base); }
    .c-header__sub-group[data-menu="permanent"]::before { display: none; } /* 2depth 없는 상설전시: 라벨 대신 1depth 링크 자체를 표시 */
    .c-header__sub-link--self { display: block; height: 40px; line-height: 40px; font-size: 18px; font-weight: var(--font-weight-medium); }
    .c-header.is-open .c-header__panel { position: fixed; top: var(--size-header); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior-y: contain; z-index: var(--z-gnb-panel); } /* 화면 기준 고정, 긴 메뉴는 내부 스크롤 */
    .c-header__search-inner { align-items: stretch; height: auto; }
    .c-search-panel__label { font-size: 18px; line-height: var(--lh-relaxed); }
    .c-search-panel__form { margin-top: var(--space-3); }
    .c-search-panel__input { padding-inline: var(--space-4); font-size: var(--text-sm-plus); }
}

/* 05. 푸터 Footer (554:22571): h325 pt52 bg #1a2130 */
.c-footer { min-height: var(--size-footer); padding-top: var(--space-13); background: var(--color-footer-bg); color: var(--color-white); border-top: var(--border-w) solid var(--color-line); }
.c-footer__top { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: var(--space-10); border-bottom: var(--border-w) solid var(--color-line-white); }
.c-footer__logo { display: block; width: var(--size-logo-w); height: var(--size-logo-h); }
.c-footer__addr { padding-top: 14px; font-size: var(--text-xs); line-height: var(--lh-footer-addr); }
.c-footer__links { display: flex; gap: var(--space-4); }
.c-footer__link { font-size: var(--text-sm); line-height: var(--lh-footer-link); }
.c-footer__link:hover { text-decoration: underline; }
.c-footer__bottom { display: flex; align-items: center; gap: var(--space-2); padding-top: 14px; padding-bottom: 26px; }
.c-footer__emblem { width: 37px; height: 38px; }
.c-footer__copy { font-size: var(--text-xxs); line-height: var(--lh-footer-copy); }
@media (max-width: 1024px) {
    .c-footer__top { flex-direction: column; gap: var(--space-6); }
    .c-footer__links { flex-wrap: wrap; }
}
/* 모바일 (Figma Footer mo 686:15143): pt32, 로고 251×48 유지, 주소 14 lh21.25, 링크 wrap(row 24 / col 16), 하단 pt20 pb26, 카피 13 */
@media (max-width: 767px) {
    .c-footer { padding-top: var(--space-8); min-height: var(--size-footer); }
    .c-footer__top { gap: var(--space-6); padding-bottom: var(--space-6); }
    .c-footer__logo { width: 251px; height: 48px; }
    .c-footer__addr { font-size: var(--text-sm); }
    .c-footer__links { gap: var(--space-6) var(--space-4); }
    .c-footer__bottom { padding-top: var(--space-5); padding-bottom: 26px; }
    .c-footer__copy { font-size: var(--text-label); line-height: 17.25px; }
}

/* 모바일 위로가기 (Figma 985:17184): 상설전시·기획전시 상세에서만 푸터 바로 위 표시. 배경 Primary/Background · 하단 40, 버튼 48 풀폭 · 1px Primary/Deep 테두리 · 14 SemiBold · 아이콘 14. PC 에서는 숨김 */
.c-go-top { display: none; }
@media (max-width: 767px) {
    .c-go-top { display: block; padding-bottom: var(--space-10); background: var(--color-primary-bg); }
    .c-go-top__btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: var(--size-btn-md); border: var(--border-w) solid var(--color-primary-deep); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); color: var(--color-primary-deep); background: var(--color-bg); cursor: pointer; }
    .c-go-top__btn .c-icon { width: 14px; height: 14px; }
    .c-go-top--plain { padding-top: var(--space-5); background: var(--color-bg); } /* 기획전시 상세 985:17383: 이전/다음 바(흰색) 아래 — 흰 배경, 상단 20 */
}

/* 06. 브레드크럼 breadscrum (498:14305) / 서브페이지 타이틀 배너 (498:12045) */
.c-breadcrumb { position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-breadcrumb); background: var(--color-breadcrumb-bg); color: var(--color-white); }
.c-breadcrumb .l-container { height: 100%; } /* 드롭다운이 열려도 브레드크럼 라벨 위치와 셀 높이를 유지한다. */
.c-breadcrumb__list { display: flex; align-items: center; height: 100%; }
.c-breadcrumb__list > li:first-child { display: flex; flex-shrink: 0; height: 100%; } /* 홈 셀의 구분선이 브레드크럼 바 전체 높이를 채우도록 한다. */
.c-breadcrumb__home { display: flex; align-items: center; justify-content: center; width: var(--size-breadcrumb); height: 100%; border-left: var(--border-w) solid var(--color-line-white); border-right: var(--border-w) solid var(--color-line-white); } /* Figma 498:11749: 홈 셀 좌·우 양쪽 구분선 */
.c-breadcrumb__home .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-breadcrumb__item { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--space-2); width: 180px; max-width: 100%; min-width: 0; height: 100%; padding-inline: var(--space-4); border-right: var(--border-w) solid var(--color-line-white); }
.c-breadcrumb__item[aria-current="page"] { flex: 1 1 0; width: auto; }
.c-breadcrumb__item:has(> .c-breadcrumb__arrow) { cursor: pointer; }
.c-breadcrumb__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--lh-normal); white-space: nowrap; }
.c-breadcrumb__arrow { display: inline-flex; flex-shrink: 0; width: var(--size-icon); height: var(--size-icon); align-items: center; justify-content: center; }
.c-breadcrumb__arrow .c-icon { width: var(--size-icon); height: var(--size-icon); }
/* 항목별 드롭다운 (JS: .is-open) */
/* 열림 상태 = Figma Dropdown type=선택중(498:14235) 구조: 셀 위에 흰 카드 1장이 겹쳐지고(라벨+위쪽 화살표가 카드 상단), 그 아래 옵션 42h·좌우 16 안쪽 여백·그림자 shadow_card·테두리 없음 */
.c-breadcrumb__label, .c-breadcrumb__arrow { position: relative; z-index: var(--z-raised); }
.c-breadcrumb__arrow .c-icon { transition: transform var(--dur-fast) var(--ease); }
.c-breadcrumb__item.is-open { z-index: var(--z-dropdown); color: var(--color-text); border-right-color: transparent; } /* 항목이 스택 컨텍스트가 되어 카드(z-base) 위에 라벨·화살표(z-raised)가 놓임 */
.c-breadcrumb__item.is-open .c-breadcrumb__arrow .c-icon { transform: rotate(180deg); }
.c-breadcrumb__menu { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-base); padding: 53px var(--space-4) 14px; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-card); }
.c-breadcrumb__item.is-open .c-breadcrumb__menu { display: block; }
.c-breadcrumb__menu a { display: block; height: var(--size-dropdown-option); padding-inline: 10px; line-height: var(--size-dropdown-option); font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-breadcrumb__menu a:hover, .c-breadcrumb__menu a.is-active { background: var(--color-bg-blue); }

.c-page-title { position: relative; height: var(--size-page-title); padding-top: var(--size-page-title-pt); color: var(--color-white); } /* overflow hidden 제거: 브레드크럼 드롭다운이 배너 아래로 펼쳐져야 함 */
.c-page-title__bg { position: absolute; inset: 0; z-index: var(--z-base); overflow: hidden; }
.c-page-title__bg img { width: 100%; height: 100%; object-fit: cover; }
.c-page-title__bg::after { content: ""; position: absolute; inset: 0; background: var(--gradient-page-title); }
.c-page-title__inner { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--space-1); }
.c-page-title__title { font-size: var(--text-h1); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-page-title__desc { font-size: var(--text-md); line-height: var(--lh-body-lg); }
.c-page-title .c-breadcrumb { z-index: var(--z-raised); }
@media (max-width: 1024px) {
    .c-page-title { height: auto; min-height: 280px; padding-top: 140px; padding-bottom: calc(var(--size-breadcrumb) + var(--space-8)); }
    /* 좁은 화면: 항목이 넘치면 가로 스크롤(스크롤바 숨김). overflow 가 드롭다운 카드를 잘라내므로
열림 카드는 JS(initBreadcrumb)가 position:fixed 로 항목 위치에 띄움 */
    .c-breadcrumb__list { overflow-x: auto; scrollbar-width: none; }
    .c-breadcrumb__list::-webkit-scrollbar { display: none; }
}
/* 모바일 (Figma breadscrum 686:27631): 바 44, 홈 44, 항목 px16 min 145.5, 라벨 14 SemiBold, 화살표 24 */
@media (max-width: 767px) {
    .c-page-title { height: var(--size-page-title); min-height: 0; padding-top: var(--size-page-title-pt); padding-bottom: 0; }
    .c-page-title--search { padding-top: var(--size-page-title-pt-search); } /* 검색결과 히어로: 제목 상단 110 */
    .c-page-title__inner { gap: var(--space-2); } /* 제목-서브타이틀 간격 8 (686:22696 / 686:22990) */
    .c-page-title__desc { line-height: var(--lh-normal); }
    .c-breadcrumb__list { overflow: visible; }
    .c-breadcrumb__list > li:nth-child(n+4) { display: none; } /* 모바일: 홈 + 두 단계 */
    .c-breadcrumb__list > li:not(:first-child) { flex: 1 1 0; min-width: 0; max-width: calc((100% - var(--size-breadcrumb)) / 2); } /* 항목은 홈을 뺀 폭을 2등분 (Figma 686:22995: 375 기준 145.5). depth1 만 있는 페이지(검색결과)도 절반 폭만 차지 */
    .c-breadcrumb__item { width: 100%; min-width: 0; padding-inline: var(--space-4); }
    .c-breadcrumb__label { overflow: hidden; text-overflow: ellipsis; }
    .c-breadcrumb__label { font-size: var(--text-sm); }
    .c-breadcrumb__arrow, .c-breadcrumb__arrow .c-icon { width: var(--space-6); height: var(--space-6); }
    .c-breadcrumb__menu { padding-top: 44px; }
}

/* 07. 섹션 헤더 / 목록 검색 폼 / 메인 검색 폼 */
/* 섹션 제목 40 + 설명 (메인: 18 lh1.5 gap0 / 서브: 20 lh34 gap12) */
.c-section-head { display: flex; flex-direction: column; gap: var(--section-head-gap); color: var(--color-text); }
.c-section-head__title { font-size: var(--text-h2); font-weight: var(--font-weight-bold); line-height: var(--lh-tight); }
.c-section-head__desc { font-size: var(--text-lg); line-height: var(--lh-body-lg); }
.c-section-head--main { gap: 0; }
.c-section-head--main .c-section-head__title { line-height: var(--lh-relaxed); }
.c-section-head--main .c-section-head__desc { font-size: var(--text-md); line-height: var(--lh-relaxed); }
.c-section-head--white { color: var(--color-white); }

/* 목록 상단 바 (498:12059): 총 N건 + 검색, 하단 2px 라인 */
.c-list-bar { display: flex; align-items: center; justify-content: flex-end; gap: 30px; padding-bottom: var(--space-4); border-bottom: var(--border-w-thick) solid var(--color-line); }
.c-list-bar__count { flex: 1 1 0; font-size: var(--text-lg); line-height: var(--lh-body-lg); }
.c-list-bar__count strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.c-form-search { display: flex; align-items: center; gap: var(--space-2); height: var(--size-btn-md); }
.c-form-search__input { width: var(--list-search-input-w); height: 100%; padding: var(--space-4); font-size: var(--text-base); line-height: var(--lh-relaxed); border: var(--border-w) solid var(--color-line); background: var(--color-bg); }
.c-form-search__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } /* 포커스 표시는 입력창 내부 테두리로 표시한다. */
/* 검색어 삭제 (btn_delete 790:16635): 입력창 안 우측 16, 18 원형(Text/Alternative) + 흰 X. 값이 있을 때만 표시(common.js), 클릭 시 비우고 submit → 전체 목록 */
.c-form-search__field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; height: 100%; } /* 모든 검색 입력창 공통 래퍼 (목록 검색·헤더 검색 패널·메인 통합검색·검색결과) */
.c-form-search__field > input { flex: 1 1 auto; min-width: 0; padding-right: calc(var(--space-4) + var(--size-icon-sm) + var(--space-2)); }
.c-search-panel__form .c-form-search__field > input { padding-right: calc(var(--space-5) + var(--size-icon-sm) + var(--space-2)); } /* 패널 입력창 padding-inline 20 기준 */
.c-search-panel__form .c-form-search__clear { right: var(--space-5); }
.c-search-hero__form .c-form-search__field > input { padding-right: calc(var(--space-2) + var(--size-icon-sm) + var(--space-2)); } /* 밑줄형: 좌우 패딩 없음 → X 는 검색 버튼 앞 8 */
.c-search-hero__form .c-form-search__clear { right: var(--space-2); }
.c-form-search__clear { position: absolute; top: 50%; right: var(--space-4); display: flex; align-items: center; justify-content: center; width: var(--size-icon-sm); height: var(--size-icon-sm); transform: translateY(-50%); border-radius: var(--radius-full); background: var(--color-text-alt); color: var(--color-white); }
.c-form-search__clear[hidden] { display: none; }
.c-form-search__clear:hover, .c-form-search__clear:focus-visible { background: var(--color-text-sub); }
.c-form-search__clear .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.c-form-search__btn { width: var(--list-search-btn); height: var(--list-search-btn); }

/* 메인 통합검색 (498:11004): 793 폭, 하단 2px deep 라인 + 태그 */
.c-search-hero { width: 793px; max-width: 100%; min-width: 0; }
.c-search-hero__form { display: flex; align-items: center; border-bottom: var(--border-w-thick) solid var(--color-primary-deep); }
.c-search-hero__input { flex: 1 1 0; min-width: 0; padding-block: var(--input-py); font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--color-text); }
.c-search-hero__input::placeholder { color: var(--color-text); }
.c-search-hero__tags { padding-top: var(--space-5); }
.c-search-hero__tags .c-tag {
    display: block; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; align-content: center;
}

/* 08. 탭 Tab (498:25241): h70 gap40, active Bold primary + 2px 밑줄 */
.c-tab { background: var(--color-bg); border-top: var(--border-w) solid var(--color-line); border-bottom: var(--border-w) solid var(--color-line); }
.c-tab__list { display: flex; align-items: center; gap: var(--tab-gap); overflow-x: auto; } /* Figma Tab 70 = 링크 높이, 별도 상하 패딩 없음 */
.c-tab__link {
    display: flex; align-items: center; justify-content: center; height: calc(var(--size-tab) - 2 * var(--border-w)); /* 상하 보더 포함 70 */
    font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: var(--lh-normal); color: var(--color-text-alt);
    white-space: nowrap; border-bottom: var(--tab-border-active) solid transparent;
    transition: color var(--dur-fast) var(--ease);
}
.c-tab__link:hover { color: var(--color-text); }
.c-tab__item.is-active .c-tab__link { color: var(--color-primary); font-weight: var(--font-weight-bold); border-bottom-color: var(--color-primary); }
/* 스크롤 시 상단 고정(sticky) — 상세페이지 앵커 탭 */
.c-tab--sticky { position: sticky; top: var(--size-header); z-index: var(--z-dropdown); } /* 고정 헤더(102) 아래에 붙음 */

/* 버튼형 탭 (연계기록물 498:15585): btn Black / Gray_line 48 gap8 */
.c-tab-btns { display: flex; align-items: center; gap: var(--space-2); }

/* 09. 드롭다운 Dropdown (498:14216): w140 h48 px16 py14; 상태 선택전/선택중/선택완료/disable */
.c-dropdown { position: relative; width: var(--size-dropdown-w); }
.c-dropdown--wide { width: 180px; } /* 캘린더 유형 필터 (498:13131) */
.c-dropdown__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; height: var(--size-dropdown-h); padding: var(--dropdown-py) var(--dropdown-px);
    font-size: var(--text-base); line-height: var(--lh-none); text-align: left;
    background: var(--color-bg); border: var(--border-w) solid var(--color-line); color: var(--color-text-alt);
}
.c-dropdown__toggle .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--color-text); transition: transform var(--dur-fast) var(--ease); }
.c-dropdown.is-selected .c-dropdown__toggle { color: var(--color-text); }
.c-dropdown.is-open .c-dropdown__toggle { color: var(--color-text); box-shadow: var(--shadow-card); }
.c-dropdown.is-open .c-dropdown__toggle .c-icon { transform: rotate(180deg); }
.c-dropdown.is-disabled .c-dropdown__toggle { color: var(--color-text-disabled); cursor: default; }
.c-dropdown.is-disabled .c-dropdown__toggle .c-icon { color: var(--color-text-disabled); }
.c-dropdown__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown);
    margin-top: -1px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background: var(--color-bg); border: var(--border-w) solid var(--color-line); border-top: 0; box-shadow: var(--shadow-card);
    max-height: calc(var(--size-dropdown-option) * 4 + var(--space-4)); overflow-y: auto;
}
.c-dropdown.is-open .c-dropdown__menu { display: block; }
.c-dropdown__option { display: flex; align-items: center; width: 100%; height: var(--size-dropdown-option); padding-inline: 10px; font-size: var(--text-base); line-height: var(--lh-none); text-align: left; color: var(--color-text); }
.c-dropdown__option:hover, .c-dropdown__option.is-active { background: var(--color-bg-blue); }
/* 커스텀 스크롤바 (498:14248): 3px pill line 색 */
.c-dropdown__menu::-webkit-scrollbar { width: 3px; }
.c-dropdown__menu::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: var(--radius-pill-lg); }

/* 10. 페이지네이션 page (498:14418): 화살표 38 (테두리 없음·사각), 번호 40 사각 (선택: 진한 배경)
화살표 둥근 테두리·번호 원형 hover 영역 → 모두 사각형, 화살표는 테두리 없이 아이콘만 */
.c-pagination { display: flex; align-items: center; justify-content: center; gap: var(--pager-gap); }
.c-pagination__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--size-pager-arrow); height: var(--size-pager-arrow);
    border: 0; border-radius: var(--radius-none); color: var(--color-text);
}
.c-pagination__arrow .c-icon { width: var(--size-icon); height: var(--size-icon); }
.c-pagination__arrow:hover { background: var(--color-interaction-hover); }
.c-pagination__arrow.is-disabled, .c-pagination__arrow:disabled { color: var(--color-text-disabled); cursor: default; background: transparent; pointer-events: none; }
.c-pagination__list { display: flex; align-items: center; gap: var(--pager-num-gap); height: var(--size-pager-num); }
.c-pagination__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--size-pager-num); height: var(--size-pager-num);
    font-size: var(--text-base); line-height: var(--lh-pager); color: var(--color-text); border-radius: var(--radius-none);
}
.c-pagination__num:hover { background: var(--color-interaction-hover); }
.c-pagination__item.is-active .c-pagination__num,
.c-pagination__num[aria-current="page"] { background: var(--color-text); color: var(--color-white); font-weight: var(--font-weight-medium); }

/* 11. 체크박스 Checkbox (498:14731): 20 정사각 line */
.c-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: var(--space-11); }
.c-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-checkbox__box { display: inline-flex; align-items: center; justify-content: center; width: var(--size-checkbox); height: var(--size-checkbox); border: var(--border-w) solid var(--color-line); background: var(--color-bg); color: var(--color-white); }
.c-checkbox__box .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); opacity: 0; } /* icn_check_box 20 프레임 1:1 */
.c-checkbox__input:checked + .c-checkbox__box { background: var(--color-primary); border-color: var(--color-primary); }
.c-checkbox__input:checked + .c-checkbox__box .c-icon { opacity: 1; }
.c-checkbox__input:focus-visible + .c-checkbox__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.c-checkbox__label { font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--color-text-sub); }

/* 12. 안내팝업 (498:14736): w591, 본문 px32 pt30 pb44, 푸터 h76 */
.c-dimmer { position: fixed; inset: 0; z-index: var(--z-dimmer); background: var(--color-dimmer); }
.c-popup { position: fixed; inset: 0; z-index: var(--z-popup); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.c-popup[hidden], .c-dimmer[hidden] { display: none; }
.c-popup__dialog { width: var(--popup-w); max-width: 100%; max-height: 100%; overflow: auto; background: var(--color-bg); filter: drop-shadow(var(--shadow-popup)); }
.c-popup__body { position: relative; padding: 30px var(--space-8) var(--space-11); }
.c-popup__close { position: absolute; top: 26px; right: var(--space-8); display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-xl); height: var(--size-icon-xl); color: var(--color-text-sub); } /* Button-팝업닫기 498:14738: 42 흰 바탕·테두리 없음, X 12 stroke 2 Text/Sub (2026-09-30 디자인 재확인) */
.c-popup__close .c-icon { width: var(--size-icon-md); height: var(--size-icon-md); }
.c-popup__head { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); padding-right: var(--size-icon-xl); }
.c-popup__title { font-size: var(--text-h4); font-weight: var(--font-weight-bold); line-height: var(--lh-normal); }
.c-popup__desc { font-size: var(--text-base); line-height: var(--lh-normal); color: var(--color-text-sub); }
.c-popup__body > .c-popup__head + a,
.c-popup__body > .c-popup__head + img { display: block; margin-top: var(--space-8); }
.c-webservice-remark { white-space: pre-wrap; overflow-wrap: anywhere; }
.c-popup__mobile-break { display: none; }
.c-popup__box { display: flex; align-items: center; gap: 22px; height: 72px; margin-top: var(--space-8); padding: 22px var(--space-6); background: var(--color-primary-bg); border: var(--border-w) solid var(--color-line); }
.c-popup__box-label { font-size: var(--text-sm); font-weight: var(--font-weight-bold); line-height: var(--lh-normal); color: var(--color-text-sub); }
.c-popup__box-value { font-size: var(--text-md-plus); font-weight: var(--font-weight-bold); line-height: var(--lh-normal); }
.c-popup__list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-w) solid var(--color-line); }
.c-popup__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm-plus); line-height: var(--lh-normal); color: var(--color-text-sub); }
.c-popup__item::before { content: ""; flex: 0 0 auto; width: var(--size-bullet); height: var(--size-bullet); border-radius: var(--radius-full); background: currentColor; } /* 불릿은 항목 글자색(Text/Sub)과 동일 */
.c-popup__footer { display: flex; align-items: center; justify-content: space-between; min-height: var(--popup-footer-h); padding: 14px var(--space-8); border-top: var(--border-w-hair) solid var(--color-line); }
.c-popup__footer .c-btn { width: 91px; }

/* 메인 팝업: PC는 페이지를 따라 이어지는 3열 목록, 모바일은 기존 단일 팝업. */
[data-popup-group][data-popup-layout="grid"] {
    position: absolute; inset-inline: 0; z-index: var(--z-popup);
    min-height: 100vh; min-height: 100dvh; padding: 48px 24px;
    display: flex; align-items: center; justify-content: center;
}
[data-popup-layout="grid"] [data-popup-grid] {
    display: grid; grid-template-columns: repeat(var(--popup-columns, 3), minmax(0, 1fr));
    align-items: start; gap: 24px; width: 100%;
    max-width: calc(var(--popup-columns, 3) * 440px + (var(--popup-columns, 3) - 1) * 24px);
}
[data-popup-layout="grid"] .c-popup { position: static; display: block; padding: 0; min-width: 0; }
[data-popup-layout="grid"] .c-popup[hidden] { display: none; }
[data-popup-layout="grid"] .c-popup__dialog { width: 100%; max-height: none; overflow: visible; }
[data-popup-layout="grid"] .c-popup__body { padding: 24px; }
[data-popup-layout="grid"] .c-popup__close { top: 20px; right: 24px; }
[data-popup-layout="grid"] .c-popup__title,
[data-popup-layout="grid"] .c-popup__desc { overflow-wrap: anywhere; }
[data-popup-layout="grid"] .c-popup__footer { flex-wrap: wrap; gap: 12px; padding-inline: 24px; }
[data-popup-group][data-popup-layout="single"],
[data-popup-layout="single"] [data-popup-grid] { display: contents; }

/* 13. 카드 */
/* Exhibition_Card (498:14151): Small 340×481 | Large 437.33 (438.67/625) | Catalog */
.c-card-exhibit { display: flex; flex-direction: column; width: var(--card-exhibit-w); }
.c-card-exhibit__thumb { display: block; width: 100%; height: var(--card-exhibit-h); overflow: hidden; background: var(--color-line); }
.c-card-exhibit__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.c-card-exhibit:hover .c-card-exhibit__thumb img { transform: scale(1.03); }
.c-card-exhibit__body { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); }
.c-card-exhibit__text { display: flex; flex-direction: column; gap: var(--space-1); }
.c-card-exhibit__title { font-size: var(--text-h6); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-card-exhibit__meta { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
.c-card-exhibit__mobile-badge { display: none; }
.c-card-exhibit__details { display: flex; flex-wrap: nowrap; }
.c-card-exhibit__details div { display: flex; min-width: 0; max-width: 100%; }
.c-card-exhibit__details div:first-child { flex: 0 0 auto; }
.c-card-exhibit__details div + div { flex: 1 1 0; }
.c-card-exhibit__details dt { display: none; }
.c-card-exhibit__details div + div::before { content: "·"; margin-inline: var(--space-1); flex-shrink: 0; }
.c-card-exhibit--large { width: var(--card-exhibit-lg-w); }
.c-card-exhibit--large .c-card-exhibit__thumb { height: auto; aspect-ratio: var(--card-exhibit-lg-ratio); }
.c-card-exhibit--large .c-card-exhibit__title { font-size: var(--text-h5); }
.c-card-exhibit--catalog { width: var(--card-exhibit-lg-w); }
.c-card-exhibit--catalog .c-card-exhibit__thumb { height: auto; aspect-ratio: var(--card-exhibit-lg-ratio); background: var(--color-bg-blue); padding: 8.67% 8.25%; }
.c-card-exhibit--catalog .c-card-exhibit__thumb img { object-fit: contain; }
.c-card-exhibit--catalog .c-card-exhibit__body { gap: var(--space-2); }
.c-card-exhibit--catalog .c-card-exhibit__title { font-size: var(--text-h5); }
.c-card-exhibit--fluid { width: 100%; }
.c-card-exhibit--fluid .c-card-exhibit__thumb { height: auto; aspect-ratio: 340 / 481; }

/* 프로그램 카드 3종
--feature (498:11036): 699×698, 이미지 460, 본문 px24 pb24, 메타 아이콘 18
--list (498:14268): 697×216.55, 이미지 200 좌측, py16, gap24
--grid (554:22600): 452, 이미지 438.67/625, dl 목록 */
.c-card-program { display: flex; background: var(--color-bg); border: var(--border-w) solid var(--color-line); }
.c-card-program__thumb { display: block; overflow: hidden; background: var(--color-line); flex: 0 0 auto; }
.c-card-program__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-card-program__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); flex: 1 1 0; min-width: 0; }
.c-card-program__info { display: flex; flex-direction: column; gap: var(--space-3); }
.c-card-program__text { display: flex; flex-direction: column; gap: var(--space-1); }
.c-card-program__title { font-size: var(--text-h6); font-weight: var(--font-weight-bold); line-height: var(--lh-relaxed); }
.c-card-program__desc { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-text-sub); white-space: pre-line; overflow-wrap: anywhere; }
.c-card-program__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.c-card-program__meta-item { display: inline-flex; align-items: flex-start; gap: var(--space-1); min-width: 0; max-width: 100%; font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: var(--lh-relaxed); color: var(--color-text-sub); overflow-wrap: anywhere; }
.c-card-program__meta-item .c-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); flex-shrink: 0; }
.c-card-program--feature { flex-direction: column; width: var(--card-program-w); min-height: var(--card-program-h); padding-bottom: var(--space-6); gap: var(--space-6); }
.c-card-program--feature .c-card-program__thumb { width: 100%; height: var(--card-program-img-h); }
.c-card-program--feature .c-card-program__body { padding-inline: var(--space-6); }
.c-card-program--list { flex-direction: row; gap: var(--space-6); width: 100%; min-height: var(--card-program-list-h); }
.c-card-program--list .c-card-program__thumb { width: var(--card-program-list-img-w); align-self: stretch; }
.c-card-program--list .c-card-program__body { padding-block: var(--space-4); padding-right: var(--space-6); }
.c-card-program--list .c-card-program__title { font-size: var(--text-lg); }
.c-card-program--list .c-card-program__desc { font-size: var(--text-base); }
.c-card-program--grid { flex-direction: column; width: var(--card-program-grid-w); border: 0; }
.c-card-program--grid .c-card-program__thumb { width: 100%; aspect-ratio: var(--card-exhibit-lg-ratio); }
.c-card-program--grid .c-card-program__body { padding-top: var(--space-5); gap: 0; justify-content: flex-start; }
.c-card-program--grid .c-card-program__title { padding-top: var(--space-3); font-size: var(--text-xl); }
.c-card-program__dl { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.c-card-program__dl-row { display: flex; gap: var(--space-3); }
.c-card-program__dl-row dt { color: var(--color-text-sub); flex: 0 0 auto; white-space: nowrap; }
.c-card-program__dl-row dd { color: var(--color-text); }
.c-card-program__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 13px; border-top: var(--border-w) solid var(--color-line); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-text-sub); }
@media (max-width: 1024px) {
    .c-card-program--feature, .c-card-program--grid { width: 100%; }
    .c-card-program--list { flex-direction: column; }
    .c-card-program--list .c-card-program__thumb { width: 100%; height: 220px; }
    .c-card-program--list .c-card-program__body { padding-inline: var(--space-6); }
}

/* 연계 기록물 카드 (498:15593): 이미지 333.48 (bg line) + 본문 p24 gap8 */
.c-card-record { display: flex; flex-direction: column; background: var(--color-bg); border: var(--border-w) solid var(--color-line); height: 100%; }
.c-card-record__thumb { position: relative; display: block; height: var(--card-record-img-h); background: var(--color-line); overflow: hidden; }
.c-card-record__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-card-record--contain .c-card-record__thumb { padding: var(--space-4); }
.c-card-record--contain .c-card-record__thumb img { object-fit: contain; }
.c-card-record__thumb img.u-object-contain { object-fit: contain; }
.c-card-record__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.c-card-record__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: normal; }
.c-card-record__desc { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--color-text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-card-record__date { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--color-text-sub); }

/* 14. 전시 연계 자료 섹션 (498:15578 기록물 / 498:15635 컬렉션 / 498:15704 콘텐츠) / 검색결과 아이템 */
.c-section-related { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.c-section-related__head { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.c-section-related__bar { display: flex; align-items: center; justify-content: space-between; }
.c-section-related__count { font-size: var(--text-lg); line-height: var(--lh-body-lg); }
.c-section-related__count strong { font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.c-section-related__panel { width: 100%; }
.c-section-related__panel[hidden] { display: none; }

/* serach_list (498:14536): 상단 라인, py32, 썸네일 166×237 + gap36 */
.c-search-item { display: flex; align-items: center; gap: var(--search-item-gap); padding-block: var(--space-8); border-top: var(--border-w) solid var(--color-line); }
.c-search-item__thumb { display: block; width: var(--search-item-img-w); height: var(--search-item-img-h); flex: 0 0 auto; background: var(--color-line); overflow: hidden; }
.c-search-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-search-item--program .c-search-item__thumb img { object-fit: contain; }
.c-search-item__body { flex: 1 1 0; min-width: 0; }
.c-search-item__title { display: block; padding-top: var(--space-4); font-size: var(--text-search-title); font-weight: var(--font-weight-semibold); line-height: var(--lh-relaxed); color: var(--color-text); } /* Figma serach_list 제목 Text/Normal */
.c-search-item__title:hover { text-decoration: underline; }
.c-search-item__dl { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 22px; font-size: var(--text-base); line-height: var(--lh-relaxed); }
.c-search-item__dl-row { display: flex; gap: var(--space-5); }
.c-search-item__dl-row dt { width: 60px; flex: 0 0 auto; color: var(--color-text-sub); white-space: nowrap; }
.c-search-item__dl-row dd { color: var(--color-text); }
.c-search-list > .c-search-item:last-child { border-bottom: var(--border-w) solid var(--color-line); }
@media (max-width: 1024px) {
    .c-search-item { align-items: flex-start; gap: var(--space-5); }
    .c-search-item__thumb { width: 120px; height: 171px; }
}

/* 모바일 공통 컴포넌트 — 767px 이하 (Figma 375 프레임, docs/MOBILE-DESIGN-ANALYSIS.md 2-3·2-4)
토큰 재정의(tokens.css)로 따라오지 않는 구조 변경만 여기서 처리 */
/* 목록의 긴 제목·메타정보는 카드 안에서 표시하고, 전문은 상세에서 확인한다. */
.c-card-exhibit, .c-card-exhibit__body, .c-card-exhibit__text,
.c-card-program, .c-card-program__info, .c-card-program__text,
.c-card-record, .c-card-record__body { min-width: 0; max-width: 100%; }
.c-card-exhibit__title, .c-card-program__title, .c-card-record__title,
.c-search-item__title,
p.c-card-exhibit__meta, .c-card-exhibit__details dd,
.c-card-program__meta-item span, .c-card-program__dl-row dd, .c-search-item__dl-row dd, .c-card-record__date {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
.c-card-exhibit__title a, .c-card-program__title a, .c-card-record__title a { overflow-wrap: anywhere; }
.c-card-exhibit__details dd, .c-card-program__dl-row dd, .c-search-item__dl-row dd { flex: 1 1 auto; }
p.c-card-exhibit__meta { display: flex; white-space: nowrap; }
p.c-card-exhibit__meta > span:first-child { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
p.c-card-exhibit__meta > span + span { flex: 1 1 auto; min-width: 0; margin-left: var(--space-1); }
.c-card-exhibit__details dd,
p.c-card-exhibit__meta > span + span {
    display: block; -webkit-line-clamp: unset;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

@media (max-width: 767px) {
    /* 버튼·태그 */
    .c-btn--more { height: 44px; padding-inline: var(--space-3); font-size: var(--text-sm); }            /* 기록물 더보기 122×44 */
    .c-tag { height: auto; padding: var(--space-2) var(--space-3); font-size: var(--text-label); }       /* Search_Tag mobile 13px py8 px12 */
    /* 목록 필터 바: 드롭다운 2개 균등 → 검색 폼 전체 폭 (686:35074) */
    .c-list-bar { flex-direction: column; align-items: stretch; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 0; } /* 모바일 전시목록: 총 N건 아래 2px 선 없음 */
    .c-list-bar__count { order: 2; font-size: var(--text-base); }
    .c-list-bar__tools { order: 1; flex-wrap: wrap; gap: var(--space-3); }
    .c-list-bar__tools .c-dropdown { flex: 1 1 calc(50% - var(--space-3) / 2); width: auto; }
    .c-form-search { flex: 1 1 100%; width: 100%; height: var(--size-btn-md); }
    .c-form-search__input { flex: 1 1 0; width: auto; min-width: 0; }
    .c-form-search__btn { width: var(--size-btn-md); height: var(--size-btn-md); }
    /* 전시 카드: 1열 전체 폭, 썸네일 비율 유지. 메인 카드 제목 24·메타 18 (663:12960), Large(목록) 22 */
    .c-card-exhibit { width: 100%; }
    .c-card-exhibit__thumb { height: auto; aspect-ratio: 340 / 481; }
    .c-card-exhibit__title { font-size: 24px; }
    .c-card-exhibit__meta { font-size: 18px; }
    .c-card-exhibit--large, .c-card-exhibit--catalog { width: 100%; }
    .c-card-exhibit--large .c-card-exhibit__title, .c-card-exhibit--catalog .c-card-exhibit__title { font-size: var(--text-h5); }
    .c-card-exhibit--large .c-card-exhibit__meta { font-size: var(--text-md); }
    .c-card-exhibit__mobile-badge { display: inline-flex; }
    .c-card-exhibit__details { flex-direction: column; gap: var(--space-1); }
    .c-card-exhibit__details div { gap: var(--space-5); width: 100%; }
    .c-card-exhibit__details dt { display: block; width: var(--size-meta-label); flex: 0 0 var(--size-meta-label); }
    .c-card-exhibit__details div + div::before { display: none; }
    .c-card-exhibit__details dd { color: var(--color-text); }
    .c-card-exhibit--large .c-card-exhibit__thumb { aspect-ratio: 420 / 594; }
    /* 프로그램 카드: 메인 대표·목록형 모두 Program_list mobile (663:13363) — 이미지 220, 본문 px20 pb24, 제목 20, 설명 16, 메타 14 */
    .c-card-program--feature, .c-card-program--list { flex-direction: column; width: 100%; min-height: 0; gap: var(--space-6); padding-bottom: var(--space-6); }
    .c-card-program--feature .c-card-program__thumb, .c-card-program--list .c-card-program__thumb { width: 100%; height: 220px; aspect-ratio: auto; }
    .c-card-program--feature .c-card-program__body, .c-card-program--list .c-card-program__body { padding: 0 var(--space-5); gap: var(--space-7); }
    .c-card-program--feature .c-card-program__title, .c-card-program--list .c-card-program__title { font-size: 20px; }
    .c-card-program--feature .c-card-program__desc, .c-card-program--list .c-card-program__desc { font-size: var(--text-base); }
    .c-card-program__meta { gap: var(--space-2) 18px; }
    /* 프로그램 목록 카드(--grid) = 검색결과 세로형과 동일 (686:35528): 제목 22, dl dt 60 gap 20 */
    .c-card-program--grid { width: 100%; }
    .c-card-program--grid .c-card-program__title { padding-top: 0; font-size: var(--text-search-title); }
    .c-card-program--grid .c-card-program__body { gap: var(--space-3); }
    .c-card-program--grid .c-badge-group { margin-bottom: 0; }
    .c-card-program__dl { padding-top: 0; gap: var(--space-1); }
    .c-card-program__dl-row { gap: var(--space-5); }
    .c-card-program__dl-row dt { width: 60px; }
    /* 연계 기록물 카드 (686:28072): 이미지 245, 본문 p20, 제목 18, 설명 16, 연도 14 */
    .c-card-record__thumb { height: 245px; }
    .c-card-record__body { padding: var(--space-6) var(--space-5); }
    .c-card-record__title { font-size: var(--text-h7); }
    .c-card-record__desc { -webkit-line-clamp: 3; }
    /* 연계 자료 섹션 바: 탭 → 총 N건 세로 (686:28072 Tab Container) */
    .c-section-related { gap: var(--space-6); }
    .c-section-related__head { gap: var(--space-8); }
    .c-section-related__bar { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .c-section-related__count { font-size: var(--text-base); }
    /* 검색결과 항목: 세로형 (686:19658) — 썸네일 전체 폭 420/594, 뱃지 → 제목 22 → dl */
    .c-search-item { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: var(--space-5) 0 var(--space-8); }
    .c-search-item__thumb { width: 100%; height: auto; aspect-ratio: 420 / 594; }
    .c-search-item__body .c-badge-group { margin-bottom: var(--space-3); }
    .c-search-item__title { padding-top: 0; line-height: var(--lh-relaxed); }
    .c-search-item__dl { padding-top: var(--space-1); gap: var(--space-1); }
    /* 안내 팝업 모바일 (m_전시관_메인_팝업 764:17107): 326 폭 중앙, 본문 패딩 20/20/32, X 닫기 없음(푸터 '닫기'), 제목 22 / 본문 15,
강조 박스 세로 배치(라벨 위·값 아래 16), 리스트 불릿 상단 정렬(24 행 기준) + 본문 15 lh 1.5, 푸터 체크박스 라벨 14 */
    .c-popup { padding: var(--space-5); }
    .c-popup__body { padding: var(--space-5) var(--space-5) var(--space-8); }
    .c-popup__close { top: var(--space-7); right: calc(var(--space-7) / 2); width: var(--space-8); height: var(--space-8); } /* 모바일 Button-팝업닫기 764:17109: 32 정사각, 우측 14 · 상단 27.5, 테두리 없음, X 12 (Figma 실측) */
    .c-popup__title { font-size: var(--text-h5); letter-spacing: -0.55px; }
    .c-popup__desc { font-size: var(--text-sm-plus); }
    .c-popup__mobile-break { display: inline; }
    .c-popup__box { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); padding: 22px var(--space-5); }
    .c-popup__box-value { font-size: var(--text-base); }
    .c-popup__item { align-items: flex-start; line-height: var(--lh-relaxed); }
    .c-popup__item::before { margin-top: calc((var(--space-6) - var(--size-bullet)) / 2); }
    .c-popup__footer { padding-inline: var(--space-5); }
    .c-popup__footer .c-checkbox__label { font-size: var(--text-sm); }
}