/* TreeMenu — Outline 식 사이드바 트리
 *
 * 골격은 Outline 을 따른다: 임의 깊이 중첩, 항목마다 이모지, hover 에 나타나는
 * 펼침 삼각형, 둥근 활성 알약, 작은 구역 라벨.
 *
 * 입체감은 OnBridge 탑메뉴에서 가져왔다. 탑메뉴가 도드라져 보이는 이유는
 * 그림자가 진해서가 아니라 「진한 판 위에 밝은 판이 얹히고, 그 경계에 1~2px
 * 밝은 선이 지나간다」는 층 구조 때문이다. 사이드바에도 같은 규칙만 쓴다.
 *   ① 머리   — 남색 판 두 장 + 경계의 밝은 선
 *   ② 패널   — 본문보다 어두운 바탕, 오른쪽 모서리에 선 하나와 옅은 그림자
 *   ③ 활성 행 — 어두운 바탕에서 흰 카드가 떠오르고 윗변에 밝은 선
 * 그림자는 어디서도 2px 를 넘지 않는다. 넘기면 90년대 위젯이 된다.
 */

.tm{
  /* 층을 만드는 두 판. 탑메뉴와 같은 값이다. */
  --tm-bar1:#0d2b6b;
  --tm-bar2:#1857a4;
  --tm-accent:#1857a4;
  --tm-on-bar:#ffffff;

  /* 사이드바 바탕 — 배너색(#1857a4)을 18% 섞은 파스텔 청색.
     10% 는 화면에 따라 흰색과 구별이 안 됐다. 18% 면 흰 본문과 1.33 배 차이라
     확실히 갈라지면서도 눈에 튀지 않는다.

     바탕이 색을 가지면 그 위 것들도 따라와야 한다 (B04 §5).
     흐린 글자는 이 바탕에서 4.54 — #5b6b80 으로 두면 4.11 이라 AA 에 걸린다.
     바탕을 더 진하게 하려면 --tm-muted 도 같이 내릴 것.

     다른 색이 좋으면 --tm-bg 한 줄만 바꾼다:
       민트  #d5efe6   라벤더 #e0dcf0   모래  #f0e9dc  (각각 muted 는 #4f5d72 로) */
  --tm-bg:#d5e1ef;
  --tm-panel:#ffffff;
  --tm-ink:#16202c;
  --tm-muted:#55647a;
  --tm-line:#bfd0e4;
  --tm-guide:#aec1d8;

  /* 위로 얹히는 밝은 선. 입체감의 대부분이 여기서 나온다. */
  --tm-lift:rgba(255,255,255,.92);
  --tm-drop:rgba(16,32,48,.13);

  --tm-w:292px;
  --tm-rail:56px;
  --tm-radius:7px;

  position:relative;
  display:flex;
  flex:none;
  width:var(--tm-w);
  height:100%;
  min-height:0;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
  color:var(--tm-ink);
  -webkit-font-smoothing:antialiased;
}
.tm *{box-sizing:border-box}
.tm.is-folded{width:var(--tm-rail)}
/* 폭을 끄는 동안에는 전환을 끈다. 안 그러면 커서보다 늦게 따라온다. */
.tm:not(.is-sizing){transition:width .16s ease}

@media (prefers-color-scheme:dark){
  .tm{
    --tm-bar1:#0a2050;
    --tm-bar2:#1d4a86;
    --tm-accent:#77b0f0;
    /* 어두운 화면에서도 같은 규칙 — 바탕에 청색기를 조금 주고 패널이 그 위로 뜬다 */
    --tm-bg:#151d29;
    --tm-panel:#1e2733;
    --tm-ink:#e6ecf3;
    --tm-muted:#9aabbe;
    --tm-line:#2d3948;
    --tm-guide:#364556;
    --tm-lift:rgba(255,255,255,.07);
    --tm-drop:rgba(0,0,0,.45);
  }
}

/* ── 패널 ─────────────────────────────────────────────────
   오른쪽 모서리: 선 1px + 아주 옅은 그림자. 본문보다 앞에 있다는 표시다. */
