/* ==========================================================================
   post-content.css — 커뮤니티 본문 타이포그래피 + 레이아웃 보정 (2026-10-08)
   근거: 관련문서/웹분석/2026.10.08/program1472_커뮤니티_디자인_수정가이드.md (Phase 0)

   ⚠ tailwind.css 는 현재 input.css 로 재빌드하면 도구 페이지용 클래스가 빠진다
     (배포본이 다른 소스로 빌드됨). 그래서 새 스타일은 재빌드 없이 이 파일에 둔다.
     - 레이어 없는(unlayered) 규칙 → Tailwind preflight·유틸리티보다 우선
     - @layer utilities 규칙 → Tailwind 유틸리티와 같은 층(뒤에 로드되므로 동순위면 이김)
   ========================================================================== */

/* ───── 토큰 ───── */
:root {
  --pc-text: #1f2937; --pc-muted: #4b5563; --pc-heading: #111827;
  --pc-border: #e5e7eb; --pc-surface: #f8fafc; --pc-link: #2563eb;
  --pc-code-bg: #f1f5f9; --pc-code-text: #0f172a;
  --pc-pre-bg: #0f172a; --pc-pre-text: #e2e8f0; --pc-pre-border: #1e293b;
  --pc-mark: #fef08a;
}
.dark {
  --pc-text: #d1d5db; --pc-muted: #9ca3af; --pc-heading: #f3f4f6;
  --pc-border: #334155; --pc-surface: #0f172a; --pc-link: #60a5fa;
  --pc-code-bg: #0f172a; --pc-code-text: #e2e8f0;
  --pc-pre-bg: #0b1220; --pc-pre-text: #e2e8f0; --pc-pre-border: #334155;
  --pc-mark: #854d0e;
}

/* ───── P0-2 가로 스크롤 원천 차단 ───── */
html { scrollbar-gutter: stable; }          /* 스크롤바 유무로 페이지가 좌우로 흔들리는 현상 제거 */
body { overflow-x: clip; }                  /* 최후 안전망 (clip 은 sticky 헤더를 깨지 않음) */
main, article { min-width: 0; }

/* ==========================================================================
   P0-1 본문 (.post-content) — prose 대체
   ========================================================================== */
.post-content {
  color: var(--pc-text);
  font-size: 1rem; line-height: 1.8;
  word-break: keep-all;          /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: anywhere;       /* 긴 URL·경로 강제 줄바꿈 */
  min-width: 0;
}
/* 블록 간격: 신규(Toast UI) 글만 — 레거시는 원본 간격(빈 문단 등)을 존중 */
.post-content:not([data-legacy="1"]) > * + * { margin-top: 1em; }

/* 제목 */
.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
  color: var(--pc-heading); font-weight: 700; line-height: 1.4; letter-spacing: -0.01em;
}
.post-content h1 { font-size: 1.625rem; margin-top: 2em; }   /* 본문 h1 은 페이지 제목(h1)보다 작게 */
.post-content h2 { font-size: 1.375rem; margin-top: 2em; padding-bottom: .4em; border-bottom: 1px solid var(--pc-border); }
.post-content h3 { font-size: 1.15rem; margin-top: 1.6em; }
.post-content h4 { font-size: 1rem; margin-top: 1.4em; }
.post-content > :first-child { margin-top: 0 !important; }

/* 문단·링크·강조 */
.post-content:not([data-legacy="1"]) p + p { margin-top: .9em; }
.post-content a { color: var(--pc-link); text-decoration: underline; text-underline-offset: 2px; }
.post-content strong, .post-content b { font-weight: 700; }
.post-content:not([data-legacy="1"]) strong, .post-content:not([data-legacy="1"]) b { color: var(--pc-heading); }
.post-content mark { background: var(--pc-mark); color: inherit; padding: 0 .2em; border-radius: 2px; }
.post-content hr { border: 0; border-top: 1px solid var(--pc-border); margin: 2em 0; }

/* 목록 */
.post-content ul { list-style: disc; padding-left: 1.5em; }
.post-content ol { list-style: decimal; padding-left: 1.5em; }
.post-content li + li { margin-top: .35em; }
.post-content li > ul, .post-content li > ol { margin-top: .35em; }

