/* 캐비닛 페이지(wiki.html) 전용 — 히어로는 그래프 뷰(yarn.css·yarn.js)를 그대로 쓰고,
   이 파일은 문서 트리와 검색 미니 화면, 그리고 히어로 배치만 맡는다. */

/* 히어로: 왼쪽 글, 오른쪽 그래프 */
.cab-hero { padding-block: 24px 56px; overflow: hidden; }
.cab-in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: center; }
.cab-eyebrow { display: inline-block; margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.cab-in h1 {
  margin: 0 0 16px; font-size: clamp(32px, 4.4vw, 50px); font-weight: 700;
  line-height: 1.22; letter-spacing: -0.03em; text-wrap: balance;
}

/* 두 열 섹션 */
.wk-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.wk h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.wk-in > div > p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--sub); max-width: 28em; }

/* 문서 트리 */
.wk-tree {
  padding: 18px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.wkt {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-ctl);
  font-size: 14.5px; line-height: 1.3; color: var(--ink);
}
.wkt .ic { width: 16px; height: 16px; color: var(--faint); }
.wkt-1 { font-weight: 600; }
.wkt-2 { margin-left: 22px; color: var(--sub); }
.wkt-3 { margin-left: 44px; color: var(--sub); font-size: 14px; }
.wkt.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.wkt.on .ic { color: var(--accent); }

/* 검색 */
.wk-search {
  max-width: 720px; margin: 40px auto 0; padding: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
}
.wks-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 6px;
  background: var(--panel2); border-radius: var(--r-panel); font-size: 16px; font-weight: 600;
}
.wks-bar .ic { width: 18px; height: 18px; color: var(--faint); }
.wks-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--line2); font-size: 15px;
}
.wks-row small { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.wks-tag {
  flex: none; padding: 2px 8px; border-radius: var(--r-tick); font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--c, var(--sub)) 14%, var(--panel)); color: var(--c, var(--sub));
}
.wks-tag[data-cat="page"] { --c: #3B5BDB; }
.wks-tag[data-cat="note"] { --c: #8B5E3C; }
.wks-tag[data-cat="task"] { --c: #2F9E63; }
.wks-tag[data-cat="event"] { --c: #0EA5B7; }

@media (max-width: 860px) {
  .cab-hero { padding-block: 16px 40px; }
  .cab-in { grid-template-columns: 1fr; gap: 8px; }
  .wk-in { grid-template-columns: 1fr; gap: 24px; }
  .wks-row { flex-wrap: wrap; }
  .wks-row small { margin-left: 0; width: 100%; }
}