/* =========================================================
   블로그 본문 공통 스타일 (blog-content.css)
   - blog-view.php(방문자 글 보기)와 adminmanage/blog.php 편집기가 함께 사용
   - .blog-content 안의 요소에만 적용 (사이트 다른 부분에 영향 없음)
   ========================================================= */

.blog-content{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px; line-height:1.9; color:#34383f;
}
.blog-content p{ margin:0 0 16px; }
.blog-content b, .blog-content strong{ color:#0B1F3A; }
.blog-content a{ color:#1a2a4a; }
/* 글자색(forecolor) 지정 시, 굵게/제목/링크도 그 색을 따르도록 (에디터·사이트 공통) */
.blog-content [style*="color"] b, .blog-content [style*="color"] strong,
.blog-content [style*="color"] h1, .blog-content [style*="color"] h2, .blog-content [style*="color"] h3,
.blog-content [style*="color"] a{ color:inherit; }
.blog-content img{ max-width:100%; height:auto; border-radius:8px; }

/* ══════════ 사진(figure) · 나란히 배치 · 캡션 ══════════ */
.blog-content figure.ximg{ margin:18px 0; }
.blog-content figure.ximg img{ display:block; max-width:100%; height:auto; border-radius:8px; }

/* 나란히(최대 3장) — 같은 폭으로 정렬 */
.blog-content .ximg-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; margin:18px 0; }
.blog-content .ximg-row figure.ximg{ flex:1 1 0; min-width:0; margin:0; }
.blog-content .ximg-row figure.ximg img{ width:100% !important; height:auto !important; }  /* 나란히 = 같은 폭 */
.blog-content .ximg-row figure.ximg > .xcap{ display:none; }                                /* 개별 캡션 숨김 */
.blog-content .ximg-row > .xrow-cap{ flex:0 0 100%; width:100%; }                           /* 그룹 캡션(한 줄 전체) */

/* 사진 설명(캡션) */
.blog-content .xcap{ margin-top:7px; font-size:13.5px; color:#8a9099; line-height:1.6; text-align:center; }
.blog-content .xcap:empty{ display:none; }

@media(max-width:640px){
  .blog-content .ximg-row{ gap:6px; }
}

.blog-content h1{
  font-family:'Noto Serif KR',serif; font-size:30px; font-weight:700;
  color:#0B1F3A; line-height:1.35;
}
.blog-content h2{
  position:relative; font-family:'Noto Serif KR',serif; font-size:25px; font-weight:700;
  color:#0B1F3A; margin:44px 0 16px; padding-left:16px; scroll-margin-top:96px;
}
.blog-content h2::before{
  content:''; position:absolute; left:0; top:5px; bottom:5px; width:4px;
  background:#B8902F; border-radius:2px;
}
.blog-content h3{
  font-size:19px; font-weight:700; color:#14294c; margin:30px 0 12px; scroll-margin-top:96px;
}

/* 목록 */
.blog-content ul, .blog-content ol{ margin:0 0 16px 22px; }
.blog-content li{ margin:4px 0; }

/* 표 */
/* ══════════ 표 스타일 ══════════
   구조: <table class="t-{스타일}">  (soft · header · headerColor · zebra · lines · basic · none)
*/
.blog-content table{ border-collapse:collapse; width:100%; margin:18px 0; }
.blog-content table td, .blog-content table th{ padding:8px; }

/* 공통 (클래스 지정 표) */
.blog-content table[class*="t-"]{
  border-collapse:separate; border-spacing:0; width:100%; margin:24px 0;
  font-size:15px; line-height:1.65; color:#3a3f47; background:#fff;
}
.blog-content table[class*="t-"] td,
.blog-content table[class*="t-"] th{
  padding:15px 18px; text-align:left; vertical-align:middle; border:0;
}
.blog-content table[class*="t-"] th,
.blog-content table[class*="t-"] tr:first-child td{
  font-weight:700; color:#1f2937; text-align:center;
}
.blog-content table[class*="t-"] tr:first-child td:first-child,
.blog-content table[class*="t-"] th:first-child{ }

/* ── 1. 부드러운 카드 (기본 추천) ── */
.blog-content table.t-soft{ border-radius:14px; box-shadow:0 0 0 1px #edf0f4; overflow:hidden; }
.blog-content table.t-soft th,
.blog-content table.t-soft tr:first-child td{ background:#f5f7f9; border-bottom:1px solid #e8ecf1; }
.blog-content table.t-soft td{ border-bottom:1px solid #f0f2f5; border-right:1px solid #f0f2f5; }
.blog-content table.t-soft td:last-child, .blog-content table.t-soft th:last-child{ border-right:0; }
.blog-content table.t-soft tr:last-child td{ border-bottom:0; }
.blog-content table.t-soft tbody tr:nth-child(even) td{ background:#fbfcfd; }
.blog-content table.t-soft td:first-child{ font-weight:600; color:#334155; }

/* ── 2. 헤더 강조 ── */
.blog-content table.t-header{ border-radius:12px; box-shadow:0 0 0 1px #e5e7eb; overflow:hidden; }
.blog-content table.t-header th,
.blog-content table.t-header tr:first-child td{ background:#f1f3f5; border-bottom:1px solid #dfe3e8; }
.blog-content table.t-header td{ border-bottom:1px solid #eef0f3; border-right:1px solid #eef0f3; }
.blog-content table.t-header td:last-child{ border-right:0; }
.blog-content table.t-header tr:last-child td{ border-bottom:0; }

/* ── 3. 색 헤더 (네이비) ── */
.blog-content table.t-headerColor{ border-radius:12px; box-shadow:0 0 0 1px #e5e7eb; overflow:hidden; }
.blog-content table.t-headerColor th,
.blog-content table.t-headerColor tr:first-child td{ background:#0B1F3A; color:#fff; border-bottom:0; }
.blog-content table.t-headerColor td{ border-bottom:1px solid #eef0f3; border-right:1px solid #eef0f3; }
.blog-content table.t-headerColor td:last-child{ border-right:0; }
.blog-content table.t-headerColor tr:last-child td{ border-bottom:0; }

/* ── 4. 줄무늬 ── */
.blog-content table.t-zebra{ border-radius:12px; box-shadow:0 0 0 1px #e9ecef; overflow:hidden; }
.blog-content table.t-zebra th,
.blog-content table.t-zebra tr:first-child td{ background:#eef1f5; }
.blog-content table.t-zebra tbody tr:nth-child(even) td, 
.blog-content table.t-zebra tr:nth-child(even) td{ background:#f8f9fa; }
.blog-content table.t-zebra td{ border-bottom:1px solid #f1f3f5; }
.blog-content table.t-zebra tr:last-child td{ border-bottom:0; }

/* ── 5. 가로줄만 ── */
.blog-content table.t-lines th,
.blog-content table.t-lines tr:first-child td{ border-top:2px solid #333; border-bottom:1px solid #ccc; background:transparent; }
.blog-content table.t-lines td{ border-bottom:1px solid #e5e7eb; }
.blog-content table.t-lines tr:last-child td{ border-bottom:2px solid #333; }

/* ── 6. 기본 격자 ── */
.blog-content table.t-basic td, .blog-content table.t-basic th{ border:1px solid #d5d9df; }
.blog-content table.t-basic th, .blog-content table.t-basic tr:first-child td{ background:#f5f7f9; }

/* ── 7. 테두리 없음 ── */
.blog-content table.t-none td, .blog-content table.t-none th{ border:0; background:transparent; }

/* 표 안 강조 (마지막 줄 등) */
.blog-content table .t-em{ color:#1d4ed8; font-weight:700; }

@media(max-width:640px){
  .blog-content table[class*="t-"]{ font-size:13.5px; display:block; overflow-x:auto; white-space:nowrap; }
  .blog-content table[class*="t-"] td, .blog-content table[class*="t-"] th{ padding:11px 12px; }
}

/* ══════════ 인용구 스타일 ══════════
   구조: <blockquote class="q-{스타일} q-c-{색상}">
   색상: gold(기본) · navy · green · red · blue · gray · pink · mint
*/
.blog-content blockquote{
  margin:22px 0; color:#333; font-style:normal;
  /* 기본 색상 = 골드 (사이트 요약 박스와 동일 톤) */
  --qc:#B8902F;      /* 포인트 라인 색 */
  --qbg:#F7F4EE;     /* 배경 */
  --qtx:#3a3f49;     /* 글자 */
  --qfill:#B8902F;   /* 강조박스 배경 */
  --qfilltx:#ffffff; /* 강조박스 글자 */
}
/* ── 색상 팔레트 ── */
.blog-content blockquote.q-c-gold { --qc:#B8902F; --qbg:#F7F4EE; --qtx:#4a4230; --qfill:#B8902F; --qfilltx:#fff; }
.blog-content blockquote.q-c-navy { --qc:#0B1F3A; --qbg:#eef2f8; --qtx:#28374d; --qfill:#0B1F3A; --qfilltx:#fff; }
.blog-content blockquote.q-c-green{ --qc:#1b7a45; --qbg:#eaf6ef; --qtx:#22503a; --qfill:#1b7a45; --qfilltx:#fff; }
.blog-content blockquote.q-c-red  { --qc:#c0392b; --qbg:#fdeeec; --qtx:#5c2b26; --qfill:#c0392b; --qfilltx:#fff; }
.blog-content blockquote.q-c-blue { --qc:#1d6fd0; --qbg:#eaf2fc; --qtx:#22405e; --qfill:#1d6fd0; --qfilltx:#fff; }
.blog-content blockquote.q-c-gray { --qc:#5A6373; --qbg:#f3f4f6; --qtx:#3a3f47; --qfill:#5A6373; --qfilltx:#fff; }
.blog-content blockquote.q-c-pink { --qc:#c2185b; --qbg:#fdeef4; --qtx:#5d2740; --qfill:#c2185b; --qfilltx:#fff; }
.blog-content blockquote.q-c-mint { --qc:#00897b; --qbg:#e7f5f3; --qtx:#20504b; --qfill:#00897b; --qfilltx:#fff; }

/* ── 1. 박스 (요약 스타일: 배경 + 왼쪽 포인트 라인) ── */
.blog-content blockquote.q-box{
  background:var(--qbg); border-left:3px solid var(--qc); border-radius:0 10px 10px 0;
  padding:18px 22px; color:var(--qtx); font-size:16.5px; line-height:1.8;
}
/* ── 2. 강조 박스 (색 채움) ── */
.blog-content blockquote.q-fill{
  background:var(--qfill); color:var(--qfilltx); border-radius:12px;
  padding:20px 24px; line-height:1.8;
}
.blog-content blockquote.q-fill a{ color:inherit; text-decoration:underline; }
/* ── 3. 테두리 박스 ── */
.blog-content blockquote.q-outline{
  border:1.5px solid var(--qc); border-radius:12px; background:#fff;
  padding:18px 22px; color:var(--qtx); line-height:1.8;
}
/* ── 4. 제목 달린 박스 (첫 줄이 제목처럼) ── */
.blog-content blockquote.q-note{
  background:var(--qbg); border-radius:12px; padding:20px 22px 18px; color:var(--qtx); line-height:1.8;
  border:1px solid color-mix(in srgb, var(--qc) 22%, transparent);
}
.blog-content blockquote.q-note > p:first-child{
  font-weight:700; color:var(--qc); margin:0 0 8px; font-size:15px; letter-spacing:-.01em;
}
/* ── 5. 따옴표 (가운데) ── */
.blog-content blockquote.q-quote{
  text-align:center; font-size:18px; line-height:1.85; padding:8px 20px; color:var(--qtx);
}
.blog-content blockquote.q-quote::before{ content:'\201C'; display:block; font-size:40px; color:var(--qc); line-height:1; margin-bottom:2px; }
.blog-content blockquote.q-quote::after { content:'\201D'; display:block; font-size:40px; color:var(--qc); line-height:1; margin-top:2px; }
/* ── 6. 세로선 ── */
.blog-content blockquote.q-vline{
  border-left:3px solid var(--qc); padding:6px 0 6px 18px; color:var(--qtx); line-height:1.8;
}
/* ── 7. 위아래 라인 ── */
.blog-content blockquote.q-line{
  border-top:2px solid var(--qc); border-bottom:2px solid var(--qc);
  padding:18px 0; text-align:center; color:var(--qtx); line-height:1.8;
}
/* ── 8. 말풍선 ── */
.blog-content blockquote.q-bubble{
  position:relative; background:var(--qbg); border:1px solid color-mix(in srgb, var(--qc) 30%, transparent);
  border-radius:14px; padding:16px 20px; color:var(--qtx); line-height:1.8; margin-bottom:28px;
}
.blog-content blockquote.q-bubble::after{
  content:''; position:absolute; left:26px; bottom:-9px; width:16px; height:16px;
  background:var(--qbg); border-right:1px solid color-mix(in srgb, var(--qc) 30%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--qc) 30%, transparent); transform:rotate(45deg);
}
/* ── 9. 포스트잇 ── */
.blog-content blockquote.q-postit{
  background:#fff7bf; padding:18px 20px; color:#5a4b00; line-height:1.8;
  box-shadow:1px 2px 6px rgba(0,0,0,.14); border-radius:2px;
}
/* ── 10. 프레임 (모서리 장식) ── */
.blog-content blockquote.q-frame{
  border:1px solid var(--qc); padding:20px 22px; text-align:center; color:var(--qtx); line-height:1.8;
  border-radius:4px; position:relative;
}
.blog-content blockquote p{ margin:0 0 8px; }
.blog-content blockquote p:last-child{ margin-bottom:0; }

@media(max-width:640px){
  .blog-content blockquote.q-box, .blog-content blockquote.q-fill,
  .blog-content blockquote.q-outline, .blog-content blockquote.q-note{ padding:15px 16px; font-size:15.5px; }
  .blog-content blockquote.q-quote{ font-size:16.5px; }
}

/* 구분선 */
.blog-content .x-divider{ margin:24px 0; }