/* ================================================================
   학습 일지 — shadcn/ui(zinc) 디자인 토큰 + Pretendard
   ================================================================ */

/* ── 1. 토큰 (shadcn zinc) ───────────────────────────────────── */
:root,
[data-md-color-scheme="default"] {
  --ll-bg: #ffffff;
  --ll-fg: #09090b;
  --ll-card: #ffffff;
  --ll-muted: #f4f4f5;
  --ll-muted-fg: #71717a;
  --ll-border: #e4e4e7;
  --ll-ring: #a1a1aa;
  --ll-primary: #18181b;
  --ll-link: #2563eb;
  --ll-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --ll-red-bg: #fef2f2;   --ll-red-fg: #b91c1c;   --ll-red-bd: #fecaca;
  --ll-amber-bg: #fffbeb; --ll-amber-fg: #b45309; --ll-amber-bd: #fde68a;
  --ll-green-bg: #f0fdf4; --ll-green-fg: #15803d; --ll-green-bd: #bbf7d0;
  --ll-gray-bg: #f4f4f5;  --ll-gray-fg: #52525b;  --ll-gray-bd: #e4e4e7;
}
[data-md-color-scheme="slate"] {
  --ll-bg: #09090b;
  --ll-fg: #fafafa;
  --ll-card: #0f0f12;
  --ll-muted: #27272a;
  --ll-muted-fg: #a1a1aa;
  --ll-border: #27272a;
  --ll-ring: #52525b;
  --ll-primary: #fafafa;
  --ll-link: #60a5fa;
  --ll-shadow: none;
  --ll-red-bg: rgba(239, 68, 68, .12);   --ll-red-fg: #fca5a5;   --ll-red-bd: rgba(239, 68, 68, .25);
  --ll-amber-bg: rgba(245, 158, 11, .12); --ll-amber-fg: #fcd34d; --ll-amber-bd: rgba(245, 158, 11, .25);
  --ll-green-bg: rgba(34, 197, 94, .12);  --ll-green-fg: #86efac; --ll-green-bd: rgba(34, 197, 94, .25);
  --ll-gray-bg: #27272a;                  --ll-gray-fg: #d4d4d8;  --ll-gray-bd: #3f3f46;
}

/* ── 2. Material 변수에 토큰 연결 ────────────────────────────── */
[data-md-color-scheme] {
  --md-default-bg-color: var(--ll-bg);
  --md-default-fg-color: var(--ll-fg);
  --md-default-fg-color--light: var(--ll-muted-fg);
  --md-default-fg-color--lighter: var(--ll-ring);
  --md-default-fg-color--lightest: var(--ll-border);
  --md-typeset-color: var(--ll-fg);
  --md-typeset-a-color: var(--ll-link);
  --md-primary-fg-color: var(--ll-bg);
  --md-primary-fg-color--dark: var(--ll-bg);
  --md-primary-bg-color: var(--ll-fg);
  --md-primary-bg-color--light: var(--ll-muted-fg);
  --md-accent-fg-color: var(--ll-link);
  --md-code-bg-color: var(--ll-muted);
  --md-code-fg-color: var(--ll-fg);
  --md-footer-bg-color: var(--ll-bg);
  --md-footer-bg-color--dark: var(--ll-bg);
  --md-footer-fg-color: var(--ll-fg);
  --md-footer-fg-color--light: var(--ll-muted-fg);
  --md-footer-fg-color--lighter: var(--ll-ring);
  --md-text-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body, input { font-family: var(--md-text-font); font-feature-settings: "ss06"; }

/* ── 3. 헤더·탭·사이드바: 흰 바탕 + 얇은 선 ─────────────────── */
.md-header { box-shadow: none; border-bottom: 1px solid var(--ll-border); }
.md-header[data-md-state="shadow"], .md-header--shadow { box-shadow: none; }
.md-tabs { border-bottom: 1px solid var(--ll-border); }
.md-tabs__link { font-size: .72rem; opacity: 1; color: var(--ll-muted-fg); font-weight: 500; }
.md-tabs__item--active .md-tabs__link, .md-tabs__link:hover { color: var(--ll-fg); }
.md-header__title { font-weight: 700; letter-spacing: -.01em; }
.md-search__form { background: var(--ll-muted); border-radius: 8px; }
.md-search__input { color: var(--ll-fg); }
.md-search__input::placeholder { color: var(--ll-muted-fg); }
.md-search__icon[for="__search"] { color: var(--ll-muted-fg); }
.md-nav { font-size: .7rem; }
.md-nav__link { color: var(--ll-muted-fg); }
.md-nav__link--active, .md-nav__link:hover { color: var(--ll-fg) !important; font-weight: 600; }
.md-nav__title { color: var(--ll-fg); font-weight: 700; }
.md-footer, .md-footer-meta { border-top: 1px solid var(--ll-border); }
.md-footer-meta { background: var(--ll-bg); }

/* ── 4. 본문 타이포그래피 ────────────────────────────────────── */
.md-typeset {
  font-size: .8rem; line-height: 1.8; letter-spacing: -.003em;
  word-break: keep-all; overflow-wrap: anywhere;
}
.md-content__inner { max-width: 46rem; }
.md-typeset h1 { font-size: 1.7em; font-weight: 800; letter-spacing: -.025em; color: var(--ll-fg); margin: 0 0 .5em; line-height: 1.3; }
.md-typeset h2 { font-size: 1.25em; font-weight: 700; letter-spacing: -.02em; margin: 2.2em 0 .7em;
  padding-bottom: .4em; border-bottom: 1px solid var(--ll-border); }
.md-typeset h3 { font-size: 1.05em; font-weight: 700; letter-spacing: -.01em; margin-top: 1.6em; }
.md-typeset strong { font-weight: 650; }
.md-typeset a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ll-link) 35%, transparent); text-underline-offset: 3px; }
.md-typeset a:hover { text-decoration-color: var(--ll-link); }
.md-typeset hr { border-color: var(--ll-border); }
.md-typeset ul li, .md-typeset ol li { margin-bottom: .35em; }

