/* 시작하기 · 내려받기 — account.css 위에 얹는다.

   이 두 장이 하는 일은 **고르게 하는 것**뿐이다. 고르는 화면에서 가장
   나쁜 것은 무엇이 다른지 안 적고 이름만 둘 놓는 것이다. 그래서 각
   갈래에 "무엇이 달라지는가" 한 줄과 **지금 되는지**를 같이 붙인다.

   토큰과 컴포넌트는 DESIGN.md 를 따른다. 여기에만 있는 색을 만들지 않는다. */

.card.wide{max-width:560px}

/* ── 두 갈래 ────────────────────────────────────────────────────────
   가로로 나란히 두지 않는다. 둘 중 하나를 고르는 것이지 견주는 것이
   아니고, 나란히 두면 좁은 화면에서 설명이 먼저 잘린다. */
.picks{display:flex;flex-direction:column;gap:12px}
.pick{display:block;border:1px solid var(--line);border-radius:5px;
  padding:18px 20px;text-decoration:none;background:#fff}
.pick:hover{border-color:var(--brand);background:var(--bg-2)}
.pick .t{display:block;font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.pick .d{display:block;font-size:14px;color:var(--ink-2);line-height:1.65}

/* 지금 되는지. 상태 배지(DESIGN.md 5.6)와 같은 어휘로 적는다 —
   **되는 것을 초록으로 칠하지 않는다.** 판정 색은 검토비 전용이다. */
.pick .m{display:inline-block;margin-top:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:2px;padding:2px 7px}
.pick.soon{background:var(--bg-2)}
.pick.soon .t{color:var(--ink-2)}

/* ── 무엇이 다른가 ─────────────────────────────────────────────────
   내려받기 장에서만 쓴다. 표를 크게 그리지 않는다 — 읽을 것은 세 줄이다. */
.diff{width:100%;border-collapse:collapse;font-size:14px;margin:4px 0 0}
.diff th,.diff td{text-align:left;padding:11px 0;border-top:1px solid var(--line-2);
  vertical-align:top}
.diff thead th{border-top:0;padding-top:0;font-size:12.5px;font-weight:500;
  color:var(--ink-3)}
.diff td:first-child,.diff th:first-child{padding-right:16px;width:34%;color:var(--ink-2)}
.diff td:last-child{color:var(--ink)}

/* 본문 안의 작은 묶음. 제목 하나 + 문단 몇 개. */
.blk{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.blk h2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:9px}
.blk p{font-size:14.5px;color:var(--ink-2);margin-bottom:10px}
.blk p:last-child{margin-bottom:0}
.blk a{color:var(--brand)}

@view-transition{navigation:auto}