/* 앱과 같은 색을 쓴다.
 *
 * 값은 lib/ui/theme.dart의 어두운 펠트(TableTheme.dark)와 붉은 잉크, 그리고
 * 짚어 주는 금빛에서 그대로 가져왔다. 앱을 받으러 온 사람이 앱과 다른 색의
 * 페이지를 먼저 만나면, 그 둘이 같은 물건이라는 것을 다시 확인해야 한다.
 *
 * 나머지는 프리셀의 `site/style.css`와 같다. 청록으로 갈린 것은 펠트 셋과
 * 잉크 하나뿐이다 — 두 앱의 쪽이 같은 손에서 나온 것으로 보여야 한다. */
:root {
  --felt: #1f7a87;
  --felt-deep: #12525c;
  --felt-edge: #06232b;
  --gold: #ffd166;
  --ink-red: #c0303a;
  --paper: #f4f6f3;
  --chrome: #ffffff;
  --chrome-muted: rgba(255, 255, 255, 0.72);
  --chrome-faint: rgba(255, 255, 255, 0.5);
  --rule: rgba(255, 255, 255, 0.14);
  --measure: 34rem;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--felt-deep);
  color: var(--chrome);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  /* 한국어는 낱말 가운데서 끊지 않는다. */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* ------------------------------------------------------------------ 머리 */

header.hero {
  background: linear-gradient(180deg, var(--felt) 0%, var(--felt-deep) 100%);
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
}

header.hero .icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

header.hero h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

header.hero .tagline {
  color: var(--chrome-muted);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 26rem;
}

/* 받는 곳을 맨 아래에만 두면, 읽다 말고 나가는 사람에게는 없는 것과 같다.
   첫 화면에도 같은 배지를 둔다 — 아래의 것은 다 읽은 사람을 위해 그대로 둔다. */
header.hero .hero-get {
  /* 좌우를 auto로 두어야 가운데 선다. 본문 p에 걸린 max-width가 여기에도
     걸리므로, 폭을 다 쓰지 못한 채 왼쪽으로 붙는다. */
  margin: 1.75rem auto 0;
}

header.hero .hero-get .get {
  margin: 0;
}

/* ------------------------------------------------------------------ 본문 */

h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 3.5rem 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 2rem 0 0.4rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.muted {
  color: var(--chrome-muted);
}

.small {
  font-size: 0.9rem;
  color: var(--chrome-faint);
}

a {
  color: var(--gold);
  text-underline-offset: 3px;
}

/* 받으러 가는 단추 — 애플이 주는 배지를 그대로 쓴다.
 *
 * 배지는 애플의 자산이라 고쳐 쓰지 못한다. 색을 바꾸는 것도, 글자를 갈아
 * 넣는 것도, 테두리를 두르는 것도 안 된다. 그래서 여기서 정하는 것은 크기와
 * 둘레의 여백뿐이다.
 *
 * **흰 배지를 쓴다.** 애플이 검정과 흰색 두 벌을 주는데, 검정은 이 쪽의 짙은
 * 펠트 위에서 묻힌다.
 *
 * 높이를 44px로 잡은 것은 애플이 정한 최소(40px)보다 조금 크게 두려는
 * 것이다. 손가락으로 누르는 자리라 최소치에 딱 맞추지 않는다.
 *
 * **말마다 배지가 다르다.** 한국어 배지에는 그 말이 한국어로 적혀 있어서,
 * 한 벌을 두 쪽에 돌려 쓸 수 없다.
 *
 * 주소에 이름을 담지 않는다. 애플이 주는 주소에는 앱 이름이 슬러그로 붙지만
 * (`/freecell-32-000-deals-rated/`) 그 이름은 판올림마다 바뀔 수 있다.
 * 번호만 있는 주소는 이름이 바뀌어도 그대로 산다. 나라도 담지 않는다 —
 * `/app/`으로 열면 애플이 보는 사람의 나라 스토어로 넘긴다. */
.get {
  display: inline-block;
  margin: 0.25rem 0 1.5rem;
  border-radius: 8px;
}

.get img {
  display: block;
  height: 44px;
  width: auto;
}

a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  max-width: var(--measure);
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: var(--chrome-faint);
}

strong {
  font-weight: 700;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ 강조 */

/* 첫 문단. 글이 시작하는 자리는 조금 크게 두어, 읽을지 말지를 여기서
 * 정하게 한다. */
.lede {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--chrome);
  margin-bottom: 1.25rem;
}

/* 앱이 실제로 적는 한 줄을 그대로 옮겨 온 자리.
 *
 * 기능을 설명하는 문장 열 개보다 앱이 뱉은 한 줄이 낫다. 그래서 이 줄만은
 * 앱의 글꼴 대신 고정폭으로 세워, 이것이 우리가 지어낸 말이 아니라 화면에서
 * 옮겨 온 것임을 보이게 한다. */
.quote {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 0.85rem 1rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
  overflow-x: auto;
}

/* ------------------------------------------------------------------ 발 */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--chrome-faint);
}

