/* 레슨 읽기 화면의 760px 본문·글꼴·색과 랜딩의 80% 가운데 정렬을 재사용한다. */
.fs-landing-guide {
  --flg-fg: var(--fs-app-text, #111827);
  --flg-muted: var(--fs-app-muted, #64748b);
  --flg-link: var(--fs-app-link, #2563eb);
  --flg-border: var(--fs-app-border, #e5e7eb);
  --flg-screen-gap: 24px;
  width: 80%;
  max-width: 760px;
  margin: 24px auto 32px;
  color: var(--flg-fg);
  font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.fs-landing-guide section + section { margin-top: 24px; }
div.fs-landing-guide h1,
div.fs-landing-guide h2 {
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
}
div.fs-landing-guide h1 {
  margin-bottom: 6px;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 750;
  line-height: 1.35;
}
.fs-landing-guide .fs-landing-intro p { color: var(--flg-muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 600px) { div.fs-landing-guide h1 { font-size: 20px; } }
.fs-landing-guide p { margin: 0 0 10px; }
.fs-landing-guide p:last-child { margin-bottom: 0; }
.fs-landing-guide .fs-landing-guide__example { margin: 20px 0; }
.fs-landing-guide__boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fs-landing-guide__boards > div { min-width: 0; }
.fs-landing-guide .fs-landing-guide__board-label { margin: 0 0 8px; font-size: 14px; color: var(--flg-fg); }
.fs-landing-guide__boards img { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 1; margin: 0 auto; }
.fs-landing-guide__example figcaption,
.fs-landing-guide__screen figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--flg-muted); }
.fs-landing-guide__screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--flg-screen-gap); margin: 20px 0; }
.fs-landing-guide .fs-landing-guide__screen { width: 100%; max-width: 420px; min-width: 0; margin: 0 auto; }
.fs-landing-guide .fs-landing-guide__puzzle { width: calc((100% - var(--flg-screen-gap)) / 2); margin: 20px auto; }
.fs-landing-guide__screen-link { display: block; }
.fs-landing-guide__screen img { display: block; width: 100%; height: auto; aspect-ratio: 840 / 1600; border: 1px solid var(--flg-border); box-sizing: border-box; }
@media (max-width: 600px) {
  .fs-landing-guide__boards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fs-landing-guide__screens { grid-template-columns: minmax(0, 1fr); }
  .fs-landing-guide .fs-landing-guide__puzzle { width: 100%; }
}
.fs-landing-guide__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fs-landing-guide a { color: var(--flg-link); text-decoration: underline; text-underline-offset: 3px; }
.fs-landing-guide a:focus-visible { outline: 2px solid var(--flg-link); outline-offset: 3px; }
/* 자주 묻는 질문(2026-10-19): 질문은 본문 굵은 글자, 답은 본문과 같은 글자. 색은 위 변수라 다크 모드도 따라간다 */
.fs-landing-guide__faq { margin: 0 0 10px; }
.fs-landing-guide__faq dt { margin: 12px 0 2px; font-weight: 700; }
.fs-landing-guide__faq dt:first-child { margin-top: 0; }
.fs-landing-guide__faq dd { margin: 0; }
/* 휴대폰 폭은 랜딩 위쪽(.fsl-root .wrap)과 같이 좌우 여백 10px(2026-10-19 사용자 요청). PC 는 80% 그대로 */
@media (max-width: 767.98px) { .fs-landing-guide { width: calc(100% - 20px); } }