/* Chloe 2.0 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;
  --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;
  --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;
  --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;
  --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;
  --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;
  --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"] .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;
  --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: 12px;
}
@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;
  --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;
  --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;
}
[data-look="macos"] .serif { font-weight: 700; letter-spacing: -0.01em; }
/* 버튼: macOS 컨트롤은 창 모서리보다 훨씬 덜 둥글다(~6~8px) — 은은한 입체감(위쪽 하이라이트,
   아래쪽 그림자)으로 "눌러지는 버튼" 느낌을 낸다. */
[data-look="macos"] .btn { border-radius: 7px; border-color: var(--line-strong); box-shadow: 0 1px 0 rgba(255,255,255,.5) 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: 6px; }
[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: 7px; 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: 10px; }
[data-look="macos"] .card, [data-look="macos"] .menu, [data-look="macos"] .dialog { box-shadow: 0 2px 10px var(--shadow); border-color: var(--line); }
[data-look="macos"] .bubble { border-radius: 14px; }
[data-look="macos"] .chip, [data-look="macos"] .badge, [data-look="macos"] .mention-chip { border-radius: 999px; }
/* 세그먼트 컨트롤: 선택된 조각에 옅은 그림자를 얹어 macOS 세그먼트 버튼처럼 "떠 있는" 느낌을 준다 */
[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(1.8) blur(18px); background: color-mix(in srgb, var(--nav-bg) 72%, transparent); }
/* .lounge-tabs 는 원래 배경색이 없어서(페이지 배경과 그대로 이어짐) 여기에만 반투명 유리 배경을
   얹으면 주변과 색이 안 맞는 사각형처럼 튀어 보였다 — 뜬 상태로 스크롤 위에 겹치는 nav/thread-input/
   tabbar 와 달리 lounge-tabs 는 페이지 안에 얌전히 있는 줄이라 빼는 게 맞다. */
[data-look="macos"] .thread-input, [data-look="macos"] .tabbar { backdrop-filter: saturate(1.8) blur(18px); background: color-mix(in srgb, var(--panel) 82%, transparent); }
/* 스크롤바(앱 전체): 평소엔 안 보이다가, 스크롤 중이거나 그 위에 마우스를 올렸을 때만 얇고
   반투명한 알약 모양으로 나타난다(오버레이 스타일). .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 { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { body { overflow-y: scroll; } }
/* ---------- 핀치줌 금지, 페이지 좌우 스크롤 금지 (앱 셸 자체) ---------- */
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, .tabbar, label, th, .h-label, .section-title, .seg, .avatar, .file-ico, .kv span:first-child { -webkit-user-select: none; user-select: none; }
.file-row .name, .file-row .name.linkish { -webkit-user-select: text; user-select: text; }
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: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); }
.pill { font-size: 12px; font-weight: 600; }
.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); }
.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 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; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: center; }
.kv span:first-child { color: var(--muted); }
.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; }
.md pre { font-family: var(--mono); font-size: 12px; background: var(--nav-bg); padding: 10px 12px; border-radius: 8px; overflow: auto; }
.md table { border-collapse: collapse; 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; }
.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: 100; 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: 2px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; }
.pw-field .pw-toggle svg { display: block; }

/* ---------- 책상 ---------- */
.desk { display: flex; width: 100%; min-height: 0; }
.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: center; gap: 8px; }
.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; }
.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; }
.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; word-break: break-all; }
.file-row .grow { flex-grow: 1; min-width: 0; }
.file-row a, .file-row button { font-size: 12px; font-weight: 600; }
.file-row .name.linkish { background: none; border: 0; padding: 0; text-align: left; color: var(--decide); cursor: pointer; font-size: 13px; font-weight: 600; word-break: break-all; }
.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; }
@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; }
.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; }
.svc-icon svg { width: 100%; height: 100%; }
.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 .hist, .drawer-body .card .incident { margin-top: 2px; }
.drawer-body .card .hist + .hist, .drawer-body .card .incident + .incident { margin-top: 8px; }
@media (max-width: 899px) {
  #modal .backdrop:has(.drawer) { align-items: flex-end; }
  .drawer { width: 100%; height: auto; max-height: 86vh; 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; }
.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); }
.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 { width: 320px; flex-shrink: 0; padding: 28px 32px 24px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; overflow: auto; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; }
.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);
}
.newtask-ta { resize: none; max-height: 160px; min-height: 24px; line-height: 1.5; padding-top: 4px; padding-bottom: 4px; }
.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; }
.mention-ta-wrap { position: relative; width: 100%; }
.mention-ta-wrap textarea.input { position: relative; z-index: 1; color: transparent; caret-color: var(--ink); }
.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); }
.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; }
.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; }

