.dl-hero { max-width: var(--max-width); margin: 0 auto; padding: 5rem var(--gutter) 2rem; text-align: center; }
  .dl-hero .sec-index { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: 1rem; }
  .dl-hero h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; margin-bottom: 0.75rem; }
  .dl-lead { color: var(--color-muted); font-size: 1.05rem; }

  .dl-filterbar { position: sticky; top: 64px; z-index: 40; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid #e8ebf2; padding: 1rem 0; margin-bottom: 1rem; }
  .dl-filters { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
  .dl-filter { padding: 0.55rem 1.4rem; border-radius: 100px; border: 1px solid #e4e8f2; background: #fff; color: var(--color-muted); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.15s; }
  .dl-filter:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px); }
  .dl-filter.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

  .dl-list { max-width: var(--max-width); margin: 0 auto; padding: 2rem var(--gutter) 6rem; display: flex; flex-direction: column; gap: 1.5rem; }

  .dl-card { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center; background: rgba(255,255,255,0.6); border: 1px solid #e8ebf2; border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(4px); transition: border-color 0.3s, box-shadow 0.3s; opacity: 0; transform: translateY(28px); }
  .dl-card.reveal { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease calc(var(--i) * 0.08s), transform 0.6s ease calc(var(--i) * 0.08s); }
  .dl-card:hover { border-color: #c9d2f7; box-shadow: 0 20px 48px rgba(32,50,255,0.1); }
  .dl-card.hidden { display: none; }

  .dl-subtitle { color: var(--color-muted); font-size: 0.95rem; margin-bottom: 0.3rem; }
  .dl-title { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin-bottom: 1.5rem; }

  /* 버튼 축소 */
  .dl-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; align-items: flex-start; }
  .dl-btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 0.6rem 1.1rem; border: none; border-radius: 100px; background: var(--color-text); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; overflow: hidden; position: relative; transition: transform 0.15s; }
  .dl-btn::before { content: ''; position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; z-index: 0; }
  .dl-btn:hover::before { transform: scaleX(1); }
  .dl-btn:hover { transform: translateY(-2px); }
  .dl-btn-left { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; }
  .dl-btn-arrow { position: relative; z-index: 1; font-size: 0.95rem; }
  .dl-os-icon { display: inline-flex; width: 15px; height: 15px; }
  .dl-os-icon :global(svg) { width: 100%; height: 100%; fill: currentColor; }

  .dl-guides { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .dl-guide-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-muted); font-weight: 700; }
  .dl-guide { padding: 0.45rem 1.1rem; border-radius: 100px; border: 1px solid var(--color-text); color: var(--color-text); font-weight: 700; font-size: 0.82rem; transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .dl-guide:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; text-decoration: none; }
  .dl-guide.disabled { border-color: #d8dce6; color: #b5bcca; pointer-events: none; }

  .dl-image { overflow: hidden; border-radius: 14px; }
  .dl-image img { width: 100%; display: block; transition: transform 0.5s ease; }
  .dl-card:hover .dl-image img { transform: scale(1.04); }

  /* 모달 */
  .dl-modal { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; background: rgba(10,14,39,0.55); backdrop-filter: blur(6px); padding: var(--gutter); }
  .dl-modal.open { display: flex; }
  .dl-modal-box { background: #fff; border-radius: 24px; max-width: 480px; width: 100%; padding: 2.5rem; text-align: center; animation: modalIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
  @keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .dl-modal-os { display: inline-flex; width: 32px; height: 32px; color: var(--color-accent); margin-bottom: 0.75rem; }
  .dl-modal-os :global(svg) { width: 100%; height: 100%; fill: currentColor; }
  .dl-modal-box h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .dl-modal-note { color: var(--color-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
  .dl-modal-img { width: 100%; border-radius: 14px; margin-bottom: 1.5rem; }
  .dl-modal-actions { display: flex; gap: 0.75rem; }
  .dl-modal-download, .dl-modal-close { flex: 1; padding: 0.9rem; border-radius: 100px; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
  .dl-modal-download { background: var(--color-accent); color: #fff; border: none; }
  .dl-modal-download:hover { background: var(--color-accent-dark); text-decoration: none; }
  .dl-modal-close { background: #fff; border: 2px solid var(--color-text); color: var(--color-text); }

  @media (max-width: 768px) {
    .dl-card { grid-template-columns: 1fr; padding: 1.75rem; }
    .dl-image { order: -1; }
    .dl-filterbar { top: 60px; }
  }