/* 새 셸 화면별 완성도 층 — knowledge. DESIGN.md(Framer) 준수 · body.shell-v2 스코프 */

/* ─────────────── 지식 관리 ─────────────── */
body.shell-v2 .km-rail-item { color: var(--ink-80); }
/* 본문 안 레일 항목의 모서리를 한 눈금으로 — 좌측 GNB(.nav-btn)는 알약, 본문 안 레일(.section-nav-btn·km-*)은 --r-md.
 *   트리 항목만 --r-sm 이라 같은 레일 안에서 두 모서리가 섞여 있었다(2026-09-18 감사). */
body.shell-v2 .km-tree-item { border-radius: var(--r-md); }
body.shell-v2 :is(.km-rail-item, .km-tree-item):hover { background: var(--surface-1); color: var(--ink); }
body.shell-v2 :is(.km-rail-item-on, .km-rail-item-on:hover) { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .km-rail-item-on .km-rail-item-hint { color: var(--ink-48); }
body.shell-v2 .km-tree { border-left-color: var(--hairline); }
body.shell-v2 .km-tree-item { color: var(--ink-48); }
body.shell-v2 :is(.km-tree-item-on, .km-tree-item-on:hover) { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .km-tree-count { border: 0; background: transparent; color: var(--ink-48); padding: 0 2px; }
body.shell-v2 .km-tree-item-on .km-tree-count { color: var(--ink-80); background: transparent; }
body.shell-v2 .km-search { border-radius: var(--r-pill); }

body.shell-v2 .km-entry { background: var(--surface-1); border: 0; border-radius: var(--r-lg); padding: 14px 16px; }
body.shell-v2 .km-entry:hover { background: var(--surface-2); border-color: transparent; }
body.shell-v2 :is(.km-entry-on, .km-entry-on:hover) { background: var(--surface-3); }
body.shell-v2 .km-entry:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .km-entry-title { font-size: var(--fs-body); font-weight: 600; }
body.shell-v2 .km-badge { border-radius: var(--r-pill); font-weight: 500; }
body.shell-v2 .km-entry:hover .km-badge { background: var(--surface-3); }
body.shell-v2 .km-entry-on .km-badge { background: var(--canvas); }
body.shell-v2 .km-badge-on { color: var(--ink); }
body.shell-v2 :is(.km-badge-off, .km-badge-imported) { color: var(--ink-48); }
body.shell-v2 .km-ed-kicker { color: var(--ink-48); }
body.shell-v2 .km-md-bq { border-left-color: var(--divider-soft); background: var(--surface-1); }

/* 901~1199 — 3열이면 편집기가 세로 글자로 찌그러진다: 목록 위 · 편집기 아래로 */
@media (min-width: 901px) and (max-width: 1199px) {
  body.shell-v2 .km-main { flex-direction: column; gap: var(--sp-md); }
  body.shell-v2 .km-col-list { flex: 0 1 auto; max-width: none; max-height: 52%; }
  body.shell-v2 .km-col-editor { flex: 1 1 0; }
}
/* ≤900 — 레일은 탭 줄, 카테고리는 가로 스크롤 칩 줄(목록 위에 카테고리 13줄이 쌓이지 않게) */
@media (max-width: 900px) {
  body.shell-v2 .km-layout { padding: var(--sp-md); gap: var(--sp-md); }
  body.shell-v2 .km-rail { overflow: visible; }
  body.shell-v2 .km-rail-nav { flex-wrap: wrap; gap: 4px; }
  body.shell-v2 .km-rail-item { flex: 1 1 0; min-width: 0; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--r-pill); padding: 0 12px; }
  body.shell-v2 .km-rail-item-hint { display: none; }
  body.shell-v2 .km-tree {
    order: 9; flex: 1 0 100%; flex-direction: row; gap: 6px; margin: 6px 0 0; padding: 0 0 2px; border: 0;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  body.shell-v2 .km-tree::-webkit-scrollbar { display: none; }
  body.shell-v2 .km-tree-item { flex: none; width: auto; min-height: 44px; gap: 8px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-1); color: var(--ink-80); }
  body.shell-v2 .km-list-toolbar .km-search { min-height: 44px; font-size: 16px; }
  body.shell-v2 .km-filter-select { min-height: 44px; }
  body.shell-v2 .km-filter-row { gap: 8px 12px; }
}

/* 지식 관리 — 선택 전 빈 편집기는 좁은 폭에서 목록 자리를 뺏는다: 숨기고 목록이 높이를 다 쓴다 */
@media (max-width: 1199px) {
  body.shell-v2 .km-col-editor:has(> .view-todo:only-child) { display: none; }
  body.shell-v2 .km-main:has(> .km-col-editor > .view-todo:only-child) .km-col-list { max-height: none; flex: 1 1 auto; }
}

/* ─────────────── 지식 편집기 — 주입 토글·티어 셀렉트 ─────────────── */
body.shell-v2 .km-editor .btn.toggle-btn { border-color: transparent; background: var(--surface-1); color: var(--ink-48); }
body.shell-v2 .km-editor .btn.toggle-btn.is-on { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .km-ed-tier {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-color: var(--surface-1); border: 1px solid transparent; border-radius: var(--r-pill); color: var(--ink);
  padding: 8px 36px 8px 14px; font-size: var(--fs-caption); font-weight: 500;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-48) 50%), linear-gradient(135deg, var(--ink-48) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
@media (max-width: 810px) {
  body.shell-v2 :is(.km-ed-tier, .km-editor .btn.toggle-btn) { min-height: 44px; }
  body.shell-v2 .btn.km-new-btn { min-height: 44px; }
}

/* ≤900 목록 스크롤 주체는 페이지 하나 — 기본 스타일의 40vh 내부 스크롤러(338px 안에 6985px)가 목록 아래를 비우고 스크롤을 둘로 나눴다 */
@media (max-width: 900px) {
  body.shell-v2 .km-list-body { max-height: none; overflow: visible; }
  body.shell-v2 .km-col-list { max-height: none; }
}

/* 내 규칙 행 — 표면 카드, ≤810 에서는 글이 위 · 토글·삭제가 아래(한 줄이면 글 칸이 글자 단위로 접혔다 — 390 실측) */
body.shell-v2 .km-rule-row { background: var(--surface-1); border-color: transparent; border-radius: var(--r-lg); }
@media (max-width: 810px) {
  body.shell-v2 .km-rule-row { flex-direction: column; align-items: stretch; }
  body.shell-v2 .km-rule-text { width: 100%; }
  body.shell-v2 .km-rule-ctl { flex-wrap: wrap; }
  body.shell-v2 .km-rule-ctl .btn { min-height: 44px; }
}