.tm-panel{
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  background:var(--tm-bg);
  box-shadow:1px 0 0 color-mix(in srgb,var(--tm-line) 80%,#0a2a55),
             3px 0 12px rgba(16,32,48,.07);
  overflow:hidden;
}
@media (prefers-color-scheme:dark){
  .tm-panel{box-shadow:1px 0 0 var(--tm-line), 3px 0 12px rgba(0,0,0,.3)}
}

/* ── ① 머리 — 탑메뉴와 같은 두 판 구조 ──────────────────── */
.tm-head{flex:none;color:var(--tm-on-bar)}
.tm-bar1{
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 10px 0 12px;
  /* 위가 밝고 아래가 어두운 아주 얕은 기울기. 판이 앞으로 굽어 보인다. */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tm-bar1) 88%,#ffffff) 0%,
    var(--tm-bar1) 62%,
    color-mix(in srgb,var(--tm-bar1) 92%,#000000) 100%);
}
.tm-bar2{
  display:flex;align-items:stretch;gap:0;
  height:34px;padding:0 6px;
  background:var(--tm-bar2);
  /* 탑메뉴의 그 선. 두 판 사이를 갈라 위 판을 띄운다. */
  border-top:2px solid rgba(255,255,255,.35);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
  overflow-x:auto;scrollbar-width:none;
}
.tm-bar2::-webkit-scrollbar{display:none}

.tm-logo{
  flex:none;display:grid;place-items:center;
  width:26px;height:26px;border-radius:6px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.25);
  font-size:14px;font-weight:800;letter-spacing:-.02em;
}
.tm-title{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.tm-title b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-title span{font-size:11px;opacity:.72;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tm-fold{
  flex:none;width:26px;height:26px;border:0;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.12);color:inherit;font-size:13px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  display:grid;place-items:center;
}
.tm-fold:hover{background:rgba(255,255,255,.24)}
.tm-fold:focus-visible{outline:2px solid #fff;outline-offset:1px}

.tm-tab{
  flex:none;border:0;background:none;cursor:pointer;
  color:var(--tm-on-bar);opacity:.85;
  font:700 11.5px/1 inherit;letter-spacing:.03em;
  padding:0 12px;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.22);
}
.tm-tab:last-child{border-right:0}
.tm-tab:hover{opacity:1;background:rgba(255,255,255,.13)}
.tm-tab.is-cur{
  opacity:1;background:var(--tm-bg);color:var(--tm-accent);
  border-radius:6px 6px 0 0;border-right-color:transparent;
  box-shadow:inset 0 1px 0 var(--tm-lift);
}

/* ── 검색 ────────────────────────────────────────────────── */
.tm-search{flex:none;padding:10px 10px 6px}
.tm-search input{
  width:100%;height:32px;padding:0 30px 0 30px;
  border:1px solid var(--tm-line);border-radius:var(--tm-radius);
  background:var(--tm-panel);color:var(--tm-ink);
  font:14px/1 inherit;
  /* 눌린 칸처럼 보이게 안쪽 그림자. 떠 있는 행들과 반대 방향이다. */
  box-shadow:inset 0 1px 2px rgba(16,32,48,.07);
}
.tm-search input::placeholder{color:var(--tm-muted)}
/* type=search 에 브라우저가 붙이는 지움 단추. 우리 것과 겹치므로 뗀다. */
.tm-search input::-webkit-search-cancel-button,
.tm-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.tm-search input:focus{outline:0;border-color:var(--tm-accent);
  box-shadow:inset 0 1px 2px rgba(16,32,48,.07), 0 0 0 3px color-mix(in srgb,var(--tm-accent) 22%,transparent)}
.tm-search{position:relative}
/* 돋보기는 글자가 아니라 도형으로 그린다.
   ⌕(U+2315) 는 없는 폰트가 많아 네모나 엉뚱한 글자로 떨어진다. */
.tm-search::before{
  content:"";position:absolute;left:21px;top:50%;margin-top:-6px;
  width:9px;height:9px;border:1.6px solid var(--tm-muted);border-radius:50%;
  pointer-events:none}
.tm-search::after{
  content:"";position:absolute;left:29px;top:50%;margin-top:2px;
  width:5px;height:1.6px;background:var(--tm-muted);border-radius:1px;
  transform:rotate(45deg);transform-origin:left center;pointer-events:none}
.tm-clear{
  position:absolute;right:18px;top:calc(50% + 2px);transform:translateY(-50%);
  width:20px;height:20px;border:0;border-radius:5px;cursor:pointer;
  background:none;color:var(--tm-muted);font-size:14px;line-height:1;display:none}
.tm-clear:hover{background:var(--tm-line);color:var(--tm-ink)}
.tm.has-query .tm-clear{display:block}

/* ── 스크롤 구역 ─────────────────────────────────────────── */
.tm-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 8px 16px}
.tm-scroll::-webkit-scrollbar{width:10px}
.tm-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--tm-muted) 32%,transparent);
  border:3px solid transparent;background-clip:content-box;border-radius:6px}
