/* ── NOTES 연재 ──────────────────────────────────────────
   교육 과정(/lab/)과 뼈대를 공유한다. learn.css 를 먼저 불러오고
   이 파일에는 '날짜순으로 쌓이는 목록' 에만 필요한 것을 둔다.
   과정은 체계, 연재는 기록 — 그래서 목록 모양이 다르다. */

/* 목록 */
.n-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.n-item {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; text-decoration: none;
  transition: border-color .2s, transform .15s;
}
.n-item:hover { border-color: var(--accent); transform: translateY(-2px); }

.n-date {
  font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .08em;
  color: var(--text3); text-align: center; flex-shrink: 0; width: 56px; padding-top: 2px;
}
.n-date b { display: block; font-size: 21px; color: var(--text2); letter-spacing: 0; }
.n-item:hover .n-date b { color: var(--accent); }

.n-body { min-width: 0; flex: 1; }
.n-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; color: var(--text3); border: 1px solid var(--border2);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 9px;
}
/* 난이도 — 처음이어도 됨(초록) · 어려움(주황). 글마다 posts.json 의 level (2026-09-26) */
.n-level { margin-left: 4px; }
.n-level.easy { color: var(--green); border-color: rgba(74,222,128,.35); }
.n-level.hard { color: var(--amber); border-color: rgba(251,191,36,.4); }
.n-item h3 { font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; word-break: keep-all; }
.n-item p { font-size: 13px; color: var(--text3); line-height: 1.75; word-break: keep-all; }

/* 아직 한 편도 없을 때 */
.n-empty {
  border: 1px dashed var(--border2); border-radius: 14px; padding: 30px 24px;
  text-align: center; font-size: 13.5px; color: var(--text3); line-height: 1.9;
}

/* 글 머리의 날짜·분류 줄 */
.n-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--text3); margin-top: 14px;
}
.n-meta .dot { color: var(--text4); }

/* 출처 — 연재는 조사해서 쓰는 글이라 근거를 반드시 남긴다 */
.srcs { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); }
.srcs b {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; color: var(--text4); margin-bottom: 10px;
}
.srcs ol { padding-left: 20px; }
.srcs li { font-size: 12.5px; color: var(--text3); line-height: 1.9; word-break: break-all; }
.srcs a { color: var(--text2); }
.srcs a:hover { color: var(--accent); }

/* 과정으로 건너가는 띠 — 연재에서 다룬 것이 어느 편과 이어지는지 */
.to-course {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; transition: border-color .2s;
}
.to-course:hover { border-color: var(--green); }
.to-course .tc-k {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .18em;
  color: var(--green); flex-shrink: 0;
}
.to-course .tc-t { font-size: 13px; color: var(--text2); line-height: 1.7; word-break: keep-all; }
.to-course .tc-go { margin-left: auto; color: var(--text3); flex-shrink: 0; }
.to-course:hover .tc-go { color: var(--green); }

@media (max-width: 768px) {
  .n-item { gap: 14px; padding: 17px 18px; }
  .n-date { width: 46px; }
  .n-date b { font-size: 18px; }
  .to-course { flex-wrap: wrap; }
}


/* ── 영상 인용 ────────────────────────────────────────────
   유튜브·쇼츠·릴스 쪽이 공식 문서보다 빠를 때가 많다. 다만 그대로 옮기지 않고
   확인한 것만 본문에 적고, 영상은 '어디서 봤는지' 로만 건다.
   iframe 을 박지 않는 이유 — 쪽이 무거워지고 남의 추적 코드가 따라 들어온다.
   섬네일 한 장과 링크면 충분하다. */
.vid {
  display: flex; align-items: center; gap: 15px; margin: 0 0 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; text-decoration: none; transition: border-color .2s, transform .15s;
}
.vid:hover { border-color: var(--red); transform: translateY(-2px); }
.vid img {
  width: 132px; height: 74px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); flex-shrink: 0; display: block;
}
.vid .v-tx { min-width: 0; }
.v-k {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; color: var(--red); margin-bottom: 5px;
}
.v-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.55; word-break: keep-all; }
.v-c { display: block; font-size: 11.5px; color: var(--text3); margin-top: 5px; }

/* 근거 등급 — 교육 과정 L2·02 의 확인/추정/모름을 연재에도 그대로 쓴다 */
.ev {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; border-radius: 4px; padding: 2px 7px; margin-right: 6px;
  vertical-align: 1px;
}
.ev.ok   { color: var(--green); background: rgba(74,222,128,.1);  border: 1px solid rgba(74,222,128,.28); }
.ev.maybe{ color: var(--amber); background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.28); }
.ev.no   { color: var(--red);   background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.28); }

@media (max-width: 768px) {
  .vid { gap: 12px; padding: 11px 12px; }
  .vid img { width: 104px; height: 58px; }
}