/* 인용 */
.post-content blockquote {
  border-left: 4px solid var(--pc-link); background: var(--pc-surface);
  padding: .8em 1.1em; border-radius: 0 8px 8px 0; color: var(--pc-muted);
}

/* 인라인 코드 */
.post-content :not(pre) > code {
  background: var(--pc-code-bg); color: var(--pc-code-text);
  padding: .15em .4em; border-radius: 4px; font-size: .875em;
  font-family: "JetBrains Mono", Consolas, monospace;
  overflow-wrap: anywhere;
}

/* 코드 블록 — 가로 스크롤은 블록 내부에서만 */
.post-content pre {
  background-color: var(--pc-pre-bg) !important; color: var(--pc-pre-text) !important;
  padding: 1rem 1.1rem !important; border-radius: 10px; border: 1px solid var(--pc-pre-border) !important;
  font-size: .875rem; line-height: 1.65 !important;
  overflow-x: auto !important; overflow-y: hidden; max-width: 100%;
  white-space: pre; word-break: normal; overflow-wrap: normal; tab-size: 4;
}
.post-content pre, .post-content pre * { font-family: "JetBrains Mono", Consolas, monospace !important; }
.post-content pre code { background: none; padding: 0; color: inherit; font-size: inherit; overflow-wrap: normal; }
.post-content pre p, .post-content pre div { margin: 0 !important; }   /* pre 안에 들어간 블록 요소 정리 */
.post-content pre p:empty { display: block; min-height: 1.65em; }    /* 빈 줄 유지 */

/* 표 — 래퍼 없이도 넘치지 않게 표 자체를 스크롤 컨테이너로 */
.post-content table {
  display: block; max-width: 100%; width: max-content !important; overflow-x: auto;
  border-collapse: collapse; font-size: .925rem;
}
.post-content th, .post-content td {
  border: 1px solid var(--pc-border); padding: .55em .8em; vertical-align: top;
  min-width: 6em;                /* 한 글자씩 세로로 깨지는 현상 방지 */
  word-break: keep-all; overflow-wrap: normal;
}
.post-content th { background: var(--pc-surface); color: var(--pc-heading); font-weight: 600; text-align: left; }
.post-content td code { white-space: nowrap; }

/* 이미지·임베드 */
.post-content img, .post-content video { max-width: 100% !important; height: auto !important; border-radius: 8px; }
.post-content iframe { max-width: 100%; aspect-ratio: 16/9; height: auto; width: 100%; border: 0; border-radius: 8px; }

/* 빈 문단 숨김 (P1 새니타이저 적용 전 임시) */
.post-content p:empty, .post-content div:empty { display: none; }

/* 마지막 안전망: 본문 안 어떤 블록도 카드 폭을 넘지 않게 */
.post-content * { max-width: 100%; }
.post-content pre *, .post-content table * { max-width: none; }

/* ==========================================================================
   P0-3 레거시 글 "종이 모드" — 외부 에디터 HTML 은 흰 배경 전제로 만들어졌다
   (다크 사이트 안의 밝은 문서 뷰어. P1 새니타이저 완료 후 제거)
   ========================================================================== */
.post-content[data-legacy="1"] {
  --pc-text: #1f2937; --pc-muted: #4b5563; --pc-heading: #111827;
  --pc-border: #e5e7eb; --pc-surface: #f8fafc; --pc-link: #2563eb;
  --pc-code-bg: #f1f5f9; --pc-code-text: #0f172a; --pc-mark: #fef08a;
  /* 코드블록은 P1 새니타이저가 인라인 색을 벗기고 Prism(tomorrow) 이 다시 칠하므로 종이 위에서도 다크 유지 */
  --pc-pre-bg: #1e1e2e; --pc-pre-text: #e2e8f0; --pc-pre-border: #1e1e2e;
}
.dark .post-content[data-legacy="1"] {
  background: #ffffff; color: var(--pc-text);
  color-scheme: light;
}