/* 인용(한 줄 요약·오늘 요약) → shadcn Alert */
.md-typeset blockquote {
  border: 1px solid var(--ll-border); border-left: 3px solid var(--ll-fg);
  background: var(--ll-muted); color: var(--ll-fg);
  border-radius: 8px; padding: .8em 1.1em; margin: 1.2em 0;
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }

/* 인라인 코드·코드 블록 */
.md-typeset code { border-radius: 5px; font-size: .84em; padding: .1em .35em; }
.md-typeset pre > code { border-radius: 8px; }
.md-typeset .highlight, .md-typeset pre { border-radius: 8px; }
.md-typeset pre { border: 1px solid var(--ll-border); }

/* 표 → 테두리 카드 */
.md-typeset table:not([class]) {
  border: 1px solid var(--ll-border); border-radius: 8px; box-shadow: var(--ll-shadow);
  font-size: .78rem; overflow: hidden;
}
.md-typeset table:not([class]) th { background: var(--ll-muted); font-weight: 600; color: var(--ll-fg); }
.md-typeset table:not([class]) td, .md-typeset table:not([class]) th { border-color: var(--ll-border); padding: .7em 1em; }

/* Mermaid 그림 → 카드 */
.md-typeset .mermaid { border: 1px solid var(--ll-border); border-radius: 10px; padding: 1rem; background: var(--ll-card); }

/* 태그(페이지 위쪽) */
.md-typeset .md-tag { background: var(--ll-muted); color: var(--ll-muted-fg); border-radius: 999px;
  font-weight: 500; font-size: .66rem; padding: .2em .8em; }

/* ── 5. 공통 컴포넌트 (ll-*) ─────────────────────────────────── */
.ll-muted { color: var(--ll-muted-fg); font-size: .72rem; }
.ll-lead { color: var(--ll-muted-fg); font-size: .85rem; margin-top: -.3em; }
.md-typeset .ll-card, .ll-card {
  display: block; background: var(--ll-card); border: 1px solid var(--ll-border); border-radius: 12px;
  box-shadow: var(--ll-shadow); color: var(--ll-fg); text-decoration: none;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.md-typeset a.ll-card:hover { border-color: var(--ll-ring); background: color-mix(in srgb, var(--ll-muted) 45%, var(--ll-card)); }
.md-typeset a.ll-card:active { transform: scale(.995); }
.ll-card-h { font-weight: 700; font-size: .8rem; margin-bottom: .7rem; }

/* 배지 (shadcn Badge, 옅은 색) */
.ll-badge {
  display: inline-flex; align-items: center; gap: .35em; padding: .12em .6em; border-radius: 999px;
  font-size: .66rem; font-weight: 600; line-height: 1.6; white-space: nowrap; border: 1px solid;
}
.ll-badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.ll-red   { background: var(--ll-red-bg);   color: var(--ll-red-fg);   border-color: var(--ll-red-bd); }
.ll-amber { background: var(--ll-amber-bg); color: var(--ll-amber-fg); border-color: var(--ll-amber-bd); }
.ll-green { background: var(--ll-green-bg); color: var(--ll-green-fg); border-color: var(--ll-green-bd); }
.ll-gray  { background: var(--ll-gray-bg);  color: var(--ll-gray-fg);  border-color: var(--ll-gray-bd); }

.ll-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ll-chip { font-size: .64rem; color: var(--ll-muted-fg); background: var(--ll-muted); border-radius: 6px; padding: .1em .5em; }

/* 페이지 제목 아래 상태 줄 */
.ll-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--ll-muted-fg);
  font-size: .72rem; margin: -.2rem 0 1.4rem; }