.tm-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--tm-muted) 55%,transparent);
  border:3px solid transparent;background-clip:content-box}

/* 구역 라벨 — 새겨 넣은 것처럼. 밑선 아래 밝은 선 하나가 홈을 만든다. */
.tm-label{
  display:flex;align-items:center;gap:8px;
  margin:10px 6px 8px;padding-bottom:7px;
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tm-muted);
  border-bottom:1px solid var(--tm-line);
  box-shadow:0 1px 0 var(--tm-lift);
}
.tm-label .n{margin-left:auto;letter-spacing:0;opacity:.75;font-weight:700}

/* ── 트리 ────────────────────────────────────────────────── */
.tm-list,.tm-kids{list-style:none;margin:0;padding:0}
.tm-item{position:relative}

/* 자식 목록의 세로 안내선. 계층이 눈으로 이어진다. */
.tm-kids{margin-left:19px;padding-left:9px;border-left:1px solid var(--tm-guide)}
.tm-item.is-closed > .tm-kids{display:none}

.tm-row{
  display:flex;align-items:center;gap:6px;
  padding:5px 8px;margin:1px 0;
  border-radius:var(--tm-radius);
  color:var(--tm-ink);text-decoration:none;
  font-size:14px;line-height:1.4;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .1s,box-shadow .1s;
}
.tm-row:hover{
  background:var(--tm-panel);text-decoration:none;
  box-shadow:0 1px 2px var(--tm-drop), inset 0 1px 0 var(--tm-lift);
}
/* ③ 활성 행 — 어두운 바탕 위로 흰 카드가 떠오른다.
   왼쪽 굵은 표시선은 옅은 강조가 색 바탕에서 안 먹히기 때문이다 (B04 §5). */
.tm-row.is-cur{
  background:var(--tm-panel);
  font-weight:700;color:var(--tm-accent);
  box-shadow:inset 3px 0 0 var(--tm-accent),
             inset 0 1px 0 var(--tm-lift),
             0 1px 3px var(--tm-drop);
}
.tm-row:focus-visible{outline:2px solid var(--tm-accent);outline-offset:-1px}

/* 펼침 삼각형 — 평소엔 숨고 손이 가면 나온다 (Outline 방식).
   열려 있는 항목은 늘 보인다. 접힌 것과 구분되어야 하기 때문이다. */
.tm-tw{
  flex:none;width:16px;height:16px;padding:0;border:0;border-radius:4px;
  background:none;color:var(--tm-muted);cursor:pointer;
  display:grid;place-items:center;
  font-size:9px;line-height:1;
  opacity:0;transition:opacity .1s,transform .14s;
}
.tm-item:hover > .tm-row > .tm-tw,
.tm-row:focus-within > .tm-tw{opacity:.85}
.tm-item:not(.is-closed) > .tm-row > .tm-tw{opacity:.85;transform:rotate(90deg)}
.tm-tw:hover{background:color-mix(in srgb,var(--tm-muted) 22%,transparent);opacity:1}
.tm-row.is-cur .tm-tw{color:var(--tm-accent)}
.tm-tw.is-empty{visibility:hidden;cursor:default}

.tm-ico{flex:none;width:19px;text-align:center;font-size:15px;line-height:1.4}
.tm-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-meta{
  flex:none;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  color:var(--tm-muted);
  padding:1px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--tm-muted) 14%,transparent);
  opacity:0;transition:opacity .1s;
}
.tm-item:hover > .tm-row > .tm-meta,.tm-row.is-cur .tm-meta{opacity:1}

/* 컬렉션 — 트리의 뿌리. 조금 더 무겁게 둔다. */
.tm-item.is-collection > .tm-row{font-weight:700;font-size:14px}
.tm-item.is-collection > .tm-row .tm-ico{font-size:16px}
.tm-item.is-collection{margin-top:2px}

