/* Pretendard Variable — 한국어 모던 산세리프 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root,
[data-md-color-scheme] {
  --md-text-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
}

/* 본문 가독성 */
.md-typeset {
  font-size: 0.78rem;
  line-height: 1.75;
  letter-spacing: -0.005em;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.md-typeset h1 { font-size: 1.7rem; line-height: 1.3; margin: 0.4em 0 0.6em; }
.md-typeset h2 { font-size: 1.3rem; margin-top: 1.8em; }
.md-typeset h3 { font-size: 1.05rem; }

/* 사이드바 — 한 줄 깔끔 */
.md-nav__item .md-nav__link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 코드블록 */
.md-typeset pre > code {
  font-size: 0.78em;
  line-height: 1.65;
  border-radius: 0.4rem;
}

.md-typeset .highlight {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* 테이블 */
.md-typeset table:not([class]) {
  font-size: 0.78rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 600;
}

/* 블록쿼트 — 가독성 우선 */
.md-typeset blockquote {
  border-left: 3px solid var(--md-accent-fg-color);
  background: transparent;
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--md-default-fg-color--light);
}

.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }
.md-typeset blockquote strong:first-child { color: var(--md-default-fg-color); }

/* ─── 홈 hero ─── */
.home-hero {
  text-align: center;
  padding: 2.6rem 1rem 2.2rem;
  margin: 0 0 1.6rem;
  background: linear-gradient(135deg,
    var(--md-primary-fg-color),
    color-mix(in srgb, var(--md-primary-fg-color) 75%, #000));
  color: var(--md-primary-bg-color);
  border-radius: 0.8rem;
}

.home-hero h1 {
  color: inherit !important;
  font-size: 1.85rem !important;
  margin: 0 0 0.5rem !important;
  border: none !important;
}

.home-hero .hero-tagline {
  font-size: 0.92rem;
  opacity: 0.92;
  margin: 0 auto;
  max-width: 32rem;
  line-height: 1.7;
}

.home-hero .hero-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.home-hero .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.home-hero .hero-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

.home-hero .hero-btn.primary {
  background: white;
  color: var(--md-primary-fg-color);
  border-color: transparent;
}

.home-hero .hero-btn.primary:hover {
  background: rgba(255, 255, 255, 0.94);
}

/* ─── 홈 카드 (4가지 특징) ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.7rem;
  margin: 1.2rem 0;
}

.card-grid .card {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.card-grid .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  border-color: var(--md-accent-fg-color);
}

.card-grid .card .card-emoji {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.3rem;
}

.card-grid .card .card-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  line-height: 1.35;
}

.card-grid .card .card-desc {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.55;
}

/* ─── 챕터·전체 레슨 카드 ─── */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin: 1rem 0 2rem;
}

.lesson-grid .lesson-card {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.12s;
}

.lesson-grid .lesson-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  border-color: var(--md-accent-fg-color);
}

.lesson-grid .lesson-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.lesson-grid .lesson-topic {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--md-default-fg-color);
  margin-bottom: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lesson-grid .lesson-meta {
  font-size: 0.68rem;
  color: var(--md-default-fg-color--light);
  display: flex;
  gap: 0.5rem;
}

.chapter-heading {
  font-size: 1.1rem !important;
  margin: 2.2rem 0 0.4rem !important;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}