/* 이 화면이 소유하는 래퍼(profile.js 참고 — #view 는 board·admin 과 공유한다).
   .view 와 같은 블록으로 두어 두 패널의 배치가 래퍼 없을 때와 같게 한다. */
.pf-root { min-width: 0; }
.pf { padding: 18px; margin-bottom: 16px; }
.pf-head { display: flex; align-items: baseline; gap: 12px; }
.pf-count { margin: 0 auto 0 0; color: var(--sub); }
.pf-hint { color: var(--sub); font-size: 12px; margin: 6px 0 10px; }
.pf-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
/* 열 수를 고정한다. characterRow 는 본캐·부캐 모두 정확히 6개 칸을 낸다. */
.pf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 76px 62px 54px 72px 64px;
  align-items: center; column-gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-slot);
}
.pf-row:hover { background: rgba(255, 255, 255, 0.035); }
.pf-result { grid-template-columns: minmax(0, 1fr) 76px 62px 64px; }
.pf-name { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-badge {
  display: inline-block; margin-left: 6px; padding: 2px 6px;
  border: 1px solid rgba(166, 107, 245, 0.4); border-radius: 5px;
  color: var(--amethyst); font-size: 12px; font-weight: 500; vertical-align: 1px;
}
.pf-class, .pf-when { color: var(--sub); font-size: 12px; }
.pf-num { text-align: right; font-size: 12.5px; }
.pf-il { color: var(--sub); font-weight: 400; }
.pf-act { display: flex; justify-content: flex-end; }
.pf-search { display: flex; gap: 8px; }
.pf-search input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--edge);
  border-radius: var(--radius-slot); color: var(--ink);
}
.pf-empty, .pf-none { color: var(--sub); padding: 12px 4px; font-size: 12.5px; }
.pf-none { margin: 0; }

/* 좁은 폭에서는 2행으로 접는다. 자동 흐름에 맡기지 않고 칸을 전부 지정한다 —
   grid-template-areas 나 부분 지정만 걸면 남은 칸이 엉뚱한 자리로 흐른다. */
@media (max-width: 720px) {
  .pf-row, .pf-result { grid-template-columns: minmax(0, 1fr) 62px 64px; row-gap: 2px; }
  .pf-name  { grid-area: 1 / 1 / 2 / 2; }
  .pf-class { grid-area: 2 / 1 / 3 / 2; }
  .pf-num   { grid-area: 1 / 2 / 2 / 3; }
  .pf-il    { grid-area: 2 / 2 / 3 / 3; }
  .pf-act   { grid-area: 1 / 3 / 3 / 4; align-items: center; }
  .pf-when  { display: none; }   /* 갱신 시각은 좁은 화면에서 접는다 */
}