/* ============================================================
   텍스트 이모티콘(카오모지) 전용 스타일
   - 이 도구의 디자인 컨셉: "타자기로 친 쪽지"
     카오모지는 괄호·문장부호의 좌우 대칭으로 표정이 읽힌다.
     비례폭 글꼴은 이 균형을 깨므로 셀은 등폭(monospace)으로 그린다.
   - 보드 공통 스타일은 copy-board.css, 토큰은 common.css 재사용
   ============================================================ */

/* ---- 도입부 (다른 도구와 같은 골격) ---- */
.tool-intro {
  padding: var(--space-6) 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.tool-intro h1 {
  margin: 0 0 var(--space-3);
  max-width: 18ch;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.tool-intro .lead { max-width: 56ch; }
.lead {
  color: var(--color-text-sub);
  margin: var(--space-2) 0 var(--space-2);
  max-width: 60ch;
  font-size: 1.02rem;
}
.lead-note {
  color: var(--color-text-sub);
  font-size: .85rem;
  opacity: .85;
  margin: 0 0 var(--space-5);
}

/* 본문·도입부에서 이모티콘을 예시로 보여줄 때 쓰는 인라인 칩 */
.km-inline {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace);
  font-size: .92em;
  background: var(--color-primary-weak);
  color: var(--color-text);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ---- 셀: 카오모지는 좌우 대칭이 생명 → 등폭 글꼴 + 넉넉한 폭 ---- */
/* 대부분의 카오모지가 긴 문자열이라 엔진이 cb-grid-wide(가변폭 알약)로 그린다 */
.cb-grid-wide { gap: var(--space-2); }
.cb-grid-wide .cb-cell {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace);
  font-size: 1.02rem;
  line-height: 1.3;
  padding: var(--space-2) var(--space-3);
  min-height: 42px;
}
/* 짧은 이모티콘만 있는 그룹은 정사각 대신에도 등폭으로 또렷하게 */
.cb-grid .cb-cell {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace);
  font-size: 1.05rem;
}

/* 즐겨찾기 별표가 긴 이모티콘 위에서 겹치지 않도록 살짝 띄움 */
.cb-grid-wide .cb-cell.is-fav::after { top: 1px; right: 3px; }

/* ---- 본문(사용법·FAQ) — 다른 도구와 동일 골격 ---- */
.prose { margin-top: var(--space-6); }
.prose h2 { margin-bottom: var(--space-3); }
.prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.prose p, .prose li { color: var(--color-text); }
.prose em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.prose ol, .prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose .km-inline { font-size: .88em; }
.prose details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.prose summary { cursor: pointer; font-weight: 600; }
.prose details[open] summary { margin-bottom: var(--space-2); }
.prose details p { margin: 0; color: var(--color-text-sub); }