/* layout.css — 앱 셸·관리자 셸·사이드바·상단바
   출처: design/mockups (19화면). 괄호 안 숫자 = 그 규칙을 쓰는 화면 수.
   사이드바(12화면)와 상단바(10화면)는 부분 뷰(partial)로 뺄 대상입니다.
*/

.admin .avatar{width:26px;height:26px;background:var(--tag-gray)} /* 19 */
.app .btn-danger{white-space:normal;cursor:pointer} /* 19 */
.app .btn-danger-text{height:28px;cursor:pointer} /* 19 */
.app .btn-primary{flex:0 1 auto;white-space:normal;cursor:pointer} /* 19 */
.admin .field{margin-bottom:18px;max-width:400px} /* 19 */
.admin .field-hint{line-height:1.5} /* 19 */
.main{flex:1;min-width:0;height:100vh;overflow-y:auto;position:relative;display:flex;flex-direction:column} /* 19 */
.main.main-plain{display:block} /* 19 */
.admin .more-btn{align-self:auto;margin-top:0} /* 19 */
.app .row-actions{opacity:0;transition:opacity 20ms ease-in} /* 19 */
.app .section-title{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-muted);margin-bottom:12px} /* 19 */
.admin .strength{max-width:400px} /* 19 */
.app .text-btn{white-space:nowrap;cursor:pointer} /* 19 */
.app .text-btn:hover{background:var(--bg-active)} /* 19 */
.topbar{height:45px;min-height:45px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:14px;color:var(--ink-muted)} /* 19 */
.topbar.topbar-home{padding:0 var(--page-pad)} /* 19 */
.app{display:flex;height:100vh;overflow:hidden} /* 12 */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;background:var(--bg-sidebar);display:flex;flex-direction:column;position:relative} /* 12 */
.app.is-collapsed .sidebar{display:none} /* 12 */
.sidebar-item{display:flex;align-items:center;gap:8px;width:calc(100% - 12px);margin:0 6px;padding:4px 8px;border-radius:var(--radius);font-size:14px;color:var(--ink-muted);cursor:pointer;text-align:left;transition:background 20ms ease-in} /* 12 */
.sidebar-item:hover{background:var(--bg-hover)} /* 12 */
.sidebar-item .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 12 */
.sidebar-item .shortcut{font-size:12px;color:var(--ink-faint)} /* 12 */
.sidebar-item svg{flex:none} /* 12 */
.sidebar-top{padding:6px} /* 12 */
.sidebar-nav{padding:0 0 8px} /* 12 */
.sidebar-scroll{flex:1;overflow-y:auto;padding:0 0 12px} /* 12 */
.sidebar-foot{border-top:1px solid var(--line);padding:6px 0} /* 12 */
.team-switcher{position:relative} /* 12 */
.team-button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--radius);cursor:pointer;transition:background 20ms ease-in} /* 12 */
.team-button:hover{background:var(--bg-hover)} /* 12 */
.team-mark{width:20px;height:20px;border-radius:var(--radius);background:var(--ink);flex:none} /* 12 */
.team-name{font-size:14px;font-weight:600;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} /* 12 */
.team-menu{position:absolute;top:42px;left:6px;width:262px;z-index:40;background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:6px 0} /* 12 */
.team-menu .menu-caption{padding:4px 14px;font-size:12px;color:var(--ink-faint)} /* 12 */
.team-option{display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer} /* 12 */
.team-option:hover{background:var(--bg-hover)} /* 12 */
.team-option .name{font-size:14px} /* 12 */
.team-option .meta{font-size:12px;color:var(--ink-muted)} /* 12 */
/* 팀 옵션·사용자 줄의 "이름 + 아래 보조설명" 묶음 (devplan003 part001).
   목업(SC-03)은 이 자리에 이름 없는 <span style="flex:1">를 쓰고 안쪽 .name에
   style="display:block"을 직접 박아 뒀다. 검수용 목업이라 그런 것이고, 뷰에는
   인라인 스타일을 남기지 않는다 — 클래스를 하나 주고 선언을 여기로 옮긴다.
   보이는 결과는 목업과 같다(CONTRACT §3). */
