/* ── typeface 레이어 (표면별 채택) ─────────────────────────────────────
   pretendard 1.3.9(한글 본문) + jetbrains-mono(코드·ISSN). pico 는 셸을 소유하지만
   글꼴은 OS 스택으로 두므로, PC 마다 다른 한글 렌더가 그대로 남아 있었다. 지표 표는
   숫자 열이 많아 자간이 흔들리면 비교가 어려워진다.

   레코드 constraint: woff2 만, 필요한 것만. pretendard 는 가변 하나로 전 웨이트를 덮고
   (선언 범위 45–920 — CSS 표준 100–900 이 아니다), mono 는 코드에만 쓰므로 Regular 하나.
   pico 의 폰트 토큰을 덮어쓰면 셸 전체가 한 번에 따라온다. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("vendor/pretendard/1.3.9/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("vendor/jetbrains-mono/19371302/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* journalscope — static-derived-doc 블루프린트 위의 앱 레이어.
 *
 * shell 은 pico-css 2.1.1 이 소유한다: body 타이포·폼 컨트롤·표 기본형·포커스 링은
 * 여기서 다시 칠하지 않는다(이전엔 input/select/button/table 을 손으로 칠했고, 그래서
 * 포커스 표시가 브라우저 기본과 어긋나 있었다). 이 파일은 pico 가 모르는 것만 말한다 —
 * 이 대시보드의 도메인 의미(분위·적합도·산점도)와 배치.
 *
 * palette 은 open-color 1.9.1 이 소유한다: 분위 Q1~Q4 색을 hex 로 적어두지 않고
 * --oc-* 를 참조하므로, 배지·칩·막대그래프가 한 출처를 읽는다(palette.js 가 같은 토큰을
 * 그림에 넘긴다). 색이 두 곳에서 갈라질 자리가 없다.
 */

:root {
  /* pico 톤 조정 — 데이터 밀도가 높은 표라 기본보다 조금 조인다 */
  --pico-font-size: 93.75%;
  --pico-line-height: 1.5;
  --pico-block-spacing-vertical: 1.1rem;
  --pico-form-element-spacing-vertical: .5rem;
  --pico-form-element-spacing-horizontal: .7rem;
  /* 셸의 글꼴 토큰을 벤더된 핀으로 — pico 가 칠하는 모든 요소가 함께 따라온다 */
  --pico-font-family-sans-serif: "Pretendard Variable", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --pico-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --pico-font-family: var(--pico-font-family-sans-serif);

  /* 분위 식별색 — open-color 파생 (배지·칩·그림이 공유) */
  --q1: var(--oc-green-5);
  --q2: var(--oc-blue-5);
  --q3: var(--oc-orange-5);
  --q4: var(--oc-red-5);
  --ok: var(--oc-green-5);
  /* 상위% 구간색 — 순서 있는 값이라 단일 계열(teal) 명도 램프. 분위색(녹/청/주/적)과
     계열을 달리해 "구간"과 "분위"가 화면에서 헷갈리지 않게 한다. dark 테마라 어두운
     끝(8~9)은 배경에 묻히므로 3~7 안에서만 움직인다. */
  --b1: var(--oc-teal-3);
  --b2: var(--oc-teal-4);
  --b3: var(--oc-teal-5);
  --b4: var(--oc-teal-6);
  --b5: var(--oc-teal-7);
  /* 적합도 그라디언트 양 끝 */
  --fit-a: var(--oc-indigo-4);
  --fit-b: var(--oc-grape-4);
}

body { background-color: var(--pico-background-color); }

/* ── 상단 ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--pico-muted-border-color);
}
.brand h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.brand .tag { margin: .15rem 0 0; color: var(--pico-muted-color); }
.meta { text-align: right; color: var(--pico-muted-color); font-size: .8rem; }
.meta b { color: var(--pico-color); }

main { padding: 1.25rem 1.75rem 2.5rem; max-width: 1320px; margin: 0 auto; }

/* pico 의 카드 톤을 그대로 쓰되, 이 페이지의 블록 리듬만 정한다 */
.card {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 1rem 1.1rem; margin-bottom: 1.1rem;
}
.card h2 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; }
.card h2 small { color: var(--pico-muted-color); font-weight: 400; }