footer nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* 인쇄와 밝은 화면을 따로 두지 않는다. 이 페이지는 앱의 펠트 위에 서고,
 * 그것이 이 페이지가 하는 말의 절반이다. */

/* --------------------------------------------------------------- 판 번호 쪽 */

/* 시작 배치. 여덟 열이 나란히 서고, 열 안에서 카드가 아래로 내려간다.
 *
 * 카드를 겹쳐 쌓지 않는다. 앱에서는 겹쳐야 한 화면에 들어가지만, 여기서
 * 하는 일은 두는 것이 아니라 **어떤 판인지 알아보는 것**이라 가려지는
 * 카드가 하나도 없어야 한다. */
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.35rem;
  margin: 2rem 0;
  padding: 0.9rem 0.7rem;
  background: var(--felt);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

.board .col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.board .card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  padding: 0.3rem 0.1rem;
  background: var(--paper);
  color: #1a1a1a;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board .card.red {
  color: var(--ink-red);
}

/* 무늬는 숫자보다 한 급 작게. 좁은 화면에서 '10♦'이 두 줄로 접히는 것을
 * 막는 것이 이 값의 실제 쓸모다. */
.board .card i {
  font-style: normal;
  font-size: 0.9em;
}

/* 재어 나온 값들. 왼쪽이 이름이고 오른쪽이 숫자다. */
table.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

table.facts th,
table.facts td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

table.facts th {
  font-weight: 400;
  color: var(--chrome-faint);
  padding-right: 1rem;
}

table.facts td {
  font-variant-numeric: tabular-nums;
}

/* 등급은 앱의 색을 따른다. 풀 수 없는 판만 붉은 잉크를 쓴다 — 어려움의
 * 끝이 아니라 다른 종류의 것이기 때문이다. */
.grade {
  color: var(--gold);
}

.grade.g-unsolvable {
  color: var(--ink-red);
}

@media (max-width: 30rem) {
  .board {
    gap: 0.2rem;
    padding: 0.6rem 0.4rem;
  }

  .board .card {
    font-size: 0.7rem;
    padding: 0.25rem 0.05rem;
  }
}

/* ------------------------------------------------------------------ 화면 */

/* 그림 한 장과 그 화면에 대한 말이 나란히 선다.
 *
 * 한때 여섯 장을 옆으로 굴리는 띠였다. 굴리는 짜임에서는 그림 하나에 한
 * 줄밖에 붙일 수 없어서, 판 아래 숫자가 무엇인지 같은 말을 할 자리가
 * 없었다. 그림과 말을 붙여 놓으니 어느 말이 어느 화면의 것인지가 눈으로
 * 붙고, 소개 글이 곧 화면 설명이 된다. */
.step {
  display: grid;
  /* 그림 칸의 너비는 한 자리에서만 정한다. 좌우를 바꿀 때 이 값을 두 번
   * 적으면 한쪽만 고치는 날이 오고, 그러면 그림 크기가 칸마다 달라진다. */
  --shot: 14rem;
  grid-template-columns: var(--shot) minmax(0, 1fr);
  gap: 1.75rem 2rem;
  align-items: start;
  margin: 3.5rem 0;
}

/* 짝수 번째는 그림을 오른쪽에 둔다. 여섯 장이 같은 쪽에 줄지어 서면
 * 지나가는 눈에는 한 장으로 보인다.
 *
 * 칸을 옮길 때 **틀도 같이 뒤집어야 한다.** 그림만 2번 칸으로 보내면
 * 그림이 넓은 칸에 들어가 짝수 번째만 커진다. */
.step:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) var(--shot);
}

.step:nth-of-type(even) > figure {
  grid-column: 2;
  grid-row: 1;
}

.step:nth-of-type(even) > .say {
  grid-column: 1;
  grid-row: 1;
}

.step figure {
  margin: 0;
}

.step img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--rule);
}

.step figcaption {
  font-size: 0.85rem;
  color: var(--chrome-faint);
  margin-top: 0.5rem;
  text-align: center;
}

/* 칸 안에서는 소제목이 글의 첫 줄이므로 위쪽 여백만 걷는다. 밑줄은 그대로
 * 둔다 — 그림 없는 절(「막혔을 때」, 「값」)의 소제목과 같아 보여야 한다. */
.step h2 {
  margin: 0 0 0.75rem;
}

.step .say > :last-child {
  margin-bottom: 0;
}

/* 그림을 옆에 세울 자리가 없으면 위로 올린다. 폰에서는 이쪽이 기본이다. */
@media (max-width: 44rem) {
  /* 짝수 칸의 틀도 함께 푼다. `.step`만 적으면 그 규칙이 이기지 못한다. */
  .step,
  .step:nth-of-type(even) {
    grid-template-columns: 1fr;
  }

  .step > figure,
  .step > .say,
  .step:nth-of-type(even) > figure,
  .step:nth-of-type(even) > .say {
    grid-column: 1;
    grid-row: auto;
  }

  .step figure {
    max-width: var(--shot);
    margin: 0 auto;
  }
}