:root{--safe-bottom:env(safe-area-inset-bottom)}

/* ───────── 기본 타이포 세팅 (읽기 쉬운 행간) ───────── */
:root{
  /* 원하는 느낌으로 값만 바꾸면 전체가 같이 조정됩니다 */
  --lh-base: 1.4;      /* 본문 기본 행간 */
  --lh-head: 1.4;     /* 제목(헤딩) 행간 */
  --lh-tight: 1.2;     /* 촘촘한 줄 간격(줄바꿈용) */
  --mb-paragraph: 0.6em; /* 문단 간 여백 */
}

/* 한국어 단어가 중간에서 끊기지 않게 */
html{
  -webkit-hyphens: none;
  hyphens: none;
}
body, p, h1, h2, h3, h4, h5, h6{
  word-break: keep-all;      /* 단어 중간 줄바꿈 금지 */
  overflow-wrap: anywhere;   /* 너무 길면 공백에서 줄바꿈 */
}

/* 본문 문단 */
body{ line-height: var(--lh-base); }
p{
  line-height: var(--lh-base);
  margin: 0 0 var(--mb-paragraph) 0 !important; /* 문단 간 여백 */
}
p:last-child{ margin-bottom: 0 !important; }

/* 제목(헤딩) */
h1, h2, h3, h4, h5, h6{
  line-height: var(--lh-head);
  margin: 0 0 .6em 0;     /* 제목 아래 여백 */
}

/* 리스트 항목도 본문 수준으로 */
li{
  line-height: var(--lh-base);
  margin-bottom: .3em;   /* 항목 간 살짝 여백 */
}

/* 줄바꿈(Shift+Enter) 간격: 문단보다 촘촘하게 */
br{
  display: block;
  margin-bottom: .55em;
  line-height: var(--lh-tight);
}

/* 캡션/작은 글자(있다면) */
small, .caption{
  line-height: 1.6;
}

/* ───────── 모바일에서 가독성 더 넓게 ───────── */
@media (max-width: 768px){
  :root{
    --lh-base: 1.5;      /* 본문 행간 조금 더 넓게 */
    --lh-head: 1.4;      /* 제목 행간도 여유 있게 */
    --mb-paragraph: 0.5em;
  }
}