/* 인기 용구(/tt/gear/popular) — gear.css 위에 얹는다(tt_gear_popular 가 이 화면에서만 건다).
 *
 * 색·간격은 사이트 토큰만 쓴다 — 다크 모드는 토큰이 바꾼다. 막대는 「몇 명이 쓰나」 를 한눈에 보이려는 것이라
 * 장식 없이 한 색이다. 순번 동그라미는 같은 수끼리 같은 숫자다(순위가 이름순으로 읽히지 않게, 그리기는 서버).
 * 누르는 것(제품 이름)은 44px 이상. 움직임은 막대가 한 번 차오르는 것뿐이고 prefers-reduced-motion 이면 멈춘다.
 */
.tgPopSec{margin:var(--sp-6) 0;scroll-margin-top:84px}
.tgPopSec h2{font-size:var(--fs-xl);margin:0 0 var(--sp-3)}
.tgPopWarn{display:flex;align-items:flex-start;gap:10px;margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border:2px solid var(--warn-fill,var(--accent));background:var(--warn-bg,var(--accent-bg));border-radius:16px;font-size:var(--fs-md)}
.tgPopMeta{margin:0 0 var(--sp-2);font-weight:700;font-size:var(--fs-md)}
.tgPopSrc{margin:0 0 var(--sp-4);font-size:var(--fs-sm)}
.tgPopCols{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.tgPopCols.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.tgPopCol{border:2px solid var(--border-2);border-radius:20px;background:var(--surface);padding:var(--sp-4);min-width:0}
.tgPopCol h3{margin:0 0 var(--sp-3);font-size:var(--fs-lg);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.tgPopCol h3 .dim{font-size:var(--fs-sm);font-weight:600}
.tgPopList{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.tgPopRow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:start}
.tgPopRank{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;margin-top:6px;
  background:var(--surface-2);border:2px solid var(--border-2);font-weight:900;font-size:var(--fs-sm);color:var(--text)}
.tgPopMain{min-width:0}
.tgPopName{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-height:44px;color:var(--text);text-decoration:none;
  overflow-wrap:anywhere}
a.tgPopName:hover b{text-decoration:underline}
a.tgPopName:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.tgPopName .tgBrand{font-size:var(--fs-sm);color:var(--dim);font-weight:700}
.tgPopBar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.tgPopBar span{display:block;height:100%;border-radius:999px;background:var(--accent);transform-origin:left center;
  animation:tgPopFill .6s ease-out both}
.tgPopN{margin-top:10px;font-weight:800;font-size:var(--fs-sm);white-space:nowrap;color:var(--text)}
.tgPopWho{margin:4px 0 0;font-size:var(--fs-sm)}
.tgPopWait{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);padding:var(--sp-4);
  border:2px dashed var(--border-2);border-radius:20px;background:var(--surface)}
.tgPopWait p{margin:0}
.tgPopWait .tpPongi{width:56px;flex:none}
@keyframes tgPopFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tgPopBar span{animation:none}}