/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ blog-viewer.html (/blog/view/{id}/{slug} 글 상세) 스타일 ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
  시안: 케이피 홈페이지/Blog_Post Details (2026-10-28)
  위치 표시 → [본문 | 목차·인기글·소개서 배너(sticky)] → 추천 게시물 → 전환 띠.
  사이트 공통 스타일과 겹치지 않도록 모두 .kp-post 아래에 둔다. */

.kp-post {
  --kp-soft: #faf8f6;
  --kp-ink: #1e1e1e;
  --kp-sub: #6b6560;
  --kp-gray: #767676;
  --kp-rule: #ebe6e1;
  --kp-brand: #dd5e1e;
  --kp-brand-ink: #b8460f; /* 작은 주황 글자 (흰 바탕 대비 확보) */
  --kp-chip: #fdf0e8;
  --kp-black: #0e0207;
  --kp-header: 144px; /* 사이트 공통 헤더(공지 띠 + 메뉴, sticky) 높이 */

  background: #fff;
  color: var(--kp-ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  width: 100%;
  overflow-x: clip;
}
.kp-post *, .kp-post *::before, .kp-post *::after { box-sizing: content-box; }
.kp-wrap, .kp-wbtn, .kp-tags a, .kp-tocl, .kp-popl, .kp-sidetog, .kp-sideopen { box-sizing: border-box; }
.kp-post a { color: inherit; text-decoration: none; }
.kp-post a:hover { color: var(--kp-brand); }
.kp-post :focus-visible { outline: 3px solid var(--kp-brand); outline-offset: 3px; border-radius: 6px; }
.kp-post [hidden] { display: none !important; }

.kp-wrap { max-width: 1232px; margin: 0 auto; padding: 0 16px; }
.kp-post .kp-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; background: var(--kp-chip); color: var(--kp-brand); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; }

.kp-preview-bar { margin: 0; padding: 12px 16px; background: #1e1e1e; color: #fff; font-size: 14px; text-align: center; }
.kp-crumb { display: flex; align-items: center; gap: 8px; padding-top: 28px; font-size: 14px; color: var(--kp-gray); }

/* 본문 | 사이드바 */
.kp-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px 80px; align-items: start; padding-top: 24px; }
.kp-body > article { min-width: 0; }

.kp-post .kp-ahead { position: static; top: auto; left: auto; z-index: auto; width: auto; height: auto; margin: 0; background: transparent; backdrop-filter: none; justify-content: normal; }
.kp-ahead { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 32px; border-bottom: 1px solid var(--kp-ink); }
.kp-ahead h1 { margin: 0; font-size: 32px; line-height: 1.4; font-weight: 700; letter-spacing: -0.02em; word-break: keep-all; text-wrap: balance; }
.kp-hrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.kp-date { flex: none; font-size: 16px; font-weight: 400; }
.kp-hrow .kp-tags { flex: 1; min-width: 0; }

.kp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kp-tags a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #c1c0c0; border-radius: 50px; font-size: 15px; color: var(--kp-sub); }
.kp-post .kp-tags a:hover { color: var(--kp-brand); border-color: var(--kp-brand); }

.kp-wbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; padding: 0 14px; border: 1px solid #d6d0ca; border-radius: 8px; background: #fff; color: var(--kp-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer; }
.kp-wbtn:hover { color: var(--kp-brand); border-color: var(--kp-brand); }
.kp-cwrap { position: relative; display: inline-flex; flex: none; }
.kp-toast { position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; z-index: 20; margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(30, 30, 30, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none; animation: kp-cfade 2s ease-out both; }
.kp-afoot .kp-toast { top: auto; bottom: calc(100% + 8px); }
@keyframes kp-cfade { 0% { opacity: 0 } 12%, 80% { opacity: 1 } 100% { opacity: 0 } }

.kp-mtoc { display: none; }
.kp-hero { margin: 32px 0 0; }
.kp-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--kp-soft); }

