/* types.css — 쪽 유형 5 틀(공식 모음·약호기호단위표·암기법·계산기·개념 한 쪽) — ORDER-D8 · SYS-03 디자인 몫 (2026-10-14 디자인팀)
 * 정본: docs/design/rounds/types-20261014/types.css (ecbt-next) · 설치본: ecbt-open/site-static/styles/types.css (같은 내용)
 * 링크 순서: tokens.css → layers.css → components.css → site-header-cert.css → 이 파일(마지막).
 *
 * layers.css·components.css 가 이미 주는 부품(여기서 다시 정의하지 않는다 — 재정의는 무게 싸움을 부른다):
 *   crumbs·page-title/lead/meta·section-title·formula/formula-name/formula-latex/formula-vars·mnemonic/*·
 *   data-table·faq-list/faq-q/faq-a·solve-inline(본문 첫 단 아래 작은 단추)·solve-btn+cta(글 끝 주 단추)·
 *   site-foot/foot-nav/ai-notice·calc-widget 부품 일체(calc-field/label/control/input/unit/guide/submit/result/noscript).
 * 이 파일은 다섯 유형에만 필요한 자리만 더한다. 색·글자 크기·모서리·그림자는 tokens.css 변수만 쓴다(새 hex·새 px 정의 금지 — D-04).
 * 머리띠는 site-header-cert.css(DD-36 정식 조각)가 그린다 — 이 파일은 머리띠를 건드리지 않는다.
 */

/* ── 본문 이음통 — 머리띠 아래 공통 폭(72rem 중앙 · 768px 부터 좌우 24px) ── */
.tp-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 16px 16px 40px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .tp-main { padding: 24px 24px 48px; }
}

/* ── 유형 꼬리표 — 제목 위 한 알(공식 모음/기호·단위표/암기법/계산기/개념) ──
 * layers.css .mnemonic-technique 와 같은 토큰 구성(알약 모양) — 새 색 없이 재구성. */
.tp-chip {
  display: inline-block;
  margin: 0 0 8px;
  font-size: var(--text-xs);
  color: var(--primary-strong);
  border: 1px solid var(--ring);
  border-radius: var(--radius-full);
  padding: 1px 10px;
}

/* ── 공식 카드 글자 그림 자리({{FORMULA_CARD_SVG}} 인라인 SVG — 네이버 썸네일용 · 문항 그림 아님) ── */
.tp-fig {
  margin: 16px 0;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tp-fig svg { display: block; width: 100%; height: auto; }
.tp-fig figcaption {
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* ── 개념 한 쪽(concept) — 뜻·예제 두 박스 ──
 * 뜻박스는 .mnemonic(암기법)과 같은 왼쪽 줄 구성이지만 줄 색을 보조로 바꿔 암기법과 구분한다. */
.tp-meaning {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--card);
  border-left: 3px solid var(--secondary);
}
.tp-example {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--muted);
  border-radius: var(--radius);
}
.tp-example-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--foreground);
}
.tp-example p { margin: 4px 0; }

/* ── 계산기(calc) — 인라인 결과줄(외부 JS 0, inline <script> 만 움직인다) ──
 * 위젯 꼴은 layers.css .calc-widget 계열을 그대로 쓴다. 결과 아래 걸음걸이만 더한다. */
.tp-calc-steps {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
/* ── S6b(2026-10-31) 제목 크기·문단 간격 — 가이드 족(.guide-hero/.guide-body)과 값 통일(주인님 지시 7)
   폰(<768px) h1: 가이드는 --text-xl(23)·줄 1.75rem 인데 개념 족은 --text-2xl(30) 그대로라 긴 이름이 접혔다.
   문단 간격도 가이드(0.75rem·아래 0)에 맞춘다. 본문 16px·줄간격 28px·산문 폭(--reading-max, S6)은 이미 양쪽 같다. */
@media (max-width: 767px) {
  .page-title { font-size: var(--text-xl); line-height: 1.75rem; }
}
.tp-main p { margin-top: 0.75rem; margin-bottom: 0; }