/* ============================================================
   cancer — 공개 사이트 (몽골어/키릴) 디자인 보강 CSS
   톤앤매너: 의료·신뢰·차분 (블루/그린), 가독성 최우선
   Tailwind CDN 위에 얹는 세부 보정 + 키릴 폰트 가독성
   ============================================================ */

:root {
  /* Digital Sanctuary 계열 — 의료 신뢰 블루/그린 */
  --c-primary:        #0F6FB4;   /* 차분한 메디컬 블루 */
  --c-primary-deep:   #0A4E80;
  --c-primary-soft:   #E3F0FA;
  --c-teal:           #0E9488;   /* 보조 그린(틸) — 회복/안정 */
  --c-teal-soft:      #E2F4F1;
  --c-surface:        #F7FAFC;   /* 본문 배경 */
  --c-surface-card:   #FFFFFF;
  --c-ink:            #1F2A37;   /* 본문 텍스트 (순수 블랙 금지) */
  --c-ink-soft:       #51606F;   /* 캡션/라벨 */
}

/* 키릴(몽골어) 가독성 — 본문은 Noto Sans, 폴백 풍부하게 */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans', 'Segoe UI', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  background: var(--c-surface);
  color: var(--c-ink);
}

/* 기사 본문 — 큰 폰트 + 넉넉한 행간 (가독성 최우선) */
.article-body {
  font-size: 1.125rem;      /* 18px */
  line-height: 1.85;
  color: var(--c-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.article-body p { margin: 0 0 1.25em; }
.article-body h2 {
  font-size: 1.5rem; font-weight: 700; line-height: 1.4;
  margin: 1.75em 0 0.6em; color: var(--c-primary-deep);
}
.article-body h3 {
  font-size: 1.25rem; font-weight: 700; line-height: 1.45;
  margin: 1.5em 0 0.5em; color: var(--c-ink);
}
.article-body ul, .article-body ol { margin: 0 0 1.25em 1.25em; }
.article-body li { margin-bottom: 0.5em; line-height: 1.8; }
.article-body blockquote {
  margin: 1.5em 0; padding: 1em 1.25em;
  background: var(--c-primary-soft);
  border-radius: 0.75rem;
  color: var(--c-primary-deep);
}
.article-body strong { font-weight: 700; color: var(--c-primary-deep); }

/* 라인 클램프(카드 요약 말줄임) */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* 부드러운 카드 리프트 */
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15,79,128,.12); }

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* 스크롤바 살짝 정돈 */
::selection { background: var(--c-primary-soft); color: var(--c-primary-deep); }

/* ============================================================
   홈 — 전문 커뮤니티 디자인 보강 (히어로/카드)
   ============================================================ */
.hero-bg {
  background:
    radial-gradient(1200px 400px at 50% -120px, rgba(15,111,180,.10), transparent 70%),
    linear-gradient(165deg, var(--c-primary-soft) 0%, #ffffff 46%, var(--c-teal-soft) 100%);
}
.hero-orb { position:absolute; border-radius:9999px; filter: blur(64px); opacity:.55; z-index:0; pointer-events:none; }
.hero-orb-a { width:340px; height:340px; background:rgba(15,111,180,.20); top:-90px; left:-70px; }
.hero-orb-b { width:380px; height:380px; background:rgba(14,148,136,.18); bottom:-140px; right:-90px; }
.hero-gradient-text {
  background:linear-gradient(120deg, var(--c-primary-deep) 0%, var(--c-primary) 45%, var(--c-teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}