/*
 * 콘텐츠(B2C 블로그) — 목록 `content.html` · 글 `content/<slug>.html` 공통 스타일.
 * 값은 이 사이트에 이미 있는 것만 쓴다: 색은 DDS 토큰(assets/interview/interview.css 와 같은 값),
 * 헤더·목록 제목 크기는 index.html(합격 자료집 목록 h1 32/48·700, 설명 16/26 o64).
 * 레이아웃은 사용자 레퍼런스(당근 채용 블로그·오늘의집 블로그·토스 테크·Medium)의 공통 골격:
 *   목록 = 제목+한 줄 설명 → 카테고리 칩 → 썸네일 카드 그리드 / 글 = 좁은 본문 칼럼(720) 가운데, 카테고리·제목·날짜 → 표지 → 본문.
 * 표지 없는 글은 무늬 없는 그라데이션만 쓴다. 표지(목록 썸네일·글 상단)에는 테두리를 두지 않는다(2026-10-21 사용자 결정).
 */
:root{
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --p5:#f3f5ff; --p10:#e4e8ff; --p20:#bdc7ff; --p50:#516bff; --p60:#3f57e5; --p70:#2f41bb;
  --n5:#f7f7f7; --n10:#ececec;
  --e5:#fee8e8; --e60:#da2e2e;
  --o8:rgba(0,0,0,.08); --o16:rgba(0,0,0,.16); --o48:rgba(0,0,0,.48); --o64:rgba(0,0,0,.64); --o88:rgba(0,0,0,.88);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:9999px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);background:#fff;color:var(--o88);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
button{font-family:inherit}

