@charset "utf-8";
/* 실시간 베스트와 활용법 칸.
   본체 스타일(aihub.css)과 나눠 둔다. 순위 화면만 손볼 일이 잦기 때문이다.
   색과 여백 값은 aihub.css 의 :root 변수를 그대로 쓴다. */

/* ── 실시간 베스트 ────────────────────────────────────────────
   시간순 목록 위에 얹는다. 처음 온 사람이 가장 먼저 보는 칸이므로
   '이 사이트에 읽을 만한 게 있다' 를 여기서 증명해야 한다. */
.ah-hot{margin-bottom:12px}
.ah-hot .ah-ph{background:linear-gradient(90deg,#fdf4ea,#fff)}
.ah-hot .ah-ph h2{display:flex;align-items:center;gap:6px}
.ah-hot .ah-ph h2:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--new);
  box-shadow:0 0 0 0 rgba(192,57,43,.55);animation:ah-pulse 2.2s infinite}
@keyframes ah-pulse{
  0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}
  70%{box-shadow:0 0 0 7px rgba(192,57,43,0)}
  100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}
}
@media (prefers-reduced-motion:reduce){.ah-hot .ah-ph h2:before{animation:none}}
.ah-hot ol{margin:0;padding:5px 0;list-style:none}
.ah-hot li{display:flex;align-items:center;gap:9px;padding:6px 13px;min-width:0}
.ah-hot li+li{border-top:1px solid var(--line2)}
.ah-hot li:hover{background:var(--accent-bg)}
.ah-hot .rk{flex:none;width:19px;height:19px;border-radius:3px;background:var(--bg);color:var(--ink3);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.ah-hot li:nth-child(1) .rk{background:var(--accent);color:#fff}
.ah-hot li:nth-child(2) .rk{background:#c8862f;color:#fff}
.ah-hot li:nth-child(3) .rk{background:#9aa0a6;color:#fff}
.ah-hot .bo{flex:none;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.ah-hot .bo:hover{color:var(--accent)}
.ah-hot .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ah-hot .t:hover{text-decoration:underline}
.ah-hot .cm{flex:none;color:var(--accent);font-weight:700;font-size:12px}
/* 추천수. 0 일 때는 아예 안 그린다. '추천 0' 은 아무것도 알려 주지 않으면서
   빈 사이트라는 인상만 남긴다. */
.ah-hot .gd{flex:none;display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;
  color:var(--ok);background:var(--ok-bg);padding:1px 7px;border-radius:10px;
  font-variant-numeric:tabular-nums}
.ah-hot .gd:before{content:'\25B2';font-size:8px}
.ah-more{display:block;padding:9px 13px;border-top:1px solid var(--line2);text-align:center;
  font-size:12.5px;color:var(--ink2);background:#fafbfc}
.ah-more:hover{color:var(--accent);background:var(--accent-bg)}

/* ── 목록의 추천 칸 ── */
.ah-list col.k-good{width:52px}
.ah-list .c-good{text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink3)}
.ah-list .c-good b{color:var(--ok);font-weight:700}

/* ── 활용법 칸 ────────────────────────────────────────────────
   도구 목록은 '뭐가 있나' 에 답하고, 이 칸은 '어떻게 쓰나' 에 답한다.
   사람들이 검색창에 치는 건 대개 두 번째 쪽이다. */
.ah-howto{margin-bottom:12px}
.ah-howto .ah-ph{border-bottom:1px solid var(--line)}
.ah-howto ul{margin:0;padding:5px 0;list-style:none}
.ah-howto li{display:flex;align-items:center;gap:9px;padding:6px 13px;min-width:0}
.ah-howto li+li{border-top:1px solid var(--line2)}
.ah-howto li:hover{background:var(--accent-bg)}
.ah-howto .dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}
.ah-howto .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ah-howto .t:hover{text-decoration:underline}
.ah-howto .tg{flex:none;font-size:11.5px;color:var(--ink3)}
.ah-howto .cm{flex:none;color:var(--accent);font-weight:700;font-size:12px}

@media (max-width:680px){
  .ah-hot .bo{display:none}
  .ah-howto .tg{display:none}
  .ah-list col.k-good{width:0}
  .ah-list .c-good{display:none}
}

/* ── 마감 배지 ────────────────────────────────────────────────
   공모전과 채용에만 붙는다.
   남은 날이 사흘 이하면 붉게, 이미 지났으면 회색으로 눕힌다.
   지난 것을 아예 안 보여 주는 대신 회색으로 두는 이유는,
   무엇이 있었는지 아는 것 자체가 정보이기 때문이다.
   (메인 전체 보기에서는 지난 것을 아예 뺀다. index.php 참고) */
.ah-list .dd{flex:none;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;
  white-space:nowrap;color:#2f6fb3;background:#eef4fb;border:1px solid #d5e3f4}
.ah-list .dd.hot{color:var(--warn);background:var(--warn-bg);border-color:#f2ccc7}
.ah-list .dd.off{color:var(--ink3);background:var(--bg);border-color:var(--line);font-weight:500}
/* 마감된 줄은 제목까지 한 단계 물린다. 배지만 회색이면 눈에 안 들어온다. */
.ah-list tr:has(.dd.off) .tit .s{color:var(--ink3)}