/* Download Center: 자료 검색 · 자료 카드 */
.hero-visual--download .hero-visual__overlay { background:#00000026 }
.download-page { padding-block:96px }
.download-page__inner { width:calc(100% - 192px); max-width:1728px; margin-inline:auto }

/* ---------- 검색 ---------- */
.download-toolbar { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-bottom:48px; border-bottom:1px solid var(--border) }
.download-search { display:flex; flex:0 1 796px; gap:16px; min-width:0 }
.download-search__select { position:relative; flex:0 0 220px }
.download-search__select img { position:absolute; top:20px; right:16px; pointer-events:none }
.download-search select { width:100%; height:64px; padding:0 48px 0 16px; border:1px solid transparent; border-radius:8px; background:var(--surface); font:inherit; line-height:28px; color:var(--color-black); appearance:none; cursor:pointer }
.download-search select:focus { border-color:var(--color-black); outline:none }
.download-search__field { position:relative; flex:1; min-width:0 }
.download-search input { width:100%; height:64px; padding:0 64px 0 16px; border:1px solid transparent; border-radius:8px; background:var(--surface); font:inherit; line-height:28px; color:var(--color-black); appearance:none }
.download-search input::placeholder { color:var(--text-body); opacity:1 }
.download-search input::-webkit-search-cancel-button { appearance:none }
.download-search input:focus { border-color:var(--color-black); outline:none }
.download-search button { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:44px; height:44px }
.download-search button:focus-visible { outline-offset:0 }

/* ---------- 자료 카드: 4열 → 2열 → 1열 ---------- */
.download-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:48px }
.download-card { display:flex; flex-direction:column; gap:24px; min-width:0 }
/* 표지는 검토용 예시: 승인된 PDF 표지로 교체합니다. */
.download-cover { position:relative; aspect-ratio:414/430; padding:32px; overflow:hidden; background:var(--surface) }
.download-cover--steel { background:#c1c5c9 }
.download-cover--dark { background:var(--color-black); color:white }
.download-cover__badges { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px }
.download-card__type,.download-card__meta { padding:4px 10px; font-family:var(--font-body); font-size:13px; font-weight:500; line-height:20px }
.download-card__type { background:var(--color-black); color:white }
.download-card__meta { border:1px solid var(--border); padding-block:3px; background:white; color:var(--text-body) }
.download-cover__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply }
.download-card__info { display:grid; gap:8px; flex:1; align-content:start }
.download-card__title { font-size:22px; line-height:30px; overflow-wrap:anywhere }
.download-card .button { width:100% }

/* ---------- 검색 결과 없음 ---------- */
.download-empty { display:grid; justify-items:center; gap:24px; margin-top:48px; padding:72px 24px; background:var(--surface); text-align:center }
.download-empty p { font-size:20px; font-weight:700; line-height:30px; color:var(--text-heading) }

.download-page .pagination { margin-top:48px }

/* ---------- 반응형: 1599px 이하 ---------- */
@media(max-width:1599px) {
    .download-page__inner { width:calc(100% - var(--gutter)*2) }
    .download-cover { padding:24px }
    .download-card__title { font-size:20px; line-height:28px }
}

/* ---------- 반응형: 1199px 이하 (태블릿) ---------- */
@media(max-width:1199px) {
    .download-page { padding-block:72px }
    .download-toolbar { padding-bottom:32px }
    .download-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; margin-top:40px }
    .download-cover { padding:32px }
}

/* ---------- 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    .download-page { padding-block:56px }
    .download-toolbar { flex-direction:column; align-items:stretch; gap:16px; padding-bottom:24px }
    .download-search { flex:none; flex-direction:column; gap:12px }
    .download-search__select,.download-search__field { flex:none }
    .download-search__select img { top:16px }
    .download-search select,.download-search input { height:56px }
    .download-search button { top:6px; right:6px }
    .download-grid { grid-template-columns:minmax(0,1fr); gap:32px; margin-top:32px }
    .download-card { gap:16px }
    .download-empty { padding:48px 20px }
}