/* 헤더 — index.html 과 같은 마크업. 좁은 화면 규칙도 index.html(2026-10-13)과 같은 값 */
.ct-gnb{height:80px;background:#fff;border-bottom:1px solid var(--o8);position:sticky;top:0;z-index:40;display:flex;align-items:center}
.ct-gnb-in{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:40px}
.ct-gnb-logo{display:inline-flex;align-items:center;gap:8px;flex:none;text-decoration:none}
.ct-gnb-logo img{width:32px;height:32px;pointer-events:none}
.ct-gnb-logo span{font-size:20px;line-height:28px;font-weight:600;color:#030712}
.ct-gnb-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500;color:var(--o64)}
.ct-gnb-links a{color:inherit;text-decoration:none}
.ct-gnb-links a[aria-current="page"]{color:#516bff;font-weight:600}
@media (max-width:768px){
  .ct-gnb-in{gap:12px}
  .ct-gnb-links{gap:8px;font-size:13px;white-space:nowrap}
  .ct-gnb-logo{gap:6px}
  .ct-gnb-logo span{font-size:16px}
}
@media (max-width:400px){ .ct-gnb-logo span{display:none} }

/* ── 목록 ─────────────────────────────────────────── */
.ct-list{max-width:1200px;margin:0 auto;padding:48px 24px 120px}
.ct-h1{margin:0;font-size:32px;line-height:48px;font-weight:700;letter-spacing:-.6px}
.ct-desc{margin:6px 0 0;font-size:16px;line-height:26px;color:var(--o64)}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 32px}
.ct-chip{height:36px;padding:0 16px;border-radius:var(--r-full);border:1px solid var(--o8);background:#fff;
  font-size:14px;line-height:22px;font-weight:500;color:var(--o64);cursor:pointer}
.ct-chip:hover{background:var(--n5)}
.ct-chip[aria-pressed="true"]{background:var(--o88);border-color:transparent;color:#fff}
.ct-chips[hidden] + .ct-grid{margin-top:40px}
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
@media (max-width:1024px){ .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ct-grid{grid-template-columns:1fr;gap:40px} }
.ct-card{display:block;color:inherit;text-decoration:none}
.ct-thumb{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(135deg,var(--p10) 0%,var(--p5) 100%);
  transition:transform 160ms ease-out}
.ct-thumb img{width:100%;height:100%;object-fit:cover}
.ct-card:hover .ct-thumb{transform:translateY(-3px)}
.ct-card:hover .ct-card-t{text-decoration:underline;text-underline-offset:3px}
.ct-kicker{margin-top:16px;font-size:13px;line-height:20px;font-weight:600;color:var(--p60)}
.ct-card-t{margin:4px 0 0;font-size:19px;line-height:28px;font-weight:700;letter-spacing:-.3px;color:var(--o88);
  word-break:keep-all;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 여러 칸일 때 제목을 늘 2줄 높이로 잡아 옆 카드와 설명·날짜 줄을 맞춤 */
@media (min-width:641px){ .ct-card-t{min-height:56px} }
.ct-card-s{margin:6px 0 0;font-size:15px;line-height:24px;color:var(--o64);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-meta{margin-top:10px;font-size:13px;line-height:20px;color:var(--o48)}
.ct-empty{padding:80px 0;text-align:center;font-size:15px;line-height:24px;color:var(--o48)}

/* ── 글 ───────────────────────────────────────────── */
.ct-post{max-width:768px;margin:0 auto;padding:64px 24px 120px}
.ct-post-kicker{font-size:15px;line-height:24px;font-weight:600;color:var(--p60);text-decoration:none}
.ct-post-h1{margin:12px 0 0;font-size:40px;line-height:54px;font-weight:700;letter-spacing:-.8px;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.ct-post-sub{margin:12px 0 0;font-size:19px;line-height:30px;color:var(--o64);word-break:keep-all}
.ct-post-meta{margin-top:20px;display:flex;align-items:center;gap:8px;font-size:14px;line-height:22px;color:var(--o48)}
.ct-post-meta .sep{width:1px;height:12px;background:var(--o16)}
.ct-share{margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--o8);border-radius:var(--r-sm);background:#fff;
  font-size:13px;font-weight:500;color:var(--o64);cursor:pointer}
.ct-share:hover{background:var(--n5)}
.ct-cover{margin:40px 0 0;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--p10) 0%,var(--p5) 100%)}
.ct-cover img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .ct-post{padding-top:40px}
  .ct-post-h1{font-size:28px;line-height:40px;letter-spacing:-.5px}
  .ct-post-sub{font-size:17px;line-height:27px}
  .ct-cover{margin-top:28px;border-radius:var(--r-md)}
}

/* 본문 — 원고를 옮길 때 쓰는 요소: h2 · h3 · p · ul/ol · blockquote · figure(+figcaption) · .ct-note(안내 상자) · hr */
.ct-body{margin-top:48px;font-size:17px;line-height:30px;color:var(--o88);word-break:keep-all;overflow-wrap:break-word}
.ct-body > *:first-child{margin-top:0}
.ct-body p{margin:20px 0 0}
.ct-body h2{margin:56px 0 0;font-size:26px;line-height:38px;font-weight:700;letter-spacing:-.4px}
.ct-body h3{margin:40px 0 0;font-size:20px;line-height:30px;font-weight:700;letter-spacing:-.2px}
.ct-body ul,.ct-body ol{margin:20px 0 0;padding-left:24px}
.ct-body li{margin-top:8px}
.ct-body li::marker{color:var(--o48)}
.ct-body strong{font-weight:700}
.ct-body a{color:var(--p60);text-decoration:underline;text-underline-offset:3px}
.ct-body a:hover{color:var(--p70)}
.ct-body blockquote{margin:32px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--p50);color:var(--o64)}
.ct-body blockquote p:first-child{margin-top:0}
.ct-body figure{margin:40px 0 0}
.ct-body figure img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--o8)}
.ct-body figcaption{margin-top:10px;font-size:14px;line-height:22px;color:var(--o48);text-align:center}
.ct-body hr{margin:48px 0 0;border:0;border-top:1px solid var(--o8)}
.ct-note{margin:32px 0 0;padding:20px 24px;border-radius:var(--r-md);background:var(--p5);font-size:16px;line-height:28px}
.ct-note p:first-child{margin-top:0}
@media (max-width:640px){
  .ct-body{margin-top:36px;font-size:16px;line-height:28px}
  .ct-body h2{margin-top:48px;font-size:22px;line-height:32px}
  .ct-body h3{font-size:18px;line-height:28px}
}

/* 글 아래 — 다른 콘텐츠 */
.ct-more{max-width:1200px;margin:-24px auto 0;padding:48px 24px 120px;border-top:1px solid var(--o8)}
/* 제목 줄 오른쪽 끝에 「전체 보기」 — 두 글자의 기준선(baseline)을 맞춘다 */
.ct-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.ct-more-h{margin:0;font-size:22px;line-height:32px;font-weight:700;letter-spacing:-.3px}
.ct-more-all{flex:none;font-size:15px;line-height:24px;font-weight:600;color:var(--p60);text-decoration:none;white-space:nowrap}
.ct-more-all:hover{color:var(--p70)}

