/* BASIC css start */
/* ═══════════════════════════════════════════════════════════
   THELAB COMM · page.2338.css · v2
   랩커뮤니티 — 연구자용 익명 공유 보드 (정보 밀도형)
   ═══════════════════════════════════════════════════════════ */

.tc-wrap{
  --ink:#1a1a1a; --paper:#ffffff; --mute:#8a8a8a; --faint:#e5e3dc; --navy:#0C025B;
  --c-tmi:#5A5DD8; --c-q:#E8554E; --c-info:#00A878; --c-cry:#FF8C42; --c-news:#8B6FB8; --c-chat:#6b7280;
  --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;
}
.tc-wrap *{box-sizing:border-box}

/* 주제별 색 */
.tc-t-tmi{--c:var(--c-tmi)} .tc-t-q{--c:var(--c-q)} .tc-t-info{--c:var(--c-info)}
.tc-t-cry{--c:var(--c-cry)} .tc-t-news{--c:var(--c-news)} .tc-t-chat{--c:var(--c-chat)} .tc-t-none{--c:#c4c4c4}

/* ── 헤더 ── */
.tc-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)}
.tc-brand .b{display:block; font-size:26px; font-weight:300; letter-spacing:-.02em; line-height:1.1}
.tc-brand .b b{font-weight:800}
.tc-brand em{display:block; margin-top:5px; font-style:normal; font-size:12px; color:var(--mute)}
.tc-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--mute); letter-spacing:.04em; text-transform:uppercase}
.tc-meta span+span::before{content:'·'; margin-right:8px; color:var(--faint)}
.tc-meta b{color:var(--ink); font-weight:700}

/* ── 시그니처 라인 ── */
.tc-sigline{display:flex; height:3px; margin-bottom:22px}
.tc-sigline div{flex:1}
.tc-sigline .s1{background:var(--c-q)} .tc-sigline .s2{background:var(--c-info)} .tc-sigline .s3{background:var(--c-cry)}
.tc-sigline .s4{background:var(--c-tmi)} .tc-sigline .s5{background:var(--c-news)}

