/* =========================================
   TYPOGRAPHY.CSS — 제목 / 본문 / 인용구 텍스트 스타일
   ========================================= */

/* ── 섹션 제목 구조 ──────────────────────── */
.section-head {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.section-head--left {
  text-align: left;
}

/* 소제목 (영문 캡션) */
.section-kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}

/* 메인 제목 */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: 1.3;
  margin-bottom: var(--sp-4);
  word-break: keep-all;
}

/* 부제목 */
.section-subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.85;
  max-width: 600px;
  margin: 0 auto;
  word-break: keep-all;
}

.section-head--left .section-subtitle {
  margin-left: 0;
}

/* 제목 아래 구분선 */
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  margin: var(--sp-4) auto 0;
  border-radius: 2px;
}

.section-head--left .section-title::after {
  margin-left: 0;
}

/* ── 페이지 히어로 제목 ──────────────────── */
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  word-break: keep-all;
}

.page-desc {
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--sp-3);
  line-height: var(--lh-loose);
  word-break: keep-all;
}

/* ── 본문 텍스트 ─────────────────────────── */
.prose {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-text);
  word-break: keep-all;
}

.prose p + p {
  margin-top: var(--sp-4);
}

.prose strong {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.prose em {
  font-style: normal;
  color: var(--color-accent);
  font-weight: var(--fw-medium);
}

/* ── 인용구 ──────────────────────────────── */
.blockquote {
  position: relative;
  padding: var(--sp-6) var(--sp-8);
  background: var(--color-bg-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--sp-8) 0;
}

.blockquote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  font-family: var(--font-serif);
  color: var(--color-accent);
  opacity: 0.3;
  line-height: 1;
}

.blockquote__text {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: var(--lh-loose);
  word-break: keep-all;
}

.blockquote__cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── 하이라이트 텍스트 ───────────────────── */
.text-highlight {
  background: linear-gradient(transparent 60%, rgba(201, 168, 76, 0.3) 60%);
  padding: 0 2px;
}

/* ── 숫자 강조 (분양가, 평수 등) ─────────── */
.num-display {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
}

.num-display__unit {
  font-size: 0.4em;
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  margin-left: 4px;
  vertical-align: baseline;
}

/* ── 말줄임 유틸리티 ─────────────────────── */
.truncate-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 반응형 ──────────────────────────────── */
@media screen and (max-width: 768px) {
  .section-head {
    margin-bottom: var(--sp-8);
  }
  .section-subtitle {
    max-width: 100%;
  }
  .blockquote {
    padding: var(--sp-4) var(--sp-5);
  }
  .blockquote__text {
    font-size: var(--fs-base);
  }
}

@media screen and (max-width: 480px) {
  .section-head {
    margin-bottom: var(--sp-6);
  }
  .section-title {
    font-size: clamp(1.35rem, 5vw, 1.6rem);
  }
}