/* auth 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 5.0: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='%23eef8f5'/%3E%3Cpath d='M40 12 L70 23.4 L70 48 Q70 63.599999999999994 40 72 Q10 63.599999999999994 10 48 L10 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M120 22.2 L139.8 29.723999999999997 L139.8 45.96 Q139.8 56.256 120 61.8 Q100.2 56.256 100.2 45.96 L100.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M200 12 L230 23.4 L230 48 Q230 63.599999999999994 200 72 Q170 63.599999999999994 170 48 L170 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M280 22.2 L299.8 29.723999999999997 L299.8 45.96 Q299.8 56.256 280 61.8 Q260.2 56.256 260.2 45.96 L260.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M360 12 L390 23.4 L390 48 Q390 63.599999999999994 360 72 Q330 63.599999999999994 330 48 L330 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M440 22.2 L459.8 29.723999999999997 L459.8 45.96 Q459.8 56.256 440 61.8 Q420.2 56.256 420.2 45.96 L420.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M520 12 L550 23.4 L550 48 Q550 63.599999999999994 520 72 Q490 63.599999999999994 490 48 L490 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M600 22.2 L619.8 29.723999999999997 L619.8 45.96 Q619.8 56.256 600 61.8 Q580.2 56.256 580.2 45.96 L580.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M680 12 L710 23.4 L710 48 Q710 63.599999999999994 680 72 Q650 63.599999999999994 650 48 L650 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M760 22.2 L779.8 29.723999999999997 L779.8 45.96 Q779.8 56.256 760 61.8 Q740.2 56.256 740.2 45.96 L740.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M840 12 L870 23.4 L870 48 Q870 63.599999999999994 840 72 Q810 63.599999999999994 810 48 L810 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M920 22.2 L939.8 29.723999999999997 L939.8 45.96 Q939.8 56.256 920 61.8 Q900.2 56.256 900.2 45.96 L900.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M1000 12 L1030 23.4 L1030 48 Q1030 63.599999999999994 1000 72 Q970 63.599999999999994 970 48 L970 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M1080 22.2 L1099.8 29.723999999999997 L1099.8 45.96 Q1099.8 56.256 1080 61.8 Q1060.2 56.256 1060.2 45.96 L1060.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M1160 12 L1190 23.4 L1190 48 Q1190 63.599999999999994 1160 72 Q1130 63.599999999999994 1130 48 L1130 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M1240 22.2 L1259.8 29.723999999999997 L1259.8 45.96 Q1259.8 56.256 1240 61.8 Q1220.2 56.256 1220.2 45.96 L1220.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M1320 12 L1350 23.4 L1350 48 Q1350 63.599999999999994 1320 72 Q1290 63.599999999999994 1290 48 L1290 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M1400 22.2 L1419.8 29.723999999999997 L1419.8 45.96 Q1419.8 56.256 1400 61.8 Q1380.2 56.256 1380.2 45.96 L1380.2 29.723999999999997 Z' fill='%23c0e6db'/%3E%3Cpath d='M1480 12 L1510 23.4 L1510 48 Q1510 63.599999999999994 1480 72 Q1450 63.599999999999994 1450 48 L1450 23.4 Z' fill='%2387cfba'/%3E%3Cpath d='M1560 22.2 L1579.8 29.723999999999997 L1579.8 45.96 Q1579.8 56.256 1560 61.8 Q1540.2 56.256 1540.2 45.96 L1540.2 29.723999999999997 Z' fill='%23c0e6db'/%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; }
}