/*!
 * dr-hc-pages.css — Category · Section · Article 페이지 공통 정돈 (A안)
 *
 * 왜 따로 뒀나
 *   category_page.hbs 와 section_page.hbs 가 같은 CSS 를 각자 복붙해 두고 값이
 *   조금씩 어긋나 있었다(본문 폭 1000 vs 1150, 카드가 있는 쪽과 없는 쪽).
 *   같은 아티클 목록이 페이지마다 다르게 보이던 원인이다. 한 군데로 모은다.
 *
 * 왜 style.css 가 아닌가
 *   .article-list · .page-header 는 community 페이지와 home_page 도 쓴다.
 *   거기까지 바뀌면 안 되므로 선택자를 이 세 페이지 안으로 좁혀 둔다.
 *
 * 쓰는 곳: document_head.hbs 에서 {{asset 'dr-hc-pages.css'}} 로 읽는다.
 */

/* ── 토큰 ──────────────────────────────────────────────────────────── */
:root {
  --hc-content-width: 1280px;

  --hc-space-1: 8px;
  --hc-space-2: 16px;
  --hc-space-3: 24px;
  --hc-space-4: 32px;

  --hc-radius: 12px;
  --hc-radius-sm: 8px;

  --hc-border: #e5e7eb;
  --hc-surface: #ffffff;
  --hc-surface-hover: #f8fafc;
  --hc-surface-head: #f5f5f7;

  --hc-text: #111827;
  --hc-text-muted: #6b7280;
  --hc-accent: #2563eb;

  --hc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}

/* ── 검색 바 (Category · Section · Article 공용) ────────────────────── */
.search-container-wrapper {
  background-color: var(--hc-surface-head);
  padding: 10px 0;
}

.search-container-wrapper .search-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--hc-space-1);
}