/* 절 — 문서에 딸린 것. 점 하나로 격을 낮춘다. */
.tm-item.is-section > .tm-row{font-size:13px;color:var(--tm-muted)}
.tm-item.is-section > .tm-row:hover,
.tm-item.is-section > .tm-row.is-cur{color:var(--tm-ink)}
.tm-item.is-section > .tm-row .tm-ico{font-size:11px;opacity:.55}
.tm-item.is-section > .tm-row.is-cur{color:var(--tm-accent)}

/* ── 끌어서 옮기기 ────────────────────────────────────────
   끄는 동안에는 표시만 그린다. 실제 이동은 손을 놓을 때 한 번 (B04 §3). */
.tm-item.is-dragging > .tm-row{opacity:.35}
.tm-item.drop-before > .tm-row::before,
.tm-item.drop-after  > .tm-row::after{
  content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:var(--tm-accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tm-accent) 28%,transparent);
  z-index:2;
}
.tm-item.drop-before > .tm-row{position:relative}
.tm-item.drop-after  > .tm-row{position:relative}
.tm-item.drop-before > .tm-row::before{top:-2px}
.tm-item.drop-after  > .tm-row::after{bottom:-2px}
/* 안으로 넣기 — 선이 아니라 테두리다. 「사이」가 아니라 「속」이라는 뜻. */
.tm-item.drop-inside > .tm-row{
  background:color-mix(in srgb,var(--tm-accent) 12%,var(--tm-panel));
  border-color:var(--tm-accent);
}
.tm.is-dragging,.tm.is-dragging .tm-row{cursor:grabbing}

/* ── 검색 결과 ───────────────────────────────────────────── */
.tm-item.is-hidden{display:none}
/* 맞은 자리는 배경이 아니라 색과 굵기로 표시한다.
   제목이 말줄임으로 잘리면 배경만 말줄임표 너머까지 칠해져 파란 조각이 남는다. */
