/* 공통 색상·글자·간격 변수. 기준: Figma 전시관 Q8jBM4alEGFB7oS8MM5RHI. */ :root { /* 1. Color — Figma Variables (Color 섹션 498:14042) */ /* Primary */ --color-primary: #1a3a83; /* Primary/default */ --color-primary-deep: #0a1d45; /* Primary/Deep */ --color-primary-bg: #fafbfc; /* Primary/Background */ /* Text */ --color-text: #22263f; /* Text/Normal */ --color-text-sub: #4c4f63; /* Text/Sub */ --color-text-alt: #868d98; /* Text/Alternative */ --color-text-disabled: #babcc0; /* Text/Disable */ /* Background */ --color-bg: #ffffff; /* Background/Default */ --color-bg-blue: #f2f6fc; /* Background/Blue */ /* Line */ --color-line: #dddee0; /* Line/Normal */ --color-line-white: rgba(255, 255, 255, 0.2); /* Line/White #ffffff33 */ --color-line-black: rgba(0, 0, 0, 0.2); /* Line/Black #00000033 */ /* Interaction (배경색 위에 겹쳐 쓰는 오버레이) */ --color-interaction-hover: rgba(0, 0, 0, 0.05); /* Interaction/hover #0000000d */ --color-interaction-press: rgba(0, 0, 0, 0.15); /* Interaction/press #00000026 */ /* Button */ --color-btn-black: #22263f; /* Button/Black */ /* Badge */ --color-badge-text-blue: #234c91; /* Badge/Text/Blue */ --color-badge-bg-bright: #eaf0fa; /* Badge/Background/Briht_blue */ --color-badge-bg-gray: #eef0f3; /* Badge/Background/Gray */ --color-badge-text-gray: #69707d; /* Badge/Text/Gray */ /* Static */ --color-white: #ffffff; /* Static/White */ --color-black: #000000; /* Static/Black */ --color-logo-navy: #0a1d45; /* Logo/Navy */ /* Material */ --color-dimmer: rgba(10, 29, 69, 0.6); /* 팝업 뒤 배경. 불투명도60%. */ /* --- Figma Variables 미등록, 화면에 직접 지정된 색 --- */ --color-badge-bg-blue: #173e83; /* 배지 "전시중" 배경 (Exhibition Status) */ --color-badge-line-bright: #bccbe4; /* 배지 "전시 예정" 테두리 */ --color-badge-bg-ongoing-lg:#1b3b86; /* 기획전시 상세 상단 "전시중" 배지 배경 */ --color-footer-bg: #1a2130; /* 푸터 배경 */ --color-text-muted-444: #444444; /* 기획전시 상세 상단 라벨 "2026 기획전시" */ --color-subway-2: #338350; /* 오시는길 2호선 배지 */ --color-faq-reserve: #8b5cf6; /* FAQ 배지 '예약' */ --color-faq-reserve-bg: rgba(139, 92, 246, 0.1); --color-faq-program: #398783; /* FAQ 배지 '프로그램' */ --color-faq-program-bg: rgba(57, 135, 131, 0.1); --color-faq-traffic: #df9d22; /* FAQ 배지 '교통 · 편의' */ --color-faq-traffic-bg: rgba(223, 157, 34, 0.1); --color-cal-holiday: #fd5454; /* 캘린더 일요일·휴관 숫자 */ --color-cal-group: #f69125; /* 캘린더 단체 예약 */ --color-cal-group-bg: rgba(246, 145, 37, 0.1); --color-cal-general: #fd5454; /* 캘린더 일반 일정 (2026-10-06 Figma 686:38778 — 회색 → 빨강, 휴관 색과 동일) */ --color-cal-general-bg: rgba(253, 84, 84, 0.1); /* 일반 일정 배경 (10%) */ --color-cal-exhibit-bg: rgba(26, 58, 131, 0.1); /* 전시 일정 (primary 10%) */ --color-cal-other-bg: #f9fafb; /* 이전/다음 달 셀 */ --color-pager-line: #e4e6e9; /* 페이지네이션 화살표 버튼 테두리 */ --color-title-overlay: #0a1a40; /* 서브페이지 타이틀 배너 오버레이 양끝 */ --color-title-overlay-mid: rgba(27, 59, 134, 0.8); /* 서브페이지 타이틀 배너 오버레이 중앙 */ --color-breadcrumb-bg: rgba(8, 29, 77, 0.6); /* 브레드크럼 바 배경 */ --color-header-bg: rgba(0, 0, 0, 0.1); /* 헤더(투명 상태) 배경 */ --color-banner-shade: 7, 9, 8; /* 메인 배너 오버레이 기준색 rgb(7,9,8) — rgba(var(--color-banner-shade), a) 형태로 사용 */ --color-white-82: rgba(255, 255, 255, 0.82); /* 메인 배너 서브 카피 */ --color-white-35: rgba(255, 255, 255, 0.35); /* 메인 배너 진행바 트랙 */ --color-search-label: #252b45; /* 헤더 검색 패널 라벨·검색결과 제목 */ --color-search-border: #183b80; /* 헤더 검색 패널 입력창 테두리(2px) */ --color-cat-exhibit-bg: rgba(26, 58, 131, 0.1); /* 검색결과 "전시" 구분 배지 배경 */ --color-cat-program-bg: rgba(57, 135, 131, 0.1); /* 검색결과 "프로그램" 구분 배지 배경 */ --color-cat-program-text: #398783; /* 검색결과 "프로그램" 구분 배지 글자 */ --color-badge-line-gray: #d8dce2; /* 배지 "종료/접수 마감" 테두리 */ --color-prevnext-bg: #ffffff; /* 기획전시 상세 이전/다음 바 배경 (Figma 498:13869 / 686:32291: 흰색 + 상단 1px 선, 2026-10-08 수정) */ --color-search-title-dark: #110c07; /* 검색결과 타이틀 배너 바탕 */ /* 2. Typography — Pretendard 단일 패밀리, 자간 -2.5% 일괄 (로컬 폰트: /fonts/ — base.css @font-face 에서 로드) */ --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --font-weight-light: 300; /* Pretendard:Light — 스토리 번호(72) */ --font-weight-regular: 400; /* Pretendard:Regular */ --font-weight-medium: 500; /* Pretendard:Medium */ --font-weight-semibold: 600; /* Pretendard:SemiBold */ --font-weight-bold: 700; /* Pretendard:Bold */ --font-weight-extrabold: 800; /* Pretendard:ExtraBold (캘린더 월 표시·오늘 날짜) */ --letter-spacing: -0.025em; /* 전체 -2.5% (예: 54px → -1.35px, 16px → -0.4px) */ /* 글자 크기 (Figma 실측) */ --text-display: 72px; /* 상설전시 스토리 번호 01/02/03 (Light) */ --text-hero: 54px; /* 메인 배너 헤드카피 (Bold, lh 1.2) */ --text-h1: 48px; /* 서브페이지 타이틀 (Bold, lh 1.5) */ --text-h2: 40px; /* 섹션 제목 (Bold, lh 1.2 / 1.3 / 1.5) */ --text-h3: 32px; /* 스토리 소제목 (Bold, lh 1.5) */ --text-h4: 28px; /* 온라인관람 제목·팝업 제목 (Bold, lh 1.5 / 1.4) */ --text-h5: 26px; /* 전시 카드 Large 제목 (Bold) */ --text-h6: 24px; /* 카드 제목·소제목 (Bold / SemiBold) */ --text-search-title: 25px; /* 검색결과 아이템 제목 (SemiBold, lh 1.5) */ --text-xl: 22px; /* 관람정보 바 (SemiBold / Regular, lh 1.4) */ --text-lg: 20px; /* 섹션 설명·상세 본문 (Regular, lh 34px / 1.5) */ --text-md-plus: 19px; /* 팝업 강조 날짜 (Bold, lh 1.4) */ --text-md: 18px; /* 기본 본문·카드 메타 (Regular, lh 1.5 / 1.6 / 34px) */ --text-base: 16px; /* 버튼·탭·GNB 보조·리스트 (Medium, lh 1.5 / 20.25px) */ --text-sm-plus: 15px; /* 관람안내 항목·팝업 리스트 (lh 1.4 / 23.25px) */ --text-sm: 14px; /* 배지·메타·날짜 (SemiBold / Regular, lh 1.5 / 1.4) */ --text-xs: 12.5px; /* 푸터 주소 (lh 21.25px) */ --text-xxs: 11.5px; /* 푸터 저작권 (lh 17.25px) */ --text-detail-title: 32px; /* 모바일 상세 제목 */ --text-card-title: 20px; /* 기록물 카드 제목 */ --text-transport-title: 21px; /* 모바일 교통수단 제목 */ --space-intro-mobile: 30px; /* 프로그램 소개 상하 여백 */ --text-label: 13px; /* 기획전시 상세 "SECTION 01" 라벨 (Medium) */ --text-h7: 21px; /* 오시는길 행 제목·프로그램 소제목 (Bold, lh 1.5) */ /* 행간 (단위 없는 값은 배수, px 값은 Figma 고정 행간) */ --lh-none: 1; --lh-tight: 1.2; --lh-snug: 1.3; --lh-normal: 1.4; --lh-relaxed: 1.5; --lh-loose: 1.6; --lh-para: 1.8; /* 인사말·소개 본문 18px */ --lh-body-lg: 34px; /* 20px·18px 설명문 고정 행간 */ --lh-btn: 20.25px; /* 버튼 텍스트 */ --lh-pager: 24px; /* 페이지 번호 */ --lh-footer-addr: 21.25px; /* 푸터 주소 12.5px */ --lh-footer-copy: 17.25px; /* 푸터 저작권 11.5px */ --lh-guide-value: 23.25px; /* 관람안내 항목 값 15px */ --lh-footer-link: 18px; /* 푸터 링크 14px */ --lh-submenu: 2.6; /* 헤더 메가메뉴 하위 항목 16px */ --lh-detail-para: 29.6px; /* 기획전시 상세 전시구성 본문 16px */ --lh-search-summary: 33px; /* 검색결과 요약 22px */ --lh-search-tab: 25.5px; /* 검색결과 탭 18px */ /* 3. Layout — 1920 캔버스 기준 */ --l-canvas: 1920px; --l-container: 1420px; /* 콘텐츠 고정폭 (1920 에서 좌우 250 여백은 margin auto 로 생김) */ --l-container-fluid: 90%; /* 1420 미만 뷰포트의 콘텐츠 폭 */ --l-side: calc((100% - var(--l-container)) / 2); /* 컨테이너 바깥 한쪽 여백 (absolute 요소 정렬용) */ --l-side-fluid: calc((100% - var(--l-container-fluid)) / 2); /* Figma 일부 섹션의 240px 여백은 250px로 통일 — */ --size-header: 102px; /* 헤더 높이 */ --size-breadcrumb: 60px; /* 브레드크럼 바 높이 */ --size-page-title: 391px; /* 서브페이지 타이틀 배너 높이(브레드크럼 포함) */ --size-page-title-pt: 160px; /* 타이틀 배너 상단 여백 */ --size-footer: 325px; /* 푸터 높이 */ --size-logo-w: 251px; --size-logo-h: 48px; --size-gnb-item: 100px; /* GNB 항목 폭 */ --size-gnb-gap: 55.68px;/* GNB 항목 간격 (Figma 실측) */ --size-gnb-py: 38px; --size-submenu-item: 42px; /* 메가메뉴 하위 항목 높이 */ --size-submenu-w: 85px; /* 메가메뉴 하위 항목 폭 */ --size-submenu-pt: 22px; /* 메가메뉴 패널 상단 여백 */ --size-submenu-pb: 40px; /* 메가메뉴 패널 하단 여백 */ --size-search-panel: 236px; /* 헤더 검색 패널 높이 */ --size-search-panel-w: 800px; /* 헤더 검색 패널 폼 폭 */ --size-search-input: 60px; /* 헤더 검색 입력창 높이 */ --size-search-input-btn: 64px; /* 헤더 검색 실행 버튼 폭 */ /* 배너·히어로 */ --size-main-banner: 978px; /* 메인 배너 높이 */ --size-main-banner-pt: 400px; /* 메인 배너 카피 상단 여백 */ --size-info-bar: 102px; /* 관람정보 바 높이 (py 16) */ --size-sub-banner: 700px; /* 상설전시 배너 높이 */ /* 4. Spacing — 4px 기반 실측 값 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 34px; /* 전시자료 다운로드 카드 패딩 */ --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-13: 52px; --space-14: 54px; /* 상설전시 구성 섹션 헤더-본문 간격 */ --space-15: 64px; /* 기획전시 상세 포스터-텍스트 간격 */ --space-16: 80px; /* 섹션 세로 패딩(소) / 스토리 이미지-텍스트 간격 */ --space-17: 100px; /* 섹션 세로 패딩(대) */ --space-18: 196px; /* 메인 배너 카피-하단 간격 */ /* 자주 쓰는 의미 토큰 */ --section-py: var(--space-17); /* 100 */ --section-py-sm: var(--space-16); /* 80 */ --section-head-gap: var(--space-3); /* 제목-설명 12 */ --section-body-gap: var(--space-10); /* 헤더-콘텐츠 40 */ --grid-gap: var(--space-6); /* 카드 그리드 24 */ --grid-gap-sm: var(--space-5); /* 전시 카드 4열 20 */ --card-pad: var(--space-6); /* 카드 내부 24 */ --card-pad-lg: var(--space-8); /* 소식·관람안내 카드 32 */ /* 5. Component sizes */ --size-btn-sm: 42px; /* btn size 42 (폰트 14) */ --size-btn-md: 48px; /* btn size 48 (폰트 16) */ --size-btn-lg: 52px; /* btn size 52 (폰트 16) */ --btn-px: 20px; --btn-py: 10px; --size-badge: 32px; /* Exhibition Status / Type, Program Type / Audience */ --size-badge-lg: 42px; /* 기획전시 상세 상단 배지 */ --badge-px: 12px; --badge-py: 9px; --size-tag: 42px; /* Search_Tag 높이 */ --tag-px: 14px; --size-tab: 70px; /* 상세 탭 항목 높이 */ --tab-gap: 40px; --tab-py: 21px; --tab-border-active: 2px; --size-dropdown-w: 140px; --size-dropdown-h: 48px; --size-dropdown-option: 42px; --dropdown-px: 16px; --dropdown-py: 14px; --size-input-search: 48px; /* 검색 버튼 아이콘 */ --input-py: 16px; --input-border-b: 2px; --size-pager-arrow: 38px; --size-pager-num: 40px; --pager-gap: 8px; --pager-num-gap: 4px; --size-icon-xs: 16px; /* icn_plus */ --size-icon-sm: 18px; /* icn_calendar/time/pin/user, btn_download 내부 */ --size-icon-md: 20px; /* 드롭다운 화살표, 체크박스 */ --size-icon-guide: 21px; /* 관람안내 원형 아이콘 내부 */ --size-icon: 28px; /* icn_time(관람정보), btn_arrow_down, btn_category_arrow */ --size-icon-lg: 38px; /* Arrow_btn White 38 (메인 배너) */ --size-icon-xl: 42px; /* btn_download, 팝업 닫기, 관람안내 원형 */ --size-icon-2xl: 48px; /* Arrow_btn Black 48, 검색 버튼 */ --size-icon-360: 124px; /* 온라인 관람 360 아이콘 */ --size-checkbox: 20px; --size-bullet: 4px; /* 카드 */ --card-exhibit-w: 340px; /* Exhibition_Card Small 이미지 폭 */ --card-exhibit-h: 481px; /* Exhibition_Card Small 이미지 높이 */ --card-exhibit-lg-w: 437.333px; /* Exhibition_Card Large/Catalog 폭 */ --card-exhibit-lg-ratio: 438.6666564941406 / 625; /* Large/Catalog 이미지 비율 */ --card-program-w: 699px; --card-program-h: 698px; --card-program-img-h: 460px; --card-program-list-h: 216.552px; --card-program-list-img-w: 200px; --card-guide-w: 707px; /* 관람안내 카드 폭 */ --card-guide-item-h: 96px; /* 전시관 소개 (인사말 498:12800 / 관람안내 498:12489) */ --about-col-gap: 76px; /* 인사말 사진-본문 간격 */ --about-figure-w: 655px; /* 인사말 사진 폭 (654.76) */ --about-figure-h: 680px; --visit-img-w: 710px; /* 관람안내 상단 사진 폭 */ --visit-item-w: 314px; /* 방문 전 확인 항목 폭 */ --visit-box-h: 444px; /* 방문 전 확인 박스 높이 (Figma 고정) */ --reserve-item-h: 429px; /* 개인/단체 관람 카드 높이 (Figma 고정 429.09) */ --about-article-pb: 68px; /* 인사말 본문 하단 여백 (Figma Article 고정 높이 807.8 반영) */ --reserve-icon: 58px; /* 개인/단체 관람 아이콘 박스 */ --reserve-icon-inner: 32px; /* (Figma 32.3) */ --dir-label-w: 270px; /* 오시는길 행 제목 폭 */ --dl-term-w: 95px; /* 정의목록 용어 폭 */ /* FAQ (498:12964) / 전시관소식 (498:12837, 498:13083) */ --faq-row-h: 88px; /* 질문 행 높이 */ --faq-cat-w: 77px; /* 질문 카테고리 배지 열 폭 */ --faq-answer-px: 60px; /* 답변 좌우 여백 */ --board-head-h: 56px; /* 게시판 머리행 */ --board-row-h: 76px; /* 게시판 행 */ --board-col-num: 120px; --board-col-date: 160px; --post-nav-h: 60px; /* 상세 이전/다음 글 행 */ --size-badge-sm: 26px; /* 상세 '공지' 배지 */ /* 프로그램 (관람예약 498:12128 / 캘린더 498:12299·498:13115 / 목록 498:13431 / 상세 498:13883) */ --cal-cell-min: 202px; /* 캘린더 셀 (1418/7 = 202.57) */ --cal-event-h: 28px; --cal-day: 24px; --rule-label-w: 200px; /* 규칙 행 제목 폭 */ --program-card-w: 437.33px; /* 프로그램 목록 카드 (3열, gap 54) */ --program-card-gap: 54px; --card-news-item-h: 74px; --card-record-img-h: 333.484px; /* 전시 연계 기록물 카드 이미지 높이 */ --card-program-grid-w: 452px; /* Program_card (프로그램 목록 그리드) */ --search-item-img-w: 166px; /* 검색결과 아이템 썸네일 */ --search-item-img-h: 237px; --search-item-gap: 36px; --list-search-input-w: 360px; /* 목록 상단 검색 입력창 */ --list-search-btn: 48px; /* 목록 검색 버튼 (Button - 검색 790:16627: 48 정사각, 입력창 높이와 동일) */ --list-card-gap: 54px; /* 기획전시 목록 카드 가로 간격 (3열, 437.33×3 + 54×2 = 1420) */ --composition-num: 88px; /* 기획전시 상세 전시구성 번호 원 */ --composition-img-w: 522.85px; --composition-img-h: 310px; --composition-gap: 55px; --back-icon: 40px; /* 상세 "목록으로" 아이콘 */ --back-bar-h: 109px; --prevnext-h: 120px; --prevnext-btn: 42px; --search-tab-h: 66px; --search-tab-border: 4px; --search-summary-h: 100px; --card-catalog-w: 341px; /* 전시자료 도록 카드 */ --card-catalog-h: 484px; --poster-detail-w: 521.111px; /* 기획전시 상세 포스터 */ --poster-detail-h: 737px; --story-img-w: 640px; --story-img-h: 420px; --highlight-h: 784px; --highlight-thumb-h: 220px; --highlight-nav-gap: 22px; /* Arrow_btn 과 컨테이너 사이 (Figma 559:9829: 218 → 240) */ --online-img-w: 840px; --online-img-h: 472px; --popup-w: 591px; --popup-footer-h: 76px; /* 6. Radius / Border */ --radius-none: 0; /* 버튼·배지·카드 기본 (직각) */ --radius-sm: 8px; /* 관람안내 항목 컨테이너 */ --radius-md: 10px; /* 페이지네이션 화살표 */ --radius-round: 21px; /* 관람안내 원형 아이콘(42) */ --radius-pill: 30px; /* Search_Tag */ --radius-pill-lg: 80px; /* 페이지 번호(일반), 드롭다운 스크롤바 */ --radius-full: 100px; /* 불릿 */ --border-w: 1px; --border-w-thick: 2px; --border-w-hair: 0.667px; /* 팝업 푸터 상단선 (Figma 실측) */ /* 7. Shadow / Gradient / Blur */ --shadow-header: 0 2px 8px 0 rgba(22, 50, 93, 0.08); /* Header_scroll, 팝업 */ --shadow-popup: 0 2px 4px rgba(22, 50, 93, 0.08); /* 안내팝업 drop-shadow */ --shadow-card: 0 4px 6px -1px rgba(69, 85, 108, 0.06), 0 2px 4px -2px rgba(69, 85, 108, 0.06); /* shadow_card (드롭다운 열림) */ --gradient-banner: linear-gradient(90deg, rgba(var(--color-banner-shade), 0.77) 0%, rgba(var(--color-banner-shade), 0.34) 50%, rgba(var(--color-banner-shade), 0.12) 100%), linear-gradient(0deg, rgba(var(--color-banner-shade), 0.52) 0%, rgba(var(--color-banner-shade), 0) 44%); /* 메인 배너 */ --gradient-info-bar: linear-gradient(101.62deg, #1b3b86 0.38%, #0b1b42 100.64%); /* 관람정보 바 */ --gradient-page-title: linear-gradient(90deg, var(--color-title-overlay) 0%, var(--color-title-overlay-mid) 50.96%, var(--color-title-overlay) 100%); /* 서브 타이틀 배너 */ --gradient-highlight: linear-gradient(180deg, rgba(0, 0, 0, 0) 72.73%, rgba(0, 0, 0, 0.4) 100%); /* 하이라이트 대형 이미지 */ --gradient-catalog: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.44%, rgba(0, 0, 0, 0.8) 100%); /* 전시자료 도록 카드 */ --blur-badge: 8px; /* 배지 backdrop-blur */ /* 8. Z-index / Motion / Breakpoint */ --z-base: 0; --z-raised: 10; /* 카드 오버레이·캡션 */ --z-dropdown: 50; --z-header: 100; --z-gnb-panel: 110; /* 헤더 메뉴 펼침 */ --z-dimmer: 900; --z-popup: 1000; --dur-fast: 0.15s; --dur-base: 0.25s; --dur-slow: 0.4s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* 브레이크포인트 (CSS 변수는 @media 에 직접 못 쓰므로 참고값. 실제 미디어쿼리는 아래 주석의 px 사용) --bp-wide : 1420px → 컨테이너 1420 고정 → 90% --bp-tablet: 1024px → 카드 4열→2열, GNB 햄버거, 2단 레이아웃 1단 --bp-mobile: 767px → 모바일 디자인 (Figma 375 기준, 아래 재정의 블록) */ --bp-wide: 1420px; --bp-tablet: 1024px; --bp-mobile: 767px; } /* 모바일 공통 변수(767px 이하). 레이아웃 변경은 components.css와 pages.css에서 처리한다. */ @media (max-width: 767px) { :root { /* 3. Layout — 좌우 20 여백, 콘텐츠 = 100% − 40 (375 에서 335) */ --l-container: calc(100% - 40px); --l-container-fluid: calc(100% - 40px); --l-side: 20px; --l-side-fluid: 20px; --l-gutter: 20px; /* 모바일 좌우 여백 (absolute 요소·섹션 px 용) */ --size-header: 70px; /* Header 70 (686:17171) */ --size-breadcrumb: 44px; /* breadscrum 44 (686:27631) */ --size-page-title: 280px; /* 서브 타이틀 배너 280 (686:27625) */ --size-page-title-pt: 100px; --size-page-title-pt-search: 110px; /* 검색결과 타이틀 배너 상단 여백 (686:22989, 다른 서브페이지 100 보다 10 아래) */ --size-footer: 360px; /* Footer mo (686:15143) */ --size-logo-w: 180px; /* logo 180×34.42 */ --size-logo-h: 34.42px; --size-search-panel: auto; /* 검색 패널: 내용 높이 (686:17904 204) */ --size-search-panel-w: 100%; --size-search-input: 48px; --size-search-input-btn: 48px; --size-main-banner: 590px; /* Section_mainbanner 590 (663:12576) */ --size-main-banner-pt: 337px; /* 헤드카피 top 337 */ --hero-copy-gap: 20.2px; /* 430 - (337 + 28 × 1.3 × 2) */ --text-subheading: 20px; --size-meta-label: 60px; --faq-column-gap: 10px; --highlight-mobile-ratio: 1165.71435546875 / 784; --highlight-thumb-h: 106px; --lh-material-desc: 34px; --cal-nav-gap: 13px; --cal-cell-pb: 10px; --cal-month-min: 128px; --text-cal-month: 23px; --cal-cta-py: 27px; --cal-cta-mt: 30px; --gradient-banner: linear-gradient(0deg, rgba(var(--color-banner-shade), 0.77) 27.542%, rgba(var(--color-banner-shade), 0.34) 40.763%, rgba(var(--color-banner-shade), 0.12) 53.983%), linear-gradient(0deg, rgba(var(--color-banner-shade), 0.52) 0%, rgba(var(--color-banner-shade), 0) 44%); --size-info-bar: 109px; /* Section_info 109 (2행) */ /* 2. Typography — 배너·타이틀·섹션 제목 28 로 통일 */ --text-display: 40px; /* 스토리 번호 (Regular) */ --text-hero: 28px; /* 메인 배너 헤드카피 (lh 1.3) */ --text-h1: 28px; /* 서브 타이틀 */ --text-h2: 28px; /* 섹션 제목 (lh 1.2) */ --text-h3: 24px; /* 스토리 소제목 */ --text-h4: 24px; /* 온라인관람·팝업 제목 */ --text-h5: 22px; /* 전시 카드 Large 제목 */ --text-h6: 22px; /* 카드 제목 (검색결과·프로그램 목록 22, 메인 프로그램 20 은 컴포넌트에서) */ --text-search-title: 22px; --text-xl: 14px; /* 관람정보 바 */ --text-lg: 16px; /* 섹션 설명 */ --text-md: 16px; /* 기본 본문·카드 메타 */ --text-h7: 18px; --lh-body-lg: 1.5; /* 34px 고정 행간 → 배수 */ --lh-search-summary: 33px; /* 검색결과 요약 16px, 행간 33 고정 (686:18686) */ --lh-search-tab: 1.5; /* 4. Spacing */ --section-py: var(--space-10); /* 40 */ --section-py-sm: var(--space-10); /* 40 */ --section-body-gap: var(--space-6); /* 24 */ --grid-gap-sm: var(--space-6); /* 1열 세로 간격 24 */ --card-pad: var(--space-5); /* 20 */ --card-pad-lg: var(--space-5); /* 20 */ /* 5. Component sizes */ --size-btn-lg: 48px; /* btn 48 (663:12998) */ --size-icon-2xl: 38px; /* Arrow_btn·검색/메뉴 아이콘 버튼 38 */ --size-dropdown-w: 100%; /* 드롭다운은 행 안에서 균등 분할 */ --list-search-input-w: 100%; --search-item-img-w: 100%; /* 검색결과·프로그램 목록: 썸네일 전체 폭(세로형) */ --card-exhibit-w: 100%; --card-program-w: 100%; --card-guide-w: 100%; --story-img-w: 100%; --online-img-w: 100%; --popup-w: 326px; /* 모바일 안내팝업 폭 (764:17107, 375 기준 좌우 24.5) */ --cal-cell-min: 80px; } }