/* ==========================================================================
   Basic Korean — 블로그 전체 브랜드 스킨 (bk-theme.css)
   Blogger 기본 테마(Contempo) 위에 덮어쓰는 스킨.
   강의 페이지(bk.css)와 같은 팔레트: 틸 #3fa796 · 코랄 #e0726e · Jua/Quicksand.
   설치: 테마 head 의 bk.css 줄 아래에 이 파일 링크 1줄 추가 (README 참고)
   ========================================================================== */

:root {
  --bk-bg: #ffffff;
  --bk-bg2: #f3f7f6;
  --bk-line: #e4eae8;
  --bk-ink: #242a28;
  --bk-muted: #7b847f;
  --bk-teal: #3fa796;
  --bk-teal-dark: #2c8273;
  --bk-teal-soft: #e2f1ee;
  --bk-coral: #e0726e;
  --bk-coral-soft: #fdeeed;
  --bk-display: "Jua", "Noto Sans KR", sans-serif;
  --bk-sans: "Noto Sans KR", -apple-system, "Helvetica Neue", sans-serif;
}

/* ---------- 전체 바탕 · 기본 글꼴 ---------- */
body {
  font-family: var(--bk-sans) !important;
  color: var(--bk-ink) !important;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(63, 167, 150, .08), transparent 60%),
    radial-gradient(760px 480px at -8% 108%, rgba(224, 114, 110, .08), transparent 60%),
    var(--bk-bg) !important;
}
.page_body, .bg-photo, .bg-photo-overlay { background: transparent !important; }
a { color: var(--bk-teal-dark); }
a:hover { color: var(--bk-teal); }

/* ---------- 상단 헤더 ---------- */
.centered-top-container, .centered-top-placeholder {
  background: rgba(255, 255, 255, .85) !important;
  border-bottom: 1px solid var(--bk-line);
  backdrop-filter: blur(8px);
}
.widget.Header .title, .widget.Header h1, .blog-name .title {
  font-family: "Quicksand", var(--bk-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  color: var(--bk-ink) !important;
  text-transform: uppercase;
}
.widget.Header .title a { color: var(--bk-ink) !important; }
.widget.Header .subtitle, .blog-name .subtitle {
  font-family: var(--bk-sans) !important;
  color: var(--bk-muted) !important;
  font-size: 14px;
}
/* 헤더 링크 목록 (Youtube/Instagram 등) — 알약 버튼 */
.widget.PageList a, .widget.LinkList a {
  display: inline-block;
  border: 1px solid var(--bk-line);
  background: #fff;
  color: var(--bk-teal-dark) !important;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: .12s;
}
.widget.PageList a:hover, .widget.LinkList a:hover {
  border-color: var(--bk-teal);
  background: var(--bk-teal-soft);
}
.widget.PageList li, .widget.LinkList li { border: 0 !important; }

/* ---------- 카테고리 메뉴 (bk-nav.js 가 삽입) ---------- */
#bk-nav {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--bk-line);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 30;
}
#bk-nav .bk-nav-in {
  max-width: 968px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#bk-nav .bk-nav-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 74px;
  padding: 7px 14px 6px;
  border-radius: 12px;
  text-decoration: none !important;
  border-bottom: 2.5px solid transparent;
  transition: .12s;
  white-space: nowrap;
}
#bk-nav .bk-nav-a .k {
  font-family: var(--bk-display);
  font-size: 16.5px;
  color: var(--bk-ink);
  line-height: 1.25;
}
#bk-nav .bk-nav-a .e {
  font-family: "Quicksand", var(--bk-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--bk-muted);
  text-transform: uppercase;
}
#bk-nav .bk-nav-a:hover { background: var(--bk-teal-soft); }
#bk-nav .bk-nav-a:hover .k { color: var(--bk-teal-dark); }
#bk-nav .bk-nav-a.on { border-bottom-color: var(--bk-coral); }
#bk-nav .bk-nav-a.on .k { color: var(--bk-teal-dark); }
#bk-nav .bk-nav-a.on .e { color: var(--bk-coral); }
@media (max-width: 640px) {
  #bk-nav .bk-nav-in { justify-content: flex-start; }
  #bk-nav .bk-nav-a { min-width: 64px; padding: 6px 10px 5px; }
  #bk-nav .bk-nav-a .k { font-size: 15px; }
}

