/* 🔴 지면 서체(S-01) — 세무시선은 세무사가 자기 이름으로 쓰는 글이라 UI와 서체로 가른다.
   본문·제목·요약·인용·캡션만 명조(Nanum Myeongjo), 버튼·라벨·카드는 Pretendard 그대로.
   ⚠ 웹폰트 로드가 실패해도 레이아웃이 안 깨지게 폴백을 반드시 둔다('Apple SD Gothic Neo', serif). */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

:root { --sisun-serif: 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif; }

/* 세무시선 — 목록 · 상세 · 작성 폼 전용 (D-221).
   홈 섹션(.sisun-home-*)은 home.css에 있다. 두 파일은 **로드되는 화면이 다르므로**
   클래스를 공유하지 않는다 — 한쪽에만 있는 클래스를 다른 쪽이 쓰면 스타일이 통째로 빠진 채
   200이 나간다. 라벨 3종(.sisun-cat·.sisun-kind·.sisun-sample)은 양쪽에 각각 둔다.

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

/* ── 라벨 3종 (home.css와 같은 값) ───────────────────────────── */
.sisun-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sisun-cat {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 6px; padding: 3px 8px;
}
/* 지면 성격 표기 — '광고'와 다른 말이되, 플랫폼이 편집한 글이 아님을 카드/글 단위로 밝힌다.
   ⚠ 지우지 마라: 이 라벨이 없으면 세무사 노출 지면이 라벨 없는 광고로 읽힌다
     (표시광고법 · 약관 제6조 ④ · D-013). */
.sisun-kind {
  font-size: 11.5px; font-weight: 600; color: var(--text-tertiary);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px;
}
/* 🔴 「샘플」 — 지어낸 글이 진짜 글로 읽히는 것을 막는 유일한 표시다. 색을 죽이지 마라. */
.sisun-sample {
  font-size: 11.5px; font-weight: 700; color: #C2410C;
  background: #FFF3E8; border-radius: 6px; padding: 2px 7px;
}

/* ── 목록 ──────────────────────────────────────────────── */
/* 🔴 **읽기 폭(760px)을 걷었다**(D-355, 사용자 지시 — "좌우 여백이 너무 넓다").
   읽기 폭은 «한 줄에 68자 안쪽»을 위한 값이라 **산문**에 건다(상세·작성 화면은 그대로 둔다).
   목록은 산문이 아니라 **카드 격자**여서 그 폭에 묶일 이유가 없었고, 넓은 화면에서 양옆이
   통째로 비어 있었다. 이제 본문이 남은 자리를 쓴다(D-154와 같은 규약).
   ⚠ 아주 넓은 화면에서 카드가 지나치게 커지지 않도록 아래에서 **열 수를 늘린다**. */
.sisun-list-sec { margin-inline: auto; }

.sisun-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sisun-head h2 { margin: 0; }

/* ── 사진+제목 컴팩트 카드(.sisun-pop) ─────────────────────────────────
   ⚠ D-395에서 목록의 인기 레일은 은퇴했지만 이 규칙은 산다 — **Q&A 상세의
   «질문과 유사한 세무시선» 카드(D-381, fragments/sisun-pop-card)가 그대로 쓴다.**
   지우면 그 지면의 카드가 맨 텍스트가 된다(이번에 실제로 부쉈다가 되살린 규칙이다). */
.sisun-pop {
  position: relative; display: block;
  aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  background: var(--grey100); color: inherit; text-decoration: none;
}
.sisun-pop-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 읽은 글 표시(D-392) — Q&A 상세의 세무시선 카드에도 그대로 산다. */
.sisun-pop:visited .sisun-pop-cap { color: var(--text-tertiary); }
.sisun-pop.is-read .sisun-pop-cap { color: var(--text-tertiary); }
.sisun-pop-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 14px 16px; min-height: 74px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 41, 55, .82);
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center;
}
.sisun-pop-cap span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.sisun-pop:hover .sisun-pop-cap { background: rgba(31, 41, 55, .9); }

