/* ============================================================
   changup.ai — 콘텐츠 페이지 (블로그 · FAQ · 공지)
   ------------------------------------------------------------
   세 페이지가 공유하는 것: 페이지 헤더, 필터 칩, 리스트 카드,
   본문 타이포그래피, 페이지네이션.

   블로그가 이 서비스에서 중요한 이유:
   "예비창업패키지 사업계획서 쓰는 법" 같은 검색어가 곧 이 제품의
   고객 유입 경로다. 그래서 블로그는 부록이 아니라 획득 채널이고,
   본문 가독성(줄 길이 · 자간 · 소제목 리듬)에 투자할 값이 있다.
   ============================================================ */

/* ══════════ 페이지 헤더 ══════════ */
.ph{
  padding:var(--sp7) 0 var(--sp6);
  background:#fff;border-bottom:1px solid var(--line);
}
.ph h1{
  margin-top:var(--sp3);font-size:var(--fs-h1);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h1);line-height:var(--lh-h1);word-break:keep-all;
}
.ph p{margin-top:var(--sp3);font-size:var(--fs-lead);color:var(--t3);word-break:keep-all;max-width:640px}

/* 필터 칩 */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp5)}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 13px;border-radius:var(--r-full);
  border:1px solid var(--line);background:#fff;
  font-size:var(--fs-sm);font-weight:650;color:var(--t3);
  transition:var(--tr-base);
}
.chip:hover{border-color:var(--line-strong);color:var(--t1)}
.chip[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--e-accent);
}
.chip .n{
  font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:var(--r-xs);
  background:var(--surface-soft);color:var(--t4);
}
.chip[aria-pressed="true"] .n{background:rgba(255,255,255,.24);color:#fff}

/* 검색 */
.psearch{position:relative;margin-top:var(--sp4);max-width:420px}
.psearch input{
  width:100%;height:42px;padding:0 14px 0 40px;
  border-radius:var(--r-md);border:1px solid var(--line);background:#fff;
  font-size:var(--fs-sm);transition:var(--tr-base);
}
.psearch input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.psearch svg{position:absolute;left:14px;top:13px;color:var(--t4);pointer-events:none}

/* ══════════ 블로그 카드 그리드 ══════════ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp4)}

/* 첫 글은 크게 — 리스트가 균일하면 무엇을 먼저 읽어야 할지 알 수 없다 */
.post{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  overflow:hidden;transition:var(--tr-lift);
}
.post:hover{transform:translateY(-3px);box-shadow:var(--e3);border-color:var(--blue-300)}
.post-thumb{
  aspect-ratio:16/9;position:relative;
  background:var(--grad-surface);
  display:grid;place-items:center;
  border-bottom:1px solid var(--line-soft);
}
.post-thumb span{
  font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent-strong);
  text-transform:uppercase;opacity:.55;
}
/* 썸네일 도형 — 사진을 쓰지 않는다.
   「양식의 구조」·「심사 관점」처럼 눈에 보이는 대상이 없는 글이라
   사진을 붙이면 장식이 된다. 글이 다루는 구조를 그대로 그린다. */
.post-thumb svg{display:block;width:100%;height:100%}
.post-thumb{overflow:hidden}
.post.lead .post-thumb svg{height:100%;object-fit:cover}
.post-b{padding:var(--sp4);display:flex;flex-direction:column;flex:1}
.post-cat{
  display:inline-flex;align-self:flex-start;align-items:center;
  height:21px;padding:0 8px;border-radius:var(--r-xs);
  background:var(--accent-soft);color:var(--accent-strong);
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
}
.post h3{
  margin-top:var(--sp3);font-size:var(--fs-h3);font-weight:750;color:var(--t1);
  letter-spacing:var(--ls-h3);line-height:1.42;word-break:keep-all;
}
.post p{
  margin-top:var(--sp2);font-size:var(--fs-sm);color:var(--t3);line-height:1.65;
  word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-m{
  margin-top:auto;padding-top:var(--sp4);
  display:flex;align-items:center;gap:var(--sp3);
  font-size:var(--fs-xs);color:var(--t4);
}
.post-m .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}