/* 섹션 머리 */
.ll-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 .8rem; }
.md-typeset .ll-sec h2 { margin: 0; padding: 0; border: 0; font-size: 1.05rem; }
.ll-sec p { margin: .15rem 0 0; }
.md-typeset .ll-more { font-size: .72rem; color: var(--ll-muted-fg); text-decoration: none; white-space: nowrap; }
.md-typeset .ll-more:hover { color: var(--ll-fg); }
.ll-count { display: inline-block; margin-left: .3em; font-size: .7rem; color: var(--ll-muted-fg); font-weight: 500; }

/* ── 6. 홈 ───────────────────────────────────────────────────── */
.ll-hero { margin: .6rem 0 1.4rem; }
.md-typeset .ll-hero h1 { font-size: 2rem; margin: 0 0 .2rem; }
.ll-hero p { margin: 0; font-size: .78rem; }

.ll-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.md-typeset .ll-card.ll-stat { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.ll-stat b { font-size: 1.6rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.25; }

.ll-split { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
.ll-side > .ll-cal { margin-top: 2.2rem; }
.ll-side .ll-sec { margin-top: 1.6rem; }
.ll-stack { display: flex; flex-direction: column; gap: .6rem; }
.ll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.md-content__inner:has(.ll-hero), .md-content__inner:has(.ll-grid), .md-content__inner:has(.ll-split) { max-width: 64rem; }

/* 일지 카드 */
.md-typeset .ll-card.ll-day { display: flex; gap: 1rem; padding: .9rem 1rem; }
.ll-day-date { flex: 0 0 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ll-muted); border-radius: 10px; padding: .45rem 0; align-self: flex-start; }
.ll-day-date b { font-size: 1rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
.ll-day-date span { font-size: .62rem; color: var(--ll-muted-fg); }
.ll-day-body { min-width: 0; }
.ll-day-stats { display: flex; gap: .7rem; font-size: .68rem; color: var(--ll-muted-fg); margin-bottom: .25rem; }
.md-typeset .ll-day ul { margin: 0; padding-left: 1.1em; font-size: .76rem; line-height: 1.65; }
.md-typeset .ll-day li { margin: 0 0 .2em; }
.md-typeset .ll-day li::marker { color: var(--ll-ring); }

/* 주제·문제 카드 */
.md-typeset .ll-card.ll-item { padding: .85rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.ll-item-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ll-item-title { font-weight: 650; font-size: .82rem; line-height: 1.45; letter-spacing: -.01em; }

/* 달력 */
.md-typeset .ll-card.ll-cal { padding: 1rem; max-width: 22rem; }
.ll-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.ll-cal-h { font-size: .62rem; color: var(--ll-muted-fg); padding-bottom: .2rem; }
.ll-cal-d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-size: .7rem; color: var(--ll-ring); }
.md-typeset a.ll-cal-d.ll-on { background: var(--ll-primary); color: var(--ll-bg); font-weight: 700; text-decoration: none; }
.md-typeset a.ll-cal-d.ll-on:hover { opacity: .85; }
.ll-cal-d.ll-today:not(.ll-on) { box-shadow: inset 0 0 0 1px var(--ll-ring); color: var(--ll-fg); }

/* 목록 거르기 입력칸 (shadcn Input) */
.ll-filter {
  width: 100%; margin: .4rem 0 .4rem; padding: .6rem .85rem; font-size: .8rem;
  color: var(--ll-fg); background: var(--ll-card); border: 1px solid var(--ll-border); border-radius: 8px;
  box-shadow: var(--ll-shadow); outline: none;
}
.ll-filter:focus { border-color: var(--ll-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-ring) 25%, transparent); }
.ll-group[hidden], .ll-card[hidden] { display: none !important; }

/* ── 7. 반응형 ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ll-split { grid-template-columns: 1fr; gap: 0; }
  .md-typeset .ll-card.ll-cal { max-width: none; }
  .ll-cal-grid { max-width: 20rem; margin: 0 auto; }
  .ll-side > .ll-cal { margin-top: 1.4rem; }
}
@media (max-width: 600px) {
  .ll-stats { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .ll-stat b { font-size: 1.35rem; }
  .md-typeset .ll-hero h1 { font-size: 1.6rem; }
  .ll-grid { grid-template-columns: 1fr; }
  .md-typeset .ll-card.ll-day { gap: .75rem; padding: .8rem; }
}

/* ── 8. 달력 월 드롭다운 (shadcn Select) ─────────────────────── */
.ll-cal-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
select.ll-month {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--ll-fg);
  background: var(--ll-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center;
  border: 1px solid var(--ll-border); border-radius: 8px; padding: .4rem 2rem .4rem .7rem;
  box-shadow: var(--ll-shadow); outline: none;
}
select.ll-month:focus { border-color: var(--ll-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-ring) 25%, transparent); }
.ll-cal-grid[hidden], [data-month][hidden] { display: none !important; }
.ll-side.ll-sticky > .ll-cal { margin-top: 2.2rem; }
@media (min-width: 961px) { .ll-side.ll-sticky { position: sticky; top: 7rem; } }
@media (max-width: 960px) { .ll-side.ll-sticky { order: -1; } .ll-side.ll-sticky > .ll-cal { margin-top: .6rem; } }

