/* Atorni /notes — "From our lawyers" 표면.
 * 새 사이트 어휘 재사용: 머리(.s-ctop)·태그 칩(.s-ctag)·마무리(.s-final)는 /cases 와 같다.
 * 여기서 새로 정하는 것 = 글 목록 행과 본문 활자.
 */

/* ── 목록 ────────────────────────────────────────────────── */
/* [대표님 2026-08-05] 한 줄 = 글쓴이 얼굴 + [분야 칩 · 제목 · 이름·날짜].
 * 요약문은 뺐다(제목이 이미 말한다). 좁은 화면에선 얼굴이 위로 올라간다. */
.site .s-nlist { display: grid; }
.site .s-nrow {
  display: flex; gap: 18px; align-items: flex-start;
  text-decoration: none; color: inherit;
  padding: 30px 0; border-bottom: 1px solid var(--s-line);
}
.site .s-nlist .s-nrow:first-child { padding-top: 6px; }
.site .s-nrow-b { min-width: 0; flex: 1 1 auto; }
.site .s-nrow:hover .s-nrow-t { color: var(--s-forest); }

/* 얼굴 — 사람이 썼다는 것이 이 탭의 요지. */
.site .s-navatar {
  width: 54px; height: 54px; border-radius: 100px; object-fit: cover;
  flex: 0 0 auto; margin-top: 4px; background: var(--s-mist);
}

/* 분야 칩은 여러 개일 수 있다(예: family + visa). */
.site .s-ntags { display: flex; gap: 6px; flex-wrap: wrap; }

.site .s-nrow-t {
  font-family: var(--s-serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 31px); letter-spacing: -.015em; line-height: 1.14;
  margin-top: 12px; max-width: 40ch;   /* 舊 26ch — 제목이 이르게 접혔다 */
}

/* 글쓴이·날짜 — 사람이 썼다는 것이 이 탭의 요지라 항상 붙는다. */
.site .s-nmeta { font-size: 13.5px; color: var(--s-ink-45); margin-top: 12px; }
@media (max-width: 560px) {
  .site .s-nrow { flex-direction: column; gap: 12px; }
  .site .s-navatar { width: 44px; height: 44px; margin-top: 0; }
}

/* ── 글 한 편 ────────────────────────────────────────────── */
.site .s-nspacer { padding-top: 34px; }      /* 상세엔 큰 머리가 없다 — 헤더와의 간격만 */
.site .s-nback {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--s-ink-45); margin-bottom: 26px;
}
.site .s-nback:hover { color: var(--s-forest); }

.site .s-note-t {
  font-family: var(--s-serif); font-weight: 400;
  font-size: clamp(33px, 5.4vw, 50px); letter-spacing: -.02em; line-height: 1.06;
  margin-top: 16px; max-width: 22ch;
}
.site .s-note-lead {
  font-size: 19.5px; line-height: 1.6; color: var(--s-ink);
  margin-top: 28px; padding-bottom: 30px; border-bottom: 1px solid var(--s-line);
  max-width: 62ch;
}
.site .s-note-p {
  color: var(--s-ink-70); font-size: 17px; line-height: 1.72;
  margin-top: 22px; max-width: 66ch;
}

/* 사진 — 원고에 있던 자리 그대로. 캡션이 무엇을 보고 있는지 말한다.
   [대표님 2026-08-06] 소제목으로 토막내지 않고, 사진이 글의 마디 역할을 한다. */
.site .s-nfig { margin: 34px 0 0; max-width: 66ch; }
.site .s-nfig img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-mist);
}
.site .s-nfig figcaption {
  margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--s-ink-45);
}

/* 고지 — 읽히되 본문과 섞이지 않게. */
.site .s-note-disc {
  margin-top: 54px; padding: 22px 24px; border-radius: 10px;
  background: var(--s-sage); color: var(--s-ink-70); font-size: 14px; line-height: 1.6;
}

/* ── 글이 없을 때 ────────────────────────────────────────── */
.site .s-nempty { padding: 18px 0 8px; }
.site .s-nempty p { color: var(--s-ink-70); font-size: 18px; max-width: 52ch; }
.site .s-nempty .s-btn { margin-top: 26px; }

.site .s-final { margin-top: 70px; }