/* ── 그림 (chart-js 캔버스) ───────────────────────────── */
.charts { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.1rem; }
.charts .card { margin-bottom: 0; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.chart { width: 100%; height: 220px; }
.chart canvas { cursor: pointer; }

/* ── 컨트롤 ───────────────────────────────────────────── */
/* pico 가 input/select/button 을 이미 칠하므로 여기선 배치와 여백만 */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.controls > * { margin-bottom: 0; }
#search { flex: 1 1 260px; min-width: 200px; margin-bottom: 0; }
.sel, .chk {
  color: var(--pico-muted-color); display: inline-flex; align-items: center;
  gap: .4rem; font-size: .82rem; margin-bottom: 0;
}
.sel select, .chk input { margin-bottom: 0; }
/* 보조 버튼은 pico 의 secondary outline 톤으로 */
button.reset {
  --pico-font-size: .82rem;
  width: auto; padding: .42rem .8rem; margin-bottom: 0;
  background: transparent; color: var(--pico-muted-color);
  border-color: var(--pico-muted-border-color);
}
button.reset:hover { color: var(--pico-color); border-color: var(--pico-primary); }

.search-mode {
  flex: 0 0 auto; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color); font-size: .72rem; white-space: nowrap; cursor: help;
}

/* ── 칩 (분위·관심분야 필터) ──────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips.interests { flex-basis: 100%; }
.chip {
  cursor: pointer; user-select: none;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-muted-color); padding: .3rem .7rem;
  border-radius: 999px; font-size: .78rem; transition: color .12s, background .12s;
}
.chip:hover { color: var(--pico-color); }
/* 칩은 <span> 이라 기본 포커스 표시가 없다. 마우스 없이도 쓰려면 링을 직접 준다. */
.chip:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.chip.on { color: var(--oc-gray-0); border-color: transparent; }
.chip.on.q1 { background: var(--q1); } .chip.on.q2 { background: var(--q2); }
.chip.on.q3 { background: var(--q3); } .chip.on.q4 { background: var(--q4); }
.chip.on.b1 { background: var(--b1); } .chip.on.b2 { background: var(--b2); }
.chip.on.b3 { background: var(--b3); } .chip.on.b4 { background: var(--b4); }
.chip.on.b5 { background: var(--b5); color: #fff; }
.chip.on.interest { background: linear-gradient(90deg, var(--fit-a), var(--fit-b)); }

/* ── 표 ───────────────────────────────────────────────── */
/* pico 가 표 기본형을 소유한다 — 여기선 밀도·고정헤더·정렬만 */
.result-head { color: var(--pico-muted-color); font-size: .82rem; margin-bottom: .5rem; }
/* 표가 넓어 가로로 스크롤한다 — 스크롤바가 눈에 띄면 지표 표가 어수선해지므로
   있다는 건 보이되 호버할 때만 또렷해진다. */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--pico-muted-border-color) transparent; }
.table-wrap:hover { scrollbar-color: var(--pico-secondary) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--pico-muted-border-color); border-radius: 999px; }
.table-wrap:hover::-webkit-scrollbar-thumb { background: var(--pico-secondary); }
table { font-size: .82rem; margin-bottom: 0; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--pico-card-sectioning-background-color);
  color: var(--pico-muted-color); font-weight: 600; white-space: nowrap;
}
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody td { vertical-align: top; }
tbody tr:hover { background: var(--pico-card-sectioning-background-color); }
/* 저널명은 66자, 발행처는 51자까지 온다. 그대로 두면 행마다 높이가 달라져 숫자 열을
   세로로 훑을 때 눈이 걸린다. 두 줄에서 자르고 전문은 title 이 갖는다.
   클램프는 **셀 안쪽 요소**에 건다 — td 의 display 를 바꾸면 테이블 셀이 아니게 된다. */
.jname {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; color: var(--pico-color); text-decoration: none;
}
.jname:hover { color: var(--pico-primary); }
.pub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--pico-muted-color); max-width: 160px;
}

.badge { display: inline-block; padding: .1rem .5rem; border-radius: var(--pico-border-radius);
  font-size: .72rem; font-weight: 600; }
/* 배지는 같은 색의 옅은 판 위에 — 채도 대비가 아니라 밝기 대비로 읽히게 */
.q1 { color: var(--q1); background: color-mix(in srgb, var(--q1) 16%, transparent); }
.q2 { color: var(--q2); background: color-mix(in srgb, var(--q2) 16%, transparent); }
.q3 { color: var(--q3); background: color-mix(in srgb, var(--q3) 16%, transparent); }
.q4 { color: var(--q4); background: color-mix(in srgb, var(--q4) 16%, transparent); }
.oa { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.basis { color: var(--pico-muted-color); font-size: .66rem; margin-left: .25rem; }

.catchips { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 280px; }
.catchip {
  font-size: .69rem; padding: .05rem .45rem; border-radius: 4px;
  background: var(--pico-card-sectioning-background-color);
  border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color);
}

.fit { min-width: 130px; }
.fitbar {
  height: 7px; border-radius: 4px; overflow: hidden; margin-bottom: .2rem;
  background: var(--pico-card-sectioning-background-color);
}
.fitbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--fit-a), var(--fit-b)); }
.fitlabel { font-size: .72rem; color: var(--pico-muted-color); }
.fitlabel b { color: var(--pico-color); font-variant-numeric: tabular-nums; }