/* ── 9. 버튼 (shadcn Button) · 랜덤 보기 ─────────────────────── */
.md-typeset a.ll-btn, a.ll-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 2.2rem; padding: 0 1rem;
  font-size: .76rem; font-weight: 600; border-radius: 8px; text-decoration: none; white-space: nowrap;
  background: var(--ll-primary); color: var(--ll-bg); border: 1px solid var(--ll-primary);
  transition: opacity .15s, background-color .15s;
}
.md-typeset a.ll-btn:hover { opacity: .88; color: var(--ll-bg); }
.md-typeset a.ll-btn.ll-btn-outline { background: var(--ll-card); color: var(--ll-fg); border-color: var(--ll-border); box-shadow: var(--ll-shadow); }
.md-typeset a.ll-btn.ll-btn-outline:hover { background: var(--ll-muted); opacity: 1; color: var(--ll-fg); }
.ll-btn svg, .ll-header-random svg {
  width: 1em; height: 1em; fill: none !important; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ll-header-random svg { width: 1.15rem; height: 1.15rem; }
.ll-hero-actions { margin-top: 1rem; }
.ll-toolbar { display: flex; gap: .5rem; align-items: center; }
.ll-toolbar .ll-filter { flex: 1; margin: .4rem 0; }
.ll-next { margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--ll-border); text-align: center; }

