/* 사례 노트(옛 성공사례, D-769) — 관리 목록 · 작성 · 고객 승인 · 공개 전체 목록 · 프로필 섹션
   (D-249 P3 · 시안 §5 · 디자인 v1.1 §8).

   ⚠ 색·간격·모서리는 tokens.css 변수만 쓴다(하드코딩 금지 — 프로젝트 규칙 ⑦).
     🔴 틴트 ink는 «틴트 배경 위 11~13px 4.5:1»로 맞춰 둔 값이다. 원색(#F04452·#15C47E 등)으로
        되돌리면 그 대비가 깨진다 — 바꾸려면 대비를 다시 재고 tokens.css 주석을 함께 고쳐라.

   ⚠ 클래스 접두어는 `sc-`(successCase) 하나로 통일한다. 커뮤니티(.pb-*)·세무시선(.sisun-*)과
     섞지 마라 — 세 지면은 규칙이 다르고, 클래스를 공유하면 한쪽 개편이 다른 쪽을 끌고 간다.

   ⚠ 예외 하나: 확인 대화(.sisun-dialog*)와 완료 토스트(.sisun-toast)는 세무시선 조각을 그대로
     쓰므로 해당 화면이 sisun.css를 함께 링크한다. 그 클래스를 여기 복제하지 마라.

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

/* 🔴 커뮤니티와 같은 1080px 캡(v1.1 §7). 전폭 원칙(--content-max: none, D-154)의 예외이며
   새 화면 셋(커뮤니티·성공사례·보관함)에 **한정된** 것이다 — 다른 화면에 복사하지 마라.
   여기는 «읽는 화면»이라 한 줄이 1400px로 늘어나면 눈이 다음 줄 첫 글자를 못 찾는다. */
.sc-sec { max-width: var(--page-max); margin-inline: auto; }

/* ── 머리 ──────────────────────────────────────────────── */
.sc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-sm); flex-wrap: wrap;
}
.sc-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: var(--ls-xl); }
/* 지면 성격 한 줄 — «승인해야 공개된다»가 이 기능의 성립 조건이라 화면에서 늘 말한다. */
.sc-note { margin: 6px 0 0; color: var(--text-secondary); }

.sc-back {
  display: inline-block; margin-bottom: var(--s-md);
  color: var(--text-tertiary); font-size: 13px; text-decoration: none;
}
.sc-back:hover { color: var(--text-secondary); }

/* ── 잠금(승인 대기 세무사) ────────────────────────────────
   구독 잠금 카드(fragments/pro-lock)와 다른 물건이다 — 여기엔 가격이 없다.
   자격 승인 문제를 돈 문제처럼 그리면 화면이 거짓말한다. */
.sc-lock { margin-top: var(--s-xl); padding: var(--s-3xl) var(--s-2xl); text-align: center; }
.sc-lock-ic { font-size: 30px; }
.sc-lock-title { margin: var(--s-md) 0 0; }
.sc-lock-desc {
  margin: var(--s-sm) auto 0; max-width: 460px;
  color: var(--text-secondary); line-height: 1.7;
}
.sc-lock-hint { margin: var(--s-md) 0 var(--s-lg); color: var(--text-tertiary); }

/* ── 상시 안내(웜 톤) ───────────────────────────────────────
   금칙 안내·작성 불가 사유·익명 표기 안내가 같은 그릇을 쓴다. 셋 다 «지금 이 화면에서
   알아야 할 제약»이고, 서로 다른 색을 주면 무엇이 더 중한지 화면이 임의로 말하게 된다. */
.sc-guide {
  margin-top: var(--s-lg);
  padding: 12px 14px;
  background: var(--tint-warm-bg);
  border: 1px solid var(--tint-warm-line);
  border-radius: var(--r-md);
  color: var(--tint-warm-ink);
  font-size: 13px; line-height: 1.7;
}

/* ── 수정 사전 고지 ────────────────────────────────────────
   .sc-guide(웜)와 **다른 그릇**이다. 저건 «쓸 때 지킬 것»이고 이건 «지금 누르면 무엇이
   바뀌는지»다 — 되돌릴 수 없는 쪽이라 파랑 면에 왼쪽 굵은 선으로 한 단계 더 세운다.
   ⚠ 빨강을 쓰지 않는다: 오류가 아니라 **정상 동작의 예고**다. 빨강이면 세무사가 «수정하면
     안 되는 건가»로 읽는다. */
