/* 다운로드 페이지 — 2026-09-22
   site.css 의 토큰과 jobs.css 의 머리·note 를 그대로 쓰고,
   이 쪽에만 있는 덩어리(받는 카드·설치 순서·사양표·문답)만 여기 둔다. */

/* ── 받는 카드 ── */
.dl-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  max-width:900px; margin:0 auto;
}
.dl-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:34px 26px 26px;
  border:1px solid var(--line); border-radius:18px;
  background:rgba(27,22,17,.62);
}
.dl-card .dl-ic{font-size:34px; line-height:1; margin:0 0 14px; filter:saturate(.9)}
.dl-card b{font-size:19px; letter-spacing:-.01em}
.dl-card em{
  margin:5px 0 0; font-style:normal; font-size:11px; letter-spacing:.22em;
  color:var(--ink-mute);
}
.dl-card p{
  margin:14px 0 22px; font-size:14px; line-height:1.65; color:var(--ink-dim);
  min-height:46px;
}

/*  PC 쪽이 으뜸이다. 금테로 한 칸 들어 올린다 */
.dl-card.main{
  border-color:rgba(255,200,97,.4);
  background:linear-gradient(180deg,rgba(255,200,97,.08),rgba(27,22,17,.66));
  box-shadow:0 14px 44px rgba(0,0,0,.38);
}
.dl-card.main b{color:var(--gold)}

/* ── 받는 단추 ── */
.dl-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; min-height:54px; padding:8px 22px; border-radius:12px;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#2a1a08; box-shadow:0 10px 24px rgba(255,150,60,.26);
  transition:transform .15s ease, box-shadow .15s ease;
}
.dl-btn small{
  margin-top:2px; font-size:11px; font-weight:400; letter-spacing:.04em;
  color:rgba(42,26,8,.7);
}
.dl-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,150,60,.36)}

/*  고리가 아직 없는 자리. 단추 모양은 지키되 눌리지 않는 것이 보이게 */
.dl-btn.off{
  background:var(--stone); color:var(--ink-mute);
  border:1px dashed var(--line); box-shadow:none; cursor:default;
}
.dl-btn.off small{color:var(--ink-mute); opacity:.75}
.dl-btn.off:hover{transform:none; box-shadow:none}

.dl-sub{
  margin-top:12px; font-size:13px; color:var(--ink-dim);
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
.dl-sub:hover{color:var(--gold); border-color:var(--gold)}
.dl-sub.off{color:var(--ink-mute); border-color:transparent; cursor:default}
.dl-sub.off:hover{color:var(--ink-mute)}

.dl-ver{
  margin:22px 0 0; text-align:center; font-size:13px; color:var(--ink-mute);
  letter-spacing:.04em;
}
.dl-ver b{color:var(--gold); font-variant-numeric:tabular-nums}

.dl-lead{
  max-width:720px; margin:0 auto 34px; text-align:center;
  font-size:15px; line-height:1.75; color:var(--ink-dim);
}
.dl-lead b{color:var(--gold)}

/* ── 설치 순서 ── */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin:0; padding:0; list-style:none; counter-reset:none;
}
.steps li{
  position:relative; padding:30px 22px 24px;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(27,22,17,.55);
}
.step-no{
  position:absolute; top:-15px; left:22px;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#2a1a08; font-size:14px; font-weight:700;
}
.steps li b{display:block; margin:0 0 8px; font-size:16px}
.steps li p{margin:0; font-size:13.5px; line-height:1.65; color:var(--ink-dim)}
.steps li p b{display:inline; margin:0; font-size:inherit; color:var(--gold)}
.steps li a{color:var(--gold); border-bottom:1px solid rgba(255,200,97,.4)}

/* ── 사양표 ──
   표(table)가 아니라 격자다. 좁은 화면에서 한 칸씩 접기 좋다. */
.spec{
  max-width:860px; margin:0 auto;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:rgba(27,22,17,.55);
}
.spec-head,.spec-row{
  display:grid; grid-template-columns:150px 1fr 1fr; align-items:center;
}
.spec-head{
  background:rgba(255,236,200,.05); border-bottom:1px solid var(--line);
}
.spec-head b{
  padding:13px 18px; font-size:12px; letter-spacing:.2em; color:var(--ink-mute);
}
.spec-head b.hi{color:var(--gold)}
.spec-row{border-bottom:1px solid var(--line)}
.spec-row:last-child{border-bottom:0}
.spec-row span{
  padding:14px 18px; font-size:13px; color:var(--ink-mute);
  background:rgba(255,236,200,.03);
}
.spec-row p{margin:0; padding:14px 18px; font-size:14px; color:var(--ink-dim)}
.spec-row p.hi{color:var(--ink)}

/* ── 잘 안 될 때 ── */
.faq{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:980px; margin:0 auto;
}
.faq-item{
  padding:24px 24px 20px; border:1px solid var(--line); border-radius:16px;
  background:rgba(27,22,17,.55);
}
.faq-item b{
  display:block; margin:0 0 9px; font-size:16px; color:var(--gold);
}
.faq-item b::before{content:"◆ "; font-size:10px; vertical-align:2px}
.faq-item p{margin:0; font-size:14px; line-height:1.7; color:var(--ink-dim)}
.faq-item p b{display:inline; margin:0; font-size:inherit; color:var(--ink)}
.faq-item p b::before{content:""}

/* ── 마지막 한마디 ── */
.dl-cta{
  max-width:640px; margin:46px auto 0; padding:30px 26px;
  text-align:center; border:1px solid rgba(255,200,97,.3); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,200,97,.07),rgba(27,22,17,.6));
}
.dl-cta b{display:block; font-size:18px}
.dl-cta p{margin:8px 0 18px; font-size:14px; color:var(--ink-dim)}

/* ── 좁은 화면 ── */
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .dl-cards,.steps,.faq{grid-template-columns:1fr}
  .dl-card p{min-height:0}
  .spec-head,.spec-row{grid-template-columns:110px 1fr 1fr}
  .spec-head b,.spec-row span,.spec-row p{padding:11px 12px; font-size:13px}
}