/* 크래빗 아카데미 공통 크롬: 헤더, 검색, 푸터, 멤버십 띠, 썸네일(.kt), 북마크.
   모든 페이지(홈, 목록, 상세, 아티클, 자료)가 함께 씁니다. 페이지 스타일과 섞이지 않게
   변수는 --kb- 접두사, 선택자는 .kb- / .kt / .cta-strip / .bm 로만 씁니다. */
:root {
  --kb-ink: #16192A; --kb-muted: rgba(22, 25, 42, 0.55); --kb-faint: rgba(22, 25, 42, 0.30);
  /* 카카오 비즈니스 세미나식 팔레트: UI는 흰색, 회색 3단계, 남색 잉크만. 색은 썸네일(주제 6색)이 맡습니다.
     포인트 핑크는 메뉴 밑줄, 오늘 태그, 섹션 라벨, 입력 포커스에만 씁니다. */
  --kb-line: #E8E8E8; --kb-fill: #F2F3F6; --kb-fill-soft: #F5F6FA; --kb-band: #ECEEF6; --kb-soft: #F5F6FA;
  --kb-pink: #FB75BB; --kb-tint: #ECEEF6; --hd: 72px;
}
.kb-header, .kb-mnav, .kb-search, .kb-footer, .cta-strip, .kt, .kb-top {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  letter-spacing: -0.01em; box-sizing: border-box; line-height: 1.6;
}
:where(.kb-header, .kb-mnav, .kb-search, .kb-footer, .cta-strip, .kt) * { box-sizing: border-box; }
:where(.kb-header, .kb-mnav, .kb-search, .kb-footer, .cta-strip) a { color: inherit; text-decoration: none; }
.kb-footer a, .kb-mnav a, .kb-search .res a, .kb-logo { color: inherit; text-decoration: none; }
.kb-header button, .kb-search input { font-family: inherit; }
header.kb-header, footer.kb-footer { border: 0; margin: 0; }
.kb-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.kb-header { position: sticky; top: 0; z-index: 60; background: #fff; height: var(--hd); transition: box-shadow .2s; }
.kb-header.scrolled { box-shadow: 0 2px 12px rgba(22, 25, 42, 0.08); }
.kb-header .in { max-width: 1120px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.kb-logo img { height: 24px; display: block; }
.kb-nav { position: absolute; left: 50%; transform: translateX(-50%); height: 100%; display: flex; gap: 8px; }
.kb-nav a { position: relative; display: flex; align-items: center; padding: 0 28px; font-size: 15px; font-weight: 600; color: var(--kb-ink); white-space: nowrap; }
.kb-nav a.on::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--kb-pink); }
.kb-right { display: flex; align-items: center; gap: 12px; }
.kb-icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kb-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--kb-ink); }
.kb-icon-btn:hover { background: #F8F8FA; }
.kb-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 99px; background: var(--kb-ink); color: #fff; font-size: 13px; font-weight: 600; transition: background .15s; }
.kb-pill:hover { background: #333; }
/* 로그인 / 내 계정. 채널 버튼과 겹치지 않게 Secondary(흰 배경, 회색 보더) 버튼으로 둡니다. */
.kb-acct { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--kb-line); background: #fff; color: var(--kb-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.kb-acct:hover { background: #F0F0F0; }
.kb-burger { display: none; }
.kb-mnav { display: none; position: fixed; top: var(--hd); left: 0; right: 0; background: #fff; padding: 8px 24px 20px; box-shadow: 0 12px 24px rgba(22, 25, 42, .08); z-index: 59; }
.kb-mnav.open { display: block; }
.kb-mnav a { display: block; padding: 15px 4px; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--kb-fill); }
.kb-mnav a:last-child { border: 0; }
.kb-search { position: fixed; inset: 0; z-index: 80; background: rgba(22, 25, 42, .45); display: none; align-items: flex-start; justify-content: center; padding: 90px 20px; }
.kb-search.open { display: flex; }
.kb-search .box { width: 100%; max-width: 640px; background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 24px 60px rgba(22, 25, 42, .25); }
.kb-search input { width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--kb-fill); padding: 0 18px; font-size: 16px; font-family: inherit; color: var(--kb-ink); }
.kb-search input:focus { outline: 2px solid var(--kb-pink); }
.kb-search .res { margin-top: 12px; max-height: 50vh; overflow: auto; }
.kb-search .res a { display: flex; gap: 10px; align-items: center; padding: 12px 8px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.kb-search .res a:hover { background: var(--kb-fill-soft); }
.kb-search .res small { color: var(--kb-muted); font-size: 12.5px; flex: none; width: 64px; }
.kb-search .res p { margin: 8px; color: var(--kb-muted); font-size: 14px; }
.kt { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; container-type: inline-size; background: var(--c, #EBD995); color: var(--f, #1A1A1A); }
.kt .kt-chips { position: absolute; top: 7cqw; left: 6.4cqw; display: flex; gap: 1.2cqw; z-index: 2; }
.kt .kt-chip { background: rgba(22, 25, 42, .72); color: #fff; font-size: 3.3cqw; font-weight: 600; line-height: 1; padding: 1.4cqw 2.4cqw; border-radius: 1.2cqw; letter-spacing: 0; white-space: nowrap; }
.kt .kt-chip.alt { background: rgba(255, 255, 255, .85); color: var(--kb-ink); }
.kt .ttl { position: absolute; left: 6.4cqw; top: 21cqw; width: 60cqw; margin: 0; font-size: 6.6cqw; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; white-space: pre-line; z-index: 2; word-break: keep-all; }
.kt .ttl.sm { font-size: 5.6cqw; }
.kt .ill { position: absolute; right: 4.5cqw; bottom: 5cqw; width: 36cqw; height: 36cqw; z-index: 1; }
.kt .ill svg { width: 100%; height: 100%; display: block; }
.kt .kt-chips { top: 6.4cqw; margin: 0; }
.bm { flex: none; width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--kb-ink); margin-top: 1px; }
.bm svg { width: 22px; height: 22px; display: block; }
.bm.on svg path { fill: var(--kb-ink); }
.kb-footer { background: #F5F6FA; padding: 40px 0 52px; font-size: 13px; color: var(--kb-muted); line-height: 1.8; }
.kb-footer .links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 20px; font-size: 13.5px; font-weight: 600; color: var(--kb-ink); }
.kb-footer .links a:hover { text-decoration: underline; }
.kb-footer p { margin: 0; }
.kb-footer .copy { margin-top: 16px; color: var(--kb-faint); }
.kb-footer img { height: 20px; display: block; margin-bottom: 18px; opacity: .85; }
.kb-top { position: fixed; right: 28px; bottom: 28px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 16px rgba(22, 25, 42, .18); display: none; place-items: center; cursor: pointer; z-index: 50; color: var(--kb-ink); }
.kb-top.show { display: grid; }
.cta-strip { background: var(--kb-tint); }
.cta-strip .in { max-width: 1120px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cta-strip strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.cta-strip span { display: block; font-size: 14px; color: var(--kb-muted); margin-top: 2px; }
.cta-strip a { flex: none; height: 42px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 99px; background: var(--kb-ink); color: #fff; font-size: 14px; font-weight: 600; }
.cta-strip a:hover { background: #333; }
.kt.ol .ill { background: #fff; border-radius: 50%; padding: 2.4cqw; width: 33cqw; height: 33cqw; bottom: 5.5cqw; }

.kt .ill img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 700px) {
  :root { --hd: 60px; }
  .kb-nav { display: none; }
  .kb-pill { display: none; }
  .kb-acct { display: none; }
  .kb-burger { display: grid; }
  .kb-top { right: 16px; bottom: 16px; }
  .cta-strip .in { flex-direction: column; align-items: flex-start; }
}

/* 아티클, 자료 상세의 대표 썸네일 */
.kt-hero { margin: 0 0 32px; }
.kt-hero .kt { border-radius: 16px; }
button, input, select, textarea { font-family: inherit; }
strong, b { font-weight: 700; }

/* 옛 페이지 카드 정리: 크래빗 규칙대로 테두리를 빼고 배경색 대비로만 구분합니다. */
.buy, .sp, .m-item, .replay-slot, .s2-authbox, .vs-card, .howto, .prompt-card { border: 0 !important; }
.buy, .sp, .howto, .prompt-card { background-color: #F5F6FA !important; }
.vs-card.rec { background-color: var(--kb-soft) !important; }

/* 썸네일 인물 컷: 우측 하단에 바닥에 붙여 세웁니다. 여러 명이면 살짝 겹쳐 나란히 */
.kt .ppl { position: absolute; right: 3cqw; bottom: 0; height: 84%; display: flex; align-items: flex-end; z-index: 1; }
.kt .ppl img { height: 100%; width: auto; display: block; object-fit: contain; }
/* 두 명: 오른쪽에 작게 붙여 살짝 겹칩니다. 제목(왼쪽 60%)을 가리지 않게 높이를 낮춥니다. */
.kt .ppl.n2 { height: 66%; right: 2cqw; }
.kt .ppl.n2 img + img { margin-left: -7cqw; }
/* 세 명: 삼각형 배치(카카오 세미나 성공사례 썸네일). 가운데 사람이 뒤에서 크게, 양옆 두 사람이 앞에서 낮게 겹칩니다. */
.kt .ppl.n3 { display: block; width: 50cqw; height: 92%; right: 1.5cqw; bottom: 0; }
/* 앞줄 두 명은 바닥에 붙여 양옆에, 뒷줄 한 명은 가운데 위로. 세 사진 모두 가슴 위까지만 있는 컷이라
   뒷사람 사진의 아래 끝이 앞사람 둘에게 가려지도록 높이와 위치를 맞춥니다. */
.kt .ppl.n3 img { position: absolute; bottom: 0; height: 58%; width: auto; }
.kt .ppl.n3 img:nth-child(1) { left: 0; z-index: 2; }
.kt .ppl.n3 img:nth-child(2) { left: 50%; transform: translateX(-50%); bottom: 32%; z-index: 1; }
.kt .ppl.n3 img:nth-child(3) { right: 0; z-index: 3; }

/* 멤버십 띠가 본문 마지막 카드에 붙지 않게. 홈과 목록(kbs.css)은 자체 여백이 있어 0으로 되돌립니다. */
.cta-strip { margin-top: 80px; }

/* 실시간 형식(교육, 설명회) 썸네일: 짙은 바탕 + 흰 글씨. 칩은 반투명 흰색, LIVE 점은 흰색(교육 배경이 핑크라서) */
.kt.dk .kt-chip { background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; gap: 1cqw; }
.kt.dk .kt-chip.alt { background: rgba(255, 255, 255, .9); color: var(--kb-ink); }
.kt .kt-live { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #FB75BB; flex: none; }
.kt.dk .kt-live { background: #fff; }
.kt.lv .kt-chip { display: inline-flex; align-items: center; gap: 1cqw; }
.kt.dk .ill img { filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .18)); }