/* 과학 아틀라스 — 노벨상 루트. korea.css 위에 얹는다. 겹치는 이름은 nb- 접두사. */

/* 해 돌리기 줄 */
.nb-timerow{align-items:center;gap:10px;overflow:visible}
.nb-play{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--brass);
  background:var(--ink-2);color:var(--brass);font-size:13px;font-family:inherit;cursor:pointer;transition:.15s}
.nb-play:hover,.nb-play.on{background:var(--brass);color:var(--ink)}
#nb-year{flex:1 1 auto;min-width:120px;accent-color:var(--brass);height:22px;cursor:pointer}
.nb-yearlbl{flex:0 0 auto;font-family:var(--mono);font-size:15px;color:var(--chalk);min-width:3.2em;text-align:right}
.nb-tally{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--chalk-dim);white-space:nowrap}
@media(max-width:640px){
  .nb-timerow{flex-wrap:wrap}
  .nb-tally{flex-basis:100%;margin-left:44px}
}

/* 지도 점 — 명단은 작고 흐리게, 정거장은 크고 또렷하게. 켜질 때 살짝 부푼다 */
.nb-lit{animation:nb-pop .5s ease-out}
@keyframes nb-pop{0%{transform:scale(2.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* 목록 */
.nb-listbar{display:flex;gap:7px;margin:-2px 0 10px}
#nb-list{display:flex;flex-direction:column;gap:5px}
.nb-item{display:flex;align-items:baseline;gap:10px;text-align:left;width:100%;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:8px;
  padding:9px 13px;color:var(--chalk);font-family:inherit;font-size:13.5px;transition:.15s;cursor:pointer}
.nb-item:hover{border-color:rgba(232,236,244,.3);background:var(--ink-3)}
.nb-item.st{border-left:3px solid var(--kc)}
.nb-item.dim{opacity:.45}
.nb-item .nb-y{font-family:var(--mono);font-size:12px;color:var(--brass);flex:0 0 3.2em}
.nb-item .nb-n{flex:1 1 auto;min-width:0}
.nb-item .nb-n b{font-weight:600}
.nb-item .nb-n i{font-style:normal;color:var(--chalk-dim);font-size:12.5px;display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-item .nb-w{flex:0 0 auto;font-size:11px;color:var(--chalk-dim)}
.nb-more{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim)}

/* 패널 — 정거장 이야기 */
.nb-why{margin-top:10px;padding:9px 12px;border-left:2px solid var(--brass);
  background:rgba(201,162,39,.07);font-size:13.5px;line-height:1.6;color:var(--chalk)}
.nb-why small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--brass);margin-bottom:4px}
.nb-about p{margin:10px 0 0;font-size:14px;line-height:1.7;word-break:keep-all}
.nb-q{margin-top:14px;padding-top:12px;border-top:1px solid var(--ink-3);
  font-family:var(--disp);font-size:15px;line-height:1.6;color:var(--chalk)}
.nb-q:before{content:'남은 질문';display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--brass);margin-bottom:5px}
.nb-en{font-size:12.5px;color:var(--chalk-dim);line-height:1.55;margin-top:8px}
.nb-org{margin-top:8px;font-size:12.5px;color:var(--chalk-dim)}
.nb-life{font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim);margin-left:8px}
#pk-panel.nb-st{max-width:470px}
@media(max-width:640px){
  .nb-about p{font-size:13.5px}
  .nb-q{font-size:14px}
}

/* 켜질 때 부푸는 점 — svg 라 중심을 잡아 줘야 제자리에서 부푼다 */
.nb-lit{transform-box:fill-box;transform-origin:center}

/* 상 루트 사이를 오가는 줄 */
.nb-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 16px}
.nb-tabs a{display:inline-block;padding:6px 14px;border:1px solid var(--ink-3);border-radius:999px;
  color:var(--chalk-dim);font-size:13px;text-decoration:none;transition:.15s}
.nb-tabs a:hover{border-color:var(--brass);color:var(--chalk)}
.nb-tabs a.on{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600}
.nb-tabs span{font-family:var(--mono);font-size:11px;color:var(--chalk-dim);margin-left:4px}