/* code 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 14.6: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='%23f1f2f3'/%3E%3Cpath d='M40 12 Q18 12 18 42 Q18 72 40 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M130 12 Q152 12 152 42 Q152 72 130 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='54' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='54' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M200 12 Q178 12 178 42 Q178 72 200 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M290 12 Q312 12 312 42 Q312 72 290 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='214' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='214' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M360 12 Q338 12 338 42 Q338 72 360 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M450 12 Q472 12 472 42 Q472 72 450 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='374' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='374' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M520 12 Q498 12 498 42 Q498 72 520 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M610 12 Q632 12 632 42 Q632 72 610 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='534' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='534' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M680 12 Q658 12 658 42 Q658 72 680 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M770 12 Q792 12 792 42 Q792 72 770 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='694' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='694' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M840 12 Q818 12 818 42 Q818 72 840 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M930 12 Q952 12 952 42 Q952 72 930 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='854' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='854' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M1000 12 Q978 12 978 42 Q978 72 1000 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M1090 12 Q1112 12 1112 42 Q1112 72 1090 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='1014' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='1014' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M1160 12 Q1138 12 1138 42 Q1138 72 1160 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M1250 12 Q1272 12 1272 42 Q1272 72 1250 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='1174' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='1174' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M1320 12 Q1298 12 1298 42 Q1298 72 1320 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M1410 12 Q1432 12 1432 42 Q1432 72 1410 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='1334' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='1334' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%3E%3Cpath d='M1480 12 Q1458 12 1458 42 Q1458 72 1480 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Cpath d='M1570 12 Q1592 12 1592 42 Q1592 72 1570 72' stroke='%23959ca7' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3Crect x='1494' y='27' width='62' height='12' rx='6' fill='%23caced3'/%3E%3Crect x='1494' y='46' width='40' height='12' rx='6' fill='%23e4e6e9'/%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; }
}