/* arolo web UI */
:root {
  --bg: #F7F6F2;
  --bg-2: #FBFAF7;
  --panel: #FFFFFF;
  --nav-bg: #EDEBE5;
  --line: #E6E3DC;
  --line-2: #EFEDE8;
  --line-strong: #D9D6CE;
  --ink: #17171B;
  --ink-2: #3A3A42;
  --muted: #5C5C66;
  --decide: #3E43B8; --decide-bg: #ECEDFB;
  --confirm: #7A4F00; --confirm-bg: #FBF1DC;
  --review: #0F6B63; --review-bg: #E2F1EF;
  --plan: #6B3F8F; --plan-bg: #F2EAF8;
  --urgent: #A33A00; --urgent-bg: #FBE9E0;
  --on-ink: #FFFFFF;
  --link-hover: #2A2E8C;
  --dot: #B8B5AD;
  --idle: #6C7A99;
  --warn-line: #EBC79A; --warn-bg: #FFFBF3;
  --file-bg: #EEF0F6; --file-line: #D5D9E6; --file-ink: #2B4C9A;
  --boss-bubble-line: #D6D8F5;
  --incident-bg: #FBF6F1;
  --shadow: rgba(0,0,0,.18);
  --iframe-bg: #FFFFFF;
  color-scheme: light;
  --sans: 'Pretendard', system-ui, sans-serif;
  --serif: 'Noto Serif KR', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 14px;
  --header-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #141416; --bg-2: #18181B; --panel: #1E1E22; --nav-bg: #26262B;
  --line: #2C2C33; --line-2: #26262C; --line-strong: #3A3A42;
  --ink: #EDEBE6; --ink-2: #CFCDC8; --muted: #9A9AA3;
  --decide: #8A8EF0; --decide-bg: #26284A;
  --confirm: #E0B45E; --confirm-bg: #3A2E12;
  --review: #5CC4B6; --review-bg: #123430;
  --plan: #C39AE0; --plan-bg: #2E1F3A;
  --urgent: #F08A5C; --urgent-bg: #3A1F14;
  --on-ink: #141416; --link-hover: #B0B3F5; --dot: #4A4A52; --idle: #8CA0C4;
  --warn-line: #5A4520; --warn-bg: #2A2416;
  --file-bg: #26283A; --file-line: #3A3D55; --file-ink: #9FB0E8;
  --boss-bubble-line: #3A3D6A; --incident-bg: #2A2320; --shadow: rgba(0,0,0,.5); --iframe-bg: #FFFFFF;
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141416; --bg-2: #18181B; --panel: #1E1E22; --nav-bg: #26262B;
  --line: #2C2C33; --line-2: #26262C; --line-strong: #3A3A42;
  --ink: #EDEBE6; --ink-2: #CFCDC8; --muted: #9A9AA3;
  --decide: #8A8EF0; --decide-bg: #26284A;
  --confirm: #E0B45E; --confirm-bg: #3A2E12;
  --review: #5CC4B6; --review-bg: #123430;
  --plan: #C39AE0; --plan-bg: #2E1F3A;
  --urgent: #F08A5C; --urgent-bg: #3A1F14;
  --on-ink: #141416; --link-hover: #B0B3F5; --dot: #4A4A52; --idle: #8CA0C4;
  --warn-line: #5A4520; --warn-bg: #2A2416;
  --file-bg: #26283A; --file-line: #3A3D55; --file-ink: #9FB0E8;
  --boss-bubble-line: #3A3D6A; --incident-bg: #2A2320; --shadow: rgba(0,0,0,.5); --iframe-bg: #FFFFFF;
  color-scheme: dark;
}

/* ---------- 룩 2: Golden Gate (macOS 스타일 · 그레이·오렌지 · 10px) ---------- */
:root[data-look="enterprise"] {
  --bg: #F2F1EE; --bg-2: #E8E6E1; --panel: #FFFFFF; --nav-bg: #EBEAE6;
  --line: #E3E1DC; --line-2: #ECEAE5; --line-strong: #CFCCC5;
  --ink: #1D1D1F; --ink-2: #48484A; --muted: #7C7C80;
  --decide: #D2603A; --decide-bg: #FBE7DC;
  --confirm: #B45309; --confirm-bg: #FEF3C7;
  --review: #0F766E; --review-bg: #CCFBF1;
  --plan: #7C3AED; --plan-bg: #EDE9FE;
  --urgent: #D62F2F; --urgent-bg: #FBE2E1;
  --on-ink: #FFFFFF; --link-hover: #B14D2C; --dot: #D6D3CC; --idle: #5C7285;
  --warn-line: #FCD34D; --warn-bg: #FFFBEB;
  --file-bg: #FBEFE8; --file-line: #F0D8C6; --file-ink: #B14D2C;
  --boss-bubble-line: #F0D8C6; --incident-bg: #FFF3EC; --shadow: rgba(29,29,31,.10);
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Pretendard', 'Noto Sans KR', sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Pretendard', 'Noto Sans KR', sans-serif;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="enterprise"]:not([data-theme="light"]) {
  --bg: #1E1E1E; --bg-2: #242426; --panel: #2C2C2E; --nav-bg: #323234;
  --line: #3A3A3C; --line-2: #333335; --line-strong: #48484A;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
  --decide: #E8794F; --decide-bg: #4A2A1C;
  --confirm: #FBBF24; --confirm-bg: #422006;
  --review: #2DD4BF; --review-bg: #134E4A;
  --plan: #A78BFA; --plan-bg: #3B2A75;
  --urgent: #F2685A; --urgent-bg: #4A2321;
  --on-ink: #1E1E1E; --link-hover: #F2A07E; --dot: #48484A; --idle: #8AA0C7;
  --warn-line: #78350F; --warn-bg: #2A1F0B;
  --file-bg: #3A2A20; --file-line: #4A3423; --file-ink: #F2A07E;
  --boss-bubble-line: #4A3423; --incident-bg: #332318; --shadow: rgba(0,0,0,.5);
  color-scheme: dark;
  }
}
:root[data-look="enterprise"][data-theme="dark"] {
  --bg: #1E1E1E; --bg-2: #242426; --panel: #2C2C2E; --nav-bg: #323234;
  --line: #3A3A3C; --line-2: #333335; --line-strong: #48484A;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
  --decide: #E8794F; --decide-bg: #4A2A1C;
  --confirm: #FBBF24; --confirm-bg: #422006;
  --review: #2DD4BF; --review-bg: #134E4A;
  --plan: #A78BFA; --plan-bg: #3B2A75;
  --urgent: #F2685A; --urgent-bg: #4A2321;
  --on-ink: #1E1E1E; --link-hover: #F2A07E; --dot: #48484A; --idle: #8AA0C7;
  --warn-line: #78350F; --warn-bg: #2A1F0B;
  --file-bg: #3A2A20; --file-line: #4A3423; --file-ink: #F2A07E;
  --boss-bubble-line: #4A3423; --incident-bg: #332318; --shadow: rgba(0,0,0,.5);
  color-scheme: dark;
}
[data-look="enterprise"] .serif { letter-spacing: -0.01em; font-weight: 700; }
[data-look="enterprise"] .btn, [data-look="enterprise"] .input, [data-look="enterprise"] .textarea, [data-look="enterprise"] .select, [data-look="enterprise"] .btn.sm,
[data-look="enterprise"] .card, [data-look="enterprise"] .req-card, [data-look="enterprise"] .bubble, [data-look="enterprise"] .detail, [data-look="enterprise"] .plan-body,
[data-look="enterprise"] .summary-box, [data-look="enterprise"] .effect-box, [data-look="enterprise"] .file-row, [data-look="enterprise"] .verdict, [data-look="enterprise"] .msg-request,
[data-look="enterprise"] .option, [data-look="enterprise"] .mail-item, [data-look="enterprise"] .mail-msg, [data-look="enterprise"] .toast, [data-look="enterprise"] .note, [data-look="enterprise"] .count,
[data-look="enterprise"] .incident, [data-look="enterprise"] .task-item, [data-look="enterprise"] .menu, [data-look="enterprise"] .dialog, [data-look="enterprise"] #login form,
[data-look="enterprise"] .nav, [data-look="enterprise"] .nav a, [data-look="enterprise"] .seg, [data-look="enterprise"] .seg button, [data-look="enterprise"] .theme-btn, [data-look="enterprise"] .notif-btn, [data-look="enterprise"] .boss-btn,
[data-look="enterprise"] .newtask .input, [data-look="enterprise"] .newtask .btn.round { border-radius: 10px; }
[data-look="enterprise"] .chip, [data-look="enterprise"] .badge, [data-look="enterprise"] .mention-chip { border-radius: 999px; }
[data-look="enterprise"] .card { box-shadow: 0 1px 3px var(--shadow); border-color: var(--line); }
[data-look="enterprise"] .btn.primary { background: var(--decide); border-color: var(--decide); color: #FFFFFF; }
[data-look="enterprise"] .btn.outline { border-color: var(--decide); color: var(--decide); }
[data-look="enterprise"] .chip.active { background: var(--decide); border-color: var(--decide); }
[data-look="enterprise"] .req-card.active, [data-look="enterprise"] .staff-card.active, [data-look="enterprise"] .mail-item.active { border-color: var(--decide); }
[data-look="enterprise"] .nav a.active { color: var(--decide); box-shadow: none; }
[data-look="enterprise"] .tabbar a.active { color: var(--decide); }
[data-look="enterprise"] .msg.boss .bubble { background: var(--decide-bg); }
[data-look="enterprise"] table.ledger th, [data-look="enterprise"] table.ledger td { padding: 5px 6px; }
[data-look="enterprise"] .desk-queue h1, [data-look="enterprise"] .team-head h1, [data-look="enterprise"] .settings h1, [data-look="enterprise"] .mail-list-head h1 { font-size: 22px; letter-spacing: -0.02em; }
[data-look="enterprise"] .detail h2, [data-look="enterprise"] .plan-body h1, [data-look="enterprise"] .thread-head h1 { font-size: 19px; letter-spacing: -0.02em; }
[data-look="enterprise"] .boss-btn .avatar, [data-look="enterprise"] .avatar { border-radius: 50%; }
[data-look="enterprise"] .avatar.photo, [data-look="enterprise"] img.avatar { border-radius: 50%; }
[data-look="enterprise"] .nav { backdrop-filter: saturate(1.6) blur(14px); background: color-mix(in srgb, var(--nav-bg) 78%, transparent); }
[data-look="enterprise"] .thread-input, [data-look="enterprise"] .lounge-tabs { backdrop-filter: saturate(1.6) blur(14px); }

/* ---------- 룩 3: macOS (최신 macOS 휴먼 인터페이스 가이드라인 참조 — 시스템 블루 액센트,
   SF Pro, 얇은 구분선·낮은 채도 회색, 버튼/필드는 살짝만 둥글게, 사이드바/툴바 vibrancy) ---------- */
:root[data-look="macos"] {
  --bg: #F5F5F7; --bg-2: #FFFFFF; --panel: #FFFFFF; --nav-bg: #EBEBEF;
  --line: #D6D6DB; --line-2: #E5E5EA; --line-strong: #C7C7CC;
  --ink: #1D1D1F; --ink-2: #3C3C43; --muted: #6E6E73;
  --decide: #007AFF; --decide-bg: #E8F1FF;
  --confirm: #FF9500; --confirm-bg: #FFF3E0;
  --review: #248A3D; --review-bg: #E6F9EA;
  --plan: #AF52DE; --plan-bg: #F5E9FB;
  --urgent: #FF3B30; --urgent-bg: #FFEBEA;
  --on-ink: #FFFFFF; --link-hover: #0060DF; --dot: #C7C7CC; --idle: #6E7F9E;
  --warn-line: #FFD60A; --warn-bg: #FFFBEA;
  --file-bg: #EFF6FF; --file-line: #D6E7FE; --file-ink: #0066CC;
  --boss-bubble-line: #D6E7FE; --incident-bg: #FFF5F5; --shadow: rgba(0,0,0,.14);
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Pretendard', 'Noto Sans KR', sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Pretendard', 'Noto Sans KR', sans-serif;
  --radius: 16px;
  --glass-hi: rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="macos"]:not([data-theme="light"]) {
  --bg: #1E1E1E; --bg-2: #252526; --panel: #2B2B2D; --nav-bg: #232325;
  --line: #3A3A3C; --line-2: #333335; --line-strong: #48484A;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
  --decide: #0A84FF; --decide-bg: #14304E;
  --confirm: #FF9F0A; --confirm-bg: #3A2A0A;
  --review: #30D158; --review-bg: #0F3A1C;
  --plan: #BF5AF2; --plan-bg: #3A1F4A;
  --urgent: #FF453A; --urgent-bg: #3A1210;
  --on-ink: #1E1E1E; --link-hover: #409CFF; --dot: #48484A; --idle: #93AAD1;
  --warn-line: #7A5A00; --warn-bg: #2A2210;
  --file-bg: #152A42; --file-line: #1E3A5C; --file-ink: #6CB6FF;
  --boss-bubble-line: #1E3A5C; --incident-bg: #3A1F1E; --shadow: rgba(0,0,0,.55);
  color-scheme: dark;
  }
}
:root[data-look="macos"][data-theme="dark"] {
  --bg: #1E1E1E; --bg-2: #252526; --panel: #2B2B2D; --nav-bg: #232325;
  --line: #3A3A3C; --line-2: #333335; --line-strong: #48484A;
  --ink: #F5F5F7; --ink-2: #D1D1D6; --muted: #98989D;
  --decide: #0A84FF; --decide-bg: #14304E;
  --confirm: #FF9F0A; --confirm-bg: #3A2A0A;
  --review: #30D158; --review-bg: #0F3A1C;
  --plan: #BF5AF2; --plan-bg: #3A1F4A;
  --urgent: #FF453A; --urgent-bg: #3A1210;
  --on-ink: #1E1E1E; --link-hover: #409CFF; --dot: #48484A; --idle: #93AAD1;
  --warn-line: #7A5A00; --warn-bg: #2A2210;
  --file-bg: #152A42; --file-line: #1E3A5C; --file-ink: #6CB6FF;
  --boss-bubble-line: #1E3A5C; --incident-bg: #3A1F1E; --shadow: rgba(0,0,0,.55);
  color-scheme: dark;
}
:root[data-look="macos"][data-theme="dark"] { --glass-hi: rgba(255,255,255,.09); }
@media (prefers-color-scheme: dark) { :root[data-look="macos"]:not([data-theme="light"]) { --glass-hi: rgba(255,255,255,.09); } }
[data-look="macos"] .serif { font-weight: 700; letter-spacing: -0.01em; }
/* 버튼: "리퀴드 글래스" 최신 macOS 스타일 — 좀 더 둥글고, 유리 표면 위쪽에 하이라이트가 지나가는 느낌 */
[data-look="macos"] .btn { border-radius: 10px; border-color: var(--line-strong); box-shadow: 0 1px 0 var(--glass-hi) inset, 0 1px 1px var(--shadow); }
[data-look="macos"] .btn:active { box-shadow: 0 1px 1px var(--shadow) inset; }
[data-look="macos"] .btn.sm { border-radius: 8px; }
[data-look="macos"] .btn.primary { background: var(--decide); border-color: var(--decide); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 2px var(--shadow); }
[data-look="macos"] .btn.outline { border-color: var(--decide); color: var(--decide); }
[data-look="macos"] .btn.danger { color: var(--urgent); border-color: var(--urgent); }
[data-look="macos"] .btn.ghost { box-shadow: none; }
[data-look="macos"] .dlg-x, [data-look="macos"] .icon-btn { border-radius: 50%; }
/* 입력창/드롭다운: 얇은 회색 테두리 + 포커스 시 파란 링(글로우) — macOS 포커스 표시 방식 */
[data-look="macos"] .input, [data-look="macos"] .textarea, [data-look="macos"] .select { border-radius: 9px; border-color: var(--line-strong); }
[data-look="macos"] .input:focus, [data-look="macos"] .textarea:focus, [data-look="macos"] .select:focus {
  outline: none; border-color: var(--decide); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--decide) 32%, transparent);
}
/* 책상/기획 프롬프트 입력창(.newtask 안의 테두리 없는 input)은 자체가 테두리 없이 둥근 알약
   모양 안에 얹혀 있는 형태라, 포커스 때 각진 파란 테두리/글로우가 생기면 "네모 안에 네모"처럼
   보인다. 이 안의 입력창만 포커스 표시를 끈다(바깥 알약 테두리는 그대로 시각적 포커스 역할). */
[data-look="macos"] .newtask .input:focus, [data-look="macos"] .newtask .textarea:focus {
  box-shadow: none; border-color: transparent;
}
[data-look="macos"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-look="macos"][data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2398989D' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root[data-look="macos"]:not([data-theme="light"]) .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2398989D' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } }
/* 컨테이너(카드·다이얼로그·드로어·메뉴): 최신 macOS(리퀴드 글래스) 느낌으로 코너를 더 크게 둥글리고,
   그림자는 더 얕고 넓게 퍼지게, 위쪽에는 유리 하이라이트 선을 한 줄 얹는다 */
[data-look="macos"] .card, [data-look="macos"] .req-card, [data-look="macos"] .detail, [data-look="macos"] .plan-body,
[data-look="macos"] .summary-box, [data-look="macos"] .effect-box, [data-look="macos"] .file-row, [data-look="macos"] .verdict, [data-look="macos"] .msg-request,
[data-look="macos"] .option, [data-look="macos"] .mail-item, [data-look="macos"] .mail-msg, [data-look="macos"] .toast, [data-look="macos"] .note, [data-look="macos"] .count,
[data-look="macos"] .incident, [data-look="macos"] .task-item, [data-look="macos"] .menu, [data-look="macos"] .dialog, [data-look="macos"] .drawer, [data-look="macos"] #login form { border-radius: 16px; }
[data-look="macos"] .card, [data-look="macos"] .menu, [data-look="macos"] .dialog {
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 8px 30px var(--shadow);
  border-color: var(--line);
}
[data-look="macos"] .bubble { border-radius: 16px; }
[data-look="macos"] .chip, [data-look="macos"] .badge, [data-look="macos"] .mention-chip { border-radius: 999px; }
/* 세그먼트 컨트롤: 더 둥글게, 선택된 조각에 옅은 그림자를 얹어 macOS 세그먼트 버튼처럼 "떠 있는" 느낌을 준다 */
[data-look="macos"] .seg { border-radius: 999px; }
[data-look="macos"] .seg button { border-radius: 999px; }
[data-look="macos"] .seg button.active { box-shadow: 0 1px 2px var(--shadow); }
[data-look="macos"] .chip.active { background: var(--decide); border-color: var(--decide); }
[data-look="macos"] .req-card.active, [data-look="macos"] .staff-card.active, [data-look="macos"] .mail-item.active { border-color: var(--decide); }
[data-look="macos"] .nav a.active { color: var(--decide); box-shadow: none; }
[data-look="macos"] .tabbar a.active { color: var(--decide); }
[data-look="macos"] .msg.boss .bubble { background: var(--decide-bg); }
[data-look="macos"] .desk-queue h1, [data-look="macos"] .team-head h1, [data-look="macos"] .settings h1, [data-look="macos"] .mail-list-head h1 { font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
[data-look="macos"] .detail h2, [data-look="macos"] .plan-body h1, [data-look="macos"] .thread-head h1 { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
/* 사이드바/툴바 vibrancy — 최신 macOS "리퀴드 글래스": 블러·채도를 더 올리고, 유리 위쪽에
   하이라이트 라인을 얹어 정말 얇은 유리판이 떠 있는 느낌을 낸다 */
[data-look="macos"] .nav {
  backdrop-filter: saturate(2.1) blur(28px);
  background: color-mix(in srgb, var(--nav-bg) 62%, transparent);
  box-shadow: 1px 0 0 var(--glass-hi) inset;
}
/* .lounge-tabs 는 원래 배경색이 없어서(페이지 배경과 그대로 이어짐) 여기에만 반투명 유리 배경을
   얹으면 주변과 색이 안 맞는 사각형처럼 튀어 보였다 — 뜬 상태로 스크롤 위에 겹치는 nav/thread-input/
   tabbar 와 달리 lounge-tabs 는 페이지 안에 얌전히 있는 줄이라 빼는 게 맞다. */
[data-look="macos"] .thread-input, [data-look="macos"] .tabbar {
  backdrop-filter: saturate(2.1) blur(28px);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
/* 스크롤바(앱 전체): 평소엔 안 보이다가, 스크롤 중이거나 그 위에 마우스를 올렸을 때만 얇고
   반투명한 알약 모양으로 나타난다(오버레이 스타일). .is-scrolling 클래스는 스크롤 이벤트가 있을 때
   JS 가 붙였다가 멈추면 잠시 후 뗀다(아래 attachOverlayScrollbars 참고). */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover, *.is-scrolling { scrollbar-color: color-mix(in srgb, var(--ink) 32%, transparent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box; border: 2px solid transparent; border-radius: 999px; transition: background-color .15s ease; }
*:hover::-webkit-scrollbar-thumb, .is-scrolling::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink) 32%, transparent); }
*:hover::-webkit-scrollbar-thumb:hover, .is-scrolling::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 46%, transparent); }
/* macOS 룩은 살짝 더 두꺼운 알약으로 — 동작 방식(스크롤/hover 시에만 노출)은 동일 */
[data-look="macos"] ::-webkit-scrollbar { width: 11px; height: 11px; }
[data-look="macos"] ::-webkit-scrollbar-thumb { border: 3px solid transparent; }

* { box-sizing: border-box; }
/* 앱 셸(html/body)은 스크롤하지 않는다(안쪽 영역만 스크롤). 예전엔 html 에 scrollbar-gutter 를 둬서
   쓰지도 않는 스크롤바 폭(10px)만큼 오른쪽이 비고, 하단 입력줄 끝이 잘려 보였다. */
