/* 설코딩 공통 부품 v2 — DESIGN.md Components 중 모든 결과물이 똑같이 쓰는 것만 모았다(impeccable extract).
   테마(theme*.css) 다음에 불러온다. 크기·자리·줄 목록 같은 배치는 결과물마다 정한다.
   - 형광펜: <em>(문구의 [대괄호]) 또는 .sc-mark. 밝은 판은 글자 아래쪽 띠, 어두운 판은 글자 밑 얇은 선(테마의 --mark-h·--mark-y).
   - 이름표/의미 강조: data-tone="education|development|consulting|value|info|attention". 기존 서비스 대응을 유지하고, 노랑=value·파랑=info·산호=attention을 지원한다(D-052).
   - 펜 긋기: .sc-pen을 붙이면 왼쪽에서 오른쪽으로 그어진다. 늦추거나 줄이려면 animation-delay·animation-duration만 바꾼다.
   - 로고 판 고르기: 두 판을 모두 두고 .sc-logo-light·.sc-logo-dark를 붙이면 테마가 맞는 판만 보인다.
   - 글자 선택 색: 살구 바탕에 검정 글씨(밝은·어두운 판 같음). */
em, .sc-mark {
  --m: var(--c-mark);
  font-style: normal;
  background-image: linear-gradient(var(--m), var(--m));
  background-repeat: no-repeat;
  background-position: 0 var(--mark-y, 90%);
  background-size: 100% var(--mark-h, 0.45em);
  padding: 0 0.08em; margin: 0 -0.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-tone="education"] { --m: var(--c-tone-education); }
[data-tone="development"] { --m: var(--c-tone-development); }
[data-tone="consulting"] { --m: var(--c-tone-consulting); }
/* 직접 단 .sc-mark의 기본 --m보다 구체적으로 역할 색을 적용한다. */
[data-tone="value"], .sc-mark[data-tone="value"] { --m: var(--color-lemon); }
[data-tone="info"], .sc-mark[data-tone="info"] { --m: var(--color-sky); }
[data-tone="attention"], .sc-mark[data-tone="attention"] { --m: var(--color-coral); }
[data-tone] .sc-mark, [data-tone] em { --m: inherit; }

.sc-pen { animation: sc-pen 900ms var(--ease-pen, cubic-bezier(0.16, 1, 0.3, 1)) both; }
@keyframes sc-pen { from { background-size: 0% var(--mark-h, 0.45em); } to { background-size: 100% var(--mark-h, 0.45em); } }

.sc-logo-light { display: var(--c-logo-light, block); }
.sc-logo-dark { display: var(--c-logo-dark, none); }

::selection { background: var(--c-sel-bg); color: var(--c-sel-fg); }

@media (prefers-reduced-motion: reduce) { .sc-pen { animation: none; } }

/* D-050: 교재·긴 문서. 명시적으로 sc-document를 붙인 결과물에만 적용한다. */
.sc-document {
  --sc-doc-chapter: 36px; --sc-doc-section: 26px; --sc-doc-item: 20px;
  --sc-doc-body: 17px; --sc-doc-note: 14px;
  --sc-doc-section-gap: 64px; --sc-doc-block-gap: 24px;
  --sc-doc-heading-gap: 20px; --sc-doc-paragraph-gap: 12px;
}
.sc-document .sc-icon-label { display: flex; align-items: flex-start; gap: 8px; }
.sc-document .sc-icon-label > svg { flex: none; margin-top: .2em; }
.sc-document .concept-text { display: block; min-width: 0; }
.sc-document .sc-term-name { display: block; font-size: var(--sc-doc-item); font-weight: 700; line-height: 1.4; color: var(--c-ink); }
.sc-document .sc-term-note { display: block; margin-top: 4px; font-size: var(--sc-doc-note); font-weight: 400; line-height: 1.6; color: var(--c-muted); }
@media (max-width: 600px) {
  .sc-document {
    --sc-doc-chapter: 28px; --sc-doc-section: 22px; --sc-doc-item: 18px;
    --sc-doc-body: 16px; --sc-doc-section-gap: 48px; --sc-doc-block-gap: 20px;
    --sc-doc-heading-gap: 16px; --sc-doc-paragraph-gap: 8px;
  }
}
@media print {
  .sc-document {
    --sc-doc-chapter: 20pt; --sc-doc-section: 14pt; --sc-doc-item: 11pt;
    --sc-doc-body: 10pt; --sc-doc-note: 8.5pt;
    --sc-doc-section-gap: 24pt; --sc-doc-block-gap: 12pt;
    --sc-doc-heading-gap: 8pt; --sc-doc-paragraph-gap: 6pt;
  }
  .sc-document .sc-icon-label { gap: 6pt; }
}