.sc-heads-up {
  margin-top: var(--s-lg);
  padding: 12px 14px;
  background: var(--primary-light);
  border: 1px solid var(--tint-blue-line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  color: var(--primary-pressed);
  font-size: 13px; font-weight: 600; line-height: 1.7;
}

/* 「N일째 기다리는 중」 — 메타 줄에서 날짜와 같은 크기지만 조금 더 진하다.
   색만으로 뜻을 만들지 않는다(규칙 ⑦) — 문구 자체가 이미 상태를 말한다. */
.sc-wait { color: var(--text-secondary); font-weight: 600; }

/* ── 경고어 확인(차단 아님) ──────────────────────────────────
   차단 5어는 서버가 이미 막았고(그때는 공통 error 슬롯으로 되돌아온다) 여기 남는 것은
   «확인하고 갈지»를 고르는 자리다. 그래서 빨강이 아니라 웜이고, 버튼이 함께 있다. */
.sc-warn {
  margin-top: var(--s-lg); padding: var(--s-lg);
  background: var(--tint-warm-bg); border-color: var(--tint-warm-line);
}
.sc-warn-title { font-weight: 700; color: var(--tint-warm-ink); }
.sc-warn-list {
  margin: var(--s-sm) 0 0; padding-left: 18px;
  color: var(--tint-warm-ink); font-size: 13px; line-height: 1.8;
}
/* 확인 체크 — «그대로 보낸다»는 뜻이라 눈에 띄고, 터치로도 충분히 크게(44px 줄 높이). */
.sc-warn-ack {
  display: flex; align-items: center; gap: 8px; margin-top: var(--s-md);
  min-height: 44px; cursor: pointer;
  color: var(--tint-warm-ink); font-size: 13px; font-weight: 600;
}
.sc-warn-ack input { width: 18px; height: 18px; accent-color: var(--tint-warm-ink); flex: 0 0 auto; }
.sc-warn-actions {
  display: flex; gap: var(--s-sm); justify-content: flex-end; margin-top: var(--s-sm);
}
.sc-warn-foot { margin: var(--s-sm) 0 0; color: var(--tint-warm-ink); opacity: .8; }

/* ── 목록 ──────────────────────────────────────────────── */
.sc-empty {
  margin-top: var(--s-lg); padding: var(--s-3xl) var(--s-lg);
  text-align: center; color: var(--text-tertiary);
}
.sc-list { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; gap: var(--s-md); }
.sc-row { padding: var(--s-lg); }
.sc-row-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-row-title {
  display: block; margin-top: 8px;
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  text-decoration: none; line-height: 1.45;
}
a.sc-row-title:hover { text-decoration: underline; }
/* 발췌는 서버가 잘라 보낸 한 줄이다 — line-clamp로만 가리면 본문 전체가 응답에 실린다. */
.sc-row-excerpt {
  margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6;
}
.sc-row-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 10px; color: var(--text-tertiary); font-size: 12px;
}
.sc-dot { color: var(--text-tertiary); }
/* ✓ 고객 승인 — 이 표시가 사례를 읽을 만한 것으로 만든다(초록 ink, 대비 확인된 값). */
.sc-ok { color: var(--tint-green-ink); font-weight: 600; }
.sc-row-actions {
  display: flex; gap: var(--s-sm); flex-wrap: wrap;
  margin-top: var(--s-md); padding-top: var(--s-md);
  border-top: 1px solid var(--border);
}
.sc-row-actions form { margin: 0; }

/* ── 분야 칩 ────────────────────────────────────────────────
   🔴 분야는 9종(AppConstants.SPECIALTIES)이라 톤을 분야마다 나누지 않는다 — 아홉 색이면
      색이 뜻을 잃는다. 분야는 **한 톤(파랑)**이고, 구분은 언제나 문구가 한다. */
.sc-cat {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--primary-light); border: 1px solid var(--tint-blue-line);
  color: var(--primary-pressed); font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* 🔴 `display:inline-block`이 UA의 `[hidden]{display:none}`을 이긴다 — 분야가 빈 사례를
   모달에 올리면 **빈 파란 알약**이 하나 떴다(JS가 catEl.hidden=true로 접어도 소용없었다). */
.sc-cat[hidden] { display: none; }

/* ── 상태 칩 4종 ───────────────────────────────────────────
   🔴 색만으로 상태를 구분하지 않는다(규칙 ⑦) — 칩에는 언제나 문구가 함께 있다.
   ⚠ 톤 이름(blue-line·green·grey)은 서버가 굳혀 내려 준다(SuccessCaseRepository.statusTone).
     화면이 status 문자열을 보고 색을 고르기 시작하면 관리 목록과 승인 화면이 갈린다. */