.search-container-wrapper .search-container form,
.search-container-wrapper .search-container input {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

.search-container-wrapper .search-icon {
  margin-right: var(--hc-space-1);
  flex-shrink: 0;
  pointer-events: auto;
  color: #4b5563;
}

.search-container-wrapper .search-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-container-wrapper .search-icon-link:hover .search-icon {
  color: var(--hc-accent);
}

/* ── 본문 폭 ───────────────────────────────────────────────────────── */
/* breadcrumb 와 본문이 같은 선에서 시작하도록 한 값으로 묶는다. */
.sub-nav,
.category-page,
.section-container {
  max-width: var(--hc-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--hc-space-2);
  padding-right: var(--hc-space-2);
  box-sizing: border-box;
}

.sub-nav {
  margin-top: 12px;
  margin-bottom: var(--hc-space-1);
  text-align: left;
}

.category-page { margin-top: var(--hc-space-3); margin-bottom: var(--hc-space-4); }
.section-container { margin-top: var(--hc-space-4); }

/* Section page 를 Category page 와 같은 자리에서 시작시킨다.
   style.css(스톡 Copenhagen)에 이런 규칙이 있다.
       .section-container { display: flex; justify-content: flex-end; }
       @media (min-width:1024px) { .section-content { flex: 0 0 80%; } }
   본문을 80% 폭으로 줄여 오른쪽에 붙이는 것이라, 왼쪽에 20%가 빈다.
   Category page 는 .category-content 에 display:block !important 를 걸어 이미
   무력화해 두었는데 Section page 에는 그게 없어서 두 페이지의 시작선이 달랐다.
   미디어쿼리 안 규칙보다 선택자를 한 단계 좁혀 순서에 기대지 않고 덮는다. */
.section-wrapper .section-container {
  display: block;
}

.section-wrapper .section-content {
  flex: initial;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

/* ── 아티클 행 (두 페이지 공통) ────────────────────────────────────── */
.category-page .article-list,
.section-content .article-list,
.section-content .section-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-page .article-list-item,
.section-content .article-list-item {
  display: flex;
  align-items: center;
  gap: var(--hc-space-1);
  padding: 14px var(--hc-space-2);
  background-color: var(--hc-surface);
  transition: background-color .12s ease;
}

.category-page .article-list-item:hover,
.section-content .article-list-item:hover {
  background-color: var(--hc-surface-hover);
}

/* 아티클 사이 구분선. 인접 형제에만 넣어 카드 테두리와 겹치지 않게 한다. */
.category-page .article-list-item + .article-list-item,
.section-content .article-list-item + .article-list-item {
  border-top: 1px solid var(--hc-border);
}

.category-page .article-list-link,
.section-content .article-list-link {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--hc-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.category-page .article-list-link:link,
.category-page .article-list-link:visited,
.section-content .article-list-link:link,
.section-content .article-list-link:visited {
  color: var(--hc-text);
}

.category-page .article-list-link:hover,
.category-page .article-list-link:focus-visible,
.section-content .article-list-link:hover,
.section-content .article-list-link:focus-visible {
  color: var(--hc-accent);
  text-decoration: underline;
}

/* ── 카드 ──────────────────────────────────────────────────────────── */
/* Category 는 섹션마다 카드, Section 은 아티클 목록 전체가 카드 하나.
   둘이 같은 테두리·모서리·그림자를 쓰게 해서 페이지를 옮겨도 같은 화면으로 보이게 한다. */
.category-page .section-tree .section,
.section-content .article-list,
.section-content .section-list {
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  background-color: var(--hc-surface);
  box-shadow: var(--hc-shadow);
  overflow: hidden;
}

.category-page .section-tree .section {
  margin: 0 0 var(--hc-space-2);
}

.section-content .section-list {
  margin-bottom: var(--hc-space-3);
}

/* 카드 머리 */
.category-page .section-tree-title {
  margin: 0;
  padding: 12px var(--hc-space-2);
  background-color: var(--hc-surface-head);
  border-bottom: 1px solid var(--hc-border);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.category-page .section-tree-title a {
  color: var(--hc-text);
  text-decoration: none;
}

.category-page .section-tree-title a:hover {
  color: var(--hc-accent);
  text-decoration: underline;
}

/* 카드 바닥의 'Show all' */
.category-page .see-all-articles {
  display: inline-block;
  margin: 12px var(--hc-space-2) 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hc-accent);
  text-decoration: none;
}

.category-page .see-all-articles:link,
.category-page .see-all-articles:visited {
  color: var(--hc-accent);
  text-decoration: none;
}

.category-page .see-all-articles:hover,
.category-page .see-all-articles:focus-visible {
  text-decoration: underline;
}

/* ── 하위 섹션 목록 (Section page) ─────────────────────────────────── */
.section-content .section-list-item + .section-list-item {
  border-top: 1px solid var(--hc-border);
}

.section-content .section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-space-1);
  padding: 14px var(--hc-space-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--hc-text);
  text-decoration: none;
  transition: background-color .12s ease;
}

.section-content .section-list-item a:hover {
  background-color: var(--hc-surface-hover);
  color: var(--hc-accent);
}

/* ── 페이지 머리 ───────────────────────────────────────────────────── */
.category-page .page-header--category-top {
  margin: var(--hc-space-3) 0 var(--hc-space-2);
  text-align: center;
}

.category-page .page-header--category-top h1 {
  margin: 0 0 var(--hc-space-1);
  font-size: 30px;
  line-height: 1.3;
}

.category-page .page-header-description,
.section-content .page-header-description {
  color: var(--hc-text-muted);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.section-content .page-header {
  margin: 0 0 var(--hc-space-3);
  padding: 0;
}

.section-content .page-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
}

.section-content .page-header-description {
  margin: var(--hc-space-1) 0 0;
}

/* ── 아티클 우측 메타 (Section page) ──────────────────────────────── */
.section-content .article-meta-right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-1);
  font-size: 14px;
  color: var(--hc-text-muted);
  white-space: nowrap;
}

/* ── 좁은 화면 ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .category-page .page-header--category-top h1 { font-size: 24px; }
  .section-content .page-header h1 { font-size: 22px; }

  .category-page .article-list-item,
  .section-content .article-list-item,
  .section-content .section-list-item a {
    padding: 12px var(--hc-space-2);
  }
}