/* 모든 페이지가 함께 쓰는 스타일. 꾸밈 없이 읽기 좋게만 한다. */
:root {
  color-scheme: light dark;
  /* 페이지는 위아래로만 움직인다. 폭이 맞아도 iOS 웹 뷰가 좌우로 튕기는 것을 막는다 */
  overscroll-behavior-x: none;
}

body {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

:lang(ko) {
  word-break: keep-all;
}

nav {
  margin-bottom: 2rem;
}

/* 앱은 방침을 주소 끝에 #app을 붙여 앱 안 웹 뷰로 연다. 그때는 사이트 안 다른 페이지로 가는 링크를 없앤다 (스크립트 없이) */
#app:target ~ nav {
  display: none;
}

#app:target ~ main .site-link {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

h1 {
  line-height: 1.3;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* 긴 URL만 아무 곳에서나 줄을 바꾼다. 단어는 쪼개지 않는다 */
a {
  overflow-wrap: anywhere;
}

th,
td {
  border: 1px solid #8888;
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
  /* 표는 칸마다 가장 긴 단어보다 좁아지지 않아, 글자를 키우면 화면 밖으로 넘친다. 넘칠 때만 단어 안에서 줄을 바꾼다 */
  overflow-wrap: anywhere;
}