/* ---------- 핀치줌 금지, 페이지 좌우 스크롤 금지 (앱 셸 자체) ---------- */
html, body { overflow-x: hidden; max-width: 100%; touch-action: pan-y; overscroll-behavior: none; background: var(--bg); }
img, video, canvas, svg, iframe, table { max-width: 100%; }
.thread, .desk-queue, .desk-main, .desk-side, .work-list, .work-side, .plan-main, .plan-side, .mail-list, .mail-main, .team, .settings, .dlg-body, .cal-scroll, .cal-tasks { scrollbar-gutter: stable; overscroll-behavior: contain; }
/* ---------- 텍스트 선택: 기본은 선택 불가, 내용 영역만 허용 ---------- */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable], .sel,
.md, .bubble, .msg-request, .msg-tool, .msg-system span, .txt, .summary-box, .effect-box, .detail .lead, .detail h2, .req-card .title, .option .lbl, .option .why, .option .against,
.report > div:first-child, .verdict, .work-side .txt, .plan-body h1, .plan-body .md, .thread-head h1,
.mail-item .subj, .mail-item .snip, .mail-item .from, .mail-thread-head h2, .mail-msg, .mail-atts .att,
table.ledger td, .hist, .incident, .skill-row .grow, .device-row, .node-row .grow, .mono, code, pre, .status-row code, .upd-log, .pv-img, .dlg-head .name, .toast > span, .note, #login .err
{ -webkit-user-select: text; user-select: text; }
button, .btn, .chip, .badge, .pill, .nav, .nav a, .tabbar, .tabbar a, .brand, label, th, .h-label, .section-title, .seg, .avatar, .file-ico, .kv span:first-child, .settings { -webkit-user-select: none; user-select: none; }
.file-row .name, .file-row .name.linkish { -webkit-user-select: text; user-select: text; }
/* .settings 를 통째로 선택 불가로 막았으니, 그 안의 입력창·복사 가능 영역은 다시 허용한다 */
.settings input, .settings textarea, .settings select, .settings [contenteditable], .settings .mono, .settings code, .settings .note, .settings .status-row code, .settings .sel { -webkit-user-select: text; user-select: text; }
/* 포커스 없는 입력칸의 값과 select 의 표시 글자는 페이지 선택에 끌려 들어가지 않게. 포커스하면 입력칸 안에서는 평소처럼 선택된다. */
input:not(:focus), select, .select, .kbd, kbd, .rail, .rail *, .set-nav, .set-nav *, .qk-head, .qk-head *, .req-card .meta, .req-card .top, .due-col, .set-label label, .set-label .small, .ms-row, .ms-row * { -webkit-user-select: none; user-select: none; }
html, body { height: 100dvh; overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--decide); text-decoration: none; }
a.task-ref { font-weight: 600; }
a:hover { color: var(--link-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
.serif { font-family: var(--serif); letter-spacing: -0.02em; }
.mono { font-family: var(--mono); }
button, input, select, textarea { font-family: inherit; font-size: 14px; color: var(--ink); }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--decide); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- app shell ---------- */
#app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.header {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line);
  background: var(--bg); position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-left: calc(32px + env(safe-area-inset-left)); padding-right: calc(32px + env(safe-area-inset-right));
  user-select: none; -webkit-user-select: none;
}
.tabbar { user-select: none; -webkit-user-select: none; }
/* 로고타입(PWA 아이콘과 같은 서체)은 테마·룩이 바뀌어도 항상 고정 — --serif 변수는 Enterprise 룩에서 sans 로 바뀌므로 여기선 쓰지 않는다 */
.brand { font-family: 'Noto Serif KR', Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.nav { display: flex; gap: 4px; background: var(--nav-bg); padding: 4px; border-radius: 12px; }
.nav a { padding: 8px 18px; border-radius: 9px; color: var(--muted); min-height: 36px; display: flex; align-items: center; font-size: 14px; }
.nav a.active { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.usage { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); display: inline-block; flex-shrink: 0; }
.dot.on { background: var(--review); }
.usage .dot { margin-right: 6px; }
.boss-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 22px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; }
.boss-btn:hover, .boss-btn[aria-expanded="true"] { border-color: var(--line-strong); background: var(--panel); }
.boss-btn .avatar { background: var(--ink); color: var(--on-ink); }
#popover .pop-backdrop { position: fixed; inset: 0; z-index: 120; }
.menu { position: absolute; top: calc(var(--header-h) - 6px + env(safe-area-inset-top)); right: calc(24px + env(safe-area-inset-right)); width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu-head { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.menu-head .grow { min-width: 0; flex-grow: 1; }
.menu-head .nm { font-weight: 700; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; min-height: 40px; border: 0; background: transparent; border-radius: 9px; font-size: 14px; color: var(--ink); }
.menu-item:hover, .menu-item:focus-visible { background: var(--bg); }
.menu-item.danger { color: var(--urgent); }
.menu-sep { height: 1px; background: var(--line-2); margin: 4px 6px; }
.profile-dialog { width: min(720px, 92vw); height: auto; max-height: 90vh; }
.profile-body { flex-direction: column; gap: 16px; padding: 18px 20px; overflow: auto; background: var(--panel); }
.profile-dialog .avatar.lg { background: var(--ink); color: var(--on-ink); }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.theme-btn svg { width: 18px; height: 18px; }
.notif-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.notif-btn svg { display: block; }
/* 알림 숫자 배지: 숫자가 원 안에서 살짝 아래/오른쪽으로 치우쳐 보이는 폰트가 있어서
   (line-height:1 은 폰트마다 내부 상하 여백이 달라 완벽히 안 맞음) — line-height 를 박스
   높이와 같게 주고 flex 중앙 정렬을 같이 써서 어떤 폰트에서도 정가운데에 오게 한다. */
.notif-count { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--urgent); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 15px; text-align: center; border: 2px solid var(--bg); box-sizing: content-box; font-variant-numeric: tabular-nums; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--urgent); color: #fff; font-size: 10px; font-weight: 700; margin-left: 5px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.tabbar a { position: relative; }
.tabbar a .nav-badge { position: absolute; top: 2px; right: calc(50% - 22px); margin-left: 0; }
.tabbar { display: none; }
.screen { flex-grow: 1; min-height: 0; display: flex; }
.screen.hidden { display: none; }

/* ---------- common atoms ---------- */
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; display: inline-block; line-height: 1.5; white-space: nowrap; }
.badge.k-결정 { color: var(--decide); background: var(--decide-bg); }
.badge.k-확인 { color: var(--confirm); background: var(--confirm-bg); }
.badge.k-검토 { color: var(--review); background: var(--review-bg); }
.badge.k-기획 { color: var(--plan); background: var(--plan-bg); }
.badge.pass { color: var(--review); background: var(--review-bg); }
.badge.reject { color: var(--on-ink); background: var(--urgent); }
.badge.uncertain { color: var(--confirm); background: var(--confirm-bg); }
.badge.neutral { color: var(--muted); background: var(--nav-bg); }
/* .mono(JetBrains Mono, 한글 미지원) 안에 중첩된 상태 pill 은 한글이 폰트 폴백을 타고 내려가
   OS 기본 굴림체로 보이는 문제가 있었다 — pill 은 항상 --sans 로 되돌린다. */
