/* 글이 주인공인 화면들 — 무료 도착지 글, 소개, 약관, 환불.
 *
 * landing.css 를 먼저 깔고 이 파일을 덧댄다. 맨 위 줄·바닥글·단추·카드는
 * landing.css 것을 그대로 쓴다. 여기 있는 것은 "긴 글" 에만 필요한 규칙이다.
 *
 * px 을 손으로 적지 않는다. 값은 tokens.css 에만 있다.
 * 1회차 실측에서 라이브가 무너진 자리가 바로 여기다 — 글 화면마다 여백과
 * 글자 크기를 새로 정해서 세로 여백 35종, 글자 15종이 됐다.
 */

/* ── 글 화면의 머리 ───────────────────────────────────────────────────────
   히어로 사진을 쓰지 않는다. 글을 읽으러 온 사람에게 첫 화면을 사진으로
   채우면 제목이 접히는 선 아래로 내려간다. */
.page-head {
  padding-top: var(--s7);
  padding-bottom: var(--s5);
  border-bottom: var(--border);
}

.page-head h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-bold);
  margin: 0;
  max-width: var(--measure);
}

.page-head .lead {
  margin-top: var(--s4);
}

/* 글 위에 붙는 메타 한 줄. 날짜와 갈래가 여기 산다.
   가운뎃점으로 잇지 않는다. 칸을 띄워 가른다. */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-55);
}

/* ── 본문 ────────────────────────────────────────────────────────────────
   글줄 길이를 68자에서 끊는다. 데스크톱에서 글이 1120px 을 가로지르면
   눈이 다음 줄 첫머리를 못 찾는다. */
.article {
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}

.article .wrap > * {
  max-width: var(--measure);
}

.article h2 {
  margin-top: var(--s8);
  margin-bottom: var(--s3);
}

.article h2:first-child {
  margin-top: 0;
}

.article h3 {
  margin-top: var(--s6);
  margin-bottom: var(--s2);
}

.article p,
.article li {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
}

.article p {
  margin: 0 0 var(--s4);
}

.article ul,
.article ol {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
}

.article li {
  margin-bottom: var(--s2);
}

.article li::marker {
  color: var(--ink-55);
}

/* 글 안의 사진. 글줄보다 넓게 두되 판 밖으로 나가지 않는다. */
.article figure {
  margin: var(--s6) 0;
  max-width: 100%;
}

.article figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: var(--border);
}

.article figcaption {
  margin-top: var(--s2);
  font-size: var(--t-small);
  line-height: var(--lh-loose);
  color: var(--ink-55);
}

/* 글 안에서 한 번 멈춰 세우는 자리. 색 면을 새로 만들지 않고
   옅은 주색 바닥 하나만 쓴다. */
.callout {
  margin: var(--s6) 0;
  padding: var(--card-p);
  background: var(--prim-wash);
  border: var(--border);
  border-left: var(--s1) solid var(--prim);
  border-radius: var(--r-lg);
}

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

.callout h3 {
  margin-top: 0;
}

/* ── 무료 글 목록 ────────────────────────────────────────────────────────
   카드 규격은 landing.css 의 .cards 와 같다. 여기서 더하는 것은
   카드 전체가 누르는 자리가 되게 하는 것뿐이다. 1회차에서 라이브
   바닥글 링크가 22px 이었던 것과 같은 문제를 목록에서 되풀이하지 않는다. */
.note-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: var(--tap-min);
}

.note-card h3 {
  margin: 0;
}

.note-card h3 a {
  color: inherit;
  text-decoration: none;
}

/* 카드 어디를 눌러도 글이 열린다. 제목 글자만 누르게 두지 않는다. */
.note-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
}

.note-card {
  position: relative;
}

.note-card h3 a:focus-visible::after {
  outline: 2px solid var(--prim);
  outline-offset: 2px;
}

.note-card p {
  margin: 0;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--ink-70);
}

.note-card .tag {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-weight: var(--w-med);
  color: var(--prim);
}

/* ── 약관과 환불 ─────────────────────────────────────────────────────────
   절마다 번호를 단다. 손님이 문의할 때 "3.2 요" 라고 말할 수 있어야 한다. */
.legal-doc {
  counter-reset: clause;
}

.legal-doc h2 {
  counter-increment: clause;
}

.legal-doc h2::before {
  content: counter(clause) ". ";
  color: var(--ink-55);
  font-weight: var(--w-med);
}

/* 긴 문서 맨 위의 차례. 항목 하나하나가 터치 바닥을 지킨다. */
.toc {
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--border);
}

.toc li {
  border-bottom: var(--border);
}

.toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--s2) 0;
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  text-decoration: none;
  color: var(--ink);
}

.toc a:hover {
  color: var(--prim);
}

/* 각 절 끝의 "맨 위로" 는 두지 않는다. 글이 짧으면 군더더기다.
   대신 문서 끝에 다음에 할 일 하나를 둔다. */
.page-end {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--border);
}

.page-end .btn {
  margin-top: var(--s4);
}

/* ── 소개 화면의 두 칸 ───────────────────────────────────────────────────
   칸 수를 미디어 쿼리로 세지 않는다. 폭이 모자라면 알아서 한 칸이 된다. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: var(--s6);
  margin-top: var(--s6);
}

.split > * {
  max-width: none;
}

.split h3 {
  margin-top: 0;
}

/* 소개 화면의 "이건 우리가 안 한다" 목록. 안 하는 것을 적는 자리라
   체크 표시를 붙이지 않는다. */
.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list li {
  padding: var(--s3) 0;
  border-bottom: var(--border);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
}

.plain-list li:first-child {
  border-top: var(--border);
}