/*
 * 플럭 문서 페이지.
 *
 * 위시픽(wishpick-invite.vercel.app)의 문서 페이지와 같은 틀이다. 앱마다
 * 법적 고지의 생김새가 다르면 같은 사람이 만든 앱으로 안 읽힌다. 바뀐 것은
 * **강조색 하나**다 — 위시픽은 산호색, 플럭은 앱 아이콘의 파랑이다.
 *
 * 앱 소개(../style.css)의 종이색을 쓰지 않는다. 소개는 훑는 글이고 이쪽은
 * 찾아 읽는 글이라 한 줄 길이와 글자 크기가 다르고, 무엇보다 소개에 깔린
 * 종이 질감이 긴 글 뒤에서는 읽기를 방해한다.
 */

:root {
  /* 기기의 밝은/어두운 설정을 그대로 따른다. 법적 고지는 밤에 침대에서
     읽는 글이기도 하다. */
  color-scheme: light dark;
  font-family:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  color: #1a1d21;
  background: #f6f7f9;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  line-height: 1.65;
  /* 한글은 그냥 두면 글자 단위로 끊긴다. 어절 단위로 끊게 바꾼다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 플럭의 브랜드 파랑(`Palette.brand`). 흰 바탕과 5.4:1이다. */
a {
  color: #1363e3;
}

header,
main,
footer {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
}

.brand {
  color: inherit;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

nav {
  display: flex;
  gap: 16px;
}

nav a {
  color: #6b7280;
  text-decoration: none;
}

/* 지금 보고 있는 장은 눌러도 제자리라, 링크로 보이지 않게 둔다. */
nav a[aria-current="page"] {
  color: inherit;
  font-weight: 600;
}

main {
  padding: 48px 0 80px;
}

h1 {
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

h2 {
  margin-top: 38px;
  font-size: 22px;
  line-height: 1.35;
}

h3 {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.45;
}

p,
li {
  color: #4b5058;
}

.muted {
  color: #767c85;
}

footer {
  padding: 28px 0 44px;
  border-top: 1px solid rgb(26 29 33 / 10%);
  color: #767c85;
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #eef1f5;
    background: #131519;
  }

  nav a,
  p,
  li,
  .muted,
  footer {
    color: #b3b9c2;
  }

  /* 어두운 바탕에서 #1363e3은 가라앉는다. 같은 파랑을 밝은 쪽으로 올린다. */
  a {
    color: #7ba7f7;
  }

  footer {
    border-top-color: rgb(255 255 255 / 10%);
  }
}

@media (max-width: 520px) {
  header {
    align-items: flex-start;
  }

  nav {
    flex-direction: column;
    gap: 4px;
    text-align: right;
  }

  main {
    padding-top: 28px;
  }
}

/*
 * 처리방침의 표. 위탁·국외이전·구제기관처럼 「어느 항목을 누가 처리하는가」는
 * 문단으로 풀면 읽히지 않아 표로 둔다.
 *
 * 좁은 화면에서는 표가 판을 넘긴다. 글자를 줄여 맞추려고 해 봤지만 네 칸짜리
 * 표는 그래도 넘쳤고, 줄여 놓으니 본문보다 작아 읽기 어려웠다. 표만 가로로
 * 밀게 두고 판은 그대로 둔다.
 */
/*
 * 넘침은 **상자가** 맡는다. `<table>`에 바로 `overflow-x`를 주려면
 * `display: block`이어야 하는데, 그러면 칸 너비 계산이 표를 벗어나 좁은
 * 화면에서 글자가 한 자씩 쪼개졌다 — 국외이전 표가 「광고 / 식별자, / 기기 /
 * 정보,」로 흘러내렸다.
 */
.table-wrap {
  margin: 18px 0;
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  font-size: 15px;
  /* 칸이 넓으면 제 너비만큼 벌어져 상자가 밀리고, 좁으면 판을 채운다. */
  width: max-content;
  min-width: 100%;
}

th,
td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(26 29 33 / 10%);
  /* 표 안에서는 어절 단위로 끊으면 칸이 들쭉날쭉해진다. */
  word-break: keep-all;
}

th {
  font-weight: 600;
  white-space: nowrap;
  border-bottom-width: 2px;
}

td {
  color: #4b5058;
}

@media (prefers-color-scheme: dark) {
  th,
  td {
    border-bottom-color: rgb(255 255 255 / 12%);
  }

  td {
    color: #b3b9c2;
  }
}