/* 하위 페이지 데스크톱 층. index.html 을 뺀 나머지가 함께 쓴다.
   문제: 데스크톱 전용 규칙이 홈에만 있었다. 1920 화면에서도 기둥 1200px 고정에
   제목은 가운데 정렬, 활자는 모바일 치수 그대로였다(여정 점검 실측). */

@media (min-width: 1024px) {
  :root {
    /* 1200px 못박기 대신 화면을 따라 자란다. 홈(desktop.css)과 같은 상한 1440 */
    --container: clamp(1200px, 84vw, 1440px);
    --muted: #646B75;          /* 4.47:1 이라 회색 바탕에서 AA 미달이었다. 5.38:1 로 올린다 */
  }

  .container { width: min(100% - 56px, var(--container)); margin-inline: auto; }

  /* 활자를 화면 따라 키운다. 지금은 h1 46px 고정, h2 26~30px 고정이었다 */
  h1 { font-size: clamp(34px, 1rem + 2.2vw, 52px); line-height: 1.18; letter-spacing: -.032em; text-wrap: balance; }
  h2 { font-size: clamp(24px, 0.7rem + 1.25vw, 38px); line-height: 1.26; letter-spacing: -.03em; text-wrap: balance; }
  h3 { font-size: clamp(17px, 0.75rem + 0.45vw, 21px); letter-spacing: -.025em; }
  body { font-size: clamp(15px, 0.9rem + 0.15vw, 17px); }
  p { text-wrap: pretty; }
  /* 본문 한 줄이 60자를 넘어가면 못 읽는다(한글 한계 45자) */
  section p:not([class]) { max-width: 62ch; }

  /* ⛔ 하위 쪽은 제목이 가운데 정렬이고 홈은 왼쪽이라 한 사이트로 안 보였다 */
  /* 클래스 규칙이 이겨서 태그 선택자로는 안 잡힌다. 실제 클래스를 짚는다 */
  .section-heading, .service-section-heading { margin-inline: 0; max-width: none; text-align: left; }

  /* 활자가 화면을 안 따라갔다. 하위 h1 은 3.2vw 인데 48px 에서 멎고, 구간 제목은 24~30px 고정이었다 */
  .service-hero-copy h1 { font-size: clamp(34px, 0.8rem + 2.4vw, 58px); max-width: 22ch; line-height: 1.2; letter-spacing: -.032em; }
  .section-heading h2, .benefit-title h2, .section-topline h2 { font-size: clamp(24px, 0.7rem + 1.25vw, 38px); line-height: 1.26; letter-spacing: -.03em; }
  .service-section-heading h2 { font-size: clamp(26px, 0.7rem + 1.35vw, 40px); line-height: 1.24; letter-spacing: -.03em; }
  .contact-copy h2 { font-size: clamp(28px, 0.8rem + 1.5vw, 42px); line-height: 1.24; letter-spacing: -.03em; }
  .post-head h1 { font-size: clamp(26px, 0.8rem + 1.5vw, 42px); line-height: 1.3; letter-spacing: -.03em; }
  .blog-page .service-section-heading h1 { font-size: clamp(26px, 0.8rem + 1.5vw, 42px); line-height: 1.3; letter-spacing: -.03em; }

  /* 히어로 그라디언트 상자가 91쪽 중 84쪽에 그대로 있었다. 2020년 표식이다.
     사진이 없는 쪽이 대부분이라 상자를 없애지 않고, 그라디언트를 걷고 면과 선으로 정리한다 */
  .service-hero-card:not(.service-hero-card--night) {
    background: #F7F8FB;
    border: 1px solid #E7EAF0;
    box-shadow: none;
    border-radius: 20px;
    min-height: clamp(340px, 26vw, 440px);
  }

  /* 섹션 세로 여백이 48/48·44/44·24/88 로 제각각이고 데스크톱치고 좁았다 */
  .service-section, .assure, .quote-section { padding-block: clamp(64px, 4.4vw, 92px); }
  /* 히어로 아래 88px 가 그대로 다음 구간 48px 와 겹쳐 136px 빈 자리가 됐다 */
  .service-hero-section { padding-bottom: clamp(40px, 3vw, 56px); }
}

/* 폭과 무관한 것 */
/* 마스트헤드 높이가 바뀌면 앵커가 제목을 가린다 */
main section[id] { scroll-margin-top: 84px; }

@media (hover: hover) and (min-width: 1024px) {
  /* 카드가 눌러지는 것처럼 보이지 않았다 */
  .service-card, .detail-card, .link-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
  .service-card:hover, .detail-card:hover, .link-card:hover {
    transform: translateY(-2px);
    border-color: #DFD6FA;
    box-shadow: 0 10px 24px rgb(31 36 41 / .08);
  }
}