/* ---------- 업무 ---------- */
.work { display: flex; width: 100%; min-height: 0; }
.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; }
.work-list h2 { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.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; }
.msg .who { font-size: 12px; color: var(--muted); }
.msg .who b { color: var(--ink); }
.msg.boss .who { text-align: right; }
.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; }
.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; }
.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; }
.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; }
.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); }
/* 검수 의견·이력 등에 메시지ID·해시처럼 공백 없는 긴 문자열이 그대로 오면 패널 폭을 넘어 잘려
   보이던 버그 — overflow-wrap 은 상속되므로 여기 한 번만 걸어도 .verdict/.txt 등 안의 텍스트에 전부 적용된다. */
.work-side { width: 320px; flex-shrink: 0; padding: 24px 32px 24px 24px; display: flex; flex-direction: column; gap: 18px; border-left: 1px solid var(--line); overflow: auto; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; }
.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; 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); }
.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); }
.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; }
.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-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; }
.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-toggle { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px var(--shadow); z-index: 3; font-size: 14px; line-height: 1; padding: 0; flex-shrink: 0; }
.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; }
.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; }
.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; }
.branch-btn { margin-left: 8px; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); cursor: pointer; }
.branch-btn:hover { background: var(--decide); color: #fff; border-color: var(--decide); }
.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; vertical-align: -4px; }
.tts-btn:hover { background: var(--nav-bg); color: var(--ink); }
.tts-btn.loading { opacity: .5; cursor: wait; }

/* 라운지: 검색 / 날짜 이동 / 맨 아래로 */
.icon-btn.active { background: var(--decide); color: #fff; border-color: var(--decide); }
.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; }
.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열이면
   카드가 하나뿐인 탭에서 오른쪽 절반이 통째로 비어 보이는 문제가 있었음). */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.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; }
.settings .kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.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; }
.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); }
table.ledger tr.done td.t { text-decoration: line-through; }

/* ---------- mobile ---------- */
.back-btn { 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)이 맨 위에 항상 보이도록 flex-grow/shrink 를 껐다. */
  .desk { flex-direction: column; overflow: auto; }
  .desk-queue { width: 100%; padding: 16px 16px 8px; order: 1; flex-grow: 0; flex-shrink: 0; overflow: visible; }
  .desk-queue h1 { font-size: 22px; }
  .desk-main { padding: 12px 16px 16px; order: 0; flex-grow: 0; flex-shrink: 0; overflow: visible; }
  /* 프롬프트 입력창과 바로 아래 카드가 붙어 보이던 문제 — 데스크톱과 같은 간격을 모바일에서도 준다. */
  .desk-compose { max-width: none; margin-bottom: 14px; }
  .desk-side { width: 100%; padding: 8px 16px 16px; border-left: 0; border-top: 1px solid var(--line); order: 2; flex-grow: 0; flex-shrink: 0; overflow: visible; }
  .detail { padding: 18px 16px; }
  .detail h2 { font-size: 21px; }
  .options { grid-template-columns: 1fr; }
  .dialog { width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: 0; }
  #modal .backdrop { padding: 0; }
  .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: 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 { display: none; }
  body.panel-open .desk-main { position: fixed; inset: 0; 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 { border: 0; border-radius: 0; min-height: 100%; }
  body.panel-open #app { padding-bottom: 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); padding: 16px; overflow: visible; flex-shrink: 0; }
  .msg .body-col { max-width: 100%; }
  .msg-tool, .msg-request, .tool-group { margin-left: 0; padding-left: 0; }

  .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: 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; }
  .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: auto; flex-wrap: nowrap; padding-bottom: 2px; touch-action: pan-x;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }

  .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; }
}