/* pages/download.php 전용 스타일 (/community/download, /community/download/{id}).
   두 뷰(상세·목록)가 한 파일을 공유 — 공용 컴포넌트는 css/gpc-theme.css 참고.

   디자인: category.php의 .cat-row와 같은 "등록부/색인" 계열.
   카드 그리드 대신 헤어라인 구분선 + hover 시 골드 좌측 액센트.
   좌측 슬롯에는 순번 대신 파일 형식을 둔다 — 자료실에서 순서는 의미가 없지만
   형식(PDF/HWP/XLSX)은 다운로드 전에 알고 싶은 실제 정보다. */

/* ── 목록 뷰 (/community/download) ───────────────────────────── */
.dl-list-wrap { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px,6vw,64px) clamp(20px,6vw,64px) clamp(64px,9vw,100px); }

.dl-count { font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 11px; letter-spacing: .14em; color: #93a0ba; margin-bottom: 14px; }
.dl-count b { color: var(--navy); font-weight: 600; }

.dl-list { display: flex; flex-direction: column; }

.dl-row { position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 30px 10px 30px 28px; border-bottom: 1px solid var(--border); transition: background .18s; }
.dl-row:first-child { border-top: 1px solid var(--border); }
.dl-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
.dl-row:hover { background: var(--bg-soft); }
.dl-row:hover::before { transform: scaleY(1); }

/* 파일 형식 — 좌측 고정 슬롯 */
.dl-row__ext { flex: none; width: 46px; padding-top: 3px; font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--gold); }

.dl-row__body { flex: 1 1 auto; min-width: 0; }
.dl-row__title { display: block; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.45; color: var(--navy); transition: color .18s; }
.dl-row:hover .dl-row__title { color: var(--blue); }
.dl-row__desc { display: block; font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 9px; max-width: 620px; }

/* 등록일·용량·다운로드 횟수 — 숫자가 세로로 정렬되도록 tabular-nums */
.dl-row__meta { display: flex; flex-wrap: wrap; gap: 3px 18px; margin-top: 12px; font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 11.5px; color: #93a0ba; font-variant-numeric: tabular-nums; }

/* 다운로드 — 제목(상세 보기)과 구분되는 별개 동작이라 우측에 따로 둔다 */
.dl-row__get { flex: none; margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .18s; }
.dl-row__get svg { transition: transform .2s; }
.dl-row__get:hover { color: var(--blue); }
.dl-row__get:hover svg { transform: translateY(2px); }
.dl-row:hover .dl-row__get { color: var(--navy); }
.dl-row:hover .dl-row__get:hover { color: var(--blue); }

.dl-empty { padding: 72px 20px; text-align: center; color: #93a0ba; font-size: 14.5px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── 상세 뷰 (/community/download/{id}) ──────────────────────── */
.dl-wrap { max-width: 820px; margin: 0 auto; padding: clamp(40px,6vw,64px) clamp(20px,6vw,64px) clamp(64px,9vw,100px); }
.dl-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 11.5px; color: #93a0ba; font-variant-numeric: tabular-nums; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.dl-content { font-size: 15.5px; line-height: 1.85; color: #33405c; margin-bottom: 36px; }

/* 첨부 파일 — 카드 대신 위아래 헤어라인으로 구획 */
.dl-file { display: flex; align-items: center; gap: 20px; padding: 24px 4px 24px 22px; position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dl-file::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--gold); }
.dl-file__ext { flex: none; font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.dl-file__info { flex: 1; min-width: 180px; }
.dl-file__name { font-weight: 600; color: var(--navy); font-size: 15px; word-break: break-all; }
.dl-file__sub { font-family: ui-monospace,'SFMono-Regular',Menlo,monospace; font-size: 11.5px; color: #93a0ba; margin-top: 5px; font-variant-numeric: tabular-nums; }

.dl-back { display: inline-block; margin-top: 40px; font-size: 14px; color: var(--blue); font-weight: 600; }

@media (max-width: 620px) {
  .dl-row { gap: 16px; padding: 24px 6px 24px 20px; flex-wrap: wrap; }
  .dl-row__ext { width: 40px; font-size: 11.5px; }
  .dl-row__title { font-size: 17px; }
  .dl-row__get { width: 100%; margin-top: 14px; padding-left: 56px; }
}