/* ==========================================================================
   page-topic.css — 기업진단 하위 주제 상세 페이지 공통.
   ========================================================================== */

.topic-hero {
  padding-block: 64px var(--section-y-tight);
}

.topic-hero__inner {
  max-width: 780px;
}

.topic-hero__title {
  margin: var(--s-md) 0 var(--s-xl);
  font-size: var(--fs-display-xxl);
  line-height: 1.1;
  letter-spacing: var(--ls-display-xxl);
}

.topic-hero__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--c-ink-secondary);
  margin-bottom: var(--s-xxl);
}

/* ---------- 본문 블록 ---------- */
.topic-body {
  width: min(760px, 100%);
}

.topic-body h2 {
  font-size: var(--fs-display-lg);
  line-height: 1.35;
  letter-spacing: var(--ls-display-lg);
  margin-bottom: var(--s-xl);
}

.topic-body h3 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
  margin-bottom: var(--s-md);
}

.topic-body p {
  font-size: var(--fs-body-lg);
  line-height: 1.9;
  color: var(--c-ink-secondary);
}

.topic-body p + p {
  margin-top: var(--s-xl);
}

.topic-body b {
  color: var(--c-ink);
}

/* 번호 없는 목록 */
.topic-list {
  margin-top: var(--s-xl);
  display: grid;
  gap: var(--s-md);
}

.topic-list li {
  position: relative;
  padding-left: var(--s-xl);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: var(--c-ink-secondary);
}

.topic-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}

/* 강조 박스 */
.topic-callout {
  margin-top: var(--s-xxl);
  padding: var(--card-pad);
  background: var(--c-canvas-cream);
  border-radius: var(--r-lg);
}

.topic-callout h3 {
  font-size: var(--fs-heading-md);
  letter-spacing: var(--ls-heading-md);
  margin-bottom: var(--s-md);
}

.topic-callout p {
  font-size: var(--fs-body-md);
  line-height: 1.8;
}

/* 순서가 있는 단계 */
.topic-steps {
  display: grid;
  gap: var(--s-lg);
  counter-reset: topicstep;
}

.topic-steps > li {
  counter-increment: topicstep;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-xl);
  padding: var(--s-xl);
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.topic-steps > li:hover {
  border-color: var(--c-primary);
  box-shadow: var(--elev-1);
}

.topic-steps > li::before {
  content: counter(topicstep, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--c-primary-subdued);
  color: var(--c-primary-deep);
  font-size: var(--fs-caption);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.topic-steps h3 {
  margin-bottom: var(--s-sm);
  font-size: var(--fs-heading-sm);
  letter-spacing: 0;
}

.topic-steps p {
  font-size: var(--fs-body-md);
  line-height: 1.75;
  color: var(--c-ink-mute);
}

.topic-steps small {
  display: block;
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-hairline);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-ink-mute);
}

/* 비교 표 */
.topic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-md);
}

.topic-table th,
.topic-table td {
  padding: var(--s-lg);
  border-bottom: 1px solid var(--c-hairline);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.topic-table thead th {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro-cap);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  border-bottom-color: var(--c-ink-mute);
}

.topic-table td:first-child {
  color: var(--c-ink);
  white-space: nowrap;
}

.topic-table td:not(:first-child) {
  color: var(--c-ink-mute);
}

.topic-table-wrap {
  overflow-x: auto;
}

/* ---------- 관련 주제 카드 ---------- */
.topic-link {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.topic-link:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.topic-link__name {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
}

.topic-link p {
  flex: 1 1 auto;
}

.topic-link__more {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caption);
  color: var(--c-primary);
}

@media (max-width: 767px) {
  .topic-steps > li {
    grid-template-columns: 1fr;
    gap: var(--s-md);
  }
}