/*
  꿈 이야기(/글, /글/<slug>). library.css 다음에 링크해요. 값은 모두 tokens.css의 var(--...)만 써요.
  글 목록: 큰 제목 아래 글 줄(제목, 두 줄 요약)과 사전 바로가기, 남색 풀이 권유 카드.
  글 페이지: 작은 "꿈 이야기" 머리, 큰 제목과 한 줄 요약, 날짜, 읽기 쉬운 본문(18px, 줄 간격 넉넉히), 사전 링크 줄, 풀이 권유 카드.
*/
.blog-head {
  margin: var(--space-3) 0 var(--space-6);
  padding: 0 0 var(--space-5);
  border-bottom: var(--hairline) solid var(--color-line);
}

.blog-kicker {
  margin: 0 0 var(--space-2);
}

.blog-kicker a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-accent);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.blog-head h1 {
  line-height: var(--line-heading);
  word-break: keep-all;
}

.blog-dek {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  word-break: keep-all;
}

.blog-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
}

/* 본문: 오래 읽는 글이라 줄 간격을 조금 더 넉넉히 둬요 */
.blog-body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.blog-body p,
.blog-body li {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  line-height: 1.85;
}

.blog-body h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--text-title);
  line-height: var(--line-heading);
}

.blog-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-lead);
}

.blog-body ul,
.blog-body ol {
  margin: 0 0 var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-2) calc(var(--space-5) + var(--space-5));
  border-radius: var(--radius-large);
  background: var(--color-surface);
}

.blog-body li {
  margin-bottom: var(--space-3);
}

.blog-body strong {
  font-weight: var(--weight-bold);
}

.blog-body a {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
  text-underline-offset: 0.2em;
}

/* 글 끝 사전 링크: 사전 첫 화면과 같은 그림 줄 */
.blog-related h2 {
  margin: var(--space-8) 0 var(--space-2);
  font-size: var(--text-title);
}

.blog-cta-sub {
  margin: 0 0 var(--space-5);
  color: var(--color-field-muted);
  line-height: var(--line-body);
  word-break: keep-all;
}

.library-cta .blog-cta-sub + .button {
  margin-top: 0;
}

/* 글 목록 */
.blog-home .library-intro {
  word-break: keep-all;
}

.blog-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--color-line);
}

.blog-list li {
  border-bottom: var(--hairline) solid var(--color-line);
}

.blog-list a {
  position: relative;
  display: block;
  margin: 0 calc(var(--space-3) * -1);
  padding: var(--space-5) var(--space-7) var(--space-5) var(--space-3);
  border-radius: var(--radius);
  color: var(--color-ink);
  text-decoration: none;
}

.blog-list a::after {
  content: "";
  position: absolute;
  right: var(--space-5);
  top: 50%;
  width: var(--space-2);
  height: var(--space-2);
  border-top: var(--border-width) solid var(--color-line-strong);
  border-right: var(--border-width) solid var(--color-line-strong);
  transform: translateY(-50%) rotate(45deg);
}

.blog-list strong {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: var(--text-lead);
  line-height: var(--line-heading);
  word-break: keep-all;
}

.blog-list span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
  word-break: keep-all;
}

.blog-list a:active {
  background: var(--color-surface);
}

.blog-library-link {
  margin: var(--space-6) 0 0;
}

.blog-library-link a {
  display: block;
  min-height: var(--space-8);
  padding: var(--space-4) var(--space-5);
  line-height: var(--line-body);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  word-break: keep-all;
}

.blog-library-link strong {
  color: var(--color-accent);
}

@media (hover: hover) {
  .blog-list a:hover,
  .blog-library-link a:hover {
    background: var(--color-surface);
  }

  .blog-library-link a:hover {
    background: var(--color-veil);
  }
}

@media (min-width: 960px) {
  .blog-home {
    max-width: calc(var(--measure) + var(--space-7) * 2);
  }
}