/* music 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 13.5:1.
 *
 * 이 파일은 사이트 자기 스타일시트보다 뒤에 와야 한다. background 단축 속성이
 * background-image 를 none 으로 되돌리기 때문이다.
 */
header {
  background-image:
    linear-gradient(0deg, rgba(255, 251, 245, 0.72) 0%, rgba(255, 251, 245, 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='%23f8eff9'/%3E%3Crect x='8' y='31.352358989715256' width='14' height='21.295282020569488' rx='7' fill='%23d18ed7'/%3E%3Crect x='40' y='24.963647920333116' width='14' height='34.07270415933377' rx='7' fill='%23e5bfe9'/%3E%3Crect x='72' y='19.361590985066144' width='14' height='45.27681802986771' rx='7' fill='%23d18ed7'/%3E%3Crect x='104' y='15.094556548564064' width='14' height='53.81088690287187' rx='7' fill='%23e5bfe9'/%3E%3Crect x='136' y='12.58023167164879' width='14' height='58.83953665670242' rx='7' fill='%23d18ed7'/%3E%3Crect x='168' y='12.064735991604312' width='14' height='59.870528016791376' rx='7' fill='%23e5bfe9'/%3E%3Crect x='200' y='13.598529817262978' width='14' height='56.80294036547404' rx='7' fill='%23d18ed7'/%3E%3Crect x='232' y='17.03147472239935' width='14' height='49.9370505552013' rx='7' fill='%23e5bfe9'/%3E%3Crect x='264' y='22.02753014096508' width='14' height='39.94493971806984' rx='7' fill='%23d18ed7'/%3E%3Crect x='296' y='28.09764735902599' width='14' height='27.804705281948014' rx='7' fill='%23e5bfe9'/%3E%3Crect x='328' y='31.35235898971527' width='14' height='21.295282020569463' rx='7' fill='%23d18ed7'/%3E%3Crect x='360' y='24.963647920333116' width='14' height='34.07270415933377' rx='7' fill='%23e5bfe9'/%3E%3Crect x='392' y='19.361590985066144' width='14' height='45.27681802986771' rx='7' fill='%23d18ed7'/%3E%3Crect x='424' y='15.09455654856406' width='14' height='53.81088690287188' rx='7' fill='%23e5bfe9'/%3E%3Crect x='456' y='12.580231671648793' width='14' height='58.839536656702414' rx='7' fill='%23d18ed7'/%3E%3Crect x='488' y='12.064735991604312' width='14' height='59.870528016791376' rx='7' fill='%23e5bfe9'/%3E%3Crect x='520' y='13.598529817262982' width='14' height='56.802940365474036' rx='7' fill='%23d18ed7'/%3E%3Crect x='552' y='17.03147472239934' width='14' height='49.93705055520132' rx='7' fill='%23e5bfe9'/%3E%3Crect x='584' y='22.027530140965062' width='14' height='39.944939718069875' rx='7' fill='%23d18ed7'/%3E%3Crect x='616' y='28.09764735902599' width='14' height='27.804705281948017' rx='7' fill='%23e5bfe9'/%3E%3Crect x='648' y='31.352358989715253' width='14' height='21.295282020569495' rx='7' fill='%23d18ed7'/%3E%3Crect x='680' y='24.96364792033311' width='14' height='34.07270415933378' rx='7' fill='%23e5bfe9'/%3E%3Crect x='712' y='19.36159098506614' width='14' height='45.27681802986772' rx='7' fill='%23d18ed7'/%3E%3Crect x='744' y='15.09455654856406' width='14' height='53.81088690287188' rx='7' fill='%23e5bfe9'/%3E%3Crect x='776' y='12.58023167164879' width='14' height='58.83953665670242' rx='7' fill='%23d18ed7'/%3E%3Crect x='808' y='12.064735991604309' width='14' height='59.87052801679138' rx='7' fill='%23e5bfe9'/%3E%3Crect x='840' y='13.598529817262978' width='14' height='56.80294036547404' rx='7' fill='%23d18ed7'/%3E%3Crect x='872' y='17.031474722399352' width='14' height='49.937050555201296' rx='7' fill='%23e5bfe9'/%3E%3Crect x='904' y='22.02753014096504' width='14' height='39.94493971806992' rx='7' fill='%23d18ed7'/%3E%3Crect x='936' y='28.097647359025952' width='14' height='27.804705281948095' rx='7' fill='%23e5bfe9'/%3E%3Crect x='968' y='31.352358989715256' width='14' height='21.29528202056949' rx='7' fill='%23d18ed7'/%3E%3Crect x='1000' y='24.963647920333113' width='14' height='34.072704159333774' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1032' y='19.361590985066144' width='14' height='45.27681802986771' rx='7' fill='%23d18ed7'/%3E%3Crect x='1064' y='15.09455654856406' width='14' height='53.81088690287188' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1096' y='12.580231671648793' width='14' height='58.839536656702414' rx='7' fill='%23d18ed7'/%3E%3Crect x='1128' y='12.064735991604309' width='14' height='59.87052801679138' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1160' y='13.598529817262978' width='14' height='56.80294036547404' rx='7' fill='%23d18ed7'/%3E%3Crect x='1192' y='17.031474722399352' width='14' height='49.937050555201296' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1224' y='22.027530140965073' width='14' height='39.944939718069854' rx='7' fill='%23d18ed7'/%3E%3Crect x='1256' y='28.09764735902602' width='14' height='27.804705281947957' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1288' y='31.35235898971522' width='14' height='21.29528202056956' rx='7' fill='%23d18ed7'/%3E%3Crect x='1320' y='24.963647920333116' width='14' height='34.07270415933377' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1352' y='19.361590985066144' width='14' height='45.27681802986771' rx='7' fill='%23d18ed7'/%3E%3Crect x='1384' y='15.094556548564064' width='14' height='53.81088690287187' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1416' y='12.5802316716488' width='14' height='58.8395366567024' rx='7' fill='%23d18ed7'/%3E%3Crect x='1448' y='12.064735991604309' width='14' height='59.87052801679138' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1480' y='13.598529817262975' width='14' height='56.80294036547405' rx='7' fill='%23d18ed7'/%3E%3Crect x='1512' y='17.031474722399324' width='14' height='49.93705055520135' rx='7' fill='%23e5bfe9'/%3E%3Crect x='1544' y='22.02753014096504' width='14' height='39.94493971806992' rx='7' fill='%23d18ed7'/%3E%3Crect x='1576' y='28.09764735902595' width='14' height='27.804705281948106' rx='7' fill='%23e5bfe9'/%3E%3C/svg%3E");
  background-size: auto, auto 84px;
  background-position: center, center top;
  background-repeat: repeat, repeat-x;
}

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