/* ============================================================= APYE Korea 2027 — Typography Unification Layer ("Winter Editorial") ------------------------------------------------------------- main.css / sections.css 뒤에 로드되는 오버라이드 레이어. - 유동(fluid) 모듈러 타입 스케일 (clamp 기반, 1.25 배율) - 역할별 자간(letter-spacing) 토큰: display / heading / body / caption / badge - 한글(NanumSquare Neo) 최적화: 큰 제목은 음수 자간, 본문은 넉넉한 행간 - 섹션 수직 리듬 통일 기존 파일은 수정하지 않음 → 이 파일 제거 시 원상 복구. ============================================================= */ :root { /* ---- Fluid Type Scale (1.25 modular, 뷰포트 유동) ---- */ --text-xs: 0.8125rem; /* 13px 캡션·배지 */ --text-sm: 0.875rem; /* 14px 보조 텍스트 */ --text-base: 1rem; /* 16px 본문 */ --text-lg: 1.125rem; /* 18px 리드 문단 */ --text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem); /* 19→20px 카드 제목 */ --text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem); /* 22→24px 서브 헤딩 */ --text-3xl: clamp(1.625rem, 1.4rem + 1.1vw, 2rem); /* 26→32px 섹션 헤딩 */ --text-4xl: clamp(2rem, 1.6rem + 2vw, 2.75rem); /* 32→44px 강조 헤딩 */ --text-display: clamp(1.75rem, 1.2rem + 2.8vw, 3rem); /* 28→48px 히어로 */ /* ---- Letter-spacing 토큰 (역할 기반) ---- */ --track-display: -0.02em; /* 큰 제목: 한글 대형 타이포는 살짝 조임 */ --track-heading: -0.015em; /* 섹션/서브 헤딩 */ --track-body: -0.005em; /* 본문: 미세 조임 (한글 가독) */ --track-caption: 0.02em; /* 캡션·라벨: 살짝 벌림 */ --track-badge: 0.08em; /* 대문자 배지: 넓게 (0.05~0.1em 난립 → 단일화) */ --track-button: 0.01em; /* 버튼 라벨 */ /* ---- Line-height 토큰 ---- */ --leading-display: 1.22; --leading-heading: 1.35; --leading-body: 1.72; /* 한글 본문 */ --leading-caption: 1.5; /* ---- 수직 리듬 ---- */ --section-pad-y: clamp(64px, 5vw + 40px, 104px); } /* ============================================================= 1. 전역 본문 리듬 ============================================================= */ body { letter-spacing: var(--track-body); line-height: var(--leading-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* ============================================================= 2. 히어로 (비디오) ============================================================= */ .video-hero-title { font-size: var(--text-display); letter-spacing: var(--track-display); /* 0.05em 벌림 → 조임으로 교정 */ line-height: var(--leading-display); font-weight: 800; text-wrap: balance; } .video-hero-subtitle { font-size: var(--text-lg); letter-spacing: var(--track-body); line-height: var(--leading-heading); font-weight: 400; } /* ============================================================= 3. 섹션 헤딩 — 동일 위계 = 동일 크기 (기존 20/24/24/28px 혼재 → 3xl 단일화) ============================================================= */ .section-heading, .about-heading, .program-heading, .apply-heading, .features-heading, .hero-heading { font-size: var(--text-3xl); letter-spacing: var(--track-heading); line-height: var(--leading-heading); font-weight: 800; text-wrap: balance; } /* 서브 블록 헤딩 (섹션 내 2차 위계) */ .korea-heading, .components-title, .category-title, .section-title { font-size: var(--text-2xl); letter-spacing: var(--track-heading); line-height: var(--leading-heading); font-weight: 700; } /* 카드·아이템 제목 (3차 위계) */ .component-title, .activity-title, .objective-title, .feature-title, .day-title, .schedule-day-title { font-size: var(--text-xl); letter-spacing: var(--track-heading); line-height: var(--leading-heading); font-weight: 700; } /* ============================================================= 4. 서브타이틀·캡션 — 라틴 소제목 계열은 통일된 벌림 ============================================================= */ .section-subtitle, .about-subtitle, .section-title-subtitle, .component-subtitle, .objective-subtitle, .activity-subtitle, .category-subtitle, .day-subtitle, .schedule-day-subtitle { letter-spacing: var(--track-caption); line-height: var(--leading-caption); } /* ============================================================= 5. 배지 — 사이트 전체 단일 규격 (0.05/0.08/0.1em 난립 정리) ============================================================= */ .section-badge { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--track-badge); text-transform: uppercase; line-height: 1; padding: 7px 14px; } /* ============================================================= 6. 버튼·내비게이션 — 라벨 규격 통일 ============================================================= */ .apply-button, .cta-button, a.cta-button, .about-cta, .hero-cta { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--track-button); line-height: 1.2; } .apply-button { font-size: var(--text-base); } .nav-list a { letter-spacing: var(--track-caption); font-weight: 600; } /* ============================================================= 7. 본문 문단 — 설명 계열 공통 리듬 ============================================================= */ .about-description, .about-intro, .about-highlight, .apply-description, .video-hero-description, .component-description, .activity-description, .objective-description, .feature-description, .korea-description, .message-content, .section-subtitle p { line-height: var(--leading-body); letter-spacing: var(--track-body); } /* 리드(intro) 문단은 본문보다 한 단계 크게 */ .about-intro, .apply-description { font-size: var(--text-lg); } /* ============================================================= 8. 섹션 수직 리듬 통일 ============================================================= */ .about, .program, .apply, .welcome-messages, .trust-badges, .highlights-2027 { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } /* ============================================================= 8-1. 프로그램 카드 포스터 크롭 보정 (4:5 세로 슬라이드가 가로 카드에서 상단 타이틀이 잘리지 않도록) ============================================================= */ .activity-image img { object-position: center top; } /* ============================================================= 10. 히어로 가독성 — 경계 없는 라디얼 스크림 (seamless scrim) 박스/테두리 없이, 문구 뒤 중앙만 은은하게 어두워지고 가장자리로 자연스럽게 사라져 영상과 한 덩어리로 보이게. ============================================================= */ .video-hero-text { position: relative; display: inline-block; max-width: min(880px, 92vw); padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 48px); } .video-hero-text::before { content: ''; position: absolute; inset: -22% -34%; background: radial-gradient( ellipse 58% 52% at center, rgba(6, 18, 38, 0.52) 0%, rgba(6, 18, 38, 0.34) 42%, rgba(6, 18, 38, 0.14) 62%, rgba(6, 18, 38, 0) 78% ); z-index: -1; pointer-events: none; } .video-hero-text .video-hero-title { text-shadow: 0 1px 3px rgba(4, 16, 34, 0.55), 0 4px 28px rgba(4, 16, 34, 0.55); } .video-hero-text .video-hero-subtitle { text-shadow: 0 1px 2px rgba(4, 16, 34, 0.55), 0 2px 16px rgba(4, 16, 34, 0.50); margin-bottom: 0; } /* ============================================================= 9. 티커·푸터 — 소형 텍스트 정돈 ============================================================= */ .apply-map-ticker-item { letter-spacing: var(--track-caption); font-weight: 600; } .footer-links a, .footer-contact p { font-size: var(--text-sm); letter-spacing: var(--track-body); line-height: var(--leading-caption); } .footer-logo .logo-text { letter-spacing: var(--track-caption); font-weight: 800; }