/* ── 논문 적합도 패널 ─────────────────────────────────── */
.paperfit { border-color: var(--pico-primary-border, var(--pico-muted-border-color)); }
#paper-text { font-size: .84rem; resize: vertical; margin-bottom: 0; }
.paperfit-actions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.paperfit-actions > * { margin-bottom: 0; }
button.primary {
  --pico-font-size: .84rem; width: auto; padding: .5rem 1.1rem; margin-bottom: 0; font-weight: 600;
}
.paper-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .9rem; }
@media (max-width: 720px) { .paper-top { grid-template-columns: 1fr; } }
.ptcard {
  background: var(--pico-card-sectioning-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); padding: .75rem .9rem; position: relative;
}
.ptcard .rank {
  position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(90deg, var(--fit-a), var(--fit-b)); color: var(--oc-gray-0);
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ptcard .ptname { font-weight: 600; font-size: .84rem; margin-bottom: .25rem; }
.ptcard .ptmeta { color: var(--pico-muted-color); font-size: .76rem; }
.ptcard .ptterms { margin-top: .35rem; font-size: .72rem; color: var(--fit-a); }

footer {
  padding: 1.1rem 1.75rem 1.9rem; color: var(--pico-muted-color);
  font-size: .76rem; border-top: 1px solid var(--pico-muted-border-color);
}
footer p { margin-bottom: .4rem; }
footer .muted { color: var(--pico-muted-color); opacity: .8; }

.empty { padding: 1.9rem; text-align: center; color: var(--pico-muted-color); }

/* icon 레이어 — 이모지 대체(플랫폼 편차 제거 + currentColor 상속) */
.i { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; stroke-width: 2; }
.card h2 .i { width: .95em; height: .95em; opacity: .85; }

/* ── 모션 배려 ──────────────────────────────────────────────
   이 화면의 움직임은 전부 장식(칩 색 전환, 표 행 호버)이다. 줄여 달라고 선언한
   사용자에게는 끈다 — 정보는 하나도 잃지 않는다. chart-js 는 이미 animation:false 다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 데이터가 없거나 파생값임을 페이지가 스스로 말하는 자리 */
.notice { border-left: 3px solid var(--q3, #e8a33d); }

/* ── 셀 보조 텍스트 클램프 ──────────────────────────────────
   문제는 컬럼 하나가 아니라 **모든 셀의 보조 텍스트가 자유 줄바꿈**이었다는 것이다.
   카테고리 칩("Computer Vision and Pattern Recognition")·상위% 밑 분야명·적합도
   밑 분야 목록이 각각 2~4줄로 감겨 행 하나가 5~8줄이 됐고, 그러면 이 표의 존재
   이유인 **숫자 열을 세로로 훑는 것**이 불가능해진다(눈이 매 행에서 걸린다).
   전문은 이미 title 속성이 갖고 있으므로 화면에서 자르는 것으로 잃는 정보가 없다. */
.catchips { max-width: 268px; }
.catchip { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 순위(6/146) — 백분위의 분모다. 숫자는 작게 죽여 백분위가 먼저 읽히게 한다 */
.rk { color: var(--pico-muted-color); font-size: .8em; white-space: nowrap; }

/* 우측 정렬 숫자 밑의 분야명 — 오른쪽으로 붙인 채 한 줄로 자른다 */
td.num .basis { display: block; max-width: 124px; margin: .1rem 0 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 적합도 밑 분야 목록은 두 줄까지 (한 줄이면 어느 관심분야가 걸렸는지 안 보인다) */
.fitlabel span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
/* 응답기간 열은 "결정 18.9주"가 단어 중간에서 갈라지던 자리 — <br> 로 준 줄만 나눈다 */
tbody td:last-child { white-space: nowrap; }
a.basis { white-space: nowrap; }
.catchip.more { cursor: help; font-variant-numeric: tabular-nums; }

/* 한글은 기본 줄바꿈 규칙상 **단어 중간에서 갈라진다** — "웨어러블 햅/틱", "소프트-로보/틱스"
   처럼. 어절 단위로만 끊고(keep-all), 대신 끊을 데 없는 긴 라틴 문자열·URL 은 넘치기
   전에 깨지게 남겨 둔다(break-word). 페이지 루트 한 곳에 두면 전 요소가 상속한다. */
:where(body) { word-break: keep-all; overflow-wrap: break-word; }

/* JCR 배지: SCImago 와 한눈에 갈려야 한다 — 같은 줄에 두 체계가 섞이므로 */
.basis.jcr { color: var(--oc-yellow-4); font-weight: 600; }