Polish the banner links, book cards, and Builders tab

Banner
- Make the open-source links a little smaller, rename the experiment
  entry and tag it as course material, and give every tag one width.
- Hide star counts under 10. On phones, let titles and descriptions
  wrap instead of cutting them off.
- Book and lecture cards: smaller, muted covers, a short lecture title,
  a paid chip, and "커리큘럼 L2에서 보기" so the jump is stated.
- Jumping to a card now centres the shelf and starts the highlight once
  the scroll ends; the card keeps an outline afterwards.

Builders tab
- Top three cards drop the cohort strip and share one colour.
- Roster: legend above the table, latest three projects with a link to
  the rest, totals labelled with units. The rail is hidden on phones.
- History dialog: full term names, one colour per role, "레포 보기".
- Avatars show the initial until the photo loads; tab counts get a
  title.

Author: jsshin2022

assets/css/hub.css

@@ -117,17 +117,17 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .pill.solid { background: #fff; color: #23276A; border-color: #fff; }
 .pill.solid:hover { background: rgba(255, 255, 255, .9); }
 .pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
-.banner-side { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 400px; }
+.banner-side { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 372px; }
 .banner-mark { width: 92px; height: 92px; filter: drop-shadow(0 10px 24px rgba(10, 10, 40, .35)); }
 .featured { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
 .featured li { min-width: 0; }
-.featured a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }
+.featured a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }
 .featured a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
 .featured a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