/* 레거시 폰트 난립 통일 (font-family/size 인라인 무력화) */
.post-content[data-legacy="1"] *:not(pre):not(pre *):not(code) { font-family: inherit !important; }
.post-content[data-legacy="1"] [style*="font-size"]:not(h1):not(h2):not(h3):not(pre):not(pre *) {
  font-size: inherit !important; line-height: inherit !important;
}
.post-content[data-legacy="1"] font[size] { font-size: inherit; }
/* 깨진 배경 이미지(img/blockquote.gif 등) 제거 */
.post-content[data-legacy="1"] [style*="background"] { background-image: none !important; }
/* 레거시 블록 요소 숨쉴 공간 */
.post-content[data-legacy="1"] pre,
.post-content[data-legacy="1"] table,
.post-content[data-legacy="1"] blockquote { margin: .75em 0 !important; }
/* 고정 px 폭 인라인 스타일(width:740px 등)이 카드를 밀어내지 않게 */
.post-content[data-legacy="1"] [style*="width"]:not(img):not(iframe):not(td):not(th) { max-width: 100% !important; }
/* 인라인 white-space(pre/nowrap) — 코드를 <div style="white-space:pre"> 로 붙여넣은 경우 등
   블록은 자체 가로 스크롤 컨테이너로, 인라인 요소는 줄바꿈 허용 (qna/1 사례) */
.post-content div[style*="white-space"]:not(pre *),
.post-content p[style*="white-space"]:not(pre *) { overflow-x: auto; max-width: 100%; }
.post-content span[style*="nowrap"]:not(pre *),
.post-content a[style*="nowrap"]:not(pre *) { white-space: normal !important; }
/* 인용 블록의 인라인 회색 박스·여백 정리 */
.post-content[data-legacy="1"] blockquote { padding: .8em 1.1em !important; background-color: var(--pc-surface) !important; }

/* ==========================================================================
   P1 새니타이저 출력용
   ========================================================================== */
/* 강조색 보존: 원래 색의 색상각(--pc-h, OKLCH)만 유지하고 명도는 테마별로 고정 → 어느 테마든 대비 4.5:1 이상 */
.post-content .pc-accent { color: oklch(.48 .17 var(--pc-h, 250)); }
.dark .post-content:not([data-legacy="1"]) .pc-accent { color: oklch(.80 .12 var(--pc-h, 250)); }
.post-content .pc-accent a { color: inherit; }