/* ---------- 홈 글 목록 → 카드 ---------- */
.blog-posts .post-outer-container, .blog-posts .post-outer {
  background: #fff !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 18px rgba(63, 167, 150, .06) !important;
  overflow: hidden;
  transition: transform .12s, border-color .12s;
}
.blog-posts .post-outer-container:hover { border-color: var(--bk-teal) !important; transform: translateY(-2px); }
.post-title, .post-title.entry-title, h3.post-title {
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.post-title a { color: var(--bk-ink) !important; text-decoration: none !important; }
.post-title a:hover { color: var(--bk-teal-dark) !important; }
.snippet-item, .post-snippet { color: var(--bk-muted) !important; font-size: 14.5px; line-height: 1.7; }
.snippet-thumbnail img { border-radius: 12px; }

/* 날짜/작성자 줄 정리 */
.post-header .byline { color: var(--bk-muted) !important; font-size: 12.5px; }
.byline.post-author, .byline.post-share-buttons { display: none !important; } /* 작성자·공유 메뉴 숨김 */

/* Read more 버튼 */
.jump-link, .jump-link.flat-button {
  border: 0 !important;
}
.jump-link a, a.jump-link {
  display: inline-block;
  background: var(--bk-teal) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13.5px !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.jump-link a:hover, a.jump-link:hover { filter: brightness(1.06); }

/* 글 더보기 (페이지네이션) */
#blog-pager a, .blog-pager a {
  border: 1px solid var(--bk-line) !important;
  background: #fff !important;
  color: var(--bk-teal-dark) !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#blog-pager a:hover, .blog-pager a:hover { border-color: var(--bk-teal) !important; background: var(--bk-teal-soft) !important; }

/* ---------- 개별 글 화면 ---------- */
.post-body, .post-body.entry-content { font-family: var(--bk-sans); color: var(--bk-ink); }
.post-outer-container .post-title { font-size: 28px; }

/* ---------- 사이드바 ---------- */
.sidebar-container {
  background: #fbfdfc !important;
  border-left: 1px solid var(--bk-line);
}
.sidebar-container .widget .title, .sidebar-container .widget h2, .sidebar-container .widget h3.title {
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  color: var(--bk-teal-dark) !important;
  font-size: 18px !important;
  border-left: 3px solid var(--bk-coral);
  padding-left: 10px;
}
/* 연도별 보관함 숨김 */
.widget.BlogArchive { display: none !important; }
/* 'Powered by Blogger' / 신고 줄은 그대로 두기 (정책) */

/* 인기 게시물 */
.widget.PopularPosts .item-title a { color: var(--bk-ink) !important; font-weight: 700; }
.widget.PopularPosts .item-title a:hover { color: var(--bk-teal-dark) !important; }
.widget.PopularPosts .item-snippet { color: var(--bk-muted) !important; font-size: 13px; }
.widget.PopularPosts img { border-radius: 10px; }

/* 라벨 → 칩 */
.widget.Label li, .widget.Label li.list-label-widget-content {
  display: inline-block !important;
  border: 0 !important;
  margin: 3px 4px 3px 0 !important;
  padding: 0 !important;
}
.widget.Label a {
  display: inline-block;
  border: 1px solid var(--bk-line);
  background: #fff;
  color: var(--bk-ink) !important;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: .12s;
}
.widget.Label a:hover { border-color: var(--bk-coral); color: var(--bk-coral) !important; background: var(--bk-coral-soft); }
.widget.Label .label-count { color: var(--bk-muted); font-size: 11.5px; }

/* 프로필 */
.widget.Profile .profile-name-link { color: var(--bk-teal-dark) !important; font-weight: 700; }
.widget.Profile img { border-radius: 50%; }

/* ---------- 검색창 ---------- */
.searchBox input, .search input.search-input {
  font-family: var(--bk-sans) !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--bk-line) !important;
}
.searchBox input:focus, .search input.search-input:focus { border-color: var(--bk-teal) !important; }

/* ---------- 푸터 ---------- */
.centered-bottom, footer.footer {
  background: var(--bk-bg2) !important;
  border-top: 1px solid var(--bk-line);
  color: var(--bk-muted) !important;
}

/* ---------- 모바일 보정 ---------- */
@media (max-width: 640px) {
  .blog-posts .post-outer-container { border-radius: 14px !important; }
  .post-outer-container .post-title { font-size: 22px; }
}


/* ==========================================================================
   v2 리디자인 (2026-06-12) — 시안: theme-mockup-home.html
   추천 카드 · 16:9 썸네일 카드 · 푸터 인기 그리드 · 헤더 그라디언트
   ========================================================================== */

/* ---------- 헤더: 틸→파랑 그라디언트 + 둥근 로고 ---------- */
.centered-top-container, .centered-top-placeholder {
  background: linear-gradient(135deg, var(--bk-teal-soft), #e7f0fa) !important;
}
.widget.Header img { border-radius: 50%; }

/* ---------- 홈 글 목록 위 섹션 제목 (bk-nav.js 가 body.bk-home 부여) ---------- */
body.bk-home .blog-posts::before {
  content: "● 최근 강의";
  display: block;
  font-family: var(--bk-display);
  font-size: 20px;
  color: var(--bk-teal-dark);
  margin: 10px 8px 4px;
}

/* (16:9 풀폭 썸네일 시도는 Contempo 마크업과 충돌해 롤백 — 2026-06-12.
   썸네일은 기본 플로트 + 둥근 모서리 유지) */

/* ---------- 추천 게시물(FeaturedPost) — 큰 카드 (1차, 마크업 확인 후 정밀화) ---------- */
.widget.FeaturedPost {
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(63, 167, 150, .10);
  padding: 22px 26px;
  margin: 24px 0 4px;
  transition: border-color .12s;
}
.widget.FeaturedPost:hover { border-color: var(--bk-teal); }
.widget.FeaturedPost .title {
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  color: var(--bk-teal-dark) !important;
  font-size: 15px !important;
}
.widget.FeaturedPost h3, .widget.FeaturedPost .post-title {
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  font-size: 27px !important;
  line-height: 1.3 !important;
}
.widget.FeaturedPost h3 a, .widget.FeaturedPost .post-title a { color: var(--bk-ink) !important; text-decoration: none !important; }
.widget.FeaturedPost h3 a:hover, .widget.FeaturedPost .post-title a:hover { color: var(--bk-teal-dark) !important; }
.widget.FeaturedPost .post-snippet, .widget.FeaturedPost .snippet-item { color: var(--bk-muted) !important; font-size: 14.5px; }
.widget.FeaturedPost img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}

/* ---------- 푸터의 인기 게시물 → 3열 카드 그리드 ---------- */
.centered-bottom .widget.PopularPosts > .title, .footer .widget.PopularPosts > .title, .centered-bottom .widget.PopularPosts h3.title {
  font-family: var(--bk-display) !important;
  font-weight: 400 !important;
  color: var(--bk-teal-dark) !important;
  font-size: 20px !important;
  border: 0 !important;
  padding-left: 0 !important;
}
.centered-bottom .widget.PopularPosts ul, .footer .widget.PopularPosts ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
@media (max-width: 860px) { .centered-bottom .widget.PopularPosts ul, .footer .widget.PopularPosts ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .centered-bottom .widget.PopularPosts ul, .footer .widget.PopularPosts ul { grid-template-columns: 1fr; } }
.centered-bottom .widget.PopularPosts li, .footer .widget.PopularPosts li {
  background: #fff;
  border: 1px solid var(--bk-line) !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  padding: 0 !important;
  margin: 0 !important;
}
.centered-bottom .widget.PopularPosts li:hover, .footer .widget.PopularPosts li:hover {
  border-color: var(--bk-teal) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(63, 167, 150, .14);
}
.centered-bottom .widget.PopularPosts .item-thumbnail, .footer .widget.PopularPosts .item-thumbnail {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.centered-bottom .widget.PopularPosts .item-thumbnail img, .footer .widget.PopularPosts .item-thumbnail img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0 !important;
}
.centered-bottom .widget.PopularPosts .item-content, .footer .widget.PopularPosts .item-content { padding: 12px 16px 16px; }
.centered-bottom .widget.PopularPosts .item-title a, .footer .widget.PopularPosts .item-title a {
  font-family: var(--bk-display);
  font-weight: 400 !important;
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none !important;
}

/* ---------- 헤더 로고 — 제목 왼쪽에 원형 로고 (CSS 삽입, 헤더 가젯엔 이미지 없음) ---------- */
.widget.Header .title, .blog-name .title {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.widget.Header .title::before, .blog-name .title::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  background: url("https://cdn.jsdelivr.net/gh/basickorean/basickorean-content@4ca1de4/assets/bklogo.jpg") center/cover no-repeat;
}

/* ---------- 헤더 배경 이미지 무력화 — 가젯에 이미지가 있어도 거대 배경 안 나오게 ---------- */
.bg-photo, .bg-photo-overlay, .bg-photo-container { display: none !important; }
.centered-top-container, .centered-top-placeholder { min-height: 0 !important; height: auto !important; }
.widget.Header .header-image, .widget.Header .image-wrap { display: none !important; }