/* sphere 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 6.4:1.
 *
 * 이 파일은 사이트 자기 스타일시트보다 뒤에 와야 한다. background 단축 속성이
 * background-image 를 none 으로 되돌리기 때문이다.
 */
header.top {
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 84'%3E%3Crect width='1600' height='84' fill='%23f3f2fd'/%3E%3Crect x='8' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='8' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='8' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='88' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='88' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='88' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='168' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='168' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='168' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='248' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='248' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='248' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='328' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='328' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='328' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='408' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='408' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='408' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='488' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='488' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='488' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='568' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='568' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='568' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='648' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='648' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='648' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='728' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='728' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='728' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='808' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='808' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='808' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='888' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='888' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='888' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='968' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='968' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='968' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1048' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1048' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1048' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1128' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1128' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1128' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1208' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1208' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1208' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1288' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1288' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1288' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1368' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1368' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1368' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1448' y='12' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1448' y='36' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1448' y='60' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1528' y='12' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3Crect x='1528' y='36' width='60' height='17' rx='5' fill='%23aba6f3'/%3E%3Crect x='1528' y='60' width='60' height='17' rx='5' fill='%23d1cff8'/%3E%3C/svg%3E");
  background-size: auto, auto 84px;
  background-position: center, center top;
  background-repeat: repeat, repeat-x;
}

/* 대비를 더 원하는 사용자에게는 그림을 치운다. 장식이 접근성을 이기면 안 된다. */
@media (prefers-contrast: more) {
  header.top { background-image: none; }
}