/* 이음보 블로그 전용 CSS. styles.css 의 토큰·버튼·머리말·바닥글을 그대로 쓰고,
   여기에는 블로그 목록·글 쪽에만 쓰는 규칙만 둔다. styles.css 는 고치지 않는다. */

/* ---------- 공통 ---------- */
.card-cat {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: none;
}
.cat-jokbo .card-cat {
  color: var(--blue);
}
.card-meta {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- 목록 쪽 ---------- */
.filter-anchor {
  display: block;
  position: relative;
  top: -96px;
}
.blog-list-head {
  padding-top: 24px;
  max-width: 44em;
}
.blog-list-head h1 {
  font-size: 32px;
}
@media (min-width: 880px) {
  .blog-list-head h1 {
    font-size: 44px;
  }
}

.blog-cat-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  margin: 24px 0 28px;
  padding-bottom: 2px;
}
.blog-cat-nav {
  display: none;
}
.cat-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  font-weight: 500;
}
.blog-cat-nav .cat-link {
  display: flex;
  min-height: 48px;
  margin-bottom: 2px;
}
.cat-link[href="#"] {
  background: var(--surface-2);
  font-weight: 700;
}

.blog-list-layout {
  display: block;
}
.blog-sidebar {
  display: none;
}
@media (min-width: 960px) {
  .blog-cat-tabs {
    display: none;
  }
  .blog-list-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .blog-sidebar {
    display: block;
    position: sticky;
    top: 96px;
  }
  .blog-cat-nav {
    display: block;
  }
}

.featured {
  display: block;
  color: inherit;
  text-decoration: none;
  margin-bottom: 40px;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.featured-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.featured-thumb svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.featured-body {
  padding: 24px;
}
.featured-body h2 {
  margin: 4px 0 10px;
}
.featured-desc {
  color: var(--ink-2);
  margin-bottom: 10px;
}
@media (min-width: 720px) {
  .featured-link {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .featured-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .featured-body h2 {
    font-size: 30px;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 620px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.card-thumb svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.card-body {
  padding: 16px 18px 20px;
}
.card-title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 분류 필터: JS 없이 :target 으로 (앵커 #filter-moonjung / #filter-jokbo) */
#filter-moonjung:target ~ .list-page .featured:not(.cat-moonjung),
#filter-jokbo:target ~ .list-page .featured:not(.cat-jokbo) {
  display: none;
}
#filter-moonjung:target ~ .list-page .card:not(.cat-moonjung),
#filter-jokbo:target ~ .list-page .card:not(.cat-jokbo) {
  display: none;
}
/* 대표 글 칸이 이미 보여 주는 글이므로, 분류로 걸렀을 때는 목록 속 사본을 또 보여 주지 않는다. */
#filter-moonjung:target ~ .list-page .card.is-featured-dup.cat-moonjung,
#filter-jokbo:target ~ .list-page .card.is-featured-dup.cat-jokbo {
  display: none;
}
#filter-moonjung:target ~ .list-page .cat-link[href="#filter-moonjung"],
#filter-jokbo:target ~ .list-page .cat-link[href="#filter-jokbo"] {
  background: var(--surface-2);
  font-weight: 700;
}
#filter-moonjung:target ~ .list-page .cat-link[href="#"],
#filter-jokbo:target ~ .list-page .cat-link[href="#"] {
  background: none;
  font-weight: 500;
}

/* ---------- 글 쪽 ---------- */
.post-page {
  max-width: 1120px;
}
.breadcrumb {
  padding-top: 20px;
  font-size: 14px;
  color: var(--ink-2);
}
.breadcrumb a {
  color: var(--ink-2);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--primary);
}
.breadcrumb .sep {
  margin: 0 8px;
}
.breadcrumb .current {
  color: var(--ink);
}

