/* 내려받기 단추.
   게시판 지면에서는 머리 글 위 오른쪽에, 낱글 지면에서는 본문 맨 앞에 선다. */

/* 제목과 부제 아래 가운데에 선다. 단추 밑에 최신 판 정보를 한 줄 적는다. */
.gp-dlbar{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:28px 0 4px;
}

.gp-dl-ver{
  margin:0;
  font-size:13px;
  color:var(--gp-ink-faint,#8a8a85);
}

/* 낱글 표지에서는 제목과 부제가 왼쪽에 붙어 있다. 단추만 가운데에 두면
   줄이 어긋나 보이므로 같은 선에 맞춘다. 판 정보도 표지의 글자색을 따른다. */
.gp-hero .gp-dlbar{align-items:flex-start;margin:22px 0 2px}
.gp-hero .gp-dl-ver{color:inherit;opacity:.72}

.gp-dl{position:relative}

/* summary 의 기본 삼각형을 없앤다. 브라우저마다 자리가 달라 단추 모양이 흐트러진다. */
.gp-dl > summary{list-style:none}
.gp-dl > summary::-webkit-details-marker{display:none}

.gp-dl-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#3b6fd4;color:#fff;
  border-radius:6px;padding:10px 18px;
  font-size:15px;font-weight:700;line-height:1;
  cursor:pointer;user-select:none;
  transition:background .2s;
}
.gp-dl-btn:hover{background:#2f5cb0;text-decoration:none}
.gp-dl-btn:focus-visible{outline:2px solid #1d3f83;outline-offset:2px}

.gp-dl-caret{
  width:0;height:0;font-style:normal;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;
  transition:transform .2s;
}
.gp-dl[open] .gp-dl-caret{transform:rotate(180deg)}

.gp-dl-menu{
  position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);z-index:30;
  min-width:250px;
  background:#fff;border:1px solid var(--gp-line,#e3e4dd);border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  padding:6px;
}
.gp-dl-menu ul{list-style:none;margin:0;padding:0}
.gp-dl-menu a,
.gp-dl-menu span{
  display:flex;align-items:baseline;gap:10px;
  padding:10px 12px;border-radius:4px;
  color:var(--gp-ink,#111);
}
.gp-dl-menu a:hover{background:#f1f3f8;text-decoration:none}
.gp-dl-menu b{font-size:15px;font-weight:700}
.gp-dl-menu em{font-style:normal;font-size:12px;color:var(--gp-ink-faint,#8a8a85)}

/* 아직 파일이 없는 갈래. 회색으로 두고 누를 수 없게 한다.
   목록에서 빼지 않는 까닭은, 빼 버리면 그 갈래가 아직 없는 것인지
   원래 만들지 않는 것인지 읽는 사람이 알 수 없기 때문이다. */
.gp-dl-menu li.is-off span{color:#b0b2ad;cursor:default}
.gp-dl-menu li.is-off b{font-weight:600}
.gp-dl-menu li.is-off em{color:#c2c4bf}

@media (max-width:480px){
  .gp-dl-menu{min-width:0;width:min(280px,calc(100vw - 48px))}
}