/* sting 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 14.6:1.
 *
 * 이 파일은 사이트 자기 스타일시트보다 뒤에 와야 한다. background 단축 속성이
 * background-image 를 none 으로 되돌리기 때문이다.
 */
header.site {
  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='%23faf3ee'/%3E%3Crect x='0' y='67' width='1600' height='5' fill='%23f5e7dd'/%3E%3Crect x='14' y='11.253639870882452' width='22' height='55.74636012911755' rx='5' fill='%23d8a67f'/%3E%3Crect x='64' y='16.195119438157732' width='22' height='50.80488056184227' rx='5' fill='%23eacfba'/%3E%3Crect x='114' y='26.73980843390038' width='22' height='40.26019156609962' rx='5' fill='%23d8a67f'/%3E%3Crect x='164' y='41.28237354635236' width='22' height='25.71762645364764' rx='5' fill='%23eacfba'/%3E%3Crect x='214' y='48.391158934176104' width='22' height='18.6088410658239' rx='5' fill='%23d8a67f'/%3E%3Crect x='264' y='32.76634568772795' width='22' height='34.23365431227205' rx='5' fill='%23eacfba'/%3E%3Crect x='314' y='20.221922891790143' width='22' height='46.77807710820986' rx='5' fill='%23d8a67f'/%3E%3Crect x='364' y='12.66766520156839' width='22' height='54.33233479843161' rx='5' fill='%23eacfba'/%3E%3Crect x='414' y='11.253639870882452' width='22' height='55.74636012911755' rx='5' fill='%23d8a67f'/%3E%3Crect x='464' y='16.195119438157725' width='22' height='50.804880561842275' rx='5' fill='%23eacfba'/%3E%3Crect x='514' y='26.739808433900357' width='22' height='40.26019156609964' rx='5' fill='%23d8a67f'/%3E%3Crect x='564' y='41.28237354635236' width='22' height='25.717626453647643' rx='5' fill='%23eacfba'/%3E%3Crect x='614' y='48.39115893417613' width='22' height='18.608841065823867' rx='5' fill='%23d8a67f'/%3E%3Crect x='664' y='32.76634568772798' width='22' height='34.23365431227202' rx='5' fill='%23eacfba'/%3E%3Crect x='714' y='20.22192289179017' width='22' height='46.77807710820983' rx='5' fill='%23d8a67f'/%3E%3Crect x='764' y='12.667665201568397' width='22' height='54.3323347984316' rx='5' fill='%23eacfba'/%3E%3Crect x='814' y='11.253639870882452' width='22' height='55.74636012911755' rx='5' fill='%23d8a67f'/%3E%3Crect x='864' y='16.19511943815774' width='22' height='50.80488056184226' rx='5' fill='%23eacfba'/%3E%3Crect x='914' y='26.73980843390038' width='22' height='40.26019156609962' rx='5' fill='%23d8a67f'/%3E%3Crect x='964' y='41.28237354635239' width='22' height='25.71762645364761' rx='5' fill='%23eacfba'/%3E%3Crect x='1014' y='48.391158934176104' width='22' height='18.6088410658239' rx='5' fill='%23d8a67f'/%3E%3Crect x='1064' y='32.76634568772795' width='22' height='34.23365431227205' rx='5' fill='%23eacfba'/%3E%3Crect x='1114' y='20.22192289179013' width='22' height='46.77807710820987' rx='5' fill='%23d8a67f'/%3E%3Crect x='1164' y='12.667665201568397' width='22' height='54.3323347984316' rx='5' fill='%23eacfba'/%3E%3Crect x='1214' y='11.253639870882452' width='22' height='55.74636012911755' rx='5' fill='%23d8a67f'/%3E%3Crect x='1264' y='16.195119438157732' width='22' height='50.80488056184227' rx='5' fill='%23eacfba'/%3E%3Crect x='1314' y='26.739808433900407' width='22' height='40.26019156609959' rx='5' fill='%23d8a67f'/%3E%3Crect x='1364' y='41.282373546352346' width='22' height='25.717626453647654' rx='5' fill='%23eacfba'/%3E%3Crect x='1414' y='48.391158934176104' width='22' height='18.608841065823896' rx='5' fill='%23d8a67f'/%3E%3Crect x='1464' y='32.76634568772795' width='22' height='34.23365431227205' rx='5' fill='%23eacfba'/%3E%3Crect x='1514' y='20.221922891790136' width='22' height='46.778077108209864' rx='5' fill='%23d8a67f'/%3E%3Crect x='1564' y='12.667665201568397' width='22' height='54.3323347984316' rx='5' fill='%23eacfba'/%3E%3C/svg%3E");
  background-size: auto, auto 84px;
  background-position: center, center top;
  background-repeat: repeat, repeat-x;
}

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