/* ─────────────────────────────────────────────────────────────────────────────
   40-v2.css — 새 1탭 셸(#1719) + 클래식 임베드(?embed=1) 모드.
   토큰은 01-base.css 것만 쓴다(새 색 없음). 채운 파랑은 화면당 하나(주 액션). 상태 = 점 + 글자.
   ⚠ 이 파일은 캐스케이드 맨 뒤다 — 클래식 규칙(특히 35-liv.css 의 body[data-route="liv"] …)을 여기서 되잡는다.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 임베드 모드: 새 셸이 클래식 화면을 iframe 에 실을 때. 크롬만 걷고 화면 코드는 그대로. ── */
body.embed #org-banner, body.embed header.topbar, body.embed footer.app-foot, body.embed #skip-link { display: none !important; }
body.embed #view { padding-top: 12px; }
body.embed .liv-head { display: none; } /* 리브 페이지도 임베드되면 '← 라이블리'가 이중이 된다 */

/* ── 새 셸 켜짐: 클래식 크롬 숨김, 뿌리 전체 화면 ── */
body[data-ui="v2"] { height: 100vh; overflow: hidden; margin: 0; }
body[data-ui="v2"] #app { display: block !important; height: 100vh; }
body[data-ui="v2"] #org-banner, body[data-ui="v2"] header.topbar, body[data-ui="v2"] main#view, body[data-ui="v2"] footer.app-foot, body[data-ui="v2"] #skip-link { display: none !important; }
/* 세 칸 + 사이 손잡이 둘(v2/split.ts) — 너비는 변수, 손잡이가 바꾼다(기억됨). no-aside 면 우패널·그 손잡이는 0. */
#v2-root { --v2-side-w: 292px; --v2-aside-w: 316px; height: 100vh; display: grid; grid-template-columns: var(--v2-side-w) 6px minmax(0, 1fr) 6px var(--v2-aside-w); background: var(--bg, #fff); color: var(--ink); }
#v2-root.no-aside { grid-template-columns: var(--v2-side-w) 6px minmax(0, 1fr) 0 0; }
#v2-root.no-aside .v2-aside { display: none; }
#v2-root.no-aside > .v2-split-x + .v2-main + .v2-split-x { display: none; }
.v2-split { position: relative; z-index: 3; background: transparent; touch-action: none; }
.v2-split-x { cursor: col-resize; }
.v2-split-y { cursor: row-resize; height: 6px; flex: none; }
.v2-split::after { content: ''; position: absolute; background: var(--blue); opacity: 0; transition: opacity .12s; border-radius: 2px; }
.v2-split-x::after { top: 0; bottom: 0; left: 2px; right: 2px; }
.v2-split-y::after { left: 0; right: 0; top: 2px; bottom: 2px; }
.v2-split:hover::after, .v2-split.on::after, .v2-split:focus-visible::after { opacity: .55; }
.v2-split:focus-visible { outline: none; }
body.v2-splitting-x, body.v2-splitting-x * { cursor: col-resize !important; user-select: none; }
body.v2-splitting-y, body.v2-splitting-y * { cursor: row-resize !important; user-select: none; }
body.v2-splitting-x iframe, body.v2-splitting-y iframe { pointer-events: none; }
#v2-root .v2-ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v2-k { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-2, #a6b2c8); flex: none; display: inline-block; box-sizing: border-box; }
/* 상태점 어휘(web/v2/views.ts dotCls) — 색은 셋뿐: 작업 중·확인 필요·작업 완료. 나머지 살아 있는 것은 회색, 끝난 것은 빈 점(기본). */
.v2-dot.busy { background: var(--blue); box-shadow: none; animation: v2pulse 1.1s ease-in-out infinite; }
.v2-dot.wait { background: var(--amber, #C98A16); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--amber, #C98A16) 22%, transparent); }
.v2-dot.done { background: var(--mint-deep, #0FA37E); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--mint-deep, #0FA37E) 22%, transparent); }
.v2-dot.idle { background: var(--muted-2, #a6b2c8); box-shadow: none; }
.v2-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-2, #a6b2c8); }
.v2-dot.shell { background: var(--muted-head, #8b93a7); box-shadow: none; border-radius: 2px; }
@keyframes v2pulse { 50% { opacity: .35; } }
.v2-cnt { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--muted-2, #a6b2c8); }
.v2-muted { color: var(--muted); font-size: 13px; }
.v2-empty { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; padding: 8px 4px; }
.v2-fine { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; }

.v2-ws { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; }
.v2-ws:hover { background: var(--bg, #fff); border-color: var(--line, #E6ECF5); }
.v2-ws-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.v2-ws-car { font-size: 10px; color: var(--muted-2, #a6b2c8); flex: none; margin-right: auto; }
.v2-ws-badge { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .04em; font-weight: 700; padding: 1px 5px; border-radius: 5px; border: 1px solid transparent; }
.v2-ws-badge.personal { color: var(--mint-deep, #0FA37E); background: var(--bg-success, #F3FBF8); border-color: #CDEFE3; }
.v2-ws-badge.team { color: var(--blue); background: var(--bg-tint, #F6FAFF); border-color: var(--line-net-2, #CFE0F7); }
/* 스위처 메뉴(fixed, body 부착) */
.v2-ws-menu { z-index: 60; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2, 0 8px 30px rgba(21,35,59,.14)); padding: 6px; max-width: 380px; max-height: 74vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.v2-ws-acct { font-size: 11.5px; color: var(--muted); padding: 6px 8px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ws-sec { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2, #a6b2c8); padding: 8px 8px 3px; }
.v2-ws-cur { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; background: var(--bg-tint, #F6FAFF); }
.v2-ws-cur .v2-ws-name { font-size: 13px; }
.v2-ws-check { color: var(--blue); font-weight: 800; flex: none; }
.v2-ws-item { display: flex; align-items: center; gap: 6px; padding: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-sub); text-decoration: none; border-radius: 8px; cursor: pointer; text-align: left; }
.v2-ws-item:hover { background: var(--bg-tint, #F6FAFF); color: var(--ink); }
.v2-ws-item.add { color: var(--blue); }
.v2-ws-empty, .v2-ws-loading { font-size: 11.5px; color: var(--muted); line-height: 1.55; padding: 4px 8px 6px; margin: 0; }
.v2-ws-team-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 8px; }
.v2-ws-team-row:hover { background: var(--bg-tint, #F6FAFF); }
.v2-ws-team-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.v2-ws-err { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--coral, #E5484D); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.v2-ws-auto { flex: none; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.v2-ws-auto.on { color: var(--mint-deep, #0FA37E); border-color: #CDEFE3; background: var(--bg-success, #F3FBF8); }
.v2-ws-del { flex: none; width: 22px; border: 0; background: none; color: var(--muted-2, #a6b2c8); font-size: 12px; cursor: pointer; border-radius: 6px; }
.v2-ws-del:hover { color: var(--coral, #E5484D); background: var(--bg-tint, #F6FAFF); }
.v2-ws-linkform { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 8px; }
.v2-ws-in { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12.5px; }
.v2-ws-in:focus { outline: none; border-color: var(--blue); }
.v2-ws-formrow { display: flex; align-items: center; gap: 8px; }
.v2-ws-note { font-size: 11px; color: var(--coral, #E5484D); flex: 1; min-width: 0; line-height: 1.4; }
.v2-ws-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 2px 0 0; }
.v2-ws-promo { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.v2-ws-promo:hover { background: var(--bg-tint, #F6FAFF); }
.v2-ws-promo-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.v2-ws-promo-kind { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.v2-ws-promo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.v2-ws-promo-acts { flex: none; display: flex; gap: 4px; }

/* ── 사이드바 ── */
.v2-side { background: var(--canvas, #F4F7FC); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
/* 좌상단 한 줄 — 브랜드 심볼(=홈) + 워크스페이스 스위처. 워드마크 줄을 따로 두면 조직명이 'Lively' 일 때
   같은 글자가 두 번 나오고 머리만 196px 를 먹었다(실측) → 141px. */
.v2-side-top { padding: 12px 10px 6px; display: flex; align-items: center; gap: 9px; }
.v2-mark { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; text-decoration: none; }
.v2-mark:hover { background: var(--blue-deep, #1E54CC); }
.v2-mark-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint-deep, #0FA37E); display: block; }
.v2-mark:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.v2-liv-btn { margin: 5px 8px 2px; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.v2-liv-btn:hover, .v2-liv-btn.on { background: var(--bg, #fff); border-color: #CDEFE3; }
.v2-liv-btn .lm { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-success, #F3FBF8); border: 1px solid #CDEFE3; display: grid; place-items: center; color: var(--mint-deep, #0FA37E); font-weight: 800; font-size: 11px; flex: none; }
.v2-liv-btn .sub { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.v2-side-sec { padding: 16px 12px 6px 18px; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.v2-side-sec .v2-k { margin-right: 6px; }
/* 개수가 늘어도(196·1204) 줄바꿈되지 않게 — 조작부가 두 줄로 접히면 목록보다 머리가 커 보인다. */
.v2-side-sec .v2-k { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-side-sec .v2-flt-btn, .v2-side-sec .v2-add { flex: none; white-space: nowrap; }
/* ＋도 아이콘 — 돋보기가 자리를 차지하면서 글자 버튼까지 두면 헤더가 두 줄로 접힌다(#1067 의 🔍/＋ 문법). */
.v2-add { flex: none; display: inline-grid; place-items: center; width: 27px; height: 27px; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-radius: 7px; }
.v2-add:hover { color: var(--ink); background: var(--bg, #fff); border-color: var(--line, #E6ECF5); }
.v2-add-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* 상태 칩 — 살아 있는 세션 상태별 개수. 누르면 그 상태만(렌즈). 채운 파랑은 안 쓴다(주 액션 아님) — 켜짐은 흰 배경+테두리. */
/* 돋보기 — 검색칸을 여닫는다. 아이콘 자체는 늘 보여서 '검색이 있는 줄 모르는' 일이 없다(#1154 반려 사유 대응).
   검색어가 남아 있으면 켜진 색으로 남아, 목록이 짧아진 이유를 헤더가 말해 준다. */
.v2-findbtn-wrap { flex: none; display: inline-flex; }
.v2-findbtn { display: inline-grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.v2-findbtn:hover, .v2-findbtn.on { color: var(--ink); background: var(--bg, #fff); border-color: var(--line, #E6ECF5); }
.v2-findbtn.has { color: var(--blue-deep, #1E54CC); }
.v2-findbtn-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* [필터] — 조작부는 버튼 하나. 팝오버 안에 상태·범위·완료가 모인다(#1719 사이드바 재구성). */
.v2-flt { position: relative; flex: none; }
.v2-flt-btn { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.v2-flt-btn:hover, .v2-flt-btn.open { color: var(--ink); background: var(--bg, #fff); border-color: var(--line, #E6ECF5); }
.v2-flt-btn.has { color: var(--blue-deep, #1E54CC); }
.v2-flt-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.v2-flt-n { min-width: 15px; height: 15px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; padding: 0 3px; }
.v2-flt-pop { position: absolute; top: calc(100% + 6px); right: -40px; width: 236px; z-index: 30; background: var(--bg, #fff); border: 1px solid var(--line, #E6ECF5); border-radius: 12px; box-shadow: 0 12px 32px rgba(21, 35, 59, .14); padding: 6px; }
.v2-flt-k { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 3px; }
.v2-fo { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-sub); cursor: pointer; text-align: left; }
.v2-fo:hover { background: var(--bg-tint, #F6FAFF); color: var(--ink); }
.v2-fo.on { color: var(--ink); background: var(--bg-tint, #F6FAFF); }
.v2-fo .n { flex: 1; min-width: 0; }
.v2-fo-pad { width: 7px; flex: none; }
.v2-fo-ck { color: var(--mint-deep, #0FA37E); font-weight: 800; }
.v2-flt-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--line, #E6ECF5); margin-top: 6px; padding: 6px 4px 2px; }
/* 필터가 켜졌을 때만 나오는 요약 한 줄 — 목록이 왜 짧은지 화면이 직접 말한다. */
.v2-flt-sum { display: flex; align-items: center; gap: 8px; margin: 4px 12px 0; padding: 4px 10px; border: 1px dashed var(--line-net, #DCE6F5); border-radius: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-sub); background: var(--bg, #fff); }
.v2-flt-sum span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-tree { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 12px; }
.v2-pj + .v2-pj { margin-top: 2px; }
/* 카드(펼친 프로젝트)는 앞뒤로 더 띄운다 — 상자끼리 붙으면 한 덩어리로 뭉개진다. */
.v2-pj.open + .v2-pj, .v2-pj + .v2-pj.open { margin-top: 8px; }
/* ★펼친 프로젝트 = 흰 카드 그릇 (안 1 '방', 상민님 선택 2026-08-18) — 세션이 프로젝트의 **안**에
   산다는 걸 면(面)이 말한다. 들여쓰기+세로선만으로는 "목록 둘이 이웃한 그림"으로 읽혔다(반려 사유).
   접힌 프로젝트는 카드 없이 조용히 — 카드는 '열려 있음'의 표식이기도 하다. */
.v2-pj.open { background: var(--bg, #fff); border: 1px solid var(--line-net, #DCE6F5); border-radius: 11px; }
.v2-pj.open > .v2-pj-row { padding: 8px 10px 6px 6px; border-radius: 10px 10px 0 0; }
.v2-pj.open > .v2-pj-row:hover { background: var(--bg-tint, #F6FAFF); }
.v2-pj.open > .v2-pj-row.on { background: var(--bg-tint, #F6FAFF); box-shadow: none; }
/* 프로젝트 행 — 폴더 + 굵은 이름. 누르면 **프로젝트 화면**. 완료·조용함도 이름은 같은 잉크색(태그·시각이 구분). */
.v2-pj-row { display: flex; align-items: center; gap: 7px; padding: 8px 8px 8px 4px; border-radius: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink); text-decoration: none; }
.v2-pj-row:hover { background: var(--bg, #fff); }
.v2-pj-row.on { background: var(--bg, #fff); box-shadow: inset 0 0 0 1px var(--line-net, #DCE6F5); }
.v2-pj-ic { width: 16.5px; height: 16.5px; flex: none; fill: none; stroke: var(--muted-2, #a6b2c8); stroke-width: 1.8; stroke-linejoin: round; }
.v2-pj-row:hover .v2-pj-ic, .v2-pj-row.on .v2-pj-ic { stroke: var(--blue); }
.v2-pj-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pj-when { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--muted-2, #a6b2c8); flex: none; }
.v2-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .04em; color: var(--muted-2, #a6b2c8); border: 1px solid var(--line-net, #DCE6F5); border-radius: 4px; padding: 0 4px; line-height: 15px; flex: none; }
/* 프로젝트 행 오른쪽 상태 요약 — 색 점 + 개수. 확인 필요 › 작업 완료 › 작업 중 › 그 밖(회색) 순. */
.v2-sums { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.v2-sum { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.v2-sum.wait { color: var(--amber, #C98A16); }
.v2-sum.busy { color: var(--blue); }
.v2-sum.done { color: var(--mint-deep, #0FA37E); }
.v2-car { width: 20px; height: 20px; border: 0; background: none; color: var(--muted-2, #a6b2c8); font-size: 15px; line-height: 1; border-radius: 4px; cursor: pointer; padding: 0; transition: transform .15s ease; flex: none; }
.v2-car:hover { color: var(--ink); background: var(--bg-tint-2, #EEF5FF); }
.v2-car.none { visibility: hidden; cursor: default; }
.v2-pj.open > .v2-pj-row .v2-car { transform: rotate(90deg); }
/* 세션 목록 = 카드 몸통 — 담김은 카드(면)가 말하므로 세로선 레일은 뺀다(이중 표식은 잡음).
   세션 행: 상태점 + 보통 글씨. 누르면 **그 세션의 대화**. 프로젝트 행과 생김새가 다르다(위계). */
.v2-ss-list { padding: 0 6px 7px; }
.v2-ss-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--ink-sub); text-decoration: none; min-height: 30px; }
.v2-ss-row + .v2-ss-row { margin-top: 2px; }
.v2-ss-row:hover { background: var(--bg-tint, #F6FAFF); color: var(--ink); }
.v2-ss-row.on { background: var(--bg-tint, #F6FAFF); color: var(--ink); font-weight: 700; }
/* 지금 보고 있는 세션 — 행 왼쪽에 파란 마디. */
.v2-ss-row.on::before { content: ''; position: absolute; left: 2px; top: 6px; bottom: 6px; width: 2.5px; border-radius: 2px; background: var(--blue); }
.v2-ss-go { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--muted-2, #a6b2c8); stroke-width: 1.8; stroke-linejoin: round; opacity: 0; }
.v2-ss-row:hover .v2-ss-go { opacity: 1; }
.v2-ss-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.v2-ss-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ss-row .sub { font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.v2-ss-face { width: 18px; height: 18px; border-radius: 50%; font-size: 9.5px; font-weight: 700; flex: none; display: inline-grid; place-items: center; color: #fff; overflow: hidden; }
.v2-ss-face img { width: 100%; height: 100%; object-fit: cover; }
.v2-ss-row .w { font-size: 11.5px; color: var(--muted-2, #a6b2c8); flex: none; font-weight: 600; }
.v2-ss-row .w.wait { color: var(--amber, #C98A16); }
.v2-ss-row .w.busy { color: var(--blue); }
.v2-ss-row .w.done { color: var(--mint-deep, #0FA37E); }
.v2-ss-more { display: block; padding: 6px 8px 6px 12px; font-size: 13px; color: var(--muted); text-decoration: none; }
.v2-tree-note { margin: 10px 8px 0; padding: 10px 12px; border: 1px dashed var(--line-net, #DCE6F5); border-radius: 9px; font-size: 13px; color: var(--muted); line-height: 1.55; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.v2-tree-note .btn-text { font-size: 13px; padding: 0; }
.v2-tree-more { display: block; width: 100%; margin-top: 8px; padding: 7px 8px; border: 1px dashed var(--line-net, #DCE6F5); border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; text-align: left; }
.v2-tree-more:hover { color: var(--ink); background: var(--bg, #fff); }
.v2-pin { flex: none; padding: 2px 8px 6px; border-bottom: 1px solid var(--line); }
.v2-pin-h { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-sub); padding: 4px 10px 2px; }
.v2-pin .v2-ss-row { padding-left: 10px; }

.v2-side-foot { padding: 8px 10px 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.v2-apps-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg, #fff); font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.v2-apps-btn:hover { border-color: var(--blue); }
.v2-apps-btn .v2-cnt { margin-left: auto; }
.v2-me { display: flex; align-items: center; gap: 9px; padding: 4px 4px; font-size: 13.5px; color: var(--ink-sub); }
.v2-me .v2-ava { width: 25px; height: 25px; border-radius: 50%; font-size: 11px; }
.v2-me-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-classic-link { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted-2, #a6b2c8); cursor: pointer; text-align: left; padding: 0 4px; }
.v2-classic-link:hover { color: var(--ink-sub); text-decoration: underline; }

/* ── 중앙 ── */
.v2-main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg, #fff); }

/* ── 셸 탭(#1719) — 가운데 열 맨 위 한 줄. 탭 = 화면(홈·프로젝트·세션·앱) 하나, 전환은 숨겼다 보였다(재렌더 없음). ── */
.v2-tabs { display: flex; align-items: center; gap: 3px; padding: 6px 8px 6px; border-bottom: 1px solid var(--line); background: var(--canvas, #F4F7FC); flex: none; overflow-x: auto; scrollbar-width: none; }
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 9px; border: 1px solid transparent; border-radius: 7px; font-size: 12.5px; color: var(--ink-sub); cursor: pointer; max-width: 200px; min-width: 0; white-space: nowrap; flex: 0 1 auto; user-select: none; }
.v2-tab:hover { background: var(--bg-tint); color: var(--ink); }
.v2-tab.on { background: var(--bg, #fff); border-color: var(--line); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.v2-tab .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v2-tab-ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.v2-tab .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; color: var(--muted-2, #a6b2c8); flex: none; visibility: hidden; }
.v2-tab:hover .x, .v2-tab.on .x { visibility: visible; }
.v2-tab .x:hover { background: var(--bg-punch); color: var(--ink); }
.v2-tab-xic { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.v2-tab-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: var(--ink-sub); flex: none; }
/* 탭의 × · ＋ 는 <button> — 브라우저 기본 버튼 테두리·회색 바탕을 벗긴다(안 벗기면 탭 안에 상자가 하나 더 그려진다, 모바일 크롬에서 두드러졌다 #1777). */
.v2-tab .x, .v2-tab-add { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.v2-tab-add:hover { background: var(--bg-tint); color: var(--ink); }
/* 탭 패널 — 탭마다 한 벌(가운데·우패널). 숨긴 것은 자리도 차지하지 않는다. 스크롤은 패널 자기 것(탭마다 보존). */
.v2-tabpane { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.v2-tabpane[hidden] { display: none; }
.v2-aside-pane { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.v2-aside-pane[hidden] { display: none; }
.v2-center { width: 100%; max-width: 820px; margin: 0 auto; padding: 30px 40px 40px; }
.v2-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.v2-title { margin: 8px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.3; }
.v2-desc { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-sub); line-height: 1.7; max-width: 66ch; white-space: pre-line; }
.v2-actrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.v2-sec { margin-top: 26px; }
.v2-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.v2-list { border: 1px solid var(--line); border-radius: 12px; background: var(--bg, #fff); overflow: hidden; }
.v2-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-decoration: none; color: inherit; }
.v2-row + .v2-row { border-top: 1px solid var(--line-row, #EDF1F8); }
.v2-row:hover { background: var(--bg-tint, #F6FAFF); }
.v2-row-main { min-width: 0; flex: 1; }
.v2-row .t { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-row .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.v2-row-r { color: var(--muted-2, #a6b2c8); }
.v2-more { display: block; padding: 9px 14px; font-size: 12.5px; color: var(--muted); text-decoration: none; border-top: 1px solid var(--line-row, #EDF1F8); }

/* 홈 — 인사 + 입력창 하나(#1719, claude.ai 홈처럼) + 지금 도는 세션 */
.v2-home { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 780px; margin: 0 auto; padding: 34px 32px 18px; }
/* 홈 = 런처(#1719 재설계) — 왼끝 정렬(가운데 정렬 낙수형 탈피), 입력 카드가 유일한 주인공. */
.v2-home-launch { max-width: 680px; justify-content: flex-start; padding-top: clamp(48px, 16vh, 150px); }
.v2-home-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v2-home-eyebrow .sep { color: var(--line-net-2, #CFE0F7); }
.v2-home-eyebrow .st { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-sub); }
.v2-home-eyebrow .st.wait { color: var(--amber, #B7791F); }
.v2-home-launch .v2-h1 { font-size: 29px; font-weight: 750; letter-spacing: -.7px; line-height: 1.28; margin: 14px 0 0; }
.v2-home-sub { margin: 2px 0 0; font-size: 29px; font-weight: 750; letter-spacing: -.7px; line-height: 1.28; color: var(--muted-2, #A6B2C8); }
.v2-launch { position: relative; margin-top: 26px; border: 1px solid var(--line-net, #D5DDEA); border-radius: 18px; background: var(--bg, #fff);
  box-shadow: 0 1px 2px rgba(21, 35, 59, .04), 0 14px 40px -24px rgba(21, 35, 59, .16); padding: 16px 16px 12px; }
.v2-launch:focus-within { border-color: color-mix(in srgb, var(--blue) 55%, var(--line-net, #D5DDEA)); box-shadow: 0 1px 2px rgba(21, 35, 59, .04), 0 14px 40px -22px rgba(45, 107, 240, .22); }
.v2-launch-in { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.65; min-height: 56px; }
.v2-launch-in::placeholder { color: var(--muted-2, #a6b2c8); }
.v2-launch-in:disabled { opacity: .55; }
.v2-launch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 0; border-top: 0; }

/* 행선지 — 컨트롤 줄에서 유일하게 '모양 있는' 칩. 나머지 실행 축은 글자만 남는다(전부 알약이면 카드가 폼으로 보인다). */
.v2-dest { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v2-dest-k { display: none; }
.v2-dest-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 300px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--bg-tint, #F6FAFF); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; min-width: 0; }
.v2-dest-chip:hover { background: var(--bg-tint-2, #EEF5FF); }
.v2-dest-chip b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-dest-chip .car { color: var(--muted-2, #A6B2C8); font-size: 9px; flex: none; }
.v2-dest-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-3, #C2CCDD); flex: none; }
.v2-dest-dot.on { background: var(--blue); }
.v2-dest-why { font-size: 11.5px; color: var(--muted-2, #A6B2C8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-dest-why:empty { display: none; }

.v2-launch-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; flex: 1; min-width: 0; }
.v2-launch-row > .v2-launch-send { align-self: flex-end; }
.v2-run { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.v2-run-sel { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 18px 0 8px; border: 0; border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23A6B2C8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;
  font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-run-sel:hover:not(:disabled) { color: var(--ink); background-color: var(--bg-tint, #F6FAFF); }
.v2-run-sel:disabled { opacity: .55; cursor: default; }
.v2-run-sel:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }

.v2-launch-send { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 11px; font-weight: 650; }
.v2-launch-send kbd { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; opacity: .7; font-weight: 400; }
.v2-dest-pop { position: absolute; left: 14px; bottom: 52px; width: min(360px, calc(100% - 28px)); z-index: 30; background: var(--bg, #fff); border: 1px solid var(--line, #E6ECF5); border-radius: 12px; box-shadow: 0 14px 36px rgba(21, 35, 59, .16); padding: 8px; }
.v2-dest-q { width: 100%; height: 30px; border: 1px solid var(--line, #E6ECF5); border-radius: 8px; padding: 0 9px; font: inherit; font-size: 12.5px; background: var(--bg-tint, #F6FAFF); }
.v2-dest-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.v2-dest-list { margin-top: 6px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.v2-dest-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.v2-dest-opt:hover { background: var(--bg-tint, #F6FAFF); }
.v2-dest-opt.on { background: var(--bg-tint, #F6FAFF); font-weight: 700; }
.v2-dest-opt .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-dest-opt .s { font-size: 11px; color: var(--muted); flex: none; }
.v2-dest-opt .ck { color: var(--mint-deep, #0FA37E); font-weight: 800; flex: none; }
.v2-dest-opt.auto { border-top: 1px dashed var(--line, #E6ECF5); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 9px; color: var(--ink-sub); }
.v2-launch-hint { display: none; }   /* Enter 안내 줄 폐지 — placeholder 와 관례가 이미 말한다(#1756) */
.v2-launch-sugs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; padding-left: 4px; }
.v2-launch-sugs .chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 상단바 프로젝트 연결(#1749) — 버튼 + 검색 드롭다운(anchoredPopover .dash-pop 위에 얹힘) */
.sc-proj { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.sc-proj > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.sc-proj-btn { padding: 1px 4px; border-radius: 6px; color: var(--muted); }
.sc-proj-btn:hover { color: var(--ink); background: var(--bg-tint, #F6FAFF); }
.sc-proj-connect { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--line-net, #D5DDEA); padding: 2px 9px; border-radius: 999px;
  color: var(--ink-sub); font-size: 12px; font-weight: 600; }
.sc-proj-connect:hover { border-color: var(--blue); color: var(--blue); background: transparent; }
.sc-proj-car { font-size: 9px; color: inherit; }
.sc-proj-none { color: var(--muted); }
.v2-pjpick { width: 320px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px; padding: 8px; }   /* 배경·그림자는 .dash-pop-panel(20-dashboard.css) */
.v2-pjpick-in { height: 32px; border: 1px solid var(--line-net, #D5DDEA); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px;
  background: var(--bg, #fff); color: var(--ink); }
.v2-pjpick-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.v2-pjpick-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; }
.v2-pjpick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
  padding: 7px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.v2-pjpick-row:hover { background: var(--bg-tint, #F6FAFF); }
.v2-pjpick-row .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.v2-pjpick-row .m { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.v2-pjpick-row.cur { cursor: default; background: var(--bg-subtle, #F4F6FA); }
.v2-pjpick-cur { color: var(--mint-deep, #0FA37E); font-weight: 700; }
.v2-pjpick-done { border: 1px solid var(--line-row, #EDF1F8); border-radius: 999px; padding: 0 6px; font-size: 10.5px; }
.v2-pjpick-none .n { color: var(--coral-text, #C0392B); }
.v2-pjpick-note:empty { display: none; }
.v2-liv-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--mint-deep, #0FA37E); font-weight: 800; font-size: 13px; }
.v2-h1 { margin: 10px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.45px; line-height: 1.38; text-wrap: balance; word-break: keep-all; }
.v2-title, .v2-desc { word-break: keep-all; }
.v2-find { padding: 4px 12px 2px; }
.v2-find-in { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; font: inherit; font-size: 13.5px; background: var(--bg, #fff); }
.v2-find-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.v2-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.v2-sugs .chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.v2-chat { flex: 1; min-height: 260px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg, #fff); overflow: hidden; display: flex; flex-direction: column; }
.v2-chat-body { flex: 1; min-height: 0; display: flex; }
.v2-askdock { flex: none; margin-top: 0; padding: 10px 16px 0; }
/* 지금 도는 세션 — 두 결(#1756): 답 기다림은 앰버 카드(내가 풀어야 도는 일), 나머지는 조용한 목록.
   행 문법: 점 · [제목+프로젝트 한 덩어리] · 상태시각. 여섯 요소가 같은 무게로 나열되던 것을 셋으로 줄였다. */
.v2-now { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }
.v2-now .v2-k { display: block; margin-bottom: 4px; }
.v2-now-h { display: flex; align-items: baseline; justify-content: space-between; }
.v2-now .v2-k.wait { color: var(--amber, #B7791F); }
.v2-now-wait { border: 1px solid color-mix(in srgb, var(--amber, #C98A16) 26%, transparent); background: color-mix(in srgb, var(--amber, #C98A16) 5%, var(--bg, #fff)); border-radius: 14px; padding: 12px 12px 6px; }
.v2-now-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: inherit; }
.v2-now-row:hover { background: var(--bg-tint, #F6FAFF); }
.v2-now-wait .v2-now-row:hover { background: color-mix(in srgb, var(--amber, #C98A16) 8%, var(--bg, #fff)); }
.v2-now-row + .v2-now-row { border-top: 0; }
.v2-now-row .tw { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.v2-now-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.v2-now-row .p { font-size: 11.5px; color: var(--muted-2, #A6B2C8); flex: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-now-row .st { font-size: 12px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.v2-now-row .go { flex: none; }

/* 리브 페이지(클래식 renderLiv 를 이 칸에) — 35-liv 의 body[data-route=liv] main 규칙은 여기 안 닿는다(main 태그 안 씀) */
/* 리브도 다른 중앙 화면과 같은 흰 판(#1756) — 리브만 회색이면 3열 셸에서 그 화면만 딴 세계로 읽힌다.
   카드·대화창은 자체 테두리가 있어 흰 판 위에서도 경계가 산다(35-liv.css .liv-card/.liv-chat). */
.v2-livpage { flex: 1; min-height: 0; padding: 14px 18px 16px; background: var(--bg, #fff); display: flex; flex-direction: column; }
.v2-livpage .liv-wrap { flex: 1; }
body[data-ui="v2"][data-route="liv"] { overflow: hidden; }

/* 앱 프레임 — 클래식 화면 임베드 · 라이브 터미널 */
.v2-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.v2-frame-h { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg, #fff); }
.v2-frame-t { font-size: 13.5px; font-weight: 800; }
.v2-frame-sub { font-size: 12px; color: var(--muted); }
.v2-frame-acts { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.v2-frame-acts .btn-text { font-size: 12.5px; }
.v2-sess-meta { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12.5px; color: var(--ink-sub); border-bottom: 1px solid var(--line-row, #EDF1F8); background: var(--bg, #fff); }
.v2-sess-meta a { color: var(--ink-sub); text-decoration: none; }
.v2-sess-meta a:hover { color: var(--blue); }
.v2-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--bg, #fff); }

/* ── 우측 ── */
/* 우패널은 사이드바가 아니라 **가운데 화면의 연장**이다(#1756, 상민님). 종전엔 좌·우가 같은 회색 판(canvas)이라
   3열이 [탐색 | 내용 | 탐색] 으로 읽혔다. 우패널이 말하는 것은 탐색이 아니라 지금 보고 있는 것의 내용이므로 판을 가운데에 붙인다.
   잇는 것은 배경색만이 아니라 **구조선**이다:
     (1) 판을 같게(흰 바탕) — 회색 canvas 는 왼쪽 탐색열만의 것이 된다.
     (2) 두 열의 머리(가운데 .sc-head · 여기 .v2-aside-h)를 같은 38px·같은 아래선으로 맞춰 **한 줄로 잇는다**.
     (3) 골격도 같게 — 머리 고정 → 사실 한 줄 → 본문만 스크롤(가운데 sc-head → sc-chat 과 같은 리듬).
   사이의 세로 경계선은 **남긴다**(상민님: 2열 3열 사이에도 경계선이 없으면 이상하다) — 다만 판이 같으므로
   그 선은 이제 다른 판의 시작이 아니라 한 판 안의 칸막이로 읽힌다. */
.v2-aside { background: var(--bg, #fff); border-left: 1px solid var(--line); min-height: 0; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.v2-aside > .v2-empty { padding: 14px 16px; }
.v2-aside-h { display: flex; align-items: center; gap: 8px; flex: none; min-height: 38px; padding: 9px 16px 8px; border-bottom: 1px solid var(--line); }
.v2-aside-h b { font-size: 13.5px; font-weight: 800; }
.v2-aside-h .v2-k { margin-left: auto; font-variant-numeric: tabular-nums; }
.v2-liv-cards { gap: 6px; padding: 0 16px; }
.v2-liv-rail { overflow: visible; }
.v2-liv-rail .liv-cards { gap: 6px; }
.v2-kn-sec .v2-k { display: block; margin: 6px 2px 6px; }
.v2-kn-list { display: flex; flex-direction: column; gap: 6px; }
.v2-kn { display: flex; align-items: baseline; gap: 8px; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-decoration: none; color: inherit; }
.v2-kn:hover { border-color: var(--line-net-2, #CFE0F7); }
.v2-kn-rel { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .04em; flex: none; }
.v2-kn-rel.req { color: var(--ink-note, #2D4A7A); }
.v2-kn-rel.prod { color: var(--mint-deep, #0FA37E); }
.v2-kn-name { font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-applist { display: flex; flex-direction: column; gap: 4px; }
.v2-applink { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.v2-applink:hover { background: var(--bg-tint, #F6FAFF); }
.v2-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 12.5px; }
.v2-facts dt { color: var(--muted); }
.v2-facts dd { margin: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 우패널 타임라인(#1719) — 프로젝트·세션·워크스페이스가 같은 부품 ──
   상민님 2026-08-18: "중요한 결과·산출물만. 한 줄로 요약하고 자세한 건 눌러서.
   근데 글자가 다다다닥 붙어 있으니 뭔 소린지 못 알아듣겠다 — 차라리 이전이 나았다."
   → 한 줄 규칙은 지키되 **줄끼리 숨 쉬게** 한다: 행 높이·글자 크기를 올리고(사이드바 14px 기준),
     항목 사이를 띄우고, 장은 카드처럼 바탕을 준다. 필터 줄은 없다(애초에 남은 것만 싣는다). */
.tl-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* 머리 아래 한 줄 — 이 화면이 무엇을 보고 있는지의 사실(세션 상태·프로젝트·하네스). 가운데 대화창 머리와 같은 정보 층. */
.tl-facts { flex: none; padding: 8px 16px; border-bottom: 1px solid var(--line-row, #EDF1F8); }
.tl-facts[hidden] { display: none; }
.tl-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 16px 22px; }
/* 무게가 낮아 접어 둔 것 — 지운 게 아니라 접었다는 표시(#1756). */
.tl-rest { display: flex; align-items: center; gap: 6px; width: 100%; margin: 8px 0 0; padding: 7px 10px 7px 60px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; text-align: left; }
.tl-rest:hover { color: var(--ink); background: var(--bg-tint, #F6FAFF); }
.tl-scope { font-size: 12px; color: var(--muted); }
.tl-wrap .v2-aside-h .v2-k { margin-left: auto; }
.tl-list { display: flex; flex-direction: column; min-height: 0; gap: 2px; }
.tl-day { display: flex; align-items: center; gap: 10px; padding: 22px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted-2, #a6b2c8); }
.tl-day:first-child { padding-top: 2px; }
.tl-day::after { content: ""; flex: 1; height: 1px; background: var(--line-row, #EDF1F8); }

/* 세로 레일 — 점이 레일 위에 얹힌다 */
/* 점과 선은 **한 좌표에서 파생**시킨다 — 따로 적어 두면 어느 한쪽만 고쳐져 어긋난다(실측: 선이 첫 점보다 2px 아래에서 시작).
   --tl-cx = 레일 기준 점 중심 x · --tl-cy = 카드 기준 점 중심 y(제목 첫 줄 한가운데) · --tl-pad = 본문 들여쓰기 */
.tl-rail { position: relative; --tl-pad: 0px; --tl-cx: 0px; --tl-cy: 0px; --tl-dot: 0px; display: flex; flex-direction: column; gap: 2px; }
.tl-card::after { content: none; }
.tl-card:first-child::after { content: none; }
.tl-card:last-child::after { content: none; }
/* 원장 행(#1756) — [시각·종류 거터 | 제목]. 색 축은 걷었다: 세로로 정렬된 모노 시각이 리듬을 만들고,
   변하는 정보(제목)만 잉크색이다. 오류만 코랄. */
.tl-card {
  position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  background: none; border: 0; border-radius: 10px; padding: 8px 10px 8px 8px;
  text-decoration: none; color: inherit; transition: background .14s ease;
}
.tl-card + .tl-card { box-shadow: none; }
.tl-card::before { content: none; }
.tl-gut { flex: none; width: 40px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 2.5px; }
.tl-gut .tl-tm { font-size: 11px; letter-spacing: 0; }
.tl-kw { font-size: 10.5px; color: var(--muted-3, #C2CCDD); letter-spacing: .02em; }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-card.can { cursor: pointer; }
.tl-card.can:hover, .tl-card.go:hover { background: var(--bg-tint, #F6FAFF); }
.tl-card.open { background: var(--bg-tint, #F6FAFF); }
.tl-card:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tl-head { display: flex; align-items: flex-start; gap: 8px; }
.tl-ttl {
  flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; font-weight: 600; letter-spacing: -.1px;
  color: var(--ink); word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-head .tl-tm { flex: none; padding-top: 2px; }
.tl-tm { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted-2, #a6b2c8); letter-spacing: -.2px; }
.tl-head .tl-face { margin-top: 1px; }
.tl-meta { display: none; }
.tl-what { min-width: 0; }
.tl-who { flex: none; }
.tl-car { flex: none; color: var(--muted-3, #C2CCDD); font-size: 13px; line-height: 1.4; transition: transform .16s ease, color .16s ease; }
.tl-card.can:hover .tl-car { color: var(--blue); }
.tl-card.open .tl-car { transform: rotate(90deg); color: var(--blue); }
.tl-x { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted-2, #a6b2c8); padding-top: 3px; }
.tl-card.tlk-task::before, .tl-card.tlk-knowledge::before, .tl-card.tlk-file::before,
.tl-card.tlk-activity::before, .tl-card.tlk-cmd::before, .tl-card.tlk-project::before,
.tl-card.tlk-say::before, .tl-card.tlk-meta::before { content: none; }
/* ⚠ 아래는 옛 렌더러 시절 셀렉터 — 지금 안 붙지만 css-drops 게이트(HEAD 포함 검사) 때문에 남긴다. */
.tl-verb { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tl-meta .tl-tm { margin-left: auto; }
.tl-more { flex: none; font-size: 11px; color: var(--muted-2, #a6b2c8); }
.tl-card.can:hover .tl-more { color: var(--blue); }
.tl-card.t1::before { content: none; }
.tl-card.t1.tlk-activity::before { content: none; }
.tl-card.tlk-project .tl-verb, .tl-card.tlk-knowledge .tl-verb, .tl-card .tl-verb,
.tl-card.tlk-activity .tl-verb, .tl-card.tlk-cmd .tl-verb, .tl-card.tlk-say .tl-verb, .tl-card.tlk-meta .tl-verb { color: var(--muted); }
.tl-card.tlk-meta .tl-ttl { color: var(--ink-sub); font-weight: 500; }
.tl-card.err .tl-ttl { color: var(--coral-text, #B84E44); }
.tl-body { display: flex; flex-direction: column; gap: 0; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line-row, #EDF1F8); }
.tl-sub { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px; border-radius: 7px; text-decoration: none; color: inherit; }
.tl-sub.go:hover { background: var(--bg-tint-2, #EEF5FF); }
.tl-sub-v { flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2, #a6b2c8); min-width: 30px; }
.tl-sub-v.tlk-knowledge, .tl-sub-v.tlk-file { color: var(--muted, #8A99B5); }
.tl-sub-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub.go:hover .tl-sub-t { color: var(--blue); }

.tl-face { margin-left: auto; }
.tl-meta .tl-who + .tl-car, .tl-meta .tl-what + .tl-car { margin-left: auto; }
.tl-car { flex: none; color: var(--muted-3, #C2CCDD); font-size: 13px; line-height: 1; transition: transform .16s ease, color .16s ease; }
.tl-card.can:hover .tl-car { color: var(--blue); }
.tl-card.open .tl-car { transform: rotate(90deg); color: var(--blue); }
.tl-x { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted-2, #a6b2c8); padding-top: 3px; }
.tl-card.tlk-task::before { background: var(--mint-deep, #0FA37E); }
.tl-card.tlk-knowledge::before { background: var(--teal, #1BAEB0); }
.tl-card.tlk-file::before { background: var(--mint-deep, #0FA37E); }
.tl-card.tlk-activity::before { background: var(--blue); }
.tl-card.tlk-cmd::before { background: var(--bg, #fff); box-shadow: inset 0 0 0 1.5px var(--muted-2, #a6b2c8), 0 0 0 3px var(--bg, #fff); }
.tl-card.tlk-project::before { background: var(--blue-deep, #1E54CC); }
.tl-card.tlk-say::before, .tl-card.tlk-meta::before { background: var(--muted-3, #C2CCDD); }
/* ⚠ 아래 12줄은 main(#1756 이전 카드 디자인)에서 딸려온 죽은 규칙 — 지금 렌더러가 이 클래스를 붙이지 않는다.
   지우면 css-drops 게이트가 회귀로 잡으므로 다음 PR 에서 HEAD 정리와 함께 걷는다. */
.tl-verb { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.tl-meta .tl-tm { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted-2, #a6b2c8); margin-left: auto; }
.tl-more { flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2, #a6b2c8); }
.tl-card.can:hover .tl-more { color: var(--blue); }
.tl-card.t1::before { background: var(--mint-deep, #0FA37E); border-color: var(--mint-deep, #0FA37E); }
.tl-card.t1.tlk-activity::before, .tl-card.t1.tlk-cmd::before, .tl-card.tlk-activity::before { background: var(--blue); border-color: var(--blue); }
.tl-card.tlk-project .tl-verb { color: var(--blue-deep, #1E54CC); }
.tl-card.tlk-knowledge .tl-verb { color: var(--teal, #1BAEB0); }
.tl-card.tlk-meta .tl-ttl { color: var(--ink-sub); font-weight: 500; }
.tl-card .tl-verb { color: var(--mint-deep, #0FA37E); }
.tl-card.tlk-activity .tl-verb, .tl-card.tlk-cmd .tl-verb { color: var(--blue); }
.tl-card.tlk-say .tl-verb, .tl-card.tlk-meta .tl-verb { color: var(--muted); }
.tl-card.err .tl-ttl { color: var(--coral-text, #B84E44); }
.tl-body { display: flex; flex-direction: column; gap: 0; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-row, #EDF1F8); }
.tl-sub { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 2px; border-radius: 7px; text-decoration: none; color: inherit; }
.tl-sub.go:hover { background: var(--bg-tint-2, #EEF5FF); }
.tl-sub-v { flex: none; font-size: 11px; font-weight: 600; color: var(--muted-2, #a6b2c8); min-width: 30px; }
.tl-sub-v.tlk-knowledge { color: var(--teal, #1BAEB0); }
.tl-sub-v.tlk-file { color: var(--mint-deep, #0FA37E); }
.tl-sub-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub.go:hover .tl-sub-t { color: var(--blue); }

.tl-face { width: 17px; height: 17px; border-radius: 50%; font-size: 9px; font-weight: 700; flex: none; display: inline-grid; place-items: center; color: #fff; overflow: hidden; }
.tl-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2, #a6b2c8); flex: none; display: inline-block; }
/* ⚠ 접두어 tlk- 인 이유: 옛 발자취 CSS 에 **범위 없는** .k-file/.k-task 규칙이 살아 있어(.k-task{background:coral})
   행에 k-task 를 붙이면 행 전체가 산호색으로 칠해진다(실측). 우리 클래스는 우리 접두어를 쓴다. */
.tl-dot.tlk-file { background: var(--mint-deep, #0FA37E); }
.tl-dot.tlk-knowledge { background: var(--teal, #1BAEB0); }
.tl-dot.tlk-activity, .tl-dot.tlk-cmd { background: var(--blue); }
.tl-dot.tlk-task, .tl-dot.tlk-project { background: var(--blue-deep, #1E54CC); }
.tl-dot.tlk-source { background: var(--node-blue-soft, #9DBDF2); }
.tl-dot.tlk-say, .tl-dot.tlk-meta { background: var(--muted-2, #a6b2c8); }
.tl-dot.tlk-all { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-2, #a6b2c8); }
.v2-kn-foot { flex: none; margin-top: 0; padding: 14px 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }

/* ── 런치패드 ── */
.v2-pad { position: fixed; inset: 0; z-index: 900; background: rgba(21, 35, 59, .28); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; padding: 48px 24px; overflow: auto; }
.v2-pad-top { width: min(920px, 100%); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.v2-pad-h { display: flex; flex-direction: column; min-width: 0; }
.v2-pad-h b { font-size: 15px; font-weight: 800; }
.v2-pad-sub { font-size: 12px; color: var(--muted); }
.v2-pad-search { flex: 1; min-width: 160px; height: 36px; border: 1px solid var(--line-net, #DCE6F5); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--bg, #fff); }
.v2-pad-grid { width: min(920px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.v2-pad-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px; background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); text-align: center; box-shadow: var(--shadow-1, 0 2px 8px rgba(21,35,59,.05)); }
.v2-pad-item:hover { border-color: var(--blue); }
.v2-pad-item b { font-size: 13.5px; font-weight: 800; }
.v2-pad-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--bg-tint, #F6FAFF); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-sub); }
.v2-pad-ico .v2-ic { width: 22px; height: 22px; }
.v2-pad-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.v2-pad-empty { color: #fff; font-size: 13px; }

/* 901~1100px(작은 노트북 창·아이패드 가로) — 옆 두 칸을 좁힌다. ⚠ 열은 다섯(사이드바·손잡이·가운데·손잡이·우패널)이라 셋만 적으면
   가운데가 셋째 열(280px)에 앉고 우패널이 다음 줄로 떨어진다(1024px 실측 #1777 — 손잡이가 생기기 전 규칙이 남아 있었다).
   손잡이가 인라인 변수로 너비를 쥐므로 변수를 덮지 않고 min() 으로 상한만 건다(더 좁히는 건 여전히 된다). */
@media (max-width: 1100px) {
  #v2-root { grid-template-columns: min(var(--v2-side-w), 232px) 6px minmax(0, 1fr) 6px min(var(--v2-aside-w), 280px); }
  #v2-root.no-aside { grid-template-columns: min(var(--v2-side-w), 232px) 6px minmax(0, 1fr) 0 0; }
  .v2-center { padding-left: 24px; padding-right: 24px; }
}
/* (≤900px 는 파일 끝 '모바일' 블록이 통째로 맡는다 — 종전의 '사이드바 220px + 우패널 숨김' 규칙은 #1777 에서 서랍 셸로 대체됐다.) */

/* ── 세션 우패널: 사실 한 줄 + 발자취(web/session-trail.ts) ── */
.v2-sfacts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-sub); padding: 0; }
.v2-sfacts a { color: var(--ink-sub); text-decoration: none; } .v2-sfacts a:hover { color: var(--blue); }
.v2-sfacts .sep { color: var(--muted-2, #a6b2c8); }
.tr-wrap { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tr-sub { font-size: 11.5px; color: var(--muted); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-chip { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; line-height: 1; padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-sub); cursor: pointer; }
.tr-chip:hover { border-color: var(--line-net); color: var(--ink); }
.tr-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tr-chip.on .tr-chip-dot { box-shadow: 0 0 0 1px var(--bg); }
.tr-chip-n { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; opacity: .8; }
.tr-chip-dot, .tr-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: var(--muted-2, #a6b2c8); }
.k-file { background: var(--ink-sub); } .k-knowledge { background: var(--blue); } .k-activity { background: var(--mint-deep); }
.k-project { background: var(--teal); } .k-task { background: var(--coral); } .k-source { background: var(--node-blue-soft, #9DBDF2); }
.k-all { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted-2, #a6b2c8); }
.tr-list { display: flex; flex-direction: column; gap: 2px; }
.tr-row { border-radius: 8px; }
.tr-row.open { background: var(--bg); border: 1px solid var(--line); }
.tr-row[hidden] { display: none; }
.tr-head { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; line-height: 1.45;
  padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.tr-head:hover { background: var(--bg); }
.tr-row.open > .tr-head { border-radius: 8px 8px 0 0; }
.tr-verb { color: var(--ink-sub); flex: none; }
.tr-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-weight: 600; }
.tr-x { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted); flex: none; }
.tr-st { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--coral-text); flex: none; }
.tr-tm { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--muted-2, #a6b2c8); flex: none; }
.tr-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.tr-body[hidden] { display: none; }
.tr-loading { color: var(--muted); font-size: 12px; margin: 0; }
.tr-title { font-weight: 700; font-size: 13px; line-height: 1.5; }
.tr-kv, .tr-path { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--ink-sub); word-break: break-all; }
.tr-part { min-width: 0; }
.tr-cap { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.tr-pre { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--bg-tint); border: 1px solid var(--line);
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.tr-md { font-size: 12.5px; line-height: 1.7; max-height: 480px; overflow: auto; }
.tr-md .md > :first-child { margin-top: 0; }
.tr-body .btn { align-self: flex-start; }

/* ═══ 모바일(≤900px, #1777 — 상민님 2026-08-19 "모바일 화면 대응, 특히 세션뷰") ═══
   세 칸 그리드 → **1열 + 서랍 둘 + 상단 바 하나**. JS 짝: web/v2/mobile.ts(같은 문턱을 matchMedia 로 본다).
   문턱 900 = 종전에 우패널을 숨기던 그 문턱이다 — 폰(≤430)만이 아니라 태블릿 세로(768~834)도 여기 든다. 사이드바 220px 를 그리드에
   남기고 우패널을 숨기던 종전 태블릿 그림은, 대화창이 좁아지고 타임라인엔 닿을 길이 없었다. 서랍 둘이면 둘 다 산다.
   원칙: 기능을 숨기지 않는다(사이드바·우패널은 서랍으로 살아 있다) · 데스크톱(>900) 그림은 한 픽셀도 안 바뀐다(전부 미디어쿼리 안) ·
   가로 스크롤은 의도한 상자(탭 줄·코드) 안에서만. 상태 = #v2-root.m-side / .m-aside(서랍 열림). */
.v2-mbar, .v2-scrim { display: none; }   /* 데스크톱엔 없다 — 그리드 열 순서에 안 낀다 */
@media (max-width: 900px) {
  /* 뿌리 — 100dvh: iOS 사파리 주소창이 접히고 펴져도 입력칸이 화면 밖으로 안 밀린다(100vh 는 주소창을 포함한 높이). */
  body[data-ui="v2"], body[data-ui="v2"] #app { height: 100dvh; }
  #v2-root, #v2-root.no-aside { display: flex; flex-direction: column; height: 100dvh; grid-template-columns: none; }
  #v2-root > .v2-split-x { display: none; }
  .v2-main { flex: 1; min-height: 0; }
  /* 상단 바 — [☰] [탭 줄] [타임라인]. 상태 표시줄(노치) 아래로 내려앉는다(viewport-fit=cover 일 때만 값이 있다). */
  .v2-mbar { display: flex; align-items: center; gap: 2px; flex: none; height: 46px; padding: 0 4px; padding-top: env(safe-area-inset-top, 0px);
    box-sizing: content-box; border-bottom: 1px solid var(--line); background: var(--canvas, #F4F7FC); }
  .v2-mbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none;
    color: var(--ink-sub); cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
  .v2-mbar-btn:active, .v2-mbar-btn[aria-expanded="true"] { background: var(--bg, #fff); color: var(--ink); }
  .v2-mbar-btn[hidden] { display: none; }
  .v2-mbar-ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .v2-mbar-slot { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; }
  /* 탭 줄이 바 가운데에 산다 — 제 테두리·바탕은 벗고 가로로만 굴린다. 탭은 조금 크게(손가락). 닫기 × 는 활성 탭에만(호버가 없다). */
  .v2-mbar .v2-tabs { flex: 1; min-width: 0; height: 100%; padding: 0 2px; border: 0; background: none; gap: 2px; }
  .v2-mbar .v2-tab { max-width: 172px; min-height: 34px; padding: 5px 6px 5px 9px; font-size: 13px; }
  .v2-mbar .v2-tab .x { width: 22px; height: 22px; }
  .v2-mbar .v2-tab-xic { width: 12px; height: 12px; }
  .v2-mbar .v2-tab-add { width: 32px; height: 32px; }
  /* 배경막 */
  .v2-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(21, 35, 59, .42); }
  .v2-scrim[hidden] { display: none; }
  /* 서랍 — 사이드바(왼쪽)·우패널(오른쪽). 닫힘 = 화면 밖 + visibility:hidden(초점·스크린리더에서도 빠진다).
     900px 규칙이 우패널을 display:none 으로 껐던 것을 되살린다(no-aside 는 여전히 꺼져 있고 버튼도 없다). */
  .v2-side, .v2-aside { position: fixed; top: 0; bottom: 0; z-index: 40; width: min(86vw, 336px); max-width: 100vw; visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s; overscroll-behavior: contain; }
  .v2-side { left: 0; transform: translateX(-100%); border-right: 0; padding-top: env(safe-area-inset-top, 0px); }
  .v2-aside { display: flex; right: 0; transform: translateX(100%); border-left: 0; padding-top: env(safe-area-inset-top, 0px); }
  #v2-root.m-side .v2-side, #v2-root.m-aside .v2-aside { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s;
    box-shadow: 0 0 0 1px var(--line), 0 18px 48px rgba(21, 35, 59, .24); }
  .v2-side:focus, .v2-aside:focus { outline: none; }   /* 서랍 컨테이너의 프로그램 포커스(tabindex=-1)엔 링을 안 그린다 — 안의 첫 항목부터가 조작면이다 */
  .v2-side-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .v2-aside-pane { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* 서랍 안 손가락 크기 — 행 44px 안팎(iOS HIG). 글자도 본문(15px)에 맞춘다. */
  .v2-side-top { padding: 12px 12px 6px; }
  .v2-liv-btn { padding: 11px 12px; font-size: 15px; }
  .v2-side-sec { padding: 12px 14px 6px 18px; }
  .v2-find-in { height: 40px; }
  .v2-pj-row { padding: 11px 10px 11px 6px; font-size: 15px; }
  .v2-pj.open > .v2-pj-row { padding: 11px 12px 8px 8px; }
  .v2-car { width: 30px; height: 30px; font-size: 17px; }
  .v2-ss-row { min-height: 42px; padding: 8px 10px 8px 14px; font-size: 14.5px; }
  .v2-ss-row .sub { font-size: 12.5px; }
  .v2-ss-go { opacity: 1; }                       /* 호버가 없다 — 가는 길(말풍선)은 늘 보인다 */
  .v2-ss-more, .v2-tree-more, .v2-tree-note { font-size: 14px; }
  .v2-pin .v2-ss-row { min-height: 42px; }
  .v2-apps-btn { padding: 12px 12px; font-size: 15px; }
  .v2-me { padding: 8px 4px; font-size: 14.5px; }
  .v2-me .btn-text { padding: 8px 10px; }
  .v2-classic-link { padding: 6px 4px 2px; }
  .v2-flt-pop { right: 0; width: min(240px, calc(100vw - 32px)); }
  .v2-fo { padding: 9px 10px; font-size: 14px; }
  .v2-ws-menu { max-width: calc(100vw - 16px); }
  /* 우패널(타임라인) 서랍 — 머리를 상단 바 높이에 맞춘다(같은 줄로 읽힌다). */
  .v2-aside > .v2-aside-pane > .tl-wrap > .v2-aside-h, .v2-aside .v2-aside-h { min-height: 46px; padding-left: 16px; }
  .tl-card { padding: 10px 8px 10px 6px; }
  .tl-ttl { font-size: 14px; }
  .tl-sub { min-height: 32px; }
  .tl-sub-t { font-size: 13.5px; }
  .tl-scroll { padding: 10px 12px calc(22px + env(safe-area-inset-bottom, 0px)); }
  /* 가운데 화면들 — 여백을 좁히고 글자는 본문 크기 유지. */
  .v2-center { padding: 18px 16px 32px; }
  .v2-title { font-size: 21px; }
  .v2-row { padding: 12px 12px; }
  .v2-home { padding: 18px 16px 16px; }
  .v2-home-launch { padding-top: clamp(16px, 6vh, 56px); }
  .v2-home-launch .v2-h1, .v2-home-sub { font-size: 24px; }
  .v2-launch { margin-top: 18px; padding: 12px 12px 10px; border-radius: 16px; }
  .v2-launch-in { min-height: 64px; }
  .v2-launch-row { flex-wrap: wrap; }
  .v2-launch-row > .v2-launch-send { margin-left: auto; height: 38px; }
  .v2-dest-chip { max-width: min(300px, calc(100vw - 120px)); }
  .v2-dest-pop { left: 8px; bottom: 56px; width: calc(100% - 16px); }
  .v2-dest-q { height: 36px; }
  .v2-now { margin-top: 26px; }
  .v2-now-row { padding: 10px 8px; }
  .v2-now-row .tw { flex-wrap: wrap; row-gap: 2px; }
  .v2-now-row .p { max-width: 100%; }
  .v2-livpage { padding: 8px 10px 10px; }
  .v2-frame-h { flex-wrap: wrap; row-gap: 4px; padding: 8px 12px; }
  .v2-frame-sub { display: none; }              /* '클래식 화면 · 그대로 실림' — 폰에선 제목과 [새 탭] 만 남긴다 */
  /* 런치패드 — 화면 가득, 격자는 촘촘히. */
  .v2-pad { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .v2-pad-top { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; margin-bottom: 12px; }
  .v2-pad-search { flex: 1 1 100%; min-width: 0; height: 40px; }
  .v2-pad-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .v2-pad-item { padding: 14px 10px 12px; }
  /* 프로젝트 연결 드롭다운(세션 상단바) */
  .v2-pjpick { width: min(360px, calc(100vw - 16px)); }
  .v2-pjpick-in { height: 38px; }
  .v2-pjpick-row { padding: 10px 8px; }
  /* 손잡이(경계 끌기)는 폰에 없다 */
  .v2-split { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .v2-side, .v2-aside, #v2-root.m-side .v2-side, #v2-root.m-aside .v2-aside { transition: none; }
}
/* 터치 화면(호버 없음) — 탭 닫기 ×·세션 행의 가는 길은 호버 없이도 보인다(태블릿 가로도 여기 든다). */
@media (hover: none) {
  .v2-tab .x { visibility: visible; }
  .v2-ss-go { opacity: 1; }
}
/* 터치 기기(폭 무관) — 입력칸 글자 16px: iOS 사파리는 16px 미만 입력칸에 포커스가 가면 화면을 확대한다(돌아오지 않는다). */
@media (pointer: coarse) {
  .v2-find-in, .v2-launch-in, .v2-dest-q, .v2-pad-search, .v2-pjpick-in, .v2-ws-in, #gate-input, #gate-email, #gate-password { font-size: 16px; }
}