/* 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; }
}