/* oblog default 레이아웃 프리셋 — 색은 :root 변수로 주입된다 (Layout.tsx) */
* { box-sizing: border-box; }
/* 🔴 글꼴은 관리화면과 «같다» (2026-09-24 대표: 「pretendard로 하세요. 모두 통일」).
   Pretendard 를 앞에 두므로 사이트별 글꼴 설정(theme_json.font_family)보다 이것이 이긴다.
   폰트 파일은 관리화면과 한 벌이다 — /vendor/pretendard/ (CDN 아님). */
@font-face{
    font-family:'Pretendard Variable';
    src:url('/vendor/pretendard/PretendardVariable.woff2') format('woff2-variations');
    font-weight:45 920; font-style:normal; font-display:swap;
}
body { margin:0; font-family:'Pretendard Variable', Pretendard, var(--font); color:#374151; line-height:1.7; }
a { color: var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color: var(--heading); line-height:1.35; }
strong { color: var(--strong); }
.site-header { padding:20px 24px; border-bottom:1px solid #e5e7eb;
    display:flex; align-items:center; gap:16px; }
.site-title { font-size:20px; font-weight:700; color: var(--heading); }
.site-main { max-width:960px; margin:0 auto; padding:32px 24px 64px; }
.lead { color:#6b7280; }
.post-list { list-style:none; padding:0; }
.post-list li { padding:18px 0; border-bottom:1px solid #f3f4f6; }
.post-list li a { font-size:18px; font-weight:600; color: var(--heading); }
.post-content img { max-width:100%; height:auto; }
.pagination { display:flex; gap:12px; align-items:center; margin-top:32px; }
.site-footer { padding:24px; border-top:1px solid #e5e7eb; color:#9ca3af; font-size:13px; text-align:center; }

/* 문의 폼 — 폰에서 쓰는 사람이 대부분이라 한 칸씩 세로로 쌓는다 */
.site-nav-link { margin-left:auto; font-size:14px; color: var(--link); }
.contact-form { display:flex; flex-direction:column; gap:14px; max-width:560px; margin:20px 0; }
.contact-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; }
.contact-form input, .contact-form textarea { font:inherit; font-weight:400; padding:10px 12px;
    border:1px solid #d1d5db; border-radius:8px; width:100%; box-sizing:border-box; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--primary-light);
    border-color: var(--primary); }
.contact-form .req { color:#dc2626; }
.contact-form label.agree { flex-direction:row; align-items:flex-start; gap:8px;
    font-weight:400; font-size:13px; color:#4b5563; line-height:1.5; }
.contact-form label.agree input { width:auto; margin-top:2px; }
.contact-form .btn-primary { background: var(--primary); color:#fff; border:0; border-radius:8px;
    padding:13px 18px; font-size:16px; font-weight:600; cursor:pointer; }
.contact-form .btn-primary:hover { background: var(--primary-hover); }
.contact-form .note { font-weight:400; font-size:13px; color:#6b7280; margin:0; }
.contact-form .form-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
    padding:10px 12px; border-radius:8px; margin:0; font-size:14px; }
.contact-done { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:16px 18px; }

/* 목록 썸네일 — 16:9 로 고정한다. 비율이 제각각이면 목록이 들쭉날쭉해진다.
   🔴 썸네일이 없는 글은 <a class="post-thumb"> 자체를 안 그린다 (깨진 이미지 칸 금지) */
.post-list li { display:flex; gap:16px; align-items:flex-start; }
.post-list .post-sum { flex:1; min-width:0; }
.post-list .post-date { margin:6px 0 0; font-size:13px; color:#9ca3af; }
.post-thumb { flex:0 0 140px; display:block; aspect-ratio:16/9; overflow:hidden;
    border-radius:10px; background:#f3f4f6; }
.post-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px) {
    /* 🔴 폰에서도 «왼쪽에 작게» 둔다. 예전처럼 전체 폭으로 깔면 카드 한 장이 한 화면을 먹어
       목록이 아니라 슬라이드가 된다. 세로로 쌓지 않으므로 flex-direction 은 그대로 row. */
    .post-thumb { flex:0 0 96px; border-radius:8px; }
}
.post-hero { margin:20px 0; }
.post-hero img { width:100%; height:auto; border-radius:12px; display:block; }

/* 404 */
.not-found { text-align:center; padding:48px 0 64px; }
.not-found .nf-code { font-size:56px; font-weight:800; color:var(--primary); margin:0 0 8px; letter-spacing:2px; }
.not-found h1 { margin:0 0 10px; }
.not-found .nf-home { display:inline-block; margin-top:8px; padding:11px 20px; border-radius:8px;
    background:var(--primary); color:#fff; font-weight:600; }
.not-found .nf-home:hover { background:var(--primary-hover); text-decoration:none; }
.nf-cats { margin-top:32px; color:#6b7280; font-size:14px; }
.nf-cats ul { list-style:none; padding:0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* 글 상세 아래 «나갈 곳» — 앞뒤 글 · 관련 글 (지시 12).
   🔴 없으면 묶음 자체를 안 그린다 (front.tsx 의 has_nav·has_related) — 줄만 그어진 빈칸 금지.
   🔴 390 에서 가로 스크롤이 나지 않게: 제목은 min-width:0 + 말줄임, 관련 글은 2단으로 접는다 */
.post-nav { display:flex; gap:12px; margin:40px 0 0; padding-top:20px; border-top:1px solid #e5e7eb; }
.post-nav a { flex:1 1 0; min-width:0; display:block; padding:14px 16px;
    border:1px solid #e5e7eb; border-radius:10px; }
.post-nav a:hover { border-color:var(--primary); text-decoration:none; }
.post-nav span { display:block; font-size:12px; color:#9ca3af; margin-bottom:4px; }
.post-nav strong { display:block; font-weight:600; color:var(--heading);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-nav .pn-next { margin-left:auto; text-align:right; }
.post-related { margin-top:44px; }
.post-related h2 { font-size:18px; margin:0 0 14px; }
.post-related ul { list-style:none; padding:0; margin:0;
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.post-related .rel-thumb { display:block; aspect-ratio:16/9; overflow:hidden;
    border-radius:10px; background:#f3f4f6; margin-bottom:8px; }
.post-related .rel-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.post-related .rel-title { display:block; font-weight:600; color:var(--heading);
    word-break:keep-all; overflow-wrap:anywhere; }
.post-related .rel-date { margin:4px 0 0; font-size:12px; color:#9ca3af; }
@media (max-width:640px) {
    .post-nav { flex-direction:column; }
    .post-nav .pn-next { margin-left:0; text-align:left; }
    .post-related ul { grid-template-columns:repeat(2,1fr); }
}

/* ── 2026-09-24 화면감사 B1~B4 · 독자 화면 다듬기 ─────────────────────────────
   🔴 새 색을 만들지 않았다. --primary·--link·--heading 과 이미 이 파일에 있던
      회색(#4b5563 #6b7280 #9ca3af #e5e7eb #f3f4f6)만 쓴다. 스킨 변수는 덮어쓰지 않는다. */

/* B2 헤더 카테고리 메뉴 — 6개까지 서버가 주고, 넘치면 가로로 민다.
   🔴 min-width:0 이 없으면 긴 메뉴가 헤더를 밀어 «화면 전체»에 가로 스크롤이 생긴다 */
.site-cats { flex:1 1 auto; min-width:0; display:flex; gap:16px;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.site-cats::-webkit-scrollbar { display:none; }
.site-cats a { white-space:nowrap; font-size:15px; color:#4b5563; }
.site-cats a:hover { color:var(--link); text-decoration:none; }
/* 지금 보고 있는 칸 — 본문색(#374151)으로 올리고 굵게. 🔴 --primary 로 칠하지 않는다:
   스킨마다 주 색이 달라 어떤 사이트에서는 링크와 구분이 안 된다 */
.site-cats a.on { color:#374151; font-weight:700; }
.site-nav-link { flex:none; }

/* B3 타이포 — 읽는 칸은 680px. 제목 아래 여백을 줄이고 h2/h3 위계를 세운다 */
.post-page { max-width:680px; margin:0 auto; }
.post-page article > h1 { font-size:clamp(25px, 5.6vw, 36px); margin:0 0 10px; letter-spacing:-0.01em; }
.post-meta { margin:0 0 26px; color:#6b7280; font-size:14px; }
.post-content { line-height:1.75; font-size:17px; }
.post-content > :first-child { margin-top:0; }
.post-content p { margin:0 0 1.15em; }
.post-content h2 { font-size:25px; font-weight:700; margin:2.1em 0 .6em;
    padding-bottom:.3em; border-bottom:1px solid #f3f4f6; }
.post-content h3 { font-size:19px; font-weight:600; margin:1.8em 0 .5em; }
.post-content ul, .post-content ol { padding-left:1.3em; margin:0 0 1.15em; }
.post-content li { margin:.3em 0; }
.post-content blockquote { margin:1.4em 0; padding:2px 0 2px 16px;
    border-left:3px solid #e5e7eb; color:#6b7280; }

/* B1 공유 — 외부 SDK 없이 순수 링크와 navigator.clipboard 뿐이다 */
.post-share { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:36px 0 0; }
.post-share > span { font-size:13px; color:#9ca3af; margin-right:4px; }
.ps-btn { font:inherit; font-size:13px; line-height:1; padding:9px 14px;
    border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#4b5563; cursor:pointer; }
.ps-btn:hover { border-color:var(--primary); color:var(--primary); text-decoration:none; }

/* B4 푸터 — 사이트명·문의·RSS 한 줄. 저작권 줄은 그대로 아래에 남긴다 */
.foot-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
    margin:0 0 10px; font-size:14px; }
.foot-links a { color:#6b7280; }
.foot-copy { margin:0; }

/* 태그 · 사이트 내 검색 (지시 28) — 마크업은 SkinService.ts:25,50 과 front.tsx:280,301 */
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
.tag-link { font-size:13px; line-height:1; padding:7px 12px; border-radius:999px;
    background:#f3f4f6; color:#4b5563; }
.tag-link:hover { background:var(--primary-light); color:var(--primary); text-decoration:none; }

/* 머리글 검색칸 — 폰에서는 헤더 두 번째 줄로 내려간다 */
.site-search { display:flex; gap:6px; margin-left:auto; }
.site-search input { font:inherit; font-size:14px; width:150px; padding:7px 12px;
    border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#374151; }
.site-search input:focus { outline:none; border-color:var(--primary); }
.site-search button { font:inherit; font-size:13px; padding:7px 13px; cursor:pointer;
    flex:0 0 auto; white-space:nowrap;
    border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#4b5563; }
.site-search button:hover { border-color:var(--primary); color:var(--primary); }

/* 검색 화면 */
.search-page h1 { font-size:26px; margin:0 0 18px; }
.search-form, .site-search-form { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin:0 0 18px; }
.site-search-form label { font-size:14px; font-weight:600; color:var(--heading); }
.site-search-form input { font:inherit; flex:1 1 220px; min-width:0; padding:10px 14px;
    border:1px solid #d1d5db; border-radius:8px; }
.site-search-form input:focus { outline:2px solid var(--primary-light); border-color:var(--primary); }
.site-search-form button { font:inherit; padding:10px 18px; cursor:pointer; border:0;
    border-radius:8px; background:var(--primary); color:#fff; }
.search-empty { margin:24px 0; padding:18px; border:1px dashed #e5e7eb; border-radius:10px;
    color:#6b7280; background:#fafafa; }

@media (max-width:640px) {
    /* 헤더가 한 줄에 안 들어간다 — 검색칸만 다음 줄로 내린다 (wrap 이 없으면 넘친다) */
    .site-header { flex-wrap:wrap; }
    .site-search { order:3; flex:1 1 100%; min-width:0; margin-left:0; }
    .site-search input { flex:1 1 auto; width:auto; min-width:0; }
    .search-page h1 { font-size:22px; }
    .site-header { gap:12px; padding:16px; }
    .site-title { font-size:18px; }
    .site-cats { gap:14px; }
    .site-cats a { font-size:14px; }
    .site-main { padding:24px 18px 48px; }
    .post-content { font-size:16px; }
    .post-content h2 { font-size:21px; }
    .post-content h3 { font-size:18px; }
}

/* ── 글 생성 형식의 본문 구성요소 (2026-10-30 대표: 「css 적용이 완전하지 않은거 같은데요. 완전히 적용해주세요」) ──
   생성 원고는 Tailwind 클래스(info-box·p-5·list-inside …)를 달고 오지만 블로그에는 Tailwind 가 없다.
   그래서 클래스 이름이 아니라 «구성요소»(핵심 포인트·주의·팁·수치 상자 · 목차 · 표 · FAQ)를 직접 그린다.
   🔴 색은 사이트 변수(--primary · --primary-light · --heading)만 쓴다 — 원고에 박힌 inline 색(#3B82F6 등)은 덮는다.
   🔴 편집기(iframe)에서는 body 자체가 .post-content 라 두 경우를 :is() 로 묶었다. body 를 앞에 붙인 것은 전용 스킨 틀의 `.ob-main .post-content ul` 같은 규칙보다 이기려는 것이고,
      !important 는 고객 Bootstrap 유틸리티(p-5 = 3rem!important · border · shadow-lg 등)가 같은 이름을 쓰기 때문이다.
   목차 접기 단추는 스크립트가 있어야 움직인다 — 전용 스킨은 틀 안에서, 기본 틀은 없으면 단추만 보인다. */
:is(body .post-content, body.post-content) #nxt_blog-content { padding:0 !important; background:none !important; border-radius:0 !important; box-shadow:none !important; }
:is(body .post-content, body.post-content) .flex { display:flex; }
:is(body .post-content, body.post-content) .items-center { align-items:center; }
:is(body .post-content, body.post-content) .items-start { align-items:flex-start; }
:is(body .post-content, body.post-content) .flex-shrink-0 { flex-shrink:0; }

/* 상자 4종 — default(핵심 포인트) · blue(수치·근거) · green(팁) · red(주의) */
:is(body .post-content, body.post-content) .info-box { margin:28px 0 !important; padding:20px 22px !important; border-radius:12px !important;
    border:1px solid #e5e7eb !important; border-left:4px solid var(--primary) !important;
    background:var(--primary-light) !important; color:#374151; }
:is(body .post-content, body.post-content) .info-box-blue { background:#fff !important; border-color:#e5e7eb !important; border-left-color:var(--primary) !important; }
:is(body .post-content, body.post-content) .info-box-green { background:#f8f9fb !important; border-color:#e5e7eb !important; border-left-color:#9ca3af !important; }
:is(body .post-content, body.post-content) .info-box-red { background:#fdf4f3 !important; border-color:#f5d5d1 !important; border-left-color:#d4574b !important; }
:is(body .post-content, body.post-content) .info-box > div:first-child:not(.items-start) { display:flex; align-items:center; gap:8px;
    margin:0 0 10px !important; font-size:17px; font-weight:700; line-height:1.4; color:var(--primary) !important; }
:is(body .post-content, body.post-content) .info-box.info-box-red > div:first-child:not(.items-start) { color:#c0463b !important; }
:is(body .post-content, body.post-content) .info-box .mr-2 { margin:0 !important; }
:is(body .post-content, body.post-content) .info-box :is(p, li) { font-size:16px; line-height:1.7; color:#374151; }
:is(body .post-content, body.post-content) .info-box p { margin:0 0 6px !important; font-weight:700; color:var(--heading); }
:is(body .post-content, body.post-content) .info-box ul { list-style:none !important; padding:0 !important; margin:0 !important; }
:is(body .post-content, body.post-content) .info-box li { position:relative; list-style:none !important; padding-left:16px; margin:6px 0 0 !important; font-weight:500; }
:is(body .post-content, body.post-content) .info-box li::before { content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px;
    border-radius:50%; background:var(--primary); }
:is(body .post-content, body.post-content) .info-box-red li::before { background:#d4574b; }
:is(body .post-content, body.post-content) .info-box-green li::before { background:#9ca3af; }
:is(body .post-content, body.post-content) .info-box > .items-start { display:flex; gap:12px !important; }
:is(body .post-content, body.post-content) .info-box .rounded-full { display:inline-block; padding:2px 10px !important; border-radius:999px !important;
    background:var(--primary) !important; color:#fff !important; font-size:13px; font-weight:700; line-height:1.7; letter-spacing:.02em; }
:is(body .post-content, body.post-content) .info-box .min-w-0 { min-width:0; flex:1; }

/* 목차 — 번호 붙은 2단 목록, 밑줄 없음. 접으면(.is-closed) 목록만 숨는다 */
:is(body .post-content, body.post-content) #nxt_page-toc { margin:28px 0 !important; padding:18px 22px !important; background:#fff !important;
    border:1px solid #e5e7eb; border-radius:12px !important; box-shadow:none !important; }
:is(body .post-content, body.post-content) #nxt_page-toc > div:first-child { display:flex; justify-content:space-between; align-items:center; gap:12px;
    margin:0 0 12px !important; padding:0 0 12px !important; border-bottom:1px solid #eef0f3; }
:is(body .post-content, body.post-content) #nxt_page-toc > div:first-child > span { font-size:18px; font-weight:700; color:var(--heading); }
:is(body .post-content, body.post-content) #nxt_toggle-toc-button { -webkit-appearance:none; appearance:none; font:inherit; font-size:13px; line-height:1.5;
    padding:4px 14px !important; border:1px solid #d1d5db; border-radius:999px !important; background:#fff; color:#4b5563; cursor:pointer; }
:is(body .post-content, body.post-content) #nxt_toggle-toc-button:hover { border-color:var(--primary); color:var(--primary); }
:is(body .post-content, body.post-content) #nxt_page-toc ol { counter-reset:toc; list-style:none !important; display:grid; grid-template-columns:1fr 1fr;
    gap:2px 28px; margin:0 !important; padding:0 !important; }
:is(body .post-content, body.post-content) #nxt_page-toc li { counter-increment:toc; list-style:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
:is(body .post-content, body.post-content) #nxt_page-toc a { display:flex; gap:10px; padding:7px 0; font-size:15.5px; line-height:1.5;
    color:#374151 !important; text-decoration:none !important; font-weight:500; }
:is(body .post-content, body.post-content) #nxt_page-toc a::before { content:counter(toc, decimal-leading-zero); flex:none; font-weight:700; color:var(--primary); }
:is(body .post-content, body.post-content) #nxt_page-toc a:hover { color:var(--primary) !important; }
:is(body .post-content, body.post-content) #nxt_page-toc.is-closed > div:first-child { margin:0 !important; padding:0 !important; border-bottom:0; }
:is(body .post-content, body.post-content) #nxt_page-toc.is-closed #nxt_page-toc-nav { display:none; }
:is(body .post-content, body.post-content) .nxt_content-section, :is(body .post-content, body.post-content) [id^="section-"] { scroll-margin-top:24px; }

/* 표 — 감싼 칸이 가로로 밀린다(폰). 머리줄만 사이트 색을 옅게 깐다 */
:is(body .post-content, body.post-content) .overflow-x-auto { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0 !important;
    border:1px solid #e5e7eb; border-radius:12px !important; box-shadow:none !important; }
:is(body .post-content, body.post-content) .custom-table { width:100%; min-width:480px; margin:0 !important; border-collapse:collapse; font-size:15px; line-height:1.6; }
:is(body .post-content, body.post-content) .custom-table :is(th, td) { border:0 !important; padding:12px 14px; text-align:left; vertical-align:top; }
:is(body .post-content, body.post-content) .custom-table th { background:var(--primary-light); color:var(--heading); font-weight:700; white-space:nowrap; }
:is(body .post-content, body.post-content) .custom-table td { border-top:1px solid #eef0f3 !important; }
:is(body .post-content, body.post-content) .custom-table td strong { color:var(--heading); }

/* FAQ — 문항마다 위 줄로 나누고 Q·A 머리글자만 사이트 색 */
:is(body .post-content, body.post-content) .nxt_faq-section { margin:48px 0 0 !important; }
:is(body .post-content, body.post-content) .nxt_faq-section > h2 { margin:0 0 4px !important; padding:0 0 14px !important; border-bottom:2px solid var(--heading) !important; }
:is(body .post-content, body.post-content) .nxt_faq-section .space-y-4 > div { margin:0 !important; padding:18px 0 !important; border:0 !important; border-bottom:1px solid #eef0f3 !important; }
:is(body .post-content, body.post-content) .nxt_faq-section h3 { display:flex; align-items:flex-start; gap:8px; margin:0 0 8px !important;
    font-size:17.5px; font-weight:700; line-height:1.5; color:var(--heading); }
:is(body .post-content, body.post-content) .nxt_faq-section h3 > span:first-child, :is(body .post-content, body.post-content) .nxt_faq-section .space-y-4 > div > div > span:first-child {
    flex:none; margin:0 !important; font-weight:800; color:var(--primary); }
:is(body .post-content, body.post-content) .nxt_faq-section .space-y-4 > div > div { display:flex; gap:8px; padding:0 !important; font-size:16px; line-height:1.75; color:#4b5563; }

@media (max-width:640px) {
    :is(body .post-content, body.post-content) .info-box { padding:16px 16px !important; }
    :is(body .post-content, body.post-content) #nxt_page-toc { padding:16px !important; }
    :is(body .post-content, body.post-content) #nxt_page-toc ol { grid-template-columns:1fr; }
    :is(body .post-content, body.post-content) #nxt_page-toc a { font-size:15px; }
    :is(body .post-content, body.post-content) .nxt_faq-section h3 { font-size:16.5px; }
    :is(body .post-content, body.post-content) .nxt_faq-section .space-y-4 > div > div { font-size:15.5px; }
}