/*
 * 하위 페이지 모바일 글자 크기
 *
 * 원본은 페이지마다 :root 값을 따로 잡아두었고, 줄이는 기준점도 680px 이었습니다.
 * 그래서 681~768px 구간에서는 태블릿용 큰 글자가 그대로 나오고,
 * 개인정보 처리방침은 680px 아래에서도 제목이 32px 로 큰 편이었습니다.
 *
 * 이 파일은 하위 페이지(개인정보처리방침 · 인사이트 · 프로젝트 · 상세)에서만
 * 768px 이하의 값을 한 벌로 통일합니다. 원본 파일은 건드리지 않습니다.
 *
 * 메인 페이지에서는 부르지 않습니다.
 * 메인의 --fs-h1 은 화면을 꽉 채우는 히어로 문구라 기준이 다릅니다.
 */

@media (max-width: 768px) {
  :root {
    --fs-h1: 28px;              /* 페이지 제목 */
    --fs-h2: 20px;              /* 소제목 */
    --fs-h3: 20px;
    --fs-body: 16px;            /* 본문 */
    --fs-article-title: 28px;   /* 글·프로젝트 상세 제목 */
    --fs-feature-title: 24px;   /* 목록 대표 카드 제목 */
    --fs-card-title: 20px;      /* 목록 카드 제목 */
    --pad-x: 20px;              /* 좌우 여백 */
    --pad-top: 120px;
    --pad-bottom: 80px;
  }

  /*
   * 행간.
   * 원본은 1.85~1.9 로 넓은데, 한 줄에 들어가는 글자 수가 적은 좁은 화면에서는
   * 줄 사이가 뜨서 읽기 어려워집니다. 1.7 로 좁힙니다.
   */
  .policy-section p,
  .policy-section .note,
  .policy-dl dd {
    line-height: 1.7;
  }

  .policy-section .fine {
    font-size: 15px;
    line-height: 1.7;
  }

  .article__lead {
    font-size: 17px;
    line-height: 1.7;
  }

  .article__body p {
    font-size: 16px;
    line-height: 1.7;
  }

  /* 이메일 주소처럼 띄어쓰기 없는 긴 글자가 화면 밖으로 나가지 않게 */
  .policy-section p,
  .policy-section .note,
  .policy-dl dd,
  .article__lead,
  .article__body p {
    overflow-wrap: break-word;
  }
}

/* ───────────────────────────────────────────────────────
 * 상단 로고의 글자 부분(워드마크)
 *
 * 원본은 680px 아래에서 워드마크를 통째로 감췄습니다. 원래 크기(202×13)로는
 * 마크 68 + 간격 14 + 워드마크 202 = 284px 이라, 햄버거 44px 와 좌우 여백 20px 를
 * 더하면 375px 폰에서 9px 넘치기 때문입니다.
 *
 * 다만 680px 은 너무 크게 잡은 기준이어서, 자리가 남는 400~680px 구간까지
 * 회사 이름이 사라지고 있었습니다. 그래서 워드마크를 11px 로 줄여 되살립니다.
 * 줄인 크기로는 로고가 251px 이라 360px 폰에서도 들어갑니다.
 *
 * 기준을 680px 로 맞춘 이유는, 그 위(681~768px)에서는 원본이 이미 원래 크기로
 * 보여주고 있어 굳이 줄일 이유가 없기 때문입니다.
 * ─────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .brand-logo {
    gap: 12px;
  }

  .brand-logo__wordmark {
    display: block;
    width: 171px;
    height: 11px;
  }
}

/* 그보다 좁은 화면은 자리가 나오지 않으므로 마크만 남깁니다 */
@media (max-width: 359px) {
  .brand-logo__wordmark {
    display: none;
  }
}