/* 표지 없는 글의 그라데이션 — 카테고리별 색(DDS 토큰 값, assets/interview/interview.css 와 같음). 무늬 없이 색만 */
.ct-tone-0{background:linear-gradient(135deg,#e4e8ff 0%,#f3f5ff 100%)}
.ct-tone-1{background:linear-gradient(135deg,#d3effe 0%,#e8f6fd 100%)}
.ct-tone-2{background:linear-gradient(135deg,#f8ebb6 0%,#faf3d8 100%)}
.ct-tone-3{background:linear-gradient(135deg,#ececec 0%,#f7f7f7 100%)}

/* ── 정보형 글 부품 ─────────────────────────────────
 * 단계 표시(.ct-tag) · 파란 칩 강조(.ct-hl) · 툴 추천 표/정보 줄 · 공시 원문 인용(.ct-src) · ✕/○ 비교(.ct-vs)
 * 본문 공통 여백(.ct-body p·h3)이 부품 안까지 덮지 않도록 부품 안 요소는 .ct-body 를 붙여 우선순위를 올렸다 */
.ct-tag{display:inline-block;margin:56px 0 0;padding:4px 10px;border-radius:6px;background:var(--p50);color:#fff;font-size:14px;line-height:22px;font-weight:600}
.ct-tag + h2{margin-top:12px}
.ct-hl{padding:1px 4px;border-radius:4px;background:var(--p10);color:var(--p60);font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 툴 추천 글(리뷰형) — 「한눈에 보기」 표 + 툴마다 h3 · 한 줄 정보(.ct-toolmeta) · 화면 캡처(figure) · 설명 */
.ct-table-wrap{margin:24px 0 0;overflow-x:auto;border:1px solid var(--o8);border-radius:var(--r-md)}
.ct-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:22px}
.ct-table th,.ct-table td{padding:10px 14px;border-bottom:1px solid var(--o8);text-align:left;vertical-align:top}
.ct-table thead th{background:var(--n5);font-size:13px;font-weight:600;color:var(--o64);white-space:nowrap}
.ct-table tbody tr:last-child td{border-bottom:0}
.ct-table td[rowspan]{font-weight:600;color:var(--o64);border-right:1px solid var(--o8);white-space:nowrap}
.ct-table td a{color:var(--o88);font-weight:600;text-decoration:none}
.ct-table td a:hover{color:var(--p60);text-decoration:underline}
.ct-table td:last-child{white-space:nowrap;color:var(--p60);font-weight:600}
.ct-body h3[id]{scroll-margin-top:96px}
.ct-body .ct-toolmeta{margin:6px 0 0;font-size:14px;line-height:22px;color:var(--o48)}
.ct-body .ct-toolmeta a{color:var(--o48)}
.ct-body .ct-toolmeta a:hover{color:var(--p60)}
.ct-body .ct-toolmeta + figure{margin-top:16px}
.ct-body .ct-toolmeta-note{margin:12px 0 0;font-size:14px;line-height:22px;color:var(--o64)}

/* 공시 원문 인용 — 출처(어느 보고서 › 어느 목차)를 위에, 원문을 아래에. 찾을 단어는 mark(DDS tertiary-10 #f8ebb6) */
.ct-src{margin:24px 0 0;border:1px solid var(--o8);border-radius:var(--r-md);overflow:hidden;font-size:15px;line-height:26px}
.ct-src-from{padding:10px 16px;background:var(--n5);font-size:13px;line-height:20px;color:var(--o64);font-weight:500}
.ct-src-body{padding:14px 16px;overflow-x:auto}
.ct-body .ct-src-body p{margin:0}
.ct-body .ct-src-body p + p{margin-top:8px}
.ct-src mark{padding:0 2px;border-radius:3px;background:#f8ebb6;color:inherit}
.ct-src table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
.ct-src th,.ct-src td{padding:6px 8px;border-bottom:1px solid var(--o8);text-align:left;vertical-align:top}
.ct-src th{font-weight:600;color:var(--o64)}
.ct-src td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ✕/○ 문장 비교 — ✕ 는 빨강(DDS error 5·60) + 취소선, ○ 는 파랑 테두리로 눈에 띄게.
   라벨에 글자(「이렇게 쓰지 마세요」)를 같이 써서 색만으로 구분하지 않는다 */
.ct-vs{margin:24px 0 0;display:grid;gap:12px}
.ct-vs-item{margin:0;padding:16px 20px;border-radius:var(--r-md)}
.ct-vs-label{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;line-height:20px;font-weight:700}
.ct-vs-mark{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:#fff;font-size:12px;line-height:1}
.ct-body .ct-vs-item p{margin:0}
.ct-vs-bad{background:var(--e5);border:1px solid rgba(218,46,46,.24)}
.ct-vs-bad .ct-vs-label{color:var(--e60)}
.ct-vs-bad .ct-vs-mark{background:var(--e60)}
.ct-vs-bad p{color:var(--o64);text-decoration:line-through;text-decoration-color:var(--e60);text-decoration-thickness:1.5px}
.ct-vs-good{background:var(--p5);border:1.5px solid var(--p50)}
.ct-vs-good .ct-vs-label{color:var(--p60)}
.ct-vs-good .ct-vs-mark{background:var(--p50)}
.ct-vs-good p{color:var(--o88);font-weight:500}

/* 툴 하나의 「언제 쓰나요? / 어떻게 쓰나요?」 — 라벨은 작게 위에, 답은 본문 크기로 바로 아래.
   두 쌍을 한 덩어리(dl)로 묶어 문단 여백이 두 번 생기지 않게 한다 */
.ct-body .ct-use{margin:20px 0 0;display:grid;gap:4px}
.ct-body .ct-use dt{font-size:14px;line-height:22px;font-weight:600;color:var(--p60)}
.ct-body .ct-use dd{margin:0}
.ct-body .ct-use dd + dt{margin-top:12px}

/* 해마다 비교하는 글(자소서 문항 등) — 「한눈에 보기」 표의 마지막 칸이 길어도 줄바꿈되게, 원문 상자 안 번호 목록·상자끼리 간격 */
.ct-table-cmp{min-width:640px}
.ct-table-cmp td:last-child{white-space:normal}
.ct-table-cmp td:first-child{white-space:nowrap}
.ct-src + .ct-src{margin-top:12px}
.ct-body .ct-src-body ol,.ct-body .ct-src-body ul{margin:0;padding-left:20px}
.ct-body .ct-src-body li{margin-top:6px}
.ct-body .ct-src-body li:first-child{margin-top:0}
.ct-body .ct-src-body p + ol{margin-top:10px}

/* 글 끝 서비스 안내(CTA) — 연한 파랑 상자에 제목·설명·실제 화면 캡처·꽉 찬 버튼. 링크는 글자 링크가 아니라 버튼으로 */
.ct-cta{margin:32px 0 0;padding:28px;border-radius:var(--r-lg);background:var(--p5);border:1px solid var(--p10)}
.ct-body .ct-cta-kicker{margin:0;font-size:14px;line-height:22px;font-weight:600;color:var(--p60)}
.ct-body .ct-cta-t{margin:4px 0 0;font-size:22px;line-height:32px;font-weight:700;letter-spacing:-.3px;color:var(--o88)}
.ct-body .ct-cta-s{margin:8px 0 0;font-size:16px;line-height:26px;color:var(--o64)}
.ct-body .ct-cta figure{margin:20px 0 0}
.ct-body .ct-cta figure img{border-color:var(--p10);background:#fff}
.ct-body a.ct-cta-btn{display:flex;align-items:center;justify-content:center;margin-top:20px;height:52px;border-radius:var(--r-md);background:var(--p50);color:#fff;font-size:17px;font-weight:700;text-decoration:none}
.ct-body a.ct-cta-btn::after{content:"→";margin-left:8px}
.ct-body a.ct-cta-btn:hover{background:var(--p60);color:#fff}
@media (max-width:640px){
  .ct-cta{padding:20px}
  .ct-body .ct-cta-t{font-size:20px;line-height:30px}
}

/* 따라 하기 가이드(AI 프로젝트 등) — 순서 목록을 ct-use 답 안에, 독자가 채울 빈칸 표(.ct-table-fill), 복사 버튼 달린 프롬프트 상자(.ct-prompt) */
.ct-body .ct-use dd ol{margin:4px 0 0;padding-left:22px}
.ct-body .ct-use dd li{margin-top:4px}
.ct-table-fill td:last-child{white-space:normal;color:inherit;font-weight:400}
.ct-table-fill td{min-width:96px}
.ct-table-fill td.ct-blank{min-width:180px;height:44px}
.ct-table-fill tbody td:first-child{font-weight:600;color:var(--o64)}
.ct-prompt{margin:16px 0 0;border:1px solid var(--o8);border-radius:var(--r-md);overflow:hidden}
.ct-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;background:var(--n5);font-size:14px;line-height:22px;font-weight:600;color:var(--o64)}
.ct-prompt-copy{height:30px;padding:0 12px;border:1px solid var(--o8);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:13px;font-weight:500;color:var(--o64);cursor:pointer}
.ct-prompt-copy:hover{color:var(--p60);border-color:var(--p50)}
.ct-prompt pre{margin:0;padding:14px 16px;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;font-family:inherit;font-size:15px;line-height:26px;color:var(--o88)}