.pill { font-size: 12px; font-weight: 600; font-family: var(--sans); }
.pill.s-대기, .pill.s-중단, .pill.s-폐기, .pill.s-완료, .pill.s-승인 { color: var(--muted); }
.pill.s-진행 { color: var(--review); }
.pill.s-검수 { color: var(--review); }
.pill.s-검토대기 { color: var(--review); }
.pill.s-결재 { color: var(--decide); }
.pill.s-이견 { color: var(--decide); }
.avatar { width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--muted); }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar.xl { width: 72px; height: 72px; font-size: 22px; }
.avatar.person-flat { background: var(--line-strong); color: var(--ink-2); font-weight: 700; }
.avatar.md { width: 34px; height: 34px; font-size: 12px; }
.avatar.xs { width: 20px; height: 20px; font-size: 10px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
img.avatar.photo { object-fit: cover; display: block; background: var(--nav-bg); }
/* 프로필 사진 우측 하단 현재 상태 점 (AI 는 작업 상태, 사람은 Slack presence 기준) */
.avatar-holder { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-holder .status-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--panel); box-sizing: content-box; }
.avatar-holder.lg .status-dot { width: 11px; height: 11px; right: 0; bottom: 0; }
.avatar-holder.xl .status-dot { width: 15px; height: 15px; right: 3px; bottom: 3px; }
.avatar-holder.sm .status-dot, .avatar-holder.xs .status-dot { width: 7px; height: 7px; }
.photo-row { display: flex; gap: 12px; align-items: flex-start; }
.photo-row input[type=file] { height: auto; padding: 8px 10px; font-size: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.outline { border-color: var(--ink); }
.btn.danger { color: var(--urgent); border-color: var(--urgent); }
.btn.sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn.ghost { border-color: transparent; background: transparent; }
.input, .textarea, .select {
  height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 14px;
  background: var(--panel); width: 100%; min-width: 0;
}
.textarea { height: auto; min-height: 80px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5C66' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.row { display: flex; gap: 10px; align-items: center; }
.row > .input { flex-grow: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.h-label { font-size: 12px; font-weight: 700; color: var(--muted); }
/* 연동 드로어의 긴 설명 문구를 기본으로 숨기고 눌러야 펼쳐지는 작은 ⓘ 버튼 (2.1.7). */
.info-dot { width: 16px; height: 16px; min-width: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font: italic 700 11px/14px Georgia, serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-dot[aria-expanded="true"] { background: var(--muted); color: var(--card); border-color: var(--muted); }
.info-text { padding: 6px 8px; background: var(--bg2, rgba(127,127,127,.08)); border-radius: 8px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--panel); min-height: 32px; }
.chip.active { background: var(--ink); color: var(--on-ink) !important; border-color: var(--ink); font-weight: 600; }
.chip.k-결정 { color: var(--decide); } .chip.k-확인 { color: var(--confirm); } .chip.k-검토 { color: var(--review); } .chip.k-기획 { color: var(--plan); }
.seg { display: flex; gap: 4px; background: var(--nav-bg); padding: 3px; border-radius: 10px; }
.seg.wide { width: 100%; }
.seg.wide button { flex: 1 1 0; text-align: center; }
.seg button { font-size: 13px; padding: 6px 14px; border-radius: 8px; border: none; background: transparent; color: var(--muted); min-height: 32px; }
.seg button.active { background: var(--panel); color: var(--ink); font-weight: 600; }
/* 직원 프로필 드로어의 정보/최근 업무/이력/개선 메모 탭 — 4개 + 건수라 좁은 드로어에서 넘치기 쉽다.
   기본 .seg 는 버튼에 white-space 지정이 없어서, flex 로 좁아질 때 "정보" 처럼 짧은 글자도
   두 줄로 줄바꿈돼 버리는 문제가 있었다. 줄바꿈을 막고, 그래도 안 들어가면 가로 스크롤로 흘린다. */
.seg.profile-tabs { overflow-x: auto; scrollbar-width: none; }
.seg.profile-tabs::-webkit-scrollbar { display: none; }
/* 스크롤로 잘린 탭("개선 메모")이 둥근 모서리 경계에서 뚝 잘려 마치 밖으로 튀어나온 것처럼
   보이는 버그 — 실제로는 overflow-x:auto 로 의도된 가로 스크롤이지만, 잘리는 지점이 각지고
   선명해서 UI 버그처럼 보였다. 양쪽 끝을 부드럽게 페이드시켜 "더 스크롤할 게 있다"는 느낌을 주고,
   잘린 모서리가 도드라지지 않게 한다. */
.seg.profile-tabs { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 14px), transparent 100%); }
/* 탭 4개가 왼쪽에 몰리고 오른쪽이 비어 보이던 것 — 폭이 넘쳐 가로 스크롤이 필요한 경우가 아니면
   탭마다 남는 폭을 똑같이 나눠 가져 드로어 폭을 꽉 채우게 한다(내용이 길면 원래대로 줄어들며
   가로 스크롤). */
.seg.profile-tabs button { white-space: nowrap; flex: 1 1 auto; padding: 6px 10px; text-align: center; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: center; }
.kv span:first-child { color: var(--muted); }
/* .md 자체엔 줄바꿈 규칙이 없어서(부모(.detail 등)의 overflow-wrap 상속에만 기대고 있었다),
   부모가 다른 화면(업무 정보 탭 등)에서는 안 물려받아 긴 영문 토큰이 섞인 불릿 한두 줄이
   박스 오른쪽으로 삐져나가는 일이 있었다 — .md 자체에 직접 줄바꿈 규칙을 건다. */
.md, .md li { overflow-wrap: anywhere; word-break: break-word; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md ul { margin: 0 0 8px; padding-left: 18px; }
.md li { margin: 2px 0; }
.md h1, .md h2, .md h3 { margin: 12px 0 6px; font-size: 15px; }
.md h1:first-child, .md h2:first-child, .md h3:first-child { margin-top: 0; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--nav-bg); padding: 1px 5px; border-radius: 4px; cursor: pointer; }
.md code:hover { background: var(--line); }
.md code.copied { background: var(--review); color: #fff; }
.md pre { position: relative; font-family: var(--mono); font-size: 12px; background: var(--nav-bg); padding: 10px 40px 10px 12px; border-radius: 8px; overflow: auto; }
/* 코드블록 우상단에 떠 있는 복사 아이콘 — app.js 의 attachCodeCopyButtons() 가 렌더 후에 붙인다. */
.copy-btn { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; opacity: .75; }
.copy-btn:hover { opacity: 1; color: var(--ink); }
.copy-btn.copied { opacity: 1; color: var(--review); border-color: var(--review); }
.copy-btn svg { width: 14px; height: 14px; }
/* display:block + overflow-x:auto 로 감싸는 건 표를 반응형으로 만드는 표준적인 방법 —
   내부 thead/tbody/tr/td 는 원래 표 레이아웃(auto)을 그대로 쓰면서, 표 전체 박스만 블록이 되어
   가로 스크롤을 가질 수 있게 된다. 이렇게 해두면 (특히 표 안에 공백 없는 긴 영어 단어가 있을 때
   일부 모바일 브라우저가 칸 폭을 실제보다 넓게 계산해버리는 것 같은) 예외적인 경우에도, 글자가
   말풍선 배경 밖으로 삐져나가는 대신 그 표 안에서만 옆으로 스크롤된다. */
.md table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; width: 100%; max-width: 100%; font-size: 13px; margin: 6px 0; }
.md th, .md td { border-bottom: 1px solid var(--line-2); padding: 6px 8px; text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: break-word; min-width: 3.4em; }
.md th { color: var(--muted); font-size: 12px; font-weight: 600; }
.md blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: 76px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--ink); color: var(--on-ink); padding: 12px 16px; border-radius: 12px; font-size: 13px; box-shadow: 0 6px 20px var(--shadow); display: flex; gap: 10px; align-items: flex-start; animation: toast-in .2s ease-out; }
.toast .badge { margin-top: 1px; }
.toast.error { background: var(--urgent); }
.toast button { background: transparent; border: none; color: var(--on-ink); opacity: .7; padding: 0 4px; font-size: 16px; line-height: 1; margin-left: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- version ---------- */
.device-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.device-row:last-child { border-bottom: 0; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
#login form { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
#login .err { color: var(--urgent); font-size: 13px; min-height: 18px; }
/* 비밀번호 입력창 오른쪽의 눈 모양 버튼 — 누르고 있는 동안이 아니라 토글식으로 입력한 내용을 보여준다. */
.pw-field { position: relative; }
.pw-field .input { padding-right: 40px; }
.pw-field .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; box-sizing: border-box; border: 0; background: transparent; color: var(--muted); border-radius: 50%; }
.pw-field .pw-toggle:hover { color: var(--ink); background: var(--nav-bg); }
/* .btn 의 padding 0 18px 이 남아 있으면 flex 자식인 svg 가 0 폭으로 눌려 아이콘이 안 보였다(로그인 화면). */
.pw-field .pw-toggle svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- 책상 ---------- */
.desk { display: flex; width: 100%; min-height: 0; flex-grow: 1; }
.desk-queue { width: 360px; flex-shrink: 0; padding: 28px 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.desk-queue h1 { font-size: 26px; }
.desk-queue .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.req-list { display: flex; flex-direction: column; gap: 10px; }
.req-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.req-card.active { border: 2px solid var(--decide); padding: 13px 15px; }
.req-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* 카드 번호(#25) — 직원이 대화·보고에서 실제로 이 번호를 언급하니 카드에서 바로 대조할 수 있어야
   한다. 종류 배지와 같은 줄, 같은 높이의 조용한 태그로 짝을 맞춘다(그냥 맨 텍스트로 띄우면 붕 떠
   보인다). */
.req-id { font: 700 11px/1.5 var(--mono); color: var(--muted); background: var(--nav-bg); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.req-card .title { font-weight: 600; line-height: 1.45; }
.req-card .meta { font-size: 12px; color: var(--muted); }
.due { font-size: 12px; color: var(--muted); }
.due.urgent { color: var(--urgent); font-weight: 600; }
/* 기한 아래에 "언제 올라온 요청인지"(생성 시각의 상대 시간, 예: "3분 전")를 작게 같이 보여준다. */
.due-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.desk-main { flex-grow: 1; min-width: 0; min-height: 0; padding: 28px 28px 24px; display: flex; flex-direction: column; overflow: auto; }
.desk-compose { width: 100%; margin: 0 0 14px; }
.desk-compose .newtask { padding: 14px 14px 10px; border-radius: 22px; }
.desk-compose .newtask .input { font-size: 15px; }
.desk-compose .newtask-ta { min-height: 24px; }
.desk-compose .newtask .icon-btn { width: 38px; height: 38px; }
.desk-compose .newtask .btn.round { width: 44px; height: 44px; }
.detail { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; flex-grow: 1; overflow-wrap: anywhere; min-width: 0; }
.detail .head { display: flex; flex-direction: column; gap: 8px; }
.detail h2 { font-size: 24px; letter-spacing: -0.01em; }
.detail .lead { font-size: 14px; color: var(--ink-2); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.option { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.option .lbl { font-weight: 700; }
.option .why { font-size: 13px; color: var(--ink-2); }
.option .against { font-size: 12px; color: var(--muted); }
.option .rec { margin-top: auto; font-size: 12px; font-weight: 600; }
.option .btn { width: 100%; }
.summary-box { background: var(--bg); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.summary-box a { font-weight: 600; margin-top: 4px; font-size: 13px; }
.effect-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.effect-box.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.effect-box .h-label { color: var(--review); }
.effect-box.warn .h-label { color: var(--confirm); }
.artifacts { display: flex; flex-direction: column; gap: 8px; }
.file-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
.file-ico { width: 40px; height: 48px; border-radius: 4px; background: var(--file-bg); border: 1px solid var(--file-line); display: flex; align-items: flex-end; justify-content: center; font-size: 9px; font-weight: 700; color: var(--file-ink); padding-bottom: 4px; flex-shrink: 0; font-family: var(--mono); }
.file-row .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.file-row .grow { flex-grow: 1; min-width: 0; }
.file-row .file-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 좁은 우측 패널: 파일명 자체가 미리보기 버튼이라 별도 "미리보기" 버튼과 보조 문구를 빼서 이름 칸을 넓힌다. */
.work-side .file-row .btn.sm, .work-side .file-row .file-sub { display: none; }
.file-row a, .file-row button { font-size: 12px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
.file-row .name.linkish { background: none; border: 0; padding: 0; text-align: left; color: var(--decide); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.file-row .name.linkish:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- 미리보기 팝업 ---------- */
body.modal-open { overflow: hidden; }
#modal .backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { width: 80vw; height: 85vh; max-width: 1400px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.dialog.max { width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: 0; }
#modal .backdrop:has(.dialog.max) { padding: 0; }
.dialog.max .dlg-head { padding-top: calc(10px + env(safe-area-inset-top) + 6px); padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
.dlg-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--panel); }
.dlg-head .name { flex-grow: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-head .btn.sm { height: 32px; padding: 0 10px; font-size: 12px; }
/* 모달·드로어 우상단 닫기 — 프로젝트 전체에서 "닫기" 텍스트버튼 대신 X 아이콘 버튼 하나로 통일. */
.dlg-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.dlg-x:hover { background: var(--nav-bg); color: var(--ink); }
.dlg-body { flex-grow: 1; min-height: 0; background: var(--bg-2); display: flex; }
.dlg-body iframe { width: 100%; height: 100%; border: 0; background: var(--iframe-bg); }
.pv-img { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pv-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

/* ---------- 우측 Drawer (데스크탑) / 하단 팝업(모바일) — 직원 프로필 등 전역 패턴 ---------- */
#modal .backdrop:has(.drawer) { align-items: stretch; justify-content: flex-end; padding: 0; background: rgba(0,0,0,.32); }
.drawer { width: 380px; max-width: 100vw; height: 100%; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: drawer-in .18s ease-out; }
/* 같은 드로어를 다시 그릴 뿐(편집 버튼 클릭 등)일 때는 진입 애니메이션을 끈다 — 안 그러면
   드로어 내용이 바뀔 때마다 슬라이드 인 이펙트가 재생돼 마치 껐다 켠 것처럼 깜빡여 보인다. */
.drawer.no-anim { animation: none; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 16px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
/* 직원 프로필 드로어 헤더 — 사진을 xl(72px)로 키운 만큼 사진/글자 사이 여백도 같이 넉넉하게. */
.drawer-head-lg { gap: 14px; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: 16px; }
.drawer-head-lg .name { font-size: 16px; }
.drawer-head .handle { color: var(--muted); font-weight: 500; }
/* 직원(AI) 프로필 히어로 — 드로어 폭(380px)과 같은 정사각형 사진 위에 하단 그라데이션과
   이름/부서·역할/@아이디를 오버레이한다. 사람(동료) 프로필은 기존 .drawer-head 를 그대로 쓴다. */
.profile-hero { position: relative; margin: 0 -16px; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; background: var(--nav-bg); }
.drawer-body.has-hero { padding-top: 0; scrollbar-gutter: auto; }
.ph-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ph-fallback { font-size: 88px; font-weight: 700; color: #FFFFFF; opacity: .92; line-height: 1; user-select: none; }
/* 높이 0 인 sticky 줄 — 스크롤해도 편집·닫기 버튼이 오른쪽 위에 남는다. 이어지는 사진 영역에
   gap 이 생기지 않도록 아래 음수 마진으로 flex gap(14px)을 상쇄한다. */
.ph-topbar { position: sticky; top: 0; z-index: 3; height: 0; margin: 0 -16px -14px; display: flex; justify-content: flex-end; flex-shrink: 0; }
.ph-topbar-actions { display: flex; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 10px 0; height: max-content; }
.ph-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.38); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; backdrop-filter: blur(2px); }
.ph-icon-btn:hover { background: rgba(0,0,0,.55); }
.ph-icon-btn svg { display: block; }
.ph-scrim { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, transparent 100%); color: #fff; }
.ph-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-name { font-size: 19px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ph-status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 11.5px; font-weight: 700; color: #1f1f1f; white-space: nowrap; text-shadow: none; }
.ph-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ph-sub { font-size: 13px; opacity: .92; margin-top: 4px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ph-handle { font-size: 12.5px; opacity: .8; margin-top: 2px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* 기본정보 카드(성별·생년월일·MBTI·혈액형·출신지·출신학교) — 값이 있는 항목만 채워지는 2열 그리드 */
.basic-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.basic-info-grid .kv, .drawer-body .card .basic-info-grid .kv, .drawer-body .card .basic-info-grid .kv:last-child { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 6px 0; }
.basic-info-grid .kv > span:last-child { min-height: 22px; display: flex; align-items: center; }
.basic-info-grid .kv span:first-child { font-size: 12px; }
.mbti-badge { display: inline-block; line-height: 18px; padding: 2px 8px; border-radius: 999px; background: var(--decide-bg); color: var(--decide); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
.drawer-body { flex-grow: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-gutter: stable; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex-shrink: 0; }
.drawer-actions .btn { flex: 1 1 0; }
.drawer-body .form-grid { grid-template-columns: 1fr; }
.drawer-body .staff-form, .drawer-body .person-form { padding: 0; border: 0; background: transparent; }
.drawer-body .checks { display: flex; flex-direction: column; gap: 6px; }
.drawer-body .card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
/* 편집 폼을 성격별로 묶는 그룹 제목 — "이름 편집창 보이다가 다른거 보이다가 또 갑자기 사진에
   아바타에 중구난방" 문제를 정리하기 위해, 기본 정보/외모/역할·AI 설정/성격·말투/능력치 순으로 묶는다. */
.field-group { display: flex; flex-direction: column; gap: 12px; }
.field-group + .field-group { padding-top: 16px; border-top: 1px solid var(--line); }
.field-group-title { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.drawer-body .card h2 { font-size: 14px; margin: 0; }
/* 설정 > 연동 카드 제목의 서비스 아이콘 — Google/Slack/Atlassian/Fish Audio(TTS)/노트북 전부
   같은 20px 크기·같은 선 스타일로 맞춘다(전에는 아이콘이 아예 없거나 카드마다 들쭉날쭉했음). */
.svc-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.svc-icon svg { width: 100%; height: 100%; }
/* 사용자가 직접 올려준 로고 이미지(Fish Audio, HubSpot) — 실제 로고 비율(가로가 긴 파형 등)을
   찌그러뜨리지 않게 object-fit:contain 으로 20px 박스 안에 맞춘다. */
.svc-icon-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.drawer-body .card .kv { padding: 6px 0; border-bottom: 1px solid var(--line); }
.drawer-body .card .kv:last-child { border-bottom: 0; padding-bottom: 0; }
/* 라벨이 좁게 눌려 한 글자씩 세로로 꺾이지 않도록 라벨은 한 줄로 고정하고, 긴 값만 줄바꿈한다. */
.drawer-body .card .kv > span:first-child { flex-shrink: 0; white-space: nowrap; }
.drawer-body .card .kv > span:last-child { min-width: 0; text-align: right; }
.drawer-body .card .hist, .drawer-body .card .incident { margin-top: 2px; }
.drawer-body .card .hist + .hist, .drawer-body .card .incident + .incident { margin-top: 8px; }
/* 연동(설정 → 연동) 드로어처럼 카드 없이 바로 쓰는 kv(라벨 + 긴 입력창/코드 값)는, 380px 짜리
   드로어 폭에 한 줄로 나란히 두면 라벨이 눌려 "이" "메" "일" 처럼 세로로 깨져 보인다 — 라벨을
   위에, 내용을 아래에 두는 세로형으로 바꾼다. 상태 한 줄(.status-row)이나 카드 안의 짧은
   라벨:값 표시(.card .kv, 예: "상태 · 대기")는 그대로 한 줄 유지. */
.drawer-body > .stack > .kv:not(.status-row) { flex-direction: column; align-items: stretch; gap: 4px; }
.drawer-body > .stack > .kv:not(.status-row) > label,
.drawer-body > .stack > .kv:not(.status-row) > span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); white-space: normal; }
.drawer-body > .stack > .kv:not(.status-row) > input,
.drawer-body > .stack > .kv:not(.status-row) > .input { width: 100%; }
/* 계정 표처럼 좁은 드로어 안에 넣은 표는 폭을 100%로 욱여넣지 말고 원래 크기 그대로 두고
   가로 스크롤(감싸는 div 의 overflow-x:auto)로 넘긴다 — "이메일"/"상태" 헤더 글자가 한 글자씩
   세로로 쌓이는 문제 방지. */
.drawer-body table.ledger { width: auto; min-width: 100%; }
.drawer-body table.ledger th, .drawer-body table.ledger td { white-space: nowrap; }
@media (max-width: 899px) {
  #modal .backdrop:has(.drawer) { align-items: flex-end; }
  .drawer { width: 100%; height: auto; max-height: min(86vh, calc(var(--vvh, 100vh) - 8px)); border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; animation: drawer-in-up .18s ease-out; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes drawer-in-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* ---------- 스킬 ---------- */
.skill-list { display: flex; flex-direction: column; }
.skill-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.skill-row:last-child { border-bottom: 0; }
.skill-row .grow { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.skill-row code { font-size: 11px; }
.verdicts { display: flex; flex-direction: column; gap: 8px; }
/* message_id/URL 처럼 공백 없는 긴 문자열이 그대로 들어오면(검수 판정 사유 등) 카드 밖으로
   튀어나가던 버그 — 줄바꿈 지점이 없는 토큰은 강제로 끊어서 카드 폭 안에 담는다. */
.verdict { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.verdict .vh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verdict .items { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
.verdict .items .r-ok { color: var(--review); } .verdict .items .r-wrong { color: var(--urgent); } .verdict .items .r-no_source { color: var(--confirm); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.actions .btn { min-width: 110px; }
.answer-area { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
/* .desk-side/.work-side 자체는 폭·테두리만 담당하는 바깥 상자로 두고(overflow:hidden 로 자식이
   삐져나오지 않게만 막음), 실제 스크롤은 안의 .side-scroll 이 한다 — "맨 아래로" 오버레이 버튼을
   스크롤과 무관하게 상자 오른쪽 아래에 고정하려면 버튼이 스크롤 안 되는 요소(이 바깥 상자)의
   자식이어야 하기 때문. */
.desk-side { width: 320px; flex-shrink: 0; border-left: 1px solid var(--line); position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; }
.desk-side .side-scroll, .work-side .side-scroll { flex-grow: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 22px; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; padding: 28px 32px 24px 24px; }
/* 데스크톱에서는 항상 고정 3번째 열로 보이는 게 정상 — 바텀시트 전용 FAB/헤더/백드롭은
   모바일 미디어쿼리에서만 켜지므로, 기본값(데스크톱)에서는 명시적으로 꺼둔다.
   (이게 없으면 body.desk-side-open 클래스가 데스크톱 폭에서도 그냥 붙어 있어서
   FAB 가 .desk 행의 평범한 flex 자식으로 끼어들어가 좁은 폭에 세로쓰기로 눌리는 문제가 있었다.) */
.desk-side-fab, .desk-side-backdrop { display: none; }
.desk-side-head { display: none; }
.staff-now { display: flex; flex-direction: column; gap: 10px; }
.staff-row { display: flex; gap: 10px; align-items: flex-start; }
/* 업무 중인 직원 점은 avatar()가 이미 그리는 .status-dot 하나만 쓴다 (전에는 .busy-avatar-wrap +
   .busy-dot 로 점을 하나 더 얹어서 같은 자리에 점 두 개가 겹쳐 보였음). */
/* 실제 점(.status-dot)은 항상 opacity:1 인 불투명한 원으로 유지한다 — opacity 를 깜빡이면
   배경/테두리까지 같이 투명해져서 뒤의 아바타 사진이 비쳐 보인다. 대신 ::after 로 점과 같은 색의
   "링"을 하나 더 그려서 그 링만 커지면서 옅어지는 걸로 하트비트 느낌을 낸다 (점 자체는 안 흔들림). */
.status-dot.pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: currentColor; animation: busy-ping 1.6s ease-out infinite;
}
@keyframes busy-ping { 0% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.staff-row .nm { font-size: 13px; font-weight: 600; }
.staff-row .st { font-size: 12px; color: var(--muted); }
.reports { display: flex; flex-direction: column; }
.report { font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.report:last-child { border-bottom: 0; }
.report .who { font-size: 12px; color: var(--muted); }
.newtask-wrap { display: flex; flex-direction: column; gap: 6px; }
.newtask { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 20px; padding: 10px 10px 8px; box-shadow: 0 1px 3px var(--shadow); }
.newtask .input { border: 0; background: transparent; border-radius: 0; padding: 2px 4px; width: 100%; box-sizing: border-box; }
.newtask .input:focus { outline: none; }
/* 업무·라운지 메시지 입력창: 포커스 때 테두리/글로우가 추가로 생기지 않게 (평상시 테두리만 유지) */
.thread-input .input:focus, .thread-input .textarea:focus {
  outline: none; box-shadow: none; border-color: var(--line-strong);
}
/* .input 의 고정 height:46px 를 그대로 물려받으면, 줄바꿈 없이 한 줄만 칠 때도 박스 자체는
   그 46px 만큼(줄간격 1.5 기준 1.5~2줄 분량) 세로 공간을 차지해 — 특히 placeholder 문구가 길면
   빈 상태에서도 기본이 두 줄처럼 보이는 원인이었다. height:auto 로 되돌려 min-height(한 줄)에서
   시작해 실제로 입력한 내용만큼만(최대 160px) 늘어나게 한다. */
.newtask-ta { height: auto; resize: none; max-height: 160px; min-height: 24px; line-height: 1.5; padding-top: 4px; padding-bottom: 4px; }
/* 라운지 입력창(textarea): 한 줄일 땐 기존 입력칸(46px)과 같은 높이, 줄이 늘면 160px 까지 자란다. */
.lounge-ta { height: 46px; min-height: 46px; max-height: 160px; resize: none; line-height: 1.5; padding-top: 11px; padding-bottom: 11px; overflow-y: auto; }
.newtask-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.newtask-tools { display: flex; align-items: center; gap: 2px; }
.newtask .btn.round { width: 34px; height: 34px; border-radius: 50%; padding: 0; flex-shrink: 0; border: 0; }
.newtask .icon-btn, .thread-input .icon-btn, .thread-head .icon-btn { width: 32px; height: 32px; border-radius: 50%; padding: 0; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); }
.newtask .icon-btn:hover, .thread-input .icon-btn:hover, .thread-head .icon-btn:hover { background: var(--nav-bg); color: var(--ink); }
.newtask .icon-btn svg, .newtask .btn.round svg, .thread-input .icon-btn svg, .thread-head .icon-btn svg { display: block; flex-shrink: 0; }
.thread-head .icon-btn.active { background: var(--decide); color: #fff; }
.thread-input .icon-btn { align-self: center; }
/* 위험 명령 승인 방식(수동/자동) 드롭다운 — 클로드 코드의 "자동 ∨" 토글처럼, 접혀 있을 때는
   아이콘 + 짧은 이름만, 펼치면 옵션마다 아이콘·이름과 선택 표시(체크)를 보여준다. 네이티브
   <select> 대신 <details> 로 만들어 각 룩·다크모드에 자동으로 맞는다(전부 CSS 변수 사용). */
.perm-dd { position: relative; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--bg-2); flex-shrink: 0; }
.perm-dd > summary { list-style: none; cursor: pointer; height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; user-select: none; }
.perm-dd > summary::-webkit-details-marker { display: none; }
.perm-dd-chev { display: flex; align-items: center; flex-shrink: 0; transition: transform .15s; }
.perm-dd[open] .perm-dd-chev { transform: rotate(180deg); }
.perm-dd-icon svg, .perm-dd-chev svg { display: block; }
.perm-dd-text { line-height: 1; }
.perm-dd:hover, .perm-dd[open] { background: var(--nav-bg); color: var(--ink); }
.perm-dd:hover > summary, .perm-dd[open] > summary { color: var(--ink); }
.perm-dd-icon { display: flex; align-items: center; flex-shrink: 0; }
.perm-dd-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 172px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); padding: 4px; display: flex; flex-direction: column; gap: 1px; z-index: 40; }
.perm-dd-opt { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.perm-dd-opt:hover { background: var(--bg-2); }
.perm-dd-opt .perm-dd-label { flex: 1; }
.perm-dd-opt.active { color: var(--decide); }
.perm-dd-opt .perm-dd-check { color: var(--decide); display: inline-flex; flex-shrink: 0; }
.mention-ta-wrap { position: relative; width: 100%; }
/* .thread-input .input { width: auto; flex: 1 1 240px } 은 이 textarea 가 flex 아이템일 때만 의미가
   있는데, mentionOverlayify() 가 이걸 .mention-ta-wrap(플렉스가 아닌 일반 div) 으로 한 겹 감싸버려서
   flex 효과는 안 먹고 width:auto 만 남아 textarea 가 브라우저 기본 폭(짧은 스크롤 박스)으로 쪼그라들고,
   그 위에 겹쳐 그리는 backdrop(항상 100%)과 폭이 어긋나 캐럿 위치가 글자와 안 맞는 문제가 있었다.
   여기서 폭을 다시 100%로 못박아 backdrop 과 항상 같은 폭을 쓰게 한다. */
.mention-ta-wrap textarea.input { position: relative; z-index: 1; color: transparent; caret-color: var(--ink); width: 100%; box-sizing: border-box; }
/* backdrop 는 실제 textarea 와 폭·패딩을 맞추려고 textarea.className 을 그대로 복사해서 쓴다
   (예: "input newtask-ta") — 그런데 .input 클래스에 고정 height:46px 가 있어서, 2줄째까지만
   보이고 3번째 줄부터 배경(진짜 글자를 감춘 투명 textarea) 만 남아 글자가 하얗게(안 보이게)
   잘려나가는 문제가 있었다. inset:0 이 원래 의도한 "부모(=textarea) 높이만큼 늘어나기"가 이기도록
   height 를 명시적으로 되돌린다. */
.mention-ta-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; color: var(--ink); height: auto !important; min-height: 0 !important; max-height: none !important; }
.mention-hl { color: var(--decide); font-weight: 700; }
.mention-dd { position: absolute; left: 0; min-width: 220px; max-width: 320px; max-height: 220px; overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); z-index: 20; padding: 4px; }
.mention-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; font-size: 13px; cursor: pointer; }
.mention-dd-item.active, .mention-dd-item:hover { background: var(--nav-bg); }
.compose-atts { padding: 0 4px; }
.compose-atts .chip { display: inline-flex; align-items: center; gap: 6px; }
.compose-atts .chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.compose-atts .chip.chip-img { padding: 4px 8px 4px 4px; }
.chip-thumb { border: 0; background: none; padding: 0; margin: 0; cursor: zoom-in; display: block; border-radius: 8px; overflow: hidden; line-height: 0; }
.chip-thumb img { width: 28px; height: 28px; object-fit: cover; display: block; border-radius: 8px; }
.node-browse-list { max-height: 320px; overflow: auto; }

/* ---------- 책상: 고급 필드(부서/기한) ---------- */
.desk-advanced { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 0 2px; }
.desk-advanced .lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.desk-advanced .select { width: auto; min-width: 100px; }
.desk-advanced input[type=date] { width: auto; }

/* ---------- 자동화 (구 기획 레이아웃 재사용) ---------- */
.plan { display: flex; gap: 24px; padding: 28px 32px 24px; width: 100%; min-height: 0; flex-grow: 1; }
.plan-main { flex-grow: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.plan-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.plan-form .lbl { font-size: 12px; font-weight: 700; color: var(--plan); }
.plan-form .row { flex-wrap: wrap; }
.plan-form .select { width: auto; min-width: 120px; }
.plan-form input[type=date] { width: auto; }
.plan-body { border-radius: 18px; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.plan-body h1 { font-size: 24px; }
.plan-body .who { font-size: 12px; color: var(--muted); }
.plan-side { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; overflow-wrap: anywhere; word-break: break-word; }
.plan-side .item { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.plan-side .item.active { border: 2px solid var(--plan); padding: 13px 15px; }
.plan-side .item .t { font-weight: 600; }

/* ---------- 업무 ---------- */
/* flex-grow:1 — .screen 이 데스크톱(가로 배치)에서는 align-items:stretch 로 이 칸의 높이가
   "공짜로" 꽉 차지만, 모바일에서는 .screen 이 flex-direction:column 으로 바뀌면서 높이가
   주축이 되어 flex-grow 가 없으면 내용물 높이만큼만 차지한다 — 대화가 적은 라운지 DM 등
   내용이 짧을 때 화면 아래쪽(탭바 위)에 빈 검은 공간이 생기던 원인. */
.work { display: flex; width: 100%; min-height: 0; flex-grow: 1; }
.work-list { width: 300px; flex-shrink: 0; padding: 24px 16px 24px 32px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); overflow: auto; }
/* margin-bottom 을 h2 에 직접 주면, 이 h2 가 담긴 줄이 align-items:center 인 flex 줄이라
   margin-bottom 만큼 자기 박스가 아래로 더 커져서 실제 글자는 그 절반(4px)만큼 위로 쏠려 보인다
   (옆의 보기 전환 토글·"업무 목록 전체" 버튼과 중심선이 안 맞는 원인). 여백은 h2 를 감싼 줄
   자체(.work-list-head)에 주고 h2 자체는 margin 없이 순수하게 중앙 정렬되게 한다. */
.work-list h2 { font-size: 13px; color: var(--muted); margin: 0; }
.work-list-head { margin-bottom: 8px; }
/* 검색 중일 때 "검색 결과 N건" 라벨이 옆의 보기 전환/필터 버튼들에 눌려 세로로 줄바꿈되던 문제 —
   라벨은 줄어들지 않게 하고, 대신 그 줄 전체가 필요하면 다음 줄로 넘어가게 한다(flex-wrap). */
.work-list h2 { flex-shrink: 0; white-space: nowrap; }
/* 검색창 안의 "×" 지우기 버튼 — 검색어가 있을 때만 나타난다. */
.input-clear-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.input-clear-btn:hover { background: var(--nav-bg); color: var(--ink); }
#work-search-in { padding-right: 26px; }

.task-item { padding: 10px 12px; border-radius: 10px; text-align: left; width: 100%; border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; gap: 2px; }
.task-item.active { background: var(--panel); border-color: var(--line); }
.task-item .t { font-size: 13px; font-weight: 600; }
.task-item .s { font-size: 12px; }
.work-main { flex-grow: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.thread-head { padding: 20px 28px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.thread-head h1 { font-size: 22px; }
.thread-head .id { font-size: 12px; color: var(--muted); }
.thread { flex-grow: 1; overflow: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; background: var(--bg-2); }
.unread-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 4px 0; }
.unread-divider::before, .unread-divider::after { content: ''; flex: 1; height: 1px; background: var(--urgent); opacity: .35; }
.unread-divider span { flex-shrink: 0; padding: 3px 12px; font-size: 11.5px; font-weight: 700; color: var(--urgent); background: var(--bg-2); }
.date-sep { display: flex; align-items: center; justify-content: center; margin: 10px 0; }
.date-sep span { flex-shrink: 0; padding: 4px 14px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
/* align-items 를 안 정해두면 기본값 stretch 때문에 .avatar-holder 가 메시지 버블 높이만큼 늘어나고,
   상태 점(bottom:-1px)이 아바타가 아니라 메시지 맨 아래쪽 엉뚱한 위치에 찍히는 버그가 생긴다
   (라운지에서 발견 — work 화면도 같은 messageEl() 을 쓰므로 같이 영향받는 문제였다). */
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg.boss { flex-direction: row-reverse; }
.msg .body-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 auto; max-width: 680px; min-width: 0; }
.msg.boss .body-col { align-items: flex-end; }
.msg .body-col > .verdict, .msg .body-col > .artifacts { align-self: stretch; }
/* 이름(<strong class=mention>) 뒤 "· 엔진 · 시간" 부분이 각각 별도 텍스트 노드라 flex 아이템으로
   따로 떨어지는데, 그 안에 있는 맨 앞 공백은 (그 노드 자신의 인라인 서식 맥락에서 "줄 시작"으로
   취급돼) 브라우저가 조용히 지워버려 "이름·엔진"처럼 붙어 보이는 버그가 있었다 — 그 공백에 기대는
   대신 column-gap 으로 아이템 사이 간격을 주고, 각 조각의 문자열에서는 맨 앞 공백을 뺐다. */
.msg .who { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 2px; column-gap: 4px; }
.msg .who b { color: var(--ink); }
.msg.boss .who { justify-content: flex-end; }
.bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; word-break: break-word; max-width: 100%; }
.msg.boss .bubble { background: var(--decide-bg); border-color: var(--boss-bubble-line); }
/* 채팅 말풍선 밖(보고·업무 본문 등)에서도 @멘션·이름 언급이 똑같이 굵게+클릭 가능해 보이도록,
   .bubble 안팎 어디서나 통일된 스타일을 준다. */
.mention { color: var(--decide); font-weight: 700; cursor: pointer; }
.bubble .mention { color: var(--decide); font-weight: 700; }
/* 실제 메신저의 "입력 중…" 말풍선 — 상대 아바타·이름은 그대로 두고, 말풍선 안에서 점 3개가
   통통 튀며 애니메이션된다. 문구가 순환하는 게 아니라 진짜 답장을 기다리는 느낌을 준다. */
.typing-bubble { padding: 10px 16px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; min-width: 0; box-sizing: border-box; }
.typing-bubble-row { display: inline-flex; align-items: center; min-height: 24px; }
.typing-dots { display: inline-flex; align-items: flex-end; gap: 4px; height: 10px; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; animation: typing-bounce 1.3s infinite; }
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing-dots span { animation: none; opacity: .8; } }
/* 말풍선 점 3개 밑에, 방금 실행된 도구 호출 한 줄을 같이 보여준다 — "말풍선 -> 도구 사용 N회
   (멈춰 보임) -> 한참 조용 -> 갑자기 메시지"처럼 끊겨 보이던 것을, 도구가 넘어갈 때마다 말풍선
   자체가 계속 갱신되는 것처럼 보이게 한다. 매 갱신마다 새 엘리먼트로 다시 그려지므로 fade-in 이
   자동으로 재생된다. */
.typing-live-line { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; max-width: min(320px, 100%); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: typing-live-fade-in .25s ease; }
.typing-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--decide); flex-shrink: 0; animation: typing-live-pulse 1.4s ease-in-out infinite; }
@keyframes typing-live-fade-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typing-live-pulse { 0%, 100% { opacity: .4; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .typing-live-line { animation: none; } .typing-live-dot { animation: none; opacity: .8; } }
/* 입력 중 표시가 잠깐 완전히 사라지는 순간(app.js typingPauseState) — 투명도가 아니라 켜짐/꺼짐. */
.typing-msg.typing-paused { display: none; }
.tool-group { padding-left: 46px; }
.tool-toggle { border: 0; background: transparent; font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.tool-toggle:hover { color: var(--ink); }
.tool-group .msg-tool { padding-left: 14px; }
.live-status { padding-left: 46px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: baseline; }
.live-status-text { transition: opacity .22s ease; }
.shimmer {
  background: linear-gradient(90deg, var(--muted) 25%, var(--ink) 50%, var(--muted) 75%);
  background-size: 250% auto; background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: shimmer-sweep 2.4s ease-in-out infinite;
}
@keyframes shimmer-sweep { 0% { background-position: 200% center; } 100% { background-position: -100% center; } }
.live-status .dots { display: inline-flex; margin-left: 1px; }
.live-status .dots span { color: var(--muted); font-weight: 700; opacity: 0; animation: dot-fade 1.4s infinite; }
.live-status .dots span:nth-child(1) { animation-delay: 0s; }
.live-status .dots span:nth-child(2) { animation-delay: .25s; }
.live-status .dots span:nth-child(3) { animation-delay: .5s; }
@keyframes dot-fade { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; color: var(--muted); background: none; } .live-status .dots span { animation: none; opacity: 1; } }
.tool-lines { display: flex; flex-direction: column; gap: 4px; }
.badge.unavail { margin-left: 6px; font-weight: 600; }
/* 팀 카드 안에서는 이름 아래 한 줄로 따로 서므로 왼쪽 들임 없이, 위 6px 아래는 카드 간격(10px)으로 균일하게. */
.staff-card .nm + .sub + .badge.unavail { display: inline-flex; margin: 6px 0 0; }
.task-item .t, .req-card .title, .plan-side .item .t, .staff-row .st { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-tool { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-left: 46px; white-space: pre-wrap; word-break: break-all; }
.msg-system { display: flex; justify-content: center; }
.msg-system span { font-size: 12px; color: var(--decide); background: var(--decide-bg); padding: 6px 14px; border-radius: 16px; text-align: center; }
/* min-width:0 이 없으면 flex 아이템 기본값(min-width:auto)이 적용돼, 안에 긴 영문 토큰이 섞인
   줄이 있으면 그 "줄바꿈 없는 최소 폭"만큼 박스 자체가 넓어져서 화면 오른쪽으로 삐져나갔다
   (업무 화면에서 사장님 지시/검토 요청 말풍선에 영문 고유명사가 섞이면 재현). */
.msg-request { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); font-size: 13px; display: flex; flex-direction: column; gap: 6px; margin-left: 46px; max-width: 680px; min-width: 0; overflow-wrap: anywhere; }
.msg-request .mr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg-request .mr-status { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.msg-request .mr-status.open { color: var(--decide); font-weight: 600; }
.msg-request .mr-title { font-weight: 700; font-size: 14px; line-height: 1.45; }
.thread-input { position: relative; padding: 14px 28px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; background: var(--panel); flex-wrap: wrap; }
.thread-input .input { flex: 1 1 240px; width: auto; background: var(--bg-2); }
/* 업무 화면의 "끼어들기" 작성창 — 책상(newTaskForm)과 같은 카드 구조로: 입력창+툴바(첨부·승인방식·
   보내기)를 하나의 카드에 담고, 멈춤/완료/폐기(업무 자체의 상태를 바꾸는 버튼)는 카드 밖 보조 줄로
   분리해 메시지 작성과 섞이지 않게 한다. */
.work-thread-input { flex-direction: column; align-items: stretch; gap: 8px; }
.work-compose { margin: 0; }
/* .thread-input .input 이 입력창 배경을 var(--bg-2)로 칠하는데(예전엔 입력창이 카드 밖에 혼자
   있어서 그게 필요했다), 지금은 .newtask 카드(둥근 모서리 20px, var(--panel) 배경) 안에 들어있는
   구조라 이 배경색이 카드와 달라서 입력창만 각진 사각 박스로 튀어 보였다 — .newtask .input 이
   원래 쓰는 투명 배경으로 되돌려서 카드 배경과 자연스럽게 이어지게 한다. */
.work-compose .input { flex: none; background: transparent; }
.work-task-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* 검수 의견·이력 등에 메시지ID·해시처럼 공백 없는 긴 문자열이 그대로 오면 패널 폭을 넘어 잘려
   보이던 버그 — overflow-wrap 은 상속되므로 여기 한 번만 걸어도 .verdict/.txt 등 안의 텍스트에 전부 적용된다. */
.work-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); position: relative; overflow: hidden; box-sizing: border-box; }
.work-side .side-scroll { gap: 18px; }
.work-side section { display: flex; flex-direction: column; gap: 6px; }
.work-side h3 { font-size: 12px; color: var(--muted); }
.work-side .txt { font-size: 13px; }

/* 우측 패널 폭 조절 핸들 — 데스크톱 3단 레이아웃(업무/책상/기획)의 오른쪽 패널 앞에 붙는 얇은 드래그 바.
   평소엔 거의 안 보이다가(hover) 잡을 수 있음을 알려주고, 더블클릭하면 기본 폭으로 되돌아간다. */
.side-resize-handle { width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; }
.side-resize-handle::after { content: ''; position: absolute; inset: 0; margin: 0 -3px; }
.side-resize-handle:hover, .side-resize-handle.dragging { background: color-mix(in srgb, var(--decide) 55%, transparent); }
@media (max-width: 899px) { .side-resize-handle { display: none; } }

/* 책상 화면 복잡한 지시 감지 — "기획으로 전환할까요?" 제안 카드 */
.desk-suggest { margin-top: 12px; background: color-mix(in srgb, var(--decide) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--decide) 30%, var(--line)); border-radius: 12px; padding: 14px; display: none; }
.desk-suggest .t { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.desk-suggest .b { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.desk-suggest .row { gap: 6px; }

/* 업무 목록 — 상태별 그룹(테이블 행) 뷰 */
.work-list.view-table .task-item { display: none; }
.work-list-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.work-list-group-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.work-list-group-head .n { font-weight: 400; color: var(--muted); }
.work-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.work-row:hover { background: var(--nav-bg); }
.work-row.active { background: var(--panel); }
.work-row .ttl { flex-grow: 1; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-row .mono { flex-shrink: 0; font-size: 10px; color: var(--muted); }
/* 업무 목록 검색 — 제목·번호가 아니라 대화 "내용"으로 찾은 경우, 왜 걸렸는지 알 수 있게 그 문맥을
   한 줄로 보여준다. 카드형(.task-item, 세로 쌓임)과 테이블형(.work-row, 가로 한 줄)에서 둘 다
   쓰이므로 work-row 쪽은 flex-basis:100% 로 다음 줄로 내린다. */
.work-row-snippet, .task-item .work-row-snippet { flex-basis: 100%; font-size: 11px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-row .work-row-snippet { padding-left: 28px; }
.work-view-toggle { display: flex; background: var(--nav-bg); border-radius: 9px; padding: 2px; gap: 2px; flex-shrink: 0; }
.work-view-toggle button { border: 0; background: transparent; border-radius: 7px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
/* 인라인 svg 는 기본적으로 baseline 정렬이라 글자처럼 밑으로 여분의 descender 공간을 깔고 앉는다 —
   그 여분 때문에 버튼 안에서 flex 로 가운데 정렬해도 아이콘이 살짝 위로 쏠려 보인다.
   display:block 으로 그 여백을 없애 아이콘 박스 자체가 버튼 정가운데 오게 한다. */
.work-view-toggle button span { display: flex; }
.work-view-toggle svg { display: block; }
.work-view-toggle button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ---------- @멘션 칩 ---------- */
.mention-chips { flex-basis: 100%; gap: 6px; }
.mention-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; min-height: 30px; color: var(--ink-2); flex-shrink: 0; white-space: nowrap; }
.mention-chip:hover { border-color: var(--ink); color: var(--ink); }
.mention-chip span { white-space: nowrap; }

/* ---------- 메일 ---------- */
.mail { display: flex; width: 100%; min-height: 0; flex-grow: 1; }
.mail-list { width: 400px; flex-shrink: 0; padding: 24px 16px 24px 32px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--line); overflow: auto; }
.mail-list-head h1 { font-size: 26px; }
.mail-list .select { height: 46px; font-size: 15px; }
.mail-list .row .input { height: 42px; }
.mail-list .row .btn { height: 42px; padding: 0 14px; }
/* 편지함 아래로 당겨서 새로고침 — .mail-list(=스크롤 컨테이너) 맨 앞에 끼워 넣어, 높이가 커지면서
   나머지 목록을 자연스럽게 밀어내리는 방식으로 당김을 표현한다. 모바일에서만 동작(attachPullToRefresh
   가 isMobile() 아니면 아예 붙이지 않음)하므로 데스크톱에서는 height:0 인 채로 아무 영향이 없다. */
.ptr-indicator { display: flex; align-items: center; justify-content: center; gap: 7px; height: 0; overflow: hidden; flex-shrink: 0; color: var(--muted); font-size: 12px; }
.ptr-indicator.animate { transition: height .18s ease; }
.ptr-indicator.ready { color: var(--decide); }
.ptr-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--muted); flex-shrink: 0; }
.ptr-indicator.ready .ptr-spin { border-top-color: var(--decide); }
.ptr-indicator.spin .ptr-spin { border-top-color: var(--decide); animation: ptr-rot .6s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }
.mail-threads { display: flex; flex-direction: column; gap: 6px; }
.mail-item { text-align: left; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.mail-item.active { border: 2px solid var(--decide); padding: 11px 13px; }
.mail-item .top { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); min-width: 0; }
.mail-item .from { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mail-item .cnt { font-family: var(--mono); font-size: 11px; background: var(--nav-bg); padding: 0 6px; border-radius: 6px; flex-shrink: 0; }
.mail-item .date { flex-shrink: 0; font-family: var(--mono); font-size: 11px; }
.mail-item .subj { font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
.mail-item.unread .subj, .mail-item.unread .from { font-weight: 700; color: var(--ink); }
.mail-item.skel { gap: 8px; }
.sk { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--nav-bg) 25%, var(--line) 37%, var(--nav-bg) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; }
.sk-from { width: 88px; height: 11px; }
.sk-date { width: 40px; height: 11px; margin-left: auto; }
.sk-subj { width: 70%; height: 13px; margin-top: 2px; }
.sk-snip { width: 92%; height: 11px; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.mail-item .snip { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mail-main { flex-grow: 1; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.mail-thread { padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; max-width: 900px; width: 100%; }
.mail-thread-head { display: flex; flex-direction: column; gap: 8px; }
.mail-thread-head h2 { font-size: 22px; }
.mail-task { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-color: var(--decide); }
.mail-task .select, .mail-task input[type=date] { width: auto; min-width: 120px; }
.mail-msgs { display: flex; flex-direction: column; gap: 12px; }
.mail-msg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mail-msg .mh { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.mail-msg .mh .grow { min-width: 0; flex-grow: 1; word-break: break-all; }
.mail-msg .mb { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.mail-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-atts .att { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px 4px 4px; }
.file-ico.sm { width: 22px; height: 26px; font-size: 7px; padding-bottom: 2px; }

/* ---------- 캘린더 ---------- */
.cal { display: flex; width: 100%; min-height: 0; flex-grow: 1; }
.cal-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 24px 32px; overflow: auto; }
.cal-mtabs { display: none; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-title { font-size: 22px; margin: 0 6px; }
.cal-head .btn.ghost { width: 36px; padding: 0; font-size: 20px; }
.ev-bar { display: flex; align-items: baseline; gap: 5px; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 3px 8px; font-size: 12px; line-height: 1.35; color: var(--ink); min-height: 24px; overflow: hidden; }
.ev-bar:hover { filter: brightness(.95); }
.ev-bar .ev-time { font-family: var(--mono); font-size: 11px; color: var(--ink-2); flex-shrink: 0; }
.ev-bar .ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-grow: 1; }
.ev-bar .ev-acct { font-size: 10px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 4px; flex-shrink: 0; }
.ev-bar.cancelled .ev-title, .ev-bar.declined .ev-title { text-decoration: line-through; color: var(--muted); }
.ev-more { border: 0; background: transparent; font-size: 12px; font-weight: 700; color: var(--decide); text-align: left; padding: 2px 6px; min-height: 24px; }
/* 월 */
.cal-month { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cal-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-wd div { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-wd div.we { color: var(--urgent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(112px, auto); }
.cal-cell { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: pointer; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.weekend { background: var(--bg-2); }
.cal-cell.other { color: var(--muted); }
.cal-cell.other .ev-bar { opacity: .6; }
.cal-cell:hover { background: var(--bg); }
.cal-daynum { display: flex; justify-content: flex-start; }
.daynum { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 600; padding: 0; color: inherit; }
.cal-cell.today .daynum { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--decide); }
.cal-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* 시간 그리드 */
.tg-days { display: flex; }
.tg-gutter-lbl { width: 56px; flex-shrink: 0; font-size: 11px; color: var(--muted); padding: 6px 4px; text-align: right; }
.tg-cols { display: grid; flex-grow: 1; min-width: 0; }
.tg-day { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--ink); }
.tg-day .wd { font-size: 11px; color: var(--muted); font-weight: 600; }
.tg-day .dn { font-size: 18px; font-weight: 700; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tg-day.weekend .wd { color: var(--urgent); }
.tg-day.today .dn { background: var(--ink); color: var(--on-ink); }
.tg-allday { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); min-height: 34px; }
.tg-allday-col { padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--line-2); min-width: 0; cursor: pointer; }
.cal-scroll { overflow: auto; flex-grow: 1; min-height: 0; max-height: 70vh; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--panel); }
.tg { display: flex; min-height: var(--tg-h); padding-top: 8px; }
.tg-gutter { width: 56px; flex-shrink: 0; position: relative; }
.tg-hour { height: 48px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.tg-col { position: relative; height: var(--tg-h); border-left: 1px solid var(--line-2); min-width: 0; cursor: pointer; }
.tg-col.weekend { background: var(--bg-2); }
.tg-col.today { background: var(--decide-bg); background: color-mix(in srgb, var(--decide-bg) 35%, transparent); }
.tg-line { height: 48px; border-top: 1px solid var(--line-2); box-sizing: border-box; }
.tg-ev { position: absolute; border: 0; border-radius: 6px; padding: 3px 8px; text-align: left; font-size: 12px; line-height: 1.3; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 1px 2px var(--shadow); }
.tg-ev .ev-time { font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.tg-ev .ev-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev .ev-loc { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-ev.narrow .ev-loc { display: none; }
.tg-ev:hover { filter: brightness(.95); z-index: 2; }
.tg-ev.cancelled .ev-title { text-decoration: line-through; color: var(--muted); }
.tg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--urgent); z-index: 3; pointer-events: none; }
.tg-now::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--urgent); }
.cal-week, .cal-day-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.cal-week .cal-scroll, .cal-day-grid .cal-scroll { border: 0; }
/* 일 */
.cal-day { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.cal-day-list { display: flex; flex-direction: column; gap: 8px; }
/* 목록 */
.cal-agenda { display: flex; flex-direction: column; gap: 14px; }
.ag-day { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.ag-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); }
.ag-head .dn { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); }
.ag-day.today .ag-head .dn { color: var(--decide); }
.ag-list { display: flex; flex-direction: column; gap: 6px; }
.ag-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 8px 12px; color: var(--ink); }
.ag-time { font-family: var(--mono); font-size: 12px; color: var(--ink-2); width: 92px; flex-shrink: 0; }
.ag-body { min-width: 0; flex-grow: 1; }
.ag-title { font-weight: 600; font-size: 14px; }
/* 일정 상세/폼 */
.ev-dialog { width: min(640px, 92vw); height: auto; max-height: 90vh; }
.ev-body { flex-direction: column; gap: 12px; padding: 18px 20px; overflow: auto; background: var(--panel); }
.ev-when { font-size: 15px; font-weight: 600; }
.ev-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ev-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ev-att { display: flex; flex-direction: column; gap: 2px; }
/* 할 일 */
.cal-tasks { position: relative; width: 320px; flex-shrink: 0; border-left: 1px solid var(--line); padding: 20px 32px 24px 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; transition: width .15s ease, padding .15s ease; }
.cal-tasks.collapsed { width: 20px; min-width: 20px; padding: 20px 0; border-left: 1px solid var(--line); overflow: visible; gap: 0; }
/* 예전엔 패널 위쪽 가운데에 떠 있는 동그란 버튼이라 위치도 어색하고 콘텐츠 위에 겹쳐 보였다 —
   경계선에 붙는 세로로 긴 핸들 형태로 바꿔서 "여기를 당기면 접힌다"는 느낌을 준다.
   .cal-tasks 자체가 overflow:auto 라 절반이 바깥으로 나가는 배치(음수 left)는 스크롤 클리핑에
   잘려 안 보이므로, 경계선 바로 안쪽에 딱 붙여 전체가 항상 보이게 한다. */
.cal-tasks-toggle { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 56px; border-radius: 0 8px 8px 0; border: 1px solid var(--line-strong); border-left: none; background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 2px 0 6px var(--shadow); z-index: 3; font-size: 12px; line-height: 1; padding: 0; flex-shrink: 0; }
.cal-tasks-toggle:hover { background: var(--nav-bg); }
.gt-add { display: flex; flex-direction: column; gap: 6px; }
.gt-add .input, .gt-add .select { height: 38px; border-radius: 10px; }
.gt-add input[type=date] { width: auto; flex-grow: 1; }
.gt-group { display: flex; flex-direction: column; gap: 4px; }
.gt-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.gt-item:last-child { border-bottom: 0; }
.gt-item input[type=checkbox] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--review); flex-shrink: 0; }
.gt-body { border: 0; background: transparent; text-align: left; flex-grow: 1; min-width: 0; padding: 0; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.gt-title { font-size: 13px; font-weight: 500; }
.gt-item.done .gt-title { text-decoration: line-through; color: var(--muted); }
.gt-body .due { font-size: 12px; }

/* ---------- 팀 ---------- */
.team { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 24px; width: 100%; overflow: auto; flex-grow: 1; min-height: 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.team-head h1 { font-size: 26px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.staff-card { position: relative; padding: 16px; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; }
.staff-card.active { border: 2px solid var(--ink); padding: 15px; }
.staff-card .nm { font-weight: 700; }
.staff-card .sub { font-size: 12px; color: var(--muted); }
.staff-card .st { font-size: 12px; }
.staff-card .st b { font-weight: 600; }
.staff-card .type-chip { position: absolute; top: 10px; right: 10px; }
.badge.type-ai { color: var(--decide); background: var(--decide-bg); }
.badge.type-human { color: var(--plan); background: var(--plan-bg); }
.person-card-mini { background: var(--bg-2); border-style: dashed; }
.person-card-mini.active { border: 2px solid var(--plan); padding: 15px; border-style: solid; }
.team-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.team-detail .card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.team-detail h2 { font-size: 14px; }
.team-detail .select { width: auto; min-width: 120px; height: 36px; border-radius: 8px; }
.hist { display: flex; gap: 12px; font-size: 13px; }
.hist .d { font-family: var(--mono); color: var(--muted); font-size: 12px; width: 44px; flex-shrink: 0; }
.incident { padding: 8px 2px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.incident:last-child { border-bottom: 0; padding-bottom: 0; }
.incident .ih { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.incident .ih span:first-child { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; }
.incident .ih span:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--urgent); margin-right: 7px; flex-shrink: 0; }
.incident .ih span:last-child { font-family: var(--mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }
.incident .ib { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; padding-left: 13px; }
.staff-form { grid-column: 1 / -1; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.staff-form h2 { font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label, .field > .lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.field .input, .field .select { height: 40px; border-radius: 10px; }
.team-detail .field .select { width: 100%; min-width: 0; height: 40px; border-radius: 10px; }
.field .textarea { min-height: 96px; }
.field .textarea.mono { min-height: 200px; font-family: var(--mono); font-size: 12px; }
.stats-block { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 4px 0 0; }
.radar-box { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.radar-ovr { font-size: 13px; color: var(--ink-2); }
.radar-ovr b { font-size: 18px; color: var(--ink); }
.stats-sliders { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 200px; }
.stats-sliders .kv { padding: 2px 0; border-bottom: 0; align-items: center; }
.stats-sliders input[type=range] { flex-grow: 1; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px 14px; min-height: 40px; justify-items: start; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 32px; cursor: pointer; }
/* 검수자처럼 체크박스가 여러 개라 길어지는 항목 — 접었다 펼 수 있는 드롭다운으로 감싼다.
   접혀 있으면 고른 이름(없으면 안내 문구)을, 펼치면 체크박스 목록을 보여준다. */
.dropdown-check { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.dropdown-check > summary { list-style: none; cursor: pointer; height: 40px; padding: 0 12px; display: flex; align-items: center; font-size: 13px; color: var(--ink); }
.dropdown-check > summary::-webkit-details-marker { display: none; }
.dropdown-check > summary::before { content: '▸'; margin-right: 8px; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.dropdown-check[open] > summary::before { content: '▾'; }
.dropdown-check[open] > summary { border-bottom: 1px solid var(--line); }
.dropdown-check > .checks { padding: 10px 12px; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--decide); flex-shrink: 0; }
.color { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); cursor: pointer; flex-shrink: 0; }
.field .row { justify-content: flex-start; }
.note { background: var(--confirm-bg); color: var(--confirm); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.note code { font-family: var(--mono); }

/* ---------- 사람 (동료·거래처) ---------- */
.people-section { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; border-top: 1px solid var(--line); }
.people-section h2 { font-size: 20px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.person-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; text-align: left; width: 100%; background: var(--bg-2); border-style: dashed; }
.person-card.active { border: 2px solid var(--plan); padding: 13px 15px; border-style: solid; }
.person-card .nm { font-weight: 700; }
.person-card .sub { font-size: 12px; color: var(--ink-2); }
.person-card .emails { color: var(--decide); word-break: break-all; }
.person-card .notes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge.rel { color: var(--plan); background: var(--plan-bg); }
.person-form { grid-column: 1 / -1; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.person-form h3 { font-size: 14px; }

/* ---------- 라운지 ---------- */
.lounge { display: flex; flex-direction: column; width: 100%; min-height: 0; flex-grow: 1; }
.lounge .thread-head { padding-left: 32px; padding-right: 32px; }
.lounge .thread { padding: 20px 32px; }
.lounge .thread-input { padding-left: 32px; padding-right: 32px; }
.lounge-tabs { display: flex; align-items: center; gap: 6px; padding: 12px 32px 0; overflow-x: auto; flex-shrink: 0; scrollbar-width: thin; }
.lounge-tab { position: relative; flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lounge-tab:hover { background: var(--nav-bg); }
.lounge-tab.active { background: var(--decide); color: #fff; border-color: var(--decide); }
.lounge-tab.add { border-style: dashed; color: var(--muted); }
.lounge-tab-sep { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.lounge-tab .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--urgent); flex-shrink: 0; }
.lounge-tab .ch-del { margin-left: 2px; border: 0; background: transparent; color: inherit; opacity: .6; font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; }
.lounge-tab .ch-del:hover { opacity: 1; }
.tts-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.tts-btn:hover { background: var(--nav-bg); color: var(--ink); }
.tts-btn.loading { opacity: .5; cursor: wait; }
/* 아이콘을 감싼 <span> 과 그 안의 <svg> 가 둘 다 기본값(inline)이면, 인라인 요소 특유의
   디센더(글자 아래 여백) 때문에 flex 로 가운데 정렬해도 원 안에서 살짝 아래/옆으로 치우쳐 보인다
   — "눌렀을 때 원 안에 정가운데가 아니다"라는 지적의 원인. span 도 svg 도 block 으로 만들어 그
   여백 자체를 없앤다(다른 icon-btn 들에 이미 적용된 것과 같은 방식). */
.tts-btn span { display: flex; align-items: center; justify-content: center; }
.tts-btn svg { display: block; flex-shrink: 0; }
/* 방금 보낸 "끼어들기"를 아직 안 봤을 때만 뜨는 고치기(연필)/취소(×) — 클로드 코드의 이전 메시지
   수정과 같은 개념. 보낸 걸 바로 고칠 수 있어서 "아 잘못 보냈다" 순간의 스트레스를 줄여준다. */
.msg-edit-btn, .msg-cancel-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; font-size: 15px; line-height: 1; }
.msg-edit-btn:hover, .msg-cancel-btn:hover { background: var(--nav-bg); color: var(--ink); }
.msg-cancel-btn:hover { color: var(--reject, #c0392b); }
/* 메시지 반응(슬랙 스타일 이모지) — .who 줄에 작은 웃는 얼굴 버튼, 누르면 말풍선 밑에 빠른
   이모지 선택 줄이 뜨고, 실제로 반응이 달리면 그 자리에 이모지+숫자 알약(pill)이 붙는다. */
.msg-react-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.msg-react-btn:hover { background: var(--nav-bg); color: var(--ink); }
/* 스피커 버튼과 같은 인라인 여백 문제로 웃는 얼굴 아이콘이 이름 줄보다 살짝 위로 떠 보였다 —
   .who 줄의 아이콘 버튼 전체에서 span/svg 를 block 으로 만들어 이름·시간 글자와 중심선을 맞춘다. */
.msg .who button > span { display: flex; align-items: center; justify-content: center; }
.msg .who button svg { display: block; flex-shrink: 0; }
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; }
.reaction-pill:hover { border-color: var(--decide); }
.reaction-pill.mine { border-color: var(--decide); background: color-mix(in srgb, var(--decide) 12%, var(--bg-2)); }
.reaction-count { font-size: 11px; color: var(--muted); }
.reaction-picker { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); width: fit-content; animation: typing-live-fade-in .15s ease; }
.reaction-picker-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 0; background: transparent; font-size: 16px; cursor: pointer; }
.reaction-picker-btn:hover { background: var(--nav-bg); }
.reaction-picker-more { font-size: 13px; opacity: .7; }
/* 길게 누르기(카카오톡 스타일) 메시지 메뉴 — 복사/답장/음성 재생/구간 선택 */
.msg-menu { position: fixed; z-index: 60; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.25); overflow: hidden; padding: 4px; animation: typing-live-fade-in .12s ease; }
.msg-menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: transparent; color: var(--ink); font-size: 14px; border-radius: 8px; cursor: pointer; }
.msg-menu-item.danger { color: var(--urgent); }
.msg-menu-item:hover { background: var(--nav-bg); }
/* 답장 미리보기 — 입력창 바로 위에 뜨는 작은 인용 줄 */
.reply-preview { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 6px; background: var(--bg-2); border-radius: 8px; font-size: 12px; flex-basis: 100%; order: -1; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.reply-preview-label { font-weight: 600; color: var(--decide); flex-shrink: 0; }
.reply-preview-snippet { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
.reply-preview-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; flex-shrink: 0; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
/* 대화 구간 TTS 재생 — 카카오톡 "캡처"처럼 시작~끝 두 번 선택 */
.msg.tts-range-selected .bubble, .msg.tts-range-selected .who { outline: 2px dashed var(--decide); outline-offset: 3px; border-radius: 12px; }
.msg.tts-playing .bubble { box-shadow: 0 0 0 2px var(--decide) inset; }
.tts-overlay-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--decide); color: #fff; font-size: 13px; border-radius: 0 0 10px 10px; }
.tts-overlay-bar .btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
.tts-overlay-bar .btn.primary { background: #fff; color: var(--decide); }
/* 재생 중(.playing) 배경은 --ink 를 쓰는데, --ink 는 "글자색"으로 정의돼 있어 다크 테마에서는
   밝은색이다 — 그 위에 그대로 흰 글자(#fff)를 얹으면 밝은 배경에 밝은 글자라 거의 안 보였다.
   --ink 위에 얹을 글자색은 --on-ink 가 맞는 짝이므로 이 상태만 따로 덮어쓴다. */
.tts-overlay-bar.playing { background: var(--ink); color: var(--on-ink); }
.tts-overlay-bar.playing .btn { background: color-mix(in srgb, var(--on-ink) 15%, transparent); color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 30%, transparent); }
.tts-overlay-bar.playing .btn.primary { background: var(--on-ink); color: var(--ink); }
.msg-edit-wrap { width: 100%; max-width: 680px; }
.msg-edit-ta { width: 100%; }
/* 업무 화면 typing-bubble 안의 중단(정지 아이콘) 버튼 — 클로드 코드에서 응답 생성 중 정지 버튼처럼,
   보낸 뒤에도 언제든 멈출 수 있게 한다. */
.typing-stop-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--nav-bg); color: var(--muted); cursor: pointer; flex-shrink: 0; }
.typing-stop-btn:hover { background: var(--reject, #c0392b); color: #fff; }

/* 라운지: 검색 / 날짜 이동 / 맨 아래로 */
.icon-btn.active { background: var(--decide); color: #fff; border-color: var(--decide); }
/* 모든 아이콘 버튼: 아이콘을 감싼 span/svg 를 block 으로 만들어 원 정중앙에 오게 하고, 좁은 줄에서
   버튼이 눌려도 아이콘이 쪼그라들지 않게 한다. */
.icon-btn > span { display: flex; align-items: center; justify-content: center; }
.icon-btn svg { display: block; flex-shrink: 0; }
/* 책상 상세의 답변 줄(메모 입력 · 첨부 + · 메모로 지시): 첨부 버튼은 입력칸 높이와 같은 정원형. */
.answer-area .row > .icon-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.answer-area .row > .icon-btn svg { width: 20px; height: 20px; }
.lounge-cal-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 260px; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px var(--shadow); padding: 6px; }
.lounge-cal-day { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.lounge-cal-day:hover { background: var(--nav-bg); }
.lounge-search-bar { display: flex; flex-direction: column; gap: 6px; padding: 10px 32px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-shrink: 0; }
.lounge-search-bar .input { width: 100%; }
.lounge-search-hits { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.lounge-search-hit { text-align: left; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; }
.lounge-search-hit:hover { background: var(--nav-bg); }
.msg.search-hit .bubble { outline: 2px solid var(--decide); outline-offset: 2px; }
.msg.flash .bubble { animation: msgflash 1.2s ease; }
@keyframes msgflash { 0%, 100% { background: var(--panel); } 30% { background: var(--decide-2, #ffe8a3); } }
.jump-latest-btn { display: none; align-items: center; justify-content: center; gap: 4px; position: absolute; right: 20px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: 0 4px 14px var(--shadow); cursor: pointer; font-size: 16px; z-index: 5; }
.jump-latest-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--urgent); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* 비공개 DM 마스크 아이콘: 평소엔 거의 안 보이게, hover/active 일 때만 또렷해진다 */
.secret-mask { opacity: .35; }
.secret-mask:hover, .secret-mask.active { opacity: 1; }

/* ---------- 설정 ---------- */
.settings { padding: 28px 32px 24px; width: 100%; max-width: 1440px; margin: 0 auto; overflow: auto; display: flex; flex-direction: column; gap: 20px; flex-grow: 1; min-height: 0; }
.settings-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; touch-action: pan-x; }
.settings-tabs button { white-space: nowrap; }
.settings h1 { font-size: 26px; }
/* auto-fit: 카드가 1개뿐이거나 넓은 화면이면 남는 칸을 안 남기고 그대로 늘어난다 (fixed 2열이면
   카드가 하나뿐인 탭에서 오른쪽 절반이 통째로 비어 보이는 문제가 있었음). */
/* 같은 줄의 카드는 그 줄에서 가장 높은 카드에 높이를 맞춘다(stretch). */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: stretch; }
.settings .card { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-width: 100%; min-width: 0; }
.settings .card h2 { font-size: 14px; }
.settings .card.wide { grid-column: 1 / -1; }
/* 연동 탭 요약 카드 — 서비스마다 내용 길이가 크게 달라(Google 계정 표 vs TTS 키 하나) 화면이
   들쭉날쭉하던 걸 정리: 아이콘·이름·상태·버튼 하나뿐인 같은 높이 카드로만 보여주고, 실제 설정은
   "설정" 버튼을 눌러 우측 드로어에서 편집한다. */
.settings .card.integ-summary { min-height: 132px; justify-content: space-between; }
.settings .card.integ-summary h2 { margin: 0; }
.settings .kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 일정 카드: 필드를 2열로 배치해서 스크롤을 줄인다. 저장 버튼은 카드 헤더로 옮겨서 항상 보이게. */
/* minmax(0,1fr) 이 아니라 그냥 1fr 이면(구 버전) 트랙의 최소 폭이 "auto"(내용 기준)로 잡혀서,
   내용이 넓은 셀(예: 활동 시간의 두 time input) 하나가 카드보다 넓어지면 트랙이 억지로 늘어나
   카드 밖으로 삐져나갔다 — 카드를 3개로 쪼개 폭이 좁아지면서 전에는 안 보이던 게 드러났다. */
/* 예전엔 라벨(고정 108px) 옆에 값(input 은 기본 width:100%)을 나란히 놓으려 했는데, 카드를
   2열로 쪼갠 뒤로는 셀 폭이 좁아 라벨+값이 한 줄에 못 들어가는 경우가 많아 flex-wrap 때문에
   값이 다음 줄로 떨어졌다 — 그런데 체크박스처럼 좁은 값은 그대로 한 줄에 남아서, 어떤 행은
   "라벨: 값"이 한 줄이고 어떤 행은 라벨 밑에 큼직한 입력칸이 떨어지는 등 행마다 배치가 들쭉날쭉해
   엉성해 보였다. 라벨을 필드 캡션처럼 값 위에 작게 얹는 세로 배치로 전부 통일해 타이트하게
   정리하고, 체크박스처럼 원래 한 줄이 자연스러운 값만 예외로 가로 배치(라벨 옆 체크박스)를 쓴다. */
.kv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
/* 아이폰 사파리에서 input[type=time]이 오전/오후 표기 때문에 내부 렌더링 폭이 박스 지정 폭을
   무시하고 오른쪽으로 살짝 삐져나가는 경우가 있다(iOS 자체 렌더링 버그 — 크롬/데스크톱에선
   재현 안 됨) — 실제 탭 영역(입력 요소 자체)은 그대로 두고, 화면에만 넘치는 부분을 보이지
   않게 이 줄(row) 단위로 잘라낸다(네이티브 select 드롭다운 팝업은 별도 레이어라 안 잘린다). */
.kv-grid > .kv { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; min-width: 0; overflow: hidden; }
.kv-grid > .kv > label, .kv-grid > .kv > span:first-child { flex: 0 0 auto; min-width: 0; color: var(--muted); font-size: 12.5px; }
.kv-grid > .kv > *:last-child { margin-left: 0; width: 100%; min-width: 0; }
.kv-grid > .kv > .row:last-child { flex-wrap: nowrap; justify-content: flex-start; width: 100%; }
.kv-grid > .kv > .row:last-child > * { min-width: 0; }
.kv-grid > .kv > .row:last-child > .input { flex: 1 1 0; }
/* 체크박스 하나뿐인 행(무작위 간격·주말에도)은 세로로 쌓으면 라벨과 체크박스 사이만 휑하게
   비어 더 어색하다 — 라벨 옆에 바로 붙는 한 줄 배치를 그대로 유지한다. */
.kv-grid > .kv:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; align-self: end; min-height: 36px; }
.kv-grid > .kv:has(> input[type="checkbox"]) > *:last-child { margin-left: auto; width: auto; }
@media (max-width: 899px) {
  .kv-grid { grid-template-columns: 1fr; }
}
.status-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: center; flex-wrap: wrap; }
.status-row .ok { color: var(--review); font-weight: 700; }
.status-row .no { color: var(--urgent); font-weight: 700; }
/* 연동 "연결 테스트" 결과 배너 — 작은 회색 글씨 한 줄로 묻혀서 안 보인다는 지적으로 확실한
   색 배경 배너로 바꿨다. */
.test-result-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.test-result-banner.ok { background: var(--review-bg); color: var(--review); }
.test-result-banner.fail { background: var(--urgent-bg); color: var(--urgent); }
.test-result-banner .trb-icon { font-size: 16px; font-weight: 800; }
.test-result-banner .trb-detail { font-weight: 500; opacity: .85; }
.status-row code { font-family: var(--mono); font-size: 12px; background: var(--nav-bg); padding: 2px 6px; border-radius: 4px; }
.node-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.node-row:last-child { border-bottom: 0; }
.node-row .grow { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.node-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex-shrink: 0; }
.node-row .dot.on { background: var(--review); }
.node-row code { font-size: 12px; background: var(--nav-bg); padding: 1px 5px; border-radius: 4px; }
.settings input[type=time], .settings input[type=number] { width: 130px; height: 36px; border-radius: 8px; }
.settings .card .input[type=password], .settings .card .input[type=url], .settings .card .input[type=email], .settings .card .input[type=text] { height: 40px; border-radius: 10px; }
.settings table.ledger td .btn.sm { height: 32px; }
.settings input[type=radio], .settings input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--decide); }
.settings input[type=file] { height: auto; padding: 8px 10px; font-size: 12px; flex: 1 1 200px; width: auto; }
.people-text { font-family: var(--mono); font-size: 12px; min-height: 180px; }
.upd-log { font-size: 11px; background: var(--nav-bg); padding: 10px 12px; border-radius: 8px; margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.upload-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--nav-bg); overflow: hidden; }
.upload-progress-bar { height: 100%; border-radius: 999px; background: var(--decide, #3b82f6); transition: width .15s ease; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.count { background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.count .n { font-family: var(--serif); font-size: 24px; font-weight: 700; }
.count .l { font-size: 12px; color: var(--muted); }
table.ledger { border-collapse: collapse; width: 100%; font-size: 13px; }
table.ledger th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.ledger td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.ledger td .btn { height: 32px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
table.ledger tr.done td, table.ledger tr.ignored td { color: var(--muted); }
/* 모바일: 원장 표는 6칸이 좁은 화면에 눌려 "상태"·"열림" 같은 글자가 한 글자씩 꺾였다 —
   한 건을 작은 카드(윗줄 종류·제목·상태, 아랫줄 출처·기한, 맨 아래 버튼)로 다시 배치한다. */
@media (max-width: 899px) {
  .settings table.ledger, .settings table.ledger tbody { display: block; width: 100%; }
  .settings table.ledger thead { display: none; }
  .settings table.ledger tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
  .settings table.ledger td { padding: 0; border: 0; }
  .settings table.ledger td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .settings table.ledger td:nth-child(2) { grid-column: 2; grid-row: 1; font-weight: 600; }
  .settings table.ledger td:nth-child(5) { grid-column: 3; grid-row: 1; white-space: nowrap; }
  .settings table.ledger td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .settings table.ledger td:nth-child(4) { grid-column: 3; grid-row: 2; white-space: nowrap; text-align: right; }
  .settings table.ledger td:nth-child(6) { grid-column: 1 / -1; grid-row: 3; }
  .settings table.ledger td:nth-child(3):empty, .settings table.ledger td:nth-child(4):empty { display: none; }
}
table.ledger tr.done td.t { text-decoration: line-through; }

/* ---------- mobile ---------- */
.back-btn { display: none; }
.work-mtabs { display: none; }
@media (max-width: 899px) {
  .header { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); height: calc(56px + env(safe-area-inset-top)); }
  .nav { display: none; }
  .usage .lbl { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); z-index: 30; padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; letter-spacing: -0.02em; color: var(--muted); min-height: 44px; }
  .tabbar a svg { width: 20px; height: 20px; flex-shrink: 0; }
  .tabbar a span { line-height: 1; }
  .tabbar a.active { color: var(--decide); font-weight: 700; }
  #app { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .screen { flex-direction: column; }

  /* 모바일: 데스크톱처럼 3개 열이 각각 스크롤하는 대신, .desk 전체가 하나로 스크롤되는 세로 목록 —
     책상 지시창(.desk-compose)이 맨 위에 항상 보이도록(renderDesk() 에서 모바일일 때 컴포저를
     .desk 최상위 자식으로 큐보다 먼저 그린다) flex-grow/shrink 를 껐다.
     예전엔 "업무 중인 직원"(desk-side)을 요청 목록(desk-queue)보다 먼저 보이도록 순서를 올렸었지만,
     그래도 요청이 많으면 여전히 스크롤을 많이 해야 했고 좌우 폭도 못 썼다(우측이 빔). 그래서
     desk-side 는 기본 화면에서 아예 빼고, 하단 고정 FAB(desk-side-fab)를 눌러야 열리는
     바텀시트(desk-side, position:fixed)로 바꿨다 — 기본 화면은 "오늘 판단이 필요한 일"(desk-queue)이
     전체 폭을 그대로 쓰는 메인 콘텐츠가 된다. */
  /* 2.1.24: 지시창을 하단 탭바 바로 위에 고정하고 카드 목록(.desk-queue)만 스크롤한다.
     .desk 자체는 스크롤하지 않는다. */
  .desk { flex-direction: column; overflow: hidden; position: relative; }
  .desk-main-wrap { flex: 0 0 auto !important; }
  .desk-main:empty { display: none; }
  .desk-main { padding: 12px 16px 16px; flex-grow: 0; flex-shrink: 0; overflow: visible; }
  /* 모바일에서는 책상 가운데 영역도 내부 스크롤 없이 페이지와 함께 흐른다 — "맨 아래로" 버튼은
     내부 스크롤이 있는 데스크톱 레이아웃 전용. (업무 화면의 대화창(.work .thread)은 모바일에서도
     여전히 자체 스크롤 영역이라 — 헤더·입력창은 고정, 대화만 스크롤 — 여기서 같이 숨기면 안 된다:
     전엔 이 규칙에 같이 묶여 있어서 모바일 업무 화면엔 "맨 아래로" 버튼이 아예 안 뜨는 버그였다.) */
  #desk-main-scroll ~ .jump-latest-btn { display: none !important; }
  /* 프롬프트 입력창과 바로 아래 카드가 붙어 보이던 문제 — 데스크톱과 같은 간격을 모바일에서도 준다. */
  /* 컴포저가 이제 .desk-queue 안이 아니라 .desk 바로 아래 최상위 자식이라(위 참고), .desk-queue 가
     주던 좌우 16px 여백을 더 이상 못 물려받는다 — 아래 카드 목록과 같은 폭이 되도록 직접 준다. */
  .desk-compose { max-width: none; margin: 0; padding: 8px 12px 10px; box-sizing: border-box; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--bg); }
  .desk-compose .newtask { padding: 10px 12px 8px; border-radius: 18px; }
  .desk-compose .newtask-toolbar { gap: 6px; }
  .staff-now-btn { position: relative; margin-left: auto; }
  .staff-now-btn .badge-dot { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--urgent); color: #fff; font-size: 9.5px; font-weight: 700; line-height: 15px; font-variant-numeric: tabular-nums; box-sizing: border-box; text-align: center; }
  .desk-queue { width: 100%; padding: 16px 16px 16px; flex: 1 1 auto; min-height: 0; overflow: auto; box-sizing: border-box; }
  .desk-queue h1 { font-size: 22px; }
  /* 좌우 스와이프 캐러셀로 바꿨다가("판단이 필요한 일" 카드가 잘리고 좌우 여백도 0이 돼서) 다시
     원래의 세로 목록으로 되돌렸다 — .req-list/.req-card 는 위 데스크톱 규칙(세로 flex, width:100%)을
     모바일에서도 그대로 쓴다. 좌우 여백은 .desk-queue 의 padding(16px)으로만 준다. */

  /* "업무 중인 직원 · 보고" 바텀시트 — 평소엔 숨겨두고 FAB 로만 연다 */
  .desk-side { display: none; }
  .desk-side-head { display: none; }
  .desk-side-fab { display: flex; }
  /* resizableSideHandle() 이 데스크톱 폭 조절을 위해 side 엘리먼트에 인라인 style.width(예: 320px)를
     직접 박아두기 때문에, 모바일 바텀시트에서는 그보다 우선순위가 높은 !important 로 폭을 되찾는다. */
  body.desk-side-open .desk-side {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    width: auto !important; max-height: 78vh; border-left: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px var(--shadow); background: var(--panel);
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
    box-sizing: border-box; gap: 16px;
  }
  body.desk-side-open .desk-side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 2px; flex-shrink: 0; }
  body.desk-side-open .desk-side-head h3 { font-size: 16px; }
  body.desk-side-open .desk-side-fab { display: none; }
  .desk-side-backdrop { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.35); }

  .desk-side-fab {
    align-items: center; gap: 6px; position: fixed; right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 25;
    height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600;
    box-shadow: 0 4px 14px var(--shadow); cursor: pointer;
  }
  .desk-side-fab svg { width: 16px; height: 16px; flex-shrink: 0; }
  .desk-side-fab .badge-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--urgent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; font-variant-numeric: tabular-nums; }
  .detail { padding: 18px 16px; }
  .detail h2 { font-size: 21px; }
  .options { grid-template-columns: 1fr; }
  /* height: 100vh 는 소프트 키보드가 떠도 안 줄어드는 레이아웃 뷰포트 기준이라, 화면에 고정된
     다이얼로그/패널 안의 입력창이 키보드에 가려지는 문제가 있었다 — app.js 의 visualViewport
     리스너가 실제 보이는 높이를 --vvh 로 갱신해주므로, 그 값이 있으면 그걸 쓰고 없으면 100vh. */
  .dialog { width: 100vw; height: var(--vvh, 100vh); max-width: none; border-radius: 0; border: 0; }
  /* .dialog.max { height: 100vh } (전역 규칙, 클래스 2개라 특이도가 더 높음)가 바로 위 .dialog
     규칙(클래스 1개)을 소스 순서와 무관하게 항상 이겨버려서, 파일 미리보기처럼 모바일에서 항상
     .max 가 붙는 다이얼로그는 실제로는 이 --vvh 보정을 한 번도 받지 못하고 있었다 — 그래서 바로
     아래 주석이 설명하는 "상단이 잘려 보인다"는 버그가 고쳤다고 생각한 뒤에도 계속 남아 있었다.
     .max 전용으로 한 번 더 못박아 특이도 문제를 없앤다. */
  .dialog.max { height: var(--vvh, 100vh); }
  /* .dialog 는 --vvh(visualViewport 실측값) 기준으로 높이가 줄었다 늘었다 하는데, 그걸 감싸는
     #modal .backdrop 은 position:fixed + inset:0 라 브라우저 상단 툴바(주소창)가 펼쳐져 있어도
     항상 "레이아웃 뷰포트"(더 큰 값) 기준으로 꽉 채워진다 — 그래서 툴바가 펼쳐진 상태로 파일
     미리보기를 열면 backdrop 이 dialog 보다 더 커서, 가운데 정렬(align-items:center) 때문에
     그 차이의 절반만큼 dialog 위·아래로 빈틈이 생기고 그 틈으로 뒤 화면이 살짝 비쳐 보였다 —
     "미리보기 상단이 조금 잘려 보인다"던 버그. backdrop 도 같은 --vvh 를 쓰게 맞춰서 항상 정확히
     겹치게 한다. */
  #modal .backdrop { padding: 0; height: var(--vvh, 100vh); }
  .dlg-head { flex-wrap: wrap; padding-top: calc(10px + env(safe-area-inset-top) + 6px); padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  .dlg-head .name { flex-basis: 100%; order: -1; }
  .profile-dialog { width: 100vw; height: var(--vvh, 100vh); max-height: none; padding-top: env(safe-area-inset-top); }
  .boss-btn .lbl { display: none; }
  .boss-btn { padding: 3px; }
  #popover .pop-backdrop { background: rgba(0,0,0,.35); }
  .menu { top: auto; right: 0; left: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); }
  .menu-item { min-height: 46px; }
  .people-grid { grid-template-columns: 1fr; }
  /* full-screen detail panel */
  body.panel-open .desk-queue, body.panel-open .desk-side, body.panel-open .desk-side-fab { display: none; }
  /* display:block 으로 바꾼다 — 원래 .desk-main 은 flex column(3열 레이아웃의 가운데 칸)인데,
     전체화면 패널에서는 자식이 .detail 하나뿐이라 flex 로 둘 이유가 없다. 실제로 내용이 길면
     (검토 요청 본문이 화면 한 번보다 길 때) .detail 배경(패널색)이 중간에서 끊기고 그 아래
     내용이 배경 없는 바탕(desk-main 의 검은/어두운 background)에 얹혀 보이는 문제가 있었다 —
     고정 높이(height:var(--vvh)) flex 컨테이너 안에서 flex-grow 아이템의 min-height:auto 가
     내용 높이를 제대로 못 따라가는 경우가 있어서로 보인다. block 레이아웃이면 이 문제 자체가
     성립하지 않는다(박스는 항상 내용만큼 커진다). */
  body.panel-open .desk-main { display: block; position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100vh); z-index: 40; background: var(--bg); padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); overflow: auto; }
  body.panel-open .desk-compose { display: none; }
  body.panel-open .detail { display: block; border: 0; border-radius: 0; min-height: 100%; }
  /* block 으로 바꾸면서 flex gap(20px)이 사라져 본문·선택지·요약·답변 칸이 붙어 있었다 — 같은 간격을 margin 으로 준다. */
  body.panel-open .detail > * + * { margin-top: 20px; }
  body.panel-open #app { padding-bottom: 0; }
  /* 소프트 키보드가 떠 있는 동안엔 하단 탭바가 안 보이므로(키보드에 가려짐), 그 자리를 위해
     남겨뒀던 padding-bottom 이 입력창과 키보드 사이의 빈 공간으로 남는다 — app.js 가 키보드가
     떠 있음을 감지하면 body 에 kb-open 을 붙여서 이 여백을 없앤다. */
  body.kb-open #app { padding-bottom: 0; }
  /* 최신 iOS 는 키보드가 떠도 position:fixed 요소를 화면(visual viewport) 하단에 그대로 띄워두는
     경우가 있어, 하단 탭바가 키보드 위에 계속 떠 있으면서 정작 입력창(끼어들기 등)과 자리가
     겹쳐 입력창이 탭바에 가려 안 보이는 문제가 있었다 — 키보드가 떠 있는 동안은 탭바를 아예 숨긴다. */
  body.kb-open .tabbar { display: none; }
  /* 키보드 위에 탭바가 그대로 보이는 경우(kb-inline, app.js 참고): 홈 인디케이터용 하단 여백을 뺀다. */
  body.kb-inline .tabbar { height: 60px; padding-bottom: 0; }
  body.kb-inline #app { padding-bottom: 60px; }
  /* iOS 는 overflow:hidden 을 걸어도, 포커스된 입력창을 보여주려고 문서 자체를 슬쩍 스크롤시켜 버리는
     경우가 있다 — #app 높이는 app.js 가 visualViewport 기준으로 정확히 맞춰주는데, 문서가 그 아래로
     스크롤된 채로 남아 있으면 화면 위쪽(헤더·대화 내용)이 그만큼 보이지 않게 잘려 나가고 하단
     탭바·입력창이 서로 겹쳐 보이는 문제가 있었다. body 를 아예 position:fixed 로 뷰포트에 고정해
     "스크롤할 문서" 자체가 없게 만들어 이 현상을 근본적으로 막는다 — 안의 .thread 등 각 스크롤
     영역은 자체 overflow:auto 로 여전히 스크롤된다.
     (예전엔 여기서 window.scrollTo(0,0) 을 매번 불러 맞추려 했었는데, 키보드가 뜨는 도중 iOS 의
     자체 스크롤과 서로 부딪혀 빈 DM 화면 등에서 레이아웃이 잠깐 어긋나는 부작용이 있어 없앴었다 —
     position:fixed 는 애초에 스크롤이 발생할 여지 자체를 없애므로 그 부작용 없이 더 근본적으로 막는다.) */
  body { position: fixed; inset: 0; }
  .back-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-left: -10px; padding: 0 10px; border: 0; background: transparent; font-weight: 600; }
  .detail-desktop-only { display: none; }

  .plan { flex-direction: column; padding: 16px; gap: 14px; }
  .plan-side { width: 100%; }
  .plan-body { padding: 18px 16px; }
  .plan-body h1 { font-size: 20px; }

  /* 데스크톱은 목록/본문/사이드 3칸이 각자 독립적으로(overflow:auto) 세로 스크롤되는 가로 배치지만,
     모바일은 세로로 쌓다 보니 그 flex-grow/min-height:0 규칙(본문 칸이 남는 높이를 다 차지하도록 하는
     용도)이 그대로 적용되면 본문 칸이 0 높이로 눌리고 그 안의 대화 내용이 사이드 패널과 겹쳐 보이는
     문제가 있었다. 모바일에서는 각 칸이 내용만큼만 높이를 차지하게 하고, 화면 전체를 하나로 이어
     스크롤한다. */
  .work { flex-direction: column; overflow-y: auto; }
  /* 다른 메뉴(메일/팀 등)와 마찬가지로 세로로 쌓이는 목록 — 예전에 가로 스크롤 칩 형태였으나,
     제목이 긴 항목은 칩 폭이 들쭉날쭉 넓어져 목록 전체가 좌우로 스크롤되는 문제가 있었다. */
  .work-list { width: 100%; border-right: 0; padding: 16px; gap: 6px; flex-shrink: 0; }
  .task-item { background: var(--panel); border-color: var(--line); }
  .task-item.active { border-color: var(--ink); }
  .work-main { flex-grow: 0; flex-shrink: 0; min-height: 0; overflow: visible; }
  .thread-head { padding: 12px 16px; }
  .thread-head h1 { font-size: 18px; }
  /* .thread 는 업무(work)·라운지(lounge)가 공유하는 클래스라 여기서 flex-grow:0 을 전역으로 주면
     라운지 쪽 대화 스크롤이 깨진다 (업무 화면의 겹침 버그 수정은 .work 안에서만 필요). */
  .work .thread { padding: 16px; min-height: 0; flex-grow: 0; flex-shrink: 0; overflow: visible; }
  .thread-input { padding: 12px 16px; }
  .work-side { width: 100%; border-left: 0; border-top: 1px solid var(--line); overflow: visible; flex-shrink: 0; }
  /* 모바일에서는 우측 패널도 내부 스크롤 없이 페이지와 함께 흐른다 — "맨 아래로" 버튼은
     내부 스크롤이 있는 데스크톱 3열 레이아웃 전용이라 여기선 자연히 안 뜬다. */
  .work-side .side-scroll { overflow: visible; flex-grow: 0; padding: 16px; }
  .work-side .jump-latest-btn { display: none !important; }
  .msg .body-col { max-width: 100%; }
  .msg-tool, .tool-group { margin-left: 0; padding-left: 0; }
  /* 요청 카드는 테두리가 있는 카드라 안쪽 여백은 유지하고 왼쪽 들여쓰기만 없앤다. */
  .msg-request { margin-left: 0; padding: 14px 16px; }

  /* 업무 화면 모바일 개선: URL에 특정 업무 id 가 있을 때만(#work/T-xxx) 목록을 숨기고
     "대화/정보" 탭으로 전환되는 상세 화면을 보여준다 (편지함의 mail-open 과 같은 방식).
     목록 전체를 매번 스크롤해서 지나쳐야 했던 문제 + 대화·업무요약이 한 화면에 다 쌓여
     스크롤이 길어지던 문제를 함께 해결한다. */
  .work-mtabs { display: none; }
  .work.task-open .work-list { display: none; }
  .work:not(.task-open) .work-main, .work:not(.task-open) .work-side { display: none; }
  .work.task-open .work-mtabs {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 10px 16px; border-bottom: 1px solid var(--line);
  }
  .work-mtabs .back-btn { flex-shrink: 0; margin-left: -6px; }
  .work-mtabs .seg { flex-grow: 1; }
  .work.task-open.show-info .work-main { display: none; }
  .work.task-open:not(.show-info) .work-side { display: none; }
  /* 2.1.24: 업무를 열고 대화 탭을 보고 있을 때는 상단(뒤로·탭·제목)과 하단 입력창을 고정하고
     대화(.thread)만 스크롤한다. 정보 탭은 기존처럼 화면 전체가 스크롤된다. */
  .work.task-open:not(.show-info) { overflow: hidden; }
  .work.task-open:not(.show-info) .work-main { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .work.task-open:not(.show-info) .thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .work.task-open:not(.show-info) .thread-head, .work.task-open:not(.show-info) .thread-input { flex-shrink: 0; }
  .work.task-open:not(.show-info) .thread-input { padding: 8px 12px 6px; border-top: 1px solid var(--line); background: var(--bg); }

  .cal { flex-direction: column; }
  .cal-main { padding: 12px 12px 16px; }
  .cal-mtabs { display: flex; align-self: stretch; }
  .cal-mtabs button { flex: 1; }
  .cal.show-tasks .cal-main > :not(.cal-mtabs) { display: none; }
  .cal-tasks { display: none; width: 100%; border-left: 0; padding: 0 12px 16px; }
  .cal.show-tasks .cal-tasks { display: flex; }
  .cal-title { font-size: 17px; }
  .cal-grid { grid-auto-rows: minmax(84px, auto); }
  .cal-cell { padding: 3px 2px 4px; }
  .daynum { width: 24px; height: 24px; font-size: 12px; }
  .ev-bar { font-size: 10px; padding: 2px 3px; min-height: 18px; gap: 3px; border-left-width: 2px; }
  .ev-bar .ev-time { font-size: 9px; }
  .ev-bar .ev-acct { display: none; }
  .tg-gutter, .tg-gutter-lbl { width: 42px; }
  .tg-hour { font-size: 10px; }
  .cal-scroll { max-height: none; }
  .cal-day { grid-template-columns: 1fr; }
  .ag-day { grid-template-columns: 1fr; gap: 6px; }
  .ev-dialog { width: 100vw; height: var(--vvh, 100vh); max-height: none; }

  .team { padding: 16px; }
  .team-head h1 { font-size: 22px; }
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-detail { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .mail { flex-direction: column; }
  .mail-list { width: 100%; border-right: 0; padding: 16px; }
  .mail-list-head h1 { font-size: 22px; }
  .mail.mail-open .mail-list { display: none; }
  /* 업무 화면(.work)과 같은 방식 — 스레드를 안 골랐으면 목록만 보이고, 그 아래 "왼쪽에서
     고르십시오" 같은(모바일에선 위아래로 쌓이니 말이 안 되는) 빈 안내 패널은 아예 숨긴다. */
  .mail:not(.mail-open) .mail-main { display: none; }
  .mail-thread { padding: 12px 16px 16px; }
  .mail-thread-head h2 { font-size: 19px; }
  .mail-msg { padding: 14px; }
  .mail-msg .mh { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mail-msg .mh .grow { width: 100%; }
  .mail-msg .mh > .row { flex-shrink: 0; }
  /* 모바일에서는 가로 스와이프 스트립 대신 줄바꿈으로 — 업무/라운지 화면에 좌우 스크롤이 생기지 않게 */
  .mention-chips { overflow-x: visible; flex-wrap: wrap; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

  .settings { padding: 16px; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-tabs { width: 100%; -webkit-overflow-scrolling: touch; }
  .people-text { min-height: 260px; }
  .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lounge .thread-head, .lounge .thread, .lounge .thread-input { padding-left: 16px; padding-right: 16px; }
  .lounge-tabs { padding-left: 16px; padding-right: 16px; }
  #toasts { right: 12px; left: 12px; max-width: none; top: 64px; }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .desk-queue { width: 320px; }
  .desk-side { width: 260px; }
  .work-list { width: 240px; }
  .work-side { width: 260px; }
  .plan-side { width: 280px; }
}

/* Claude·ChatGPT 로고 파일이 없을 때 쓰는 글자 아이콘 */
.svc-mono.no-img::after { content: attr(data-mono); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 6px; background: var(--nav-bg); color: var(--ink); font-weight: 800; font-size: 12px; }
.ai-required { border-color: var(--urgent); background: color-mix(in srgb, var(--urgent) 8%, var(--panel)); display: flex; flex-direction: column; gap: 4px; }

#work-send.loading { opacity: .55; cursor: wait; }
.typing-live-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-compose .btn.round { width: 44px; height: 44px; }
.header .brand { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* 직원 기억 탭 */
.mem-list { display: flex; flex-direction: column; gap: 8px; }
.mem-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); }
.mem-row.editing { gap: 8px; }
.mem-text { font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.mem-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.linkish.small { background: none; border: 0; padding: 2px 4px; color: var(--decide); cursor: pointer; font-size: 12px; }
.linkish.small.danger-text { color: var(--urgent); }

/* ---------------------------------------------------------------- 라운지 오피스 모드 (web/office.js) */
.lounge-view-seg { display: inline-flex; background: var(--nav-bg); padding: 3px; border-radius: 10px; gap: 2px; flex-shrink: 0; }
.lounge-view-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.lounge-view-seg button.active { background: var(--ink); color: var(--on-ink); }
.office-host { position: relative; flex-grow: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding: 12px; box-sizing: border-box; }
.office-root { --o-sky: #cfe5f3; --o-bld1: #6f8499; --o-bld2: #5a6d82; --o-inv: 1; max-width: 100%; }
.office-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 2px solid var(--ink); border-radius: 12px; background: #e9e5dc; box-shadow: 3px 3px 0 var(--ink); -webkit-overflow-scrolling: touch; }
.office-stage { position: relative; overflow: hidden; }
.office-scaled, .office-overlay { position: absolute; left: 0; top: 0; width: 800px; height: 520px; transform-origin: 0 0; }
.office-overlay { pointer-events: none; }
.office-plane-wrap { position: absolute; left: 346px; top: 104px; width: 640px; height: 480px; }
.office-plane { position: absolute; left: 0; top: 0; width: 640px; height: 480px; transform-origin: 0 0; transform: rotateX(60deg) rotateZ(45deg); transform-style: preserve-3d; }
.o-face { position: absolute; box-sizing: border-box; backface-visibility: hidden; }
.f-carpet { background-color: #5d636d; background-image: linear-gradient(#666d78 2px, transparent 2px), linear-gradient(90deg, #666d78 2px, transparent 2px); background-size: 40px 40px; }
.f-oak { background-color: #c89b62; background-image: linear-gradient(90deg, #b88b54 2px, transparent 2px), linear-gradient(#bf925a 1px, transparent 1px); background-size: 80px 16px, 80px 16px; }
.f-meet { background-color: #d8c3a0; background-image: linear-gradient(90deg, #cdb792 2px, transparent 2px); background-size: 24px 24px; }
.f-concrete { background-color: #a9a59c; background-image: linear-gradient(90deg, #9f9b92 1px, transparent 1px); background-size: 60px 60px; }
.f-rug { background-color: #e7dccb; background-image: linear-gradient(45deg, #dccfba 25%, transparent 25%, transparent 75%, #dccfba 75%), linear-gradient(45deg, #dccfba 25%, transparent 25%, transparent 75%, #dccfba 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; }
.o-glass { background: rgba(168, 214, 240, .28); box-shadow: inset 0 0 0 2px rgba(90, 130, 160, .7); }
.o-screen-on { background: #7fd0ff !important; box-shadow: inset 0 0 0 2px #1c1f26; }
.o-lit-night { opacity: 0; transition: opacity 2s; }
.o-is-night .o-lit-night { opacity: 1; }
.o-is-night .o-lit { opacity: 1; }
.o-lit { opacity: .55; }
@keyframes o-neon { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .55; } 96% { opacity: 1; } 97% { opacity: .7; } }
.o-neon { animation: o-neon 6s steps(1) infinite; }
.o-shadow { width: 22px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .22); transform: translateZ(.6px); }
.o-board { padding: 0; border: 0; background: transparent; transform-origin: 50% 100%; cursor: pointer; }
.o-sprite { position: absolute; left: 0; top: 0; width: 18px; height: 32px; transform-origin: 0 0; image-rendering: pixelated; }
.o-sprite > span { position: absolute; }
@keyframes o-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes o-legl { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes o-legr { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(0); } }
.o-sprite.walking .p-body { animation: o-bob .3s steps(2) infinite; }
.o-sprite.walking .p-legl { animation: o-legl .3s steps(2) infinite; }
.o-sprite.walking .p-legr { animation: o-legr .3s steps(2) infinite; }
.o-zone { position: absolute; transform: translate(-50%, -50%) scale(var(--o-inv)); font: 700 11px/1.5 var(--sans, system-ui), sans-serif; color: #faf9f5; background: rgba(20, 20, 19, .82); padding: 1px 6px; white-space: nowrap; }
.o-tagwrap { position: absolute; width: 0; height: 0; z-index: 3; }
.o-tag { position: absolute; left: 0; bottom: 3px; transform: translateX(-50%) scale(var(--o-inv)); transform-origin: 50% 100%; white-space: nowrap; font: 700 10px/1.5 system-ui, sans-serif; color: #faf9f5; background: rgba(20, 20, 19, .75); padding: 0 4px; }
.o-tag.boss { background: #b4532f; }
.o-bubble { display: none; position: absolute; left: 0; bottom: calc(22px * var(--o-inv)); transform: translateX(-50%) scale(var(--o-inv)); transform-origin: 50% 100%; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; font: 700 11.5px/1.4 system-ui, sans-serif; color: #141413; background: #ffffff; border: 2px solid #141413; box-shadow: 2px 2px 0 #141413; }
.o-bubble.show { display: block; }
.o-bubble.status { font-weight: 600; color: #3d3b35; background: #efe9dc; }
.o-bubble.status::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #d97757; margin-right: 5px; vertical-align: middle; }
.o-bubble.typing { display: none; }
.o-bubble.typing.show { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
@keyframes o-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.o-tdot { width: 4px; height: 4px; background: #141413; animation: o-dot 1.2s steps(4) infinite; }
.o-tdot:nth-child(2) { animation-delay: .2s; } .o-tdot:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .o-neon, .o-sprite.walking span, .o-tdot { animation: none; } }
/* 라운지 입력(textarea): 기본 flex-basis(240px) 때문에 모바일에서 보내기 버튼이 다음 줄로 떨어졌다 — 남는 폭만 쓰게. */
.lounge .thread-input .lounge-ta { flex: 1 1 0; min-width: 120px; }
.lounge .thread-input { align-items: flex-end; }
/* ChatGPT·Fish Audio 로고는 검정 단색이라 어두운 테마에선 반전해서 보이게 */
:root[data-theme="dark"] .svc-invert-dark img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svc-invert-dark img { filter: invert(1); } }

/* 오피스 간판 픽셀 글자 */
.o-pixtext i { position: absolute; display: block; }
/* PC 오피스 모드: 왼쪽 오피스(비율 유지, 최대), 오른쪽 대화 */
.office-split { display: flex; flex-grow: 1; min-height: 0; }
.office-split .office-host { flex: 0 0 auto; align-items: center; }
.office-chat { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.office-host-away { align-items: center; }
.office-away { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; }
/* 오피스 팝업(PiP) */
.office-pip { position: fixed; z-index: 90; box-sizing: content-box; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #e9e5dc; box-shadow: 4px 4px 0 var(--ink), 0 12px 32px var(--shadow); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.office-pip.dragging { cursor: grabbing; }
.office-pip .office-root { max-width: none; }
.office-pip .office-scroll { border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.office-pip-close { position: absolute; top: 6px; right: 6px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.92); color: #141413; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.office-pip-close svg { display: block; }
.office-pip-grip { position: absolute; right: 0; bottom: 0; z-index: 5; width: 22px; height: 22px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(20,20,19,.45) 50%, rgba(20,20,19,.45) 58%, transparent 58%, transparent 70%, rgba(20,20,19,.45) 70%, rgba(20,20,19,.45) 78%, transparent 78%); }
@media (pointer: coarse) { .office-pip-grip { display: none; } }
.office-pip-btn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.office-root.o-small .o-zone { display: none; }
.ph-rhythm { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ph-rhythm .rh-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 600; line-height: 1;
  color: #fff; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-rhythm .rh-chip.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #F2C14E; flex-shrink: 0; }
/* 책상 정렬 */
.desk-filter-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.desk-filter-row .chips { flex: 1 1 auto; min-width: 0; }
.select.desk-sort { flex: 0 0 auto; width: auto; height: 32px; padding: 0 30px 0 12px; font-size: 13px; font-weight: 600; border-radius: 999px; background-position: right 10px center; }
/* 성장 */
.growth-block { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.growth-chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--nav-bg); }
.growth-chip.up, .growth-log .up { color: var(--review); }
.growth-chip.down, .growth-log .down { color: var(--urgent); }
.growth-caution { font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--ink); }
.growth-steady { color: var(--review); }
.growth-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* 관계 */
.rel-row { display: flex; flex-direction: column; gap: 4px; }
.rel-bar { height: 6px; border-radius: 999px; background: var(--nav-bg); overflow: hidden; }
.rel-bar span { display: block; height: 100%; border-radius: 999px; background: var(--review); }
/* 나에 대해(이사님과의 관계) */
.rel-boss { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.rel-bar.trust span { background: var(--brand); }
.rel-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rel-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.rel-stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rel-stat .small { font-size: 11px; white-space: nowrap; }
.rel-view { padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); }
.rel-quote { font-size: 14px; line-height: 1.55; word-break: keep-all; }
.rel-note.up { color: var(--confirm); }
.rel-note.down { color: var(--urgent); }
@media (max-width: 899px) { .rel-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rel-stat b { font-size: 14px; } .rel-stat .small { font-size: 10.5px; } }
.badge.proactive-badge { background: var(--review-bg); color: var(--review); }
/* 진행 상황 */
.prog-mini { height: 4px; border-radius: 999px; background: var(--nav-bg); overflow: hidden; margin-top: 6px; }
.prog-mini span { display: block; height: 100%; background: var(--review); border-radius: 999px; }
.prog-mini.blocked span { background: var(--urgent); }
.thread-head .prog-panel { flex-basis: 100%; }
.prog-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 0; }
.prog-head { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; min-width: 0; }
.prog-head:disabled { cursor: default; }
.prog-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--nav-bg); overflow: hidden; min-width: 60px; }
.prog-bar span { display: block; height: 100%; background: var(--review); border-radius: 999px; }
.prog-panel.blocked .prog-bar span { background: var(--urgent); }
.prog-head .small { white-space: nowrap; color: var(--muted); }
.prog-blocked { color: var(--urgent); }
.prog-steps { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.prog-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.prog-steps li.done { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.prog-steps li.now { color: var(--ink); font-weight: 600; }
.prog-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; }
.prog-steps li.done .prog-dot { background: var(--review); border-color: var(--review); }
.prog-steps li.now .prog-dot { border-color: var(--review); }
/* 주간 회고 */
.retro-rules { display: flex; flex-direction: column; gap: 8px; }
.retro-rule { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.retro-rule input { margin-top: 3px; }
.team-rule-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-rule-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mail-more { width: 100%; margin: 8px 0 16px; }
.limit-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); margin: 4px 0 8px; font-size: 13px; }
/* 책상 카드 답 입력칸: 메인 지시창과 같은 모양 */
.answer-area .reply-composer { box-shadow: none; }
.answer-area .reply-composer .newtask-ta { font-size: 14px; }
/* 프로필 사진 크기가 스크롤바 유무(탭마다 다름)에 따라 줄어들던 문제: 사진 높이를 스크롤 영역이 아니라
   바깥 패널 폭 기준으로 정한다(스크롤 영역 폭은 스크롤바만큼 줄지만 바깥 패널 폭은 그대로). */
/* 프로필 패널: 네이티브 스크롤바를 숨기고 오버레이 막대(.ovs-thumb)를 내용 위에 띄운다 —
   스크롤이 있든 없든 콘텐츠 폭·사진 크기가 같고, 오른쪽에 빈 띠도 생기지 않는다. */
.drawer-body.has-hero { position: relative; scrollbar-gutter: auto; scrollbar-width: none; }
.drawer-body.has-hero::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ovs-thumb { position: absolute; top: 0; right: 3px; width: 6px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 38%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,.28); opacity: 0; transition: opacity .25s, width .15s; z-index: 5; cursor: default; touch-action: none; flex: none; margin: 0; }
.ovs-on > .ovs-thumb, .drawer-body.has-hero:hover > .ovs-thumb, .ovs-thumb.drag { opacity: 1; }
.ovs-thumb:hover, .ovs-thumb.drag { width: 9px; right: 2px; background: color-mix(in srgb, var(--ink) 55%, transparent); }

/* 라운지 작성창 — 업무 끼어들기 창과 같은 카드(.newtask) 구조 */
.lounge .thread-input.lounge-thread-input { flex-direction: column; align-items: stretch; gap: 8px; }
.lounge-compose { margin: 0; }
.lounge .thread-input .lounge-compose .lounge-ta { flex: none; width: 100%; min-width: 0; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; background: transparent; }
.lounge-compose .btn.round { width: 44px; height: 44px; }
#lounge-send.loading { opacity: .55; cursor: wait; }
.tts-btn.playing { color: var(--decide); background: color-mix(in srgb, var(--decide) 14%, transparent); }

/* ================================================================ 2.2 뼈대: 왼쪽 레일 · 모바일 탭 5칸 · 더보기 시트 */
:root { --sb-bg: #EDEBE5; --rail-bg: #E4E2DB; --hover: rgba(23,23,27,.06); --st-work: #2E9E5B; --st-review: #3E7BD6; --st-limit: #C8750A; --st-off: #9A9AA3; --sel-bg: #3E43B8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-bg: #1A1A1E; --rail-bg: #111113; --hover: rgba(255,255,255,.06); --st-work: #46C07A; --st-review: #6FA3F0; --st-limit: #E89A3C; --st-off: #6E6E78; --sel-bg: #5A5FD0; } }
:root[data-theme="dark"] { --sb-bg: #1A1A1E; --rail-bg: #111113; --hover: rgba(255,255,255,.06); --st-work: #46C07A; --st-review: #6FA3F0; --st-limit: #E89A3C; --st-off: #6E6E78; --sel-bg: #5A5FD0; }

.rail { display: none; }
@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #app > .header, #app > .tabbar { display: none; }
  #app > .screen { grid-column: 2; grid-row: 1; min-width: 0; }
  #app > .screen.hidden { display: none; }
  .rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--rail-bg); border-right: 1px solid var(--line);
    padding: calc(12px + env(safe-area-inset-top)) 0 12px; padding-left: env(safe-area-inset-left); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; user-select: none; -webkit-user-select: none; min-height: 0; }
  .rail::-webkit-scrollbar { display: none; }
  #toasts { top: auto; bottom: 20px; right: 20px; flex-direction: column-reverse; }
  .menu.rail-menu { top: auto; right: auto; bottom: 14px; left: calc(76px + env(safe-area-inset-left)); max-height: calc(100dvh - 28px); overflow: auto; }
}
.rail-logo { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: var(--on-ink); font-family: 'Noto Serif KR', Georgia, serif; font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; text-decoration: none; }
.rail-logo:hover { text-decoration: none; opacity: .92; }
.rail .ri { width: 58px; padding: 5px 0 4px; border: 0; background: transparent; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 10.5px; font-weight: 600; position: relative; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.rail .ri:hover { text-decoration: none; color: var(--ink); }
.rail .ri .ico { width: 38px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.rail .ri:hover .ico { background: var(--hover); }
.rail .ri.on, .rail .ri[aria-pressed="true"] { color: var(--ink); }
.rail .ri.on .ico, .rail .ri[aria-pressed="true"] .ico { background: var(--panel); box-shadow: 0 1px 2px var(--shadow); }
.rail .ri .rl { line-height: 1.1; white-space: nowrap; }
.rail .ri .rb { position: absolute; top: 1px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--urgent); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--rail-bg); font-variant-numeric: tabular-nums; }
.rail-sp { flex: 1 1 auto; min-height: 8px; }
.rail-uses { display: flex; gap: 8px; padding: 4px 0 8px; }
.rail-use { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.rail-use i { width: 6px; height: 26px; border-radius: 3px; background: var(--line-strong); position: relative; overflow: hidden; display: block; }
.rail-use b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--decide); border-radius: 3px; }
.rail .rail-me { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; margin-top: 6px; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rail .rail-me .avatar { width: 34px; height: 34px; }
.rail .rail-me:hover, .rail .rail-me[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--line-strong); border-color: transparent; background: transparent; }
[data-look="enterprise"] .rail .ri .ico, [data-look="enterprise"] .rail-logo { border-radius: 8px; }

/* 모바일 하단 탭 5칸 */
@media (max-width: 899px) {
  .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tabbar a, .tabbar .tab-more { font-size: 11px; }
  .tabbar .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--muted); min-height: 44px; padding: 0; letter-spacing: -0.02em; position: relative; }
  .tabbar .tab-more.active { color: var(--decide); font-weight: 700; }
  .tabbar a > span:first-child, .tabbar .tab-more > span:first-child { display: flex; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a span, .tabbar .tab-more span { line-height: 1; }
  #toasts { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; flex-direction: column-reverse; }
}
#sheet .sheet-backdrop { position: fixed; inset: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 110; background: rgba(0,0,0,.28); display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--panel); border-radius: 20px 20px 0 0; padding: 8px 16px 16px; box-shadow: 0 -10px 40px var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); align-self: center; margin-bottom: 4px; }
.ms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ms-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.ms-item .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--nav-bg); display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.ms-item.on { border-color: var(--decide); color: var(--decide); }
.ms-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ms-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.ms-row + .ms-row { border-top: 1px solid var(--line-2); }
.ms-row .grow { flex: 1; }
.ms-uses { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.ms-use { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ms-use i { height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; display: block; }
.ms-use b { display: block; height: 100%; background: var(--decide); border-radius: 3px; }
.ms-use .v { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================ 2.2 라운지: 사이드바(PC·태블릿) · 목록 화면(모바일) */
.lounge-shell { display: flex; width: 100%; min-width: 0; min-height: 0; flex-grow: 1; }
.lounge-shell > .lounge { min-width: 0; }
.sb { width: 264px; flex-shrink: 0; background: var(--sb-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; user-select: none; -webkit-user-select: none; }
@media (max-width: 1200px) { .sb { width: 236px; } }
.sb-head { display: flex; align-items: center; gap: 4px; padding: 16px 10px 8px 16px; min-height: 58px; }
.sb-head h2 { margin: 0; font-size: 17px; font-weight: 800; flex: 1; white-space: nowrap; }
.sb-head .icon-btn { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.sb-search { margin: 0 12px 8px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--panel); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--muted); }
.sb-search-in { border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; flex: 1; min-width: 0; height: 100%; padding: 0; -webkit-appearance: none; appearance: none; }
.sb-search:focus-within { border-color: var(--decide); box-shadow: 0 0 0 3px color-mix(in srgb, var(--decide) 18%, transparent); }
.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 16px; scrollbar-width: thin; }
.sb-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 14px; cursor: pointer; white-space: nowrap; position: relative; text-decoration: none; text-align: left; }
.sb-row:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.sb-row .ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.sb-row .ic.av .avatar-holder, .sb-row .ic.av .avatar { width: 22px; height: 22px; font-size: 10px; }
.sb-row .ic.av .status-dot { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--sb-bg); border: 0; }
.sb-row .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.sb-row .rk { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.sb-row .sfx { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; opacity: .85; }
.sb-row .grow { flex: 1; }
.sb-row .tag, .lounge-list .tag { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 4px; line-height: 15px; flex-shrink: 0; }
.sb-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sb-row.unread { color: var(--ink); font-weight: 700; }
.sb-row.sel { background: var(--sel-bg); color: #fff; font-weight: 600; }
.sb-row.sel:hover { background: var(--sel-bg); color: #fff; }
.sb-row.sel .ic, .sb-row.sel .rk, .sb-row.sel .sfx { color: rgba(255,255,255,.82); }
.sb-row.sel .tag { color: #fff; border-color: rgba(255,255,255,.5); }
.sb-row.sel .sb-badge { background: #fff; color: var(--sel-bg); }
.sb-row.sel .ic.av .status-dot { box-shadow: 0 0 0 2px var(--sel-bg); }
.sb-row.add { color: var(--muted); }
.sb-row .sb-del { display: none; width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: inherit; opacity: .7; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }
.sb-row:hover .sb-del, .sb-row:focus-within .sb-del { display: inline-flex; }
.sb-row .sb-del:hover { opacity: 1; background: var(--hover); }
.sb-quick { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sb-sec { margin-top: 10px; }
.sb-sec-h { display: flex; align-items: center; gap: 4px; width: 100%; height: 26px; padding: 0 6px 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; border-radius: 7px; text-align: left; }
.sb-sec-h:hover { background: var(--hover); }
.sb-sec-h .chev { display: inline-flex; transition: transform .15s ease; }
.sb-sec.closed .chev { transform: rotate(-90deg); }
.sb-sec-h .cnt { font-weight: 600; font-size: 11px; opacity: .8; }
.sb-empty { padding: 18px 10px; font-size: 13px; color: var(--muted); text-align: center; }
.lounge-fav { color: var(--muted); }
.lounge-fav.on { color: var(--confirm); }
.lounge-title-wrap { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.lounge-title { min-width: 0; }

/* 모바일 목록 화면 */
.lounge-list { display: flex; flex-direction: column; width: 100%; min-height: 0; flex-grow: 1; background: var(--bg); }
.ll-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 8px; }
.ll-head h1 { margin: 0; font-size: 26px; font-weight: 800; flex: 1; letter-spacing: -0.02em; }
.ll-search { margin: 0 16px 10px; height: 40px; border-radius: 12px; border: 0; background: var(--nav-bg); }
.ll-search .sb-search-in { font-size: 15px; }
.ll-chips { display: flex; gap: 6px; padding: 0 16px 8px; }
.ll-chips .chip { border-radius: 999px; }
.ll-chips .chip.active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ll-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px calc(76px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.ll-scroll .sb-sec-h { font-size: 13px; height: 32px; padding-left: 8px; }
.lr { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.lr:hover, .lr:active { background: var(--hover); text-decoration: none; }
.lr-ic { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lr-ic.sym { border-radius: 12px; background: var(--nav-bg); color: var(--ink-2); }
.lr-ic .avatar-holder, .lr-ic .avatar { width: 42px; height: 42px; }
.lr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr-top, .lr-bot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lr-nm { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lr-rk { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.lr-at { margin-left: auto; font-size: 12px; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lr-pv { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.lr.unread .lr-nm { font-weight: 800; }
.lr.unread .lr-pv { color: var(--ink-2); }
.lr .sb-badge { background: var(--decide); color: #fff; }
.ll-back { display: inline-flex; align-items: center; gap: 2px; color: var(--decide); text-decoration: none; margin-left: -6px; padding: 4px 2px; align-self: center; }
.ll-back:hover { text-decoration: none; }
.ll-back .sb-badge { background: var(--decide); color: #fff; height: 17px; min-width: 17px; font-size: 10.5px; }
@media (max-width: 899px) {
  .lounge .thread-head .lounge-title-wrap { align-items: center; }
}
.sb-head .icon-btn, .ll-head .icon-btn, .lounge-fav { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sb-head .icon-btn svg, .ll-head .icon-btn svg, .lounge-fav svg { flex-shrink: 0; }
.ll-head .icon-btn { width: 38px; height: 38px; border-radius: 50%; }
.sb-row .rk { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 3; }
.sb-row .nm { flex-shrink: 0; max-width: 62%; }

/* ================================================================ 2.2.1 책상 · 업무 · 모바일 윗줄 */
.side-panel-toggle, .side-overlay-backdrop { display: none; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 28px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.page-head .desk-title h1 { font-size: 22px; margin: 0; line-height: 1.25; }
.page-head .desk-title .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.side-panel-toggle { align-items: center; gap: 6px; flex-shrink: 0; }
.side-panel-toggle span { display: inline-flex; }
@media (min-width: 900px) {
  /* 책상: 왼쪽 카드 목록을 라운지와 같은 사이드바로 */
  .desk-queue.sb { width: 264px; padding: 0; gap: 0; overflow: hidden; }
  .desk-queue.sb .sb-head { padding-right: 10px; }
  .desk-queue.sb .sb-head .desk-sort { margin-left: auto; }
  .desk-queue.sb .desk-filter-row { padding: 0 12px 10px; }
  .desk-queue.sb .chips { gap: 5px; }
  .desk-queue.sb .chip { padding: 4px 10px; font-size: 12.5px; }
  .desk-queue.sb .req-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
  .desk-main { padding-top: 20px; }
  /* 업무: 목록을 사이드바로 */
  .work-list { width: 264px; background: var(--sb-bg); padding: 16px 10px 16px 12px; }
  .work-list .work-list-head h2 { font-size: 17px; font-weight: 800; color: var(--ink); }
  .work-list .task-item { background: transparent; }
  .work-list .task-item.active { background: var(--panel); box-shadow: 0 1px 2px var(--shadow); }
  .work-head-tools { flex-wrap: wrap; justify-content: flex-end; }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .desk-queue.sb, .work-list { width: 236px; }
}
/* 900~1279px: 오른쪽 패널은 머리말 버튼으로 덮어서 연다 */
@media (min-width: 900px) and (max-width: 1279px) {
  .side-panel-toggle { display: inline-flex; }
  .desk { position: relative; }
  .work { position: relative; }
  .desk > .side-resize-handle, .work > .side-resize-handle { display: none; }
  .desk > .desk-side, .work > .work-side { display: none; }
  body.desk-side-open .desk > .desk-side, body.work-side-open .work > .work-side {
    display: flex; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86%) !important; z-index: 40; background: var(--bg); box-shadow: -14px 0 40px var(--shadow); }
  body.desk-side-open .desk-side .desk-side-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0 24px; }
  body.desk-side-open .desk > .desk-side-backdrop, body.work-side-open .work > .side-overlay-backdrop { display: block; position: absolute; inset: 0; z-index: 35; background: rgba(0,0,0,.18); }
}
/* 업무 머리말 버튼 · 더보기 메뉴 */
.work-head-actions { display: inline-flex; align-items: center; gap: 6px; }
.more-dd { position: relative; }
.more-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; color: var(--muted); }
.more-dd > summary::-webkit-details-marker { display: none; }
.more-dd[open] > summary, .more-dd > summary:hover { background: var(--nav-bg); color: var(--ink); }
.more-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 5px; z-index: 60; display: flex; flex-direction: column; }
.more-dd-item { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; }
.more-dd-item:hover { background: var(--bg); }
.more-dd-item.danger { color: var(--urgent); }
/* 모바일 윗줄: 화면 이름 */
@media (max-width: 899px) {
  .header .brand.mtitle { font-family: var(--sans); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
  body.mhead-hidden #app > .header { display: none; }
  .ms-me .avatar { width: 26px; height: 26px; font-size: 12px; }
  .ll-head h1 { display: none; }
  .ll-head { padding-top: 10px; padding-bottom: 0; justify-content: flex-end; position: absolute; right: 8px; top: 2px; }
  .lounge-list { position: relative; }
  .ll-search { margin-top: 12px; margin-right: 60px; }
}
@media (min-width: 900px) {
  .desk-queue.sb .req-card { padding: 11px 12px; gap: 5px; }
  .desk-queue.sb .req-card.active { padding: 10px 11px; }
  .desk-queue.sb .req-card .top { flex-wrap: wrap; row-gap: 4px; }
  .desk-queue.sb .req-card .due-col { margin-left: auto; white-space: nowrap; }
  .desk-queue.sb .req-card .due-col .small.muted { display: none; }
  .desk-queue.sb .req-card .title { font-size: 14px; }
}

/* ================================================================ 2.2.2 팀 · 메일 */
.sb-sec-h.static { cursor: default; }
.sb-sec-h.static:hover { background: transparent; }
.team-shell { display: flex; width: 100%; min-width: 0; min-height: 0; flex-grow: 1; }
.team-shell > .team { min-width: 0; }
.mail-3col { display: flex; }
.mail-3col > .mail-col { width: 360px; flex-shrink: 0; padding: 0; gap: 0; background: var(--bg); }
.mail-3col .mail-col-head { display: flex; align-items: baseline; gap: 8px; padding: 18px 16px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 2; }
.mail-3col .mail-col-head b { font-size: 15px; }
.mail-3col .mail-col .mail-threads { display: flex; flex-direction: column; gap: 0; }
.mail-3col .mail-col .mail-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 16px; }
.mail-3col .mail-col .mail-item.active { background: color-mix(in srgb, var(--decide) 9%, var(--bg)); box-shadow: inset 3px 0 0 var(--decide); }
.mail-3col .mail-col .note, .mail-3col .mail-col .empty, .mail-3col .mail-col .mail-more { margin: 12px 16px; }
.mail-sb .sb-select { border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; flex: 1; min-width: 0; height: 100%; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mail-acc-one { padding: 0 18px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1200px) {
  .mail-3col > .mail-col { width: 300px; }
}

/* ================================================================ 2.2.3 설정 · 자동화 · 캘린더 */
.settings-shell, .auto-shell { display: flex; width: 100%; min-width: 0; min-height: 0; flex-grow: 1; }
.settings-shell > .settings, .auto-shell > .plan { min-width: 0; flex-grow: 1; }
.settings-shell > .settings { padding-top: 0; }
.settings-head { margin: 0 -32px 4px; padding-left: 32px; padding-right: 32px; }
.settings-head h1 { margin: 0; font-size: 24px; }
.sb-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-row.sel .sb-count { color: rgba(255,255,255,.85); }
.nav-sb .sb-head .icon-btn { padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.auto-empty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--bg-2); }
.auto-empty .grow { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sys-auto { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.sys-auto .sec-t { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sys-auto .sec-t .muted { font-weight: 400; }
.sys-list { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sys-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; scroll-margin-top: 16px; }
.sys-row + .sys-row { border-top: 1px solid var(--line-2); }
.sys-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--nav-bg); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sys-txt { flex: 1; min-width: 0; }
.sys-t { font-weight: 700; font-size: 14px; }
.sys-d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.switch { width: 42px; height: 24px; border-radius: 12px; border: 0; padding: 0; background: var(--line-strong); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch.on { background: var(--review); }
.switch.on i { transform: translateX(18px); }
@media (min-width: 900px) {
  /* 캘린더: 할 일 패널을 왼쪽 사이드바 자리로 */
  .cal > .cal-tasks { order: -1; width: 264px; padding: 18px 22px 24px 16px; background: var(--sb-bg); border-left: 0; border-right: 1px solid var(--line); }
  .cal > .cal-tasks.collapsed { width: 20px; padding: 20px 0; border-left: 0; border-right: 1px solid var(--line); }
  .cal > .cal-tasks .cal-tasks-toggle { left: auto; right: 0; border-radius: 8px 0 0 8px; border-left: 1px solid var(--line-strong); border-right: none; box-shadow: -2px 0 6px var(--shadow); }
}
.credit-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--confirm-bg); border: 1px solid color-mix(in srgb, var(--confirm) 35%, var(--line)); color: var(--ink); font-size: 13px; line-height: 1.45; }
.credit-banner .cb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--confirm); flex-shrink: 0; }
.credit-banner .grow { flex: 1; min-width: 0; }

/* ================================================================ 2.2.4 연동 목록형 · 모바일 설정 목록 */
.settings-grid.integ-list { grid-template-columns: 1fr !important; max-width: 820px; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.settings-grid.integ-list > .card { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.settings-grid.integ-list > .card + .card { border-top: 1px solid var(--line-2); }
.settings-grid.integ-list > .integ-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "status btn"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 16px; }
.settings-grid.integ-list > .integ-summary > h2 { grid-area: name; margin: 0; font-size: 14.5px; }
.settings-grid.integ-list > .integ-summary > .status-row { grid-area: status; border: 0; padding: 0; justify-content: flex-start; gap: 6px; font-size: 12.5px; }
.settings-grid.integ-list > .integ-summary > .status-row > span:first-child { display: none; }
.settings-grid.integ-list > .integ-summary > .status-row > span:last-child { text-align: left; }
.settings-grid.integ-list > .integ-summary > .btn { grid-area: btn; margin: 0 !important; min-width: 64px; }
.settings-mlist { padding-top: 12px; }
.settings-rows .ms-row { text-decoration: none; min-height: 52px; font-size: 15px; }
.settings-mhead { display: flex; align-items: center; gap: 4px; }
.settings-mhead h1 { margin: 0; font-size: 22px; }
.cal-sb-top { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mc-head { display: flex; align-items: center; gap: 2px; }
.mc-head b { font-size: 14px; }
.mc-head .icon-btn { width: 26px; height: 26px; padding: 0; font-size: 15px; border: 0; background: transparent; }
.mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mc-w { font-size: 10.5px; color: var(--muted); padding: 2px 0; font-weight: 700; }
.mc-d { position: relative; border: 0; background: transparent; font-size: 12px; height: 28px; border-radius: 50%; color: var(--ink-2); padding: 0; font-variant-numeric: tabular-nums; }
.mc-d:hover { background: var(--hover); }
.mc-d.out { color: var(--muted); opacity: .55; }
.mc-d.busy::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--decide); }
.mc-d.today { color: var(--decide); font-weight: 800; }
.mc-d.sel { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.mc-d.sel::after { background: var(--on-ink); }
.cal-accs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.cal-acc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.cal-acc:hover { background: var(--hover); }
.cal-acc-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rail-credit { font-size: 9.5px; font-weight: 800; color: var(--confirm); background: var(--confirm-bg); border-radius: 6px; padding: 2px 5px; margin-bottom: 6px; }
.settings .settings-grid.integ-list > .card.integ-summary { min-height: 0; }
.settings-grid.integ-list > .integ-summary > .status-row { display: flex; }
.mc-head .grow { flex: 1; }

/* ================================================================ 2.2.5 레일 아이콘 크기 통일 · 상단 안전 영역 */
/* 레일 항목은 <a>(화면)와 <button>(오피스·알림)이 섞여 있어 글꼴·줄높이 기본값이 달라 높이가 조금씩 달랐다 — 모두 같은 틀로 고정. */
.rail .ri { font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.1; height: 54px; box-sizing: border-box; justify-content: flex-start; padding: 5px 0 0; gap: 3px; margin: 0; -webkit-appearance: none; appearance: none; }
.rail .ri .ico { width: 38px; height: 32px; flex: 0 0 32px; box-sizing: border-box; }
.rail .ri .rl { display: block; height: 12px; }
.rail .ri svg { display: block; }
/* 아이폰·아이패드 홈 화면 앱: 상태 표시줄 밑으로 내용이 들어가 흐리게 보이던 문제 — 상단 안전 영역을 비워 두고 단색 띠로 덮는다. */
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top); background: var(--bg); z-index: 200; pointer-events: none; }
@media (min-width: 900px) {
  #app { padding-top: env(safe-area-inset-top); box-sizing: border-box; }
  .rail { padding-top: 12px; }
}
@media (max-width: 899px) {
  body.mhead-hidden .lounge .thread-head { padding-top: calc(12px + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) {
  body::before { height: calc(env(safe-area-inset-top) + 6px); }
  @media (min-width: 900px) { #app { padding-top: calc(env(safe-area-inset-top) + 6px); } }
}

/* ================================================================ 2.2.5 설정 폼(일반): 한 줄씩 정렬된 설정 행 */
.settings-grid.form-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.settings .card.set-card { container-type: inline-size; }
.settings .card.set-card { padding: 0; gap: 0; overflow: hidden; }
.set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 12px; }
.set-head-t { min-width: 0; }
.set-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.set-desc { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.set-save { flex-shrink: 0; min-width: 64px; }
.set-rows { display: flex; flex-direction: column; padding: 0 20px 6px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(230px, 50%)); align-items: center; gap: 16px; min-height: 52px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.set-row.wide { grid-template-columns: minmax(0, 1fr) minmax(0, min(300px, 64%)); }
@container (max-width: 520px) {
  .set-row.wide { grid-template-columns: 1fr; gap: 8px; }
  .set-row.wide .set-ctl { justify-content: stretch; }
  .set-unit .set-num { width: 76px; flex-basis: 76px; }
  .set-unit .u { min-width: 36px; }
}
.set-label { min-width: 0; }
.set-label label { font-size: 14px; font-weight: 600; color: var(--ink); }
.set-hint { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.set-ctl { min-width: 0; display: flex; justify-content: flex-end; }
.set-ctl > .select, .set-ctl > .input, .set-ctl > input[type=time] { width: 100%; max-width: 230px; height: 38px; box-sizing: border-box; }
.set-ctl > input[type=time] { text-align: center; }
.set-unit { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 230px; justify-content: flex-end; }
.set-unit .set-num { width: 96px; flex: 0 0 96px; height: 38px; text-align: right; box-sizing: border-box; }
.set-unit .u { font-size: 13px; color: var(--muted); min-width: 44px; }
.set-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; }
.set-range input[type=time] { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; text-align: center; }
.set-ctl .seg.wide { width: 100%; display: flex; }
.set-ctl .seg.wide button { flex: 1; }
.set-foot, .set-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid var(--line-2); }
.set-rows > .set-actions { padding: 10px 0; }
.set-rows > .team-rules { padding: 12px 0 10px; border-top: 1px solid var(--line-2); margin-top: 0 !important; }
/* 체크박스 → 스위치 */
input[type=checkbox].sw { -webkit-appearance: none; appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--line-strong); position: relative; cursor: pointer; margin: 0; flex-shrink: 0; transition: background .15s; border: 0; }
input[type=checkbox].sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
input[type=checkbox].sw:checked { background: var(--review); }
input[type=checkbox].sw:checked::after { transform: translateX(18px); }
input[type=checkbox].sw:focus-visible { outline: 2px solid var(--decide); outline-offset: 2px; }
@media (max-width: 899px) {
  .set-head, .set-rows, .set-foot { padding-left: 16px; padding-right: 16px; }
  .set-row { grid-template-columns: minmax(0, 1fr) minmax(0, 170px); gap: 12px; }
  .set-row.wide { grid-template-columns: 1fr; gap: 8px; }
  .set-row.wide .set-ctl { justify-content: stretch; }
  .set-unit .set-num { width: 80px; flex-basis: 80px; }
}
/* 드로어(직원 프로필 편집 등) 본문은 세로로만 스크롤 — 넓은 입력칸·사진 때문에 좌우로 밀리던 문제 */
.drawer-body { overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; }
.drawer-body .form-grid, .drawer-body .field, .drawer-body .field-group { min-width: 0; max-width: 100%; }
.drawer-body .input, .drawer-body .select, .drawer-body .textarea { max-width: 100%; box-sizing: border-box; }
.drawer-body .form-grid { grid-template-columns: minmax(0, 1fr); }
.drawer-body input[type=date], .drawer-body input[type=time], .drawer-body input[type=number] { min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }

/* ================================================================ 2.3 회의 */
.rail .ri .r-live { position: absolute; top: 4px; left: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--st-work); box-shadow: 0 0 0 2px var(--rail-bg); animation: mtPulse 1.6s ease-in-out infinite; }
@keyframes mtPulse { 50% { opacity: .45; } }
.meet-shell { display: flex; width: 100%; min-width: 0; min-height: 0; flex-grow: 1; }
.meet-shell.mobile { flex-direction: column; }
.mt-sb-top { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.mt-convene { width: 100%; justify-content: center; gap: 6px; height: 38px; display: inline-flex; align-items: center; }
.mt-rooms { height: 34px; }
.mt-list { display: flex; flex-direction: column; gap: 2px; }
.mt-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; color: var(--ink-2); text-decoration: none; min-width: 0; }
.mt-row:hover { background: var(--hover); text-decoration: none; color: var(--ink); }
.mt-row.sel { background: var(--sel-bg); color: #fff; }
.mt-row.sel .mt-s, .mt-row.sel .mt-timer { color: rgba(255,255,255,.8); }
.mt-row.off .mt-t { text-decoration: line-through; color: var(--muted); }
.mt-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.mt-row.sel .mt-ic { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.mt-ic.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-work); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-work) 25%, transparent); animation: mtPulse 1.6s ease-in-out infinite; }
.mt-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mt-t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-timer { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--st-work); font-variant-numeric: tabular-nums; }
.mt-need { width: 18px; height: 18px; border-radius: 50%; background: var(--confirm); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.mt-detail { display: flex; flex: 1; min-width: 0; min-height: 0; }
.mt-center { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--bg); }
.mt-head { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px) * 0) 24px 12px; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.mt-head-t { flex: 1; min-width: 220px; }
.mt-head h1 { margin: 2px 0 0; font-size: 21px; font-weight: 800; line-height: 1.3; }
.mt-head-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-head-a .btn { display: inline-flex; align-items: center; gap: 6px; }
.mt-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; color: var(--muted); }
.mt-meta > * + *::before { content: '|'; margin-right: 8px; color: var(--dot); }
.mt-room { color: var(--decide) !important; font-weight: 700; }
.mt-link { color: var(--decide); font-weight: 700; }
.mt-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; font-weight: 700; background: var(--nav-bg); color: var(--muted); }
.mt-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mt-pill.st-live { background: var(--review-bg); color: var(--review); }
.mt-pill.st-requested { background: var(--confirm-bg); color: var(--confirm); }
.mt-pill.st-scheduled { background: var(--decide-bg); color: var(--decide); }
.mt-rounds { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; font-size: 13px; font-weight: 700; background: var(--panel); }
.mt-rounds .bars { display: inline-flex; gap: 3px; }
.mt-rounds .bars i { width: 16px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.mt-rounds .bars i.on { background: var(--st-work); }
.mt-clock { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; font-family: var(--mono); font-size: 13px; color: var(--muted); background: var(--panel); }
.mt-clock b { color: var(--ink); margin-right: 4px; }
.mt-back { margin-left: -8px; }
.mt-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
.mt-thread { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.mt-sys { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.mt-sys::before, .mt-sys::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.mt-sys span { max-width: 80%; text-align: center; }
.mt-msg { display: flex; gap: 10px; align-items: flex-start; }
.mt-msg.me { justify-content: flex-end; }
.mt-av { flex-shrink: 0; padding-top: 2px; }
.mt-bd { min-width: 0; max-width: min(640px, 86%); }
.mt-msg.me .mt-bd { display: flex; flex-direction: column; align-items: flex-end; }
.mt-who { font-size: 13px; margin-bottom: 4px; }
.mt-fac { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--decide-bg); color: var(--decide); }
.mt-bub { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.mt-bub .md > :first-child { margin-top: 0; } .mt-bub .md > :last-child { margin-bottom: 0; }
.mt-msg.me .mt-bub { background: var(--decide-bg); border-color: var(--boss-bubble-line); }
.mt-bub.dots { display: inline-flex; gap: 4px; padding: 12px 14px; }
.mt-bub.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: mtDot 1.2s infinite; }
.mt-bub.dots i:nth-child(2) { animation-delay: .2s; } .mt-bub.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes mtDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.mt-composer { display: flex; gap: 8px; align-items: flex-end; margin: 0 24px 16px; padding: 10px 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); max-width: 820px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.mt-composer textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink); min-height: 44px; max-height: 160px; padding: 4px 0; }
.mt-send { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mt-before { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.mt-big { font-size: 16px; }
.mt-reason { background: var(--confirm-bg); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.mt-reason .lbl { color: var(--confirm); font-weight: 700; margin-bottom: 2px; }
.mt-minutes { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.mt-min-body { padding: 16px 20px; }
.mt-min-body h3 { font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
.mt-min-body h3:first-child { margin-top: 0; }
.mt-acts { padding: 14px 16px; }
.mt-acts-h { margin-bottom: 8px; }
.mt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mt-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.mt-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.mt-table tr:last-child td { border-bottom: 0; }
.mt-table td.who { white-space: nowrap; }
.mt-table td.who > * { vertical-align: middle; } .mt-table td.who span { margin-left: 6px; }
.mt-tag { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--decide-bg); font-size: 11px; margin-right: 4px; }
.mt-side { width: 300px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1200px) { .mt-side { width: 260px; } }
@media (max-width: 1080px) { .mt-side { display: none; } }
.mt-side-h { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.mt-agenda { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mt-person { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.mt-info { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 4px 14px; }
.mt-info > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.mt-info > div:last-child { border-bottom: 0; }
.mt-info span { color: var(--muted); }
.mt-office { width: 100%; }
.mt-empty { padding: 40px; color: var(--muted); text-align: center; }
.mt-tabs button { min-height: 30px; }

/* 회의실 일정 */
.mt-grid { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.mt-grid-h, .mt-grid-r { display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.mt-grid-h { border-bottom: 1px solid var(--line); }
.mt-grid-hours { display: grid; grid-template-columns: repeat(10, 1fr); }
.mt-grid-hours span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); padding: 8px 6px; border-left: 1px solid var(--line-2); }
.mt-grid-r { min-height: 92px; border-bottom: 1px solid var(--line-2); }
.mt-grid-r:last-child { border-bottom: 0; }
.mt-grid-c0 { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.mt-grid-c0 b { font-size: 14px; } .mt-grid-c0 span { font-size: 12px; color: var(--muted); }
.mt-grid-lane { position: relative; cursor: copy; background-image: linear-gradient(to right, var(--line-2) 1px, transparent 1px); background-size: 10% 100%; }
.mt-blk { position: absolute; top: 8px; bottom: 8px; border-radius: 9px; padding: 6px 8px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; background: var(--nav-bg); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; min-width: 34px; cursor: pointer; }
.mt-blk b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt-blk span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mt-blk:hover { text-decoration: none; filter: brightness(.97); }
.mt-blk.st-live { background: var(--review-bg); border-color: var(--review); color: var(--review); }
.mt-blk.st-scheduled { background: var(--decide-bg); border-color: color-mix(in srgb, var(--decide) 40%, transparent); color: var(--decide); }
.mt-blk.st-requested { background: var(--confirm-bg); border: 1px dashed var(--confirm); color: var(--confirm); }
.mt-blk.st-ended { opacity: .75; }
.mt-now { position: absolute; top: 0; bottom: 0; left: calc(130px + (100% - 130px) * var(--x) / 100); width: 2px; background: var(--urgent); pointer-events: none; }
.mt-now span { position: absolute; bottom: 4px; left: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--urgent); background: var(--panel); padding: 0 3px; border-radius: 3px; }
.mt-room-card { padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.mt-room-h { display: flex; justify-content: space-between; align-items: baseline; }
.mt-slot { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: var(--decide-bg); color: var(--ink); text-decoration: none; font-size: 14px; }
.mt-slot.st-live { background: var(--review-bg); } .mt-slot.st-requested { background: var(--confirm-bg); } .mt-slot.st-ended { background: var(--nav-bg); }

/* 모바일 */
.mt-mlist { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--bg); padding-top: 10px; }
.mt-mlist .sb-scroll { padding: 2px 12px 90px; }
.mt-mlist .mt-row { padding: 10px 8px; }
.mt-mlist .sb-sec-h { font-size: 13px; }
.mt-detail.mobile .mt-head { padding: 10px 14px; }
.mt-detail.mobile .mt-head h1 { font-size: 18px; }
.mt-detail.mobile .mt-head-a { width: 100%; }
.mt-detail.mobile .mt-scroll, .meet-shell.mobile .mt-scroll { padding: 14px 14px 20px; }
.mt-detail.mobile .mt-composer { margin: 0 10px 10px; }
.mt-detail.mobile .mt-clock, .mt-detail.mobile .mt-rounds { height: 30px; padding: 0 8px; font-size: 12px; }
.mt-detail.mobile .mt-table th:nth-child(3), .mt-detail.mobile .mt-table td:nth-child(3) { display: none; }

/* 소집 드로어 */
.mf-drawer { width: min(470px, 100vw); }
.mf-body { display: flex; flex-direction: column; gap: 6px; }
.mf-body .lbl { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mf-body .lbl .muted { font-weight: 400; }
.mf-body input[type=text], .mf-body textarea, .mf-body select, .mf-body input[type=datetime-local] { width: 100%; max-width: 100%; box-sizing: border-box; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-2); font-size: 13.5px; cursor: pointer; }
.mf-chip .avatar, .mf-chip .avatar-holder { width: 22px; height: 22px; font-size: 10px; }
.mf-chip.on { background: var(--sel-bg); border-color: var(--sel-bg); color: #fff; font-weight: 700; }
.mf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.mf-2b { grid-template-columns: minmax(0, 1fr) auto; }
.mf-seg { width: 100%; } .mf-seg button { flex: 1 1 0; text-align: center; padding: 6px 4px; }
.mf-step { display: inline-flex; align-items: center; gap: 4px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 4px; background: var(--panel); }
.mf-step b { min-width: 26px; text-align: center; }
.mf-step .btn { width: 30px; height: 30px; padding: 0; }
.mf-hints { font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mf-hints .ok { color: var(--review); } .mf-hints .warn { color: var(--confirm); }
.mf-hints .linkish { border: 0; background: none; color: var(--decide); font-weight: 700; padding: 0; cursor: pointer; font-size: inherit; }
.mf-foot { align-items: center; gap: 8px; }
.mf-foot .grow { flex: 1; }

/* 책상 · 오늘 회의 띠 */
.meet-strip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.meet-strip .ms-h { font-size: 12.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.meet-strip .ms-items { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.meet-strip .ms-items::-webkit-scrollbar { display: none; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--decide-bg); color: var(--ink); font-size: 13px; white-space: nowrap; text-decoration: none; max-width: 340px; }
.ms-chip:hover { text-decoration: none; filter: brightness(.97); }
.ms-chip .tt { overflow: hidden; text-overflow: ellipsis; }
.ms-chip.st-live { background: var(--review-bg); } .ms-chip.st-live b { color: var(--review); }
.ms-chip.st-requested { background: var(--confirm-bg); } .ms-chip.st-requested b { color: var(--confirm); }
.ms-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-work); animation: mtPulse 1.6s ease-in-out infinite; }
.desk-queue > .meet-strip { margin: 0 14px 10px; }

/* 자동화 · 회의 */
.meet-auto { margin-top: 18px; }
.meet-auto .sec-t { display: flex; align-items: center; gap: 6px; }
.meet-auto .sys-row select { max-width: 210px; }
.meet-auto .sys-txt { min-width: 160px; }
.meet-auto .sys-t { white-space: nowrap; }
.meet-auto .num { width: 64px; }
.meet-auto .with-unit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mreg-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.mreg-row:last-child { border-bottom: 0; }
.mreg-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin: 8px 0; }
.mreg-line { display: flex; gap: 6px; flex-wrap: wrap; }
.mf-body .input, .mf-body .select { height: 40px; border-radius: 10px; }
.mf-body .textarea { min-height: 76px; border-radius: 10px; }
.meet-auto .input, .meet-auto .select { height: 36px; border-radius: 9px; }
.meet-auto input[type=time] { width: 118px; }
.mreg-form .textarea { min-height: 60px; }
.mt-slot > span:last-child { white-space: nowrap; flex-shrink: 0; margin-left: auto; }
.mt-slot > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ 2.3 패널 폭 조절 */
.p-resize { width: 6px; flex-shrink: 0; cursor: col-resize; position: relative; z-index: 5; touch-action: none; outline: none; }
.p-resize.after { margin-left: -6px; } .p-resize.before { margin-right: -6px; }
.p-resize::after { content: ''; position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; }   /* 터치 영역 18px */
.p-resize::before { content: ''; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--decide); opacity: 0; transition: opacity .12s; }
@media (hover: hover) { .p-resize:hover::before { opacity: .6; } }
.p-resize.dragging::before, .p-resize:focus-visible::before { opacity: 1; }
body.p-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.p-resizing iframe { pointer-events: none; }
@media (max-width: 899px) { .p-resize { display: none; } }
@media (min-width: 900px) and (max-width: 1279px) { .p-resize.before { display: none; } }
.desk-side, .work-side { position: relative; }

/* 2.3 책상 지시창: 가운데 열 맨 위 고정, 스크롤하면 한 줄로 */
@media (min-width: 900px) {
  .desk-main { padding-top: 0; }
  .desk-main > .credit-banner:first-child { margin-top: 20px; }
  .desk-main > .desk-compose { position: sticky; top: 0; z-index: 6; margin: 0 0 8px; padding: 20px 0 8px; background: var(--bg); }
  .desk-main > .desk-compose::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .desk-main > .desk-compose .newtask { transition: padding .12s; }
  .desk-main > .desk-compose.compact { cursor: text; }
  .desk-main > .desk-compose.compact .newtask { padding: 6px 12px; }
  .desk-main > .desk-compose.compact .newtask-toolbar, .desk-main > .desk-compose.compact .desk-advanced, .desk-main > .desk-compose.compact .desk-suggest { display: none; }
  .desk-main > .desk-compose.compact .newtask-ta { height: 24px !important; min-height: 24px; }
}

/* ================================================================ 2.3 새 지시 (어디서나) */
.rail .rail-new { margin-bottom: 6px; }
.rail .rail-new .ico { background: var(--decide); color: #fff; border-color: var(--decide); }
.rail .rail-new:hover .ico { filter: brightness(1.08); }
#quick.hidden { display: none; }
.qk-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.28); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.qk-card { width: min(680px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 80px var(--shadow); padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 8px; animation: qkIn .16s ease-out; }
@keyframes qkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.qk-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 14px; }
.qk-head .kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); }
.qk-head .grow { flex: 1; }
.qk-nt { border-radius: 16px; box-shadow: none; }
.qk-nt .newtask-ta { font-size: 15.5px; }
.qk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 2px; }
.qk-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 9px; border-radius: 13px; background: var(--decide-bg); color: var(--decide); font-size: 12.5px; font-weight: 600; max-width: 100%; }
.qk-chip .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-chip.muted { background: var(--nav-bg); color: var(--muted); font-weight: 500; padding-right: 9px; }
.qk-chip.on { background: var(--review-bg); color: var(--review); }
.qk-x { border: 0; background: transparent; color: inherit; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.qk-x:hover { background: rgba(0,0,0,.08); }
.qk-send { display: inline-flex; }
.qk-go { width: 44px; height: 40px; border-radius: 20px 0 0 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.qk-more { width: 30px; height: 40px; border-radius: 0 20px 20px 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255,255,255,.25); }
.qk-menu { position: absolute; right: 0; top: 46px; width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px var(--shadow); padding: 6px; z-index: 5; }
.qk-menu-h { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 6px 10px 4px; }
.qk-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 9px; text-align: left; cursor: pointer; color: var(--ink); }
.qk-item:hover { background: var(--hover); }
.qk-item .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--nav-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.qk-item .tx { display: flex; flex-direction: column; } .qk-item .tx b { font-size: 13.5px; } .qk-item .tx span { font-size: 12px; color: var(--muted); }
.qk-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.qk-quick .chip { display: inline-flex; align-items: center; gap: 5px; }
.qk-fab { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(72px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--decide); color: #fff; box-shadow: 0 8px 24px rgba(62,67,184,.35); display: inline-flex; align-items: center; justify-content: center; z-index: 90; cursor: pointer; }
.qk-fab:active { transform: scale(.96); }
@media (min-width: 900px) { .qk-fab { display: none; } }
@media (max-width: 899px) {
  .qk-backdrop { align-items: flex-end; padding: 0; }
  .qk-card.sheet { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: qkUp .18s ease-out; }
  @keyframes qkUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .qk-menu { right: 0; left: auto; top: auto; bottom: 46px; }
  .qk-card.sheet .qk-nt { margin-bottom: 4px; }
  .qk-quick { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}
body.quick-open .qk-fab { display: none; }
/* 답장 미리보기가 길어도 입력 카드가 화면 밖으로 넓어지지 않게 */
.thread-input > .newtask { flex: 1 1 0; min-width: 0; max-width: 100%; }
.reply-preview { width: 100%; }

/* 2.3.1 새 지시 카드 정렬·간격 */
.qk-head { min-height: 32px; }
.qk-head .kbd { display: inline-flex; align-items: center; height: 20px; line-height: 1; }
.qk-head .dlg-x { margin-right: -4px; }
.qk-nt { padding: 12px 12px 10px 14px; gap: 0; }
.qk-nt .newtask-ta { padding: 4px 0 6px; }
.qk-chips { padding: 6px 0 4px; }
.qk-chip { height: 28px; padding: 0 6px 0 10px; }
.qk-chip > span:first-child { display: inline-flex; flex-shrink: 0; align-items: center; }
.qk-chip > span:first-child svg { display: block; }
.qk-nt .newtask-toolbar { margin-top: 10px; }
.qk-nt .newtask-tools { gap: 8px; }
.qk-assign { font-size: 12.5px; color: var(--muted); padding-left: 4px; white-space: nowrap; }
.qk-go svg, .qk-more svg { display: block; }
.qk-quick { gap: 8px; padding: 2px 2px 0; }
.qk-quick .chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; min-height: 34px; padding: 0 13px 0 11px; line-height: 1; }
.qk-quick .chip > span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.qk-quick .chip > span svg { display: block; width: 16px; height: 16px; }
.qk-menu { top: 46px; }
.qk-item .ic svg { display: block; }

/* 2.3.1 모바일 라운지: 입력 카드가 대화 위에 반투명으로 떠 있고, 양옆으로 대화가 비쳐 스크롤된다 */
@media (max-width: 899px) {
  #screen-lounge .lounge { position: relative; }
  #screen-lounge .lounge .thread-input.lounge-thread-input { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: transparent; border-top: 0; padding: 6px 10px 8px; pointer-events: none; }
  #screen-lounge .lounge .lounge-thread-input > * { pointer-events: auto; }
  #screen-lounge .lounge-compose { background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 6px 28px rgba(0,0,0,.14); border-color: color-mix(in srgb, var(--line-strong) 70%, transparent); }
  #screen-lounge .lounge .thread { padding-bottom: calc(var(--composer-h, 110px) + 4px); }
  #screen-lounge .lounge .jump-latest-btn { bottom: calc(var(--composer-h, 110px) + 10px); }
}

/* 2.3.1 아이콘 중심선: 버튼·링크·행 안의 아이콘 span 은 항상 인라인 플렉스로, svg 는 블록으로 → 글줄 기준선 때문에 위로 뜨지 않는다 */
button > span:has(> svg:only-child), a > span:has(> svg:only-child), label > span:has(> svg:only-child), .sb-row > span:has(> svg:only-child), .ms-row > span:has(> svg:only-child) { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
button > span > svg:only-child, a > span > svg:only-child, label > span > svg:only-child { display: block; }

/* ================================================================ 2.3.1 arolo 룩 (기본) — 살짝 붉은 웜 그레이 + 벽돌 레드 포인트 */
:root[data-look="arolo"] {
  --bg: #F8F5F3; --bg-2: #FCFAF8; --panel: #FFFFFF; --nav-bg: #EFE9E6;
  --line: #E9E2DF; --line-2: #F1EBE8; --line-strong: #DBD1CD;
  --ink: #1C1718; --ink-2: #3D3536; --muted: #6B5E5C;
  --brand: #C2423A; --brand-deep: #A83229; --brand-bg: #FBEBE8; --brand-line: #F2C9C3;
  --urgent: #8F2D1E; --urgent-bg: #F8E4DF;
  --sb-bg: #EFE9E6; --rail-bg: #E8E1DD; --hover: rgba(28,23,24,.06); --sel-bg: #C2423A;
  --dot: #BDB2AE; --shadow: rgba(28,23,24,.16); --boss-bubble-line: #D6D8F5;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="arolo"]:not([data-theme="light"]) {
  --bg: #171314; --bg-2: #1C1718; --panel: #211B1C; --nav-bg: #2A2324;
  --line: #2E2627; --line-2: #292223; --line-strong: #3C3334;
  --ink: #F3EEEC; --ink-2: #D4CCC9; --muted: #A79C99;
  --brand: #E56A5F; --brand-deep: #C2423A; --brand-bg: #3A2321; --brand-line: #5A312D;
  --urgent: #F08A5C; --urgent-bg: #3A1F14;
  --on-ink: #171314; --dot: #4A3F40; --shadow: rgba(0,0,0,.5);
  --sb-bg: #1C1718; --rail-bg: #120F10; --hover: rgba(255,255,255,.06); --sel-bg: #C2423A;
  --decide: #8A8EF0; --decide-bg: #26284A; --confirm: #E0B45E; --confirm-bg: #3A2E12; --review: #5CC4B6; --review-bg: #123430; --plan: #C39AE0; --plan-bg: #2E1F3A;
  --link-hover: #B0B3F5; --idle: #8CA0C4; --warn-line: #5A4520; --warn-bg: #2A2416;
  --file-bg: #26283A; --file-line: #3A3D55; --file-ink: #9FB0E8; --boss-bubble-line: #3A3D6A; --incident-bg: #2A2320; --iframe-bg: #FFFFFF;
  color-scheme: dark;
  }
}
:root[data-look="arolo"][data-theme="dark"] {
  --bg: #171314; --bg-2: #1C1718; --panel: #211B1C; --nav-bg: #2A2324;
  --line: #2E2627; --line-2: #292223; --line-strong: #3C3334;
  --ink: #F3EEEC; --ink-2: #D4CCC9; --muted: #A79C99;
  --brand: #E56A5F; --brand-deep: #C2423A; --brand-bg: #3A2321; --brand-line: #5A312D;
  --urgent: #F08A5C; --urgent-bg: #3A1F14;
  --on-ink: #171314; --dot: #4A3F40; --shadow: rgba(0,0,0,.5);
  --sb-bg: #1C1718; --rail-bg: #120F10; --hover: rgba(255,255,255,.06); --sel-bg: #C2423A;
  --decide: #8A8EF0; --decide-bg: #26284A; --confirm: #E0B45E; --confirm-bg: #3A2E12; --review: #5CC4B6; --review-bg: #123430; --plan: #C39AE0; --plan-bg: #2E1F3A;
  --link-hover: #B0B3F5; --idle: #8CA0C4; --warn-line: #5A4520; --warn-bg: #2A2416;
  --file-bg: #26283A; --file-line: #3A3D55; --file-ink: #9FB0E8; --boss-bubble-line: #3A3D6A; --incident-bg: #2A2320; --iframe-bg: #FFFFFF;
  color-scheme: dark;
}
/* 레드는 브랜드 자리에만: 로고, 새 지시, 선택 행, 탭바 활성, 떠 있는 버튼, 레일 활성 아이콘 */
[data-look="arolo"] .rail-logo { background: var(--brand); color: #fff; }
[data-look="arolo"] .rail .rail-new .ico { background: var(--brand); border-color: var(--brand); }
[data-look="arolo"] .rail .ri.on { color: var(--brand-deep); }
[data-look="arolo"] .tabbar a.active { color: var(--brand); }
[data-look="arolo"] .qk-fab { background: var(--brand); box-shadow: 0 8px 24px rgba(194,66,58,.35); }
[data-look="arolo"] .ll-back { color: var(--brand); }
[data-look="arolo"] .mt-row.sel, [data-look="arolo"] .sb-row.sel { background: var(--sel-bg); }
[data-look="arolo"] .sb-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
[data-look="arolo"] .mf-chip.on { background: var(--brand); border-color: var(--brand); }
[data-look="arolo"] .qk-chip { background: var(--brand-bg); color: var(--brand-deep); }
[data-look="arolo"] .mt-need { background: var(--brand); }

/* 2.3.2 모바일 책상: 지시창도 라운지처럼 카드 목록 위에 반투명으로 떠 있다 */
@media (max-width: 899px) {
  .desk > .desk-compose { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: transparent; border-top: 0; padding: 6px 10px 8px; pointer-events: none; }
  .desk > .desk-compose > * { pointer-events: auto; }
  .desk > .desk-compose .newtask { background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 6px 28px rgba(0,0,0,.14); border-color: color-mix(in srgb, var(--line-strong) 70%, transparent); }
  .desk > .desk-queue { padding-bottom: calc(var(--composer-h, 120px) + 4px); }
  body.panel-open .desk > .desk-compose { display: none; }
}

/* 2.3.2 arolo 브랜드 자산 */
.rail-logo { background: transparent; overflow: hidden; padding: 0; }
.rail-logo img { width: 38px; height: 38px; display: block; border-radius: 11px; }
[data-look="arolo"] .rail-logo { background: transparent; }
.header .brand .brand-logo { display: block; height: 22px; width: auto; }
/* 로그인 로고, 모바일 윗줄 심볼은 단색(라이트: 잉크, 다크: 흰색). 레일 아이콘(PC)과 앱 아이콘은 2색 그대로. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { content: url('/static/brand/logotype-white.svg'); } :root:not([data-theme="light"]) .login-logo { content: url('/static/brand/vertical-white.svg'); } }
:root[data-theme="dark"] .brand-logo { content: url('/static/brand/logotype-white.svg'); }
:root[data-theme="dark"] .login-logo { content: url('/static/brand/vertical-white.svg'); }
.header .brand.mtitle .brand-logo { display: none; }
.login-brand { display: flex; justify-content: center; margin-bottom: 6px; }
.login-logo { display: block; width: 120px; height: auto; }
.mt-del { width: 34px; height: 34px; color: var(--muted); }
.mt-del:hover { color: var(--urgent); }

.qk-nt .mention-ta-wrap { width: 100%; }
.qk-nt .mention-dd { z-index: 30; }

@media (max-width: 899px) { .qk-card.sheet .qk-menu { top: auto; bottom: 46px; } }

/* 2.3.3 모바일 윗줄: 심볼 + 화면 이름 */
.header .brand.mtitle { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.header .brand.mtitle .mlock { height: 22px; width: auto; display: block; flex-shrink: 0; }
.header .brand.mtitle .mtitle-sep { width: 1px; height: 16px; background: var(--line-strong); flex-shrink: 0; }
.header .brand.mtitle .mtitle-t { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mlock { content: url('/static/brand/horizontal-white.svg'); } }
:root[data-theme="dark"] .mlock { content: url('/static/brand/horizontal-white.svg'); }

/* 2.3.3 설정 시간 범위: iOS 시간 입력칸이 고유 폭으로 커져 카드 밖으로 넘치던 문제 */
.set-range { max-width: 100%; min-width: 0; overflow: hidden; }
.set-range input[type=time], .set-ctl > input[type=time], .meet-auto input[type=time] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; height: 38px; padding: 0 8px; font-size: 15px; line-height: 38px; text-align: center; box-sizing: border-box; }
.set-range input[type=time]::-webkit-date-and-time-value, .set-ctl > input[type=time]::-webkit-date-and-time-value { text-align: center; }
.set-range input[type=time]::-webkit-calendar-picker-indicator { display: none; }
@media (max-width: 899px) { .set-row.wide { grid-template-columns: 1fr; } .set-row.wide .set-ctl { width: 100%; } }

/* ================================================================ 2.4 설정 → 시스템: 디스크 사용량, 백업 */
.sys-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.sys-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sys-table td:last-child { white-space: nowrap; width: 1%; }
.sys-disk { grid-column: 1 / -1; }
.sys-table td { padding: 8px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.sys-table tr:last-child td { border-bottom: 0; }
.sys-table .num, .sys-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sys-table.compact td { padding: 5px 6px; font-size: 13px; }
.sys-table td .btn.sm { white-space: nowrap; }
.sys-table .clean-m { display: none; }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 6px; }
@media (max-width: 899px) { .sys-grid { grid-template-columns: 1fr; } .sys-table th:nth-child(4), .sys-table td:nth-child(4) { display: none; } }
.sys-sub { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 6px 0 2px; }
.sys-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; padding: 4px 2px 0; }
.sys-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.sys-bar i { width: 100%; max-width: 28px; border-radius: 4px 4px 2px 2px; background: var(--decide); opacity: .75; display: block; }
.sys-bar span { font-size: 10.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.bk-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.bk-part { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; border: 1px solid var(--line-strong); background: var(--panel); font-size: 13px; cursor: pointer; }
.bk-part.on { background: var(--decide-bg); border-color: var(--decide); color: var(--decide); font-weight: 600; }
.bk-part input { margin: 0; accent-color: var(--decide); }
.bk-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bk-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.bk-row:last-child { border-bottom: 0; }
.bk-row .grow { flex: 1 1 240px; min-width: 0; }
.bk-row .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-preview { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.note.err { border-color: var(--urgent); color: var(--urgent); }
@media (max-width: 899px) {
  .sys-table th:nth-child(3), .sys-table td:nth-child(3) { display: none; }
  .sys-table th:last-child, .sys-table td.clean-col { display: none; }
  .sys-table .clean-m { display: inline-flex; margin-top: 6px; }
  .sys-disk .count .n { font-size: 20px; }
  .sys-table td:first-child .mono { word-break: break-all; }
}

/* 2.4.2 Drive 저장 */
.drive-card .set-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
.drive-card .set-ctl { justify-content: flex-start; }
.drive-card .set-ctl > .select, .drive-card .set-ctl > .input { max-width: 100%; }
.drive-card .set-row:has(.switch) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.drive-recent { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.drive-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line-2); }
.drive-row:last-child { border-bottom: 0; }
.drive-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex-shrink: 0; }
.ds.done { background: var(--st-work); } .ds.failed { background: var(--urgent); } .ds.pending { background: var(--confirm); }
.drive-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-decoration: none; flex-shrink: 0; }
.drive-chip.on { background: var(--review-bg); color: var(--review); }
.drive-chip.on:hover { text-decoration: none; filter: brightness(.95); }
.drive-chip.off { background: var(--nav-bg); color: var(--muted); font-weight: 500; }
.drive-chip.wait { background: var(--confirm-bg); color: var(--confirm); }
.drive-chip.err { background: var(--urgent-bg); color: var(--urgent); }

.bk-sched { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.bk-sched-row { display: grid; grid-template-columns: 96px minmax(0, 200px) 1fr; align-items: center; gap: 8px; font-size: 13.5px; }
.bk-sched-row .input { height: 34px; }
.bk-sched-row .input.num { width: 72px; }
@media (max-width: 899px) { .bk-sched-row { grid-template-columns: 96px minmax(0, 1fr); } .bk-sched-row > span:first-child { white-space: nowrap; } .bk-sched-row > :nth-child(3) { grid-column: 2; } }
.file-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.file-sub .drive-chip { height: 18px; font-size: 10.5px; padding: 0 6px; }
.bk-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--confirm-bg); color: var(--confirm); font-size: 11px; font-weight: 700; font-family: var(--sans); }

/* 책상 "전체" 범위: 답한 카드 */
.answered-badge { background: var(--nav-bg); color: var(--muted); border: 1px solid var(--line); }
.req-card:has(.answered-badge) { opacity: .78; }
.req-card:has(.answered-badge).active, .req-card:has(.answered-badge):hover { opacity: 1; }
.answer-done { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.options.done .option { opacity: .7; }
.options.done .option.chosen { opacity: 1; border-color: var(--ink); }
.desk-scope { flex-shrink: 0; }
.desk-scope button { height: 30px; padding: 0 9px; font-size: 12.5px; white-space: nowrap; }
.sb-head .desk-sort { min-width: 0; }

/* 파일 끌어 놓기(2.4.6): 지시창, 끼어들기, 라운지, 결정 메모, 새 지시 카드 */
[data-drop] { position: relative; }
[data-drop].drop-on { border-color: var(--brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
[data-drop].drop-on::after { content: '여기에 놓으면 첨부됩니다'; position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  border-radius: inherit; background: color-mix(in srgb, var(--panel) 86%, var(--brand) 14%); color: var(--brand-deep, var(--brand)); font-size: 14px; font-weight: 700; pointer-events: none; }