/* DAYFLOW — 업무 보조 위젯 스타일 */
/* 라이트: 노션 라이트(따뜻한 회색·베이지) / 다크: 노션 다크(#191919) */
:root {
  --bg: #ffffff;
  --side: #f7f7f5;
  --side-2: #ebebea;
  --side-text: #37352f;
  --side-muted: #8b8a86;
  --panel: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --text: #37352f;
  --muted: #787774;
  --faint: #a5a29b;
  --line: #ebebea;
  --line-2: #dfdfdd;
  --ink: #37352f; --ink-tx: #ffffff;
  --accent: #e8705a;
  --accent-tx: #ffffff;
  --ok: #3f9b6a;
  --warn: #d99a2b;
  --urgent-bg: #fbe4e0; --urgent-tx: #a03b2a; --urgent-dot: #e8705a; --urgent-lane: #fdf1ee;
  --normal-bg: #e1e9f8; --normal-tx: #2f4c8a; --normal-dot: #5b73b5; --normal-lane: #f0f4fb;
  --delegate-bg: #faecd2; --delegate-tx: #8a5a12; --delegate-dot: #d99a2b; --delegate-lane: #fcf5e8;
  --later-bg: #ecebe7; --later-tx: #5f5a50; --later-dot: #a39e92; --later-lane: #f4f3ef;
  --hold-bg: #e9e6df;   --hold-tx: #5f5a50;   --hold-dot: #a39e92;   --hold-lane: #f1eee7;
  --none-dot: #c9c4b9;
  --meeting-bg: #37352f; --meeting-tx: #ffffff;
  --routine-bg: #e9e6df; --routine-tx: #4c483f;
  --gcal-bg: #dcefe4; --gcal-tx: #245a3e;
  --shadow: 0 1px 2px rgba(15,15,15,.05), 0 3px 10px rgba(15,15,15,.04);
  --shadow-lg: 0 10px 40px rgba(15,15,15,.18);
  --r-lg: 18px; --r: 12px; --r-sm: 8px;
  --hour: 64px;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, Consolas, monospace; /* 한글은 Pretendard 로 (맑은 고딕으로 바뀌지 않게) */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #191919; --side: #202020; --side-2: #2c2c2c; --side-text: #e3e3e3; --side-muted: #8c8c8c;
  --panel: #252525; --surface: #2a2a2a; --surface-2: #222222; --text: #e6e6e6; --muted: #9b9b9b; --faint: #6b6b6b;
  --line: #303030; --line-2: #3a3a3a; --ink: #e6e6e6; --ink-tx: #191919;
  --urgent-bg: #4a2621; --urgent-tx: #ffb9a8; --urgent-lane: #2a201e;
  --normal-bg: #263250; --normal-tx: #b8c9f2; --normal-lane: #1f2433;
  --delegate-bg: #47361a; --delegate-tx: #f3cf8c; --delegate-lane: #2a241a;
  --later-bg: #333333; --later-tx: #cfcac0; --later-lane: #232323;
  --hold-bg: #353330;   --hold-tx: #d2cbbd;   --hold-lane: #262524;
  --none-dot: #5a5a5a;
  --meeting-bg: #e6e6e6; --meeting-tx: #191919;
  --routine-bg: #353330; --routine-tx: #e0d9cb;
  --gcal-bg: #213a2d; --gcal-tx: #a9e0c1;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select, textarea, option, optgroup { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; outline: none; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--text); }
textarea { resize: vertical; line-height: 1.55; }
a { color: inherit; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 14px; height: 14px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.scroll { overflow: auto; }
.scroll::-webkit-scrollbar, .main-body::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb, .main-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }

/* ── 레이아웃 ───────────────────────────── */
.app { display: grid; grid-template-columns: 250px 1fr; height: 100vh; transition: grid-template-columns .2s; }
.app.collapsed { grid-template-columns: 68px 1fr; }
.app.nonav { grid-template-columns: 1fr; }
.app.nonav .sidebar { display: none; }

.sidebar { background: var(--side); color: var(--side-text); display: flex; flex-direction: column; padding: 18px 14px 14px; min-height: 0; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; }
.brand-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); flex: none; }
.brand-name { font-weight: 800; letter-spacing: .04em; font-size: 16px; flex: 1; white-space: nowrap; }
.side-toggle { color: var(--side-muted); padding: 6px; border-radius: 8px; }
.side-toggle:hover { background: var(--side-2); color: var(--side-text); }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.nav::-webkit-scrollbar { width: 0; }
.nav-group { font-size: 11px; color: var(--side-muted); padding: 14px 10px 6px; white-space: nowrap; }
.nav-item, a.btn { text-decoration: none; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--side-text); font-weight: 600; font-size: 14px; white-space: nowrap; position: relative; }
.nav-item:hover { background: var(--side-2); }
.nav-item.on { background: var(--bg); color: var(--text); }
.nav-item .badge { margin-left: auto; background: var(--accent); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; font-size: 12px; display: grid; place-items: center; padding: 0 6px; font-weight: 700; }
.side-bottom { border-top: 1px solid var(--side-2); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px; font-weight: 700; white-space: nowrap; }
.add-btn:hover { filter: brightness(1.06); }
.clock { padding: 4px 6px; }
.clock-time { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.clock-date { color: var(--side-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; }
.pomo { background: var(--side-2); border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.pomo-time { font-family: var(--mono); font-weight: 700; font-size: 15px; flex: 1; white-space: nowrap; }
.pomo-time small { font-family: var(--font); color: var(--side-muted); font-weight: 500; font-size: 11px; margin-left: 4px; }
.pomo button { color: var(--side-muted); padding: 4px; border-radius: 6px; }
.pomo button:hover { color: var(--side-text); background: var(--side); }
.pomo.run .pomo-time { color: #ffb4a4; }
.side-tools { display: flex; gap: 4px; }
.side-tools button { flex: 1; color: var(--side-muted); padding: 8px; border-radius: 8px; display: grid; place-items: center; }
.side-tools button:hover { background: var(--side-2); color: var(--side-text); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--side-muted); display: inline-block; margin-right: 6px; }
.sync-dot.remote { background: #5fd394; } .sync-dot.err { background: #ff7b6b; } .sync-dot.busy { background: #f3c25b; }

.app.collapsed .brand-name, .app.collapsed .nav-group, .app.collapsed .nav-item span, .app.collapsed .nav-item .badge,
.app.collapsed .add-btn span, .app.collapsed .pomo, .app.collapsed .clock-date, .app.collapsed .side-tools .lbl { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 12px 0; }
.app.collapsed .nav-item .dot-badge { display: block; }
.dot-badge { display: none; position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.app.collapsed .brand { flex-direction: column; padding: 2px 0 10px; }
.app.collapsed .clock-time { font-size: 13px; text-align: center; }
.app.collapsed .side-tools { flex-direction: column; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head { display: flex; align-items: center; gap: 16px; padding: 22px 28px 14px; flex-wrap: wrap; }
.main-title { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 0; white-space: nowrap; }
.main-head .spacer { flex: 1; }
.main-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 28px 24px; }
.main-body.fill { display: flex; flex-direction: column; overflow: hidden; }

/* ── 공통 컴포넌트 ───────────────────────── */
.seg { display: inline-flex; background: var(--panel); border-radius: 12px; padding: 4px; gap: 2px; }
.seg button { padding: 7px 18px; border-radius: 9px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.seg button.on { background: var(--side); color: #fff; }
:root[data-theme="dark"] .seg button.on { background: var(--text); color: var(--bg); }
.nav-date { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: var(--text); flex: none; }
.icon-btn:hover { border-color: var(--text); }
.icon-btn.sm { width: 30px; height: 30px; border-radius: 8px; }
.date-label { font-weight: 700; font-size: 17px; white-space: nowrap; min-width: 150px; text-align: center; }
.date-label .mono { font-weight: 500; color: var(--muted); font-size: 15px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); white-space: nowrap; }
.btn:hover { border-color: var(--text); }
.btn.dark { background: var(--side); color: #fff; border-color: var(--side); }
:root[data-theme="dark"] .btn.dark { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.danger { color: #c2412d; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1.5px solid transparent; white-space: nowrap; }
.chip.on { border-color: currentColor; }
.chip.urgent { background: var(--urgent-bg); color: var(--urgent-tx); }
.chip.normal { background: var(--normal-bg); color: var(--normal-tx); }
.chip.hold { background: var(--hold-bg); color: var(--hold-tx); }
.chip.none { background: var(--surface); color: var(--muted); }
.chip.solid.on, .chip.urgent.solid { }
.chip.toggle { background: transparent; border: 1.5px dashed var(--line-2); color: var(--muted); }
.chip.toggle.on { border-style: solid; border-color: var(--text); color: var(--text); background: var(--surface); }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--none-dot); }
.dot.urgent { background: var(--urgent-dot); } .dot.normal { background: var(--normal-dot); } .dot.hold { background: var(--hold-dot); }
.stars { color: #e3a33b; font-size: 12px; letter-spacing: -1px; white-space: nowrap; }
.dday { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dday.over { color: #c2412d; font-weight: 700; } .dday.today { color: var(--accent); font-weight: 700; }
.empty { color: var(--faint); font-size: 13px; text-align: center; padding: 18px 8px; }
.kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--muted); }

.card-panel { background: var(--surface); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow); min-width: 0; }
.beige-panel { background: var(--panel); border-radius: var(--r-lg); padding: 20px 18px; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-title { font-weight: 800; font-size: 16px; white-space: nowrap; }
.panel-sub { color: var(--muted); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.section-title { font-weight: 800; font-size: 15px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title:first-child { margin-top: 0; }

/* 빠른 입력 */
.quick { display: flex; gap: 8px; margin-top: 12px; }
.quick input { flex: 1; height: 46px; border-radius: 12px; border-color: transparent; background: var(--surface); padding: 0 16px; }
.quick input:focus { border-color: var(--text); }
.quick .go { width: 46px; height: 46px; border-radius: 12px; background: var(--side); color: #fff; display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .quick .go { background: var(--text); color: var(--bg); }
.quick-hint { font-size: 11.5px; color: var(--faint); margin-top: 6px; padding-left: 4px; }

/* ── 업무 카드 ───────────────────────────── */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task { position: relative; background: var(--surface); border-radius: 12px; padding: 13px 16px; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,.03); border: 1.5px solid transparent; transition: opacity .15s, transform .1s; }
.task:hover { border-color: var(--line-2); }
.task .dot { margin-top: 6px; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-weight: 500; overflow-wrap: anywhere; }
.task-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.task-meta:empty { display: none; }
.task.placed { opacity: .5; background: var(--surface-2); }
.task.done .task-title { text-decoration: line-through; color: var(--faint); }
.task.done { opacity: .65; }
.task.dragging, .blk.dragging { opacity: .35; }
.task .acts { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; box-shadow: var(--shadow); z-index: 3; }
.task:hover .acts { display: flex; }
.acts button { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); position: relative; }
.acts button:hover { background: var(--surface-2); color: var(--text); }
.acts button.ok:hover { color: var(--ok); } .acts button.del:hover { color: #c2412d; }
.acts button[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--side); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.lane .task { background: var(--surface); }
.task.urgent-card { background: var(--urgent-bg); } .task.urgent-card .task-title { color: var(--urgent-tx); font-weight: 600; }
.task.normal-card { background: var(--normal-bg); } .task.normal-card .task-title { color: var(--normal-tx); font-weight: 600; }
.task.hold-card { background: var(--hold-bg); } .task.hold-card .task-title { color: var(--hold-tx); font-weight: 600; }
.drop-line { height: 3px; background: var(--accent); border-radius: 3px; margin: -6px 0; }
.drop-hot { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* ── 인박스 ─────────────────────────────── */
.inbox-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 20px; height: 100%; min-height: 0; }
.list-panel { display: flex; flex-direction: column; min-height: 0; }
.list-panel .task-list { flex: 1; overflow-y: auto; min-height: 60px; margin: 0 -6px; padding: 2px 6px 6px; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.filter-row.sub { margin-bottom: 14px; }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 16px; min-height: 0; height: 100%; }
.lane { border-radius: var(--r-lg); padding: 16px 14px; display: flex; flex-direction: column; min-height: 0; }
.lane.urgent { background: var(--urgent-lane); } .lane.normal { background: var(--normal-lane); } .lane.hold { background: var(--hold-lane); }
.lane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 4px; }
.lane-head .lt { font-weight: 800; font-size: 15px; }
.lane.urgent .lt { color: var(--urgent-tx); } .lane.normal .lt { color: var(--normal-tx); } .lane.hold .lt { color: var(--hold-tx); }
.lane-head .cnt { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.lane .task-list { flex: 1; overflow-y: auto; min-height: 80px; margin: 0 -4px; padding: 2px 4px 30px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-content: start; align-items: start; overflow-y: auto; height: 100%; padding-bottom: 20px; }
.proj { background: var(--panel); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; max-height: 420px; }
.proj.unassigned { background: transparent; border: 2px dashed var(--line-2); }
.proj .task-list { overflow-y: auto; min-height: 50px; padding: 2px 2px 8px; }

/* ── 플래너 ─────────────────────────────── */
.planner-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 20px; height: 100%; min-height: 0; }
.planner-grid .list-panel .task { padding: 11px 14px; }
.plan-panel { display: flex; flex-direction: column; min-height: 0; padding: 18px 20px 14px; }
.tl-wrap { flex: 1; overflow: auto; min-height: 0; position: relative; border-top: 1px solid var(--line); }
.tl { display: grid; position: relative; }
.tl-hours { position: relative; }
.tl-hour { height: var(--hour); font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--line); }
.tl-col { position: relative; border-left: 1px solid var(--line); }
.tl-col .slot { height: var(--hour); border-top: 1px solid var(--line); }
.tl-col .slot.half { border-top-style: dashed; }
.tl-col.today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.tl-col.drop-hot { outline: none; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tl-ghost { position: absolute; left: 6px; right: 6px; border: 2px dashed var(--accent); border-radius: 10px; pointer-events: none; z-index: 5; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 11px; font-family: var(--mono); color: var(--accent); padding: 2px 8px; }
.tl-heads { display: grid; position: sticky; top: 0; z-index: 6; background: var(--surface); }
.tl-head { padding: 10px 10px 8px; font-weight: 800; font-size: 15px; border-left: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.tl-head small { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 3px; }
.tl-head.today { color: var(--accent); }
.blk { position: absolute; border-radius: 10px; padding: 6px 10px; overflow: hidden; cursor: grab; font-size: 13px; z-index: 2; box-shadow: none; border: 0; display: flex; flex-direction: column; }
.blk .bt { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.blk .bs { font-size: 11.5px; opacity: .85; white-space: nowrap; }
.blk.short { flex-direction: row; align-items: center; gap: 8px; padding: 2px 10px; }
.blk.short .bt { white-space: nowrap; flex: 1; }
.blk.urgent { background: var(--urgent-bg); color: var(--urgent-tx); }
.blk.normal, .blk.none { background: var(--normal-bg); color: var(--normal-tx); }
.blk.hold { background: var(--hold-bg); color: var(--hold-tx); }
.blk.routine { background: var(--routine-bg); color: var(--routine-tx); }
.blk.meeting { background: var(--meeting-bg); color: var(--meeting-tx); }
.blk.gcal { background: var(--gcal-bg); color: var(--gcal-tx); cursor: default; }
.blk.done .bt { text-decoration: line-through; opacity: .6; }
.blk .rz { position: absolute; left: 0; right: 0; height: 8px; cursor: ns-resize; }
.blk .rz.top { top: 0; } .blk .rz.bot { bottom: 0; }
.blk .rz.bot::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 26px; height: 3px; margin-left: -13px; border-radius: 3px; background: currentColor; opacity: 0; }
.blk:hover .rz.bot::after { opacity: .35; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.untimed { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.untimed-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.untimed-grid { display: grid; gap: 8px; }
.untimed-cell { min-height: 44px; border-radius: 10px; background: var(--surface-2); padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-height: 120px; overflow-y: auto; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 4px 9px; font-size: 12.5px; font-weight: 600; cursor: grab; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.urgent { background: var(--urgent-bg); color: var(--urgent-tx); } .pill.normal, .pill.none { background: var(--normal-bg); color: var(--normal-tx); }
.pill.hold { background: var(--hold-bg); color: var(--hold-tx); } .pill.routine { background: var(--routine-bg); color: var(--routine-tx); }
.pill.meeting { background: var(--meeting-bg); color: var(--meeting-tx); } .pill.gcal { background: var(--gcal-bg); color: var(--gcal-tx); cursor: pointer; }
.pill.ghost, .blk.ghost { background: var(--routine-bg); border: 0; color: var(--routine-tx); cursor: pointer; box-shadow: none; }
.pill.done { text-decoration: line-through; opacity: .55; }
.pill .tm { font-family: var(--mono); font-weight: 500; font-size: 11px; opacity: .8; margin-right: 4px; }

/* 월간 */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(108px, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); flex: 1; min-height: 0; overflow: auto; }
.month-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 12px; color: var(--muted); font-weight: 700; padding: 0 0 6px; }
.month-dow div { padding-left: 8px; }
.mcell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.mcell.out { background: var(--surface-2); }
.mcell.out .mnum { color: var(--faint); }
.mcell .mnum { font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.mcell.today .mnum span { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; }
.mcell.wkend .mnum, .mcell.hol .mnum { color: #c2412d; }
.mcell .hname { font-size: 10.5px; color: #c2412d; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcell .mitems { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; flex: 1; }
.mcell .pill { padding: 2px 6px; font-size: 11.5px; border-radius: 6px; display: block; }

/* ── 일반 카드 그리드 ─────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { background: var(--surface); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; border: 1.5px solid transparent; min-width: 0; position: relative; }
.card:hover { border-color: var(--line-2); }
.card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.card .meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card .body { margin-top: 8px; font-size: 13px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* 카테고리 탭 (이미지 3 스타일) */
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--surface); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); margin-bottom: 16px; }
.cat-tabs button.ct { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cat-tabs button.ct:hover { background: var(--surface-2); color: var(--text); }
.cat-tabs button.ct.on { background: var(--side); color: #fff; }
:root[data-theme="dark"] .cat-tabs button.ct.on { background: var(--text); color: var(--bg); }
.cat-tabs .cnt { font-family: var(--mono); font-size: 11px; opacity: .7; }
.cat-ico { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; }

/* 미팅 */
.meet-list { display: flex; flex-direction: column; gap: 10px; }
.meet { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; background: var(--surface); border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow); cursor: pointer; border: 1.5px solid transparent; }
.meet:hover { border-color: var(--line-2); }
.meet .md { text-align: center; border-right: 1px solid var(--line); padding-right: 12px; }
.meet .md b { display: block; font-size: 22px; font-family: var(--mono); line-height: 1.1; }
.meet .md span { font-size: 12px; color: var(--muted); }
.meet.past { opacity: .7; }
.att { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 700; margin-left: -6px; border: 2px solid var(--surface); }
.att:first-child { margin-left: 0; }

/* 노트 */
.notebook { background: var(--panel); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 18px; }
.notebook-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.notebook-head input.nb-title { font-weight: 800; font-size: 17px; background: transparent; border-color: transparent; padding: 4px 6px; flex: 1; }
.notebook-head input.nb-title:hover { border-color: var(--line-2); }
.memos { columns: 260px; column-gap: 12px; margin-top: 12px; max-height: 560px; overflow-y: auto; }
.memo { break-inside: avoid; background: var(--surface); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; cursor: pointer; border: 1.5px solid transparent; }
.memo:hover { border-color: var(--line-2); }
.memo .mt { font-weight: 700; margin-bottom: 4px; }
.memo .mb { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; max-height: 220px; overflow: hidden; }
.memo .mf { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.memo.pinned { border-color: var(--accent); }
.notebook .quick input { background: var(--surface); }
.notebook .quick select { height: 46px; border-radius: 12px; border-color: transparent; }

/* 루틴 */
.routine-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.1fr); gap: 20px; align-items: start; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .kl { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi .kv { font-size: 24px; font-weight: 800; font-family: var(--mono); margin-top: 2px; }
.kpi .kv small { font-size: 13px; color: var(--muted); font-weight: 500; }
.bar { height: 6px; background: var(--panel); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--ok); border-radius: 6px; }
.rcard { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px; cursor: pointer; border: 1.5px solid transparent; }
.rcard:hover { border-color: var(--line-2); }
.rcard.off { opacity: .55; }
.rcard .rt { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rcard .rd { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.hist { display: flex; gap: 4px; margin-top: 10px; align-items: center; }
.hist i { width: 16px; height: 16px; border-radius: 4px; background: var(--panel); display: block; }
.hist i.ok { background: var(--ok); } .hist i.miss { background: #e2735f; } .hist i.wait { background: transparent; border: 1.5px dashed var(--line-2); } .hist i.today { background: #f3c25b; }
.hist small { margin-left: 6px; color: var(--muted); font-size: 11.5px; }
.inst { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); margin-bottom: 6px; }
.inst.done .it { text-decoration: line-through; color: var(--faint); }
.inst .it { flex: 1; min-width: 0; font-weight: 500; cursor: pointer; }
.check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-2); display: grid; place-items: center; flex: none; color: transparent; background: var(--surface); }
.check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.check svg { width: 13px; height: 13px; stroke-width: 3; }
.day-group { margin-bottom: 14px; }
.day-label { font-size: 12.5px; font-weight: 800; color: var(--muted); margin: 0 0 6px 2px; display: flex; gap: 6px; align-items: center; }
.day-label.today { color: var(--accent); }

/* 오늘/이번주 */
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.xitem { background: var(--surface); border-radius: 12px; margin-bottom: 8px; border: 1.5px solid transparent; }
.xitem:hover { border-color: var(--line-2); }
.xhead { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.xhead .xt { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.xitem.done .xt { text-decoration: line-through; color: var(--faint); }
.xbody { padding: 0 14px 12px 44px; font-size: 13px; color: var(--muted); display: none; overflow-wrap: anywhere; }
.xitem.open .xbody { display: block; }
.xbody .row { margin-top: 8px; }

/* 즐겨찾기 */
.bm { background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bm-top { display: flex; align-items: center; gap: 10px; }
.bm-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.bm-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; }
.cred .cl { color: var(--muted); width: 22px; font-size: 11px; font-weight: 700; }
.cred .cv { flex: 1; min-width: 0; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred button { color: var(--muted); padding: 3px; border-radius: 5px; } .cred button:hover { color: var(--text); background: var(--panel); }
.vault-bar { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 10px; padding: 0 12px; border: 1px solid var(--line-2); height: 40px; min-width: 220px; }
.search input { border: 0; padding: 0; background: transparent; flex: 1; }

/* 완료 */
.done-box { max-width: 860px; }
.done-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border-radius: 10px; margin-bottom: 6px; }
.done-row .dt { flex: 1; min-width: 0; }

/* ── 모달 ───────────────────────────────── */
.modal-root { position: fixed; inset: 0; z-index: 50; display: none; }
.modal-root.open { display: grid; place-items: center; }
.modal-back { position: absolute; inset: 0; background: rgba(20,24,34,.38); }
.modal { position: relative; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal.wide { width: min(860px, calc(100vw - 32px)); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 18px 22px 10px; }
.modal-h h3 { margin: 0; font-size: 18px; font-weight: 800; flex: 1; }
.modal-b { padding: 6px 22px 16px; overflow-y: auto; }
.modal-f { display: flex; align-items: center; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.modal-f .spacer { flex: 1; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field > label, .flabel { font-size: 12px; font-weight: 700; color: var(--muted); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.title-input { font-size: 18px; font-weight: 700; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 6px 0; background: transparent; }
.title-input:focus { border-color: var(--text); }
.star-pick { display: inline-flex; gap: 2px; }
.star-pick button { font-size: 22px; color: var(--line-2); line-height: 1; padding: 0 2px; }
.star-pick button.on { color: #e3a33b; }
.seg.small button { padding: 5px 12px; font-size: 13px; }
.type-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 22px 6px; }
.type-tabs button { padding: 8px 14px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.type-tabs button.on { background: var(--side); color: #fff; }
:root[data-theme="dark"] .wd-pick button.on, :root[data-theme="dark"] .nav-item.on { background: var(--text); color: var(--bg); }
:root[data-theme="dark"] .type-tabs button.on { background: var(--text); color: var(--bg); }
.wd-pick { display: flex; gap: 4px; flex-wrap: wrap; }
.wd-pick button { width: 36px; height: 34px; border-radius: 8px; background: var(--surface-2); font-weight: 700; color: var(--muted); }
.wd-pick button.on { background: var(--side); color: #fff; }
.action-items .ai { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.action-items .ai input[type=text] { flex: 1; }
.info { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.warn-box { font-size: 12.5px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.popover { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; min-width: 150px; }
.popover button { text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.popover button:hover { background: var(--surface-2); }
.popover .ph { font-size: 11px; color: var(--muted); padding: 4px 10px; font-weight: 700; }

/* 토스트 */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--side); color: #fff; border-radius: 12px; padding: 11px 14px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; font-size: 13.5px; max-width: 380px; animation: tin .18s ease-out; }
.toast button { color: #ffb4a4; font-weight: 700; }
.toast.alarm { background: var(--accent); }
.toast.alarm button { color: #fff; text-decoration: underline; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* 검색 */
.search-results { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.sr { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.sr:hover, .sr.on { background: var(--surface-2); }
.sr .k { font-size: 11px; color: var(--muted); width: 54px; flex: none; font-weight: 700; }

/* ── v2: 상태 · 담당자 · 진행도 · 후속 작업 ───────── */
.st { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.st-todo { background: #ecebe7; color: #6f6b63; } .st-doing { background: #dbe6fb; color: #2f57b0; } .st-review { background: #ece1f7; color: #7444a8; }
.st-done { background: #d9efe2; color: #2c7a51; } .st-hold { background: var(--hold-bg); color: var(--hold-tx); }
:root[data-theme="dark"] .st-todo { background: #3a3d44; color: #c9c5bd; } :root[data-theme="dark"] .st-doing { background: #24375e; color: #a9c4ff; }
:root[data-theme="dark"] .st-review { background: #3b2c52; color: #d4b6f5; } :root[data-theme="dark"] .st-done { background: #1f3d2d; color: #93dbb2; }
.who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.who b { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; display: grid; place-items: center; flex: none; }
.task-prog { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.prog { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; min-width: 40px; }
.prog i { display: block; height: 100%; border-radius: 4px; background: var(--normal-dot); }
.task.done .prog i, .st-done + .prog i { background: var(--ok); }
.prog-n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.task.has-next { padding-bottom: 10px; }
.task-next { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); font-size: 11.5px; color: var(--muted); font-weight: 600; }
.chain-arrow { display: flex; justify-content: center; color: var(--muted); margin: -6px 0; height: 14px; align-items: center; }
.chain-arrow svg { width: 14px; height: 14px; }
.who-filter { height: 30px; padding: 0 8px; font-size: 12.5px; border-radius: 999px; }

/* 인박스 보드 (분류 기준별 열 + 하위 그룹) */
.group-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.group-pick .faint { font-size: 12px; }
.board { display: flex; gap: 14px; overflow-x: auto; height: 100%; min-height: 0; padding-bottom: 6px; }
.board > .lane { flex: 1 0 270px; max-width: 420px; }
.board.priority > .lane { flex: 1 1 0; min-width: 170px; max-width: none; }
.lane .lane-body { flex: 1; overflow-y: auto; min-height: 80px; margin: 0 -4px; padding: 2px 4px 30px; }
.lane .lane-body > .task-list { min-height: 100%; padding: 0; margin: 0; overflow: visible; }
.lane.neutral { background: var(--panel); }
.lane.add-col { flex: 0 0 180px; display: grid; place-items: center; background: transparent; border: 2px dashed var(--line-2); }
.st-lane.st-todo { background: #f2f1ee; } .st-lane.st-doing { background: #eef3fd; } .st-lane.st-review { background: #f5effb; } .st-lane.st-done { background: #eef7f1; } .st-lane.st-hold { background: var(--hold-lane); }
:root[data-theme="dark"] .st-lane { background: var(--panel) !important; }
.subgroup { margin-bottom: 12px; }
.sub-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); margin-bottom: 8px; }
.sub-head .cnt { margin-left: auto; font-family: var(--mono); font-weight: 500; }
.subgroup .task-list { gap: 8px; min-height: 30px; }

/* 업무 페이지 */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; }
.modal.wide:has(.editor-grid) { width: min(1100px, calc(100vw - 24px)); }
.ed-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ed-main .title-input { font-size: 17px; padding: 4px 0; }
.ed-src { margin: 0; padding: 5px 9px; }
.ef { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.ef .f, .ed-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ef .s2 { grid-column: span 2; }
.ef label, .ed-content label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef input, .ef select { height: 32px; padding: 4px 8px; font-size: 13px; }
.ef .seg.small { padding: 3px; } .ef .seg.small button { padding: 4px 10px; font-size: 12.5px; }
.ef .star-pick button { font-size: 19px; }
.ef input[type=range] { height: 28px; }
.ed-content textarea { min-height: 300px; height: 42vh; max-height: 640px; font-size: 14px; line-height: 1.6; padding: 10px 12px; }
.rel-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.rel-line .rel { padding: 3px 8px; border-radius: 8px; font-size: 12.5px; }
.rel-line .btn { margin-left: auto; }
.log-col { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); padding-left: 16px; }
.logbox { flex: 1; min-height: 200px; max-height: 62vh; overflow-y: auto; background: var(--surface-2); border-radius: 10px; padding: 6px 10px; margin-top: 4px; }
.log-col #tNote { height: 32px; padding: 4px 8px; font-size: 12.5px; }
.log-row { display: flex; gap: 8px; font-size: 11.5px; padding: 3px 0; border-bottom: 1px dashed var(--line); line-height: 1.4; }
.log-row:last-child { border-bottom: 0; }
.log-row.note { color: var(--text); } .log-row.create { color: var(--ok); }
.log-ts { color: var(--faint); font-size: 11px; white-space: nowrap; padding-top: 1px; }
.log-task { display: inline-block; font-weight: 700; margin-right: 6px; color: var(--normal-tx); }
.log-by { color: var(--faint); }
.log-row s { color: var(--faint); }
.rel-box { background: var(--surface-2); border-radius: 12px; padding: 12px; margin-top: 4px; }
.rel { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.rel.cur { border: 2px solid var(--text); cursor: default; font-weight: 700; }
.rel-box .chain-arrow { margin: 2px 0; }
.status-seg button.on { background: var(--side); }
input[type=range] { padding: 0; border: 0; accent-color: var(--accent); }

/* 업무 복사 팝업 */
.copy-list { max-height: 52vh; overflow: auto; }
.copy-table, .ins-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.copy-table th, .ins-table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.copy-table td, .ins-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.copy-table td .task-prog { margin: 0; min-width: 90px; }

/* 캘린더 타임라인(간트) */
.gantt { overflow: auto; flex: 1; padding: 0; }
.gt-row { display: flex; min-width: max-content; border-bottom: 1px solid var(--line); }
.gt-label { position: sticky; left: 0; z-index: 3; width: 220px; flex: none; background: var(--surface); padding: 7px 12px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gt-label.sub { padding-left: 24px; color: var(--muted); cursor: pointer; }
.gt-label .cnt { margin-left: auto; font-family: var(--mono); color: var(--faint); font-size: 11px; }
.gt-head { position: sticky; top: 0; z-index: 4; background: var(--surface); }
.gt-head .gt-label { font-weight: 700; color: var(--muted); font-size: 12px; z-index: 5; }
.gt-days { display: flex; }
.gt-day { flex: none; text-align: center; font-size: 11.5px; font-weight: 700; padding: 4px 0; line-height: 1.2; border-left: 1px solid var(--line); }
.gt-day small { display: block; font-weight: 500; color: var(--faint); font-size: 10px; }
.gt-day b { display: block; font-size: 10px; color: var(--accent); }
.gt-day.off { color: #c2412d; background: var(--surface-2); } .gt-day.today { background: var(--accent); color: #fff; } .gt-day.today small { color: #fff; }
.gt-group { background: var(--surface-2); }
.gt-group .gt-label { background: var(--surface-2); font-weight: 800; color: var(--text); }
.gt-track { position: relative; height: 34px; flex: none; }
.gt-bg { position: absolute; inset: 0; display: flex; }
.gt-bg i { flex: none; height: 100%; border-left: 1px solid var(--line); }
.gt-bg i.off { background: color-mix(in srgb, var(--surface-2) 70%, transparent); } .gt-bg i.today { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gt-bar { position: absolute; top: 6px; height: 22px; border-radius: 7px; overflow: hidden; cursor: pointer; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; box-shadow: none; border: 0; }
.gt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: currentColor; opacity: .18; }
.gt-bar span { position: relative; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .gt-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gt-mtg { position: absolute; top: 10px; width: 14px; height: 14px; background: var(--meeting-bg); transform: rotate(45deg); border-radius: 3px; cursor: pointer; }

/* 인사이트 · 루틴 담당자별 */
.kpi.warn .kv { color: #c2412d; }
.hbar { position: relative; height: 18px; background: var(--surface-2); border-radius: 5px; min-width: 120px; }
.hbar i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 35%, transparent); border-radius: 5px; }
.hbar span { position: relative; padding-left: 8px; font-size: 12px; line-height: 18px; }
.ins-table td.over { color: #c2412d; font-weight: 700; }
.ins-log { max-height: 520px; overflow-y: auto; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.inst .it small { font-weight: 400; }
.inst { flex-wrap: wrap; row-gap: 6px; }
.inst .it { flex: 1 1 160px; }
.blk-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, currentColor 15%, transparent); }
.blk-prog i { display: block; height: 100%; background: currentColor; opacity: .6; }

/* 메뉴: 등록 → 계획 흐름 표시 */
.step-tag { font-style: normal; font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 6px; margin-left: 2px; }
.flow-arrow { text-align: center; color: var(--accent); font-weight: 800; line-height: 1; margin: -2px 0; font-size: 13px; }
.app.collapsed .step-tag, .app.collapsed .flow-arrow { display: none; }
.share-help { line-height: 1.7; }
.share-help code { background: var(--surface); padding: 0 5px; border-radius: 4px; font-size: 11.5px; }

/* 노션 DB 링크 */
.db-links { display: flex; gap: 6px; margin-bottom: 8px; }
.db-link { display: flex; align-items: center; gap: 6px; flex: 1; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--side-2); color: var(--side-text); text-decoration: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.db-link:hover { background: var(--side-2); }
.db-link.sub { flex: 0 0 auto; color: var(--side-muted); }
.db-link em { font-style: normal; font-size: 10px; color: var(--side-muted); margin-left: auto; }
.app.collapsed .db-links { flex-direction: column; } .app.collapsed .db-link span, .app.collapsed .db-link em { display: none; } .app.collapsed .db-link { justify-content: center; padding: 7px 0; }

/* 노션 로그인 */
.user-box { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; background: var(--side-2); color: var(--side-text); font-weight: 700; font-size: 13px; }
.user-box:hover { filter: brightness(1.15); }
.user-box img, .user-box b { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 11px; }
.user-box .un { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-box .nbadge { font-size: 10px; font-weight: 900; background: #fff; color: #111; border-radius: 4px; padding: 0 4px; }
.user-box.login { background: transparent; border: 1.5px dashed var(--side-muted); color: var(--side-muted); justify-content: center; }
.app.collapsed .user-box { justify-content: center; padding: 6px 0; } .app.collapsed .user-box .un, .app.collapsed .user-box .nbadge { display: none; }
.me-card { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.me-card img, .me-card > b { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 16px; flex: none; }
.mode-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; }
.mode-opt.on { border-color: var(--text); background: var(--surface-2); }
.mode-opt input { margin-top: 3px; }
.user-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.ul-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }
.ul-row img, .ul-row > b { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 12px; flex: none; }
.badge-inline { background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; margin-left: 6px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 촘촘한 화면: 한 번에 더 많은 업무 패널이 보이도록 ── */
.main-head { padding: 12px 20px 8px; gap: 12px; }
.main-title { font-size: 22px; }
.main-body { padding: 2px 20px 12px; }
.seg button { padding: 5px 14px; }
.icon-btn { width: 34px; height: 34px; }
.beige-panel { padding: 12px 12px; }
.panel-head { margin-bottom: 8px; }
.panel-title { font-size: 14.5px; }
.filter-row { gap: 4px; margin-bottom: 5px; } .filter-row.sub { margin-bottom: 8px; }
.chip { padding: 3px 9px; font-size: 12px; }
.who-filter { height: 26px; font-size: 12px; }
.quick { margin-top: 8px; } .quick input { height: 38px; } .quick .go { width: 38px; height: 38px; }
.quick-hint { display: none; }
.task-list { gap: 6px; }
.task { padding: 7px 10px; gap: 7px; border-radius: 9px; }
.task .dot { margin-top: 5px; width: 7px; height: 7px; }
.task-title { font-size: 13px; line-height: 1.35; }
.task-meta { gap: 4px; margin-top: 3px; }
.task-meta .tag, .task-meta .st { font-size: 10.5px; padding: 0 6px; }
.task-meta .who { font-size: 11px; } .task-meta .who b { width: 15px; height: 15px; font-size: 9px; }
.task-prog { margin-top: 4px; } .prog { height: 3px; }
.task.has-next { padding-bottom: 7px; }
.task-next { margin-top: 5px; padding-top: 4px; font-size: 11px; }
.chain-arrow { margin: -4px 0; height: 10px; }
.lane { padding: 10px 8px; border-radius: 14px; }
.lane-head { margin-bottom: 6px; } .lane-head .lt { font-size: 13.5px; }
.lane .lane-body { padding-bottom: 16px; }
.board { gap: 10px; }
.board > .lane { flex-basis: 240px; }
.inbox-grid, .planner-grid { gap: 12px; grid-template-columns: minmax(260px, 320px) 1fr; }
.sub-head { padding: 2px 4px 4px; margin-bottom: 5px; font-size: 11.5px; }
.subgroup { margin-bottom: 8px; }
.kpis { gap: 8px; margin-bottom: 12px; } .kpi { padding: 10px 12px; } .kpi .kv { font-size: 20px; }
.inst { padding: 7px 10px; margin-bottom: 4px; }
.xhead { padding: 8px 12px; }
.card-panel { padding: 14px 16px; }
.plan-panel { padding: 12px 14px 10px; }
:root { --hour: 56px; }

@media (max-width: 980px) { .editor-grid { grid-template-columns: 1fr; } .ef { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ed-content textarea { height: 30vh; min-height: 200px; } .log-col { border-left: 0; padding-left: 0; } .board { height: auto; } }

/* ── v3: 노션 톤 테마 정리 (진한 버튼 = --ink) ───────── */
.seg button.on, .btn.dark, .cat-tabs button.ct.on, .type-tabs button.on, .wd-pick button.on, .status-seg button.on, .quick .go,
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .btn.dark, :root[data-theme="dark"] .cat-tabs button.ct.on, :root[data-theme="dark"] .type-tabs button.on,
:root[data-theme="dark"] .wd-pick button.on, :root[data-theme="dark"] .quick .go { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); }
.nav-item.on, :root[data-theme="dark"] .nav-item.on { background: var(--side-2); color: var(--side-text); }
.nav-item { font-weight: 500; color: var(--side-muted); padding: 7px 10px; font-size: 13.5px; }
.nav-item:hover { color: var(--side-text); }
.nav-item.on { font-weight: 700; }
.sidebar { border-right: 1px solid var(--line); }
.toast { background: var(--ink); color: var(--ink-tx); }
.toast button { color: var(--accent); }
.acts button[data-tip]:hover::after { background: var(--ink); color: var(--ink-tx); }
.pomo.run .pomo-time { color: var(--accent); }
.user-box .nbadge { background: var(--ink); color: var(--ink-tx); }
.modal-back { background: rgba(15,15,15,.4); }
.chip.delegate { background: var(--delegate-bg); color: var(--delegate-tx); } .chip.later { background: var(--later-bg); color: var(--later-tx); }
.dot.delegate { background: var(--delegate-dot); } .dot.later { background: var(--later-dot); }
.task.delegate-card { background: var(--delegate-bg); } .task.delegate-card .task-title { color: var(--delegate-tx); font-weight: 600; }
.task.later-card { background: var(--later-bg); } .task.later-card .task-title { color: var(--later-tx); font-weight: 600; }
.lane.delegate { background: var(--delegate-lane); } .lane.later { background: var(--later-lane); }
.lane.delegate .lt { color: var(--delegate-tx); } .lane.later .lt { color: var(--later-tx); }
.blk.delegate, .pill.delegate { background: var(--delegate-bg); color: var(--delegate-tx); } .blk.later, .pill.later { background: var(--later-bg); color: var(--later-tx); }
.prog-n.p0 { opacity: .6; } .prog-n.p100 { color: var(--ok); font-weight: 700; }

/* 노션 임베드: 오른쪽 위 노션 아이콘(댓글·⋯)이 뜨는 자리를 비워 둠 */
html.embedded .main-head { padding-right: 132px; min-height: 50px; }
html.embedded .main-head::after { content: ""; position: absolute; }

/* ── 홈 대시보드 ── */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.home-grid .card-panel { padding: 14px 16px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table td { text-align: center; padding: 6px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.stat-table td.z { color: var(--faint); } .stat-table td.over { color: #c2412d; font-weight: 700; }
.stat-table tr.tot td { font-weight: 800; border-bottom: 0; }
.stat-table tr[data-who] { cursor: pointer; } .stat-table tr[data-who]:hover td { background: var(--surface-2); }
.stackbar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: 6px 0 8px; background: var(--surface-2); }
.stackbar span { display: grid; place-items: center; font-size: 11.5px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sc-todo { background: #e3e2de; color: #5f5a50; } .sc-doing { background: #cfdcf7; color: #2f57b0; } .sc-review { background: #e4d6f3; color: #7444a8; } .sc-done { background: #cfe8d9; color: #2c7a51; } .sc-hold { background: var(--hold-bg); color: var(--hold-tx); }
:root[data-theme="dark"] .sc-todo { background: #3a3a3a; color: #cfcac0; } :root[data-theme="dark"] .sc-doing { background: #24375e; color: #a9c4ff; } :root[data-theme="dark"] .sc-review { background: #3b2c52; color: #d4b6f5; } :root[data-theme="dark"] .sc-done { background: #1f3d2d; color: #93dbb2; }
.sched { display: flex; flex-direction: column; gap: 4px; }
.sch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: var(--surface-2); cursor: pointer; font-size: 13px; border-left: 3px solid var(--none-dot); }
.sch:hover { background: var(--panel); }
.sch .tm { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 92px; flex: none; }
.sch .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sch.now { outline: 2px solid var(--accent); } .sch.done .tt { text-decoration: line-through; color: var(--faint); }
.sch.urgent { border-left-color: var(--urgent-dot); } .sch.normal { border-left-color: var(--normal-dot); } .sch.delegate { border-left-color: var(--delegate-dot); } .sch.later { border-left-color: var(--later-dot); } .sch.routine { border-left-color: var(--hold-dot); border-left-style: dashed; }
.week-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wcol { background: var(--surface-2); border-radius: 10px; padding: 8px; min-height: 120px; min-width: 0; }
.wcol.today { outline: 2px solid var(--accent); }
.wcol .wh { font-weight: 800; font-size: 12.5px; margin-bottom: 6px; display: flex; gap: 4px; align-items: baseline; }
.wcol .wh small { color: var(--muted); font-weight: 500; }
.wcol .wi { font-size: 12px; padding: 4px 6px; border-radius: 6px; background: var(--surface); margin-bottom: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol .wi .mono { color: var(--muted); font-size: 10.5px; margin-right: 4px; }
.wcol .wi.done { text-decoration: line-through; color: var(--faint); }
.mini-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mini-kpis .mk { background: var(--surface); border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow); display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mini-kpis .mk b { font-family: var(--mono); font-size: 18px; color: var(--text); } .mini-kpis .mk.warn b { color: #c2412d; }

/* ── 인박스: 아이젠하워 매트릭스 ── */
.matrix { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; min-height: 0; position: relative; }
.quad { border-radius: 14px; padding: 8px 8px 4px; display: flex; flex-direction: column; min-height: 0; }
.quad.urgent { background: var(--urgent-lane); } .quad.normal { background: var(--normal-lane); } .quad.delegate { background: var(--delegate-lane); } .quad.later { background: var(--later-lane); }
.quad-head { display: flex; align-items: center; gap: 2px 6px; padding: 2px 4px 6px; flex-wrap: wrap; }
.quad-head > * { white-space: nowrap; }
.quad-head .qn { font-family: var(--mono); font-size: 11px; font-weight: 800; border-radius: 5px; padding: 0 5px; color: #fff; }
.quad.urgent .qn { background: var(--urgent-dot); } .quad.normal .qn { background: var(--normal-dot); } .quad.delegate .qn { background: var(--delegate-dot); } .quad.later .qn { background: var(--later-dot); }
.quad-head .lt { font-weight: 800; font-size: 13.5px; } .quad-head .ax { font-size: 11.5px; color: var(--muted); }
.quad.urgent .lt { color: var(--urgent-tx); } .quad.normal .lt { color: var(--normal-tx); } .quad.delegate .lt { color: var(--delegate-tx); } .quad.later .lt { color: var(--later-tx); }
.quad-head .cnt { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.quad .lane-body { flex: 1; overflow-y: auto; min-height: 40px; padding: 0 2px 14px; }
.quad .task-list { gap: 4px; min-height: 100%; }
.quad .task { padding: 5px 9px; background: var(--surface); }
.quad .task-meta { margin-top: 2px; }
.quad .subgroup { margin-bottom: 6px; } .quad .sub-head { margin-bottom: 4px; }
.axis-y, .axis-x { position: absolute; font-size: 11px; font-weight: 700; color: var(--faint); pointer-events: none; }
.task .prog-n { margin-left: 2px; }

/* ── 루틴 (단순화) ── */
.rt-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.2fr); gap: 14px; align-items: start; }
.rt-who { margin-bottom: 12px; }
.rt-who .sub-head { font-size: 12.5px; }
.rcard { padding: 10px 12px; margin-bottom: 6px; }

/* ── 업무회고 ── */
.rv-check { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.rv-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 14px; }
.rv-who .beige-panel { padding: 10px 12px; }
.rv-sec { font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 8px 2px 4px; display: flex; gap: 6px; }
.rv-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--surface); border-radius: 8px; margin-bottom: 4px; font-size: 13px; cursor: pointer; }
.rv-row:hover { outline: 1px solid var(--line-2); }
.rv-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-row.done .t { color: var(--muted); }
.days { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.days.long { background: var(--urgent-bg); color: var(--urgent-tx); }

/* ── STEP1 설계 ── */
.dz-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dz-table th { text-align: left; font-size: 11.5px; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--line); }
.dz-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.dz-table tr.r { cursor: pointer; } .dz-table tr.r:hover td { background: var(--surface-2); }
.dz-prog { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.dz-head .title-input { font-size: 17px; max-width: 420px; padding: 2px 0; }
.dz-legend { font-size: 12px; color: var(--muted); }
.mandala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8px * var(--mk, 1)); width: 1080px; margin: 0 auto; --mk: 1; }
.mblock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 10px; background: var(--line); }
.mblock.core { background: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.mc { position: relative; aspect-ratio: 2; background: var(--surface); border-radius: 6px; display: grid; place-items: center; text-align: center; font-size: 12px; line-height: 1.3; padding: 4px; cursor: text; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.mc.area { background: color-mix(in srgb, var(--normal-dot) 16%, var(--surface)); font-weight: 700; }
.mc.goal { background: var(--ink); color: var(--ink-tx); font-weight: 800; font-size: 13.5px; }
.mc.mirror { background: color-mix(in srgb, var(--normal-dot) 24%, var(--surface)); font-weight: 800; cursor: default; }
.mc.empty-c { color: var(--faint); }
.mc.st-done-c { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.mc.st-done-c .mt { text-decoration: line-through; opacity: .75; }
.mc.st-hold-c { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px); color: var(--muted); }
.mc .badge-s { position: absolute; top: 3px; left: 4px; font-size: 10px; font-weight: 800; }
.mc .badge-s.ok { color: var(--ok); } .mc .badge-s.hold { color: var(--muted); } .mc .badge-s.tk { color: var(--normal-dot); left: auto; right: 4px; }
.mc textarea { position: absolute; inset: 0; width: 100%; height: 100%; border: 2px solid var(--accent); border-radius: 6px; font-size: 12px; text-align: center; resize: none; padding: 6px; background: var(--surface); color: var(--text); }
.node-menu { position: absolute; z-index: 20; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; box-shadow: var(--shadow-lg); }
.node-menu button { font-size: 11.5px; font-weight: 700; padding: 4px 7px; border-radius: 6px; white-space: nowrap; color: var(--muted); }
.node-menu button:hover { background: var(--surface-2); color: var(--text); }
.node-menu button.send { color: var(--normal-tx); } .node-menu button.ok { color: var(--ok); } .node-menu button.del { color: #c2412d; }
.mc .cell-menu { display: none; top: -27px; left: 50%; transform: translateX(-50%); padding: 2px; gap: 1px; box-shadow: var(--shadow-lg); }
.mc:hover { overflow: visible; z-index: 6; }
.mc:hover .cell-menu { display: flex; } .mc:has(textarea) .cell-menu { display: none; }
.cell-menu button { font-size: 10.5px; padding: 2px 5px; }
.mc .mt { max-height: 100%; overflow: hidden; }
.canvas-wrap { position: relative; flex: 1; min-height: 520px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); overflow: auto; }
.canvas { position: relative; width: 2400px; height: 1600px; background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 22px 22px; }
.canvas svg.edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.canvas svg.edges path { fill: none; }
.nd input { user-select: text; cursor: text; } .nd.editing { cursor: text; outline: 2px solid var(--accent); }
.canvas svg.edges path.ghost { stroke: var(--accent); stroke-dasharray: 5 4; pointer-events: none; }
.nd { position: absolute; transform: translate(-50%, -50%); min-width: 90px; max-width: 220px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line-2); font-size: 13px; font-weight: 600; text-align: center; cursor: grab; user-select: none; box-shadow: var(--shadow); white-space: pre-wrap; overflow-wrap: anywhere; }
.nd.root { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); font-size: 15px; font-weight: 800; padding: 12px 18px; }
.nd.lvl1 { border-color: var(--normal-dot); }
.nd.sel { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.nd.linking { outline: 3px dashed var(--accent); }
.nd.st-done-c { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); border-color: var(--ok); } .nd.st-done-c .nt { text-decoration: line-through; opacity: .75; }
.nd.st-hold-c { border-style: dashed; color: var(--muted); }
.nd .nb { position: absolute; top: -9px; right: -6px; font-size: 10px; font-weight: 800; background: var(--surface); border-radius: 6px; padding: 0 4px; border: 1px solid var(--line); }
.nd.proc { border-radius: 8px; min-width: 120px; }
.nd.proc.start { border-radius: 999px; }
.nd input { width: 100%; border: 0; background: transparent; text-align: center; font: inherit; color: inherit; padding: 0; }
.cv-help { font-size: 12px; color: var(--muted); }

/* Nine design methods share the existing board shell. */
.main-head .dz-type-tabs { flex:1 0 100%;max-width:100%;overflow-x:auto; }
.dz-type-tabs button { flex:none;padding:6px 12px; }
.dz-new-types { flex-wrap:wrap; }
.main-body.fill.dz-workspace { overflow:auto; }
.dz-workspace>.dz-head,.dz-workspace>.cv-help,.dz-workspace>.dz-method-guide { flex-shrink:0; }
.dz-method-guide { margin:0 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12px; }
.dz-method-guide summary { padding:10px 12px;cursor:pointer;font-weight:700; }
.dz-method-guide>div { padding:0 12px 8px;max-height:160px;overflow-y:auto;line-height:1.65; }
.dz-method-guide p { margin:6px 0; }
.dz-node-meta { display:block;margin-top:6px;font-size:10px;font-weight:400;line-height:1.4;opacity:.85; }
.dz-analysis-surface { flex:1;min-height:380px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;overflow:auto; }
.dz-analysis-tools { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:12px;color:var(--muted); }
.dz-analysis-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;margin:14px 0; }
.dz-analysis-fields legend { font-weight:700;font-size:12px; }
.dz-analysis-field { display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted); }
.dz-analysis-field input,.dz-analysis-field select { min-width:0;width:100%; }
.dz-rice-table { border-collapse:collapse;width:100%;font-size:13px; }
.dz-rice-table td,.dz-rice-table th { padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top; }
.dz-rice-table th { white-space:nowrap;font-size:11px;color:var(--muted); }
.dz-rice-table .dz-analysis-title { position:relative;min-width:160px;max-width:320px;overflow-wrap:anywhere; }
.dz-analysis-title .badge-s { display:block;font-size:10px;color:var(--muted); }
.dz-analysis-actions { display:flex;flex-wrap:wrap;gap:4px;margin-top:8px; }
.dz-analysis-actions button { padding:4px 6px;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--muted); }
.dz-analysis-actions button:hover { color:var(--text);background:var(--surface-2); }
.dz-analysis-actions .send { color:var(--normal-tx); }.dz-analysis-actions .del { color:#c2412d; }
.dz-swot-grid { display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px; }
.dz-swot-group { border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface-2); }
.dz-swot-group>header { display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px; }
.dz-swot-group h3 { margin:0;font-size:14px; }
.dz-swot-item { position:relative;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow-wrap:anywhere; }
.dz-swot-item>p { font-size:12px;white-space:pre-wrap;line-height:1.5;color:var(--muted); }
.dz-swot-item .badge-s { font-size:10px;margin-left:8px; }
.dz-selecting .dz-swot-item,.dz-selecting .dz-analysis-title { padding-left:32px; }
.dz-analysis-surface .st-done-c b { text-decoration:line-through;color:var(--ok); }
.dz-analysis-surface .st-hold-c { opacity:.65; }

/* ── v4: 노션 흰 배경 · 자동 접힘 메뉴 · 브랜드 ── */
.brand-logo { width: 30px; height: 30px; border-radius: 0; background: none; object-fit: contain; }
.lg-d { display: none !important; } :root[data-theme="dark"] .lg-l { display: none !important; } :root[data-theme="dark"] .lg-d { display: inline-block !important; }
.task, .card-panel, .kpi, .mini-kpis .mk, .rcard, .card, .bm, .meet { border: 1px solid var(--line); box-shadow: none; }
.task:hover, .card:hover, .rcard:hover { border-color: var(--line-2); }
.lane .task, .quad .task { border-color: rgba(55,53,47,.08); }
.beige-panel { border: 1px solid var(--line); }
.step-tag, .flow-arrow { display: none !important; }
.app.auto { grid-template-columns: 64px 1fr; }
.app.auto .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 64px; z-index: 45; transition: width .16s ease, box-shadow .16s; padding-left: 10px; padding-right: 10px; }
.app.auto.peek .sidebar { width: 250px; box-shadow: 8px 0 30px rgba(15,15,15,.12); }
.app.auto .main { grid-column: 2; }
.app.collapsed .clock { padding: 4px 0; }
.app.collapsed .nav-item { padding: 9px 0; }
.app.collapsed .add-btn { padding: 9px 0; }
.app.collapsed .brand-logo { width: 28px; height: 28px; }

/* 인박스: 담당자·프로젝트·상태 보드는 내용 높이에 맞춰 촘촘하게 */
.board.flow { display: block; column-width: 270px; column-gap: 10px; overflow-y: auto; overflow-x: hidden; height: 100%; }
.board.flow > .lane { break-inside: avoid; display: flex; margin-bottom: 10px; max-width: none; min-height: 0; }
.board.flow .lane .lane-body { flex: none; overflow: visible; min-height: 40px; padding-bottom: 6px; }
.board.flow > .lane.add-col { display: grid; min-height: 70px; }

/* 업무회고 행: 열 정렬 고정 (첫 행과 다음 행이 같은 칸에 맞도록) */
.rv-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 96px 44px 40px 72px 112px; gap: 8px; align-items: center; }
.rv-row.np { grid-template-columns: 8px minmax(0, 1fr) 44px 40px 72px 86px; }
.rv-row > .c { display: flex; justify-content: flex-end; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.rv-row > .c.who { justify-content: flex-start; }
.log-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px; align-items: start; }
.log-row .grow { min-width: 0; overflow-wrap: anywhere; }

/* 업무 복사 팝업 */
.cp-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px; }
.cp-opts .flabel { margin: 10px 0 6px; } .cp-opts .flabel:first-child { margin-top: 0; }
.cp-opts label.row { font-size: 13px; padding: 3px 0; }
.cp-prev { width: 100%; height: 52vh; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--surface-2); white-space: pre; }

/* 업무설계 캔버스: 확대/축소 · 도형/글자/선 스타일 */
.cv-zoom { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.cv-zoom button { padding: 3px 8px; border-radius: 7px; font-weight: 700; color: var(--muted); }
.cv-zoom button:hover { background: var(--surface); color: var(--text); }
.cv-zoom span { font-family: var(--mono); font-size: 12px; min-width: 44px; text-align: center; }
.cv-sizer { position: relative; }
.cv-sizer > .canvas { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.canvas svg.edges path.hit { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; fill: none; }
.canvas svg.edges path.vis.sel { filter: drop-shadow(0 0 3px var(--accent)); }
.canvas svg.edges path.vis { pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.canvas svg.edges path.hit:hover { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.nd { border-width: 1.5px; }
.nd.sh-pill { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
.nd.sh-rect { border-radius: 4px; }
.nd.sh-circle { border-radius: 50%; min-width: 0; width: 120px; height: 120px; display: grid; place-items: center; padding: 10px; }
.nd.sh-diamond { border: 0; background: none !important; padding: 26px 34px; min-width: 130px; }
.nd.sh-diamond::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--dfill, var(--surface)); z-index: -1; }
.nd.sh-diamond::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0, 50% 2px, 2px 50%, 50% calc(100% - 2px), calc(100% - 2px) 50%, 50% 2px); background: var(--dline, var(--line-2)); z-index: -1; }
.nd.sh-diamond { isolation: isolate; box-shadow: none; } .nd.sh-diamond.sel { outline: none; filter: drop-shadow(0 0 3px var(--accent)); }
.nd.sz-s { font-size: 12px; } .nd.sz-l { font-size: 16px; } .nd.sz-xl { font-size: 20px; font-weight: 800; }
.nd.fw-b .nt { font-weight: 800; }
.sty-pop { padding: 10px 12px; min-width: 250px; gap: 0; }
.sty-pop .ph { padding: 6px 0 4px; }
.sty-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sty-row button { padding: 4px 8px; border-radius: 6px; font-size: 12px; border: 1px solid var(--line); }
.sty-row button.on { border-color: var(--text); font-weight: 700; }
.sty-row button.sw { width: 22px; height: 22px; padding: 0; border-radius: 6px; }
.popover .sty-row button { text-align: center; }
:root { --c-default: #37352f; --c-gray: #787774; --c-brown: #9f6b53; --c-orange: #d9730d; --c-yellow: #cb912f; --c-green: #448361; --c-blue: #337ea9; --c-purple: #9065b0; --c-pink: #c14c8a; --c-red: #d44c47;
  --b-default: #ffffff; --b-gray: #f1f1ef; --b-brown: #f4eeee; --b-orange: #fbecdd; --b-yellow: #fbf3db; --b-green: #edf3ec; --b-blue: #e7f3f8; --b-purple: #f4f0f7; --b-pink: #f9eef3; --b-red: #fdebec; }
:root[data-theme="dark"] { --c-default: #e6e6e6; --c-gray: #9b9b9b; --c-brown: #ba856f; --c-orange: #c77d48; --c-yellow: #ca9849; --c-green: #529e72; --c-blue: #5e87c9; --c-purple: #9d68d3; --c-pink: #d15796; --c-red: #df5452;
  --b-default: #2a2a2a; --b-gray: #2f2f2f; --b-brown: #4a3228; --b-orange: #5c3b23; --b-yellow: #564328; --b-green: #243d30; --b-blue: #143a4e; --b-purple: #3c2d49; --b-pink: #4e2c3c; --b-red: #522e2a; }

/* ── v5 ── */
/* 로고: 접힌 메뉴에서는 숨기고, 펼치면 크게 */
.brand .brand-logo { width: 40px; height: 40px; }
.app.collapsed .brand img.brand-logo { display: none !important; }
.app.collapsed .brand { padding-top: 6px; }

/* 업무 카드 호버 메뉴: 카드 위쪽 모서리로 올려 내용을 가리지 않게 + 버튼별 색 */
.task .acts { top: -25px; right: 6px; transform: none; padding: 2px; border-radius: 9px; gap: 1px; box-shadow: 0 2px 10px rgba(15,15,15,.14); z-index: 8; }
.task:hover { z-index: 7; }
.acts button { width: 26px; height: 24px; border-radius: 6px; }
.acts button.c-done { color: #2c7a51; } .acts button.c-done:hover { background: #d9efe2; color: #2c7a51; }
.acts button.c-follow { color: #2f57b0; } .acts button.c-follow:hover { background: #dbe6fb; color: #2f57b0; }
.acts button.c-later { color: #b26a00; } .acts button.c-later:hover { background: #fbecdd; color: #b26a00; }
.acts button.c-hold { color: #7444a8; } .acts button.c-hold:hover { background: #ece1f7; color: #7444a8; }
.acts button.c-del { color: #c2412d; } .acts button.c-del:hover { background: #fdebec; color: #c2412d; }
:root[data-theme="dark"] .acts button.c-done:hover { background: #1f3d2d; } :root[data-theme="dark"] .acts button.c-follow:hover { background: #24375e; }
:root[data-theme="dark"] .acts button.c-later:hover { background: #5c3b23; } :root[data-theme="dark"] .acts button.c-hold:hover { background: #3b2c52; } :root[data-theme="dark"] .acts button.c-del:hover { background: #522e2a; }
:root[data-theme="dark"] .acts button.c-done { color: #93dbb2; } :root[data-theme="dark"] .acts button.c-follow { color: #a9c4ff; } :root[data-theme="dark"] .acts button.c-later { color: #f3c48c; } :root[data-theme="dark"] .acts button.c-hold { color: #d4b6f5; } :root[data-theme="dark"] .acts button.c-del { color: #ff9b8a; }
.acts button[data-tip]:hover::after { top: auto; bottom: calc(100% + 5px); }
.task .acts::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }
/* 첫 카드의 메뉴가 잘리지 않도록 목록 위쪽 여백 */
.list-panel .task-list, .lane .lane-body, .quad .lane-body { padding-top: 26px; }
.lane .lane-body > .task-list, .quad .task-list { padding-top: 0; }

/* 후속 작업: 선행 업무 아래에 └ 화살표로 들여쓰기 */
.task.follow { margin-left: calc(var(--dep, 1) * 18px); }
.task.follow::before { content: ""; position: absolute; left: -13px; top: -8px; width: 9px; height: 20px; border-left: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); border-bottom-left-radius: 4px; }
.task.follow::after { content: ""; position: absolute; left: -6px; top: 8px; border: 4px solid transparent; border-left: 5px solid var(--faint); }

/* 우선순위 4분면: 넓으면 카드를 블록처럼 여러 열로, 좁으면 한 열로 */
.quad .task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; align-content: start; }
.quad .task-list > .empty { grid-column: 1 / -1; }
.quad .task.follow { margin-left: 0; } .quad .task.follow::before { left: 3px; top: -6px; height: 14px; } .quad .task.follow::after { display: none; }
.quad .task.follow .task-main { padding-left: 8px; }

/* 만다라트 칸 메뉴: 마우스를 옮기는 동안 사라지지 않게 (다리 영역 + 잠깐 유지) */
.mc .cell-menu { display: flex !important; visibility: hidden; opacity: 0; top: -22px; transition: opacity .12s, visibility 0s linear .35s; }
.mc .cell-menu::after { content: ""; position: absolute; left: -6px; right: -6px; top: 100%; height: 14px; }
.mc:hover .cell-menu, .mc .cell-menu:hover { visibility: visible; opacity: 1; transition-delay: 0s; }
.mc:has(textarea) .cell-menu { visibility: hidden; }

/* 업무회고: 왼쪽 넓게 담당자별 · 오른쪽 점검(케어·마감 임박)과 업무 로그 */
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 14px; align-items: start; }
.rv-layout .rv-who { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); margin-bottom: 0; }
.rv-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; }
.rv-side .beige-panel { padding: 10px 12px; }
.rv-side .rv-row { grid-template-columns: 8px minmax(0, 1fr) 78px 38px 100px; }
.rv-side .rv-row > .c.st, .rv-side .rv-row > .c.days { display: none; }
.rv-side .ins-log { max-height: 46vh; }
@media (max-width: 1100px) { .rv-layout { grid-template-columns: 1fr; } .rv-side { position: static; } }

/* 후속 업무 묶음: 블록 배치에서도 선행 아래로 세로 정렬 */
.chain { display: contents; }
.quad .chain { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quad .chain .task.follow { margin-left: 16px; } .quad .chain .task.follow::before { left: -12px; top: -8px; height: 20px; } .quad .chain .task.follow::after { display: block; } .quad .chain .task.follow .task-main { padding-left: 0; }

/* 인박스 담당자·프로젝트·상태 보드: 칸 단위 그리드 + 항목이 많은 칸은 2열 너비(머리글도 2열) */
.board.flow { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-auto-flow: row dense; align-items: start; gap: 10px; column-width: auto; scrollbar-gutter: stable; }
.board.flow > .lane { margin-bottom: 0; break-inside: auto; align-self: start; }
.board.flow > .lane.wide { grid-column: span 2; }
.board.flow > .lane.wide .lane-body > .task-list, .board.flow > .lane.wide .subgroup .task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.board.flow > .lane.wide .task-list > .empty { grid-column: 1 / -1; }
.lane.wide .chain { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 700px) { .board.flow > .lane.wide { grid-column: auto; } .board.flow > .lane.wide .lane-body > .task-list { grid-template-columns: 1fr; } }

/* 홈 오른쪽 위: 시계 · 날짜 · 주차 · 날씨 */
.hclock { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px !important; }
.hc-tm { text-align: right; }
.hc-tm .ht { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.hc-tm .ht small { font-size: 12px; color: var(--muted); margin-left: 2px; }
.hc-tm .hd { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.hc-wx { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.hc-wx .wi { font-size: 32px; } .hc-wx b { font-size: 20px; font-family: var(--mono); } .hc-wx .faint { font-size: 11.5px; }


/* 홈 오른쪽 아래: 고양이 + 생각 말풍선 */
.home-cat { position: fixed; right: 16px; bottom: 8px; width: 117px; height: 115px; pointer-events: none; z-index: 0; }
.home-cat img { width: 117px; height: 115px; position: absolute; right: 0; bottom: 0; }
.home-cat .thought { position: absolute; z-index: 2; right: 118px; bottom: 30px; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 18px; padding: 6px 13px; font-weight: 800; font-size: 13.5px; white-space: nowrap; box-shadow: var(--shadow); color: var(--text); }
.home-cat .thought i { font-style: normal; animation: dots 1.4s infinite; opacity: .2; }
.home-cat .thought i:nth-of-type(2) { animation-delay: .2s; } .home-cat .thought i:nth-of-type(3) { animation-delay: .4s; }
@keyframes dots { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.home-cat .tb { position: absolute; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-2); }
.home-cat .t1 { width: 9px; height: 9px; right: 107px; bottom: 36px; z-index: 2; }
.home-cat .t2 { width: 6px; height: 6px; right: 99px; bottom: 44px; z-index: 2; }
.home-cat .thought, .home-cat .tb { transition: opacity .15s; }
/* 안내(toast) = 고양이 말풍선: 고양이 왼쪽에 쌓이고, 맨 아래 말풍선 꼬리가 고양이 쪽을 가리킴 */
/* 말풍선 모양 = 홈 고양이 'Doing…' 생각 말풍선과 똑같이 (둥근 칸 + 작은 동그라미 두 개), 글만 바뀜 */
.toasts.cat-say { right: 100px; bottom: 28px; max-width: calc(100vw - 116px); gap: 6px; }
.toasts.cat-say .toast { background: var(--surface); color: var(--text); border: 1.5px solid var(--line-2); border-radius: 18px; padding: 6px 8px 6px 13px; box-shadow: var(--shadow); font-weight: 800; font-size: 13.5px; gap: 8px; position: relative; animation: tin .18s ease-out; }
.toasts.cat-say .toast button { color: var(--accent); font-weight: 800; }
.toasts.cat-say .toast button:last-child { color: var(--faint) !important; display: grid; place-items: center; }
.toasts.cat-say .toast.alarm { background: var(--accent); color: #fff; border-color: var(--accent); }
.toasts.cat-say .toast.alarm button { color: #fff !important; }
.toasts.cat-say .toast:last-child::before, .toasts.cat-say .toast:last-child::after { content: ''; position: absolute; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-2); }
.toasts.cat-say .toast:last-child::before { width: 9px; height: 9px; right: -11px; bottom: 6px; }
.toasts.cat-say .toast:last-child::after { width: 6px; height: 6px; right: -19px; bottom: 14px; }
.toasts.cat-say .toast.alarm:last-child::before, .toasts.cat-say .toast.alarm:last-child::after { background: var(--accent); border-color: var(--accent); }
.toast-cat { position: fixed; right: 14px; bottom: 6px; width: 84px; height: 83px; z-index: 69; pointer-events: none; display: none; animation: catup .2s ease-out; }
.toast-cat img { position: absolute; right: 0; bottom: 0; width: 84px; height: 83px; }
@keyframes catup { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
body:has(#toasts:not(:empty)) .toast-cat { display: block; }
/* 홈: 말하는 동안에는 홈 고양이 자리에 같은 크기 고양이가 맨 위로 (카드에 가려지지 않게), 홈 고양이 · '생각 중' 말풍선은 잠깐 감춤 */
body:has(.home-cat) .toast-cat { right: 16px; bottom: 8px; width: 117px; height: 115px; animation: none; }
body:has(.home-cat) .toast-cat img { width: 117px; height: 115px; }
body:has(.home-cat) .toasts.cat-say { right: 134px; bottom: 38px; } /* 홈 '생각' 말풍선과 같은 자리 */
body:has(#toasts:not(:empty)) .home-cat { visibility: hidden; }
@media (max-width: 640px) { .toasts.cat-say { right: 82px; bottom: 22px; } .toast-cat, .toast-cat img, body:has(.home-cat) .toast-cat, body:has(.home-cat) .toast-cat img { width: 66px; height: 65px; } body:has(.home-cat) .toasts.cat-say { right: 82px; bottom: 22px; } }
.main-body:has(.home-cat) { padding-bottom: 150px; }
.main-body:has(.home-cat) > :not(.home-cat) { position: relative; z-index: 1; }
@media (max-width: 640px) { .home-cat { transform: scale(.8); transform-origin: right bottom; } }

/* 추천 목록 (datalist 대체) */
.sg-pop { position: fixed; z-index: 95; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; max-height: 260px; overflow-y: auto; font-size: 13px; }
.sg-it { padding: 7px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: baseline; }
.sg-it small { color: var(--faint); font-size: 11px; margin-left: auto; }
.sg-it.on { background: var(--surface-2); }
/* 업무 페이지: 선행 작업 검색 · 마감 묶음 · 플래너 일정 */
.pick-wrap { position: relative; display: flex; }
.pick-wrap input:not([type=hidden]) { flex: 1; padding-right: 30px; height: 32px; font-size: 13px; }
.pick-x { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 6px; color: var(--faint); display: grid; place-items: center; }
.pick-x:hover { background: var(--surface-2); color: var(--text); }
.ef3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.due-box, .plan-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.qd { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 12px; }
.qd .ql { font-weight: 700; color: var(--muted); width: 30px; font-size: 11px; }
.qd button { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12px; }
.qd button:hover { border-color: var(--text); } .qd button.on { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); }
.qd i { width: 1px; height: 14px; background: var(--line-2); margin: 0 4px; }
/* 기록함 편집기 */
.md-tools { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 6px; }
.md-tools button { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.md-tools button:hover { color: var(--text); border-color: var(--line-2); }

@media (max-width: 980px) { .rv-who { grid-template-columns: 1fr !important; } .home-grid, .rt-grid, .rv-check { grid-template-columns: 1fr; } .week-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .matrix { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .quad .lane-body { max-height: 360px; } }

/* 반응형 */
.mobile-menu { display: none !important; }
.app.nonav .mobile-menu { display: none !important; }
@media (max-width: 980px) {
  .inbox-grid, .planner-grid, .routine-grid { grid-template-columns: 1fr; height: auto; }
  .main-body.fill { overflow: auto; display: block; }
  .lanes { grid-template-columns: 1fr; height: auto; }
  .lane .task-list, .list-panel .task-list { max-height: 420px; }
  .plan-panel { min-height: 640px; }
}
@media (max-width: 640px) {
  .app, .app.auto { grid-template-columns: 1fr; }
  .app.auto .main { grid-column: 1; } .app.auto .sidebar, .app.auto.peek .sidebar { width: 250px; }
  .app .sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 250px; transform: translateX(-100%); transition: transform .2s; }
  .app.mobile-open .sidebar { transform: none; }
  .mobile-menu { display: grid !important; }
  .main-head { padding: 16px 16px 10px; }
  .main-body { padding: 4px 16px 20px; }
  .main-title { font-size: 22px; }
}

/* 이메일: 담당자별 업무 이메일 */
.mail-map { width: 100%; border-collapse: collapse; font-size: 13px; } .mail-map th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); } .mail-map td { padding: 4px 6px; border-bottom: 1px solid var(--line); } .mail-map input { width: 100%; height: 30px; padding: 4px 8px; }

/* 폰트 통일: 표의 이름 칸·글자는 본문 글꼴, 숫자 칸만 고정폭 */
.stat-table td:first-child, .stat-table th { font-family: var(--font); }
input::placeholder, textarea::placeholder { font-family: var(--font); }
/* 드롭다운 목록(option): 다크 모드에서도 배경·글자색이 보이도록 */
select option, select optgroup { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] select { color-scheme: dark; }
/* 모바일 홈: 화면 너비 안에 모두 보이도록 */
@media (max-width: 640px) {
  .home-grid, .home-grid > *, .home-grid .col, .card-panel, .beige-panel { min-width: 0; max-width: 100%; }
  .card-panel, .beige-panel { padding: 14px 12px; overflow: hidden; }
  .panel-head { flex-wrap: wrap; gap: 2px 8px; } .panel-sub { white-space: normal; font-size: 11.5px; }
  .stat-table { width: 100%; table-layout: fixed; }
  .stat-table th, .stat-table td { padding: 5px 1px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-table th:first-child, .stat-table td:first-child { width: 28%; text-align: left; }
  .stat-table .chip, .stat-table .who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .stackbar span { font-size: 10.5px; overflow: hidden; white-space: nowrap; }
  .mini-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mini-kpis .mk { min-width: 0; }
  .hclock { flex-wrap: wrap; gap: 8px; } .hclock > * { min-width: 0; }
  .sch .tm { width: 64px; } .sch > * { min-width: 0; }
  .main-head { flex-wrap: wrap; gap: 8px; }
  .main-body { overflow-x: hidden; }
}
/* 업무설계: 모바일에서는 PC 안내 화면 */
.pc-only { max-width: 360px; margin: 12vh auto 0; text-align: center; padding: 28px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.pc-only .pi { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px; background: var(--panel); display: grid; place-items: center; }
.pc-only h3 { margin: 0 0 8px; font-size: 18px; } .pc-only p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
/* 주간 보고 */
.wk-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.wk-opts { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; }
.wk-opts input:not([type="checkbox"]), .wk-opts textarea { width: 100%; }
.wk-sec { display: flex; align-items: baseline; padding: 3px 0; cursor: pointer; } .wk-sec input { flex: none; margin: 0 2px 0 0; transform: translateY(1px); }
.wk-sec { font-size: 13px; gap: 6px; flex-wrap: wrap; } .wk-sec .faint { font-size: 11.5px; }
.wk-prev { height: calc(100vh - 190px); min-height: 420px; white-space: pre-wrap; }
.wk-nav button { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 980px) { .wk-grid { grid-template-columns: 1fr; } .wk-opts { position: static; } .wk-prev { height: 60vh; } }
/* 접속 관리: 노트 위젯 공유 주소 */
.nk-box { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2); }

/* 업무설계: 만다라트는 창 크기에 맞춰 자동 조절 · 휠 확대/축소 · 끌어서 이동 */
.mandala-wrap { flex: 1; min-height: 360px; overflow: auto; padding: 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); cursor: grab; }
.mandala-wrap .mc { font-size: calc(12px * var(--mk)); cursor: pointer; }
.mandala-wrap .mc.goal { font-size: calc(13.5px * var(--mk)); }
.mandala-wrap .mc textarea { font-size: calc(12px * var(--mk)); cursor: text; }
.canvas-wrap { cursor: grab; } .canvas-wrap .nd { cursor: pointer; }
.canvas-wrap.panning, .mandala-wrap.panning, .panning * { cursor: grabbing !important; user-select: none; }
/* 보고 양식: 회고 지표 (한 가지 색 막대 · 값은 글자로) */
.rp-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin-bottom: 12px; }
.rp-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp-tile { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--bg); }
.rp-tile .kl { font-size: 12px; color: var(--muted); } .rp-tile .kv { font-size: 22px; font-weight: 800; font-family: var(--mono); color: var(--text); line-height: 1.25; } .rp-tile .kv small { font-size: 12px; font-weight: 600; font-family: var(--font); color: var(--muted); margin-left: 2px; } .rp-tile .ks { font-size: 11px; color: var(--faint); }
.rp-ch { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--bg); min-width: 0; }
.rp-cht { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.rp-hb { display: grid; grid-template-columns: minmax(60px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.rp-hb:hover { background: var(--panel); border-radius: 6px; }
.rp-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rp-hbar { height: 10px; } .rp-hbar i { display: block; height: 100%; min-width: 3px; background: var(--normal-dot); border-radius: 0 4px 4px 0; }
.rp-hv { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.rp-cols { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 14px; }
.rp-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; padding-bottom: 18px; cursor: default; }
.rp-col i { display: block; width: min(26px, 70%); background: var(--normal-dot); border-radius: 4px 4px 0 0; }
.rp-col:hover i { filter: brightness(1.12); } .rp-col:hover { background: var(--panel); border-radius: 6px; }
.rp-cv { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.rp-cl { position: absolute; bottom: 0; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.rp-custom input { height: 32px; width: 140px; }
@media (max-width: 1100px) { .rp-charts { grid-template-columns: 1fr; } }
/* 홈: 팀 공지 */
.notice-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border-left: 3px solid var(--accent); }
.notice-card .panel-head { width: 100%; }
.notice-card > textarea, .notice-card > .row { width: 100%; }
.notice-card:has(textarea) { display: block; }
.nt-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex: none; }
.nt-body { flex: 1; min-width: 0; } .nt-line { font-weight: 600; line-height: 1.6; } .nt-line + .nt-line { border-top: 1px dashed var(--line); padding-top: 2px; margin-top: 2px; }
.nt-meta { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
/* 홈: 오늘의 포커스 */
.fc-prog { width: 80px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-left: auto; } .fc-prog i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.fc-list { display: flex; flex-direction: column; gap: 2px; }
.fc-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; min-width: 0; }
.fc-row:hover { background: var(--panel); }
.fc-row.top .fc-t { font-weight: 600; }
.fc-n { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.fc-row.top .fc-n { background: var(--ink); color: var(--ink-tx); }
.fc-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 13.5px; }
.fc-st { color: #e0a32e; font-size: 11px; letter-spacing: -1px; flex: none; }
.fc-why { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--panel); color: var(--muted); flex: none; white-space: nowrap; }
.fc-why.over { background: var(--urgent-bg); color: var(--urgent-tx); } .fc-why.due { background: var(--delegate-bg); color: var(--delegate-tx); } .fc-why.urg { background: var(--urgent-bg); color: var(--urgent-tx); } .fc-why.plan { background: var(--normal-bg); color: var(--normal-tx); }
/* 홈: Daily log */
.dl-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.dl-tabs button { font-size: 12px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.dl-tabs button.on { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); }
.dl-tabs button.has:not(.on)::after { content: "•"; color: var(--accent); margin-left: 3px; }
.dl-in { width: 100%; resize: vertical; font-size: 13.5px; }
.dl-help { font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.5; }
.ml { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.ml-latest { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; margin-bottom: 4px; }
.ml-latest:hover { background: var(--panel); }
.ml-lt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .ml-lt .faint { font-size: 11.5px; }
.ml-txt { font-size: 12.5px; white-space: pre-wrap; max-height: 150px; overflow: auto; color: var(--text); margin-top: 4px; line-height: 1.55; }
.ml-txt .ml-h { display: inline-block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ml-h1 { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 4px; border-radius: 6px; font-size: 13px; }
.ml-h1:hover { background: var(--panel); } .ml-h1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .ml-h1 .faint { font-size: 11.5px; }
.ml-h1 .car { color: var(--muted); transition: transform .15s; display: inline-block; } .ml-it.open .ml-h1 .car { transform: rotate(90deg); }
.ml-ed { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 10px 22px; } .ml-ed input, .ml-ed textarea { width: 100%; font-size: 13px; }
/* 홈: 담당자별 업무량 */
.wl { display: flex; flex-direction: column; gap: 8px; }
.wl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; border-radius: 8px; padding: 2px 4px; }
.wl-row:hover { background: var(--panel); }
.wl-name { min-width: 0; overflow: hidden; }
.wl-bars { position: relative; display: flex; flex-direction: column; gap: 3px; }
.wl-bars::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: var(--cap); width: 0; border-left: 1.5px dashed var(--muted); opacity: .6; }
.wl-bar { position: relative; height: 14px; display: flex; align-items: center; }
.wl-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.wl-bar.w0 i { background: var(--normal-dot); } .wl-bar.w1 i { background: color-mix(in srgb, var(--normal-dot) 40%, var(--surface)); }
.wl-bar.over i { background: var(--warn); }
.wl-v { margin-left: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text); white-space: nowrap; } .wl-v small { font-family: var(--font); color: var(--muted); font-size: 11px; }
.wl-legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 11.5px; margin-top: 10px; color: var(--muted); }
.wl-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; } .wl-legend i.w0 { background: var(--normal-dot); } .wl-legend i.w1 { background: color-mix(in srgb, var(--normal-dot) 40%, var(--surface)); }
/* 업무 편집: 예상 소요 */
.est-pick { gap: 4px; flex-wrap: wrap; } .est-pick button { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); } .est-pick button.on { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); }
@media (max-width: 640px) { .wl-row { grid-template-columns: 84px minmax(0, 1fr); } .fc-why { display: none; } .fc-why.over { display: inline; } }
/* 홈: Daily log — 메모지 느낌 (줄 노트 · 위쪽 테이프) */
:root { --paper: #fffcf3; --paper-line: rgba(196, 170, 120, .28); --paper-edge: #efe5cc; --paper-tape: rgba(232, 112, 90, .22); }
:root[data-theme="dark"] { --paper: #24221d; --paper-line: rgba(220, 200, 160, .10); --paper-edge: #3a362c; --paper-tape: rgba(232, 112, 90, .28); }
.home-right { min-height: 100%; }
.dlog-card { display: flex; flex-direction: column; flex: 1; padding: 0; overflow: visible; background: transparent; box-shadow: none; }
.dl-paper { position: relative; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px 4px 14px 4px; padding: 18px 18px 12px; box-shadow: 0 1px 0 var(--paper-edge), 0 6px 18px rgba(60, 45, 20, .08); display: flex; flex-direction: column; }
.dl-paper::before { content: ""; position: absolute; top: -9px; left: 50%; width: 92px; height: 20px; transform: translateX(-50%) rotate(-2deg); background: var(--paper-tape); border-radius: 2px; }
.dl-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dl-title { font-weight: 800; font-size: 15px; letter-spacing: .02em; } .dl-date { font-size: 12.5px; color: var(--muted); } #dlSt { margin-left: auto; font-size: 11.5px; }
.paper-lines { background-color: transparent; background-image: linear-gradient(to bottom, transparent 27px, var(--paper-line) 27px, var(--paper-line) 28px); background-size: 100% 28px; background-attachment: local; line-height: 28px; border: 0; border-radius: 0; padding: 0 4px; font-size: 14.5px; color: var(--text); resize: vertical; }
.paper-lines:focus { border: 0; outline: none; box-shadow: none; }
.dl-in { width: 100%; min-height: 336px; flex: 1; }
.dl-foot { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--paper-edge); }
.dl-foot .dl-help { flex: 1; margin: 0; }
.dlog-card .ml { border: 0; margin-top: 12px; padding: 0 4px; }
.ml-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.ml-head a { font-weight: 500; font-size: 12px; color: var(--faint); text-decoration: none; } .ml-head a:hover { color: var(--text); }
.ml-it { border-bottom: 1px solid var(--line); padding: 2px 0; } .ml-it:last-child { border-bottom: 0; }
.ml-pv { font-size: 12px; color: var(--faint); padding: 0 6px 6px 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-ed { padding: 4px 4px 10px 22px; }
.ml-ed .paper-lines { background-color: var(--paper); border: 1px solid var(--paper-edge); border-radius: 6px; padding: 0 10px; min-height: 168px; }
/* 모바일 메뉴: 바깥 누르면 닫힘 · × 버튼 */
.mob-back, .mob-close { display: none; }
@media (max-width: 640px) {
  .app.mobile-open .mob-back { display: block; position: fixed; inset: 0; background: rgba(15, 15, 15, .38); z-index: 39; }
  .app .sidebar { z-index: 40; }
  .mob-close { position: absolute; top: 14px; right: 10px; z-index: 2; color: var(--side-muted); }
  .app.mobile-open .mob-close { display: grid; }
  .app .side-toggle { display: none; }
}
/* 모바일·터치: 안쪽 스크롤 대신 페이지 전체가 한 번에 스크롤 (안쪽 스크롤에 갇히지 않게) */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1024px) {
  html, body { height: auto; }
  body { overflow-y: auto; overflow-x: hidden; }
  .app, .app.auto { height: auto; min-height: 100vh; }
  .main { min-height: 100vh; }
  .main-head { position: sticky; top: 0; z-index: 20; background: var(--bg); }
  .main-body, .main-body.fill { overflow: visible; height: auto; flex: none; }
  .inbox-grid, .planner-grid, .routine-grid, .lanes, .matrix, .board, .board.flow, .proj-grid { height: auto !important; max-height: none !important; overflow: visible !important; }
  .task-list, .lane .task-list, .list-panel .task-list, .lane .lane-body, .quad .lane-body, .proj .task-list, .memos, .ins-log, .rv-side .ins-log, .user-list, .copy-list, .ml-txt { max-height: none !important; overflow: visible !important; }
  .proj { max-height: none; }
  .tl-wrap { overflow-x: auto; overflow-y: visible; flex: none; }
  .wk-prev { height: 60vh; }
  .dl-in { min-height: 240px; }
}
/* 모바일 메뉴: 열려 있으면 뒤 페이지 스크롤 막고 메뉴만 스크롤 · 항상 펼친 모양 */
html.no-scroll, html.no-scroll body { overflow: hidden !important; overscroll-behavior: none; }
@media (max-width: 640px) {
  .app .sidebar { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .app .sidebar .nav { flex: none; overflow: visible; }
}
/* 모바일 로그인 버튼 */
.lg-open { display: flex; justify-content: center; width: 100%; padding: 12px; font-size: 15px; margin-bottom: 8px; text-decoration: none; }
/* 개인 메모 (보기 › 개인 메모) */
:root { --mc-none: var(--paper); --mc-yellow: #fff6cc; --mc-blue: #e6f0fb; --mc-green: #e7f5ea; --mc-pink: #fbe8ef; --mc-purple: #efe8f8; --mc-gray: #f1f1ef; }
:root[data-theme="dark"] { --mc-yellow: #3b3520; --mc-blue: #1d2b3c; --mc-green: #1e3326; --mc-pink: #3a2129; --mc-purple: #2d2438; --mc-gray: #2c2c2c; }
.c-none { --mc: var(--mc-none); } .c-yellow { --mc: var(--mc-yellow); } .c-blue { --mc: var(--mc-blue); } .c-green { --mc: var(--mc-green); } .c-pink { --mc: var(--mc-pink); } .c-purple { --mc: var(--mc-purple); } .c-gray { --mc: var(--mc-gray); }
.pm-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.mm-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.mm-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; }
.mm-side .search { height: 36px; }
.mm-filters { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mm-filters button { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.mm-filters button.on { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); }
.mm-sw { width: 18px; height: 18px; min-width: 18px; padding: 0 !important; border-radius: 50% !important; background: var(--mc) !important; border: 1.5px solid var(--line-2) !important; }
.mm-sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.mm-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 250px); overflow-y: auto; padding: 2px; }
.mm-card { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 4px 4px 12px 4px; background: var(--mc); border: 1px solid var(--paper-edge); box-shadow: 0 1px 0 var(--paper-edge); transition: transform .1s, box-shadow .1s; }
.mm-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(60, 45, 20, .1); }
.mm-card.on { outline: 2px solid var(--text); outline-offset: -1px; }
.mm-t { display: flex; align-items: center; gap: 6px; } .mm-t b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.mm-pin { font-size: 11px; } .mm-d { font-size: 11px; color: var(--faint); font-family: var(--mono); flex: none; }
.mm-s { font-size: 12px; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.mm-f { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .mm-ck { font-size: 11px; font-family: var(--mono); color: var(--muted); } .mm-ck.all { color: var(--ok); } .mm-tag { font-size: 11px; color: var(--normal-tx); }
.mm-ed { background: var(--mc); border: 1px solid var(--paper-edge); border-radius: 4px 4px 16px 4px; box-shadow: 0 6px 18px rgba(60, 45, 20, .08); padding: 12px 18px 12px; position: relative; }
.mm-ed::before { content: ""; position: absolute; top: -9px; left: 50%; width: 96px; height: 20px; transform: translateX(-50%) rotate(-2deg); background: var(--paper-tape); border-radius: 2px; }
.mm-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--paper-edge); margin-bottom: 8px; }
.mm-tools .icon-btn { opacity: .45; } .mm-tools .icon-btn.on { opacity: 1; }
.mm-colors { display: flex; gap: 4px; margin-left: 4px; }
.mm-paper textarea { width: 100%; min-height: calc(100vh - 290px); }
.mm-view { min-height: calc(100vh - 290px); font-size: 14.5px; line-height: 28px; background-image: linear-gradient(to bottom, transparent 27px, var(--paper-line) 27px, var(--paper-line) 28px); background-size: 100% 28px; padding: 0 4px; }
.mm-view a { color: inherit; text-decoration: underline; }
.mv-h { font-weight: 800; font-size: 15px; } .mv-li::before { content: "•"; color: var(--muted); margin-right: 8px; } .mv-sp { height: 28px; }
.mv-chk { display: flex; align-items: center; gap: 8px; cursor: pointer; } .mv-chk input { width: 16px; height: 16px; accent-color: #2383e2; flex: none; } .mv-chk.on span { text-decoration: line-through; color: var(--faint); }
.mm-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--paper-edge); }
.mm-foot input { flex: 1; height: 30px; background: transparent; border-color: var(--paper-edge); font-size: 12.5px; } .mm-foot .faint { font-size: 11.5px; white-space: nowrap; }
.tpl-wrap { position: relative; } .tpl-menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 30; min-width: 150px; display: flex; flex-direction: column; }
.tpl-menu button { text-align: left; padding: 7px 10px; border-radius: 7px; font-size: 13px; } .tpl-menu button:hover { background: var(--panel); }
@media (max-width: 900px) { .mm-grid { grid-template-columns: 1fr; } .mm-side { position: static; } .mm-list { max-height: 260px; } .mm-paper textarea, .mm-view { min-height: 50vh; } }
@media (max-width: 640px), (pointer: coarse) and (max-width: 1024px) { .mm-list { max-height: none; overflow: visible; } }
/* 메모 편집기: 쓰는 화면 = 보는 화면 (체크박스·목록·소제목이 바로 보임) */
.me { position: relative; min-height: 196px; cursor: text; outline: none; }
.me.empty::before { content: attr(data-ph); position: absolute; left: 4px; top: 0; color: var(--faint); font-size: 14px; line-height: 28px; pointer-events: none; }
.me-row { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; padding: 0 4px; }
.me-tx { flex: 1; min-width: 0; outline: none; font-size: 14.5px; line-height: 28px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.me-row.t-h .me-tx { font-weight: 800; font-size: 15.5px; }
.me-bul { width: 16px; flex: none; text-align: center; color: var(--muted); line-height: 28px; }
.me-cb { width: 17px; height: 17px; flex: none; margin-top: 5.5px; border: 1.6px solid var(--muted); border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; cursor: pointer; background: var(--bg); transition: background .1s, border-color .1s; }
.me-cb:hover { border-color: #2383e2; }
.me-row.done .me-cb { background: #2383e2; border-color: #2383e2; }
.me-row.done .me-tx { text-decoration: line-through; color: var(--faint); }
/* 홈 Daily log: 메모 쌓기 */
.dl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dl-head .dl-title { font-weight: 800; font-size: 15px; } .dl-head .dl-date { font-size: 12.5px; color: var(--muted); }
.dl-all { font-size: 12px; color: var(--faint); text-decoration: none; white-space: nowrap; } .dl-all:hover { color: var(--text); }
.dl-stack { display: flex; flex-direction: column; gap: 6px; }
.dl-paper.c-none, .dl-paper { background: var(--mc, var(--paper)); }
.dl-paper .dl-top { display: flex; align-items: center; gap: 8px; } .dl-mt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dl-paper .icon-btn.sm { width: 26px; height: 26px; color: var(--faint); } .dl-paper .icon-btn.sm:hover { color: #c2412d; }
.dl-ed { min-height: 300px; margin-top: 4px; }
.dl-stack .ml-it { border: 1px solid var(--paper-edge); border-radius: 8px; background: var(--bg); padding: 0; }
.dl-stack .ml-h1 { padding: 8px 10px; }
.ml-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mc); border: 1px solid var(--line-2); flex: none; }
.dl-more { display: block; font-size: 12px; color: var(--faint); text-decoration: none; padding: 8px 4px 0; } .dl-more:hover { color: var(--text); }
/* 개인 메모: 그룹 · 끌어서 옮기기 */
.mm-paper { min-height: calc(100vh - 290px); }
.mm-grp { border-radius: 10px; padding: 2px; }
.mm-gh { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 6px; font-size: 12.5px; color: var(--muted); border-radius: 8px; }
.mm-gh:hover { background: var(--panel); } .mm-gh b { flex: 1; text-align: left; color: var(--text); } .mm-gh .n { font-family: var(--mono); font-size: 11px; }
.mm-gh .car { display: inline-block; width: 10px; transition: transform .15s; } .mm-grp.closed .car { transform: rotate(-90deg); } .mm-grp.closed .mm-gb { display: none; }
.mm-gb { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 6px 10px; border-left: 2px solid var(--line); margin-left: 10px; }
.mm-empty { font-size: 11.5px; color: var(--faint); padding: 6px 4px; }
.mm-grp.drop-on { background: color-mix(in srgb, #2383e2 9%, transparent); outline: 1.5px dashed #2383e2; }
.mm-card { cursor: grab; } .mm-card.dragging { opacity: .45; }
.mm-gsel { height: 28px; padding: 2px 8px; font-size: 12.5px; border-radius: 8px; background: transparent; max-width: 140px; }
/* 체크 표시: 네모 칸 정가운데 */
.me-cb { line-height: 0; font-size: 0; color: transparent; }
.me-cb svg { width: 12px; height: 12px; display: block; }
.me-row.done .me-cb { color: #fff; }
/* 홈 Daily log 도구 버튼 */
.dl-tools { display: flex; gap: 2px; flex-wrap: wrap; margin: 4px -6px 0; padding-bottom: 6px; border-bottom: 1px dashed var(--paper-edge); }
.dl-tools .btn { color: var(--muted); } .dl-tools .btn:hover { color: var(--text); }
.mm-gx { margin-left: 4px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: var(--faint); font-size: 14px; } .mm-gx:hover { background: var(--line); color: #c2412d; }

/* 노션 안(임베드)에서 휴대폰으로 볼 때: 전체 화면으로 열기 버튼 (노션 페이지 스크롤 + 위젯 스크롤이 겹치지 않게) */
.fs-open { display: none; }
@media (max-width: 640px), (pointer: coarse) and (max-width: 1024px) { html.embedded .fs-open { display: grid; margin-left: -4px; color: var(--muted); } }
/* 설정 창: 내 정보 버튼 묶음 */
.me-acts { display: flex; gap: 6px; flex: none; }
/* 설정 창 · 팝업 — 휴대폰(좁은 화면) 전용 배치 */
@media (max-width: 640px) {
  .modal-root .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .modal-root.open { align-items: stretch; padding: 0; }
  .modal-h { padding: 14px 16px 8px; position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .modal-h h3 { font-size: 17px; }
  .modal-b { padding: 4px 16px 16px; }
  .modal-f { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); }
  .modal-f .btn { flex: 1; justify-content: center; }
  .modal .section-title { font-size: 15px; margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .modal .section-title:first-child { border-top: 0; padding-top: 0; margin-top: 6px; }
  /* 내 정보: 이름·계정 정보는 위, 버튼은 아래 한 줄에 반씩 */
  .me-card { align-items: flex-start; padding: 12px; }
  .me-card .grow { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .me-card .grow .muted { overflow-wrap: anywhere; line-height: 1.5; margin-top: 2px; }
  .me-acts { flex: 1 1 100%; } .me-acts .btn { flex: 1; justify-content: center; height: 36px; }
  .me-card > .btn { flex: 1 1 100%; justify-content: center; }
  /* 입력칸: 한 줄에 하나씩 */
  .modal .field-row { grid-template-columns: 1fr !important; gap: 10px; } .modal .field-row > .field { grid-column: auto !important; }
  .modal .field label { font-size: 12.5px; line-height: 1.45; }
  .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .modal select, .modal textarea { width: 100%; min-height: 38px; font-size: 15px; }
  .modal input[type="time"], .modal input[type="date"] { width: auto !important; min-width: 120px; }
  /* 체크 항목: 체크박스는 왼쪽 고정, 글자는 줄바꿈 */
  .modal label.row { align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; line-height: 1.5; padding: 6px 0; }
  .modal label.row > input[type="checkbox"], .modal label.row > input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; flex: none; }
  .modal label.row .faint { font-size: 12px; }
  .modal label.row input[type="time"] { min-height: 32px !important; height: 32px; width: 132px !important; min-width: 0; }
  .modal label.row label.row { padding: 0; margin-left: 0 !important; }
  .modal .col { gap: 2px !important; }
  .modal .row.wrap { gap: 8px; } .modal .row.wrap > .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .modal .row.wrap > input { flex: 1 1 100%; width: 100% !important; }
  .modal .row.wrap > .spacer { display: none; }
  .mode-opt { padding: 10px; } .mode-opt b { font-size: 14px; }
  .modal .info, .modal .warn-box { font-size: 12.5px; line-height: 1.6; }
  .modal .info code { overflow-wrap: anywhere; }
  /* 담당자별 업무 이메일 표 → 사람마다 카드 */
  .mail-map, .mail-map tbody, .mail-map tr, .mail-map td { display: block; width: 100%; }
  .mail-map thead { display: none; }
  .mail-map tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .mail-map td { border: 0; padding: 2px 0; } .mail-map td.mono { font-size: 11.5px; overflow-wrap: anywhere; }
  .mail-map td:last-child input { margin-top: 4px; }
  /* 노트 공유 주소 · 로그인한 사람 목록 */
  .nk-box .row { flex-wrap: wrap; } .nk-box .row input { flex: 1 1 100% !important; width: 100% !important; } .nk-box .row .btn { flex: 1; justify-content: center; }
  .ul-row { flex-wrap: wrap; } .ul-row .grow { flex: 1 1 calc(100% - 48px); min-width: 0; } .ul-row .grow .faint { overflow-wrap: anywhere; }
  .user-list { max-height: none; }
  .modal .seg { flex-wrap: wrap; }
}
/* 할 일로: 결과를 버튼 위에 표시 */
.btn.done-msg { color: var(--ok) !important; font-weight: 700; } .btn.warn-msg { color: #c2412d !important; }

/* 모바일 메뉴: 페이지와 함께 스크롤되는 펼침 메뉴 */
@media (max-width: 640px) {
  .app { position: relative; }
  .app.mobile-open .sidebar { position: absolute; top: 0; bottom: auto; left: 0; height: auto; min-height: 100vh; overflow: visible; }
  .app.mobile-open .sidebar .nav { flex: none; }
  .app.mobile-open .mob-back { position: fixed; }
}
/* 모바일 상단 머리글: 한 줄로 (☰ · 제목 · 필터 · 버튼) — 넘치는 버튼은 옆으로 밀어서 */
@media (max-width: 640px) {
  .main-head { flex-wrap: nowrap !important; gap: 6px; padding: 8px 12px !important; min-height: 50px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .main-head::-webkit-scrollbar { display: none; }
  .main-head > * { flex: none; }
  .main-head .mobile-menu { width: 34px; height: 34px; }
  .main-title { font-size: 18px !important; white-space: nowrap; margin: 0 2px; }
  .main-head .spacer { flex: 1 1 0 !important; min-width: 4px; }
  .main-head select { height: 32px !important; max-width: 118px; padding: 2px 6px; font-size: 13px; }
  .main-head input:not([type="checkbox"]) { height: 32px; max-width: 150px; }
  .main-head .btn { height: 34px; padding: 0 10px; font-size: 0; gap: 0; } /* 버튼은 아이콘만 */
  .main-head .btn svg { width: 17px; height: 17px; }
  .main-head .btn:not(:has(svg)) { font-size: 13px; }
  .main-head .seg button { padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
  .main-head .tag { white-space: nowrap; }
  .main-head .fs-open { width: 30px; height: 30px; }
}
/* ── 댓글 · @멘션 · 새소식 · 최근 활동 (social.js) ── */
.log-pane, .cm-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.log-pane.hidden, .cm-wrap.hidden { display: none; }
.ltabs { display: flex; gap: 4px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.ltabs button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ltabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.ltabs em { font-style: normal; background: var(--accent); color: #fff; border-radius: 999px; font-size: 10.5px; padding: 0 6px; line-height: 16px; }
.ltabs em:empty { display: none; }
.cm-list { flex: 1; min-height: 200px; max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
.cm { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; border-left: 3px solid transparent; }
.cm.by-owner { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-left-color: var(--accent); }
.cm.mine .cm-name::after { content: ' (나)'; color: var(--faint); font-weight: 500; }
.cm.flash { animation: cmFlash 1.6s ease 2; }
@keyframes cmFlash { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
.cm-h { display: flex; align-items: center; gap: 6px; font-size: 12px; }
b.av { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; display: inline-grid; place-items: center; flex: none; }
b.av.lg { width: 30px; height: 30px; font-size: 13px; }
.cm-name { font-size: 13px; font-weight: 800; color: var(--text); }
.cm-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.cm-badge.as { background: var(--normal-dot); }
.cm-t { color: var(--faint); font-size: 11px; }
.cm-acts { margin-left: auto; display: flex; gap: 2px; opacity: .55; }
.cm:hover .cm-acts { opacity: 1; }
.cm-acts button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.cm-acts button:hover { background: var(--surface); color: var(--text); }
.cm-b { margin-top: 4px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cm-edit { width: 100%; font-size: 13px; }
.cm-new { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; }
.cm-new textarea { flex: 1; min-height: 52px; font-size: 13px; resize: vertical; }
.cm-lock { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.cm-lock span { flex: 1; }
.mention { color: var(--normal-tx); background: var(--normal-bg); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.mention.me { color: #fff; background: var(--accent); }
.mention-pop .mp-h { font-size: 11px; color: var(--faint); padding: 4px 10px 6px; }
.ed-author { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: -2px 0 8px; }
.ed-author .ea-name { color: var(--text); font-size: 13.5px; font-weight: 800; }
.tag.cm-n { background: var(--normal-bg); color: var(--normal-tx); }
.ac-list { display: flex; flex-direction: column; }
.ac-day { font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 4px 6px; border-bottom: 1px solid var(--line); }
.ac-day:first-child { padding-top: 0; }
.ac-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px; border-radius: 10px; cursor: pointer; position: relative; }
.ac-row:hover { background: var(--surface-2); }
.ac-row.unread { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.ac-row.unread .ac-who { color: var(--accent); }
.ac-main { flex: 1; min-width: 0; }
.ac-line { font-size: 13px; line-height: 1.5; }
.ac-who { font-weight: 800; }
.ac-task { font-weight: 700; }
.ac-verb { font-size: 12.5px; color: var(--muted); }
.ac-t { color: var(--faint); }
.ac-text { margin-top: 4px; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 6px 9px; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ac-row:hover .ac-text { background: var(--surface); }
.ac-ch { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.ac-ch s { color: var(--faint); }
.ac-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex: none; }
.why { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.why.mention { background: var(--accent); color: #fff; }
.why.own { background: var(--delegate-bg); color: var(--delegate-tx); }
.why.as { background: var(--normal-bg); color: var(--normal-tx); }
.news-wrap { max-width: 860px; }
.news-sum { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; font-size: 13px; flex-wrap: wrap; }
.news-home .ac-row { padding: 8px 6px; }
.news-home .ac-text { -webkit-line-clamp: 2; }
@media (max-width: 640px) { .cm-list { max-height: none; } .ac-row { padding: 9px 4px; } }

/* 최근 활동: 오른쪽 요약 칸 */
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.act-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.act-side .card-panel { padding: 16px 18px; }
@media (max-width: 1000px) { .act-grid { grid-template-columns: 1fr; } .act-side { position: static; order: -1; } }
.ad-bars { display: flex; gap: 6px; align-items: flex-end; height: 92px; }
.ad-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ad-bar i { width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--line-2); display: block; }
.ad-bar.today i { background: var(--accent); }
.ad-bar small { font-size: 11px; color: var(--faint); }
.aw-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; text-align: left; }
.aw-row:hover, .aw-row.on { background: var(--surface-2); }
.aw-row.on { outline: 1.5px solid var(--accent); }
.aw-n { width: 64px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.aw-bar i { display: block; height: 100%; border-radius: 4px; }
.aw-t { font-size: 11px; width: 48px; text-align: right; }
.ah-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: 12.5px; cursor: pointer; }
.ah-row:last-child { border-bottom: 0; } .ah-row:hover .ah-t { text-decoration: underline; }
.ah-k { width: 18px; height: 18px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.ah-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ap-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ap-row:last-child { border-bottom: 0; }
.ap-ts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ap-t { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-t:hover { text-decoration: underline; } .ap-t em { font-style: normal; color: var(--faint); font-family: var(--mono); font-size: 11px; }
/* 반복 등록 · 캘린더 필터 표시 */
.rep-box { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.rep-box .ql { font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.rep-end.hidden, .rep-prev.hidden { display: none; }
.tag.cal-f { font-size: 11px; } .tag.cal-f.on { background: var(--accent); color: #fff; }

/* 업무 제목 칸: 크게 · 강조 */
.ed-main .title-input#tTitle { font-size: 22px; font-weight: 800; letter-spacing: -.3px; padding: 10px 14px; height: auto; border: 2px solid var(--line-2); border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.ed-main .title-input#tTitle:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.ed-main .title-input#tTitle::placeholder { color: var(--faint); font-weight: 600; }
@media (max-width: 640px) { .ed-main .title-input#tTitle { font-size: 19px; } }

/* 새소식 · 최근 활동: 묶음(1시간 안 같은 업무) · 왼쪽 = 댓글/멘션/메모, 오른쪽 = 정보 변경 */
.act-grid .news-wrap { max-width: none; min-width: 0; }
.ac-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); padding: 0 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ac-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ac-g { width: min(80%, 640px); border-radius: 12px; margin: 6px 0; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.ac-g.side-talk { align-self: flex-start; border-left: 3px solid var(--normal-dot); }
.ac-g.side-info { align-self: flex-end; border-right: 3px solid var(--line-2); background: var(--surface-2); }
.ac-g.unread { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.acg-h { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.acg-h:hover .ac-task { text-decoration: underline; }
.acg-ic { color: var(--muted); display: inline-grid; }
.acg-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); }
.acg-av { display: inline-flex; } .acg-av b.av { width: 18px; height: 18px; font-size: 9px; margin-left: -4px; border: 1.5px solid var(--surface); }
.acg-items { padding: 0 6px 6px; }
.acg-it { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; cursor: pointer; }
.acg-it:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.acg-it + .acg-it { border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; }
.acg-it.unread .ac-who { color: var(--accent); }
.acg-it .ac-verb { color: var(--text); font-size: 12.5px; }
.acg-it .ac-text { -webkit-line-clamp: 3; }
.side-info .acg-it .ac-text, .side-info .acg-it:hover .ac-text { background: var(--surface); }
.why.self { background: var(--surface-2); color: var(--muted); }
@media (max-width: 640px) { .ac-g { width: 100%; } }
/* 새소식 오른쪽 칸 */
.ns-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ns-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); text-align: left; border: 1.5px solid transparent; }
.ns-tile b { font-size: 22px; font-family: var(--mono); line-height: 1.1; } .ns-tile span { font-size: 12px; color: var(--muted); }
.ns-tile.acc b { color: var(--accent); } .ns-tile.on { border-color: var(--accent); } .ns-tile:hover { background: var(--line); }
.nw-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 4px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.nw-row:last-child { border-bottom: 0; } .nw-row:hover .nw-t { text-decoration: underline; }
.nw-main { flex: 1; min-width: 0; } .nw-t { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-x { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nw-at { font-size: 11px; white-space: nowrap; }
.ns-sc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ns-sc a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; color: var(--muted); text-decoration: none; }
.ns-sc a b { font-size: 20px; color: var(--text); font-family: var(--mono); }

/* 업무 창 배치: 왼쪽 = 제목·내용·댓글/로그, 오른쪽 = 업무 설정 */
.modal.wide:has(.editor-grid) .editor-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 0; }
.editor-grid .ed-main { padding-right: 18px; gap: 8px; }
.editor-grid .ed-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.ed-side .side-h { display: flex; align-items: center; gap: 5px; margin: 0; }
.ed-side .ef { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-side .ef .s2 { grid-column: 1 / -1; }
.ed-side .rep-box { margin: 0; }
.editor-grid .ed-content textarea { height: 21vh; min-height: 150px; max-height: 320px; overflow-y: auto; resize: vertical; }
.ed-main .log-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ed-main .logbox { min-height: 120px; max-height: 280px; }
.ed-main .cm-list { min-height: 100px; max-height: 300px; }
@media (max-width: 980px) { .modal.wide:has(.editor-grid) .editor-grid { grid-template-columns: 1fr; } .editor-grid .ed-main { padding-right: 0; } .editor-grid .ed-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; } }

/* 댓글 답글 */
.cm-thread { display: flex; flex-direction: column; gap: 6px; }
.cm-replies { margin-left: 18px; padding-left: 10px; border-left: 2px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.cm-rp { margin-top: 4px; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; }
.cm-rp:hover { background: var(--surface); color: var(--text); }
.cm-rp .i { width: 11px; height: 11px; }
.cm-rbox:empty { display: none; }
.cm-rbox { margin-left: 18px; padding-left: 10px; border-left: 2px solid var(--accent); }
.cm-rhint { font-size: 11.5px; color: var(--muted); }
.cm-gone { font-size: 11.5px; color: var(--faint); font-style: italic; }
.why.reply { background: var(--normal-dot); color: #fff; }
.ns-tile.acc { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; }
.ns-help { font-size: 11.5px; color: var(--faint); line-height: 1.55; margin-top: 8px; }

/* 답글 버튼: 내용 오른쪽 같은 줄 */
.cm-brow { display: flex; align-items: flex-end; gap: 8px; }
.cm-brow .cm-b { flex: 1; min-width: 0; }
.cm-brow .cm-rp { margin: 0; flex: none; opacity: .6; }
.cm:hover .cm-brow .cm-rp { opacity: 1; }
/* 새소식 · 최근 활동: 서술형 대신 짧은 꼬리표 + 내용 강조 */
.ac-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.ac-meta .ac-who { font-size: 12.5px; }
.ac-meta .ac-t { color: var(--faint); font-size: 11px; margin-left: auto; }
.kt { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.kt.k-comment { background: var(--normal-bg); color: var(--normal-tx); }
.kt.k-create { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.kt.k-done { background: var(--ok); color: #fff; }
.kt.k-note { background: var(--delegate-bg); color: var(--delegate-tx); }
.kt.k-delete { background: var(--urgent-bg); color: var(--urgent-tx); }
.side-info .kt.k-change { background: var(--surface); }
.ac-main .ac-text { font-size: 13.5px; line-height: 1.55; color: var(--text); margin-top: 3px; -webkit-line-clamp: 5; }
.ac-ch { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; font-size: 13px; color: var(--text); }
.ch-l { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ch-f { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 44px; }
.ch-l s { color: var(--faint); font-size: 12px; }
.ch-ar { color: var(--faint); font-size: 11px; }
.ch-l b { font-weight: 800; }
.acg-it .ac-text { -webkit-line-clamp: 5; }
/* 기간 선택 */
.range-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 10px; color: var(--muted); }
.range-bar .seg.small button { padding: 4px 10px; font-size: 12px; }
.rg-dates { display: inline-flex; align-items: center; gap: 4px; }
.rg-dates input { height: 28px; font-size: 12px; padding: 2px 6px; }
.rg-lbl { font-size: 12px; }
@media (max-width: 640px) { .rg-lbl { display: none; } }

/* 홈 맨 위: 왼쪽 팀 공지 · 오른쪽 지표 (공지가 없으면 지표만 한 줄) */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.home-top:has(#hwNotice:empty) { grid-template-columns: 1fr; }
.home-top .notice-card { margin-bottom: 0; }
.home-top .mini-kpis { margin-bottom: 0; align-content: center; justify-content: flex-end; }
.home-top:has(#hwNotice:empty) .mini-kpis { justify-content: flex-start; }
@media (max-width: 980px) { .home-top { grid-template-columns: 1fr; } .home-top .mini-kpis { justify-content: flex-start; } }
/* Daily log: 높이 절반 */
.home-right .dlog-card { flex: none; }
.home-right .dl-ed { min-height: 150px; max-height: 260px; overflow-y: auto; }

/* 홈: 칸 안 탭 (담당자별 업무 현황/업무량 · 일정 오늘/이번 주) */
.htabs { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 2px; }
.htab { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; color: var(--muted); }
.htab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.home-grid .panel-head { flex-wrap: wrap; }
.wk-list { max-height: 460px; overflow-y: auto; }
.wk-day + .wk-day { margin-top: 4px; }
.wk-h { display: flex; justify-content: space-between; align-items: center; }
.wk-h [data-goday] { cursor: pointer; } .wk-h [data-goday]:hover { text-decoration: underline; }
.wk-day.today .wk-h { color: var(--accent); }
.wk-day.past { opacity: .6; }
.wk-empty { font-size: 12px; padding: 2px 6px 6px; }
.htab .ht-n { font-style: normal; background: var(--accent); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 5px; margin-left: 2px; }
.news-home .panel-head { gap: 6px; }
/* 홈 맨 위: 아래 두 단(home-grid)과 같은 비율 — 공지 = 왼쪽 단 너비, 지표 = 오른쪽 단 (넘치면 두 줄) */
.home-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; }
.home-top .mini-kpis { flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 980px) { .home-top { grid-template-columns: 1fr; } }

/* 업무설계 JPG 내보내기 미리 보기 */
.dzx-prev { max-height: 62vh; overflow: auto; background: var(--surface-2); border-radius: 10px; padding: 10px; text-align: center; }
.dzx-prev img { max-width: 100%; height: auto; box-shadow: var(--shadow); border-radius: 6px; }
.dzx-msg:empty { display: none; }
.dzx-msg { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; }

/* 업무 창 오른쪽 '업무 설정' — B안: 진행 / 누가·무엇 / 언제 / 연결 묶음, 버튼으로 바로 고르기 */
.ed-side.bx { gap: 0; }
.bx-g { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.bx-g:first-child { border-top: 0; padding-top: 0; }
.bx-h { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bx-h .faint { font-weight: 500; }
.bx-r { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; font-size: 12px; }
.bx-l { font-size: 11px; font-weight: 700; color: var(--muted); min-width: 52px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.bx .seg.small { padding: 2px; } .bx .seg.small button { padding: 3px 9px; font-size: 12px; }
.bx-prog { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 110px; }
.bx-prog input[type=range] { flex: 1; height: 22px; }
.bx-prog b { font-family: var(--mono); font-size: 12px; min-width: 34px; text-align: right; }
.bx-star { margin-left: auto; } .bx-star button { font-size: 18px; }
#tPrio .p-urgent.on { background: var(--urgent-bg); color: var(--urgent-tx); } #tPrio .p-normal.on { background: var(--normal-bg); color: var(--normal-tx); }
#tPrio .p-delegate.on { background: var(--delegate-bg); color: var(--delegate-tx); } #tPrio .p-later.on { background: var(--later-bg); color: var(--later-tx); }
.bx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bx-f { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bx-f input { flex: 1; min-width: 0; height: 30px; padding: 3px 8px; font-size: 13px; }
.bx .est-pick button { padding: 2px 8px; }
.bx #tEst { width: 56px; height: 26px; padding: 2px 6px; font-size: 12px; }
.bx-q { gap: 3px; }
.bx-q button { padding: 2px 7px; }
.bx-q .i { width: 12px; height: 12px; }
.bx-base { display: inline-flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; margin: 0 2px; }
.bx-base button { border: 0; border-radius: 0; border-left: 1px solid var(--line-2); } .bx-base button:first-child { border-left: 0; }
.bx-q input[type=date], .bx-q input[type=time], .bx-plan input { height: 26px; padding: 2px 6px; font-size: 12px; width: auto; }
.bx-dates { display: flex; flex-direction: column; gap: 4px; }
.bx-alarm { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--muted); }
.bx-alarm select { height: 26px; padding: 2px 6px; font-size: 12px; }
.bx-rep { display: flex; flex-direction: column; gap: 4px; }
.bx-rep input[type=date] { height: 26px; padding: 2px 6px; font-size: 12px; } .bx-rep input[type=number] { height: 26px; padding: 2px 6px; font-size: 12px; }
.bx-rep .rep-prev { font-size: 11.5px; padding-left: 56px; }
.bx .pick-wrap input:not([type=hidden]) { height: 30px; }
.bx .rel-line { margin-top: 2px; }
/* 인박스 할 일: 글씨 조금 크게 */
.inbox-grid .task-title { font-size: 14px; line-height: 1.4; }
.inbox-grid .task-meta .tag, .inbox-grid .task-meta .st { font-size: 11.5px; }
.inbox-grid .task-meta .who { font-size: 12px; } .inbox-grid .task-meta .who b { width: 16px; height: 16px; font-size: 9.5px; }
.inbox-grid .task-meta .prog-n, .inbox-grid .task-meta .dday { font-size: 11.5px; }

/* 인박스 매트릭스: 위(긴급·계획) 20% 크게, 아래(접수·보류) 20% 작게 */
.inbox-grid .matrix { grid-template-rows: minmax(0, 1.2fr) minmax(0, .8fr); }

/* 설정 창: 위쪽 탭 · 탭별 화면 */
.set-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 0 18px; border-bottom: 1px solid var(--line); flex: none; } /* 탭이 많아지면 창 밖으로 넘치지 않고 다음 줄로 (휴대폰은 아래 미디어쿼리에서 옆으로 밀기) */
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs button { display: flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; }
.set-tabs button:hover { color: var(--text); }
.set-tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.set-badge { font-style: normal; background: var(--accent); color: #fff; border-radius: 99px; font-size: 11px; padding: 0 6px; line-height: 17px; font-weight: 700; }
.set-pane { display: none; } .set-pane.on { display: block; }
.set-pane > .section-title:first-child { margin-top: 4px; }
/* 회원 관리 */
.mb-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.mb-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.mb-row:first-child { border-top: 0; }
.mb-row > img, .mb-row > b { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 13px; }
.mb-sub { font-size: 12px; overflow-wrap: anywhere; }
.mb-acts { display: flex; gap: 6px; flex: none; }
.mb-mail { display: flex; gap: 6px; align-items: center; flex: 0 1 380px; min-width: 0; }
.mb-mail input { flex: 1; min-width: 0; height: 32px; font-size: 13px; }
.mb-pager { display: flex; justify-content: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.mb-rej { margin-top: 8px; opacity: .85; }
.mb-list .empty { padding: 16px; }
.mb-workspace { flex-wrap: wrap; }
.mb-workspace > .grow { flex-basis: 180px; }
.mb-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; flex: 1 1 360px; min-width: 0; }
.mb-fields label { min-width: 0; font-size: 11px; color: var(--muted); }
.mb-fields input { min-width: 0; width: 100%; height: 32px; font-size: 13px; }
.mb-fields .btn { flex: none; }
@media(max-width:540px) { .mb-fields { grid-template-columns: minmax(0,1fr); flex-basis: 100%; } }
/* 한 줄 배치: 왼쪽 이름·이메일, 오른쪽 버튼(승인·거절) / 업무 이메일 칸 + 저장 */
.mb-row > .grow { min-width: 0; }
.mb-row .mb-sub, .mb-row .grow > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row .mb-sub { display: block; overflow-wrap: normal; }
.mb-acts .btn, .mb-mail .btn { flex: none; width: auto; }
@media (max-width: 640px) { .set-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 10px; position: sticky; top: 0; background: var(--surface); z-index: 2; } .set-tabs button { padding: 10px 9px; font-size: 13px; } .mb-row { gap: 8px; padding: 9px 10px; } .mb-row > img, .mb-row > b { width: 30px; height: 30px; } .mb-mail { flex: 0 1 230px; } .mb-mail input { height: 30px; font-size: 12.5px; } .mb-acts .btn, .mb-mail .btn { padding: 0 9px; } }
@media (max-width: 420px) { .mb-mem { flex-wrap: wrap; } .mb-mem .mb-who { flex: 1 1 calc(100% - 40px); } .mb-mail { flex: 1 1 100%; } }
/* 휴지통 (보기 › 휴지통) */
.trash-list { padding: 4px 0 !important; }
.tr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.tr-row:first-child { border-top: 0; }
.tr-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.tr-row > .grow { min-width: 0; }
.tr-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-sub { font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-left { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; flex: none; }
.tr-acts { display: flex; gap: 6px; flex: none; }
@media (max-width: 640px) { .tr-row { flex-wrap: wrap; } .tr-row > .grow { flex: 1 1 calc(100% - 44px); } .tr-left { margin-left: 44px; } .tr-acts { margin-left: auto; } }

/* 저장 성공 표시와 실제 저장 위치를 함께 안내 */
.storage-state { padding: 0 6px; color: var(--side-muted); font-size: 11px; line-height: 1.4; white-space: nowrap; }
.app.collapsed .storage-state { display: none; }

/* Task page: a writing column and a compact, consistently aligned property list. */
.modal.wide:has(.editor-grid) { width:min(1460px,calc(100vw - 24px)); }
.modal.wide:has(.editor-grid) .editor-grid { grid-template-columns:minmax(0,1fr) 350px;gap:0; }
.ed-main { min-width:0;padding-right:24px; }
.ed-side.bx { padding-left:20px;gap:16px; }
.bx .bx-g { display:flex;flex-direction:column;gap:10px; }
.bx .bx-r,.bx .bx-f { display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:8px; }
.bx .bx-l { min-width:0;font-size:11px;padding-top:6px;line-height:1.5; }
.bx .bx-2 { display:flex;flex-direction:column;gap:10px; }
.bx .bx-controls,.bx .qd,.bx .est-pick { display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0; }
.bx .seg { flex-wrap:wrap; }
.bx .bx-prog { width:100%;min-width:0;padding-top:3px; }
.bx .bx-star { justify-content:flex-start;margin-left:0; }
.bx .bx-plan input[type=date] { width:100%; }
.bx .bx-plan input[type=time] { width:95px;min-width:0; }
.bx .bx-alarm { margin-left:0;justify-content:flex-start; }
.bx .pick-wrap { min-width:0; }
.bx .rep-end { display:flex;flex-wrap:wrap;padding-left:72px; }
.bx .rep-end.hidden { display:none; }
.bx .rep-end > .bx-l { display:none; }
@media(max-width:1020px){ .modal.wide:has(.editor-grid) .editor-grid { grid-template-columns:minmax(0,1fr); }.ed-main { padding-right:0; }.ed-side.bx { border-left:0;border-top:1px solid var(--line);padding:18px 0 0;margin-top:20px; } }
.presence { padding:8px 5px;color:var(--side-text);font-size:11px;max-height:125px;overflow-y:auto; }
.presence-head { display:flex;gap:5px;align-items:center;margin-bottom:7px;font-weight:600; }
.presence-head .faint { margin-left:auto;font-size:10px; }
.presence-dot { width:6px;height:6px;flex:none;border-radius:50%;background:#69ad82; }
.presence-list { display:flex;flex-wrap:wrap;gap:5px; }
.presence-person { display:flex;align-items:center;gap:4px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.presence-person b { width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:var(--side-2);font-size:10px; }
.presence-person.guest { opacity:.65; }
.app.collapsed:not(.peek) .presence { display:none; }

/* Reusable project/category choice, with inline creation that keeps the editor open. */
.keyword-picker{display:flex;flex-wrap:wrap;gap:5px;min-width:0;width:100%;align-items:center}.keyword-picker>input{flex:1 1 90px;min-width:0;width:0}.keyword-picker>button{flex:0 0 30px;padding:5px 7px}.keyword-add{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:6px 0}.keyword-add>input{flex:1 1 100px;min-width:0;width:0}.keyword-add>[role=status]{flex-basis:100%}.keyword-picker .keyword-add>button{flex-shrink:0}

/* Active filters stay readable beside a real all-filter reset. */
.filter-summary{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:7px 10px;border-top:1px solid var(--line)}
.filter-summary>span{flex:1;min-width:150px}
.design-detail-input{width:100%;min-height:330px;resize:vertical;line-height:1.7;margin-top:10px;padding:16px;background:var(--bg);color:var(--text)}
.transfer-actions{gap:6px;margin:6px 0}
.cell-menu{max-width:min(420px,90vw);flex-wrap:wrap}
/* Goal/reminder controls: each related group keeps its own row. */
.ed-side.bx .bx-g{padding:8px 0;gap:8px}.ed-side.bx{gap:8px}
.date-pick-row{display:grid;gap:3px;min-width:0}.date-pick-row button,.goal-times button{padding:5px 3px;border:1px solid var(--line);border-radius:5px;font-size:11px;white-space:nowrap;color:var(--muted);background:var(--surface)}
.date-pick-row button:hover,.goal-times button:hover{background:var(--surface-2);color:var(--text)}
.date-pick-row button.on,.goal-times button.on{color:var(--normal-tx);background:var(--normal-bg);border-color:var(--normal-dot)}
.goal-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr)) 26px}.goal-periods,.reminder-days{grid-template-columns:repeat(3,minmax(0,1fr))}.goal-weekdays,.reminder-offsets{grid-template-columns:repeat(5,minmax(0,1fr))}.reminder-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.goal-times{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:4px;align-items:center}.bx .goal-times input[type=time]{width:100%;min-width:0;padding:2px;font-size:11px}
.reminder-custom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:4px}.reminder-custom[hidden]{display:none}.bx .reminder-custom input{min-width:0;width:100%;font-size:11px;padding:4px}
.reminder-preview{font-size:11px;line-height:1.5;min-height:16px}

/* Member email consent is separate from account suspension. */
.mb-fields .member-email-option { grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:4px; }
.mb-fields .member-email-option input[type="checkbox"] { width:16px;height:16px;flex:none;accent-color:var(--text); }
.member-email-option .row { gap:6px;cursor:pointer; }
.member-email-option .faint { overflow-wrap:anywhere; }
.member-suspension-help p,.member-email-help p { margin:6px 0 0; }
.sg-label { overflow:hidden;text-overflow:ellipsis;min-width:0; }
.sg-delete { flex:none;margin-left:auto;border:0;background:none;color:#e8705a;font-size:20px;line-height:1;padding:1px 5px;cursor:pointer; }
.sg-delete:hover { background:var(--surface-2);border-radius:4px; }
.sg-add { display:block;width:100%;padding:8px 10px;text-align:left;color:var(--text);background:none;border:0;border-top:1px solid var(--line);cursor:pointer; }
.note-action-layer { z-index:230; }
.note-action-dialog { width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 32px); }
.note-action-dialog select { width:100%; }

/* Task dialogs fit the iframe viewport; only the active work area scrolls. */
.modal.task-editor {
  height:min(940px,calc(100dvh - 24px));
  max-height:calc(100dvh - 24px);
  min-height:0;
  overflow:hidden;
}
.task-editor > .modal-h,.task-editor > .modal-f,.task-editor > .type-tabs { flex-shrink:0; }
html:has(#modal.open .task-editor),html:has(#modal.open .task-editor) body { overflow:hidden;overscroll-behavior:none; }
.task-editor > .modal-b { flex:1;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column; }
.task-editor-tabs { display:none;flex-shrink:0;gap:4px;padding-bottom:8px; }
.task-editor-tabs button { flex:1;padding:7px 5px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:12px; }
.task-editor-tabs button[aria-pressed=true] { background:var(--surface-2);color:var(--text);font-weight:700;border-color:var(--text); }
.modal.task-editor .editor-grid { flex:1;min-height:0;height:100%; }
.task-editor .editor-grid > .ed-main,.task-editor .editor-grid > .ed-side {
  min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;
}
.task-editor .ed-main > * { flex-shrink:0; }
.task-editor .ed-main .logbox,.task-editor .ed-main .cm-list { max-height:none;overflow:visible;flex:none; }
html.embedded .modal.task-editor { width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px); }
@media(max-width:1020px),(max-height:700px) {
  .task-editor > .modal-h { padding:10px 14px 6px; }
  .task-editor > .modal-b { padding:4px 14px 10px; }
  .task-editor > .modal-f { padding:8px 14px max(8px,env(safe-area-inset-bottom)); }
  .task-editor-tabs { display:flex; }
  .modal.task-editor .editor-grid { display:block; }
  .task-editor .editor-grid > .ed-main,.task-editor .editor-grid > .ed-side { height:100%;padding:0;border:0;margin:0; }
  .task-editor[data-task-pane=content] .ed-side,.task-editor[data-task-pane=history] .ed-side,
  .task-editor[data-task-pane=content] .log-col,.task-editor[data-task-pane=settings] .ed-main,
  .task-editor[data-task-pane=history] .ed-main > :not(.log-col) { display:none; }
  .task-editor[data-task-pane=history] .log-col { border:0;padding:0;margin:0; }
}
@media(max-width:640px) {
  .modal-root .modal.task-editor,html.embedded .modal.task-editor { width:100vw;height:100dvh;max-height:100dvh;border-radius:0; }
}
.note-action-status { white-space:pre-wrap;overflow-wrap:anywhere; }

.dz-format-badge { display:inline-block;margin-left:8px;padding:2px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap; }
#dzTreeField[hidden] { display:none; }
#dzTreeType { width:100%; }

.mb-workspace>.member-stop-confirm{flex:1 0 100%;box-sizing:border-box}

/* Task action help lives above scroll containers, inside the iframe viewport. */
.task:focus-within { z-index:7;border-color:var(--line-2); }
.task:focus-within .acts { display:flex; }
.task .acts button[data-tip]:hover::after { content:none; }
.task-action-tip { position:fixed;z-index:10000;width:max-content;max-width:calc(100vw - 16px);padding:6px 10px;border-radius:7px;background:var(--ink);color:var(--ink-tx);font-size:12px;line-height:1.5;box-shadow:var(--shadow);pointer-events:none;overflow-wrap:anywhere; }
.task-action-tip[hidden] { display:none; }
.acts button.c-copy { color:#287b88; }
.acts button.c-copy:hover { background:#d9eff0; }
:root[data-theme=dark] .acts button.c-copy { color:#98dce1; }
:root[data-theme=dark] .acts button.c-copy:hover { background:#23434a; }

/* Keep frequent choices visible and group every other list filter together. */
.list-filter-bar { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px; }
.list-filter-bar>label { display:flex;flex:1 1 115px;min-width:0;flex-direction:column;gap:3px; }
.list-filter-bar>label>span { color:var(--muted);font-size:11px; }
.list-filter-bar select { width:100%;min-width:0;height:32px;margin:0;font-size:12px; }
.list-filter-more { flex:none;margin:0 0 6px;border:1px solid var(--line);border-radius:8px;padding:0 9px; }
.list-filter-more>summary { padding:7px 0;cursor:pointer;font-size:12px;color:var(--muted); }
.filter-count { float:right;font-size:11px;color:var(--accent); }
.list-filter-more .filter-section { padding:4px 0; }
.list-filter-more .flabel { display:block;font-size:11px;margin:0 0 5px; }
.list-filter-more .filter-row { margin:0 0 5px; }
.list-panel .filter-summary { padding:5px 0 8px;border-top:0;align-items:flex-start; }
.list-panel .filter-summary>span { min-width:0;line-height:1.5; }
.list-panel .filter-summary>button { flex:none;padding:3px 5px; }
.inbox-grid.list-hidden,.planner-grid.list-hidden{grid-template-columns:34px minmax(0,1fr)}
.list-panel>.panel-head .list-fold{margin-left:auto;flex:none}
.list-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;min-height:0}.list-rail:hover{color:var(--text);border-color:var(--line-2)}.list-rail span{writing-mode:vertical-rl;letter-spacing:.04em;white-space:nowrap}
@media (max-width:640px){.inbox-grid.list-hidden,.planner-grid.list-hidden{grid-template-columns:1fr}.list-rail{flex-direction:row;padding:8px 12px}.list-rail span{writing-mode:horizontal-tb}}
.planner-mode-toggle{flex-shrink:0}.nav-date input[type=date]{width:135px;font-size:12px}
.planner-mode-control{display:flex;align-items:center;gap:5px;flex:none}.planner-mode-help{position:relative;z-index:9}.planner-mode-help>summary{list-style:none;cursor:pointer;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--muted);font-weight:700}.planner-mode-help>summary::-webkit-details-marker{display:none}.planner-mode-help>div{position:absolute;top:34px;left:0;width:min(300px,calc(100vw - 24px));padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow-lg);font-size:12px;line-height:1.8;color:var(--text)}.planner-mode-help kbd{padding:1px 5px;border-radius:4px;background:var(--surface-2);font:inherit}.allocation-count{display:inline-block;font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);white-space:nowrap}.allocation-count.placed{color:var(--normal-tx);font-weight:800}.allocation-count.unplaced{color:var(--faint)}
.task-work-schedule{border-top:1px solid var(--line);padding-top:10px}.task-work-schedule>summary{cursor:pointer;font-weight:700;font-size:12px}.task-work-schedule label{display:block;font-size:11px;margin:8px 0}.task-work-schedule input{min-width:0;width:100%}.task-work-schedule .row{gap:5px}.task-work-schedule .row>*{flex:1}
.schedule-month{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:8px}.schedule-month-week{position:relative;border-bottom:1px solid var(--line)}.schedule-month-week:last-child{border-bottom:0}.schedule-month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:absolute;inset:0}.schedule-month-days .mcell{min-height:0;border-right:1px solid var(--line);padding:5px}.schedule-month-bars{position:relative;padding:32px 3px 6px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:24px;gap:3px;pointer-events:none}.schedule-bar{pointer-events:auto;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:5px;background:var(--normal-bg);color:var(--text);padding:3px 6px;font-size:11px;cursor:pointer}.schedule-bar.urgent{background:var(--urgent-bg)}.schedule-bar.later{background:var(--later-bg)}.schedule-bar.continues-before{border-top-left-radius:0;border-bottom-left-radius:0}.schedule-bar.continues-after{border-top-right-radius:0;border-bottom-right-radius:0}.schedule-bar.done{text-decoration:line-through;opacity:.6}
/* Monthly height is shared by both modes: five events and a separate overflow row. */
.month[style*="--month-weeks"],.schedule-month{display:grid;grid-template-rows:repeat(var(--month-weeks),minmax(144px,1fr));grid-auto-rows:unset;box-sizing:border-box}
.month[style*="--month-weeks"]>.mcell{contain:size;min-height:0}
.month[style*="--month-weeks"] .mitems{display:grid;grid-template-rows:repeat(5,minmax(0,1fr)) 20px;gap:2px;overflow:hidden;min-height:0}
.month[style*="--month-weeks"] .mitems>.pill{min-height:0;padding:1px 4px;font-size:11px;line-height:14px;align-self:stretch}
.month[style*="--month-weeks"] .mitems>.more-btn{grid-row:6}
.schedule-month-week{min-height:0;overflow:hidden}
.schedule-month-bars{position:absolute;inset:0;padding:28px 3px 3px;grid-template-rows:repeat(5,minmax(0,1fr)) 20px;grid-auto-rows:unset;gap:2px;overflow:hidden}
.schedule-month-bars>.schedule-bar{min-height:0;padding:1px 4px;line-height:14px}
.schedule-month-bars>.schedule-bar.work-event{padding-right:29px}
.schedule-month-bars .planner-work-edit{top:0;height:100%;max-height:20px;width:22px;padding:0}
.schedule-month-bars .planner-work-edit .i{width:12px;height:12px}
@media(max-width:640px){
 .main-head:has(.planner-mode-toggle),html.embedded .main-head:has(.planner-mode-toggle){flex-wrap:wrap!important;overflow:visible;height:auto;min-height:0;padding:6px 12px;gap:6px}
 .main-head:has(.planner-mode-toggle)>.spacer{display:none}.main-head .planner-mode-toggle{margin-left:auto}.main-head:has(.planner-mode-toggle)>.seg:not(.planner-mode-toggle){order:2}.main-head:has(.planner-mode-toggle)>.nav-date{order:2;gap:3px;margin-left:auto;min-width:0}.main-head .nav-date:has(#pPickDate) .date-label{display:none}.main-head #pPickDate{width:112px;min-width:0;padding:4px;font-size:12px}.main-head:has(.planner-mode-toggle) .nav-date .btn{padding:4px 6px;font-size:12px}.main-head:has(.planner-mode-toggle) .nav-date .icon-btn{width:26px;height:28px}
}

/* A deadline is a milestone, each work block is an independent allocation. */
.planner-deadline-guard{z-index:500}.planner-deadline-guard .modal-b{overflow:auto}.planner-deadline-guard .row.wrap{gap:6px}.deadline-event{border:0!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))!important;color:var(--accent)!important}.blk.work-event .bt{padding-right:24px}.planner-work-edit{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;margin-left:5px;padding:2px 4px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);color:var(--text);cursor:pointer;z-index:3}.blk>.planner-work-edit{position:absolute;right:3px;top:4px;width:23px;height:23px;margin:0}.schedule-bar.work-event{position:relative;padding-right:29px}.schedule-bar>.planner-work-edit{position:absolute;right:2px;top:1px;height:20px}.planner-work-edit:hover{border-color:var(--accent);color:var(--accent)}
.work-event.over-deadline{background:var(--urgent-bg)!important;color:var(--urgent-tx)!important}.work-event.over-deadline .bt::before{content:'⚠ 마감 초과 · ';color:var(--accent)}

.blk.short .rz{left:auto;right:0;width:12px}.blk.deadline-event .bt{padding-right:0}

.pill.work-event{position:relative;padding-right:36px}.pill.work-event>.planner-work-edit{position:absolute;right:5px;margin:0}.blk.short>.planner-work-edit{top:0;bottom:0;height:auto}

/* One planner, with an optional work-allocation layer. */
.planner-mode-toggle{gap:8px}.planner-mode-toggle strong{font-size:11px;color:var(--muted)}.planner-switch-track{position:relative;display:inline-block;width:30px;height:18px;flex:none;border-radius:12px;background:var(--line-2);transition:background .15s}.planner-switch-track::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px #0003;transition:transform .15s}.planner-mode-toggle[aria-checked=true] .planner-switch-track{background:var(--accent)}.planner-mode-toggle[aria-checked=true] .planner-switch-track::after{transform:translateX(12px)}.planner-mode-toggle[aria-checked=true] strong{color:var(--accent)}.planner-mode-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Shared calendar chooser, including inputs inserted later by editors. */
.date-picker{position:fixed;z-index:30000;width:min(330px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 12px 40px #0004;font-size:13px}.date-picker-head{display:flex;gap:4px;align-items:center}.date-picker button{border:0;background:transparent;color:inherit;border-radius:7px;cursor:pointer}.date-picker-head button{width:30px;height:32px;font-size:22px}.date-picker-head select{padding:4px;width:auto;flex:1;min-width:0;font-size:13px}.date-picker button:hover:not(:disabled){background:var(--surface-2)}.date-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.date-picker button:disabled{opacity:.3;cursor:default}.date-picker-weekdays,.date-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.date-picker-weekdays{color:var(--muted);text-align:center;padding:10px 0 4px}.date-picker-grid button{height:40px;position:relative;font-weight:600;padding:2px 0 10px}.date-picker-grid .outside{color:var(--faint)}.date-picker-grid .today{background:color-mix(in srgb,var(--accent) 17%,var(--surface));color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);font-weight:900}.date-picker-grid .selected{background:var(--ink);color:var(--ink-tx)}.date-picker-grid .today.selected{background:var(--accent);color:white;box-shadow:inset 0 0 0 2px var(--text)}.date-picker-foot{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:10px;color:var(--muted)}.date-picker-foot>span{flex:1;text-align:center}.date-picker-foot button{padding:6px;font-weight:700;font-size:12px}.date-picker-foot [data-today]{color:var(--accent);border:1px solid var(--accent)}.date-picker-marks{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:3px}.date-picker-marks i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.date-picker-marks .work{background:var(--normal-dot)}.date-picker-marks .routine{background:var(--routine-dot,var(--hold-dot))}.date-picker-grid .selected .date-picker-marks i{box-shadow:0 0 0 1px currentColor}
/* All-day rows stay visible between the date headings and scrollable hours. */
.planner-timeline{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}.planner-timeline>.tl-heads{position:relative;flex:none}.planner-timeline>.untimed{flex:none;margin:0;padding:7px 0 9px;border-top:0}.planner-timeline .untimed-title{font-size:11px}.untimed-axis{padding-top:9px;font-size:11px;color:var(--muted)}.tl-head.today{background:color-mix(in srgb,var(--accent) 14%,var(--surface));box-shadow:inset 0 3px var(--accent)}.tl-head.today small{font-weight:800;color:var(--accent)}.mcell.today{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mcell.today .mnum span{display:inline-block;background:var(--accent);color:white;border-radius:999px;padding:1px 7px;font-weight:900}.day-label.today{font-weight:900;background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:7px;padding:6px}
.home-guide-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;min-height:48px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none;font-size:12px;font-weight:700}.home-guide-link .i{width:30px;height:30px;color:var(--accent)}.home-guide-link:hover{border-color:var(--accent);background:var(--surface-2)}.home-guide-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.schedule-bar.routine,.schedule-bar.ghost{border:0;background:var(--routine-bg);color:var(--routine-tx)}
.deadline-event.routine{background:var(--routine-bg)!important;color:var(--routine-tx)!important}

.date-picker-key{display:inline-flex;align-items:center;gap:2px}.date-picker-key i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.date-picker-key .work{background:var(--normal-dot)}.date-picker-key .routine{background:var(--routine-dot,var(--hold-dot))}

.home-top:has(#hwNotice:empty) .mini-kpis{justify-content:flex-end}

/* 시간표 블록: 배경색으로 구분하고 테두리는 표시하지 않음 (높이는 시간에 비례), 짧은 블록은 '제목 시간' 한 줄 */
.tl-col .blk{border-radius:7px;border:0;box-shadow:none;box-sizing:border-box}
.tl-col .blk.ghost,.tl-col .blk.dooray-event{border:0}
.tl-col .blk.short{padding:0 8px;gap:6px;font-size:12px;line-height:1.2}.tl-col .blk.short .bt{flex:1 1 auto;min-width:0;white-space:nowrap}.tl-col .blk.short .bs{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px}
/* 마감: 시각 직전 30분 막대의 배경색으로 강조 (하루 첫 시각이면 아래쪽 배치) */
.tl-col .blk.dl-end,.tl-col .blk.dl-end.below{border:0!important;border-radius:7px}
/* 플래너 상세 필터 › 적용 범위: 필터 칩과 구별되는 스위치 */
.cal-apply-switch{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);font-size:12.5px;color:var(--text);cursor:pointer}.cal-apply-switch b{font-size:11.5px;color:var(--muted)}.cal-apply-switch .sw-track{position:relative;width:28px;height:16px;border-radius:999px;background:var(--line-2);flex:none;transition:background .15s}.cal-apply-switch .sw-track::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s}.cal-apply-switch[aria-checked="true"] .sw-track{background:var(--accent)}.cal-apply-switch[aria-checked="true"] .sw-track::after{left:14px}.cal-apply-switch[aria-checked="true"] b{color:var(--accent)}
/* 새 업무 빠른 입력: 제목 아래 자동 입력 결과 */
.quick-applied{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 8px;font-size:11.5px;line-height:1.5}.qa-chip{padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-weight:600}
/* 업무회고 › 우선순위·상태 필터 */
.rv-filter{gap:6px;align-items:center;margin-bottom:12px}.rv-filter .flabel{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}.rv-fsep{width:1px;height:18px;background:var(--line-2);margin:0 6px}
/* 업무회고 › 일정 추정 점검 */
.est-panel{margin:0}.est-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.est-row{display:grid;grid-template-columns:minmax(0,1.3fr) 58px 78px 80px minmax(0,.8fr);gap:8px;align-items:center;padding:6px 9px;background:var(--surface);border-radius:8px;margin-bottom:4px;font-size:12.5px}.est-k,.est-why{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.est-task{cursor:pointer}.est-task:hover{outline:1px solid var(--line-2)}
/* 날짜 칸에 넘치는 항목: +N 버튼 → 그날 전체 목록 창 */
.more-btn{align-self:flex-start;justify-self:start;pointer-events:auto;flex:none;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2);border-radius:6px;padding:1px 8px;line-height:18px;cursor:pointer}.more-btn:hover{color:var(--text);border-color:var(--text)}
.more-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}.more-list .pill,.more-list .schedule-bar{display:block;position:relative;width:100%;font-size:13px;padding:7px 10px;border-radius:8px;white-space:normal;cursor:pointer}.more-list .schedule-bar.work-event{padding-right:34px}.more-list .pill .tm{margin-right:6px}
/* 플래너 오른쪽 필터 줄 (업무·루틴·두레이·프로젝트) */
.planner-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;flex:none}.planner-filters select{width:auto;max-width:180px}
/* Shared Dooray subscription: distinct read-only event color. */
.dooray-dot,.date-picker-marks .dooray,.date-picker-key .dooray{background:#a78bfa}
.dooray-event,.pill.dooray-event,.blk.dooray-event,.gt-bar.dooray-event,.schedule-bar.dooray-event{background:color-mix(in srgb,#8b5cf6 22%,var(--panel,#252525));border:0;color:var(--text,#eee);cursor:pointer}
.ical-calendar-hint{font-size:12px;color:var(--muted,#999);display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:min(560px,40vw);padding:3px 4px 3px 9px;border:1px solid var(--line-2);border-radius:999px;flex:0 1 auto}.ical-calendar-hint .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ical-calendar-hint .btn{flex:none}
.ical-description{white-space:pre-wrap;overflow-wrap:anywhere;max-height:45vh;overflow:auto;line-height:1.7;padding:12px;border:1px solid var(--line,#444);border-radius:8px}

/* 업무회고는 업무명을 첫 행에 확보하고 보조 정보는 다음 행에서 줄바꿈한다. */
.rv-check .rv-row,.rv-who .rv-row,.rv-side .rv-row{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:4px 8px;padding:9px}
.rv-check>.beige-panel,.rv-who>.beige-panel{min-width:0}
.rv-row>.dot{margin-top:5px}
.rv-row>.t{grid-column:2;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.5;font-weight:700;min-width:0}
.rv-row>.rv-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;min-width:0}
.rv-meta>.c{display:inline-flex;align-items:center;min-width:0;font-size:11.5px;color:var(--muted)}
.rv-meta>.c:empty{display:none}.rv-meta>.project{overflow-wrap:anywhere;white-space:normal}.rv-meta>.c.days{flex-wrap:wrap}
/* 업무 창 닫기 확인 (저장하지 않은 변경) */
.close-ask{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 55%,transparent);border-radius:inherit;padding:16px}
.close-ask-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:18px 18px 14px}.close-ask-card b{font-size:15px}.close-ask-card p{margin:6px 0 14px;color:var(--muted);font-size:13px}.close-ask-card .row{gap:6px;flex-wrap:wrap}

/* 새소식 · 최근 활동: 날짜 묶음 접기(가장 최근 날짜만 펼침) · 촘촘한 줄 (노션 임베드에서 목록이 너무 길어지지 않게) */
.ac-fold { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; padding: 10px 4px 6px; font-family: inherit; }
.ac-fold:hover { color: var(--text); } .ac-legend + .ac-dayb .ac-fold { padding-top: 4px; }
.ac-car { display: inline-grid; transition: transform .15s; } .ac-dayb.open .ac-car { transform: rotate(90deg); }
.ac-dn { font-weight: 600; color: var(--faint); font-size: 11.5px; }
.ac-dbody { display: none; flex-direction: column; } .ac-dayb.open .ac-dbody { display: flex; }
.ac-g.ac-hid { display: none; }
.ac-dmore { align-self: center; margin: 6px 0 4px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; font-family: inherit; } .ac-dmore:hover { color: var(--text); border-color: var(--text); }
.ac-dbody .ac-g { margin: 4px 0; border-radius: 10px; }
.ac-dbody .acg-h { padding: 6px 10px 2px; font-size: 12.5px; }
.ac-dbody .acg-items { padding: 0 4px 4px; }
.ac-dbody .acg-it { padding: 4px 6px; gap: 7px; }
.ac-dbody .acg-it .ac-text { -webkit-line-clamp: 1; margin-top: 2px; padding: 3px 8px; }
.ac-dbody .ac-ch { margin-top: 2px; }
/* 노트로 저장: 같은 업무가 이미 있을 때 묻는 칸 */
.note-ask{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2)}.note-ask p{margin:0 0 8px}.note-ask .row{gap:6px;flex-wrap:wrap}
/* 멤버 관리 행: [이름·이메일·등급 배지] [표시 이름 | 업무 이메일 / 이메일 수신] [등급·탈퇴] 세 칸 격자로 맞춤 */
.mb-workspace{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) 150px;align-items:start;gap:10px 18px;padding:14px 16px}
.mb-workspace>.grow{flex-basis:auto}
.mb-who{display:flex;flex-direction:column;gap:2px;padding-top:2px}.mb-who>.faint{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-badge{align-self:flex-start;margin-top:4px;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2,rgba(127,127,127,.12));border:1px solid var(--line)}
.mb-badge.on{color:var(--accent-tx,#fff);background:var(--accent);border-color:transparent}
.mb-workspace .mb-fields{gap:8px 14px}
.mb-workspace .mb-fields label>.row{display:flex;gap:6px;margin-top:4px;flex-wrap:nowrap}
.mb-workspace .mb-fields label>.row input{flex:1}
.mb-workspace .mb-fields label>.row .btn{min-width:88px;height:32px;justify-content:center}
.mb-workspace .mb-fields .member-email-option{padding-top:0}
.mb-grade{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-top:20px}
.mb-grade label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.mb-grade select{flex:1;height:32px;min-width:0}
.mb-grade .btn{justify-content:center}.mb-grade>.faint{font-size:12px;height:32px;display:flex;align-items:center}
.mb-workspace>.member-stop-confirm{grid-column:1/-1}
@media(max-width:760px){.mb-workspace{grid-template-columns:minmax(0,1fr)}.mb-grade{padding-top:0;flex-direction:row;align-items:center}.mb-grade label{flex:1}}