/* 대표 글 — 2칸 차지 + 가로 배치 */
.post.lead{grid-column:span 2;flex-direction:row}
.post.lead .post-thumb{aspect-ratio:auto;width:46%;flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line-soft)}
.post.lead .post-b{padding:var(--sp5)}
.post.lead h3{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:1.36}
.post.lead p{-webkit-line-clamp:3;font-size:var(--fs-body)}

/* ══════════ 글 본문 ══════════ */
.article{padding:var(--sp7) 0 var(--sp8);background:#fff}
.art-head{max-width:var(--maxw-narrow);margin:0 auto;padding:0 var(--gutter);text-align:center}
.art-head h1{
  margin-top:var(--sp4);font-size:var(--fs-h1);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h1);line-height:1.36;word-break:keep-all;
}
.art-meta{
  margin-top:var(--sp4);display:flex;flex-wrap:wrap;gap:var(--sp3);
  justify-content:center;font-size:var(--fs-sm);color:var(--t4);
}
.art-hr{
  max-width:var(--maxw-narrow);margin:var(--sp6) auto;padding:0 var(--gutter);
}
.art-hr div{height:1px;background:var(--line)}

/* 본문 — 읽는 폭 760px, 줄간 1.85. 한글 장문에서 가장 편한 값. */
.art-body{max-width:var(--maxw-narrow);margin:0 auto;padding:0 var(--gutter)}
.art-body > *+*{margin-top:var(--sp4)}
.art-body p{font-size:16px;line-height:1.9;letter-spacing:-.3px;color:#39405a;word-break:keep-all}
.art-body h2{
  margin-top:var(--sp7);font-size:var(--fs-h2);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h2);line-height:1.4;word-break:keep-all;
  /* 소제목 왼쪽에 브랜드 바 — 스캔이 쉬워진다 */
  padding-left:14px;border-left:3px solid transparent;
  border-image:var(--grad-hair) 1;
}
.art-body h3{
  margin-top:var(--sp6);font-size:var(--fs-h3);font-weight:750;color:var(--t1);
  letter-spacing:var(--ls-h3);word-break:keep-all;
}
.art-body ul{display:grid;gap:10px;padding-left:2px}
.art-body ul li{
  position:relative;padding-left:19px;font-size:16px;line-height:1.85;
  letter-spacing:-.3px;color:#39405a;word-break:keep-all;
}
.art-body ul li::before{
  content:"";position:absolute;left:3px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--blue-300);
}
.art-body ol{display:grid;gap:10px;counter-reset:n;padding-left:2px}
.art-body ol li{
  position:relative;padding-left:29px;font-size:16px;line-height:1.85;
  letter-spacing:-.3px;color:#39405a;word-break:keep-all;counter-increment:n;
}
.art-body ol li::before{
  content:counter(n);position:absolute;left:0;top:.28em;
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  background:var(--accent-soft);color:var(--accent-strong);
}
.art-body strong{color:var(--t1);font-weight:750}
.art-body blockquote{
  padding:var(--sp4) var(--sp5);border-radius:var(--r-md);
  background:var(--grad-surface);border:1px solid var(--accent-line);
  font-size:var(--fs-lead);line-height:1.8;color:#26314c;word-break:keep-all;
}
.art-body blockquote p{font-size:inherit;color:inherit}
.art-body .tip{
  padding:var(--sp4);border-radius:var(--r-md);
  background:var(--state-warn-soft);border:1px solid #f3e2bd;
}
.art-body .tip b{display:block;font-size:var(--fs-sm);font-weight:800;color:#8a6113;margin-bottom:6px}
.art-body .tip p{font-size:var(--fs-sm);line-height:1.75;color:#6f5215}
.art-body figure{margin:0}
.art-body figcaption{
  margin-top:9px;font-size:var(--fs-xs);color:var(--t4);text-align:center;
}
.art-body table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.art-body th,.art-body td{padding:11px 13px;border:1px solid var(--line);text-align:left}
.art-body th{background:var(--surface-soft);font-weight:750;color:var(--t1)}

/* 목차 */
.toc{
  padding:var(--sp4) var(--sp5);border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line);
}
.toc b{display:block;font-size:var(--fs-xs);font-weight:800;color:var(--t3);letter-spacing:.06em;margin-bottom:11px}
.toc ol{display:grid;gap:7px;counter-reset:t}
.toc li{counter-increment:t;padding-left:0}
.toc li::before{content:none}
.toc a{
  display:flex;gap:9px;font-size:var(--fs-sm);color:var(--t3);
  transition:color var(--d-fast) var(--ez);
}
.toc a::before{content:counter(t) ".";color:var(--t4);font-weight:700;flex:0 0 auto}
.toc a:hover{color:var(--accent-strong)}

/* 글 끝 CTA */
.art-cta{
  max-width:var(--maxw-narrow);margin:var(--sp7) auto 0;padding:0 var(--gutter);
}
.art-cta-in{
  padding:var(--sp5);border-radius:var(--r-lg);text-align:center;
  background:var(--grad-surface);border:1px solid var(--accent-line);
}
.art-cta-in b{
  display:block;font-size:var(--fs-h3);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h3);word-break:keep-all;
}
.art-cta-in p{margin-top:9px;font-size:var(--fs-sm);color:var(--t3);word-break:keep-all}
.art-cta-in a{margin-top:var(--sp4)}