/* ── 글쓰기 ── */
.tc-writer{border:2px solid var(--ink); border-radius:3px; padding:14px 16px 12px; margin-bottom:26px; background:#fff}
.tc-writer-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.tc-nick-badge{padding:3px 10px; border-radius:999px; background:var(--navy); color:#fff; font-size:11.5px; font-weight:700}
.tc-nick-help{font-size:11px; color:var(--mute)}
.tc-writer textarea{width:100%; padding:11px 12px; border:1px solid var(--faint); border-radius:2px; font-family:var(--f); font-size:14px; line-height:1.6; color:var(--ink); resize:vertical; outline:none; background:#fcfcfb}
.tc-writer textarea:focus{border-color:var(--navy); background:#fff}
.tc-writer textarea::placeholder{color:#bdbdbd}
.tc-writer-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:9px}
.tc-writer-tags button{padding:4px 10px; border:1px solid var(--faint); border-radius:999px; background:#fff; cursor:pointer; font-family:var(--f); font-size:11.5px; color:#666; transition:.12s}
.tc-writer-tags button:hover{border-color:#bbb}
.tc-writer-tags button.on{background:var(--c,var(--navy)); border-color:var(--c,var(--navy)); color:#fff; font-weight:700}
.tc-writer-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
.tc-file{display:flex; align-items:center; gap:8px; min-width:0}
.tc-file-btn{padding:6px 12px; border:1px solid var(--faint); border-radius:2px; background:#fbfbfa; cursor:pointer; font-size:11.5px; font-weight:600; color:#555; white-space:nowrap}
.tc-file-btn:hover{border-color:var(--navy); color:var(--navy)}
.tc-file-name{font-size:11px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.tc-file-x{border:0; background:none; cursor:pointer; color:var(--mute); font-size:12px; padding:2px 4px}
.tc-file-x:hover{color:var(--c-q)}
.tc-submit{padding:9px 30px; border:0; border-radius:2px; background:var(--ink); color:#fff; cursor:pointer; font-family:var(--f); font-size:13px; font-weight:700; letter-spacing:.02em; transition:.12s; white-space:nowrap}
.tc-submit:hover{background:var(--navy)}
.tc-submit:disabled{opacity:.5; cursor:default}
.tc-img-preview{margin-top:10px}
.tc-img-preview img{max-width:220px; max-height:150px; border-radius:2px; border:1px solid var(--faint); display:block}

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

/* ── 필터 ── */
.tc-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}
.tc-search{margin-left:auto; width:130px; padding:5px 9px; border:1px solid var(--faint); border-radius:2px; font-family:var(--f); font-size:11.5px; outline:none; background:#fff}
.tc-search:focus{border-color:var(--navy)}

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

/* ── 글 리스트 ── */
.tc-list{list-style:none; margin:0; padding:0}
.tc-list .row{border-bottom:1px solid var(--faint)}
.tc-list .rl{display:grid; grid-template-columns:66px minmax(0,1fr) auto; gap:13px; align-items:start; padding:15px 4px; cursor:pointer; transition:background .12s; border:0; width:100%; background:none; text-align:left; font-family:var(--f)}
.tc-list .rl:hover{background:#fafafa}
.tc-list .rl:hover .rtitle{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
.rtag{grid-row:1/3; display:inline-block; padding:3px 0; width:66px; border-top:2px solid var(--c,var(--mute)); font-size:9px; font-weight:800; letter-spacing:.03em; color:var(--c,var(--mute)); word-break:keep-all; line-height:1.3}
.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}
.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 .ic{display:inline-flex; align-items:center; gap:3px}
.rmeta .ic.hot{color:var(--c-q); font-weight:700}
.rthumb{width:76px; height:56px; overflow:hidden; border-radius:2px; background:#f2f2f0; flex-shrink:0}
.rthumb img{width:100%; height:100%; object-fit:cover; display:block}

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

.tc-empty{padding:44px 0; text-align:center}
.tc-empty p{margin:0 0 4px; font-size:13.5px; color:#666; font-weight:600}
.tc-empty span{font-size:11.5px; color:var(--mute)}

/* 더보기 */
.tc-more-wrap{margin-top:22px; text-align:center}
.tc-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; color:var(--ink); transition:.12s}
.tc-more:hover{background:var(--ink); color:#fff}

/* ── 사이드바 ── */
.tc-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-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}
.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-q)}
.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}
.side-list.guide li{display:list-item; padding:5px 0 5px 11px; position:relative; font-size:11.5px; color:#666; line-height:1.6}
.side-list.guide li::before{content:'·'; position:absolute; left:2px; color:var(--mute)}
.side-list.guide a{color:var(--navy); font-weight:600}
.phx{color:#c0c0c0; font-size:11.5px}

/* ── 모달 ── */
.tc-modal-ov{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; padding:24px; overflow-y:auto}
.tc-modal{position:relative; max-width:660px; margin:40px auto; background:#fff; border-radius:3px; padding:26px 28px 24px; box-shadow:0 20px 60px rgba(0,0,0,.3)}
.tc-modal-x{position:absolute; top:12px; right:12px; width:28px; height:28px; border:0; background:none; cursor:pointer; font-size:15px; color:var(--mute); line-height:1}
.tc-modal-x:hover{color:var(--ink)}
.tc-m-tag{display:inline-block; padding:3px 9px; border-radius:2px; background:var(--c,var(--mute)); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.04em}
.tc-m-meta{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:11px 0 14px; font-size:11.5px; color:var(--mute)}
.tc-m-meta b{color:#444; font-weight:600}
.tc-m-content{font-size:14.5px; line-height:1.75; color:#222; white-space:pre-wrap; word-break:break-word}
.tc-m-img{margin-top:14px}
.tc-m-img img{max-width:100%; border-radius:2px; border:1px solid var(--faint); display:block}
.tc-m-actions{display:flex; gap:8px; margin:18px 0; padding-top:14px; border-top:1px solid var(--faint)}
.tc-like{padding:8px 18px; border:1.5px solid var(--faint); border-radius:999px; background:#fff; cursor:pointer; font-family:var(--f); font-size:12.5px; font-weight:700; color:#555; transition:.12s}
.tc-like:hover{border-color:var(--c-q); color:var(--c-q)}
.tc-like.liked{border-color:var(--c-q); color:#fff; background:var(--c-q)}
.tc-m-cmt-head{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding-bottom:7px; border-bottom:1px solid var(--ink); margin-bottom:4px}
.tc-cmt-list{list-style:none; margin:0 0 14px; padding:0}
.tc-cmt-list li{padding:10px 0; border-bottom:1px dotted var(--faint)}
.tc-cmt-list li:last-child{border-bottom:0}
.tc-cmt-nick{font-size:11.5px; font-weight:700; color:var(--navy)}
.tc-cmt-date{font-size:10.5px; color:var(--mute); margin-left:6px}
.tc-cmt-body{margin-top:4px; font-size:13px; line-height:1.6; color:#333; white-space:pre-wrap; word-break:break-word}
.tc-cmt-empty{padding:16px 0; text-align:center; color:#c0c0c0; font-size:11.5px}
.tc-cmt-write{display:flex; gap:7px}
.tc-cmt-write input{flex:1; min-width:0; padding:9px 11px; border:1px solid var(--faint); border-radius:2px; font-family:var(--f); font-size:13px; outline:none}
.tc-cmt-write input:focus{border-color:var(--navy)}
.tc-cmt-write button{padding:0 18px; border:0; border-radius:2px; background:var(--ink); color:#fff; cursor:pointer; font-family:var(--f); font-size:12.5px; font-weight:700; white-space:nowrap}
.tc-cmt-write button:hover{background:var(--navy)}

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