/* 다운로드: 설치 파일마다 카드 하나 (콘솔, PC 프로그램), 번호가 붙은 설치 순서. */

.download-section {
  padding-top: var(--sp5);
}

.downloadCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.downloadCard {
  display: grid;
  align-content: start;
  gap: var(--sp2);
  padding: var(--sp6) var(--sp5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  text-align: center;
}

.downloadCard-icon {
  justify-self: center;
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.downloadCard-where {
  margin: var(--sp2) 0 0;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.downloadCard-name {
  margin: 0;
  font-size: var(--fs-xl);
}

.downloadCard-desc {
  margin: 0 0 var(--sp3);
  color: var(--text-dim);
}

.downloadCard-button {
  justify-self: center;
  min-width: 200px;
}

.downloadCard-meta {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.downloadNote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp3);
  margin: var(--sp5) 0 0;
  color: var(--text-dim);
  text-align: center;
}

.downloadNote .download-console {
  margin: 0;
}

.downloadSteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.downloadSteps li {
  display: grid;
  align-content: start;
  gap: var(--sp1);
  padding: var(--sp4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.downloadSteps span:last-child {
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.downloadSteps-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp1);
  border-radius: 50%;
  background: var(--accent-btn);
  color: var(--on-accent);
  font-weight: 700;
}

/* 이용권이 있어야 쓴다는 한 줄과 요금 페이지 링크 (구매 전 방문자를 위해). */
.downloadLicense {
  margin: var(--sp3) 0 0;
  font-weight: 700;
}

.downloadLicense a {
  margin-left: var(--sp1);
}

/* 다른 제품의 다운로드로 가는 한 줄 (두 제품일 때). */
.downloadOther {
  margin: var(--sp3) 0 0;
  font-size: var(--fs-sm);
}