/* 본문 (관리자 편집기에서 쓴 HTML) */
.kp-prose { padding-top: 40px; font-size: 17px; line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.kp-prose > :first-child { margin-top: 0; }
/* 붙여 넣은 글에 남은 글꼴 지정(style="font-family:…")을 무시하고 Pretendard 로 맞춘다. 코드는 고정폭 유지 */
.kp-prose :not(pre, pre *, code, kbd, samp) { font-family: inherit !important; }
.kp-prose p { margin: 0 0 20px; }
.kp-prose h2 { margin: 64px 0 20px; font-size: 24px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; scroll-margin-top: var(--kp-header); }
.kp-prose h3 { margin: 40px 0 12px; font-size: 19px; line-height: 1.5; font-weight: 600; }
.kp-prose a { color: var(--kp-brand-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.kp-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.kp-prose ul, .kp-prose ol { margin: 0 0 24px; padding-left: 1.4em; }
.kp-prose li { margin-bottom: 6px; }
.kp-prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--kp-brand); border-radius: 0 8px 8px 0; background: var(--kp-soft); font-size: 16px; line-height: 1.7; }
/* 인용 안 문단·목록(li > p)의 아래 여백(20px)이 안쪽 위·아래 여백을 어긋나게 하지 않도록 */
.kp-prose blockquote :first-child, .kp-prose .note :first-child { margin-top: 0; }
.kp-prose blockquote :last-child, .kp-prose .note :last-child { margin-bottom: 0; }
/* 표: 관리자 편집기(blog-editor.css)와 같은 칸 테두리 */
.kp-prose table { width: 100%; margin: 24px 0 28px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.kp-prose th, .kp-prose td { padding: 10px 14px; border: 1px solid #aab5c4; text-align: left; vertical-align: top; }
.kp-prose th { background: #edf2f8; font-weight: 600; }
.kp-prose td { font-variant-numeric: tabular-nums; }
.kp-prose th > p, .kp-prose td > p { margin: 0; }
.kp-prose th > p + p, .kp-prose td > p + p { margin-top: 6px; }
/* 시안의 본문 블록 (편집기에서 class 로 붙여 쓸 수 있다) */
.kp-prose .note, .kp-prose .law { margin: 28px 0; padding: 20px 24px; border-radius: 8px; background: var(--kp-soft); font-size: 16px; line-height: 1.7; }
.kp-prose .note strong, .kp-prose .law strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--kp-brand-ink); }
.kp-prose .law { border-left: 3px solid var(--kp-brand); border-radius: 0 8px 8px 0; }
.kp-prose .law p { margin: 0; }
.kp-prose .tbl { margin: 24px 0 28px; overflow-x: auto; }
.kp-prose .tbl table { margin: 0; min-width: 620px; }
.kp-prose .tbl th { white-space: nowrap; }
.kp-prose .list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.kp-prose .list li { position: relative; margin: 0; padding-left: 30px; line-height: 1.75; }
.kp-prose .list li::before { content: ""; position: absolute; left: 8px; top: .8em; width: 6px; height: 6px; border-radius: 999px; background: var(--kp-ink); }
.kp-prose .qa { padding: 20px 4px; }
.kp-prose .qa h3 { margin: 0 0 8px; font-size: 17px; }
.kp-prose .qa p { margin: 0; color: #4a4540; font-size: 16px; line-height: 1.8; }

.kp-post .kp-afoot { width: auto; height: auto; margin-bottom: 0; color: inherit; background: transparent; }
.kp-afoot { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--kp-ink); border-bottom: 0; }
.kp-afoot .kp-tags { flex: 1; min-width: 0; }
.kp-fact { display: flex; flex: none; align-items: center; gap: 12px; }
.kp-lbtn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 8px; background: var(--kp-ink); color: #fff !important; font-size: 14px; font-weight: 600; white-space: nowrap; }
.kp-lbtn:hover { background: var(--kp-brand); }

/* 사이드바 */
.kp-aside { position: sticky; top: var(--kp-header); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kp-side-t { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--kp-ink); font-size: 20px; font-weight: 600; line-height: 1.4; }
.kp-toc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--kp-ink); }
.kp-toc-h .kp-side-t { margin: 0; padding: 0; border: 0; }
.kp-toc ol, .kp-popular ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.kp-toc ol { gap: 2px; }
.kp-tocl { position: relative; display: block; height: 35px; padding: 0 12px 0 14px; border-radius: 8px; font-size: 15px; line-height: 35px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-tocl.on { color: var(--kp-brand); font-weight: 600; background: var(--kp-soft); }
.kp-tocl.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--kp-brand); }
.kp-popl { display: flex; align-items: center; gap: 12px; height: 35px; padding: 0 4px; border-radius: 8px; }
.kp-post .kp-popl:hover { color: var(--kp-ink); background: var(--kp-soft); }
.kp-popular li { font-weight: 500; }
.kp-popn { flex: none; width: 18px; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--kp-brand); font-variant-numeric: tabular-nums; }
.kp-popx { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-offer { display: block; border-radius: 14px; overflow: hidden; }
.kp-offer img, .kp-offer-m img { display: block; width: 100%; height: auto; }
.kp-offer-m, .kp-pop-m { display: none; }

/* 사이드바 접기: 본문을 가운데 800px 로 */
.kp-sidetog, .kp-sideopen { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 10px; border: 1px solid var(--kp-rule); border-radius: 8px; background: #fff; color: var(--kp-sub); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kp-sidetog { flex: none; }
.kp-sidetog:hover, .kp-sideopen:hover { color: var(--kp-brand); border-color: var(--kp-brand); }
.kp-sideopen { display: none; }
.kp-body.focus { grid-template-columns: minmax(0, 1fr) minmax(0, 800px) minmax(0, 1fr); column-gap: 0; }
.kp-body.focus > article { grid-column: 2; grid-row: 1; }
.kp-crumb.focus { max-width: 832px; }
.kp-body.focus .kp-aside { display: none; }
.kp-body.focus .kp-sideopen { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; position: sticky; top: var(--kp-header); }

/* 추천 게시물 */
.kp-rel { padding-top: 72px; }
.kp-relhead { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kp-ink); }
.kp-relhead h2 { position: relative; margin: 0; font-size: 20px; font-weight: 600; }
.kp-rel ul { margin: 0; padding: 0; list-style: none; }
.kp-rel li + li { border-top: 1px solid var(--kp-rule); }
.kp-rrow { display: flex; align-items: center; justify-content: flex-start; gap: 100px; padding: 28px 0; }
.kp-rrow > div { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.kp-rrow h3 { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 600; word-break: keep-all; transition: color .15s; }
.kp-post .kp-rrow:hover { color: var(--kp-ink); }
.kp-rrow:hover h3 { color: var(--kp-brand); }
.kp-rrow p { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 300; color: var(--kp-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-rrow time { font-size: 13px; }
.kp-rthumb { flex: none; width: 208px; height: 117px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(30, 30, 30, .10), 0 0 0 1px rgba(30, 30, 30, .04); }
.kp-rthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 하단 전환 띠 */
.kp-ctawrap { padding-top: 72px; padding-bottom: 96px; }
.kp-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 48px; border-radius: 14px; background: var(--kp-black); }
.kp-cta p { margin: 0; max-width: 22em; font-size: 24px; font-weight: 600; line-height: 1.4; color: #fff; }
.kp-cta a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 36px; border-radius: 12px; background: #fff; color: var(--kp-ink) !important; font-size: 17px; font-weight: 700; }

@media (max-width: 1099px) {
  .kp-body { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; }
}
@media (max-width: 859px) {
  .kp-crumb.focus { max-width: 1232px; }
  .kp-sidetog, .kp-body .kp-sideopen, .kp-body.focus .kp-sideopen { display: none; }
  .kp-body { display: flex; flex-direction: column; gap: 0; }
  .kp-body > * { min-width: 0; width: 100%; }
  .kp-aside { display: none; }
  .kp-hero img, .kp-rthumb { border-radius: 12px; }

  .kp-mtoc { display: block; margin-top: 20px; border: 1px solid var(--kp-ink); border-radius: 12px; overflow: hidden; }
  .kp-mtoc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; background: var(--kp-ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
  .kp-mtoc summary::-webkit-details-marker { display: none; }
  .kp-mtoc summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .2s; }
  .kp-mtoc[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .kp-mtoc ol { margin: 0; padding: 4px 16px 12px; list-style: none; font-size: 15px; line-height: 1.5; color: var(--kp-sub); }
  .kp-mtoc li a { display: block; padding: 7px 0; }

  .kp-rel { padding-top: 0; }
  .kp-pop-m { display: block; padding-top: 20px; }
  .kp-pop-m h2 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--kp-ink); font-size: 20px; font-weight: 600; }
  .kp-pop-m ol { margin: 0; padding: 0; list-style: none; }
  .kp-pop-m li { font-weight: 500; }
  .kp-pop-m .kp-popl { height: 48px; }
  .kp-offer-m { display: block; }
  .kp-offer-m a { display: block; margin-top: 36px; border-radius: 12px; overflow: hidden; }

  .kp-ctawrap { padding-top: 0; padding-bottom: 20px; margin-top: 20px; }
  .kp-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; border-radius: 12px; }
  .kp-cta p { font-size: 20px; }
  .kp-cta a { box-sizing: border-box; min-height: 35px; width: 155px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
}
@media (max-width: 767px) {
  .kp-crumb { padding-top: 20px; font-size: 13px; }
  .kp-body { padding-top: 16px; }
  .kp-ahead { padding-bottom: 16px; }
  .kp-ahead h1 { font-size: 24px; }
  .kp-hrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kp-hrow .kp-tags { margin-top: 6px; }
  .kp-hero { margin-top: 24px; }
  .kp-prose { padding-top: 28px; font-size: 16px; line-height: 1.8; }
  .kp-prose h2 { margin: 48px 0 16px; font-size: 20px; }
  .kp-prose .qa h3 { font-size: 16px; }
  .kp-prose .note, .kp-prose .law, .kp-prose blockquote { padding: 16px 18px; font-size: 15px; }
  .kp-prose table { font-size: 14px; }
  .kp-afoot { flex-direction: column; align-items: flex-start; }
  .kp-toast { left: 0; translate: none; }
  .kp-rrow { flex-direction: column; align-items: stretch; gap: 14px; padding: 24px 0; }
  .kp-rthumb { order: -1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .kp-rrow h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .kp-post * { transition: none !important; animation: none !important; } }

html:has(.kp-post) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.kp-post) { scroll-behavior: auto; } }