/* travel 상단 배너 — tools/add-header-banner.mjs 가 생성한다. 손으로 고치지 말 것.
 *
 * 그림은 SVG 타일 한 장을 가로로 반복한 것이다. 높이를 84px 로 고정했기 때문에
 * 화면이 넓든 좁든 배너는 늘 같은 크기의 가로 띠로 보이고, 폭이 바뀌면 반복 횟수만
 * 달라진다. (처음에는 cover 로 헤더를 덮게 했는데, 모바일에서 메뉴가 여러 줄로
 * 접혀 헤더가 높아지자 그림이 통째로 확대돼 얼룩처럼 보였다.)
 *
 * 위의 단색 그라데이션은 스크림이다: 그림을 28% 세기로 눌러
 * 메뉴 글씨 대비를 지킨다. 이 세기는 고른 값이 아니라 계산한 값이다 — 이 사이트
 * 헤더에서 실측한 글자색들이 기준(4.5:1)을 유지하는 한에서 가장 진한 쪽을
 * 도구가 찾았다. 적용 후 최악 대비 14.2:1.
 *
 * 이 파일은 사이트 자기 스타일시트보다 뒤에 와야 한다. background 단축 속성이
 * background-image 를 none 으로 되돌리기 때문이다.
 */
header.fixed {
  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='%23eef9fd'/%3E%3Cpath d='M0 84 L0 18 Q100 -2 200 18 Q300 -2 400 18 Q500 -2 600 18 Q700 -2 800 18 Q900 -2 1000 18 Q1100 -2 1200 18 Q1300 -2 1400 18 Q1500 -2 1600 18 L1600 84 Z' fill='%23d8f1fb'/%3E%3Cpath d='M0 84 L0 40 Q100 18 200 40 Q300 18 400 40 Q500 18 600 40 Q700 18 800 40 Q900 18 1000 40 Q1100 18 1200 40 Q1300 18 1400 40 Q1500 18 1600 40 L1600 84 Z' fill='%23b7e4f8'/%3E%3Cpath d='M0 84 L0 56 Q100 38 200 56 Q300 38 400 56 Q500 38 600 56 Q700 38 800 56 Q900 38 1000 56 Q1100 38 1200 56 Q1300 38 1400 56 Q1500 38 1600 56 L1600 84 Z' fill='%238bd4f4'/%3E%3C/svg%3E");
  background-size: auto, auto 84px;
  background-position: center, center top;
  background-repeat: repeat, repeat-x;
}

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