/* ==========================================================================
   page-column.css — 건설칼럼 목록 + 상세 공용.
   ========================================================================== */

/* ---------- 목록 : 카테고리 칩 ---------- */
.column-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-bottom: var(--s-xxl);
}

.column-chip {
  padding: var(--s-sm) var(--s-lg);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-pill);
  background: var(--c-canvas);
  color: var(--c-ink-mute);
  font-size: var(--fs-button-sm);
  line-height: var(--lh-button);
  min-height: 34px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.column-chip:hover {
  color: var(--c-primary-deep);
  border-color: var(--c-primary-subdued);
}

.column-chip[aria-pressed='true'] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

/* ---------- 목록 : 카드 ---------- */
.column-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.column-card .pill {
  align-self: flex-start;
}

.column-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}

.column-card__title {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
}

.column-card p {
  flex: 1 1 auto;
  color: var(--c-ink-mute);
  font-size: var(--fs-body-md);
  line-height: 1.7;
}

.column-card__meta {
  color: var(--c-ink-mute);
}

.column-empty {
  padding: var(--s-huge) 0;
  text-align: center;
  color: var(--c-ink-mute);
}


/* ==========================================================================
   상세 페이지
   본문은 한 단으로 흐른다. 사이드 목차를 두면 시선이 좌우로 갈라져
   읽기 흐름이 끊기고, 글이 짧을 때 좌측 레일만 비어 보인다.
   ========================================================================== */

/* ---------- 머리 ---------- */
.article-hero {
  padding-block: 88px var(--section-y-tight);
  text-align: center;
}

.article-hero__title {
  margin: var(--s-lg) auto;
  max-width: 24ch;
  font-size: var(--fs-display-xl);
  line-height: 1.28; /* 한글은 라틴보다 행간이 넉넉해야 읽힌다 */
  letter-spacing: var(--ls-display-xl);
}

.article-hero__meta {
  color: var(--c-ink-mute);
}

/* ---------- 본문 ---------- */
.article-wrap {
  /* 한글 본문 기준 한 줄 45자 안팎이 되도록 폭을 잡았다.
     이보다 넓히면 다음 줄 첫 글자를 찾는 눈의 이동이 길어진다. */
  width: min(680px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
  padding-bottom: var(--section-y);
}

.article-sec + .article-sec {
  margin-top: 56px;
}

.article-sec h2 {
  font-size: var(--fs-display-md);
  line-height: 1.35;
  letter-spacing: var(--ls-display-md);
  margin-bottom: var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--c-hairline);
  scroll-margin-top: 96px;
}

.article-sec:first-child h2 {
  padding-top: 0;
  border-top: 0;
}

.article-sec p {
  font-size: var(--fs-body-lg);
  line-height: 1.9;
  color: var(--c-ink-secondary);
}

.article-sec p + p {
  margin-top: var(--s-xl);
}

.article-sec b {
  color: var(--c-ink);
}

/* 본문 목록 */
.article-sec ul {
  margin-top: var(--s-xl);
  display: grid;
  gap: var(--s-md);
  padding: var(--s-xl) var(--s-xl) var(--s-xl) 0;
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}

.article-sec ul li {
  position: relative;
  padding-left: var(--s-xl);
  font-size: var(--fs-body-md);
  line-height: 1.8;
  color: var(--c-ink-secondary);
}

.article-sec ul li::before {
  content: '';
  position: absolute;
  left: var(--s-xs);
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}

/* 본문 안 강조 박스 */
.art-note {
  margin-top: var(--s-xl);
  padding: var(--s-xl);
  background: var(--c-canvas-cream);
  border-radius: var(--r-md);
  font-size: var(--fs-body-md);
  line-height: 1.8;
  color: var(--c-ink-secondary);
}

.art-note b {
  color: var(--c-lemon);
}

/* ---------- 핵심 요약 (본문 하단) ---------- */
.article-recap {
  margin-top: var(--section-y-tight);
  padding: var(--card-pad);
  background: var(--c-canvas-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
}

.article-recap__title {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  letter-spacing: 0;
  color: var(--c-ink);
}

.article-recap__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.article-recap__list {
  display: grid;
  gap: var(--s-lg);
}

/* li 를 grid/flex 컨테이너로 만들면 <b> 와 텍스트가 각각 별개 아이템으로
   쪼개져 세로로 무너진다. 아이콘만 absolute 로 빼고 텍스트는 흐르게 둔다. */
.article-recap__list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-body-md);
  line-height: 1.8;
  color: var(--c-ink-mute);
}

.article-recap__check {
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  color: var(--c-primary);
}

.article-recap__list b {
  color: var(--c-ink);
  font-weight: var(--fw-regular);
}

/* ---------- 하단 링크 ---------- */
.article-links h2 {
  font-size: var(--fs-micro-cap);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-micro-cap);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-lg);
}

.article-links ul {
  display: grid;
  gap: var(--s-md);
  padding-bottom: var(--s-xxl);
  border-bottom: 1px solid var(--c-hairline);
}

.article-back {
  margin-top: var(--s-xxl);
}

@media (max-width: 767px) {
  .article-hero {
    padding-block: 64px var(--s-xxl);
  }

  .article-sec p {
    line-height: 1.85;
  }

  .article-sec ul {
    padding-right: 0;
  }
}