@import url('./vendor/katex/katex.min.css');
body { margin: 0; }
.community-shell { padding: 0 48px 48px; max-width: 1440px; margin: auto; font-family: var(--font-ui); font-size: var(--fs-base); line-height: calc(23 / 15); color: hsl(var(--foreground)); overflow-wrap: anywhere; }
.community-shell *, .community-shell *::before, .community-shell *::after { box-sizing: border-box; }
.community-shell main { padding-top: 40px; min-height: 65vh; }
.community-shell h1 { font-size: 32px; line-height: 38px; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.community-shell h2 { font-size: 24px; line-height: 30px; margin: 0; }
.community-shell h3 { font-size: 20px; line-height: 28px; margin: 0; }
.community-shell p { margin: 0; }
.community-shell a { color: hsl(var(--point-text)); text-underline-offset: .2em; overflow-wrap: anywhere; }
.community-shell a:hover { text-decoration: underline; }
.community-shell :focus-visible { outline: 2px solid hsl(var(--point)); outline-offset: 4px; }
.community-shell [tabindex="-1"]:focus { outline: none; }
.community-shell [hidden] { display: none !important; }
.community-stack { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.community-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--space-6); }
.community-nav { display: flex; flex-direction: column; gap: var(--space-2); align-self: start; position: sticky; top: 76px; }
.community-nav strong { font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.community-nav a { color: hsl(var(--muted-foreground)); text-decoration: none; padding: var(--space-3); border-radius: var(--radius); font-size: var(--fs-sm); }
.community-nav a[aria-current="page"], .community-tabs a[aria-current="page"] { color: hsl(var(--point-text)); background: hsl(var(--muted)); }
.community-nav summary { display: none; }
.community-nav details { display: contents; }
.community-nav-links { display: flex; flex-direction: column; gap: var(--space-2); }
.community-membership-mobile { display: none; }
.community-muted, .community-meta, .community-breadcrumb { color: hsl(var(--muted-foreground)); }
.community-meta, .community-breadcrumb { font-size: var(--fs-sm); line-height: 20px; }
.community-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.community-breadcrumb a { color: inherit; }
.community-lead { font-size: var(--fs-lg); line-height: 26px; }
.community-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.community-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.community-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); padding: 10px var(--space-5); min-height: 43px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: transparent; color: hsl(var(--foreground)) !important; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.community-button:hover { background: hsl(var(--muted)); text-decoration: none !important; }
.community-button.primary { border-color: transparent; background: hsl(var(--point)); color: hsl(var(--primary-foreground)) !important; }
.community-button:disabled { cursor: default; opacity: .55; }
.community-search { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.community-search-icon { width: 18px; height: 18px; flex: none; background: hsl(var(--foreground)); mask: url('/assets/community-search.svg') center / 18px 18px no-repeat; }
.community-search input { border: 0; padding: 0; background: transparent; min-width: 0; width: 100%; font: inherit; color: hsl(var(--foreground)); }
.community-search input::placeholder { color: hsl(var(--muted-foreground)); }
.community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.community-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); min-width: 0; }
a.community-card { text-decoration: none; }
.community-card h2 { color: hsl(var(--point-text)); }
.community-card p { color: hsl(var(--muted-foreground)); }
/* 주제 도넛 색(VIN-700). 계정 그래프 화면(account/index.html)과 같은 순서·같은 값이라 두 화면에서 같은 주제가 같은 색으로 읽힌다. */
/* ds-allow: 도메인 팔레트 — 허브 토큰에 아직 없어 쪽마다 선언한다. SSoT 편입은 별건 */
[data-theme="dark"] .community-topics { --dom1:#EDEDEB; --dom2:#8FCBA8; --dom3:#D9B36A; --dom4:#E08585; --dom5:#7FBCD9; --dom6:#C29FD9; }
/* ds-allow: 도메인 팔레트 — 허브 토큰에 아직 없어 쪽마다 선언한다. SSoT 편입은 별건 */
[data-theme="light"] .community-topics { --dom1:#17171A; --dom2:#2F7A54; --dom3:#8A6420; --dom4:#B14C4C; --dom5:#1F6E92; --dom6:#7A4F91; }
.community-topics { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-5); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); min-width: 0; }
.community-topic-ring { flex: none; }
.community-topic-centre { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.community-topic-total { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.community-topic-body { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.community-topic-legend { display: flex; flex-direction: column; gap: 6px; }
.community-topic-legend button { color: inherit; }
.community-intro { max-width: 820px; }
.community-mine { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
/* 디렉터리(VIN-738): 그림 없이 줄마다 카드 한 장. 왼쪽은 안에 든 것(주제 전부·첫 세 걸음), 오른쪽은 수 셋과 그래프 보기. */
.community-intro-actions { margin-top: var(--space-2); }
.community-directory { display: flex; flex-direction: column; gap: var(--space-4); }
.community-dir-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-6); padding: var(--space-6); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.community-dir-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.community-dir-main h2 { font-size: 24px; line-height: 32px; }
.community-dir-main h2 a { color: hsl(var(--foreground)); text-decoration: none; }
.community-dir-main h2 a:hover { text-decoration: underline; }
.community-dir-scope { color: hsl(var(--muted-foreground)); max-width: 720px; }
.community-dir-topics { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 22px; }
.community-dir-topics a { text-decoration: none; }
.community-dir-topics a:hover { text-decoration: underline; }
.community-dir-count { margin-left: 6px; color: hsl(var(--muted-foreground)); font-size: 12px; font-variant-numeric: tabular-nums; }
.community-dir-path { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: var(--fs-sm); }
.community-dir-path .community-meta { margin-right: var(--space-1); }
.community-dir-step { color: hsl(var(--muted-foreground)); }
.community-dir-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-left: var(--space-6); border-left: 1px solid hsl(var(--border)); }
.community-dir-stats { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.community-dir-stat { display: flex; flex-direction: column-reverse; }
.community-dir-stat dt { color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
.community-dir-stat dd { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.community-dir-search > :empty { display: none; }
.community-dir-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.community-dir-results li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-top: 1px solid hsl(var(--border)); min-width: 0; }
.community-dir-results li:last-child { border-bottom: 1px solid hsl(var(--border)); }
.community-take-part { padding: var(--space-4) 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.community-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.community-steps li { display: flex; flex-direction: column; gap: 2px; counter-increment: step; min-width: 0; }
.community-steps h2 { font-size: var(--fs-base); line-height: 23px; }
.community-steps h2::before { content: counter(step) "  "; white-space: pre; color: hsl(var(--muted-foreground)); font-weight: 500; font-variant-numeric: tabular-nums; }
.community-steps p { font-size: var(--fs-sm); line-height: 20px; }
/* 식별 칸(VIN-738). 넓은 화면은 출처 위의 카드, 좁은 화면은 제목 아래 한 줄. */
.community-read-side { gap: var(--space-4); align-self: start; }
.community-identity { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.community-identity-kind { color: hsl(var(--muted-foreground)); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.community-identity-names { display: flex; flex-direction: column; gap: 2px; }
.community-identity-names strong { font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.community-identity-names span { color: hsl(var(--muted-foreground)); }
.community-identity dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-3); margin: 0; font-size: var(--fs-sm); }
.community-identity dt { color: hsl(var(--muted-foreground)); }
.community-identity dd { margin: 0; overflow-wrap: anywhere; }
.community-identity-line { display: none; }
/* 그래프 보기(VIN-739). 프레임 안은 데스크톱 지도의 3D 시간순 가지이고, 높이는 화면에 맞춘다. */
.community-graph-view { display: block; width: 100%; height: max(480px, calc(100vh - 260px)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); }
.community-create-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid hsl(var(--border)); }
.community-home-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: stretch; }
.community-home-top.single { grid-template-columns: minmax(0, 1fr); }
.community-start { gap: var(--space-3); border-color: hsl(var(--point) / .45); }
.community-start h2 a { color: hsl(var(--point-text)); text-decoration: none; }
.community-start p:not(.community-meta) { color: hsl(var(--foreground)); }
.community-start .community-button { align-self: start; margin-top: var(--space-2); }
.community-norms { gap: var(--space-3); }
.community-norms h2, .community-help h2 { font-size: 20px; line-height: 28px; color: hsl(var(--foreground)); }
.community-norms ul, .community-help-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: hsl(var(--muted-foreground)); }
.community-help-list li { display: flex; flex-direction: column; gap: 2px; }
.community-help-list strong { color: hsl(var(--foreground)); font-weight: 600; }
.community-sources h3 { font-size: var(--fs-base); line-height: 23px; color: hsl(var(--foreground)); }
.community-relation-group { display: flex; flex-direction: column; gap: var(--space-2); }
.community-relation-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.community-tools { padding-top: var(--space-5); border-top: 1px solid hsl(var(--border)); }
.community-row { display: flex; flex-direction: column; gap: 6px; padding: 0 0 var(--space-5); border-bottom: 1px solid hsl(var(--border)); }
.community-row-title { font-size: var(--fs-lg); line-height: 26px; font-weight: 600; text-decoration: none; }
.community-tabs { display: flex; gap: var(--space-2); width: min(344px, 100%); }
.community-tabs a { flex: 1; color: hsl(var(--muted-foreground)); text-align: center; text-decoration: none; border-radius: var(--radius); padding: var(--space-3); min-width: 0; }
.community-tabs[data-agents] { width: min(456px, 100%); }
.community-agent-cards .community-card { padding: var(--space-4); gap: var(--space-4); }
.community-agent-cards h3 { font-size: var(--fs-lg); line-height: 26px; }
.community-agent-button { align-self: start; }
.community-agent-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1.8fr); gap: var(--space-5); align-items: start; }
.community-agent-layout > * { min-width: 0; }
.community-agent-take-layout > .community-agent-source:first-child { padding: 0; border: 0; background: transparent; }
.community-agent-instruction { margin: 0; padding: var(--space-4); border-radius: var(--radius); background: hsl(var(--muted)); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.community-agent-source { padding: var(--space-4); gap: var(--space-4); }
.community-agent-source h2 { font-size: 20px; line-height: 28px; color: hsl(var(--foreground)); }
.community-agent-source .community-button { align-self: start; }
.community-agent-actions { display: flex; flex-direction: column; align-items: start; gap: var(--space-4); }
.community-agent-divider { width: 100%; border: 0; border-top: 1px solid hsl(var(--border)); margin: 0; }
.community-agent-hash { word-break: break-all; }
.community-agent-destination { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.community-agent-destination input { margin-top: 4px; accent-color: hsl(var(--point)); }
.community-agent-destination:has(input:checked) { background: hsl(var(--muted)); }
.community-agent-destination:has(input:disabled) { color: hsl(var(--muted-foreground)); }
.community-agent-fallback { min-height: 240px; width: 100%; resize: vertical; padding: var(--space-4); background: hsl(var(--muted)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); font: inherit; }
.community-read-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(230px, 1fr); gap: var(--space-6); align-items: start; }
.community-article { min-width: 0; overflow-wrap: anywhere; gap: var(--space-4); }
.community-read-layout > .community-stack > .community-article > p:first-child { font-size: var(--fs-lg); line-height: 26px; }
.community-article h2, .community-article h3 { margin-top: 0; }
.community-article p, .community-article ul, .community-article ol, .community-article pre { margin: 0; }
.community-article pre { white-space: pre-wrap; background: hsl(var(--muted)); border-radius: var(--radius); padding: var(--space-4); font-family: var(--font-mono); }
.community-article ul, .community-article ol { padding-left: var(--space-5); }
.community-sources { padding: var(--space-4); gap: var(--space-4); }
.community-sources h2 { color: hsl(var(--foreground)); font-size: 20px; line-height: 28px; }
.community-state { display: flex; flex-direction: column; align-items: start; gap: var(--space-3); border-radius: var(--radius); padding: var(--space-4); background: hsl(var(--muted)); overflow-wrap: anywhere; }
.community-state[role="alert"] { border: 1px solid hsl(var(--border)); }
.community-form { display: flex; flex-direction: column; gap: var(--space-5); }
.community-field { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.community-field label { font-size: var(--fs-sm); }
.community-field input, .community-field textarea, .community-shell select { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: var(--space-4); font: inherit; color: hsl(var(--foreground)); width: 100%; min-width: 0; }
.community-field textarea { resize: vertical; min-height: 200px; }
.community-shell select { width: auto; padding: var(--space-2) var(--space-3); }
.community-field select { width: 100%; }
.community-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.community-diff section { min-width: 0; padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.community-diff pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: var(--space-3) 0 0; }
.community-diff del, .community-diff ins { display: block; background: hsl(var(--muted)); }
.community-snapshot-meta { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.community-footer { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: var(--fs-sm); }
.community-footer a { color: inherit; }
.community-shell[data-layout="community"] .community-footer { margin-left: 216px; }
.community-skip { position: fixed; top: -100px; left: var(--space-4); z-index: 100; background: hsl(var(--background)); padding: var(--space-3); }
.community-skip:focus { top: var(--space-4); }
@media (max-width: 1000px) { .community-read-layout, .community-agent-layout, .community-home-top { grid-template-columns: minmax(0, 1fr); } .community-identity { display: none; } .community-identity-line { display: block; } .community-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .community-shell { padding: 0 24px 32px; }
  .community-shell main { padding-top: var(--space-5); }
  .community-layout { display: flex; flex-direction: column; gap: var(--space-5); }
  .community-nav { position: static; width: 100%; }
  .community-nav > strong { display: none; }
  .community-nav summary { display: none; }
  .community-nav details { display: block; }
  .community-nav-links { flex-direction: row; flex-wrap: wrap; }
  .community-nav a { padding: var(--space-2) var(--space-3); }
  .community-membership-desktop { display: none; }
  .community-membership-mobile { display: flex; }
  .community-shell[data-layout="community"] .community-footer { margin-left: 0; }
  .community-grid, .community-diff { grid-template-columns: minmax(0, 1fr); }
  .community-dir-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); }
  .community-dir-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid hsl(var(--border)); }
  .community-dir-stats { flex-direction: row; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .community-dir-stat { flex-direction: row-reverse; align-items: baseline; gap: 6px; }
  .community-dir-stat dd { font-size: var(--fs-base); line-height: 23px; }
  .community-dir-side > .community-meta { flex-basis: 100%; }
  .community-graph-view { height: calc(100vh - 220px); min-height: 420px; }
  .community-agent-take-layout { padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
  .community-agent-take-layout > .community-agent-source { padding: 0; border: 0; background: transparent; }
  .community-shell h1 { font-size: 28px; line-height: 36px; }
  .community-actions .community-button { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.community-table-scroll, .community-math { min-width: 0; max-width: 100%; overflow-x: auto; }
.community-table-scroll table { width: 100%; border-collapse: collapse; }
.community-table-scroll th, .community-table-scroll td { padding: var(--space-2); border-bottom: 1px solid hsl(var(--border)); vertical-align: top; min-width: 160px; }
.community-table-scroll [data-align="left"] { text-align: left; }
.community-table-scroll [data-align="center"] { text-align: center; }
.community-table-scroll [data-align="right"] { text-align: right; }
.community-math .katex-display { margin: 0; }
.community-math-error { font-family: var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

.community-math:not(div) { display: inline-block; vertical-align: middle; }

/* 커뮤니티 앞문(VIN-730): 왼쪽 주제 나무와 휴대폰 서랍, 디렉터리 카드의 그래프 그림, 시작 경로, 주제별 칸, 주제 화면.
   색은 토큰만 쓴다. 카드 그림의 무리 색은 community.css 가 카드 안에 선언한 주제 순위 색(--domN)이다. */

/* 왼쪽 메뉴 */
.community-nav { max-height: calc(100vh - 96px); overflow-y: auto; }
.community-nav-bar { display: none; }
.community-nav-panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.community-shell .community-nav .community-nav-home { padding: 0 var(--space-3); font-size: 20px; line-height: 28px; font-weight: 700; color: hsl(var(--foreground)); background: none; }
.community-shell .community-nav .community-nav-home[aria-current="page"] { color: hsl(var(--point-text)); }
.community-tree { display: flex; flex-direction: column; gap: var(--space-2); }
.community-tree > .community-meta { padding: 0 var(--space-3); }
.community-tree ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.community-tree ul ul { padding-left: var(--space-3); margin-top: 2px; }
.community-shell .community-tree a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 6px var(--space-3); line-height: 20px; }
.community-tree-name { min-width: 0; }
.community-tree-count { flex: none; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.community-nav-panel .community-nav-links { gap: 2px; padding-top: var(--space-3); border-top: 1px solid hsl(var(--border)); }
.community-shell .community-nav-panel .community-nav-links a { padding: 6px var(--space-3); line-height: 20px; }
.community-drawer-toggle, .community-drawer-close { display: none; }
html.community-drawer-lock { overflow: hidden; }

/* 문서 한 줄 */
.community-index-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.community-index-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); row-gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.community-index-row:last-child { border-bottom: 0; }
.community-index-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.community-shell .community-index-title { font-weight: 600; text-decoration: none; }
.community-shell .community-index-title:hover { text-decoration: underline; }
.community-index-row > .community-oneline { grid-column: 1; }
.community-index-meta { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-sm); line-height: 20px; color: hsl(var(--muted-foreground)); white-space: nowrap; text-align: right; }
.community-oneline { color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-oneline .community-math, .community-hub-line .community-math { overflow: visible; vertical-align: baseline; }
.community-oneline .katex, .community-hub-line .katex { font-size: 1em; }
.community-tag { flex: none; padding: 0 var(--space-2); border: 1px solid hsl(var(--point) / .5); border-radius: var(--radius-pill); font-size: 12px; line-height: 18px; color: hsl(var(--point-text)); }

/* 디렉터리 카드 */

/* 커뮤니티를 가로지르는 띠 */

/* 커뮤니티 홈 */
.community-view-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.community-shell .community-view-switch a { padding: 6px var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 20px; color: hsl(var(--muted-foreground)); text-decoration: none; }
.community-shell .community-view-switch a[aria-current="page"] { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.community-path { gap: var(--space-3); padding: var(--space-5) var(--space-6); border-color: hsl(var(--point) / .45); }
.community-path-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.community-shell .community-path h2 { color: hsl(var(--foreground)); }
.community-path-steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: path; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.community-path-steps li { counter-increment: path; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; align-content: start; min-width: 0; }
.community-path-steps li::before { content: counter(path); grid-row: 1 / span 2; width: 28px; height: 28px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.community-path-steps .community-oneline { grid-column: 2; }
.community-panels { display: flex; flex-direction: column; gap: var(--space-6); }
.community-panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.community-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid hsl(var(--border)); }
.community-shell .community-panel-head h3 a { color: hsl(var(--foreground)); text-decoration: none; }
.community-shell .community-panel-head h3 a:hover { text-decoration: underline; }
.community-panel-more { align-self: start; font-size: var(--fs-sm); }

/* 주제 화면 */
.community-hub { gap: var(--space-3); align-items: flex-start; }
.community-shell .community-hub h2 a { color: hsl(var(--point-text)); text-decoration: none; }
.community-shell .community-hub .community-hub-line { color: hsl(var(--foreground)); font-size: var(--fs-lg); line-height: 26px; }
.community-leaf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-6); align-items: start; }
.community-leaf-steps { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.community-leaf-steps li::marker { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.community-leaf-graph { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.community-leaf-graph svg { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.community-leaf-graph .community-graph-edges line { stroke: hsl(var(--muted-foreground)); stroke-opacity: .35; stroke-width: 1; }
.community-leaf-graph .community-graph-edges line.ordered { stroke-opacity: .85; }
.community-leaf-graph marker path { fill: hsl(var(--muted-foreground)); }
.community-leaf-nodes circle { fill: hsl(var(--card)); stroke: hsl(var(--muted-foreground)); stroke-width: 1.2; }
.community-leaf-nodes .is-hub circle { stroke: hsl(var(--point)); stroke-width: 2; }
.community-leaf-nodes a:hover circle, .community-leaf-nodes a:focus-visible circle { fill: hsl(var(--muted)); stroke: hsl(var(--point)); }
.community-leaf-nodes text { fill: hsl(var(--foreground)); font-family: var(--font-ui); font-size: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }

@media (max-width: 1000px) {
  .community-leaf-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .community-nav { max-height: none; overflow: visible; }
  .community-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .community-nav-bar strong { font-size: 20px; line-height: 28px; min-width: 0; }
  .community-shell .community-drawer-toggle { display: inline-flex; flex: none; min-height: 40px; padding: 6px var(--space-4); }
  .community-nav-panel { position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: min(320px, 86vw); padding: var(--space-5); overflow-y: auto; background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); box-shadow: var(--shadow-float); transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-panel) var(--ease-drawer), visibility 0s linear var(--dur-panel); }
  .community-nav[data-open] .community-nav-panel { transform: none; visibility: visible; transition: transform var(--dur-panel) var(--ease-drawer); }
  .community-shell .community-drawer-close { display: inline-flex; align-self: flex-end; min-height: 40px; padding: 6px var(--space-4); }
  .community-drawer-scrim { position: fixed; inset: 0; z-index: 40; background: hsl(var(--background) / .7); }
  .community-nav-panel .community-nav-links { flex-direction: column; flex-wrap: nowrap; }
  .community-shell .community-nav-panel a { padding: var(--space-2) var(--space-3); }
  .community-path { padding: var(--space-5); }
  .community-index-row { grid-template-columns: minmax(0, 1fr); }
  .community-index-meta { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .community-nav-panel, .community-nav[data-open] .community-nav-panel { transition: none; } }