/* 프로필 J2 구역 — 세무시선 · 후기 · 사무실 (D-1009, 사용자 승인 2026-10-20 · 시안 profile-detail-redesign v4 J2 / v5·v6 confirmed()).
   구역은 틀 없이 선다: 머리(작은 영문 머리말 · 제목 · 한 줄 설명 · 오른쪽 «모두 보기») 아래 몸.
   🔴 글자 크기는 토큰만(typography lint). 후기 본문 글자는 profile.css의 --fs-pd-read(18/17, D-1008) 한 곳 — 여기서 덮지 않는다. */

.j2-sec { margin-top: 48px; }
.j2-h { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.j2-place-h { margin-top: 48px; }
.j2-kick { font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.j2-t, .j2-rev .prof-h { margin-top: 4px; font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--fw-semibold); color: var(--text-primary); }
.j2-sub, .j2-rev .prof-h-count { display: block; margin: 2px 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.j2-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  font-size: var(--fs-label2); line-height: var(--lh-label2); font-weight: var(--fw-medium); color: var(--text-secondary); }
.j2-more:hover { color: var(--text-primary); }
.j2-rev .prof-h-row { margin-bottom: 20px; }

/* 세무시선 — 매거진(첫 글 크게 + 목록) */
.j2-ss { scroll-margin-top: calc(var(--topbar-h, 62px) + 12px); }
.j2-mag { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.j2-mag.is-solo { grid-template-columns: minmax(0, 1fr); }
.j2-mag.is-solo .j2-lead { flex-direction: row; }
.j2-mag.is-solo .j2-lead .j2-cover { flex: 0 0 44%; aspect-ratio: 16 / 10; }
.j2-lead { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
  color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.j2-lead:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .06); transform: translateY(-2px); }
.j2-cover { aspect-ratio: 2 / 1; background: var(--grey100); overflow: hidden; }
.j2-cover img, .j2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j2-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #EEF2F6, #E2E8EF);
  color: var(--grey600); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); }
.j2-lead-b { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.j2-lead-t { font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.j2-s { margin-top: 4px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-tertiary);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.j2-lead .j2-s { -webkit-line-clamp: 2; }
.j2-meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.j2-lead .j2-meta { margin-top: auto; padding-top: 14px; }
.j2-react { margin-left: auto; color: var(--text-disabled); }
.j2-cat { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: 6px; background: var(--grey100); color: var(--text-secondary);
  font-size: var(--fs-caption2); line-height: var(--lh-caption2); font-weight: var(--fw-semibold); white-space: nowrap; justify-self: start; }
.j2-list { display: flex; flex-direction: column; justify-content: space-between; }
.j2-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 20px; align-items: center; padding: 18px 0;
  border-top: 1px solid var(--divider); color: inherit; text-decoration: none; }
.j2-row:first-child { border-top: 0; padding-top: 0; }
.j2-row:hover .j2-row-t { color: var(--primary); }
.j2-row-t { margin-top: 8px; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.j2-thumb { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--grey100); }

/* 글이 없을 때 ① 답한 질문 목록 */
.j2-qa { border-top: 1px solid var(--text-primary); }
.j2-qa a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 4px;
  border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.j2-qa a b { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.j2-qa a:hover b { color: var(--primary); }
.j2-qa time { color: var(--text-tertiary); font-size: var(--fs-caption1); line-height: var(--lh-caption1); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 글이 없을 때 ② 안내 판 — 빈 구역이 아니라 «다음에 할 일» */
.j2-invite { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px;
  border-radius: var(--r-xl); background: var(--grey50); border: 1px solid var(--divider); }
.j2-invite-l { min-width: 0; }
.j2-invite-t { display: block; font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); color: var(--text-primary); }
.j2-invite-s { margin-top: 6px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.j2-invite-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.j2-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--border); color: inherit; text-decoration: none; }
.j2-tile:hover { border-color: var(--primary); }
.j2-tile b { font-size: var(--fs-label1); line-height: var(--lh-label1); font-weight: var(--fw-semibold); color: var(--text-primary); }
.j2-tile span { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }

/* 후기 — 카드 격자(1440 세 열). 본문 18/17은 profile.css가 그대로 맡는다. */
.j2-rv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.j2-rv.is-one { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.j2-rv .rev-item, .j2-rv .rev-item:first-of-type, .j2-rv .rev-item:last-of-type {
  display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); }
.j2-rv .rev-by { margin-top: auto; padding-top: 12px; }
.j2-rv .rev-sum { justify-content: center; background: var(--grey50); border-color: var(--divider); }
.j2-rv .rev-sum::before { content: none; }
.j2-rv .rev-sum b { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.j2-rv .rev-sum p { margin-top: 6px; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }

@media (max-width: 900px) {
  .j2-sec, .j2-place-h { margin-top: 36px; }
  .j2-h { margin-bottom: 16px; }
  .j2-mag, .j2-mag.is-solo, .j2-invite, .j2-rv, .j2-rv.is-one { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .j2-mag.is-solo .j2-lead { flex-direction: column; }
  .j2-mag.is-solo .j2-lead .j2-cover { flex: none; aspect-ratio: 2 / 1; }
  .j2-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; }
  .j2-row .j2-s { display: none; }
  .j2-qa a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .j2-invite { padding: 20px; }
  .j2-rv .rev-item, .j2-rv .rev-item:first-of-type, .j2-rv .rev-item:last-of-type { padding: 20px; }
}