html {
  /* 2026-08-19 — 사장이 "메인페이지랑 폰트가 좀 다른 것 같다" 고 했다. 맞았다.
   재 보니 메인(W1)은 Pretendard, 이 파일을 쓰는 화면 13곳은 Arial 이었다.
   C1 광고주 화면 셋은 font-family 선언이 아예 없어 여기 값을 그대로 받고 있었다.
   **W1 style.css 와 같은 스택으로 맞춘다.** 한 제품이 두 글꼴로 보이면 안 된다.

   Pretendard 는 이 레포에 파일이 없다. 깔린 PC 에서만 뜨고 아니면 맑은 고딕으로
   떨어진다 — 실측으로 같은 글이 696px → 774px, 문서가 5,400 → 5,586px 이 된다.
   **무너지지는 않지만 같아 보이지도 않는다.** 웹폰트로 실을지는 사장이 정한다. */
/* **이름이 둘이다.** 동적 서브셋이 선언하는 이름은 `Pretendard Variable` 이고
     그냥 `Pretendard` 는 PC 에 따로 깔린 정적 판이다.
     2026-08-19 에 우리 것만 적어 뒀다가 조용히 틀렸다 — 화면은 Pretendard 로
     보이는데 웹폰트는 0바이트였다. **내 PC 에 깔려 있어서 그렇게 보인 것뿐이다.**
     광고주 PC 에서는 맑은 고딕으로 떨어졌을 것이고, 검사기도 못 잡는다.
     가변 판을 먼저 적는다. 없으면 깔린 정적 판, 그다음 대체 순이다. */
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR",
               "Malgun Gothic", sans-serif;
  letter-spacing: -0.035em;   /* W1 body 와 같은 값 */
  line-height: 1.5;
}

body,
body * {
  line-height: 1.5 !important;
}

h1,
h2,
h3 {
  line-height: 1.25 !important;
  letter-spacing: -0.04em !important;
}

.sample,
.client,
.top .meta,
.shell .rail .eyebrow,
.shell .rail-note,
.shell .intro .kicker,
.shell .legend,
.shell .strip small,
.shell .strip p,
.shell .panel-head span,
.shell .type,
.shell .status,
.shell .next b,
.shell .card > p,
.shell .intent b,
.shell .intent span,
.shell .facts span,
.shell .rule li,
.workspace .side-label,
.workspace .fact,
.workspace .intent b,
.workspace .intent p,
.workspace .article-type,
.workspace .byline,
.workspace .review div,
.workspace .notice {
  font-size: 12px;
}

.top a:not(.logo),
.client strong,
.shell .rail nav a,
.shell .intro p,
.workspace .toc a,
.workspace .section p,
.workspace .steps p,
.workspace .faq p,
.workspace .faq summary,
.workspace .sources li,
.workspace .sources a,
.workspace .related a,
.workspace .review b {
  font-size: 14px;
}

.shell td,
.workspace td {
  font-size: 13px;
}

.shell .strip strong,
.shell .panel-head h3,
.shell .card h3,
.shell .facts b,
.workspace .facts h2,
.workspace .article-head .dek,
.workspace .summary p,
.workspace .steps h3 {
  font-size: 16px;
}

.shell .rail h2,
.workspace .section h2 {
  font-size: 20px;
}

.shell .intro h1,
.workspace .article-head h1 {
  font-size: 26px;
}

.shell th,
.workspace th {
  font-size: 12px;
}

.shell main {
  padding: 42px 44px 70px;
}

.shell .intro {
  gap: 24px;
  margin-bottom: 28px;
}

.shell .strip {
  margin-bottom: 28px;
  border-radius: 10px;
  overflow: hidden;
}

.shell .strip section,
.shell .panel-head,
.shell .card {
  padding: 20px;
}

.shell .strip section {
  border-radius: 10px;
}

.shell .desk {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.shell .panel,
.shell .card {
  border-radius: 10px;
  overflow: hidden;
}

.shell .side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.shell .side .card {
  height: 100%;
}

.shell .intent {
  gap: 14px;
}

.workspace {
  gap: 14px;
}

.workspace .toc,
.workspace article,
.workspace .facts,
.workspace .intent,
.workspace .summary,
.workspace .data-table,
.workspace .related a,
.workspace .review,
.workspace .notice {
  border-radius: 10px;
}

.workspace .notice {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.workspace .toc,
.workspace article,
.workspace .facts,
.workspace .data-table,
.workspace .review {
  overflow: hidden;
}

.workspace .intent {
  margin-top: 14px;
  padding: 20px;
}

.workspace .section {
  padding: 42px 20px;
}

.workspace .steps,
.workspace .related {
  gap: 14px;
}

.workspace .data-table table {
  min-width: 0;
  table-layout: fixed;
}

.workspace .related {
  grid-template-columns: 1fr;
}

@media (max-width: 760px) {
  .shell main {
    padding: 26px 16px 48px;
  }

  .shell .side {
    grid-template-columns: 1fr;
  }

  .shell .strip section,
  .shell .panel-head,
  .shell .card {
    padding: 20px;
  }

  .workspace {
    gap: 0;
  }

  .workspace .section {
    padding: 34px 16px;
  }
}

/* 한국어는 낱말 중간에서 끊으면 안 된다.
   기본값(word-break: normal)은 한글을 글자 단위로 끊어서
   "납부 내역" 이 "납 / 부 내역" 이 된다. 2026-08-18 에 원고 화면 표에서
   실제로 그랬다 — "사업장 관련 세금계산서와 납 / 부 내역".
   p 에만 keep-all 이 걸려 있었고 표·목록에는 없었다.

   overflow-wrap 을 같이 주는 이유 — keep-all 만 주면 긴 영문 주소처럼
   띄어쓰기가 없는 것이 상자를 뚫고 나간다. 그때만 아무 데서나 끊는다. */
body,
body * {
  word-break: keep-all;
  overflow-wrap: anywhere;
}