.team-option .opt-text,
.menu-user .opt-text{flex:1;min-width:0;display:block}
.team-option .opt-text .name,
.menu-user .opt-text .name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-user .name{font-size:14px}
.menu-user .meta{font-size:12px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* 섹션 머리의 ＋ 버튼은 오른쪽 끝으로(사이드바 "워크스페이스 ＋"). devplan003 part001에서
   뷰의 style="margin-left:auto"를 여기로 옮겼다. 새 클래스는 만들지 않는다. */
.section-header .icon-btn{margin-left:auto}
/* 워크스페이스 줄은 그 아래 문서들보다 한 단계 위라 살짝 굵다.
   목업(SC-03)은 style="font-weight:500"으로 박아 뒀지만, 목업 자신의 `is-*` 수식어 관례를 따른다. */
.tree-row.is-workspace .title{font-weight:500}
.tree-row{display:flex;align-items:center;gap:6px;width:calc(100% - 12px);margin:0 6px;padding:3px 8px;border-radius:var(--radius);font-size:14px;color:var(--ink);cursor:pointer;text-align:left;transition:background 20ms ease-in} /* 12 */
.tree-row:hover{background:var(--bg-hover)} /* 12 */
.tree-row.is-current{background:var(--bg-active)} /* 12 */
.tree-row .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 12 */
.tree-row .emoji{font-size:14px;line-height:1;flex:none} /* 12 */
.tree-row .caret{width:14px;flex:none;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;transition:transform 100ms ease-in} /* 12 */
.tree-row.is-open > .caret{transform:rotate(90deg)} /* 12 */
.tree-row .caret.empty{visibility:hidden} /* 12 */
.tree-row .row-actions{display:flex;gap:2px;color:var(--ink-muted);opacity:0;transition:opacity 20ms ease-in} /* 12 */
.tree-row:hover .row-actions{opacity:1} /* 12 */
/* 트리 행의 [+] 하위 페이지 만들기(2026-08-25 QA D-009). .row-actions는 원래 있던
   클래스인데 쓰는 데가 없었다 — 그 안에 들어갈 버튼 모양만 여기서 정한다. */
.tree-row .row-act{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;flex:none;cursor:pointer}
.tree-row .row-act:hover{background:var(--bg-active);color:var(--ink)}
.tree-row .row-actions:focus-within{opacity:1}
.tree-children .tree-row{padding-left:24px} /* 12 */
.tree-children .tree-children .tree-row{padding-left:40px} /* 12 */
.tree-children .tree-children .tree-children .tree-row{padding-left:56px} /* 12 */
.collapse-btn{position:absolute;top:12px;right:8px;width:24px;height:24px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--ink-muted);cursor:pointer} /* 12 */
.collapse-btn:hover{background:var(--bg-hover)} /* 12 */
.expand-btn{position:fixed;top:12px;left:12px;z-index:30;width:26px;height:26px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--ink-muted);cursor:pointer} /* 12 */
.expand-btn:hover{background:var(--bg-hover)} /* 12 */
.app:not(.is-collapsed) .expand-btn{display:none} /* 12 */
.breadcrumb{display:flex;align-items:center;gap:4px;min-width:0;flex:1;margin-left:34px} /* 10 */
.breadcrumb .crumb{padding:2px 6px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 10 */
.breadcrumb .crumb:hover{background:var(--bg-hover)} /* 10 */
.breadcrumb .crumb.current{color:var(--ink)} /* 10 */
.breadcrumb .sep{color:var(--ink-faint)} /* 10 */
.app:not(.is-collapsed) .breadcrumb{margin-left:0} /* 10 */
.topbar-right{display:flex;align-items:center;gap:4px;flex:none;position:relative} /* 10 */
.save-state{font-size:12px;color:var(--ink-faint);margin-right:6px} /* 10 */
.tb-btn{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:var(--radius);font-size:14px;color:var(--ink-muted);cursor:pointer;transition:background 20ms ease-in} /* 10 */
.tb-btn:hover{background:var(--bg-hover)} /* 10 */
.tb-btn.is-active{background:var(--bg-active);color:var(--ink)} /* 10 */
.bookmark .bm-domain{font-size:12px;color:var(--ink-faint);margin-top:8px} /* 10 */
.format-toolbar .tb-sep{width:1px;height:16px;background:rgba(255,255,255,.2);margin:0 3px} /* 10 */
.admin{background:var(--bg-page);display:flex;height:100vh;overflow:hidden} /* 5 */
.settings-sidebar{width:200px;min-width:200px;height:100vh;background:var(--bg-sidebar);display:flex;flex-direction:column;padding:10px 0} /* 5 */
.back-link{display:flex;align-items:center;gap:6px;margin:0 8px 14px;padding:6px 8px;border-radius:var(--radius);font-size:13px;color:var(--ink-muted);text-align:left} /* 5 */
.back-link:hover{background:var(--bg-hover)} /* 5 */
/* 워크스페이스 설정 4탭 머리줄 — [← 워크스페이스로] + 탭 묶음이 한 줄에 선다.
   목업에 없는 화면이라(설정 4탭은 devplan002에서 만들었다) 뷰에 인라인으로 박혀 있던
   선언을 devplan003 part009에서 그대로 옮겼다. 값은 바꾸지 않았다. */
.settings-tabbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.settings-tabbar .back-link{margin:0}
.settings-group-title{padding:6px 16px;font-size:11px;font-weight:600;color:var(--ink-faint)} /* 5 */
.settings-item{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:0 8px;padding:6px 8px;border-radius:var(--radius);font-size:14px;color:var(--ink-muted);text-align:left;transition:background 20ms ease-in} /* 5 */
.settings-item:hover{background:var(--bg-hover)} /* 5 */
.settings-item.is-active{background:var(--bg-active);color:var(--ink);font-weight:500} /* 5 */
.settings-item .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 5 */
.settings-item svg{flex:none} /* 5 */
.admin-main{flex:1;min-width:0;height:100vh;overflow-y:auto;background:var(--bg)} /* 5 */
.admin-inner{max-width:900px;padding:36px 40px 96px} /* 5 */
.admin-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px} /* 5 */
.admin-head .head-text{flex:1;min-width:0} /* 5 */
.admin-title{font-size:24px;font-weight:700;letter-spacing:-0.01em;margin:0 0 4px} /* 5 */
.admin-desc{font-size:13px;color:var(--ink-muted);margin:0} /* 5 */
.admin-table{width:100%;border-collapse:collapse;font-size:14px} /* 5 */
.admin-table th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-faint);padding:8px;border-bottom:1px solid var(--line);white-space:nowrap} /* 5 */
.admin-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle} /* 5 */
.admin-table tbody tr:hover{background:var(--bg-hover)} /* 5 */
.admin-table .col-title{min-width:180px} /* 5 */

/* 앱 밖 화면(로그인·초대·오류) 셸 — SC-01/SC-24 */
.auth{background:var(--bg-page);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 16px 96px}

/* ===== part002 — 인증 셸 상단 브랜드(SC-01/SC-24) =====
   design/mockups/SC-01_auth.html:47-49 그대로. */
.brand{display:flex;align-items:center;gap:8px;margin-bottom:28px}
.brand .mark{width:32px;height:32px;border-radius:var(--radius);background:var(--ink)}
.brand .name{font-size:20px;font-weight:700;letter-spacing:-0.01em}