/* 앱과 같은 색을 쓴다.
 *
 * 값은 game/README.md의 「맑은 아침」에서 그대로 가져왔다 — 물 #63C4CC, 돌 #F3EDDF,
 * 이끼 #A8D65A, 물 위 글자는 흰색에 물색을 어둡게 한 테두리(#25505A). 앱을 받으러 온
 * 사람이 앱과 다른 색의 쪽을 먼저 만나면 그 둘이 같은 물건이라는 것을 다시 확인해야 한다.
 * 제목 글꼴도 앱과 같은 Do Hyeon이다. */
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');

:root {
  --water: #63c4cc;
  --water-deep: #3a9fb0;
  --water-night: #25505a;
  --stone: #f3edde;
  --moss: #a8d65a;
  --coin: #f2c14e;
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, 0.8);
  --ink-faint: rgba(255, 255, 255, 0.6);
  --rule: rgba(255, 255, 255, 0.28);
  --measure: 34rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--water-deep);
  color: var(--ink);
  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, rgba(255,255,255,0) 0%, rgba(58,159,176,0.55) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 24px, rgba(255,255,255,0) 24px 48px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 24px, rgba(255,255,255,0) 24px 48px),
    var(--water);
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
}

header.hero .icon {
  width: 112px;
  height: 112px;
  border-radius: 25px;
  display: block;
  margin: 0 auto 1.5rem;
  box-shadow: 0 12px 32px rgba(20, 60, 70, 0.35);
}

/* 앱의 물 위 글자 — 흰 글자에 물색 테두리. */
header.hero h1,
h2.big {
  font-family: "Do Hyeon", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow:
    -2px -2px 0 var(--water-night), 2px -2px 0 var(--water-night),
    -2px 2px 0 var(--water-night), 2px 2px 0 var(--water-night),
    0 3px 0 var(--water-night);
}

header.hero h1 {
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

header.hero .tagline {
  color: var(--ink);
  font-size: 1.1rem;
  margin: 0 auto;
  max-width: 26rem;
  text-shadow: 0 1px 2px rgba(37, 80, 90, 0.5);
}

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

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(--ink-muted); }
.small { font-size: 0.9rem; color: var(--ink-faint); }

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

a:focus-visible {
  outline: 2px solid var(--coin);
  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(--ink-faint); }
strong { font-weight: 700; }

/* 앱이 실제로 적는 한 줄. 지어낸 말이 아니라 화면에서 옮겨 온 것임을 보이려고
 * 앱의 제목 글꼴로 세운다. */
.quote {
  font-family: "Do Hyeon", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(37, 80, 90, 0.28);
  border-left: 4px solid var(--moss);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  max-width: var(--measure);
  text-shadow: 0 1px 0 var(--water-night);
}

.lede {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* 받으러 가는 단추. 애플 배지는 고쳐 쓰지 못하므로 크기와 여백만 정한다.
 * 흰 배지 — 물색 위에서 검정은 무겁다. 주소에는 번호만 담는다(이름은 판마다 바뀔 수 있다). */
.get { display: inline-block; margin: 0.25rem 0 1.5rem; border-radius: 8px; }
.get img { display: block; height: 44px; width: auto; }

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

/* 그림 한 장과 그 화면에 대한 말이 나란히 선다. 짝수 번째는 그림이 오른쪽. */
.step {
  display: grid;
  --shot: 13rem;
  grid-template-columns: var(--shot) minmax(0, 1fr);
  gap: 1.75rem 2rem;
  align-items: start;
  margin: 3.5rem 0;
}

.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: 18px;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 28px rgba(20, 60, 70, 0.25);
}

.step figcaption {
  font-size: 0.85rem;
  color: var(--ink-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: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; }
}

/* ------------------------------------------------------------------ 돌 */

/* 돌 다섯. 사진은 화면에서 오린 정사각형이라 위가 같은 크기로 줄지어 선다. */
ul.stones {
  list-style: none;
  padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 1.5rem 0 0;
}

ul.stones li { margin: 0; }

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

ul.stones h3 { margin: 0.75rem 0 0.25rem; }
ul.stones p { font-size: 0.95rem; line-height: 1.6; margin: 0; color: var(--ink-muted); }

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

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

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