/* ── 10. 퀴즈 ────────────────────────────────────────────────── */
.ll-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-typeset .ll-card.ll-quiz-start { padding: 1.2rem; display: flex; flex-direction: column; gap: .9rem; max-width: 34rem; }
.ll-q-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ll-q-label { width: 3.6rem; font-size: .74rem; font-weight: 600; color: var(--ll-muted-fg); }
.ll-q-help { margin: 0; }
/* shadcn Tabs 모양 세그먼트 */
.ll-seg { display: inline-flex; background: var(--ll-muted); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.ll-seg button { font: inherit; font-size: .74rem; font-weight: 500; color: var(--ll-muted-fg); background: none;
  border: 0; border-radius: 6px; padding: .35rem .8rem; cursor: pointer; }
.ll-seg button.on { background: var(--ll-card); color: var(--ll-fg); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.ll-seg button:disabled { opacity: .4; cursor: default; }
button.ll-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.3rem; padding: 0 1.1rem;
  font: inherit; font-size: .78rem; font-weight: 600; border-radius: 8px; cursor: pointer;
  background: var(--ll-primary); color: var(--ll-bg); border: 1px solid var(--ll-primary); }
button.ll-btn.ll-btn-outline { background: var(--ll-card); color: var(--ll-fg); border-color: var(--ll-border); }
button.ll-btn:hover { opacity: .88; }
.ll-q-progress { display: flex; align-items: center; gap: .8rem; font-size: .72rem; color: var(--ll-muted-fg); margin-bottom: .7rem; max-width: 40rem; }
.ll-q-bar { flex: 1; height: 6px; background: var(--ll-muted); border-radius: 99px; overflow: hidden; }
.ll-q-bar i { display: block; height: 100%; background: var(--ll-primary); transition: width .25s; }
.md-typeset .ll-card.ll-q-card, .md-typeset .ll-card.ll-q-miss { padding: 1.2rem 1.3rem; max-width: 40rem; }
.md-typeset a.ll-q-topic { font-size: .7rem; color: var(--ll-muted-fg); text-decoration: none; }
.md-typeset a.ll-q-topic:hover { color: var(--ll-fg); }
.ll-q-text { font-size: .98rem; font-weight: 700; line-height: 1.55; letter-spacing: -.01em; margin: .35rem 0 1.1rem; }
.ll-q-answer { font-size: .82rem; line-height: 1.75; background: var(--ll-muted); border-radius: 8px; padding: .8rem 1rem; }
.ll-q-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ll-q-opts { display: flex; flex-direction: column; gap: .5rem; }
.ll-q-opt { display: flex; gap: .7rem; text-align: left; font: inherit; font-size: .8rem; line-height: 1.6; color: var(--ll-fg);
  background: var(--ll-card); border: 1px solid var(--ll-border); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; }
.ll-q-opt:hover:not(:disabled) { border-color: var(--ll-ring); background: var(--ll-muted); }
.ll-q-opt b { color: var(--ll-muted-fg); font-weight: 600; }
.ll-q-opt:disabled { cursor: default; }
.ll-q-opt.ok { border-color: var(--ll-green-bd); background: var(--ll-green-bg); }
.ll-q-opt.ok b { color: var(--ll-green-fg); }
.ll-q-opt.bad { border-color: var(--ll-red-bd); background: var(--ll-red-bg); }
.ll-q-opt.bad b { color: var(--ll-red-fg); }
.ll-q-verdict { margin-right: auto; font-weight: 700; font-size: .8rem; }
.ll-q-verdict.ok { color: var(--ll-green-fg); } .ll-q-verdict.bad { color: var(--ll-red-fg); }
.md-typeset .ll-card.ll-q-result { padding: 1.3rem; max-width: 34rem; display: flex; flex-direction: column; gap: .2rem; }
.ll-q-result b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.ll-q-miss .ll-q-text { font-size: .86rem; margin-bottom: .6rem; }

/* ── 11. 검색 (shadcn Command 팔레트) ────────────────────────── */
:root, [data-md-color-scheme="default"] { --ll-blue-bg: #eff6ff; --ll-blue-fg: #1d4ed8; --ll-blue-bd: #bfdbfe; --ll-mark: #fef08a; }
[data-md-color-scheme="slate"] { --ll-blue-bg: rgba(59,130,246,.14); --ll-blue-fg: #93c5fd; --ll-blue-bd: rgba(59,130,246,.3); --ll-mark: rgba(250,204,21,.35); }
.ll-blue { background: var(--ll-blue-bg); color: var(--ll-blue-fg); border-color: var(--ll-blue-bd); }

.md-header__button.ll-search-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font: inherit;
  background: var(--ll-muted); color: var(--ll-muted-fg); border: 1px solid var(--ll-border); border-radius: 8px;
  height: 2rem; padding: 0 .55rem 0 .7rem; margin-left: .4rem; min-width: 11rem;
}
.ll-search-btn svg, .ll-s-input svg { width: 1rem; height: 1rem; fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ll-search-label { font-size: .72rem; flex: 1; text-align: left; }
.ll-search-btn kbd, .ll-s-close { font: inherit; font-size: .62rem; color: var(--ll-muted-fg); background: var(--ll-card);
  border: 1px solid var(--ll-border); border-radius: 5px; padding: .05rem .4rem; }
@media (max-width: 760px) {
  .md-header__button.ll-search-btn { min-width: 0; background: none; border: 0; padding: 0 .4rem; color: var(--ll-fg); }
  .ll-search-btn .ll-search-label, .ll-search-btn kbd { display: none; }
  .ll-search-btn svg { width: 1.2rem; height: 1.2rem; }
}

html.ll-s-lock { overflow: hidden; }
.ll-s-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(9, 9, 11, .45); backdrop-filter: blur(2px);
  display: flex; justify-content: center; align-items: flex-start; padding: 8vh 1rem 1rem; }
.ll-s-overlay[hidden] { display: none; }
.ll-s-box { width: 100%; max-width: 40rem; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ll-card); color: var(--ll-fg); border: 1px solid var(--ll-border); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25); font-family: var(--md-text-font); }
.ll-s-input { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ll-border); color: var(--ll-muted-fg); }
.ll-s-input input { flex: 1; border: 0; outline: none; background: none; color: var(--ll-fg); font: inherit; font-size: .9rem; }
.ll-s-input input::-webkit-search-cancel-button { display: none; }
.ll-s-close { cursor: pointer; }
.ll-s-meta { font-size: .68rem; color: var(--ll-muted-fg); padding: .55rem 1rem .3rem; }
.ll-s-list { overflow-y: auto; padding: .2rem .5rem .6rem; }
.ll-s-item { display: block; padding: .6rem .7rem; border-radius: 9px; color: var(--ll-fg) !important; text-decoration: none !important; }
.ll-s-item.on, .ll-s-item:hover { background: var(--ll-muted); }
.ll-s-top { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .78rem; }
.ll-s-top b { font-weight: 650; }
.ll-s-h { color: var(--ll-muted-fg); font-size: .7rem; }
.ll-s-snip { font-size: .72rem; line-height: 1.6; color: var(--ll-muted-fg); margin-top: .2rem; }
.ll-s-snip mark, mark.ll-hl { background: var(--ll-mark); color: inherit; border-radius: 3px; padding: 0 .1em; }
@media (max-width: 600px) { .ll-s-overlay { padding: 0; } .ll-s-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; } }

