:root {
    --bg: #ffffff;
    --bg-soft: #f6f6f7;
    --bg-sidebar: #f9f9fb;
    --border: #e2e2e6;
    --text: #213547;
    --text-2: #5c6773;
    --text-3: #9299a3;
    --brand: #6366f1;
    --brand-soft: rgba(99, 102, 241, 0.12);
    --hot: #dc2626;
    --hot-soft: rgba(220, 38, 38, 0.1);
    --star: #d97706;
    --star-soft: rgba(217, 119, 6, 0.12);
    --code-bg: #f1f1f4;
    --quote-bg: rgba(99, 102, 241, 0.06);
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  }
  html.dark {
    --bg: #1b1b1f;
    --bg-soft: #222227;
    --bg-sidebar: #1f1f24;
    --border: #33333a;
    --text: #e4e4e9;
    --text-2: #a5a8b0;
    --text-3: #6e7178;
    --brand: #818cf8;
    --brand-soft: rgba(129, 140, 248, 0.16);
    --hot: #f87171;
    --hot-soft: rgba(248, 113, 113, 0.14);
    --star: #fbbf24;
    --star-soft: rgba(251, 191, 36, 0.16);
    --code-bg: #2a2a31;
    --quote-bg: rgba(129, 140, 248, 0.09);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  /* overflow-x: hidden 대신 clip을 쓴다 — hidden/auto/scroll은 overflow-y를 강제로 auto로 만들어버려서
     (CSS 스펙상 한쪽이 visible이 아니면 반대쪽도 auto가 됨) 사이드바의 position:sticky가 깨졌었다.
     clip은 새 스크롤 컨테이너를 만들지 않아 그 부작용이 없다. */
  html, body { overflow-x: clip; max-width: 100vw; }
  /* 모바일에서 스크롤이 맨 위/맨 아래에 닿았을 때의 고무줄 바운스(overscroll) 제거 */
  html, body { overscroll-behavior-y: none; }
  /* 검색 다이얼로그 배경 스크롤 잠금: html이 스크롤러라 overflow:hidden을 주면
     position:sticky인 topbar·사이드바가 깨져 스크롤 위치만큼 위로 사라진다.
     그래서 overflow는 건드리지 않고(스티키 유지), JS가 다이얼로그 바깥의
     wheel·touchmove 입력만 막는다(search.js). */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
                 "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    transition: background .25s, color .25s;
    /* "Google·Microsoft·Salesforce·..." 처럼 띄어쓰기 없이 긴 문자열도 화면 밖으로 밀지 않고 줄바꿈 */
    overflow-wrap: break-word; word-break: break-word;
  }

  /* jelly-card는 :host에 user-select:none을 건다. 슬롯 콘텐츠 루트(호스트 아래)에서 다시
     text로 되돌려야 카드 안 본문/용어/하이라이트를 선택·복사할 수 있다. */
  .news-row, .summary-list, .gl-list, .hc-list {
    -webkit-user-select: text; user-select: text;
  }

  /* ── Layout ─────────────────────────────── */
  .app { display: flex; min-height: 100vh; }
  /* 레일 + 리스트 열을 함께 담는 래퍼 — 데스크톱은 화면에 붙어 스크롤, 모바일은 통째로 드로어가 된다 */
  .sidebar-wrap { display: flex; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }

  /* 아이콘 레일 — 카테고리 아이콘만 세로로. 카테고리가 늘어도 폭이 고정된다 */
  #rail {
    width: 60px; flex: 0 0 60px; /* flex 고정 — 범용 nav{flex:1} 규칙이 레일까지 늘리는 것 방지 */
    background: color-mix(in srgb, var(--bg-sidebar) 92%, #000);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 12px 0; overflow-y: auto;
    position: relative; z-index: 1; /* 리스트 열이 접힐 때 그 위를 덮도록 */
  }
  #rail::-webkit-scrollbar { width: 0; }
  .rail-logo {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none; cursor: pointer; color: #fff;
    display: grid; place-items: center; margin-bottom: 4px;
  }
  .rail-logo .icon { width: 19px; height: 19px; }
  .rail-item {
    position: relative; width: 42px; height: 42px; flex-shrink: 0;
    border: none; background: none; cursor: pointer;
    border-radius: 12px; color: var(--text-2);
    display: grid; place-items: center;
    transition: background .12s, color .12s;
  }
  .rail-item .icon { width: 21px; height: 21px; }
  .rail-item:hover { background: var(--bg-soft); color: var(--text); }
  .rail-item.active { background: var(--brand-soft); color: var(--brand); }
  .rail-item.active::before {
    content: ''; position: absolute; left: -9px; top: 9px;
    width: 3px; height: 24px; border-radius: 2px; background: var(--brand);
  }
  .rail-item.has-unread::after {
    content: ''; position: absolute; top: 5px; right: 5px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-sidebar) 92%, #000);
  }

  /* 리스트 열 — 선택된 카테고리의 날짜 목록(검색 중엔 전체 교차 결과) */
  #sidebar {
    flex: 0 0 210px; min-width: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    transition: flex-basis .25s ease;
    overflow: hidden;
  }
  /* 접기: flex-basis를 0으로 줄여 리스트 열을 감추고 공간을 되돌린다.
     (중첩 flex 항목이라 width:0/margin-left로는 안 줄고, flex-basis:0 + min-width:0이라야 실제로 접힌다) */
  #sidebar.hidden { flex-basis: 0; border-right: none; }

  .list-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 10px; }
  .list-title {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .list-title .icon { width: 17px; height: 17px; flex-shrink: 0; }

  nav { flex: 1; overflow-y: auto; padding: 4px 12px 24px; }
  nav::-webkit-scrollbar { width: 5px; }
  nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  .doc-link {
    display: block; position: relative;
    padding: 5px 10px; margin: 1px 0;
    border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-decoration: none; border: none; background: none;
    width: 100%; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .12s, color .12s;
  }
  .doc-link:hover { background: var(--bg-soft); color: var(--text); }
  .doc-link.active {
    background: var(--brand-soft); color: var(--brand); font-weight: 600;
  }
  .doc-link.is-unread { padding-right: 20px; }
  .doc-link.is-unread::after {
    content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  }

  /* ── 검색 오버레이 (상단 아이콘 버튼으로 열림) ── */
  /* 다이얼로그 폭을 넓힌다(기본 460px). host는 position:fixed로 뷰포트를 덮으므로 중앙 정렬은 jelly가 처리 */
  #search-dialog { --jelly-dialog-width: min(640px, 92vw); }
  /* 열렸을 때 호스트를 실제 보이는 영역(visualViewport, JS가 --sv-*로 설정)에 맞춘다 →
     가운데 정렬이 키보드 위 가시 영역 기준이 되어 하단이 안 가려진다. 미설정 시 전체 뷰포트. */
  #search-dialog { top: var(--sv-top, 0); bottom: auto; height: var(--sv-h, 100dvh); }
  /* 결과가 많아도 화면을 꽉 채우지 않게 높이를 캡 — 위아래 배경 여백이 남아
     배경을 탭해 닫기도 쉬워진다(jelly 기본 max-height는 100vh-48px로 거의 꽉 참). */
  #search-dialog::part(dialog) {
    box-sizing: border-box; /* max-height가 패딩 포함 실제 바깥 높이가 되도록 */
    max-height: min(600px, calc(var(--sv-h, 100dvh) - 40px)); /* 보이는 영역 기준으로 높이 캡 */
    overflow-x: hidden; scrollbar-width: none; /* 가로 넘침(jelly-input canvas) 클립 + 세로바 숨김 */
    overscroll-behavior: contain; /* 결과를 끝까지 스크롤해도 배경으로 체이닝되지 않게 */
  }
  #search-dialog::part(dialog)::-webkit-scrollbar { width: 0; height: 0; }
  .search-pane { width: 100%; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  /* input 왼쪽에 아이콘을 오버레이하고, jelly-input의 좌우 패딩을 늘려 아이콘 자리를 만든다 */
  .search-field { position: relative; }
  .search-field-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    display: inline-flex; width: 17px; height: 17px; color: var(--text-3);
    pointer-events: none; z-index: 1;
  }
  .search-field-icon .icon { width: 100%; height: 100%; }
  /* 로딩 시 jelly-spinner를 돋보기 아이콘과 비슷한 크기로 왼쪽 기준 배치 */
  .search-field-icon.loading { overflow: visible; }
  .search-field-icon jelly-spinner { transform: scale(1.4); transform-origin: left center; }
  #search { width: 100%; display: block; --jelly-input-padding-inline: 42px; } /* 아이콘 자리만큼 좌측 여백 */
  /* 세로 스크롤은 다이얼로그(.dialog)의 max-height가 담당.
     min-height로 바닥을 둬서 빈 상태·결과 없음이 최소 높이 아래로 쪼그라들지 않게 한다.
     로딩 중엔 결과 영역을 건드리지 않아(높이 유지) 깜빡임이 없다 — 진행 표시는 input 아이콘 스피너가 담당. */
  .search-results { overflow-y: auto; min-height: 200px; }
  /* 검색 전/결과 없음 빈 상태 — min-height를 꽉 채워 세로 가운데 정렬 */
  .search-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 200px; padding: 20px; gap: 4px;
  }
  .search-empty .se-icon {
    display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px;
    border-radius: 14px; background: var(--brand-soft); color: var(--brand);
  }
  .search-empty .se-icon .icon { width: 24px; height: 24px; }
  /* 본문 검색 실패 → 제목 검색으로 강등됐음을 알리는 배너 */
  .search-degraded {
    margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
    background: var(--star-soft); color: var(--star);
    font-size: 12px; font-weight: 600; line-height: 1.5;
  }
  .search-empty .se-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
  .search-empty .se-sub { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
  .sr-group + .sr-group { margin-top: 16px; }
  .sr-folder {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 4px; padding: 0 2px;
    font-size: 12px; font-weight: 700; color: var(--text-2);
  }
  .sr-folder .icon { width: 14px; height: 14px; }
  .sr-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border: none; border-radius: 10px;
    background: none; cursor: pointer; color: var(--text);
  }
  .sr-item:hover { background: var(--bg-soft); }
  .sr-title { display: block; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sr-snippet {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--text-3);
  }
  .sr-snippet mark.search-hit { padding: 0; border-radius: 2px; }

  main { flex: 1; min-width: 0; }

  .topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 28px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  /* 사이트 제목 — 크럼브·버튼과 겹치지 않게 액션바 절대 중앙에. 클릭 시 홈. */
  #site-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: 16px; letter-spacing: .01em;
    color: var(--text); white-space: nowrap;
  }
  #site-title:hover { color: var(--brand); }
  /* 절대중앙 제목(#site-title)과 안 겹치도록 폭 제한 — 넘치면 파일명이 말줄임 */
  .crumb { font-size: 13px; color: var(--text-3); display: flex; gap: 6px; align-items: center; min-width: 0; max-width: calc(50% - 90px); overflow: hidden; }
  .crumb b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumb-sep { color: var(--text-3); }
  /* 파일명 = 문서 드롭다운 트리거 — 기존 crumb 파일명과 같은 톤 + 작은 캐럿으로 눌림을 암시 */
  .crumb-file-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--text);
    padding: 3px 7px; border-radius: 8px; white-space: nowrap;
  }
  .crumb-file-btn:hover { background: var(--bg-soft); }
  .crumb-file-btn .caret { font-size: 9px; color: var(--text-3); }
  /* 항목이 많아도 화면을 넘지 않게 메뉴 내부 스크롤 (카테고리·문서 드롭다운 공용) */
  .crumb-menu::part(menu) { max-height: 60vh; overflow-y: auto; }
  .topbar .spacer { flex: 1; }

  /* 본문 + 목차를 한 행에 두어 목차가 본문과 겹치지 않게 한다(예전 position:fixed 방식은 왼쪽 사이드바 때문에 겹쳤음) */
  .doc-body { display: flex; justify-content: center; align-items: flex-start; }
  .content { flex: 0 1 860px; min-width: 0; padding: 40px 40px 100px; } /* grow 0 — 본문+목차가 한 덩어리로 가운데 정렬되도록 */

  /* ── 상단 읽기 진행바 (jelly-progress) ───── */
  /* 트랙(배경)은 투명 처리해 채움만 보이게 — 값 추적 애니메이션은 컴포넌트 내장 물리가 담당 */
  #scroll-progress {
    position: fixed; top: -1px; left: -4px;
    width: calc(100vw + 8px); height: 5px; /* 트랙 두께는 호스트 height를 따른다 */
    --jelly-track: transparent;
    z-index: 3000; pointer-events: none;
  }

  /* ── Markdown ───────────────────────────── */
  .md h1 { font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin: .2em 0 .8em; }
  /* 파일 수정 시각 — 문서 하단 footer (정보 중심 리더: 본문 위엔 메타를 얹지 않는다, CLAUDE.md 참고) */
  .doc-updated {
    display: flex; align-items: center; gap: 7px;
    margin-top: 2.4em; padding-top: 1.1em;
    font-size: .8rem; color: var(--text-2);
    border-top: 1px solid var(--border);
  }
  .doc-updated .icon { width: 14px; height: 14px; color: var(--text-3); }
  .doc-updated .rel { font-weight: 600; color: var(--text-2); }
  .doc-updated .dt { color: var(--text-3); font-weight: 500; }
  /* 수정 시각 바로 뒤에 이전/다음 내비가 오면 구분선이 두 줄 겹치지 않게 하나로 */
  .doc-updated + .doc-nav { border-top: none; margin-top: 18px; padding-top: 0; }
  .md h2 {
    font-size: 1.35em; font-weight: 700; letter-spacing: -.01em;
    margin: 2em 0 .8em; padding-top: 1em;
    border-top: 1px solid var(--border);
  }
  .md h3 { font-size: 1.12em; font-weight: 700; margin: 1.6em 0 .6em; }
  .md h4, .md h5, .md h6 { font-weight: 700; margin: 1.4em 0 .5em; }
  .md p { margin: .8em 0; }
  .md a { color: var(--brand); text-decoration: none; font-weight: 500; }
  .md a:hover { text-decoration: underline; }
  .md strong { font-weight: 700; color: var(--text); }
  .md ul, .md ol { padding-left: 1.4em; margin: .8em 0; }
  .md li { margin: .45em 0; }
  .md li::marker { color: var(--text-3); }
  .md blockquote {
    margin: 1.2em 0; padding: 14px 18px;
    background: var(--quote-bg);
    border-left: 3px solid var(--brand);
    border-radius: 0 10px 10px 0;
    color: var(--text-2); font-size: .96em;
  }
  .md blockquote p { margin: .4em 0; }

  /* 아이콘 범례 — 하이라이트 박스에서 분리된 작은 배지 캡션 행 */
  .doc-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    margin: -2px 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .legend-item { display: flex; align-items: center; gap: 6px; }
  .legend-icon {
    flex-shrink: 0; width: 18px; height: 18px;
    border-radius: 6px; display: grid; place-items: center;
    font-size: 10px; background: var(--brand-soft); color: var(--brand);
  }
  .legend-icon.mk-hot { background: var(--hot-soft); color: var(--hot); }
  .legend-icon.mk-star { background: var(--star-soft); color: var(--star); }
  .legend-item b { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
  .legend-detail { font-size: 12px; color: var(--text-3); }
  .md code {
    background: var(--code-bg);
    padding: .18em .45em; border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .86em;
  }
  .md pre {
    background: var(--code-bg);
    padding: 16px 18px; border-radius: 12px;
    overflow-x: auto; margin: 1.2em 0;
    border: 1px solid var(--border);
  }
  .md pre code { background: none; padding: 0; font-size: .85em; line-height: 1.6; }
  .md hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
  .md-divider { display: block; margin: 2em 0; } /* 마크다운 --- → jelly-divider */
  .md table {
    border-collapse: collapse; width: 100%; margin: 1.2em 0;
    font-size: .92em; display: block; overflow-x: auto;
  }
  .md th, .md td { border: 1px solid var(--border); padding: 8px 14px; text-align: left; }
  .md th { background: var(--bg-soft); font-weight: 700; }
  .md img { max-width: 100%; border-radius: 10px; }
  mark.search-hit {
    background: #fde047; color: #1a1607;
    border-radius: 3px; padding: 0 2px; margin: 0 -2px;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  }

  /* ── 아이콘 (로컬 SVG, 이모지 대체) ───────── */
  .icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }
  .icon svg { width: 100%; height: 100%; display: block; }
  .icon.ic-hot { color: var(--hot); }
  .icon.ic-star { color: var(--star); }
  img.icon-flag {
    width: 1.15em; height: .86em; vertical-align: -0.1em;
    border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--border);
  }
  /* 배지(범례/카드 마커) 안의 아이콘은 배지 크기의 60%로 고정 */
  .legend-icon .icon, .news-marker .icon, .summary-marker .icon {
    width: 60%; height: 60%; vertical-align: 0;
  }
  .placeholder .big .icon { width: 40px; height: 40px; color: var(--text-3); }

  /* ── 뉴스 카드 리스트 (제목: 설명 → 카드형) ─── */
  .md ul.news-list {
    list-style: none; margin: 1.1em 0 1.4em; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .md .news-item { margin: 0; padding: 0; } /* 카드 표면은 jelly-card가 그린다 */
  .news-row { display: flex; gap: 13px; align-items: flex-start; }
  .news-marker {
    flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px;
    border-radius: 9px; display: grid; place-items: center;
    font-size: 14px; background: var(--brand-soft); color: var(--brand);
  }
  .news-marker.mk-hot { background: var(--hot-soft); color: var(--hot); }
  .news-marker.mk-star { background: var(--star-soft); color: var(--star); }
  .news-marker.mk-default::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: block; }
  .news-body { flex: 1; min-width: 0; }
  .news-title {
    display: block; font-weight: 700; font-size: 1em;
    letter-spacing: -.01em; line-height: 1.5; color: var(--text);
    margin-bottom: 3px;
  }
  .md .news-desc { margin: 0; color: var(--text-2); font-size: .93em; line-height: 1.65; }
  .news-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

  /* ── 용어 하이라이트 (본문에 등장한 GLOSSARY 용어) + hover 말풍선(jelly-tooltip) ── */
  .fn-ref {
    display: inline;
    padding: 1px 4px; margin: 0 1px;
    border-radius: 5px;
    background: var(--brand-soft); color: var(--brand);
    border-bottom: 1px dashed var(--brand);
    font-weight: 600;
    cursor: help;
  }

  /* ── 문서 하단 용어 사전 — 제목은 h2 섹션과 동일(위 구분선), 펼침 목록은 카드 안 ── */
  .glossary-panel {
    display: block; margin: 2.7em 0 .8em;
    padding-top: 9px;                          /* 헤더 버튼 padding-block(12px)과 합쳐 구분선~제목 ≈ h2(21px) */
    /* 구분선은 헤더 버튼(둥근 모서리)이 아니라 각진 호스트에 둔다 — 그래야 양끝이 안 휘고 직선 */
    border-top: 1px solid var(--border);
    --jelly-collapsible-padding-inline: 10px;  /* hover 하이라이트에 좌우 여백 */
    --jelly-collapsible-padding-block: 12px;   /* hover 하이라이트에 상하 여백(균형) */
    --jelly-collapsible-header-font: 1.35em;   /* .md h2와 동일 크기 */
  }
  .glossary-panel [slot="header"] {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: -.01em; color: var(--text);
  }
  .glossary-panel [slot="header"] .icon { width: 22px; height: 22px; }
  /* 펼쳐지는 용어 목록의 표면 — CSS로 그린 카드(jelly-card는 접이식 overflow:hidden에
     젤리 넘침이 잘려 모서리가 삐뚤해지므로). 색은 jelly 토큰을 미러링해 다른 카드와 맞춘다. */
  .glossary-card {
    display: block; margin-top: 4px; padding: 2px 16px;
    background: var(--jelly-color-background-surface, var(--bg-sidebar));
    border: 1px solid var(--jelly-color-border-default, var(--border));
    border-radius: 16px;
  }
  .gl-list { display: flex; flex-direction: column; }
  /* 용어 = 정의형 2줄 카드: 브랜드색 굵은 용어명 위, 흐린 정의 아래, 항목 사이 얇은 구분선 */
  .gl-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 4px; font-size: .9em; line-height: 1.65;
    border-top: 1px solid var(--border);
  }
  .gl-item:first-child { border-top: none; }
  .gl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .gl-term { color: var(--brand); font-weight: 700; font-size: 1.03em; letter-spacing: -.01em; }
  .gl-alias { color: var(--text-3); font-size: .88em; font-weight: 500; } /* '|' 별칭은 작고 흐리게 */
  .gl-def { color: var(--text-2); }

  /* 오늘의 한 줄 요약 — 카드 계열과 통일된 TL;DR 패널 */
  .md ul.summary-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 11px;
  }
  /* 한 줄 요약 패널의 표면은 jelly-card가 그리므로, 래퍼엔 바깥 여백만 준다 */
  .summary-card { display: block; margin: 1.1em 0 1.4em; }
  .summary-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
  .summary-marker {
    flex-shrink: 0; width: 21px; height: 21px; margin-top: 2px;
    border-radius: 7px; display: grid; place-items: center;
    font-size: 11px; background: var(--brand-soft); color: var(--brand);
  }
  .summary-marker.mk-hot { background: var(--hot-soft); color: var(--hot); }
  .summary-marker.mk-star { background: var(--star-soft); color: var(--star); }
  .summary-marker.mk-default::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: block; }
  .summary-text { color: var(--text); font-size: .93em; line-height: 1.65; }

  /* ── INDEX.md 전체 목록 — 타임라인 레이아웃 (넓은 화면 활용) ── */
  .md .index-timeline { margin: 1.3em 0; }
  .index-entry { display: flex; gap: 18px; }
  .index-date-rail { display: flex; flex-direction: column; align-items: center; width: 10px; flex-shrink: 0; }
  .index-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex-shrink: 0; margin-top: 5px; }
  .index-date-rail::after {
    content: ''; flex: 1; width: 2px; margin-top: 4px; background: var(--border);
  }
  .index-body { flex: 1; min-width: 0; padding-bottom: 26px; }
  .index-date {
    display: inline-block; font-size: 1.08em; font-weight: 800;
    letter-spacing: -.01em; color: var(--text); text-decoration: none;
    margin-bottom: 12px;
  }
  .index-date:hover { color: var(--brand); }
  .index-highlights { display: flex; flex-direction: column; gap: 9px; }
  .index-highlight { display: flex; align-items: flex-start; gap: 10px; }
  .index-marker {
    flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
    border-radius: 7px; display: grid; place-items: center;
    font-size: 11px; background: var(--brand-soft); color: var(--brand);
  }
  .index-marker.mk-hot { background: var(--hot-soft); color: var(--hot); }
  .index-marker.mk-star { background: var(--star-soft); color: var(--star); }
  .index-marker.mk-default::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: block; }
  .index-marker .icon { width: 60%; height: 60%; }
  .index-highlight > span:last-child { font-size: .94em; color: var(--text-2); line-height: 1.6; padding-top: 1px; }

  /* ── Empty / loading ────────────────────── */
  .placeholder {
    display: grid; place-items: center; height: 60vh;
    color: var(--text-3); text-align: center;
  }
  .placeholder .big { font-size: 44px; margin-bottom: 12px; }

  /* ── Home — 카테고리 다이제스트 카드 그리드 ── */
  .home-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px; margin-top: 6px;
    align-items: start; /* 카드 높이를 내용만큼만 — 그리드 행 높이에 맞춰 늘어나지 않게 */
  }
  .home-card { display: block; min-width: 0; }
  .hc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; cursor: pointer; }
  .hc-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
  }
  .hc-icon .icon { width: 18px; height: 18px; }
  .hc-name {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hc-head:hover .hc-name { color: var(--brand); }
  .hc-unread { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
  .hc-date { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .hc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .home-card .summary-text { font-size: .88em; }
  .home-empty { color: var(--text-3); font-size: .92em; margin: 0; }
  .hc-open {
    margin-top: 14px; padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand);
  }
  .hc-open:hover { text-decoration: underline; }

  /* ── 문서 하단 이전/다음 날짜 내비게이션 ──── */
  .doc-nav {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 48px 0 0; padding-top: 24px;
    border-top: 1px solid var(--border);
  }

  /* ── 문서 목차(TOC) — 넓은 화면에서만 본문 오른쪽에 sticky 컬럼으로 ── */
  #toc { display: none; }
  @media (min-width: 1280px) {
    #toc.has-toc {
      display: block; position: sticky; top: 96px; align-self: flex-start;
      flex: 0 0 210px; /* 고정 — 범용 nav{flex:1}이 flex-grow:1을 넣어 목차가 늘어나며 가운데 정렬을 깨던 것 방지 */
      margin: 40px 0 0 32px;
      max-height: calc(100vh - 130px); overflow-y: auto;
      /* padding 전체를 명시해 대칭으로 — 범용 nav{padding:4px 12px 24px}의 아래 24px가
         새어들어와 왼쪽 border-left가 아래로만 길어지던 것 방지 */
      padding: 2px 0 2px 14px; border-left: 1px solid var(--border);
    }
  }
  .toc-link {
    display: block; padding: 5px 0; font-size: 12.5px; color: var(--text-3);
    text-decoration: none; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s;
  }
  .toc-link:hover { color: var(--text); }
  .toc-link.active { color: var(--brand); font-weight: 600; }
  .toc-h3 { padding-left: 12px; font-size: 11.5px; }

  /* 용어/각주 hover 말풍선(jelly-tooltip)은 인라인 프로즈 안에 들어가므로 inline-flex */
  .fn-tip { display: inline-flex; --jelly-tooltip-max-width: 340px; }

  .fade-in { animation: fadeIn .3s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  #sidebar-backdrop { display: none; }

  @media (max-width: 768px) {
    .content { padding: 20px 16px 70px; }
    /* 모바일: 상단바가 2행(1행=버튼, 2행=크럼브)이라 제목을 1행(버튼 행) 세로중앙에 맞춘다
       (top:50%면 두 행 사이라 크럼브와 겹침) */
    #site-title { top: 30px; transform: translate(-50%, -50%); }
    .crumb { max-width: 100%; } /* 크럼브는 2행 전체폭이라 폭 제한 해제 */
    /* 모바일: 폭 88vw로 좌우 여백, 높이는 보이는 영역의 78%로 낮춰 위아래에 배경 탭 공간을 남긴다
       (결과가 많아도 꽉 차지 않아 바깥을 눌러 닫을 수 있게) */
    #search-dialog { --jelly-dialog-width: 88vw; }
    #search-dialog::part(dialog) { max-height: calc(var(--sv-h, 100dvh) * 0.78); }

    /* 레일+리스트 래퍼를 통째로 오버레이 드로어로 전환 — margin 대신 transform으로 슬라이드.
       기본값을 "닫힘"으로 둬서 JS가 로드되기 전 첫 페인트부터 이미 닫힌 상태라 깜빡임이 없다.
       (.mobile-open은 JS가 열 때만 추가하는 클래스 — 데스크톱 collapse용 .hidden과는 별개) */
    .sidebar-wrap {
      position: fixed; top: 0; left: 0; z-index: 30;
      width: min(86vw, 320px); height: 100vh;
      box-shadow: var(--shadow);
      transition: transform .25s ease;
      transform: translateX(-100%);
    }
    .sidebar-wrap.mobile-open { transform: translateX(0); }
    /* 드로어 안에서 레일(60) 옆 리스트가 남은 폭을 채우도록, 데스크톱 collapse margin은 무효화 */
    #sidebar { width: auto; flex: 1; margin-left: 0 !important; }

    #sidebar-backdrop {
      display: block; position: fixed; inset: 0; z-index: 25;
      background: rgba(0,0,0,.45);
      opacity: 0; pointer-events: none;
      transition: opacity .25s ease;
    }
    #sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

    /* 좁은 화면: 버튼과 crumb가 겹치므로 crumb만 두 번째 줄로 내린다.
       1행 = [☰] …spacer… [🔍][📊][🌙], 2행 = [카테고리 › 날짜].
       spacer(order 0)는 원래 자리(☰와 버튼 사이)에 둬야 버튼이 오른쪽으로 밀린다. */
    .topbar { padding: 10px 14px; gap: 8px 6px; flex-wrap: wrap; }
    .crumb {
      font-size: 12.5px;
      order: 1; flex-basis: 100%;        /* 다음 줄로 내려가 전체폭 차지 */
      margin-top: 2px;                   /* 구분선 없이 여백만으로 버튼 행과 분리(구분선 최소화 원칙) */
    }
  }

  @media (max-width: 480px) {
    .content { padding: 16px 14px 60px; }
    .md h1 { font-size: 1.5em; }
    .news-item, .summary-list { padding: 12px 13px; }
    .index-entry { gap: 12px; }
  }