/* * 티켓/인트로 페이지(event.css) 위에 얹는 차일드 테마 정합 레이어. * * event.css는 sync-wdo-ticket.sh가 everyday-practice/WDO-ticket 레포에서 통째로 * 다시 컴파일하므로 직접 고치면 다음 동기화 때 날아간다. 차일드 테마에 맞춰야 하는 * 값은 전부 이 파일에서 덮어쓴다. (functions.php에서 event.css 뒤에 로드) */ /* ----- 폰트 패밀리 ----- * * 사이트 전역 설정(style.css의 body 스택)과 동일하게 맞춘다. * * 업스트림은 --wdo-font-plain/plus를 "ABC Camera Plain"/"ABC Camera Plus"로 직접 잡는데, * 이 서브셋에는 한글 글리프가 없고 뒤가 곧바로 sans-serif라 국문이 시스템 고딕으로 떨어진다. * 차일드의 @font-face 이름 wdo / wdo-plus는 같은 ABC Camera 파일을 가리키고(fonts/font.css), * 그 뒤에 Pretendard가 붙어 국문이 사이트 나머지와 같은 서체로 렌더된다. * * event.css의 font-family는 전부 이 두 변수를 거치므로 여기서만 바꾸면 페이지 전체에 적용된다. */ :root { --wdo-font-plain: "wdo", "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --wdo-font-plus: "wdo-plus", "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } /* 업스트림 body 규칙은 var(--wdo-font-plain) 뒤에 "Br Sans"와 두 번째 sans-serif를 덧붙여 폴백 사슬이 끊긴다. 차일드 스택 하나로 정리한다. */ body.wdo-page, .wdo-page input, .wdo-page select, .wdo-page optgroup, .wdo-page textarea, .wdo-page button { font-family: var(--wdo-font-plain) !important; } /* ----- 국문 표기 ----- * * 차일드 테마 규칙(style.css의 .ml-ko)과 동일한 광학 보정. * ABC Camera보다 Pretendard가 시각적으로 커 보여 국문일 때만 살짝 줄이고 행간을 넓힌다. * i18n이 을 ko-KR로 정규화한 뒤에 적용된다(functions.php의 언어 브리지). */ /* html[lang="ko-KR"] .wdo-intro__copy, html[lang="ko-KR"] .wdo-canvas-screen__subtitle, html[lang="ko-KR"] .wdo-modal__body, html[lang="ko-KR"] .wdo-howto__body { font-size: 95%; line-height: 1.45; } */ /* ----- 인트로 이벤트 배지 ----- * * 업스트림 인라인 SVG(도형) + span(레터링) 대신 도형·레터링이 함께 든 * assets/event-badge.svg 한 장을 쓴다(sync 스크립트 7단계). * 컨테이너가 clamp() 정사각형 + 회전 애니메이션이라 img가 그대로 채우게 한다. */ .wdo-intro__event-badge img { display: block; width: 100%; height: 100%; max-width: none; } /* ----- 언어 토글 버튼 ----- * * 메인 사이트 헤더의 .lang-menu a(style.css)와 같은 디자인으로 맞춘다. * background #000 / color #fff / weight 500 / line-height 1.1 * font-size 1.25rem, padding 0.1rem 0.4rem * * 다만 rem 기준이 서로 다르다 — 메인은 html font-size가 calc(0.8vw + 6px)로 * 유동인데 티켓 페이지는 업스트림 event.css가 18px로 고정한다. 그대로 rem을 쓰면 * 폭에 따라 크기가 어긋나므로, 메인의 루트 폰트 공식을 변수로 두고 거기에 비율을 * 곱해 어느 폭에서든 같은 크기로 렌더되게 한다. */ .wdo-btn__lang { --wdo-lang-root: calc(0.8vw + 6px); font-family: var(--wdo-font-plain); font-size: calc(var(--wdo-lang-root) * 1.25); font-weight: 500; /* 차일드 style.css의 전역 button{line-height:1.2em!important}를 이겨야 한다 */ line-height: 1.1 !important; padding: calc(var(--wdo-lang-root) * 0.1) calc(var(--wdo-lang-root) * 0.4); background: #000; color: #fff; } /* 메인 사이트는 1024px 이하에서 루트 폰트 공식이 바뀐다(style.css와 동일 분기). 색 반전(흰 배경/검은 글자)은 모바일 메뉴 오버레이가 검은색이라 생긴 규칙이라 그 오버레이가 없는 티켓 페이지에는 적용하지 않는다. */ @media (max-width: 1024px) { .wdo-btn__lang { --wdo-lang-root: calc(1.5vw + 8px); font-size: calc(var(--wdo-lang-root) * 1.25); padding: calc(var(--wdo-lang-root) * 0.1) calc(var(--wdo-lang-root) * 0.4); } } /* ----- 카드 모달 타이틀 및 본문 폰트 크기 ----- */ html[lang="ko-KR"] .wdo-card-modal__title { font-size: 53px; line-height: 1.15; } html[lang="ko-KR"] .wdo-card-modal__body { font-size: 26px; line-height: 1.35; } @media (max-width: 1024px) { html[lang="ko-KR"] .wdo-card-modal__title { font-size: 36px; } html[lang="ko-KR"] .wdo-card-modal__body { font-size: 20px; } } /* 반응형 수정 */ .wdo-intro__title { padding-right: 12rem; } .wdo-intro__bottom { column-gap: 20px; } @media (max-width: 1024px) { .wdo-intro { height: 100svh; --padding: 15px; } .wdo-intro__title { padding-right: 0; } .wdo-intro__event-badge { display: none; } }