/* ── 12. 용어 사전 ───────────────────────────────────────────── */
.ll-jumps { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 .4rem; }
.md-typeset a.ll-jump { min-width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600;
  color: var(--ll-fg); background: var(--ll-muted); border-radius: 7px; text-decoration: none; }
.md-typeset a.ll-jump:hover { background: var(--ll-primary); color: var(--ll-bg); }
.ll-g-list { gap: .45rem; }
.md-typeset .ll-card.ll-g { padding: .75rem 1rem; }
.ll-g-term { font-weight: 700; font-size: .86rem; letter-spacing: -.01em; }
.ll-g-alias { font-weight: 500; font-size: .74rem; color: var(--ll-muted-fg); margin-left: .25rem; }
.ll-g-def { font-size: .78rem; line-height: 1.7; margin-top: .15rem; }
.ll-g-where { font-size: .68rem; color: var(--ll-muted-fg); margin-top: .35rem; }
.md-typeset .ll-g-where a { color: var(--ll-muted-fg); }
.ll-group[id] { scroll-margin-top: 6rem; }

/* ── 13. 지도 (무리 색: Tailwind 500 계열, 밝기 맞춤) ──────────── */
:root, [data-md-color-scheme="default"] {
  --ll-c0: #3b82f6; --ll-c1: #10b981; --ll-c2: #f59e0b; --ll-c3: #8b5cf6;
  --ll-c4: #ef4444; --ll-c5: #06b6d4; --ll-c6: #ec4899; --ll-c7: #84cc16; --ll-cx: #a1a1aa;
}
[data-md-color-scheme="slate"] {
  --ll-c0: #60a5fa; --ll-c1: #34d399; --ll-c2: #fbbf24; --ll-c3: #a78bfa;
  --ll-c4: #f87171; --ll-c5: #22d3ee; --ll-c6: #f472b6; --ll-c7: #a3e635; --ll-cx: #71717a;
}
.ll-c0 { --c: var(--ll-c0); } .ll-c1 { --c: var(--ll-c1); } .ll-c2 { --c: var(--ll-c2); } .ll-c3 { --c: var(--ll-c3); }
.ll-c4 { --c: var(--ll-c4); } .ll-c5 { --c: var(--ll-c5); } .ll-c6 { --c: var(--ll-c6); } .ll-c7 { --c: var(--ll-c7); }
.ll-cx { --c: var(--ll-cx); }

