/* 세무시선 카드 (fragments/sisun-card.html 전용) — 홈(index)과 목록(/sisun)이 **함께 링크**하는
   유일한 공유 CSS다. 홈은 home.css와, 목록은 sisun.css와 나란히 실리므로 여기 셀렉터는 전부
   `.sisun-card2*` 아래로 스코프한다 — .sisun-cat·.sisun-avatar는 양쪽 파일에 기본값이 따로
   있고, 카드 안에서는 여기 스코프 규칙이 이긴다.

   구조(D-724): [커버] → 제목 → (우측) [프로필사진] 세무사명 → 요약 → 날짜 · 분야 칩.
   반응 수(좋아요·댓글)는 카드에 없다 — hot 정렬 내부 계산은 그대로다.
   [세무사 기고]·「샘플」 배지도 없다(2026-08-09 사용자 지시 — 아래 커버 항목 참고).

   ⚠ 홈에서는 격자가 아니라 **좌우 화살표 레일**이다 — 그 규칙만 home.css의
     `.sisun-rail .sisun-grid2`에 따로 있다(목록 /sisun은 여기 격자 그대로).

   ⚠ dev 서버는 CSS를 build/resources/main에서 읽는다 — `./gradlew processResources` 없이는
     이 파일을 고쳐도 화면이 그대로다(D-180 ⑤). */

/* ── 격자 — 홈·목록 공통 한 행 2카드, 좁은 화면 1카드 ─────────────── */
.sisun-grid2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 768px) { .sisun-grid2 { grid-template-columns: 1fr; } }

/* ── 카드 골격 ───────────────────────────────────────────
   🔴 **카드 높이를 고정한다**(D-354). hover에서 «글이 몇 줄 더 펼쳐지고 이미지가 줄어드는»
      움직임은 높이가 고정돼 있어야 성립한다 — 높이가 자유로우면 글이 늘어난 만큼 카드가
      길어지고, 격자의 다른 카드까지 밀려 화면이 출렁인다(그것이 hover 효과의 실패 모양이다).
      그래서 사진(.sisun-card2-media)이 `flex:1`로 **남는 높이를 먹고**, 글이 늘면 그만큼
      사진이 스스로 줄어든다. 값을 고칠 때는 사진 최소 높이(min-height)를 함께 봐라.
   ⚠ min-width:0 — 제목은 세무사가 쓰는 자유 입력이라 안 끊기는 긴 낱말이 들어올 수 있다.
     격자 칸의 기본 min-width는 auto라 그대로 두면 페이지가 가로로 스크롤된다. */
.sisun-card2 {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  height: 420px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  color: inherit; transition: border-color .15s ease, background .15s ease;
}
/* 그림자를 넣지 않는다 — 홈의 모든 카드와 같은 규칙(D-167·D-168), hover는 테두리로만. */
.sisun-card2:hover { border-color: var(--grey300); background: var(--grey50); }

/* ── 커버(이미지 또는 분야색 플레이스홀더) ─────────────────────
   aspect-ratio를 쓰지 않는다 — 높이가 고정된 카드에서 비율까지 고정하면 둘이 싸운다.
   대신 남는 높이를 전부 먹되(flex:1) 아래 최소치 밑으로는 안 줄어든다. */