-.featured .tag { flex-shrink: 0; min-width: 58px; text-align: center; font-size: 12px; font-weight: 800; color: #23276A; background: #fff; border-radius: 7px; padding: 3px 7px; white-space: nowrap; }
+.featured .tag { flex-shrink: 0; width: 64px; box-sizing: border-box; text-align: center; font-size: 11.5px; font-weight: 800; color: #23276A; background: #fff; border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
 .featured .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.featured .t { font-weight: 700; font-size: 16px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.featured .d { font-size: 12.5px; color: rgba(255, 255, 255, .74); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.featured .t { font-weight: 700; font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.featured .d { font-size: 12px; color: rgba(255, 255, 255, .74); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .featured .st { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
 .featured .st svg { width: 12px; height: 12px; color: #FFD54A; }
 .featured .out { width: 14px; height: 14px; opacity: .8; flex-shrink: 0; }
@@ -140,17 +140,20 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .pt-card:hover { background: rgba(255, 255, 255, .13); }
 .pt-main { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; flex: 1; min-width: 0; color: #fff; border-radius: 12px 0 0 12px; }
 .pt-main:focus-visible, .pt-out:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
-.pt-img { flex-shrink: 0; height: 40px; object-fit: cover; border-radius: 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, .28); }
-.pt-img.book { width: 30px; }
-.pt-img.wide { width: 60px; border-radius: 5px; object-position: 70% 30%; }
+.pt-img { flex-shrink: 0; height: 34px; object-fit: cover; border-radius: 2px; box-shadow: 0 3px 8px rgba(0, 0, 0, .28); filter: saturate(.7); opacity: .9; transition: filter .15s ease, opacity .15s ease; }
+.pt-card:hover .pt-img { filter: none; opacity: 1; }
+.pt-img.book { width: 26px; }
+.pt-img.wide { width: 48px; border-radius: 4px; object-position: 70% 30%; }
 .pt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.pt-text b { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pt-text b { font-size: 13px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pt-lv { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
 .pt-type { font-size: 10.5px; font-weight: 800; color: #23276A; background: rgba(255, 255, 255, .9); border-radius: 4px; padding: 0 5px; }
+.pt-paid { font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px; padding: 0 4px; margin-left: -2px; }
 .pt-out { display: grid; place-items: center; width: 34px; flex-shrink: 0; color: #fff; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0 12px 12px 0; }
 .pt-out:hover { background: rgba(255, 255, 255, .1); }
 .pt-out svg { width: 12px; height: 12px; }
-@media (max-width: 1160px) { .featured .tag { min-width: 0; } .featured .t { white-space: normal; line-height: 1.25; } }
+@media (max-width: 1160px) { .featured .t { white-space: normal; line-height: 1.25; } }
+@media (max-width: 640px) { .featured .d { white-space: normal; line-height: 1.35; } .featured .tag { width: auto; min-width: 40px; padding: 2px 6px; } .featured a { gap: 9px; } }
 @media (max-width: 1160px) and (min-width: 861px) { .banner-side { width: 340px; } .featured .d { display: none; } .partner-list { grid-template-columns: minmax(0, 1fr); } }
 @media (max-width: 640px) { .partner-list { grid-template-columns: minmax(0, 1fr); } .partner { margin-top: 20px; } }
 @media (max-width: 860px) {
@@ -353,7 +356,8 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .ep-art.book { right: 18px; top: 30px; width: 58px; border-radius: 3px; box-shadow: 0 6px 14px rgba(20, 22, 43, .25); transform: rotate(-4deg); }
 .ep-art.wide { right: 0; top: 0; height: 100%; width: 58%; object-fit: cover; object-position: 70% 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
 .ep-cover.has-art .ep-repo { font-family: var(--f-body); right: auto; max-width: 42%; }
-.ep.flash > button { animation: ep-flash 1.8s ease-out; }
+.ep.picked > button { border-color: var(--c); }
+.ep.flash > button { animation: ep-flash 2.6s ease-out; }
 @keyframes ep-flash { 0%, 55% { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
 
 /* Contribution tab: top 3, sliding rail, roster */
@@ -364,6 +368,7 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .contrib-sub { color: var(--muted); font-size: 14.5px; margin: -4px 0 12px; }
 
 .top3 { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
+.tcard { --c: var(--accent); }
 .tcard > button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; padding: 20px; border-radius: 18px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 24%, var(--rule)); transition: transform .15s ease, border-color .15s ease; }
 .tcard > button:hover { border-color: var(--c); transform: translateY(-2px); }
 .tcard > button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@@ -389,7 +394,7 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .sh { width: 22px; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
 
 /* sliding rail */
-.people-rail { overflow: hidden; margin: 0 0 32px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
+.people-rail { overflow: hidden; margin: 0 0 32px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 40px), transparent); }
 .people-move { display: flex; gap: 12px; width: max-content; animation: people-slide var(--dur, 60s) linear infinite; }
 .people-rail:hover .people-move, .people-rail:focus-within .people-move { animation-play-state: paused; }
 @keyframes people-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@@ -411,7 +416,7 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 
 /* roster */
 .roster { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
-.ro-head, .ro { display: grid; grid-template-columns: 210px auto minmax(0, 1fr) 72px; gap: 20px; align-items: center; padding: 12px 18px; }
+.ro-head, .ro { display: grid; grid-template-columns: 210px auto minmax(0, 1fr) 96px; gap: 20px; align-items: center; padding: 12px 18px; }
 .ro-head { font-size: 12px; font-weight: 700; color: var(--muted); padding-block: 10px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
 .ro-list { list-style: none; margin: 0; padding: 0; }
 .ro + .ro { border-top: 1px solid var(--rule); }
@@ -429,13 +434,17 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 .ro-projects button:hover, .ro-projects a:hover { text-decoration: underline; }
 .ro-projects button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
 .ro-projects a { color: var(--ink); text-decoration: none; }
+.ro-projects .ro-more { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); }
+.ro-more:hover { text-decoration: underline; }
+.ro-more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
 .live-dot { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--live); }
 .tot { text-align: right; }
-.ro-total b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
+.ro-total b { display: block; font-family: var(--f-display); font-size: 16px; white-space: nowrap; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
 .ro-total span { font-size: 12px; color: var(--muted); white-space: nowrap; }
-.roster-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
+.roster-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
 .roster-legend li { display: flex; align-items: center; gap: 6px; }
 .roster-legend .sc { width: 14px; height: 14px; border-radius: 4px; }
+@media (max-width: 600px) { .rail-head, .people-rail { display: none; } }
 @media (max-width: 760px) {
   .ro-head { display: none; }
   .ro { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px; }
@@ -444,7 +453,8 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
 }
 
 .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: 18px; color: var(--on-line); background: var(--c, var(--l-main)); flex-shrink: 0; overflow: hidden; }
-.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.avatar { position: relative; }
+.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .avatar.lg { width: 64px; height: 64px; font-size: 26px; }
 
 .linkish { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
@@ -610,7 +620,7 @@ dialog.station::backdrop { background: rgba(10, 14, 20, .55); }
 .tl-c b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
 .tl-c span { font-size: 11.5px; color: var(--muted); }
 .tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
-.tl-role { font-size: 11.5px; font-weight: 700; color: var(--c); }
+.tl-role { font-size: 11.5px; font-weight: 700; color: var(--accent); }
 .p-timeline li.r .tl-role { color: var(--muted); }
 .tl-name { font-weight: 600; }
 .tl-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }