/* BASIC css start */
/* ═══════════════════════════════════════════════════════════
   THELAB BEAKER · page.1618.css · v11
   연구자용 정보 밀도형 리스트 레이아웃
   ═══════════════════════════════════════════════════════════ */

.bk-wrap{
  --ink:#1a1a1a; --paper:#ffffff; --mute:#8a8a8a; --faint:#e5e3dc; --navy:#0C025B;
  --c-matter:#E8554E; --c-life:#00A878; --c-energy:#FF8C42; --c-tech:#5A5DD8; --c-science:#8B6FB8;
  --f:"Inter","Pretendard",-apple-system,system-ui,sans-serif;
  max-width:1200px; margin:0 auto; padding:0 20px 80px;
  font-family:var(--f); color:var(--ink); background:var(--paper); box-sizing:border-box;
}
.bk-wrap *{box-sizing:border-box}

/* 분야별 색 */
.bk-cat-matter{--c:var(--c-matter)}
.bk-cat-life{--c:var(--c-life)}
.bk-cat-energy{--c:var(--c-energy)}
.bk-cat-tech{--c:var(--c-tech)}
.bk-cat-science{--c:var(--c-science)}

/* ── 헤더 ── */
.bk-top{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:34px 0 14px; border-bottom:2px solid var(--ink)}
.bk-brand .b{display:block; font-size:26px; font-weight:300; letter-spacing:-.02em; line-height:1.1}
.bk-brand .b b{font-weight:800}
.bk-brand em{display:block; margin-top:5px; font-style:normal; font-size:12px; color:var(--mute)}
.bk-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--mute); letter-spacing:.04em; text-transform:uppercase}
.bk-meta span+span::before{content:'·'; margin-right:8px; color:var(--faint)}
.bk-meta b{color:var(--ink); font-weight:700}

/* ── 시그니처 라인 ── */
.bk-sigline{display:flex; height:3px; margin-bottom:22px}
.bk-sigline div{flex:1}
.bk-sigline .s1{background:var(--c-matter)}
.bk-sigline .s2{background:var(--c-life)}
.bk-sigline .s3{background:var(--c-energy)}
.bk-sigline .s4{background:var(--c-tech)}
.bk-sigline .s5{background:var(--c-science)}

/* ── 검색 ── */
.bk-search{margin-bottom:26px}
.bk-search .form{display:flex; border:2px solid var(--ink); border-radius:2px; overflow:hidden}
.bk-search input{flex:1; min-width:0; padding:13px 15px; border:0; outline:0; background:transparent; font-family:var(--f); font-size:14px; color:var(--ink)}
.bk-search input::placeholder{color:var(--mute)}
.bk-search button{padding:0 24px; border:0; cursor:pointer; white-space:nowrap; background:var(--ink); color:#fff; font-family:var(--f); font-size:13px; font-weight:700}
.bk-search button:hover{background:var(--navy)}
.bk-search .hot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px}
.bk-search .hot .lab{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.bk-search .chips{display:flex; gap:6px; flex-wrap:wrap}
.bk-search .chips a{padding:4px 10px; border:1px solid var(--faint); border-radius:999px; font-size:11.5px; color:#555; text-decoration:none; transition:.12s}
.bk-search .chips a:hover{border-color:var(--navy); color:var(--navy); background:#f7f7fb}

/* ── 2컬럼 ── */
.bk-main{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:34px; align-items:start}

/* ── 필터 ── */
.bk-filter{border:1px solid var(--faint); border-radius:3px; padding:11px 14px; margin-bottom:18px; background:#fbfbfa}
.fl-row{display:flex; align-items:center; gap:11px}
.fl-row+.fl-row{margin-top:8px; padding-top:8px; border-top:1px dashed var(--faint)}
.fl-lab{flex-shrink:0; width:30px; font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--mute)}
.fl-tabs{display:flex; gap:5px; flex-wrap:wrap}
.fl-tabs button{padding:5px 11px; border:1px solid var(--faint); border-radius:2px; background:#fff; cursor:pointer; font-family:var(--f); font-size:12px; color:#555; transition:.12s; white-space:nowrap}
.fl-tabs button:hover{border-color:#bbb}
.fl-tabs button.on{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:700}
.fl-tabs.sm button{padding:4px 9px; font-size:11px}

/* ── 리스트 헤더 ── */
.bk-listhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:9px; margin-bottom:2px; border-bottom:2px solid var(--ink)}
.bk-listhead h2{margin:0; font-size:15px; font-weight:800; letter-spacing:-.01em}
.bk-listhead .cnt{font-size:11px; color:var(--mute); letter-spacing:.03em}

/* ── 뉴스 리스트 ── */
.bk-list{list-style:none; margin:0; padding:0}
.bk-list .row{border-bottom:1px solid var(--faint)}
.bk-list .rl{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:13px; align-items:start; padding:15px 4px; text-decoration:none; color:inherit; transition:background .12s}
.bk-list .rl:hover{background:#fafafa}
.bk-list .rl:hover .rtitle{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
.rcat{grid-row:1/3; display:inline-block; padding:3px 0; width:64px; border-top:2px solid var(--c,var(--mute)); font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--c,var(--mute))}
.rbody{min-width:0}
.rtitle{display:block; font-size:14.5px; font-weight:700; line-height:1.45; letter-spacing:-.01em; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rsum{display:block; margin-top:4px; font-size:12.5px; line-height:1.55; color:#666; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rmeta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; font-size:11px; color:var(--mute)}
.rmeta b{color:#444; font-weight:600}
.rmeta .sep{color:var(--faint)}
.rmeta .lang{padding:1px 5px; border-radius:2px; font-size:9px; font-weight:700; letter-spacing:.04em}
.rmeta .lang.ko{background:#eef2ff; color:#3538cd}
.rmeta .lang.en{background:#f4f4f5; color:#71717a}
.rmeta .sc{color:#b0b0b0; letter-spacing:.03em}
.rthumb{width:96px; height:66px; overflow:hidden; border-radius:2px; background:#f2f2f0; flex-shrink:0}
.rthumb img{width:100%; height:100%; object-fit:cover; display:block}

/* 스켈레톤 */
.bk-skel{height:84px; border-bottom:1px solid var(--faint); background:linear-gradient(90deg,#fafafa 25%,#f0f0f0 50%,#fafafa 75%); background-size:200% 100%; animation:bk-sh 1.4s ease-in-out infinite}
@keyframes bk-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 더보기 */
.bk-more-wrap{margin-top:22px; text-align:center}
.bk-more{padding:12px 44px; border:1.5px solid var(--ink); border-radius:2px; background:#fff; cursor:pointer; font-family:var(--f); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink); transition:.12s}
.bk-more:hover{background:var(--ink); color:#fff}
.bk-more:disabled{opacity:.5; cursor:default}
.bk-end{font-size:11.5px; color:var(--mute); letter-spacing:.04em}

/* ── 사이드바 ── */
.bk-sticky{position:sticky; top:88px}
.side-block+.side-block{margin-top:26px}
.side-block .sh{margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--ink); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.side-block .sh em{display:block; margin-top:3px; font-style:normal; font-size:10.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--mute)}
.side-block .stat{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; font-size:10.5px; color:var(--mute); letter-spacing:.03em}
.side-block .stat b{font-size:14px; font-weight:800; color:var(--c-matter)}
.side-list{list-style:none; margin:0; padding:0}
.side-list li{display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dotted var(--faint); font-size:12px; line-height:1.4}
.side-list li:last-child{border-bottom:0}
.side-list li.clickable{cursor:pointer}
.side-list li.clickable:hover .nm{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
.side-list .n{flex-shrink:0; width:15px; font-size:9.5px; font-weight:700; color:#c4c4c4; letter-spacing:.02em}
.side-list .nm{flex:1; min-width:0; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-list .c{flex-shrink:0; font-size:11px; color:var(--mute); font-variant-numeric:tabular-nums}
.side-list .d{flex-shrink:0; font-size:10.5px; font-weight:700; color:var(--c-matter)}

/* 분야별 막대 */
.side-list.bars li{display:block; padding:7px 0}
.bars .brow{display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:4px}
.bars .bnm{font-size:11.5px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bars .bct{font-size:10.5px; color:var(--mute); font-variant-numeric:tabular-nums; flex-shrink:0}
.bars .btrack{height:3px; background:#f0efec; border-radius:2px; overflow:hidden}
.bars .bfill{height:100%; background:var(--c,var(--navy)); border-radius:2px}

.phx{color:#c0c0c0; font-size:11.5px; letter-spacing:.02em}

/* ── 반응형 ── */
@media (max-width:1023px){
  .bk-main{grid-template-columns:1fr; gap:38px}
  .bk-sticky{position:static}
  .side-block+.side-block{margin-top:22px}
}
@media (max-width:767px){
  .bk-wrap{padding:0 15px 56px}
  .bk-top{padding:24px 0 12px}
  .bk-brand .b{font-size:21px}
  .bk-list .rl{grid-template-columns:52px minmax(0,1fr); gap:10px; padding:13px 2px}
  .rcat{width:52px; font-size:8.5px}
  .rthumb{display:none}
  .rtitle{font-size:13.5px}
  .rsum{font-size:12px}
  .bk-search button{padding:0 16px}
  .fl-row{align-items:flex-start}
  .fl-lab{padding-top:5px}
}
/* BASIC css end */