/* jolab-site — 시안 B "Instrument"
   학술 사이트 톤. 그라디언트·글래스모피즘·이모지 아이콘·스크롤 애니메이션 없음.
   본문 산세리프 + 숫자는 등폭. 라이트/다크 양쪽 설계, 기본은 라이트. */

:root{
  --paper:#ffffff; --panel:#f5f7f8; --ink:#0f1417; --mut:#5c6870; --rule:#e0e5e7;
  --accent:#125e56; --accent-soft:#e6f0ee; --flag:#8a4b1d;
  --bar:#c8d6d3; --bar-hi:#125e56;
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",
         "Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:940px;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#0f1315; --panel:#161c1e; --ink:#e4e9ea; --mut:#909d9f; --rule:#242c2e;
         --accent:#5cbfae; --accent-soft:#132623; --flag:#cf9364;
         --bar:#2b3739; --bar-hi:#5cbfae; }
}
:root[data-theme="dark"]{ --paper:#0f1315; --panel:#161c1e; --ink:#e4e9ea; --mut:#909d9f;
  --rule:#242c2e; --accent:#5cbfae; --accent-soft:#132623; --flag:#cf9364;
  --bar:#2b3739; --bar-hi:#5cbfae; }
:root[data-theme="light"]{ --paper:#ffffff; --panel:#f5f7f8; --ink:#0f1417; --mut:#5c6870;
  --rule:#e0e5e7; --accent:#125e56; --accent-soft:#e6f0ee; --flag:#8a4b1d;
  --bar:#c8d6d3; --bar-hi:#125e56; }

*{ box-sizing:border-box; }
figure{ margin:0; }              /* 브라우저 기본 margin:1em 40px 제거 */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:9; background:var(--paper);
             padding:8px 12px; border:1px solid var(--accent); }

/* ── 헤더 ── */
.site-nav{ border-bottom:1px solid var(--rule); background:var(--panel); }
.site-nav .wrap{ display:flex; flex-wrap:wrap; gap:10px 26px;
                 align-items:center; justify-content:space-between;
                 padding-top:15px; padding-bottom:15px; }
.brand{ font-size:15px; font-weight:650; letter-spacing:-.015em;
        color:inherit; text-decoration:none; }
.brand span{ color:var(--mut); font-weight:450; margin-left:9px; font-size:13px; }
.site-nav ul{ display:flex; flex-wrap:wrap; gap:19px; list-style:none; margin:0;
              padding:0; font-size:13px; }
.site-nav a{ color:var(--mut); text-decoration:none; }
.site-nav a:hover{ color:var(--ink); }
.site-nav a[aria-current]{ color:var(--accent); font-weight:600; }

/* ── 페이지 머리 ── */
.page-head{ padding:30px 0 0; }
h1{ font-size:25px; font-weight:680; letter-spacing:-.025em; margin:0 0 6px;
    text-wrap:balance; }
.page-head .sub{ font-size:13.5px; color:var(--mut); margin:0; }
h2{ font-size:18px; font-weight:660; letter-spacing:-.02em; margin:34px 0 10px; }
h3{ font-size:15px; font-weight:640; margin:22px 0 6px; }
p{ margin:0 0 12px; }
.lead{ font-size:16px; line-height:1.7; max-width:64ch; }

/* ── 지표 + 차트 ── */
.metrics{ display:flex; flex-wrap:wrap; gap:12px; padding:22px 0 6px; align-items:start; }
.metrics .m{ flex:1 1 104px; background:var(--panel); border:1px solid var(--rule);
             border-radius:7px; padding:11px 13px 12px;
             display:flex; flex-direction:column; gap:4px; }
.metrics dt{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
             color:var(--mut); }
.metrics dd{ margin:0; font-size:25px; font-weight:660; line-height:1;
             font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.chart{ flex:2 1 260px; background:var(--panel); border:1px solid var(--rule);
        border-radius:7px; padding:11px 14px 9px; min-width:0; }
.chart figcaption{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
                   color:var(--mut); margin-bottom:6px; }
.bars{ display:block; width:100%; height:auto; }
.bars rect{ fill:var(--bar); }
.bars rect.hi{ fill:var(--bar-hi); }
.bars text{ font-size:8.5px; fill:var(--mut); font-family:var(--sans); }
.stamp{ font-size:12px; color:var(--mut); padding:12px 0 18px; }

/* ── 논문 표 ── */
.filters{ display:flex; flex-wrap:wrap; gap:7px; padding-bottom:14px; }
.chip{ appearance:none; font:inherit; font-size:12.5px; padding:5px 11px; cursor:pointer;
       border:1px solid var(--rule); background:transparent; color:var(--mut);
       border-radius:20px; text-decoration:none; }
.chip[aria-pressed="true"], .chip.on{ background:var(--accent); border-color:var(--accent);
                                      color:#fff; font-weight:550; }
.tscroll{ overflow-x:auto; border-top:1px solid var(--rule); }
table.pubs{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:600px; }
table.pubs thead th{ text-align:left; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut); font-weight:600; padding:11px 10px;
  border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; }
table.pubs th.num, table.pubs td.num{ text-align:right; }
table.pubs tbody td{ padding:13px 10px; border-bottom:1px solid var(--rule);
                     vertical-align:top; }
table.pubs tbody tr:hover{ background:var(--panel); }
td.yr{ font-variant-numeric:tabular-nums; color:var(--mut); white-space:nowrap; width:52px; }
.pubs .t{ font-weight:560; line-height:1.45; margin:0 0 3px; letter-spacing:-.005em; }
.pubs .t a{ color:inherit; text-decoration:none; }
.pubs .t a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.pubs .a{ font-size:12.5px; color:var(--mut); line-height:1.5; margin:0; }
.pubs .a b{ color:var(--ink); font-weight:620; }
.pubs .v{ font-size:12.5px; margin:2px 0 0; line-height:1.5; }
.pubs .v em{ font-style:italic; color:var(--mut); }
td.role{ width:82px; }
.rchip{ display:inline-block; font-size:10.5px; padding:2px 7px; border-radius:4px;
        background:var(--accent-soft); color:var(--accent); font-weight:600;
        white-space:nowrap; }
td.cit{ width:74px; font-variant-numeric:tabular-nums; font-family:var(--mono);
        font-size:14px; }
td.cit.none{ color:var(--mut); }
tr.grp td{ background:var(--panel); font-size:10.5px; letter-spacing:.08em;
           text-transform:uppercase; color:var(--mut); font-weight:600; padding:8px 10px; }
tr.grp .fl{ color:var(--flag); }
.note{ font-size:12px; color:var(--mut); padding:14px 0 0; }

/* ── 일반 목록(연구/사람/강의/발표) ── */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.rows > li{ padding:14px 0; border-bottom:1px solid var(--rule);
            display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline; }
.rows .k{ flex:0 0 148px; color:var(--mut); font-size:12.5px; }
/* 사진 칸은 고정 폭 별도 열. 사진이 없는 행도 같은 폭을 차지해 정렬이 흐트러지지 않는다. */
.rows .ph{ flex:0 0 56px; align-self:flex-start; }
/* 증명사진 비율(4:5) 유지. 원형·그림자 없이 얇은 테두리만. */
.avatar{ width:56px; height:70px; object-fit:cover; border-radius:3px;
         border:1px solid var(--rule); background:var(--panel); display:block; }
.rows .b{ flex:1 1 320px; min-width:0; }
.rows .b .s{ display:block; color:var(--mut); font-size:12.5px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 0; list-style:none; margin:0; }
.tags li{ font-size:12px; color:var(--mut); border:1px solid var(--rule);
          border-radius:4px; padding:3px 9px; }
.cur{ font-size:10.5px; padding:2px 7px; border-radius:4px; background:var(--accent-soft);
      color:var(--accent); font-weight:600; margin-left:8px; white-space:nowrap; }

/* ── 푸터 ── */
.site-foot{ margin-top:52px; border-top:1px solid var(--rule); background:var(--panel); }
.site-foot .wrap{ padding-top:20px; padding-bottom:28px; font-size:12.5px;
                  color:var(--mut); display:flex; flex-wrap:wrap; gap:6px 24px;
                  justify-content:space-between; }
.site-foot a{ color:var(--mut); }

@media (max-width:640px){
  .wrap{ padding:0 18px; }
  h1{ font-size:22px; }
  .metrics{ gap:8px; }
  .metrics .m{ flex:1 1 0; min-width:0; padding:9px 10px 10px; }
  .metrics dt{ font-size:9.5px; letter-spacing:.05em; }
  .metrics dd{ font-size:21px; }
  .chart{ flex:1 0 100%; }
  .rows .k{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ── 인쇄(=CV 출력) ── */
@media print{
  .site-nav, .site-foot, .filters, .stamp{ display:none; }
  body{ font-size:11pt; color:#000; background:#fff; }
  .wrap{ max-width:none; padding:0; }
  a{ color:#000; text-decoration:none; }
  table.pubs{ min-width:0; }
  tr, li{ break-inside:avoid; }
}