/* 성공사례 — 관리 목록 · 작성 · 고객 승인 · 공개 전체 목록 · 프로필 섹션
   (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: 600; text-decoration: none;
}
.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: 15px 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; }
.scv-title {
  display: block; margin-top: 8px; font-size: 16px; font-weight: 700;
  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: 13.5px; 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: 15.5px; }
}

/* ══ 사례 노트 열람 모달 — 가운데 카드 (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-422, E안) — 관리 목록의 커버 카드 그리드 ══════════ */
.mgd-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) {
  .mgd-grid { grid-template-columns: 1fr; gap: 12px; }
  .mgd-card { min-height: 176px; }
}
/* 머리(제목·설명·[+ 새 원고])와 데스크 사이 숨통 — 모바일에서 버튼이 첫 카드를 덮었다. */
.sc-sec .sc-head { margin-bottom: 16px; }
.mgd-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 200px;
  display: flex; align-items: flex-end; background: linear-gradient(150deg, #39434F, #5B6675); }
/* 사진 없는 원고 (D-475) — 검은 셔터 같던 회색 그라데이션을 걷고 밝은 일터 톤으로.
   글자·버튼도 함께 뒤집는다(밝은 바탕에 흰 글씨는 안 읽힌다). 사진 카드는 그대로. */
.mgd-card.no-cover { background: linear-gradient(150deg, var(--primary-light), var(--surface-alt));
  border: 1px solid var(--border); }
.mgd-card.no-cover .mgd-grad { display: none; }
.mgd-card.no-cover .mgd-body { color: var(--text-primary, #191F28); }
.mgd-card.no-cover .mgd-title { text-shadow: none; }
.mgd-card.no-cover .mgd-kicker { color: var(--text-secondary); opacity: 1; }
.mgd-card.no-cover .mgd-hidden { color: #B4690E; }
.mgd-card.no-cover .mgd-btn { background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--border); }
.mgd-card.no-cover .mgd-btn:hover { border-color: var(--primary); }
.mgd-card.no-cover .mgd-btn.primary { background: var(--primary); color: #fff; border: 0; }
.mgd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mgd-grad { position: absolute; inset: 0;
  background: linear-gradient(rgba(15, 20, 28, .18) 0%, rgba(15, 20, 28, .28) 30%, rgba(15, 20, 28, .9) 78%); }
.mgd-state { position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 800; border-radius: 7px; padding: 3px 9px; }
/* 상태 톤 — 서버 statusTone()이 green·grey를 내려 준다(색+문구, 규칙 ⑦). */
.mgd-state.sc-state-green { background: #E7F6EC; color: #157A47; }
.mgd-state.sc-state-grey { background: #F2F4F6; color: #4E5968; }
.mgd-state.sc-state-red { background: #FDEBEC; color: #C4383E; }
.mgd-body { position: relative; z-index: 1; width: 100%; padding: 14px 16px; color: #fff; }
.mgd-kicker { font-size: 11px; font-weight: 700; opacity: .85; display: flex; gap: 5px; flex-wrap: wrap; }
.mgd-title { font-size: 16.5px; font-weight: 900; letter-spacing: -.3px; line-height: 1.38; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 6px rgba(10, 14, 20, .5); }
.mgd-hidden { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #FFD9A8; }
.mgd-actions { display: flex; gap: 7px; margin-top: 11px; }
.mgd-actions form { margin: 0; }
.mgd-btn { display: inline-block; border: 0; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 800; border-radius: 8px; padding: 6px 12px;
  background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none; }
.mgd-btn:hover { background: rgba(255, 255, 255, .28); }
.mgd-btn.primary { background: var(--primary); }

/* 모달·상세 본문의 인용·목록·구분선(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); }