.sc-state {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary);
}
/* 승인 대기 — **외곽선형**이다(시안 확정). 채워진 파랑으로 두면 분야 칩과 같은 무게로 읽혀
   «아직 공개 안 됨»이라는 사실이 묻힌다. */
.sc-state-blue-line {
  background: transparent; border-color: var(--tint-blue-line); color: var(--primary-pressed);
}
.sc-state-green {
  background: var(--tint-green-bg); border-color: var(--tint-green-line); color: var(--tint-green-ink);
}
/* 운영자 내림(D-252 ⑧) — 저자가 스스로 내린 것(회색)과 **다른 사건**이라 톤을 나눈다.
   회색으로 묶으면 세무사가 "내가 내렸나" 하고 지나친다. 색만으로 구분하지 않는 규칙은 그대로다 —
   칩 문구가 「운영자 내림」이고 바로 아래 줄이 이유를 말한다(.sc-guide). */
.sc-state-red {
  background: var(--tint-red-bg); border-color: var(--tint-red-line); color: var(--tint-red-ink);
}
/* 회색(비공개·내림)은 기본값 그대로 — 빈 규칙을 두지 않는다. */

/* ── 작성 폼 ────────────────────────────────────────────── */
.sc-form { margin-top: var(--s-lg); padding: var(--s-lg); display: grid; gap: var(--s-lg); }
.sc-field { display: block; }
.sc-field > .t-label2 { display: block; margin-bottom: 6px; }
.sc-textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
.sc-hint { display: block; margin-top: 6px; color: var(--text-tertiary); }
/* 수정 화면의 «연결된 상담» — 읽기 전용이라 입력처럼 보이면 안 된다(눌러도 안 바뀐다). */
.sc-fixed {
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface-tint); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 14px;
}
.sc-form-actions {
  display: flex; gap: var(--s-sm); justify-content: flex-end;
  padding-top: var(--s-sm); border-top: 1px solid var(--border);
}

/* ── 고객 승인 화면 ───────────────────────────────────────── */
.sc-approve-by { margin-top: 8px; }
/* 미리보기 — «공개되면 이렇게 보인다»가 이 화면의 전부다. 옅은 파랑 면으로 살짝 띄워
   «지금 화면»과 «공개될 화면»을 눈으로 가른다. */
.sc-preview {
  margin-top: var(--s-lg); padding: var(--s-xl);
  background: var(--surface-tint);
}
.sc-preview-tag {
  margin-bottom: var(--s-md); color: var(--text-tertiary);
  font-size: 12px; font-weight: 600; letter-spacing: var(--ls-sm);
}
.sc-part-h {
  margin: var(--s-lg) 0 var(--s-sm);
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
}
.sc-para { margin: 0 0 10px; line-height: 1.8; color: var(--text-primary); }
.sc-approved-by {
  margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--border);
  color: var(--tint-green-ink); font-size: 13px; font-weight: 600;
}
.sc-decide { margin-top: var(--s-lg); padding: var(--s-lg); }
.sc-decide-note { margin: 0 0 var(--s-md); color: var(--text-secondary); }
.sc-decide-actions { display: flex; gap: var(--s-sm); justify-content: flex-end; flex-wrap: wrap; }
.sc-decide-actions form { margin: 0; }