.post-head {
  max-width: 760px;
  margin: 16px 0 28px;
}
.post-cat {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}
.post-head h1 {
  font-size: 32px;
  margin-bottom: 14px;
}
@media (min-width: 880px) {
  .post-head h1 {
    font-size: 46px;
  }
}
.post-dek {
  font-size: 19px;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.post-meta {
  font-size: 15px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.post-meta .dot {
  margin: 0 8px;
}

.post-hero {
  margin: 0 0 40px;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--surface-2);
}
.post-hero svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.post-layout {
  display: block;
  margin-bottom: 48px;
}
.post-toc-col {
  margin-bottom: 24px;
}

/* 모바일: <details> 접힘판. 데스크톱: 항상 보이는 고정판(post-toc-desktop).
   둘을 같은 <details> 안에서 CSS로만 펼치려 하면 크롬이 닫힌 <details> 내부를
   content-visibility: hidden 으로도 숨기는 내부 구현(::details-content)과 부딪히므로,
   아예 마크업 두 벌을 두고 화면 너비에 따라 보이는 쪽만 바꾼다. */
.post-toc-desktop {
  display: none;
}
.post-toc-mobile summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-control);
}
.post-toc-mobile nav {
  padding: 16px 4px 4px;
}
.post-toc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.post-toc-desktop ol,
.post-toc-mobile ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-toc-desktop li,
.post-toc-mobile li {
  border-top: 1px solid var(--line);
}
.post-toc-desktop li:first-child,
.post-toc-mobile li:first-child {
  border-top: none;
}
.post-toc-desktop a,
.post-toc-mobile a {
  display: block;
  padding: 10px 4px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
}
.post-toc-desktop a:hover,
.post-toc-mobile a:hover {
  color: var(--primary);
}

@media (min-width: 1040px) {
  .post-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 680px);
    gap: 56px;
    justify-content: center;
  }
  .post-toc-col {
    grid-column: 1;
    position: sticky;
    top: 96px;
    align-self: start;
    margin-bottom: 0;
  }
  .post-toc-desktop {
    display: block;
  }
  .post-toc-mobile {
    display: none;
  }
  /* 소제목이 없어 차례 칸(.post-toc-col) 자체가 없는 글은 grid의 유일한 자식이 되어
     기본 배치로 1번째(220px) 칸에 들어가 버리므로, 본문은 항상 2번째(680px) 칸을 쓰게 못박는다. */
  .post-body {
    grid-column: 2;
  }
}
@media (max-width: 1039px) {
  .post-body {
    max-width: 680px;
    margin: 0 auto;
  }
}

.post-body {
  font-size: 18px;
  line-height: 1.75;
}
@media (min-width: 880px) {
  .post-body {
    font-size: 19px;
  }
}
.post-body h2 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 14px;
}
.post-body h3 {
  font-size: 19px;
  margin-top: 28px;
  margin-bottom: 10px;
}
.post-body p {
  max-width: none;
  margin-bottom: 20px;
}
.post-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.post-body li {
  margin-bottom: 8px;
}
.post-body blockquote {
  margin: 0 0 20px;
  padding: 4px 20px;
  border-left: 3px solid var(--primary);
  color: var(--ink-2);
  font-family: var(--font-display-semibold);
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 16px;
}
.post-body th,
.post-body td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}
.post-body th {
  background: var(--surface-2);
}

.post-refs {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.post-refs-label {
  margin: 0 0 8px;
  font-weight: 700;
}
.post-refs-list {
  margin: 0;
  padding-left: 18px;
}
.post-refs-list li {
  margin-bottom: 6px;
  line-height: 1.6;
  word-break: break-all;
}
.post-refs a {
  color: var(--ink-2);
}

.post-cta-line {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--surface-2);
  border-radius: var(--radius-control);
  font-size: 17px;
}
.post-cta-line a {
  font-weight: 700;
  color: var(--primary);
}

.post-next {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.post-next-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.post-next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 620px) {
  .post-next-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.post-next-item {
  display: flex;
  gap: 16px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 12px;
  background: var(--surface);
}
.post-next-thumb {
  flex: 0 0 110px;
  width: 110px;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.post-next-thumb svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.post-next-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}