/* 이어 읽기 */
.related{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
/* 이어 읽기 카드는 썸네일이 없어 제목 크기를 본문급으로 낮춘다 */
.related .post h3{font-size:var(--fs-body);margin-top:var(--sp3)}
.art-cta.spaced{margin-top:var(--sp7)}
.post-cat.inline{display:inline-flex}

/* ══════════ FAQ ══════════ */
.faqwrap{display:grid;grid-template-columns:212px minmax(0,1fr);gap:var(--sp6);align-items:start}

/* 카테고리 사이드 — 스크롤 따라 붙는다 */
.faqnav{position:sticky;top:calc(var(--shell-h) + var(--sp4))}
.faqnav b{
  display:block;font-size:var(--fs-xs);font-weight:800;color:var(--t3);
  letter-spacing:.06em;padding:0 11px var(--sp3);
}
.faqnav a{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:650;color:var(--t3);
  transition:var(--tr-base);
}
.faqnav a:hover{background:var(--surface-soft);color:var(--t1)}
.faqnav a.on{background:var(--accent-soft);color:var(--accent-strong)}
.faqnav a .n{margin-left:auto;font-size:11px;color:var(--t4)}

.faqgrp+.faqgrp{margin-top:var(--sp6)}
.faqgrp h2{
  font-size:var(--fs-h3);font-weight:800;color:var(--t1);
  letter-spacing:var(--ls-h3);padding-bottom:var(--sp3);
  border-bottom:1px solid var(--line);
}
.faqgrp h2 span{font-size:var(--fs-xs);font-weight:650;color:var(--t4);margin-left:9px}

.qa{border-bottom:1px solid var(--line-soft)}
.qa summary{
  display:flex;align-items:flex-start;gap:var(--sp3);cursor:pointer;
  padding:16px 4px;list-style:none;
  font-size:var(--fs-body);font-weight:700;color:var(--t1);
  letter-spacing:-.3px;line-height:1.55;word-break:keep-all;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{
  content:"Q";flex:0 0 auto;
  width:22px;height:22px;border-radius:var(--r-xs);margin-top:1px;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  background:var(--surface-soft);color:var(--t3);
  transition:var(--tr-base);
}
.qa[open] summary::before{background:var(--accent);color:#fff}
.qa summary::after{
  content:"";flex:0 0 auto;margin-left:auto;margin-top:7px;
  width:9px;height:9px;
  border-right:2px solid var(--t4);border-bottom:2px solid var(--t4);
  transform:rotate(45deg);
  transition:transform var(--d-base) var(--ez);
}
.qa[open] summary::after{transform:rotate(-135deg);border-color:var(--accent-strong)}
.qa .a{
  padding:0 4px 20px 39px;
  font-size:var(--fs-sm);color:var(--t3);line-height:1.85;word-break:keep-all;
}
.qa .a p+p{margin-top:11px}
.qa .a a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px}
.qa .a ul{display:grid;gap:7px;margin-top:11px}
.qa .a ul li{position:relative;padding-left:15px}
.qa .a ul li::before{
  content:"";position:absolute;left:2px;top:.65em;
  width:5px;height:5px;border-radius:50%;background:var(--blue-300);
}

/* 문의 유도 */
.askbox{
  margin-top:var(--sp6);padding:var(--sp5);border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;
}
.askbox div{flex:1 1 260px}
.askbox b{display:block;font-size:var(--fs-h3);font-weight:800;color:var(--t1);letter-spacing:var(--ls-h3)}
.askbox p{margin-top:7px;font-size:var(--fs-sm);color:var(--t3)}

/* ══════════ 공지 ══════════ */
.notices{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden}
.notice{
  display:flex;align-items:flex-start;gap:var(--sp4);
  padding:var(--sp4) var(--sp5);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--d-fast) var(--ez);
}
.notice:last-child{border-bottom:0}
.notice:hover{background:var(--accent-soft)}
/* 고정 공지 */
.notice.pin{background:var(--state-warn-soft)}
.notice.pin:hover{background:#fdf1dc}

.n-tag{
  flex:0 0 auto;display:inline-flex;align-items:center;
  height:22px;padding:0 9px;border-radius:var(--r-xs);margin-top:2px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;
}
.n-tag.up{background:var(--accent-soft);color:var(--accent-strong)}     /* 업데이트 */
.n-tag.ck{background:var(--state-done-soft);color:var(--teal-700)}      /* 점검 */
.n-tag.ev{background:var(--state-ai-soft);color:var(--peri-700)}        /* 이벤트 */
.n-tag.im{background:var(--state-warn);color:#fff}                      /* 중요 */

.n-b{flex:1 1 auto;min-width:0}
.n-b h3{
  font-size:var(--fs-body);font-weight:700;color:var(--t1);
  letter-spacing:-.3px;line-height:1.5;word-break:keep-all;
}
.n-b p{
  margin-top:6px;font-size:var(--fs-sm);color:var(--t3);line-height:1.65;
  word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.n-b .m{margin-top:9px;display:flex;gap:var(--sp3);font-size:var(--fs-xs);color:var(--t4)}
.n-date{flex:0 0 auto;font-size:var(--fs-xs);color:var(--t4);margin-top:3px}

/* ══════════ 페이지네이션 ══════════ */
.pager{display:flex;justify-content:center;gap:5px;margin-top:var(--sp6)}
.pager a,.pager span{
  min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  font-size:var(--fs-sm);font-weight:650;color:var(--t3);
  border:1px solid transparent;transition:var(--tr-base);
}
.pager a:hover{background:var(--surface-soft);color:var(--t1)}
.pager .on{background:var(--accent);color:#fff;box-shadow:var(--e-accent)}
.pager .off{color:var(--t4);cursor:not-allowed}

/* ══════════ 반응형 ══════════ */
@media (max-width:1000px){
  .posts{grid-template-columns:1fr 1fr}
  .post.lead{grid-column:span 2}
  .faqwrap{grid-template-columns:1fr;gap:var(--sp5)}
  .faqnav{position:static}
  .faqnav > div{display:flex;flex-wrap:wrap;gap:5px}
  .faqnav a{border:1px solid var(--line);border-radius:var(--r-full);padding:7px 13px}
}
@media (max-width:680px){
  .posts{grid-template-columns:1fr}
  .post.lead{grid-column:auto;flex-direction:column}
  .post.lead .post-thumb{width:100%;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line-soft)}
  .related{grid-template-columns:1fr}
  .notice{flex-wrap:wrap;gap:var(--sp3)}
  .n-date{order:3;width:100%}
  .art-body p,.art-body ul li,.art-body ol li{font-size:15.5px;line-height:1.85}
}

/* ▼ 우리 추가 */

/* 아직 쓰이지 않은 글 — 링크가 아니라 표시만 있는 카드.
   인계본은 아홉 장을 전부 같은 글로 보냈다. 제목과 다른 글이 열리므로 그렇게 두지 않고,
   본문이 있는 글만 링크로 만든다. 나머지는 눌리지 않는다는 것이 보여야 한다. */
.post.is-soon { cursor: default; opacity: .62; }
.post.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line); }