/* 개발 실검(/dev/) 전용. site.css 는 토스 미니앱이 굳혀 쓰므로 여기에 따로 둔다.
   목록은 홈의 .trow, 상세는 키워드 상세의 .a-hero·.tiles·.hrow 를 그대로 쓰고 칸 폭만 바꾼다. */
.dev-note { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.6; }
.dev-note--wait { color: var(--ink); font-weight: 700; }

/* 목록 줄: 순위 · 저장소(이름 + 한 줄 설명) · 변동 · 스타 하나. 두 클래스라 site.css 의 화면 폭별 .trow 를 이긴다 */
.trow.trow--dev { grid-template-columns: 40px minmax(0, 1fr) 56px 96px; gap: 12px; height: auto; min-height: 60px; padding-block: 8px; }
.trow.trow--dev.trow--head { min-height: 0; padding-block: 0 8px; }
.trend__half + .trend__half .trow--dev.trow--head { display: none; }
.trow--dev .trow__kw small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow--dev .trow__val { text-align: right; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.trow--dev .trow__val b { font-family: var(--mono); font-size: 14px; color: var(--acc-s); }
.trow--dev .trow__val small { font-size: 11px; color: var(--mut); }
@media (min-width: 1280px) {
  .trend__half + .trend__half .trow--dev.trow--head { display: grid; }
}
@media (max-width: 767px) {
  .trow.trow--dev { grid-template-columns: 24px minmax(0, 1fr) 40px 72px; gap: 8px; }
  .trow.trow--dev.trow--head { display: none; }
  .trow--dev > * { grid-row: auto; }
  .trow--dev .trow__chg { grid-column: auto; justify-self: start; }
}

/* 상세 */
.dev-hero__name { font-size: 40px; overflow-wrap: anywhere; }
.dev-fields { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 24px; }
.dev-fields div { min-width: 0; }
.dev-fields dt { font-size: 12px; font-weight: 700; color: var(--mut); }
.dev-fields dd { margin: 4px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dev-fields__wide { grid-column: 1 / -1; }
.dev-tag { display: inline-block; font-size: 12px; font-weight: 400; padding: 2px 8px; margin: 2px 4px 2px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.hrow.hrow--dev { grid-template-columns: 64px 96px 72px minmax(0, 1fr); }
@media (max-width: 767px) {
  .dev-hero__name { font-size: 26px; }
  .dev-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hrow.hrow--dev { grid-template-columns: 48px 88px 64px minmax(0, 1fr); }
}