/* ══ 벤토 보드 (D-397, 애플 벤토 — 사용자 확정) ═══════════════════════════
   4열 × 132px 행의 모자이크. 그림자 금지·헤어라인 + hover 테두리(D-167, 셈톡 공통 규칙).
   dense 흐름이라 타일이 모자라면 그 칸만 줄고 구멍은 안 남는다. */
.sisun-bento {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 132px;
  grid-auto-flow: dense; gap: 14px; margin: 4px 0 6px;
}
.sb-tile {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 18px 20px;
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
a.sb-tile:hover { border-color: var(--grey300); background: var(--grey50); }

/* 히어로(2×2) — 커버가 있으면 사진 + 다크 그라디언트 + 흰 락업, 없으면 분야 파스텔 + 잉크. */
.sb-hero { grid-column: span 2; grid-row: span 2; position: relative; justify-content: flex-end; padding: 0; }
.sb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-hero-body {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  padding: 22px 24px 20px; min-width: 0;
}
.sb-hero-cover .sb-hero-body {
  background: linear-gradient(180deg, rgba(25, 31, 40, 0), rgba(25, 31, 40, .78) 70%);
  color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-top: 54px;
}
.sb-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.sb-hero-cover .sb-eyebrow { color: rgba(255, 255, 255, .85); }
.sb-hero:not(.sb-hero-cover) .sb-eyebrow { color: var(--primary); }
.sb-hero-title {
  margin-top: 7px; font-size: 23px; font-weight: 800; letter-spacing: -.4px; line-height: 1.38;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-hero-meta {
  margin-top: 12px; display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12.5px; font-weight: 600;
}
.sb-hero-cover .sb-hero-meta { color: rgba(255, 255, 255, .92); }
.sb-hero:not(.sb-hero-cover) .sb-hero-meta { color: var(--text-secondary); }

/* 글 타일 — 분야 라벨(색) → 제목 → 저자·날짜. 세로(1×2)는 아래 정렬, 가로(2×1)는 위 정렬. */
.sb-post .sb-cat { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.sb-post .sb-title {
  margin-top: 6px; font-size: 14.5px; font-weight: 800; line-height: 1.45; letter-spacing: -.2px;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-post .sb-meta { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--text-tertiary); }
.sb-tall { grid-row: span 2; justify-content: flex-end; }
.sb-tall .sb-title { -webkit-line-clamp: 4; }
.sb-tall .sb-meta { margin-top: 12px; padding-top: 0; }
.sb-wide { grid-column: span 2; }
.sb-wide .sb-title { -webkit-line-clamp: 2; }
/* 분야색 라벨 — 카드 톤(sisun-ph-N)과 같은 자리의 글자색 판. */
.sb-c-0 { color: #1B64DA; } .sb-c-1 { color: #4F46E5; } .sb-c-2 { color: #0E9F6E; }
.sb-c-3 { color: #C2410C; } .sb-c-4 { color: #7C3AED; } .sb-c-5 { color: #4D7C0F; }
.sb-c-6 { color: #475569; } .sb-c-7 { color: #DB2777; } .sb-c-8 { color: #B45309; }

/* 카테고리 타일 — 분야 파스텔(sisun-ph-N 배경 재사용) 위 «카테고리 / 분야명 →». */
.sb-catile { justify-content: space-between; border: 0; }
.sb-catile:hover { filter: brightness(.97); background: inherit; }
.sb-catile-k { font-size: 11.5px; font-weight: 700; color: rgba(25, 31, 40, .45); }
.sb-catile-n { font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
/* 파스텔 배경의 글자색은 카드 플레이스홀더 라벨 색을 그대로 입는다(sisun-card.css의 짝). */
.sb-catile.sisun-ph-0 .sb-catile-n { color: #1B64DA; } .sb-catile.sisun-ph-1 .sb-catile-n { color: #4F46E5; }
.sb-catile.sisun-ph-2 .sb-catile-n { color: #0E9F6E; } .sb-catile.sisun-ph-3 .sb-catile-n { color: #C2410C; }
.sb-catile.sisun-ph-4 .sb-catile-n { color: #7C3AED; } .sb-catile.sisun-ph-5 .sb-catile-n { color: #4D7C0F; }
.sb-catile.sisun-ph-6 .sb-catile-n { color: #475569; } .sb-catile.sisun-ph-7 .sb-catile-n { color: #DB2777; }
.sb-catile.sisun-ph-8 .sb-catile-n { color: #B45309; }

/* 지표 타일 — 잉크 다크. 보드에서 유일한 어두운 칸이라 지표가 한눈에 잡힌다. */
.sb-stat { background: var(--grey900); border-color: var(--grey900); color: #fff; justify-content: space-between; }
.sb-stat-k { font-size: 11.5px; font-weight: 700; opacity: .65; }
.sb-stat-v { font-size: 15px; font-weight: 700; opacity: .9; }
.sb-stat-v b { font-size: 26px; font-weight: 900; letter-spacing: -.5px; margin-right: 2px; }

/* 읽은 글 표시(D-392 계약 승계) — 타일 제목만 죽인다. 흰 락업 히어로는 흐린 흰색으로. */
.sb-post:visited .sb-title, .sb-post.is-read .sb-title { color: var(--text-tertiary); }
.sb-hero:not(.sb-hero-cover):visited .sb-hero-title,
.sb-hero:not(.sb-hero-cover).is-read .sb-hero-title { color: var(--text-tertiary); }
.sb-hero-cover:visited .sb-hero-title, .sb-hero-cover.is-read .sb-hero-title { color: rgba(255, 255, 255, .62); }

/* «모든 시선» — 보드 아래 아카이브 구간의 머리(애플 뉴스룸의 Latest 구간 격). */
.sisun-all-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 2px; }
.sisun-all-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.sisun-all-sub { font-size: 12.5px; color: var(--text-tertiary); }

/* 좁은 화면 — 2열(카테고리·지표 타일은 1열 유지), 더 좁으면 1열 스택. */
@media (max-width: 1100px) {
  .sisun-bento { grid-template-columns: repeat(2, 1fr); }
  .sb-hero { grid-column: span 2; }
  .sb-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .sisun-bento { grid-template-columns: 1fr; grid-auto-rows: minmax(112px, auto); }
  .sb-hero, .sb-wide { grid-column: span 1; }
  .sb-hero { grid-row: span 2; min-height: 300px; }
  .sb-tall { grid-row: span 1; }
}

/* ── 분야 필터 — **한 줄 고정 · 넘치면 좌우 스크롤** (D-355) ─────────────────
   ⚠ 전역 `.filter-bar`(app.css)는 `flex-wrap: wrap`이고 세무사 찾기·Q&A도 그 규칙을 쓴다.
     여기서 wrap을 끄는 것은 **세무시선 목록 안에서만**이다 — 전역을 고치면 다른 지면의
     필터가 함께 한 줄이 되어 칩이 잘린다.
   ⚠ `-webkit-overflow-scrolling`은 iOS 관성 스크롤용이다. 빼면 손가락에서 뚝뚝 끊긴다. */
/* ── 아카이브 (D-398, 애플 뉴스룸 아카이브 참고) — 한 줄 필터 바 + 전폭 가로 카드. ── */
.sisun-arch-filter {
  margin: 10px 0 14px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
}
.sisun-arch-filter .sisun-cats { margin: 0; }
.sisun-arch { display: flex; flex-direction: column; gap: 12px; }
.sisun-row {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: 16px; color: inherit; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.sisun-row:hover { border-color: var(--grey300); background: var(--grey50); }
.sisun-row-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md);
  overflow: hidden; background: var(--grey100);
}
.sisun-row-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sisun-row-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; }
.sisun-row-ph .sisun-card2-ph-label { font-size: 14px; }
.sisun-row-body { min-width: 0; padding-right: 8px; }
.sisun-row-cat { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.sisun-row-title {
  margin: 5px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; line-height: 1.45;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sisun-row-sum {
  margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary);
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sisun-row-meta {
  margin-top: 11px; display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12px; color: var(--text-tertiary);
}
.sisun-row-dot { color: var(--grey300); }
/* 읽은 글 표시(D-392 계약 승계) — 가로 카드도 제목 색만. */
.sisun-row:visited .sisun-row-title, .sisun-row.is-read .sisun-row-title { color: var(--text-tertiary); }
/* [더 보기] — 폴백 링크이자 인피니티 스크롤의 센티널(sisun-archive.js). */
.sisun-arch-foot { display: flex; justify-content: center; margin-top: 16px; }
.sisun-more { min-width: 200px; }
@media (max-width: 640px) {
  .sisun-row { grid-template-columns: 1fr; gap: 12px; }
  .sisun-row-media { aspect-ratio: 16 / 9; }
  .sisun-row-body { padding-right: 0; }
}

.sisun-list-sec .sisun-cats {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* 스크롤 막대가 칩 아래 붙어 지면이 지저분해진다 — 감추되 스크롤 자체는 살린다.
     ⚠ 감춘 만큼 «더 있다»는 신호가 약해지므로 오른쪽 끝을 흐려 둔다(아래 mask). */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.sisun-list-sec .sisun-cats::-webkit-scrollbar { display: none; }
/* 칩이 줄어들어 글자가 겹치지 않게 — nowrap에서는 flex가 칩을 눌러 찌그러뜨린다. */
.sisun-list-sec .sisun-cats .filter-chip { flex: 0 0 auto; white-space: nowrap; }

/* ── 카드 격자 — 넓은 화면에서 열을 늘린다 (D-355) ────────────────────────────
   ⚠ `.sisun-grid2`의 기본(2열)은 sisun-card.css에 있고 **홈도 그 파일을 쓴다**. 여기 규칙은
     `.sisun-list-sec` 아래로만 스코프한다 — 안 그러면 홈의 좌우 레일이 함께 바뀐다. */
@media (min-width: 1100px) { .sisun-list-sec .sisun-grid2 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1560px) { .sisun-list-sec .sisun-grid2 { grid-template-columns: repeat(4, 1fr); } }

/* 🔴 `.sisun-sorts`(정렬 칩)는 D-355에서 **화면과 함께 사라져** 규칙도 지웠다. 되살릴 일이
   생기면 템플릿·CSS·렌더 테스트를 함께 되돌려라.
   ⚠ `.sisun-note`는 **지우지 않았다** — 목록의 두 줄은 없어졌지만 작성 화면(sisun-write)이
     같은 클래스를 계속 쓴다(기본 규칙은 app.css에 있다). 「목록에서 안 보이니 죽은 클래스」로
     보고 지우면 작성 화면의 안내 글꼴·크기가 조용히 바뀐다. */

/* 목록 카드는 여기 없다 — 2026-08 카드 개편(이미지 상단 카드형)으로 홈과 **같은 조각**
   (fragments/sisun-card.html)·**같은 CSS**(sisun-card.css — sisun-list.html이 이 파일과
   나란히 링크)를 쓴다. 격자(.sisun-grid2)·카드·플레이스홀더 전부 그쪽이다.
   여기 남은 .sisun-tags·.sisun-cat·.sisun-kind·.sisun-sample·.sisun-avatar는 **상세 화면**
   (sisun-detail.html)이 쓴다 — 지우면 상세의 라벨·바이라인이 무너진다. */

/* ── 상세 ──────────────────────────────────────────────── */
/* 🔴 **여기는 넓히지 않는다**(D-363에서 다른 지면을 --page-max로 넓힐 때의 예외).
   이 화면은 «글을 읽는 곳»이라 한 줄이 길어지면 눈이 다음 줄 첫 글자를 못 찾는다 —
   한글 45~55자가 한 줄이다(--reading-max).
   ⚠ 옛 주석은 「Q&A 상세와 같은 규약」이었는데 그건 틀린 근거가 됐다: Q&A 상세는 프로즈가
     아니라 **세무사 카드 목록**이라 D-363에서 --page-max로 넓혔다. 같은 «상세»라도 목록은
     넓을수록, 글은 좁을수록 낫다. */
/* A 커버스토리 상세 (D-395) — 읽기 한 칼럼이 아니라 «본문 + 스티키 저자 카드» 2단이다.
   본문 자체의 읽기 폭은 .sisun-measure가 지킨다(폭 넓힘 ≠ 줄 길이 넓힘). */
.sisun-detail-sec { max-width: 1140px; margin-inline: auto; }
.sisun-hero { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; background: var(--grey100); }
.sisun-hero-img { display: block; width: 100%; height: 300px; object-fit: cover; }
.sisun-detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start;
}
.sisun-detail-main { min-width: 0; }
/* 저자 카드가 스크롤을 따라온다 — 읽는 내내 상담 동선이 시야에 있다(A의 요점). */
.sisun-detail-aside { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); min-width: 0; }
.sisun-detail-aside .sisun-author-card { margin-top: 0; }
.sisun-measure { max-width: var(--reading-max); }
@media (max-width: 1024px) {
  .sisun-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .sisun-detail-aside { position: static; }
  .sisun-hero-img { height: 200px; }
}

/* 커버 240px 풀블리드(S-01) — 카드 패딩을 음수 마진으로 밀어 가장자리까지. 없으면 이 블록 자체가 안 그려진다. */
/* (카드 안 커버 .sisun-cover는 D-395에서 전폭 히어로 .sisun-hero로 승격 — 규칙도 함께 갔다.) */

.sisun-article-title {
  margin: 14px 0 0; font-family: var(--sisun-serif);
  font-size: 34px; line-height: 50px; font-weight: 800; letter-spacing: -0.02em;
  color: #111827; word-break: break-word;
}
.sisun-lead {
  margin-top: 10px; font-family: var(--sisun-serif);
  font-size: 17px; line-height: 30px; color: #4B5563; word-break: break-word;
}
.sisun-byline {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sisun-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.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-byline-id { min-width: 0; }
.sisun-byline-date { margin-left: auto; }

/* 본문 블록(S-01·S-02) — 명조. 한 줄 폭은 읽기 좋게 제한하고 블록 간격은 24px. */
.sisun-body {
  margin-top: 20px; font-family: var(--sisun-serif); color: #1F2937;
  max-width: 34em;   /* 한 줄 ~68자 이내 */
  word-break: break-word;
}
/* 본문 블록 — 문단 내 홑 줄바꿈은 살린다(서버가 빈 줄 3개 이상을 2개로 접어 둔다). */
.sisun-b-text { margin: 0 0 24px; font-size: 17.5px; line-height: 36px; white-space: pre-line; }
.sisun-b-heading { margin: 32px 0 12px; font-size: 22px; line-height: 32px; font-weight: 700; }
.sisun-b-quote {
  margin: 24px 0; padding: 2px 0 2px 16px; border-left: 2px solid #A67C2E;
  font-size: 20px; line-height: 32px; font-weight: 700; color: #7C5A1B; white-space: pre-line;
}
.sisun-b-list { margin: 0 0 24px; padding-left: 20px; }
.sisun-b-list li { font-size: 17.5px; line-height: 32px; margin-bottom: 4px; }
.sisun-b-figure { margin: 24px 0; }
.sisun-b-img { display: block; width: 100%; border-radius: 10px; }
.sisun-b-caption {
  margin-top: 8px; text-align: center; font-size: 13.5px; line-height: 20px; color: #6B7280;
}
.sisun-b-divider { border: none; border-top: 1px solid #E5E7EB; margin: 32px 0; }

.sisun-actions {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sisun-like-on { border-color: var(--primary); color: var(--primary); }

/* 저자 카드 — 상세 하단. 🔴 샘플 글에서는 링크도 [상담 예약]도 그리지 않는다(정적 텍스트만).
   그 판정은 CSS가 아니라 마크업(SisunPost.linksToAuthor)이 한다 — 여기서 숨기면
   `display:none`을 지우는 순간 거래 버튼이 되살아난다. */
.sisun-author-card { margin-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sisun-author-id { min-width: 0; flex: 1; }
.sisun-author-cta { display: flex; gap: 8px; flex: none; }

/* ── 댓글 ──────────────────────────────────────────────── */
.sisun-comments-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.sisun-comment { display: flex; flex-direction: column; gap: 6px; }
.sisun-comment + .sisun-comment { margin-top: 10px; }
/* 신고로 숨긴 댓글 자리(C-02 §7) — 본문 없이 "운영자 확인 중"만. 점선으로 비운 자리임을 표시. */
.sisun-comment-hidden { border-style: dashed; background: var(--surface-alt); }
.sisun-comment-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sisun-comment-body { white-space: pre-line; word-break: break-word; }
.sisun-comment-del { margin-left: auto; }
.sisun-comment-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sisun-comment-form textarea { min-height: 96px; padding: 12px; line-height: 1.6; resize: vertical; }
.sisun-comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ── 신고 창구 (S7) ────────────────────────────────────────
   접힌 채로 시작한다 — 펼쳐진 신고 폼이 카드마다 붙어 있으면 지면이 신고를 권하는 화면이 된다.
   ⚠ 여는 글자를 작고 흐리게 둔 것은 의도다. 좋아요·댓글과 같은 무게로 그리면 신고가 반응의
     한 종류처럼 읽힌다 — 이건 반응이 아니라 마지막 수단이다. 다만 **찾을 수 없을 만큼**
     흐리게 만들지는 않는다(창구가 있다는 사실 자체가 임시조치 절차의 전제다). */
.sisun-report { margin-left: auto; }
.sisun-comment .sisun-report { margin-left: 0; margin-top: 2px; }
.sisun-report-toggle {
  cursor: pointer; color: var(--text-tertiary); list-style: none;
  padding: 2px 4px; border-radius: 6px; width: max-content;
}
.sisun-report-toggle::-webkit-details-marker { display: none; }
.sisun-report-toggle:hover { color: var(--text-secondary); background: var(--surface-alt); }
.sisun-report[open] .sisun-report-toggle { color: var(--text-secondary); }
.sisun-report-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  /* 폼이 카드 안에서 통째로 가로를 먹지 않게 — 좁은 화면에서는 자연히 100%가 된다. */
  max-width: 420px;
}
.sisun-report-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ── 작성·수정 폼 ──────────────────────────────────────── */
/* ⚠ 이 폼은 제목·요약·본문이 전부 «글을 쓰는 칸»이다. 지면을 넓혀도 칸을 읽기 폭으로 되돌려야
   해서 결과가 같다 — 그래서 D-363에서 넓히지 않았다(넓히는 시늉만 하는 변경은 안 한다). */
.sisun-write-sec { max-width: var(--reading-max); margin-inline: auto; }
.sisun-write-form { display: flex; flex-direction: column; gap: 14px; }
/* 본문이 이 화면의 주인공이다 — 제목·요약보다 훨씬 큰 자리를 준다(qna-write-body와 같은 판단). */
.sisun-write-body textarea { min-height: 360px; padding: 14px; line-height: 1.6; resize: vertical; }
.sisun-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* 글자 수 카운터 — JS가 채운다. JS가 없어도 상한 안내가 글자로 남아 있어야 한다. */
.sisun-count { font-size: 12px; color: var(--text-tertiary); }
.sisun-count-over { color: var(--error); font-weight: 700; }
.sisun-write-actions {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border);
}
.sisun-write-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* 수정 화면의 현재 커버 미리보기 — 카드와 같은 비율로 보여 준다. */
.sisun-write-cover-now {
  display: block; width: min(100%, 320px); aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border); margin-bottom: 6px;
}

/* 임시저장 목록 */
.sisun-drafts { margin-top: 18px; }
.sisun-draft-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sisun-draft-row + .sisun-draft-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sisun-draft-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 빈 상태 ──────────────────────────────────────────── */
.sisun-empty { text-align: center; color: var(--text-tertiary); padding: 40px 20px; }

/* ── 반응 pill(§6) ────────────────────────────────────── */
.sisun-reactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sisun-author-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sisun-react-count { color: var(--text-tertiary); }
/* 외곽선 pill 40px — 좋아요·댓글이 같은 무게로 보인다. 좋아요는 폼 버튼이라 버튼 초기화도 함께. */
.sisun-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface, #fff);
  color: var(--text-secondary); font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; line-height: 1;
}
.sisun-pill:hover { background: var(--surface-alt); }
.sisun-like-on { border-color: var(--primary); color: var(--primary); }
.sisun-danger { color: var(--error); }

/* ── 볼 수 없는 글(S-04 · §7) ─────────────────────────── */
.sisun-gone-sec { max-width: var(--reading-max); margin-inline: auto; }
.sisun-gone { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sisun-gone-mark { color: var(--text-tertiary); }
.sisun-gone-title { margin: 4px 0 0; }
.sisun-gone-desc { color: var(--text-tertiary); margin: 0 0 8px; }

/* ── 삭제·내리기 확인 대화(S-04) ───────────────────────
   sisun-confirm.js가 만든다. JS가 없으면 폼이 그대로 제출되므로 이 스타일이 없어도 동작은 한다. */
.sisun-dialog { border: none; border-radius: 16px; padding: 22px; max-width: 380px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.sisun-dialog::backdrop { background: rgba(0,0,0,.4); }
.sisun-dialog-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.sisun-dialog-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 18px; }
.sisun-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 완료 토스트(S-04) — 공통 플래시(notice)를 잠깐 아래에 띄운다. sisun-confirm.js가 붙인다. */
.sisun-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #14243D; color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.28); z-index: 1000;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.sisun-toast.on { opacity: 1; }

/* ── 금칙어 경고 확인(S-03) ────────────────────────────
   차단이 아니라 확인이다 — 위치를 짚고 [고쳐 쓸게요]/[이대로 발행]을 저자가 고른다(경고색). */
.sisun-warn { border-color: #FDE68A; background: #FFFBEB; margin: 12px 0; }
.sisun-warn-title { font-size: 14px; font-weight: 700; color: #B45309; margin: 0 0 6px; }
.sisun-warn-list { margin: 0 0 12px; padding-left: 18px; color: #92400E; font-size: 13.5px; line-height: 1.7; }
.sisun-warn-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 블록 에디터(S-02) — sisun-write.js가 만든다 ─────────
   JS가 없으면 이 영역은 비어 있고 아래 본문 textarea(폴백)로 그대로 쓴다. */
.sisun-editor { display: none; flex-direction: column; gap: 10px; }
.sisun-editor.on { display: flex; }
/* JS가 켜지면 폴백 본문 라벨을 숨긴다(에디터가 대신 body를 채운다). */
.sisun-editor.on ~ .sisun-write-body { display: none; }
.sisun-etoolbar { display: flex; gap: 6px; flex-wrap: wrap; }
.sisun-etool {
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff);
  padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.sisun-etool:hover { background: var(--surface-alt); }
.sisun-block {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; gap: 8px;
  background: var(--surface, #fff);
}
.sisun-block-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sisun-block-kind { font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); }
.sisun-block textarea, .sisun-block input[type="text"] {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: inherit; line-height: 1.6; resize: vertical;
}
.sisun-block-ctrls { display: flex; flex-direction: column; gap: 4px; }
.sisun-block-ctrls button {
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface, #fff);
  width: 30px; height: 28px; cursor: pointer; color: var(--text-secondary); font-size: 13px; line-height: 1;
}
.sisun-block-ctrls button:hover { background: var(--surface-alt); }
.sisun-block-img { max-width: 220px; border-radius: 8px; display: block; }
.sisun-block-drop {
  border: 1.5px dashed #BFDBFE; background: #EFF6FF; border-radius: 8px; padding: 16px;
  text-align: center; color: #1B5FD1; font-size: 13px;
}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media (max-width: 600px) {
  .sisun-article-title { font-size: 26px; line-height: 38px; }
  /* 저자 카드에서 [상담 예약]이 이름 옆에 끼어 눌리지 않게 — 좁아지면 아래 줄 전체 폭으로. */
  .sisun-author-cta { width: 100%; }
  .sisun-author-cta .btn { flex: 1; }
  .sisun-author-actions { margin-left: 0; }
}