.sisun-card2-media {
  position: relative; background: var(--grey100);
  flex: 1 1 auto; min-height: 96px; overflow: hidden;
}
.sisun-card2-cover { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 커버가 없을 때의 플레이스홀더 — 분야명 타이포 + 은은한 그라데이션. 외부 이미지 금지. */
.sisun-card2-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.sisun-card2-ph-label {
  font-size: 16px; font-weight: 800; letter-spacing: .08em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 분야 9종 톤 — 인덱스는 SisunPost.toneIndex()(= AppConstants.SPECIALTIES 자리 순서)다.
   앱 `sisunToneOf`(lib/features/sisun/sisun_card.dart)와 **같은 자리·같은 계열**이어야
   한다(D-135) — 같은 글이 웹과 앱에서 다른 색 지면에 서면 안 된다. */
.sisun-ph-0 { background: linear-gradient(135deg, #E8F3FF, #D6E9FF); } .sisun-ph-0 .sisun-card2-ph-label { color: #1B64DA; }
.sisun-ph-1 { background: linear-gradient(135deg, #EDEEFF, #DEE1FF); } .sisun-ph-1 .sisun-card2-ph-label { color: #4F46E5; }
.sisun-ph-2 { background: linear-gradient(135deg, #E6FAF5, #D2F3E9); } .sisun-ph-2 .sisun-card2-ph-label { color: #0E9F6E; }
.sisun-ph-3 { background: linear-gradient(135deg, #FFF3E8, #FFE7D1); } .sisun-ph-3 .sisun-card2-ph-label { color: #C2410C; }
.sisun-ph-4 { background: linear-gradient(135deg, #F5EEFF, #EADDFE); } .sisun-ph-4 .sisun-card2-ph-label { color: #7C3AED; }
.sisun-ph-5 { background: linear-gradient(135deg, #EFF8E9, #E0F1D6); } .sisun-ph-5 .sisun-card2-ph-label { color: #4D7C0F; }
.sisun-ph-6 { background: linear-gradient(135deg, #EEF2F6, #E2E8F0); } .sisun-ph-6 .sisun-card2-ph-label { color: #475569; }
.sisun-ph-7 { background: linear-gradient(135deg, #FFEDF2, #FFDDE7); } .sisun-ph-7 .sisun-card2-ph-label { color: #DB2777; }
.sisun-ph-8 { background: linear-gradient(135deg, #FFF8E1, #FFF0C6); } .sisun-ph-8 .sisun-card2-ph-label { color: #B45309; }

/* ── 커버 위 라벨(지면 성격·샘플)은 **없어졌다** (2026-08-09 사용자 지시) ─────────
   [세무사 기고]·「샘플」 배지를 카드에서 뺐다 → `.sisun-card2-flags` 규칙도 함께 지웠다
   (조각과 CSS는 항상 함께 고친다는 이 파일의 규칙). 되살릴 일이 생기면 조각
   (fragments/sisun-card.html)과 여기, 그리고 렌더 테스트 셋을 함께 되돌려라.
   ⚠ 상세 화면(sisun-detail.html)의 `.sisun-kind`·`.sisun-sample`은 **그대로 산다** —
     기본값은 sisun.css에 있고 이번 삭제와 무관하다.
   ⚠ 샘플 글의 **동선 차단**(커버·저자 사진·프로필 링크)은 코드에 그대로다. 표시만 뺐다. */

/* ── 본문 ───────────────────────────────────────────────
   flex:none — 글 영역은 **자기 내용만큼만** 차지한다. 여기에 flex:1을 주면 남는 높이를
   글이 먹어 사진이 늘 최소치가 되고, hover에서 사진이 줄어드는 움직임이 사라진다. */
.sisun-card2-body {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 0 0 auto;
}
/* 읽은 글 표시 (D-392) — Q&A(D-370)와 같은 계약: 기본선은 :visited(JS 없이 동작),
   is-read는 localStorage 이중 덮개(팝업이 이동을 가로채고 임베디드가 :visited를 침묵시키는
   환경을 받친다 — 기록은 sisun-modal.js(팝업)·sisun-confirm.js(상세)가 남긴다).
   ⚠ :visited에는 색 계열만 허용된다(프라이버시 제약) — 제목 색만 죽인다. */
.sisun-card2:visited .sisun-card2-title { color: var(--text-tertiary); }
.sisun-card2.is-read .sisun-card2-title { color: var(--text-tertiary); }

/* 🔴 **글 영역의 높이를 예약한다**(D-723, 사용자 지적: 「왼쪽 글과 오른쪽 글의 이미지 높이가 서로
      다르게 보인다」). 카드 높이는 420으로 고정이고 커버가 «남는 높이»를 먹으므로, 글 영역이
      내용에 따라 달라지면 그 차이가 그대로 커버 높이 차이가 된다 — 제목 1줄/2줄(±23.8px),
      요약 1줄/2줄(±21.7px), 요약 없음(−51px)이 실측 원인이었다.
      그래서 제목은 **항상 2줄 높이**, 요약은 **항상 2줄 높이**, 바닥 줄은 **칩 높이**를 예약한다.
      내용이 짧아도 자리는 같아 커버가 모든 카드에서 같은 높이(2열 기준 약 215px)로 선다.
      hover의 «요약이 펼쳐지고 커버가 줄어드는» 움직임은 그대로다 — 예약은 min-height일 뿐이라
      max-height가 자라면 커버는 여전히 그만큼 줄어든다.
   ⚠ 값은 각 요소의 line-height와 **짝**이다(1.4em×2 · var(--sum-lh)×2). 글자 크기나 행간을
     바꾸면 여기도 같이 바꿔라 — 어긋나면 «반 줄 여백»이 생긴다. */
.sisun-card2-title {
  margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.4em * 2);
}

/* ── 요약 — hover하면 몇 줄 더 (D-354) ───────────────────────
   🔴 여기 있는 것은 **세무사가 직접 쓴 요약**이다. 본문 발췌가 아니다(조각 주석 참고).
   ⚠ line-clamp는 애니메이션이 안 된다 — 그래서 **max-height**를 움직이고, 잘리는 자리를
     mask로 흐린다. 두 값(line-height × 줄 수)이 어긋나면 글이 반 줄에서 잘린다. */
.sisun-card2-sum {
  --sum-lh: 1.55em;
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary);
  word-break: break-word; overflow: hidden;
  min-height: calc(var(--sum-lh) * 2);
  max-height: calc(var(--sum-lh) * 2);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  transition: max-height .32s cubic-bezier(.2, .7, .3, 1);
}
/* 카드 전체에 hover — 글자 위가 아니라 카드 어디에 올려도 펼쳐진다. */
.sisun-card2:hover .sisun-card2-sum,
.sisun-card2:focus-visible .sisun-card2-sum {
  max-height: calc(var(--sum-lh) * 6);
}
/* 다 보이면 흐림이 남아 «아직 더 있다»고 거짓말한다 — 펼친 뒤에는 mask를 걷는다. */
.sisun-card2:hover .sisun-card2-sum { -webkit-mask-image: none; mask-image: none; }

/* 🔴 움직임을 줄여 달라고 한 사람에게는 **움직이지 않는다.** 펼침 자체는 남긴다 —
      그건 정보이지 장식이 아니다. */
@media (prefers-reduced-motion: reduce) {
  .sisun-card2-sum { transition: none; }
}
/* 요약이 없는 글의 **빈 자리**(D-723) — 요약과 같은 높이의 빈 판이다. 글자는 한 자도 없다(N5:
   본문 발췌 금지는 그대로 — 이 판은 «자리»이지 «글»이 아니다). 이것이 없으면 요약 없는 카드만
   커버가 51px 높아져 줄이 어긋난다. SisunHomeRenderTest가 요약 수(1)와 빈 판 수(1)를 따로 센다. */
.sisun-card2-blank { margin: 0; min-height: calc(1.55em * 2); font-size: 14px; }
.sisun-card2-date { font-size: 12px; color: var(--text-tertiary); }
.sisun-card2 .sisun-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sisun-card2 .sisun-cat {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 6px; padding: 3px 8px;
}

/* ── 카드 바닥 한 줄 (D-354) — 왼쪽 날짜 · 오른쪽 분야 ─────────────────
   ⚠ margin-top:auto를 걷었다. 카드 높이가 고정되고 사진이 남는 높이를 먹으므로, 글 영역을
     아래로 밀 여백이 없다 — 그대로 두면 요약과 날짜 사이가 벌어진 채 굳는다. */
.sisun-card2-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 4px; min-width: 0;
  min-height: 26px;   /* 분야 칩(22px) + padding-top — 칩이 없는 글도 같은 높이(D-723) */
}
/* 저자 줄 — **제목 아래, 우측 끝**이다(D-724, 사용자 지시). D-354의 «글 위 바이라인»을 뒤집었다:
   제목이 먼저 읽히고 저자는 서명처럼 오른쪽에 붙는다. 사진·이름이 날짜·분야보다 크다는 D-267의
   값은 그대로. 이름은 min-width:0 + 말줄임이라 긴 이름도 사진을 밀어내지 않는다. */
.sisun-card2-author {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0;
}
/* 🔴 22 → **34px**(사용자 지시). 세무시선은 「세무사가 자기 이름으로 쓴 글」이 요점인데,
      저자가 카드에서 가장 작은 요소였다. 사진과 이름이 날짜·분야보다 커야 그 요점이 읽힌다.
   ⚠ 목록 페이지의 상세용 .sisun-avatar(36px, sisun.css)와 값이 가까워졌다 — 그래도 이
     규칙이 이긴다(`.sisun-card2-author` 스코프가 더 구체적이다). 지우지 마라. */
.sisun-card2-author .sisun-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
}
.sisun-card2-author .sisun-avatar-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 14px; font-weight: 700;
}
.sisun-card2-name {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* 좁은 화면에서는 카드가 한 줄에 하나라 조금 낮춰도 된다. */
@media (max-width: 768px) { .sisun-card2 { height: 400px; } }