/* Prism: 테마 CSS 의 margin/배경이 post-content 규칙과 충돌하지 않게 */
.post-content div.code-toolbar { position: relative; }
.post-content div.code-toolbar > pre { margin: 0; }
.post-content:not([data-legacy="1"]) > div.code-toolbar + *, .post-content:not([data-legacy="1"]) > * + div.code-toolbar { margin-top: 1em; }
.post-content[data-legacy="1"] div.code-toolbar { margin: .75em 0; }
.post-content div.code-toolbar > .toolbar { opacity: .85; }
.post-content div.code-toolbar > .toolbar .toolbar-item > button {
  font-family: inherit !important; font-size: .75rem; padding: .2rem .6rem; border-radius: .375rem;
  background: #374151; color: #f3f4f6; box-shadow: none;   /* 불투명 — 어떤 배경 위에서도 대비 확보 */
}
.post-content div.code-toolbar > .toolbar .toolbar-item > button:hover { background: #4b5563; }

/* ==========================================================================
   P0-4 게시판 목록 (list 스킨) — 데스크톱=테이블, 모바일=2줄 리스트
   ========================================================================== */
.bl-mobile { display: block; }
.bl-table-wrap { display: none; overflow-x: auto; }
@media (min-width: 48rem) {
  .bl-mobile { display: none; }
  .bl-table-wrap { display: block; }
}
.bl-table { width: 100%; table-layout: fixed; }
.bl-table th { white-space: nowrap; }
.bl-col-author { width: 9rem; }
.bl-col-num    { width: 5rem; }
.bl-col-like   { width: 4.5rem; }
.bl-col-date   { width: 6.5rem; }
.bl-num  { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all; }
.bl-mobile .bl-title { -webkit-line-clamp: 2; font-size: 15px; }
.bl-row:hover { background: #f9fafb; }
.dark .bl-row:hover { background: rgb(255 255 255 / .05); }
.bl-new {
  display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 4px;
  font-size: 10px; font-weight: 700; line-height: 1.4; vertical-align: middle;
  background: #dc2626; color: #fff;
}
.bl-meta-author { max-width: 40%; }

/* 페이지네이션 */
.bl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.bl-pager a, .bl-pager span {
  min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .875rem; font-variant-numeric: tabular-nums;
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
}
.dark .bl-pager a, .dark .bl-pager span { border-color: #334155; background: #1e293b; color: #d1d5db; }
.bl-pager a:hover { background: #f3f4f6; }
.dark .bl-pager a:hover { background: #334155; }
.bl-pager [aria-current="page"] { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; font-weight: 600; }
.bl-pager .is-disabled { opacity: .4; pointer-events: none; }

/* 게시판 내 검색 */
.bl-search { display: flex; gap: .5rem; }
.bl-search select, .bl-search input {
  height: 2.25rem; padding: 0 .6rem; border-radius: .5rem; font-size: .875rem;
  border: 1px solid #d1d5db; background: #fff; color: #111827;
}
.bl-search input { flex: 1; min-width: 0; }
.dark .bl-search select, .dark .bl-search input { border-color: #475569; background: #0f172a; color: #e5e7eb; }

/* card 스킨: 요약문 영역 고정 높이 → 카드 높이 통일 */
/* min-height 는 정확히 2줄(2lh) — rem 고정값이면 글자 크기에 따라 3번째 줄 윗부분이 비쳐 보인다 */
.bl-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.5rem; min-height: 2lh; max-height: 2lh; overflow-wrap: anywhere; }

/* ==========================================================================
   P0-5 공통 헤더·버튼
   ========================================================================== */
/* 모바일 헤더 우측 아이콘 묶음: 390px 에서 9px 넘치던 문제 → 간격 축소 + 홈 아이콘 숨김 */
.hd-actions { gap: .125rem; flex-shrink: 0; }
@media (max-width: 39.99rem) { .hd-hide-sm { display: none; } }
@media (min-width: 40rem) { .hd-actions { gap: .75rem; } }

/* 모바일 헤더 사용자명: 한 글자씩 세로 줄바꿈 방지 */
.hd-user { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; white-space: nowrap; }
.hd-user-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 39.99rem) { .hd-user-name { display: none; } }

/* 푸터 링크: 좁은 화면에서 링크 단위로 줄바꿈 */
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; }
.ft-links a { white-space: nowrap; }

/* 버튼 3종 (대비 4.5:1 이상) */
.c-btn { display: inline-flex; align-items: center; gap: .25rem; height: 2.25rem; padding: 0 1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; transition: background-color .15s; white-space: nowrap; }
.c-btn-primary { background: #2563eb; color: #fff; }
.c-btn-primary:hover { background: #1d4ed8; }
.c-btn-danger { background: #dc2626; color: #fff; }
.c-btn-danger:hover { background: #b91c1c; }
.c-btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.c-btn-secondary:hover { background: #f3f4f6; }
.dark .c-btn-secondary { background: #334155; color: #e5e7eb; border-color: #475569; }
.dark .c-btn-secondary:hover { background: #475569; }

/* ───── 텍스트 대비 보정 (Tailwind 재빌드 없이 전 페이지 일괄) ─────
   다크: gray-500(#6b7280) on #1e293b = 3.0:1 → gray-400 으로 (5.7:1)
   라이트: gray-400(#9ca3af) on #fff = 2.5:1 → gray-500 으로 (4.8:1)
   :where() 로 특이도를 유틸리티와 같게 유지 → hover:text-* 같은 변형은 그대로 이긴다 */
@layer utilities {
  :where(.dark) .text-gray-500:where(:not([class*="dark:text-"])) { color: #9ca3af; }
  :where(html:not(.dark)) .text-gray-400 { color: #6b7280; }
}