/* 앱과 같은 색을 쓴다.
 *
 * 값은 lib/ui/theme.dart의 밝은 펠트와 붉은 잉크, 그리고 받아 줄 자리를
 * 밝히는 금빛에서 그대로 가져왔다. 앱을 받으러 온 사람이 앱과 다른 색의
 * 페이지를 먼저 만나면, 그 둘이 같은 물건이라는 것을 다시 확인해야 한다.
 *
 * 자매 사이트(../freecell/site/style.css)와 같은 틀이다. 세 앱이 같은 집안이라
 * 소개 쪽도 같은 옷을 입는다. 판 번호 쪽의 규칙만 뺐다 — 여기는 판 번호가
 * 없다. */
:root {
  --felt: #2e7d5b;
  --felt-deep: #14532d;
  --felt-edge: #08301b;
  --gold: #ffd54f;
  --ink-red: #c41f33;
  --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;
}

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

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

/* 그림 한 장과 그 화면에 대한 말이 나란히 선다.
 *
 * 한때 여섯 장을 옆으로 굴리는 띠였다. 굴리는 짜임에서는 그림 하나에 한
 * 줄밖에 붙일 수 없어서, 판 아래 숫자가 무엇인지 같은 말을 할 자리가
 * 없었다. 그림과 말을 붙여 놓으니 어느 말이 어느 화면의 것인지가 눈으로
 * 붙고, 소개 글이 곧 화면 설명이 된다. */
.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;
  }
}