/* ── 공개 전체 목록 ──────────────────────────────────────── */
.sc-rail {
  display: flex; gap: 7px; margin-top: var(--s-lg);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.sc-rail::-webkit-scrollbar { display: none; }
.sc-chip {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 13px; text-decoration: none; white-space: nowrap;
}
/* «켜짐»은 색 하나가 아니라 배경·테두리·굵기 셋이 함께 바뀐다(규칙 ⑦). */
.sc-chip.on {
  background: var(--primary-light); border-color: var(--tint-blue-line);
  color: var(--primary-pressed); font-weight: 700;
}

.sc-pages {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  margin-top: var(--s-xl);
}
.sc-page {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 13px; text-decoration: none;
}
.sc-page.on {
  background: var(--primary-light); border-color: var(--tint-blue-line);
  color: var(--primary-pressed); font-weight: 700;
}
.sc-page-off { color: var(--text-tertiary); opacity: .5; }

/* ── 프로필(세무사 상세) 섹션 ───────────────────────────────
   🔴 **세로 리스트**다(3열 카드가 아니다 — 시안 확정). 좁은 프로필 컬럼에서 3열이면
      제목이 잘린다. grid-template-columns를 여기에 넣지 마라. */
.sc-prof-list { list-style: none; margin: 0; padding: 0; }
.sc-prof-item { padding: var(--s-md) 0; border-bottom: 1px solid var(--border); }
.sc-prof-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-prof-title { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.sc-prof-excerpt {
  margin: 5px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6;
  /* 프로필 컬럼은 좁다 — 서버가 이미 80자로 잘라 보내지만 좁은 폭에서 두 줄을 넘지 않게 한 번 더 죈다. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-prof-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 7px; color: var(--text-tertiary); font-size: 12px;
}
.sc-prof-more {
  display: inline-block; margin-top: var(--s-md);
  color: var(--primary); font-size: 13px; font-weight: 500; text-decoration: none;   /* 600 → 500(D-759, 후보 8) */
}
.sc-prof-more:hover { text-decoration: underline; }

/* ── 신고 창구 (D-252 ⑧) ───────────────────────────────────
   조각(fragments/sisun-report)과 스타일은 sisun.css가 갖고 있다 — 여기서는 **자리**만 만든다.
   ⚠ 접힌 채로 시작하는 조각이라 여백을 크게 두지 않는다. 신고가 카드 아래에서 먼저 눈에 띄면
     지면이 «사례를 읽는 곳»이 아니라 «신고를 권하는 곳»으로 읽힌다. */
.sc-report-slot { margin-top: var(--s-sm); display: flex; justify-content: flex-end; }
.sc-report-hint {
  margin: var(--s-lg) 0 0; display: flex; gap: 6px; flex-wrap: wrap;
  color: var(--text-tertiary);
}

/* ── 관리자 원문 열람 (D-252 ⑧) ─────────────────────────────
   읽기 전용 화면이다. 조작부 스타일(.btn 묶음)을 여기에 만들지 마라 — 내림·복구는 신고 큐
   한 곳에서만 한다(admin/case-detail.html 주석). */
.sc-orig { margin-top: var(--s-lg); padding: var(--s-xl); }
.sc-orig-title { margin: var(--s-md) 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.sc-orig-flag {
  margin-top: var(--s-md); padding: 10px 12px; border-radius: var(--r-md);
  background: var(--tint-red-bg); border: 1px solid var(--tint-red-line);
  color: var(--tint-red-ink); font-size: 13px; font-weight: 600;
}
/* 식별자 표 — 라벨/값 두 칸. 좁은 화면에서는 한 칸으로 눕는다. */
.sc-orig-meta {
  display: grid; grid-template-columns: 96px 1fr; gap: 6px var(--s-md);
  margin: var(--s-lg) 0 0; padding: var(--s-md) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sc-orig-meta dt { color: var(--text-tertiary); }
.sc-orig-meta dd { margin: 0; color: var(--text-primary); word-break: break-all; }
.sc-orig-part { margin-top: var(--s-xl); }
.sc-orig-h { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
/* 원문은 **전문**이다 — line-clamp로 가리지 마라. 발췌로는 판단할 수 없어서 만든 화면이다. */
.sc-orig-part p { margin: 0 0 10px; line-height: 1.75; white-space: pre-wrap; }
.sc-orig-foot { margin-top: var(--s-lg); }

/* ── 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sc-row-actions, .sc-decide-actions, .sc-form-actions { justify-content: stretch; }
  .sc-row-actions > *, .sc-decide-actions > * { flex: 1 1 auto; }
  .sc-decide-actions .btn { width: 100%; }
  /* 96px 라벨 칸이 좁은 화면에서는 값 칸을 짓눌러 uid가 한 글자씩 끊긴다. */
  .sc-orig-meta { grid-template-columns: 1fr; gap: 2px; }
  .sc-orig-meta dd { margin-bottom: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   성공사례 사진 (D-310) — 작성 폼의 썸네일 줄 + 공개 지면의 캐러셀
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 작성 폼 ───────────────────────────────────────────────────────────── */

.sc-photos { display: flex; flex-direction: column; gap: 8px; }
.sc-photos-hint { color: var(--text-tertiary); margin: 0; }

.sc-photo-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.sc-photo-item { position: relative; width: 96px; height: 96px; }
.sc-photo-thumb {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border); display: block;
}
/* [빼기]는 썸네일 **위**에 앉는다 — 8장이 늘어서면 아래에 버튼 줄이 하나 더 생기고
   그 줄이 어느 사진의 것인지 안 갈린다. */
.sc-photo-x {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 0;
}
.sc-photo-x:hover { color: var(--danger); border-color: var(--danger); }
/* ── 사진 드롭존 (D-463) — 네이티브 입력을 카드 결로. ── */
.sc-drop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px dashed var(--border); border-radius: 16px;
  padding: 20px 16px 16px; text-align: center; background: var(--grey50);
  transition: border-color .15s ease, background .15s ease;
}
.sc-drop.over { border-color: var(--primary); background: var(--primary-light); }
.sc-drop-ico { width: 30px; height: 30px; color: var(--text-tertiary); margin-bottom: 3px; }
.sc-drop-t { font-size: 13.5px; font-weight: 800; }
.sc-drop-s { font-size: 11.5px; color: var(--text-tertiary); }
.sc-photo-input { margin-top: 10px; font-size: 12px; color: var(--text-tertiary); max-width: 100%; }
.sc-photo-input::file-selector-button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
  font: inherit; font-size: 12.5px; font-weight: 800;
  border-radius: 10px; padding: 8px 14px; margin-right: 10px; cursor: pointer;
}
.sc-photo-input::file-selector-button:hover { background: var(--surface-alt); }
.sc-picked { margin-top: 4px; }
.sc-picked-t { color: var(--text-secondary); margin: 0 0 8px; font-weight: 700; }

/* ── 공개 썸네일 줄 (D-311) ────────────────────────────────────────────
   ⚠ 여기 있던 것은 «지면에 박힌 4:3 캐러셀»이었다(D-310). 사례 목록에서 카드마다 큰 사진이
     서니 지면 대부분을 사진이 먹어 제목으로 훑을 수가 없었다(사용자 지시). 지면에는 작은
     썸네일만 두고, 넘겨 보는 일은 팝업(.sc-lb)으로 옮겼다. */

/* 썸네일 스트립·사진 라이트박스(D-311)는 D-420에서 은퇴 — 세 지면(프로필·목록·상세)이
   모두 «대표 한 장 + 캐러셀» 문법(D-419)을 쓴다. */
.sc-lb-count:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-lb-track { scroll-behavior: auto; }
}

/* ── 사례 한 건 공개 상세 (D-320) ──────────────────────────────────────────
   구획 3개(상황·진행·마무리)는 작성 폼의 구획 그대로다 — 쓰는 화면과 읽는 화면이
   같은 말을 해야 한다(SuccessCaseWrite 라벨 참고). */
.sc-body { margin-top: 18px; }
.sc-body-h {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
/* 본문이 주인공 — 목록 발췌(13px)보다 한 단 크게, 줄간을 넉넉히. */
.sc-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.75; color: var(--text-primary); word-break: keep-all; }
.sc-body p:last-child { margin-bottom: 0; }

/* 제목 링크 (D-320) — 파랑으로 칠하지 않는다(카드가 이미 링크투성이가 된다).
   글자색 유지 + 호버에서만 밑줄로 «눌린다»를 말한다. */
.sc-row-link { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) { .sc-row-link:hover { text-decoration: underline; } }

/* ══ 사례 노트 행 (D-729 ①③ · A안 채택) ══════════════════════════════════
   프로필과 전체 목록이 **같은 한 벌**을 쓴다(D-420 문법 통일 — 클래스를 지면별로 가르지 마라).

   무엇이 바뀌었나(옛 D-419 C안 = 좌 16:10 사진 + 우 글): 사례는 이제 «세무사가 직접 쓴
   블로그 글»이다(D-729 ①③). 글이 주인공이라 **사진을 오른쪽 작은 정사각**으로 물리고,
   분야·날짜를 제목 위 한 줄로 모아 「무엇에 대한 언제 글인가」가 제목보다 먼저 읽히게 했다.
   🔴 사진 없는 사례가 흔하다(세무 일은 찍을 게 없다) — 그래서 표지 칸은 **있으면 붙는 것**이고,
      없으면 칸 자체를 접는다. 빈 회색 상자를 세우면 «사진이 빠진 글»처럼 보인다. */
.scv-list { list-style: none; margin: 0; padding: 0; }
.scv-item { border-bottom: 1px solid var(--divider); }
.scv-item:last-child { border-bottom: 0; }
.scv-row {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 0;
  text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.scv-row:hover .scv-title { color: var(--primary-pressed); }
.scv-body { min-width: 0; flex: 1 1 auto; display: block; }
/* 분야·날짜 — 제목 **위** 한 줄. 예전엔 칩이 위, 날짜가 발췌 아래라 한 사례가 세 덩이로 흩어졌다. */
.scv-kick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scv-date { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* 제목 700 → 500(D-759, 후보 8) — 목록형 지면의 굵기 위계는 제목 500 · 보조 400이고 700은 카드 머리(h2)에만
   (design.md §2 · D-549~557). 크기를 반 단(16 → 16.5px) 올려 굵기를 내린 만큼 채운다. */
.scv-title {
  display: block; margin-top: 8px; font-size: 16.5px; font-weight: 500;
  line-height: 1.45; letter-spacing: -.3px; color: var(--text-primary);
}
/* 발췌는 **두 줄**이다 — 서버가 이미 80자로 자르지만(EXCERPT_MAX) 좁은 폭에서 한 번 더 죈다.
   세 줄을 넘기면 행이 카드처럼 커져 «3건이 한눈에»가 깨진다. */
.scv-excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--text-secondary);
}
.scv-cover {
  display: block; position: relative; width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; background: var(--surface-alt);
}
.scv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scv-more {
  position: absolute; right: 5px; bottom: 5px; background: rgba(20, 25, 33, .72);
  color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 6px;
}
@media (max-width: 560px) {
  .scv-row { gap: 12px; }
  .scv-cover { width: 72px; height: 72px; }
  .scv-title { font-size: 16px; }
}

/* ══ 프로필 사례 노트 — E3 «넘버 레일 + 표지» (D-769 사용자 확정 시안 · D-795 표지 키움) ═══════════
   01·02·03 작은 회색 차례 숫자(D-804 — 제목보다 작다) | 큰 굵은 제목 + 얇은 메타(분야 · 날짜) | 우측 4:3 표지 152×114(사진 있을 때만, +N).
   ⚠ 표지는 D-769의 «조용한 80px 썸»에서 D-795(사용자 지시 「분야 서가 타일 정도로 조금 더 크게」)로 키웠다 —
     관리 목록(pro-cases «프로필 거울»)이 이 행을 그대로 쓰므로 두 지면이 함께 커진다. 전체 목록(tax-cases)은 그대로.
   위 D-729 행 규칙 위에 **덮어쓰는 변형**(.scv-e3)이라 전체 목록(tax-cases)은 그대로다.
   ⚠ 제목 700 — 목록형 지면의 «제목 500» 위계(D-759)에서 이 블록만 예외다: 시안이 확정한 편집 레일은 숫자의
     가벼움(300)과 제목의 무게(700)가 짝이라야 리듬이 선다. 칩·파란 필은 쓰지 않는다(분야는 글자로만). */
.prof-cases .prof-h-count { margin-left: 0; }                       /* 「사례 노트 3건」 — 건수는 제목 바로 옆 */
.prof-cases .prof-h-row .sc-prof-more { margin: 0 0 0 auto; }       /* [모두 보기 ›]는 머리 우측 끝 */
.scv-e3 { align-items: center; gap: 18px; padding: 20px 0; }
/* 숫자 < 제목 (D-804, 사용자 지시 「제목이 너무 작다 — 01보다 큰 글씨로」): 레일 숫자는 16px/500 회색 차례표로 물러나고
   제목이 20px/700로 행의 주인이 된다. 프로필 블록과 관리 목록(pro-cases 거울)이 이 행을 같이 쓴다. */
.scv-num {
  flex: 0 0 34px; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: .02em;
  color: var(--grey400); font-variant-numeric: tabular-nums;
}
.scv-e3 .scv-title { margin-top: 0; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.4px; }
.scv-meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 7px; font-size: 13px; color: var(--text-tertiary); }
.scv-meta .scv-cat { font-weight: 600; color: var(--text-secondary); }
.scv-meta .scv-date { font-size: inherit; }
.scv-meta > * + *::before { content: '·'; margin: 0 7px; color: var(--grey400); }
.scv-e3 .scv-cover { width: 152px; height: 114px; border-radius: 12px; }
.scv-e3 .scv-more { right: 6px; bottom: 6px; }
@media (max-width: 560px) {
  .scv-e3 { gap: 14px; padding: 16px 0; }
  .scv-num { flex-basis: 26px; font-size: 14px; }
  .scv-e3 .scv-title { font-size: 18px; }
  .scv-e3 .scv-cover { width: 108px; height: 81px; border-radius: 10px; }
  /* 표지가 커져 본문 열이 좁다(≈160px) — 메타는 분야 / 날짜 두 줄로 세우고 가운뎃점을 걷는다
     (한 줄 강제 시 «·»가 줄머리로 떨어졌다, 390 실측). */
  .scv-e3:has(.scv-cover) .scv-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .scv-e3:has(.scv-cover) .scv-meta > * + *::before { content: none; margin: 0; }
}

/* ══ 사례 노트 열람 모달 — 가운데 카드 (D-729 ④, 사용자 확정) ══════════════
   글은 «잠시 읽는» 것이고 끝은 상담 예약이다(사용자 지시). 그래서
   ① 카드는 **읽기 폭**(본문 600px)으로 좁히고 본문 활자를 키웠다(13px → 16px/1.82).
      13px은 목록 발췌의 크기다 — 그대로 두면 전문(全文)이 «긴 발췌»로 읽힌다.
   ② 닫는 길을 넷 둔다: 머리 ✕ · 바깥(dim) · ESC · 바닥 [닫기].
   ③ 바닥에 [상담 예약하기]를 붙인다(프로필에서만 — 목록 지면엔 예약 모달이 없다).
   🔴 스크롤은 **본문(.scm-scroll)만** 한다. 예전엔 카드 전체가 스크롤 컨테이너라 ✕가
      sticky로 사진 위에 떠 있었고, 바닥 버튼을 붙일 자리가 없었다. */
.scm[hidden] { display: none; }
.scm { position: fixed; inset: 0; z-index: 90; }
.scm-dim { position: absolute; inset: 0; background: rgba(15, 20, 30, .5); }
.scm-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 28px)); max-height: calc(100vh - 56px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 14, 20, .4);
}
.scm-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 11px 20px; border-bottom: 1px solid var(--divider);
}
.scm-kicker { font-size: 12px; font-weight: 700; color: var(--text-tertiary); }
.scm-x {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-alt); color: var(--text-secondary); font-size: 15px;
}
.scm-x:hover { background: var(--border); }
.scm-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.scm-car { position: relative; height: 250px; background: var(--surface-alt); }
.scm-car[hidden] { display: none; }
.scm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(10, 14, 20, .25);
  font-size: 16px; font-weight: 800; color: var(--text-primary);
}
.scm-nav.prev { left: 10px; }
.scm-nav.next { right: 10px; }
.scm-nav[hidden] { display: none; }
.scm-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.scm-dots[hidden] { display: none; }
.scm-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.scm-dots i.on { background: #fff; }
.scm-body { padding: 20px 22px 26px; }
.scm-title {
  display: block; margin-top: 10px; font-size: 22px; font-weight: 800;
  line-height: 1.34; letter-spacing: -.5px; text-wrap: balance;
}
.scm-date { margin-top: 9px; font-size: 12.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* 본문 — 읽는 글이다. 폭·크기·줄간을 지면(사례 상세 .sc-body)보다 한 단 넉넉히 준다. */
.scm-text { margin-top: 16px; max-width: 600px; }
.scm-text p { margin: 0 0 15px; font-size: 16px; line-height: 1.82; color: var(--text-primary); }
.scm-text p:last-child { margin-bottom: 0; }
.scm-text h4 {
  margin: 24px 0 8px; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.3px; color: var(--text-primary);
}
.scm-text h4:first-child { margin-top: 4px; }
.scm-foot {
  flex: 0 0 auto; display: flex; gap: 8px; background: var(--surface);
  border-top: 1px solid var(--divider);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.scm-foot .btn { flex: 1; }
/* 예약이 더 큰 몫을 갖는다 — 닫기와 같은 폭이면 «둘 중 아무거나»로 읽힌다. */
.scm-foot .btn-primary { flex: 1.3; }
/* 좁은 화면에서는 아래에서 올라오는 시트 — 가운데 카드는 390px에서 화면을 다 먹고도
   위아래 여백이 어중간하다(모바일 실측, D-424와 같은 사정). */
@media (max-width: 560px) {
  .scm-card {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: auto; max-height: calc(100vh - 40px); border-radius: 22px 22px 0 0;
  }
  .scm-car { height: 200px; }
  .scm-top { padding-left: 18px; }
  .scm-body { padding: 16px 18px 22px; }
  .scm-title { font-size: 20px; }
  .scm-text p { font-size: 15.5px; line-height: 1.8; }
}

/* ── 상세 페이지 인라인 캐러셀 (D-420) — 모달 캐러셀과 같은 옷, 자리만 지면 안. ── */
.scd-car { position: relative; height: 280px; border-radius: 12px; overflow: hidden;
  background: var(--surface-alt); margin: 12px 0 4px; }
.scd-car img { display: none; width: 100%; height: 100%; object-fit: cover; }
.scd-car img.on { display: block; }

/* ══ 사례 노트 관리 목록 — «프로필 거울» (D-795, 시안 3 채택) ══════════════
   위 칸(.cm-mirror)은 프로필의 E3 행(.scv-row.scv-e3)을 **그대로** 쓰고 행동 버튼만 더한다 —
   이 파일에서 행 모양을 따로 정의하지 마라(프로필과 한 벌이 «거울»의 뜻이다).
   아래 칸(.cm-rest)은 숫자 레일 없이 제목을 흐리게, 상태는 글자로(색 단독 금지). */
.sc-sec .sc-head { margin-bottom: 16px; }
.sc-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.cm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-secondary); }
.cm-empty b { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cm-empty .btn { margin-top: 10px; }
.cm-mirror { padding: 20px 22px 6px; }
.cm-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.cm-h-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: var(--ls-lg); }
.cm-h-count { font-size: 14px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.cm-h-more { margin-left: auto; font-size: 13px; color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px; }
.cm-h-more:hover { color: var(--text-primary); }
.cm-none { margin: 0; padding: 18px 0 14px; font-size: 14px; color: var(--text-tertiary); }
/* 행동 — 제목 오른쪽의 조용한 글자(수정 · 내리기 / 수정 · 다시 공개). 글마다 버튼을 세우지 않고
   **행에 마우스를 올리거나 키보드 포커스가 들어올 때만** 보인다(사용자 지시). 서버 판정대로만
   그려진다(canEdit/canWithdraw/canRepublish).
   ⚠ opacity로 숨긴다 — display:none이면 Tab으로 갈 수 없고 focus-within도 안 선다.
   ⚠ 호버가 없는 기기(터치)는 늘 보인다 — 아래 @media (hover: none). */
/* 관리 행은 링크가 아니다 — 프로필 행의 호버 파랑(.scv-row:hover .scv-title)을 되돌린다(눌리는 것처럼 보이면 안 된다). */
.cm-row:hover .scv-title { color: var(--text-primary); }
.cm-dim:hover .scv-title { color: var(--text-tertiary); }
.cm-tl { display: flex; align-items: baseline; gap: 12px; }
.cm-tl .scv-title { flex: 1 1 auto; min-width: 0; }
.cm-acts { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.cm-row:hover .cm-acts, .cm-row:focus-within .cm-acts { opacity: 1; }
.cm-acts form { margin: 0; }
.cm-btn {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px;
  border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-tertiary); cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
.cm-btn:hover { color: var(--text-primary); background: var(--surface-alt); }
.cm-btn:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 1px; }
.cm-btn.primary { color: var(--primary-pressed); }
.cm-acts > * + *::before { content: '·'; color: var(--grey400); margin-right: 2px; }
@media (hover: none) {
  .cm-acts { opacity: 1; }
  .cm-btn { min-height: 32px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .cm-acts { transition: none; } }
/* 아래 칸 — 프로필에 안 보이는 노트. */
.cm-rest { margin-top: 12px; padding: 14px 22px 6px; }
.cm-rest-h { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--grey600); }
.cm-rest-h em { font-style: normal; font-weight: 400; color: var(--grey500); }
.cm-rest .scv-e3 { padding: 14px 0; }
.cm-dim .scv-title { color: var(--text-tertiary); font-weight: 500; }
.cm-dim .scv-cover { opacity: .7; }
/* 상태 글자 — 톤 클래스는 서버 statusTone()이 준다(green·grey·red). 색이 아니라 농도가 가르고,
   운영자 내림만 빨강 잉크(다른 사건이라 톤을 나눈다, D-252 ⑧). */
.scv-state { font-weight: 600; color: var(--text-tertiary); }
.scv-state.sc-state-green { background: none; border: 0; padding: 0; color: var(--text-primary); }
.scv-state.sc-state-red { background: none; border: 0; padding: 0; color: var(--tint-red-ink); }
.cm-hidden { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--tint-red-ink); }
@media (max-width: 560px) {
  .cm-mirror { padding: 16px 16px 4px; }
  .cm-rest { padding: 12px 16px 4px; }
  /* 폰 — 제목 옆이 좁으니 행동은 제목 **아래** 한 줄(늘 보임, hover: none). */
  .cm-tl { flex-wrap: wrap; gap: 2px 8px; }
  .cm-tl .scv-title { flex-basis: 100%; }
}

/* 모달·상세 본문의 인용·목록·구분선(D-422 자유 원고) */
.scm-text blockquote {
  margin: 14px 0 16px; padding: 2px 0 2px 14px; border-left: 3px solid var(--primary);
  font-size: 15px; color: var(--text-secondary); line-height: 1.76;
}
.scm-text ul { margin: 0 0 15px; padding-left: 20px; }
.scm-text ul li { font-size: 15.5px; color: var(--text-primary); line-height: 1.75; margin-bottom: 4px; }
.scm-text hr { border: 0; border-top: 1px solid var(--divider); margin: 20px 0; }
.sc-body-q { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--primary);
  background: var(--surface-alt); border-radius: 0 8px 8px 0; color: var(--text-secondary); }