/* ============================================================
   archive.css — 자료실(archive.html) 전용
   ------------------------------------------------------------
   이 페이지는 「쌓인 것을 찾게 하는」 곳이다. 카드로 크게 벌리면
   한 화면에 서너 개밖에 안 들어와 목록의 구실을 못 한다. 그래서
   본문 목록은 **가로 행(.arc-row)** 으로 짜서 스캔이 되게 했다.
   색·간격·모서리는 전부 styles.css 의 토큰을 쓴다(하드코딩 금지).
   ============================================================ */

/* ---------- 섹션 도입부 ---------- */
.arc-sec-lead {
  max-width: 760px;
  font: 400 16px/1.85 'Pretendard', sans-serif;
  color: var(--body);
  margin: 0 0 40px;
}

.arc-sec-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ---------- 실무 가이드 카드 (a 로 감싼 .feature) ---------- */
.arc-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.arc-card h4 { margin: 18px 0 10px; }

.arc-more {
  display: inline-block;
  margin-top: 16px;
  font: 600 13px 'Pretendard', sans-serif;
  color: var(--terra);
  letter-spacing: -0.01em;
}

.arc-card:hover .arc-more { text-decoration: underline; }

/* ---------- 목록 행 ---------- */
.arc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.arc-row {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.18s ease, padding-left 0.18s ease;
}

.arc-row:hover {
  background: var(--section-soft);
  padding-left: 16px;
}

.arc-row-date {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.arc-row-body { display: block; min-width: 0; }

.arc-row-no {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 12px 'Pretendard', sans-serif;
  color: var(--muted);
  vertical-align: 2px;
}

.arc-row-flag {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 11px 'Inter', sans-serif;
  letter-spacing: 0.06em;
  vertical-align: 2px;
}

.arc-row-title {
  font: 600 18px/1.5 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.arc-row-desc {
  display: block;
  margin-top: 8px;
  font: 400 14px/1.75 'Pretendard', sans-serif;
  color: var(--body);
}

.arc-row-go {
  font: 600 13px 'Pretendard', sans-serif;
  color: var(--terra);
  white-space: nowrap;
}

.arc-row:hover .arc-row-go { text-decoration: underline; }

/* ---------- 레퍼런스 안내 띠 ---------- */
.arc-ref h3 {
  margin: 10px 0 12px;
  font: 700 24px/1.4 'Pretendard', sans-serif;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.arc-ref p {
  max-width: 620px;
  font: 400 15px/1.85 'Pretendard', sans-serif;
  color: var(--body);
  margin: 0;
}

/* ---------- 모바일 ----------
   360px 에서 3열 그리드를 유지하면 제목이 두 글자씩 끊긴다.
   날짜를 제목 위로 올리고 「읽기 →」는 숨긴다(행 전체가 링크다). */
@media (max-width: 720px) {
  .arc-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 4px;
  }
  .arc-row:hover { padding-left: 4px; }
  .arc-row-go { display: none; }
  .arc-row-title { font-size: 17px; }
}