.tm-row mark{background:none;color:var(--tm-accent);font-weight:800}
.tm-row.is-cur mark{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tm-empty{padding:24px 12px;text-align:center;color:var(--tm-muted);font-size:13px}

/* ── 바닥 — 위쪽에 밝은 선을 얹어 패널에서 떨어뜨린다 ────── */
.tm-foot{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border-top:1px solid var(--tm-line);
  box-shadow:inset 0 1px 0 var(--tm-lift);
  background:color-mix(in srgb,var(--tm-bg) 80%,var(--tm-panel));
}
.tm-ava{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,var(--tm-bar2),var(--tm-bar1));
  color:#fff;font-size:12px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px var(--tm-drop);
}
.tm-who{flex:1;min-width:0;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-act{
  flex:none;width:24px;height:24px;border:0;border-radius:6px;cursor:pointer;
  background:none;color:var(--tm-muted);font-size:15px;line-height:1;
  display:grid;place-items:center}
.tm-act:hover{background:var(--tm-panel);color:var(--tm-ink);
  box-shadow:0 1px 2px var(--tm-drop),inset 0 1px 0 var(--tm-lift)}

/* ── 폭 끌기 손잡이 ──────────────────────────────────────── */
.tm-grip{
  flex:none;width:5px;margin-left:-3px;cursor:col-resize;
  position:relative;z-index:3;background:none;border:0;padding:0}
.tm-grip::after{
  content:"";position:absolute;inset:0 1px;border-radius:2px;
  background:var(--tm-accent);opacity:0;transition:opacity .12s}
.tm-grip:hover::after,.tm.is-sizing .tm-grip::after{opacity:.55}
.tm.is-folded .tm-grip{display:none}

/* ── 접힌 레일 ───────────────────────────────────────────
   글자를 지우고 아이콘만 남긴다. 트리는 컬렉션 한 줄로 줄어든다. */
.tm.is-folded .tm-search,
.tm.is-folded .tm-bar2,
.tm.is-folded .tm-title,
.tm.is-folded .tm-who,
.tm.is-folded .tm-act,
.tm.is-folded .tm-label,
.tm.is-folded .tm-txt,
.tm.is-folded .tm-meta,
.tm.is-folded .tm-tw,
.tm.is-folded .tm-kids,
.tm.is-folded .tm-fold{display:none}
.tm.is-folded .tm-bar1{padding:0;gap:0;justify-content:center;height:52px}
.tm.is-folded .tm-scroll{padding:8px 6px;overflow-x:hidden}
.tm.is-folded .tm-row{justify-content:center;padding:8px 0;margin:3px 0}
.tm.is-folded .tm-ico{width:auto;font-size:18px}
.tm.is-folded .tm-foot{justify-content:center;padding:9px 0}
.tm.is-folded .tm-item:not(.is-collection){display:none}

/* 접혔을 때는 머리의 접기 버튼 대신 로고를 누르면 펴진다 */
.tm-open{
  position:absolute;left:0;right:0;top:0;height:52px;
  border:0;background:none;cursor:pointer;z-index:4;display:none}
.tm.is-folded .tm-open{display:block}

@media (max-width:820px){
  .tm{position:fixed;left:0;top:0;bottom:0;z-index:80;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .tm.is-folded{width:0;box-shadow:none}
  .tm.is-folded .tm-panel{display:none}
}

/* ── 손질 단추 ────────────────────────────────────────────
   평소엔 숨고 손이 가야 나온다. 늘 보이면 목록이 단추밭이 된다.
   자리는 meta 와 같은 칸을 쓴다 — 나올 때 meta 가 비켜 준다. */
.tm-acts{flex:none;display:none;align-items:center;gap:1px;margin-left:2px}
.tm-item:hover > .tm-row > .tm-acts,
.tm-row:focus-within > .tm-acts,
.tm-row.is-cur > .tm-acts{display:flex}
.tm-item:hover > .tm-row > .tm-meta,
.tm-row:focus-within > .tm-meta{display:none}

.tm-act-btn{
  flex:none;width:20px;height:20px;padding:0;border:0;border-radius:5px;
  background:none;color:var(--tm-muted);cursor:pointer;
  display:grid;place-items:center;line-height:1}
.tm-act-btn.tm-plus{font-size:15px;font-weight:700}
.tm-act-btn.tm-more{font-size:14px}
.tm-act-btn:hover{
  background:var(--tm-panel);color:var(--tm-accent);
  box-shadow:0 1px 2px var(--tm-drop),inset 0 1px 0 var(--tm-lift)}
.tm-act-btn:focus-visible{outline:2px solid var(--tm-accent);outline-offset:-2px}
.tm-row.is-cur .tm-act-btn{color:var(--tm-accent)}

/* 제자리 이름 고치기 */
.tm-edit{
  flex:1;min-width:0;font:inherit;font-size:14px;
  padding:1px 6px;margin:-2px 0;
  border:1px solid var(--tm-accent);border-radius:5px;
  background:var(--tm-panel);color:var(--tm-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tm-accent) 20%,transparent)}
.tm-edit:focus{outline:0}
.tm-item.is-section .tm-edit{font-size:13px}

/* ⋯ 메뉴 — 트리 안에 띄운다 */
.tm-menu{
  position:absolute;z-index:40;min-width:170px;padding:5px;
  background:var(--tm-panel);border:1px solid var(--tm-line);border-radius:9px;
  box-shadow:0 10px 26px var(--tm-drop),0 2px 5px var(--tm-drop),inset 0 1px 0 var(--tm-lift)}
.tm-mi{
  display:block;width:100%;text-align:left;
  background:none;border:0;border-radius:6px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--tm-ink);padding:7px 10px}
.tm-mi:hover{background:color-mix(in srgb,var(--tm-accent) 12%,transparent);
  color:var(--tm-accent)}
.tm-mi:focus-visible{outline:2px solid var(--tm-accent);outline-offset:-2px}
.tm-mi.is-danger{color:#b3261e}
.tm-mi.is-danger:hover{background:color-mix(in srgb,#b3261e 12%,transparent);color:#b3261e}
@media (prefers-color-scheme:dark){
  .tm-mi.is-danger{color:#f2857c}
  .tm-mi.is-danger:hover{color:#f2857c}
}

/* 접힌 레일에서는 손질 단추도 감춘다 */
.tm.is-folded .tm-acts{display:none}

/* ── 단색 아이콘 ──────────────────────────────────────────
   아이콘 값이 "i:doc:#1857a4" 면 이모지 대신 SVG 가 들어온다.
   글자 기준으로 잡아 둔 칸에 그대로 앉도록 크기만 맞춘다. */
.tm-ico svg{width:17px;height:17px;display:block}
.tm-ico.has-svg{display:grid;place-items:center}
.tm-item.is-collection > .tm-row .tm-ico svg{width:18px;height:18px}
.tm-item.is-section > .tm-row .tm-ico svg{width:13px;height:13px;opacity:.85}
.tm.is-folded .tm-ico svg{width:20px;height:20px}