/* 블로그(/blog/) 목록·카테고리·글·준비 중 페이지 스타일: 시안 B(목록)·A(글)·CTA 바 (헤더·푸터·글꼴은 /chrome.css) */
* { box-sizing:border-box; }
html { scroll-padding-top:96px; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); font-family:'Pretendard JP', sans-serif; -webkit-font-smoothing:antialiased; word-break:keep-all; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }


.wrap { flex:1; width:100%; margin:0 auto; padding:56px 24px 96px; display:flex; flex-direction:column; }
.list-wrap { max-width:1168px; }
.post-wrap { max-width:768px; }

/* 목록·카테고리 */
.page-title { margin:0 0 12px; font-size:44px; line-height:1.25; font-weight:700; letter-spacing:-0.027em; }
.lead { margin:0 0 12px; font-size:18px; line-height:1.65; font-weight:500; color:var(--muted); }
.svc-link { align-self:flex-start; margin:0 0 32px; padding:4px 0; font-size:16px; font-weight:600; color:var(--purple); }
.svc-link:hover { text-decoration:underline; text-underline-offset:3px; }
.cta-box.cta-list { margin:48px 0 0; }
.tabs { display:flex; gap:10px; margin:0 0 32px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex-shrink:0; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:#FFFFFF; font-size:16px; font-weight:600; color:var(--text); white-space:nowrap; }
.tab:hover { border-color:#C3AEFF; }
.tab.is-on { background:var(--ink); border-color:var(--ink); color:#FFFFFF; }
.empty { margin:0; padding:48px 24px; text-align:center; background:#FFFFFF; border:1px solid var(--line); border-radius:20px; font-size:17px; font-weight:500; color:var(--muted); }

.cat { display:inline-block; font-size:14px; font-weight:600; color:var(--purple); }
.date { font-size:14px; font-weight:500; color:var(--muted); }

.feat { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:40px; align-items:center; padding:20px; background:#FFFFFF; border:1px solid var(--line); border-radius:24px; }
.feat:hover, .card:hover { border-color:#C3AEFF; }
.feat-txt { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-right:24px; }
.badge { padding:4px 9px; border-radius:6px; background:var(--purple); color:#FFFFFF; font-size:13px; font-weight:700; }
.feat-title { margin:0; font-size:30px; line-height:1.38; font-weight:700; letter-spacing:-0.02em; }
.feat-desc { margin:0; font-size:17px; line-height:1.65; font-weight:500; color:var(--muted); }

.grid { list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.card { height:100%; display:flex; flex-direction:column; gap:14px; padding:14px 14px 20px; background:#FFFFFF; border:1px solid var(--line); border-radius:20px; }
.card-txt { display:flex; flex-direction:column; gap:6px; padding:0 6px; }
.card-title { margin:0; font-size:18px; line-height:1.45; font-weight:700; }

/* 대표 이미지 / 없을 때 카테고리 색 자동 그림 */
/* 틀은 4:3 (2026-10-30, 대표 이미지를 4:3으로 만들기로 함). 비율이 다른 이미지는 가운데 기준으로 채워 자름 */
.thumb { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:14px; background:var(--bg); }
.auto { position:relative; display:flex; align-items:flex-end; padding:14px 18px; overflow:hidden; }
.auto span { font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.35; }
.feat .auto span { font-size:21px; }
.c-violet { background:#EEE9FF; color:#8D6EF2; }
.c-blue { background:#E6EFFF; color:#5B86E0; }
.c-green { background:#E4F3E9; color:#4C9A69; }
.c-orange { background:#FFF0E1; color:#D6844A; }

/* 글 페이지 (시안 A 순서) */
.post-cat { margin-bottom:12px; font-size:15px; }
.post-title { margin:0 0 14px; font-size:40px; line-height:1.32; font-weight:700; letter-spacing:-0.027em; }
.meta-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 32px; }
.meta { margin:0; font-size:15px; font-weight:500; color:var(--muted); }
.share-icon { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin:-8px -8px -8px 0; padding:0; border:0; border-radius:999px; background:none; color:var(--muted); cursor:pointer; }
.share-icon:hover { background:#FFFFFF; color:var(--ink); }
.share-icon svg { display:block; }
.hero { margin:0 0 32px; border-radius:16px; }
.box { margin:0 0 28px; padding:22px 26px; background:#FFFFFF; border:1px solid var(--line); border-radius:16px; }
.box-label { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--purple); }
.box ul, .box ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.toc a { font-size:16px; line-height:1.5; font-weight:500; color:var(--text); }
.toc a:hover { color:var(--purple); }
.series li { display:flex; gap:10px; font-size:16px; line-height:1.5; font-weight:500; color:var(--text); }
.series li a { display:flex; gap:10px; }
.series li a:hover { color:var(--purple); }
.series .no { flex-shrink:0; min-width:30px; font-weight:700; color:var(--muted); }
.series .t { min-width:0; }
.series li[aria-current] { font-weight:700; color:var(--ink); }
.series li[aria-current] .no { color:var(--purple); }
.series .now { white-space:nowrap; margin-left:6px; padding:2px 7px; border-radius:6px; background:#F1ECFF; font-size:12px; font-weight:700; color:var(--purple); vertical-align:2px; }

.body { font-size:18px; line-height:1.85; font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.body > :first-child { margin-top:0; }
.body h2 { margin:48px 0 14px; font-size:26px; line-height:1.4; font-weight:700; color:var(--ink); letter-spacing:-0.02em; }
.body h3 { margin:32px 0 10px; font-size:21px; line-height:1.45; font-weight:700; color:var(--ink); }
.body p { margin:0 0 18px; }
.body ul, .body ol { margin:0 0 18px; padding-left:22px; }
.body li { margin:4px 0; }
.body a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.body img { display:block; max-width:100%; height:auto; border-radius:12px; margin:8px 0; }
.body blockquote { margin:0 0 18px; padding:14px 20px; background:#F1ECFF; border-radius:12px; color:var(--ink); }
.body blockquote p:last-child { margin-bottom:0; }
.table-wrap { margin:0 0 18px; overflow-x:auto; }
.body table { width:100%; border-collapse:collapse; font-size:15px; background:#FFFFFF; }
.body th, .body td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.body th { background:var(--bg); font-weight:600; }
.body code { font-size:0.92em; background:#ECECEE; padding:1px 5px; border-radius:6px; }
.body pre { background:#ECECEE; padding:16px; border-radius:12px; overflow-x:auto; }
.body pre code { padding:0; }
.body hr { border:0; border-top:1px solid var(--line); margin:32px 0; }

.post-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 40px; }
.like, .share-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:#FFFFFF; font:inherit; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; }
.like:hover, .share-btn:hover { border-color:#C3AEFF; }
.like svg { display:block; color:var(--purple); transition:transform 0.15s; }
/* 좋아요: 누르기 전 빈 하트, 누른 뒤 채운 하트·연보라 바탕 (이 브라우저에서 누른 글) */
.like svg path { fill:none; stroke:currentColor; stroke-width:2; }
.like[aria-pressed="true"] { border-color:#C3AEFF; background:#F4F0FF; }
.like[aria-pressed="true"] svg path { fill:currentColor; }
.share-btn svg { display:block; color:var(--muted); }
/* 링크 복사 안내: 화면 아래 가운데 잠깐 (CTA 바보다 위) */
.toast { position:fixed; left:50%; bottom:96px; z-index:60; transform:translateX(-50%); padding:12px 18px; border-radius:12px; background:rgba(23,23,25,0.88); color:#FFFFFF; font-size:15px; font-weight:600; white-space:nowrap; pointer-events:none; }
.like.pop svg { transform:scale(1.25); }

.author { display:flex; align-items:center; gap:16px; margin:0 0 20px; padding:20px 22px; background:#FFFFFF; border:1px solid var(--line); border-radius:16px; }
.author svg { flex-shrink:0; display:block; width:52px; height:52px; }
.author-name { margin:0 0 4px; font-size:17px; font-weight:700; }
.author-desc { margin:0; font-size:15px; line-height:1.5; font-weight:500; color:var(--muted); }

/* CTA: 글 끝 상자와 화면 아래 바 (같은 문구·색) */
.cta { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--purple); color:#FFFFFF; }
.cta-text { min-width:0; margin:0; line-height:1.4; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cta-btn { flex-shrink:0; padding:12px 20px; border-radius:12px; background:#FFFFFF; color:var(--purple); font-weight:700; white-space:nowrap; }
.cta-btn:hover { opacity:0.9; }
.cta-box { margin:0 0 48px; padding:26px 28px; border-radius:20px; }
.cta-box .cta-text { font-size:19px; white-space:normal; line-height:1.45; }
.cta-box .cta-btn { font-size:16px; }
.cta-bar { position:fixed; z-index:40; left:50%; bottom:24px; width:min(720px, calc(100% - 48px)); padding:14px 16px 14px 28px; border-radius:18px;
  box-shadow:0 8px 28px rgba(23,23,25,0.18); transform:translate(-50%, calc(100% + 40px)); visibility:hidden;
  transition:transform 0.2s ease, visibility 0s linear 0.2s; }
.cta-bar.show { transform:translate(-50%, 0); visibility:visible; transition:transform 0.2s ease, visibility 0s; }
.cta-bar .cta-text { font-size:17px; }
.cta-bar .cta-btn { font-size:16px; }

.related h2 { margin:0 0 8px; font-size:21px; font-weight:700; }
.related ul { list-style:none; margin:0; padding:0; }
.row { display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.row-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.row-title { margin:0; font-size:17px; line-height:1.45; font-weight:700; }
.row .thumb { flex-shrink:0; width:88px; aspect-ratio:1; border-radius:12px; }
.row .auto { padding:0; }
.row .auto span { display:none; }


/* 준비 중 (공개 글 0개) */
.soon { align-items:center; justify-content:center; text-align:center; }
.soon .eyebrow { font-size:16px; font-weight:600; color:var(--purple); margin-bottom:12px; }
.soon h1 { margin:0 0 16px; font-size:37px; line-height:1.3; font-weight:700; letter-spacing:-0.027em; }
.soon p { margin:0 0 36px; font-size:18px; line-height:1.7; font-weight:500; color:var(--muted); }
.btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.btn { padding:16px 28px; border-radius:12px; font-size:18px; font-weight:600; }
.btn.primary { background:var(--purple); color:#FFFFFF; }
.btn.primary:hover { opacity:0.88; }
.btn.ghost { background:#FFFFFF; border:1px solid var(--line); color:var(--ink); }
.btn.ghost:hover { background:var(--bg); }

@media (max-width:1100px) {
  .grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:767px) {
  html { scroll-padding-top:72px; }
  .wrap { padding:20px max(var(--gutter), env(safe-area-inset-right)) 64px max(var(--gutter), env(safe-area-inset-left)); }
  .page-title { font-size:32px; margin-bottom:8px; }
  .lead { font-size:16px; margin-bottom:8px; }
  .svc-link { font-size:15px; margin-bottom:24px; }
  .cta-box.cta-list { margin-top:32px; }
  .tabs { gap:6px; margin:0 calc(-1 * var(--gutter)) 24px; padding:0 var(--gutter); }
  .tab { padding:9px 10px; font-size:14px; }
  .feat { grid-template-columns:1fr; gap:18px; padding:14px 14px 20px; border-radius:20px; }
  .feat-txt { padding:0 6px; gap:8px; }
  .feat-title { font-size:23px; }
  .feat-desc { font-size:15px; }
  .grid { display:block; margin-top:8px; }
  .card { flex-direction:row-reverse; align-items:center; gap:16px; padding:18px 0; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; }
  .card-txt { flex:1; min-width:0; padding:0; }
  .card-title { font-size:17px; }
  .card .thumb { flex-shrink:0; width:84px; aspect-ratio:1; border-radius:12px; }
  .card .auto span { display:none; }
  .post-title { font-size:28px; margin-bottom:10px; }
  .meta-row { margin-bottom:24px; }
  .meta { font-size:14px; }
  .hero { margin-bottom:24px; }
  .box { padding:18px 20px; margin-bottom:24px; }
  .toc a, .series li { font-size:15px; }
  .body { font-size:16px; line-height:1.8; }
  .body h2 { font-size:21px; margin-top:36px; }
  .body h3 { font-size:18px; }
  .author svg { width:44px; height:44px; }
  .author-name { font-size:16px; }
  .author-desc { font-size:14px; }
  .cta-box { padding:20px; border-radius:16px; }
  .cta-box .cta-text { font-size:15px; }
  .cta-box .cta-btn { padding:10px 14px; font-size:14px; }
  .cta-bar { left:0; bottom:0; width:100%; border-radius:0; box-shadow:0 -4px 20px rgba(23,23,25,0.12);
    padding:12px max(var(--gutter), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    transform:translateY(100%); }
  .cta-bar.show { transform:translateY(0); }
  .cta-bar .cta-text { font-size:13.5px; white-space:normal; line-height:1.4; }
  .cta-bar .cta-btn { padding:10px 14px; font-size:14px; }
  .related h2 { font-size:19px; }
  .row-title { font-size:16px; }
  .row .thumb { width:84px; }
  .soon h1 { font-size:27px; }
  .soon p { font-size:16px; }
  .btn { font-size:16px; padding:14px 22px; }
}
/* 좁은 휴대폰(375px 미만): 바 여백을 줄여 360px까지 한 줄, 그보다 좁으면 설명이 두 줄로 (잘리지 않게) */
@media (max-width:374px) {
  .cta-bar { gap:8px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .cta-bar .cta-btn { padding:10px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .cta-bar, .cta-bar.show, .like svg { transition:none; }
}