.ll-g-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.ll-g-bar .ll-g-find { flex: 1 1 12rem; margin: 0; }
.ll-g-tog { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--ll-muted-fg); cursor: pointer; white-space: nowrap; }
.md-typeset .ll-card.ll-g-stage { position: relative; height: 68vh; min-height: 22rem; padding: 0; overflow: hidden; }
.ll-g-stage svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.ll-g-hint { position: absolute; left: .8rem; bottom: .5rem; font-size: .64rem; pointer-events: none; }
.ll-g-l { stroke: var(--ll-border); stroke-width: 1.2; transition: opacity .2s; }
[data-md-color-scheme="slate"] .ll-g-l { stroke: #3f3f46; }
.ll-g-day, .ll-g-term { stroke-dasharray: 3 4; stroke-width: 1; opacity: .7; }
.ll-g-l.ll-g-hot { stroke: var(--ll-fg); stroke-width: 1.8; opacity: 1; }
.ll-g-n circle, .ll-g-n rect { fill: var(--c); stroke: var(--ll-card); stroke-width: 1.5; cursor: pointer; transition: opacity .2s; }
.ll-g-n text { font-size: 10px; fill: var(--ll-fg); paint-order: stroke; stroke: var(--ll-bg); stroke-width: 3px;
  stroke-linejoin: round; pointer-events: none; opacity: 0; transition: opacity .2s; font-weight: 500; }
.ll-g-n.ll-g-named text { opacity: 1; }
.ll-g-n.ll-g-sel circle, .ll-g-n.ll-g-sel rect { stroke: var(--ll-fg); stroke-width: 2.5; }
.ll-g-n.ll-g-sel text { font-weight: 700; font-size: 11px; }
.ll-g-dim { opacity: .12; }
.ll-g-info { margin-top: .6rem; }
.md-typeset .ll-card.ll-g-card { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.md-typeset a.ll-g-title { font-weight: 700; font-size: .92rem; color: var(--ll-fg); text-decoration: none; }
.ll-g-sum { margin: 0; font-size: .76rem; line-height: 1.65; color: var(--ll-muted-fg); }
.ll-g-jump { border: 0; cursor: pointer; font: inherit; font-size: .66rem; }
.ll-g-jump:hover { background: var(--ll-border); color: var(--ll-fg); }
.md-typeset a.ll-btn.ll-g-read { align-self: flex-start; }
.ll-g-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.ll-g-chip { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .66rem; color: var(--ll-muted-fg);
  background: var(--ll-muted); border: 0; border-radius: 999px; padding: .2rem .6rem; cursor: pointer; }
.ll-g-chip i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.ll-g-chip:hover { color: var(--ll-fg); }
#ll-graph.ll-g-fs { position: fixed; inset: 0; z-index: 90; background: var(--ll-bg); padding: .8rem; display: flex; flex-direction: column; }
#ll-graph.ll-g-fs .ll-g-stage { flex: 1; height: auto; }
#ll-graph.ll-g-fs .ll-g-legend { display: none; }

/* 주제 페이지의 작은 지도 */
.md-typeset .ll-card.ll-ego { padding: .6rem .8rem .7rem; }
.ll-ego svg { width: 100%; height: auto; display: block; }
.ll-ego-l line { stroke: var(--ll-border); stroke-width: 1.4; }
[data-md-color-scheme="slate"] .ll-ego-l line { stroke: #3f3f46; }
.ll-ego-n circle, .ll-ego-n rect, .ll-ego-me circle { fill: var(--c); stroke: var(--ll-card); stroke-width: 2; }
.ll-ego-n text { font-size: 13px; fill: var(--ll-fg); font-family: var(--md-text-font); }
.ll-ego-me text { font-size: 14px; font-weight: 700; fill: var(--ll-fg); font-family: var(--md-text-font); }
.md-typeset .ll-ego a:hover text { fill: var(--ll-link); }
.ll-ego-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .2rem; }
@media (max-width: 600px) { .ll-ego-n text { font-size: 15px; } .ll-ego-me text { font-size: 16px; } }
.md-typeset .ll-ego a, .ll-ego a { text-decoration: none; }
.ll-ego-n text { font-size: 15px; } .ll-ego-me text { font-size: 15px; }
@media (max-width: 600px) { .ll-ego-n text, .ll-ego-me text { font-size: 17px; } }