/* bizlog 앱 셸 — MessageWorks 디자인 시스템(style.css)의 --mw-* 토큰을 적극 참조.
   라이트/다크는 style.css(:root / html[data-theme="dark"])가 단일 진실원본. */
*{box-sizing:border-box}
body{margin:0;background:var(--mw-bg);color:var(--mw-text-body);
  font-family:'Malgun Gothic','맑은 고딕',-apple-system,sans-serif;}
a{color:var(--mw-brand);text-decoration:none}
/* 접근성: 본문 바로가기 + 키보드 포커스 링 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--mw-brand);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--mw-brand-strong,#5b4bdb);outline-offset:2px}
/* 스켈레톤 로더 — '불러오는 중…' 텍스트 대체(체감 품질↑). 모션 줄이기 선호 시 정적. */
.skel{display:inline-block;position:relative;overflow:hidden;background:var(--mw-surface-muted);border-radius:6px;vertical-align:middle}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--mw-surface),transparent);animation:skelshimmer 1.2s infinite}
.skel-line{height:13px;width:100%;margin:5px 0}
@keyframes skelshimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .skel::after{animation:none} }
/* 빈 상태 — 평문 '없습니다' 대신 아이콘+중앙정렬로 친근하게(재사용) */
.empty{text-align:center;color:var(--mw-text-muted);padding:20px 10px;line-height:1.5}
.empty .empty-ic{font-size:25px;display:block;margin-bottom:5px;opacity:.75}
/* 스크린리더 전용(시각 숨김) — 색/위치로만 전달되는 정보의 텍스트 대체 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* BizLog 워드마크 — 2톤(Biz + 브랜드색 Log). 라이트/다크·녹색배경 대응 */
.wm{letter-spacing:-.4px}
.wm .wm-b{font-weight:600}
.wm .wm-a{font-weight:800;color:var(--mw-brand)}
.wm.wm-light .wm-a{color:#fff}  /* 녹색 브랜드 패널: 흰색 + 굵기 대비 */
/* 테마 — 액센트 색상(data-accent). 기본(green)은 style.css 토큰. 모두 AA 대비 통과 색 선택. */
html[data-accent="blue"]{--mw-brand:#2563eb;--mw-brand-strong:#1d4ed8;--mw-brand-soft:rgba(37,99,235,.12);--mw-brand-grad-a:#3b82f6;--mw-brand-grad-b:#1e40af;--mw-focus-ring:rgba(37,99,235,.35)}
html[data-accent="purple"]{--mw-brand:#7c3aed;--mw-brand-strong:#6d28d9;--mw-brand-soft:rgba(124,58,237,.13);--mw-brand-grad-a:#8b5cf6;--mw-brand-grad-b:#5b21b6;--mw-focus-ring:rgba(124,58,237,.35)}
html[data-accent="rose"]{--mw-brand:#e11d48;--mw-brand-strong:#be123c;--mw-brand-soft:rgba(225,29,72,.12);--mw-brand-grad-a:#fb7185;--mw-brand-grad-b:#9f1239;--mw-focus-ring:rgba(225,29,72,.35)}
html[data-accent="teal"]{--mw-brand:#0d9488;--mw-brand-strong:#0f766e;--mw-brand-soft:rgba(13,148,136,.13);--mw-brand-grad-a:#2dd4bf;--mw-brand-grad-b:#0f766e;--mw-focus-ring:rgba(13,148,136,.35)}
html[data-theme="dark"][data-accent="blue"]{--mw-brand:#60a5fa;--mw-brand-strong:#93c5fd}
html[data-theme="dark"][data-accent="purple"]{--mw-brand:#a78bfa;--mw-brand-strong:#c4b5fd}
html[data-theme="dark"][data-accent="rose"]{--mw-brand:#fb7185;--mw-brand-strong:#fda4af}
html[data-theme="dark"][data-accent="teal"]{--mw-brand:#2dd4bf;--mw-brand-strong:#5eead4}
/* 기본 버튼·강조 요소를 액센트 토큰 연동 — 테마 변경이 전 UI에 일관 반영(대비 안전: 둘 다 흰글씨 AA) */
.mw-btn-primary{background:linear-gradient(135deg,var(--mw-brand),var(--mw-brand-strong));box-shadow:0 4px 12px var(--mw-brand-soft)}
/* 액센트 스와치(테마 피커) */
.acc-sw{width:24px;height:24px;border-radius:50%;border:2px solid var(--mw-border-strong);cursor:pointer;padding:0;transition:transform .1s}
.acc-sw:hover{transform:scale(1.15)}
.acc-sw.on{border-color:var(--mw-text);box-shadow:0 0 0 2px var(--mw-surface),0 0 0 4px var(--mw-text)}
/* 음성입력 마이크(voice_input.js) */
.voice-mic{background:transparent;border:1px solid var(--mw-border-strong);border-radius:6px;padding:2px 7px;cursor:pointer;font-size:13px;line-height:1.4;margin-left:4px;vertical-align:middle}
.voice-mic:hover{background:var(--mw-surface-muted)}
.voice-mic.on{background:var(--mw-danger,#dc2626);border-color:var(--mw-danger,#dc2626);animation:vmPulse 1.2s infinite}
@keyframes vmPulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 6px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.ne-toolbar .voice-mic{margin-left:6px}
/* 즐겨찾기(nav 빠른 접근) */
.nav-fav-toggle{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--mw-text-muted);font-size:12px;padding:4px 10px;cursor:pointer;border-radius:6px}
.nav-fav-toggle:hover{background:var(--mw-surface-muted)}
.nav-fav-toggle.on{color:var(--mw-brand);font-weight:600}
.nav-fav{margin-bottom:4px}
.nav-fav-it{display:block;font-size:12.5px;padding:4px 10px 4px 18px;color:var(--mw-text);text-decoration:none;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-fav-it:hover{background:var(--mw-brand-soft);color:var(--mw-brand-strong)}
.nav-fav-toggle .fav-star{display:inline-block;width:1em}  /* 별만 토글, '즐겨찾기' 라벨 보존 */
/* KO/EN 언어 스위치 — 구글식 세그먼트 토글(활성=브랜드 알약, 부드러운 전환) */
.lang-switch{display:inline-flex;background:var(--mw-surface-muted);border:1px solid var(--mw-border);border-radius:11px;padding:2px}
.lang-opt{border:0;background:transparent;color:var(--mw-text-muted);font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:9px;cursor:pointer;line-height:1.5;transition:background .18s,color .18s}
.lang-opt.on{background:var(--mw-brand);color:#fff;box-shadow:0 1px 3px var(--mw-brand-soft)}
.lang-opt:not(.on):hover{color:var(--mw-text)}
/* 토픽바 우측 공통 액션 클러스터(_topbar_actions.html) — 전 페이지 동일 */
.tb-actions{display:inline-flex;align-items:center;gap:10px}
.tb-user{font-size:13px;color:var(--mw-text-muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 표준 다크/라이트 슬라이드 토글 — 해/달 양끝 + 슬라이딩 knob(iOS/머티리얼식) */
.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:26px;padding:0 6px;border-radius:13px;border:1px solid var(--mw-border-strong);background:var(--mw-surface-muted);cursor:pointer;box-sizing:border-box;transition:background .2s;flex:0 0 auto}
.theme-switch .ts-ic{width:13px;height:13px;position:relative;z-index:1;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-switch .ts-sun{color:#f59e0b}
.theme-switch .ts-moon{color:var(--mw-text-muted)}
.theme-switch .ts-knob{position:absolute;top:50%;left:3px;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--mw-surface);box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.4,0,.2,1)}
html[data-theme="dark"] .theme-switch{background:var(--mw-brand-soft);border-color:var(--mw-brand)}
html[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(24px);background:var(--mw-brand)}
html[data-theme="dark"] .theme-switch .ts-moon{color:#fff}
html[data-theme="dark"] .theme-switch .ts-sun{color:var(--mw-text-muted)}
.theme-switch:hover{border-color:var(--mw-brand)}
/* 아이콘 버튼(로그아웃 등) — 둥근 고스트, 호버 시 감성 강조 */
.tb-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--mw-text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-decoration:none}
.tb-iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-iconbtn:hover{background:var(--mw-surface-muted);color:var(--mw-text)}
.tb-logout:hover{background:var(--mw-danger-soft,rgba(220,38,38,.1));color:var(--mw-danger,#dc2626);border-color:var(--mw-danger,#dc2626)}
/* 전자결재 함(box) 탭 — Hiworks식 결재 문서함 IA(전체·기안·수신·결재·참조·진행중·완료·반려) */
.wf-boxtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;border-bottom:1px solid var(--mw-border);padding-bottom:8px}
.wf-boxtab{border:1px solid var(--mw-border-strong);background:var(--mw-surface);color:var(--mw-text-muted);font-size:13px;padding:5px 12px;border-radius:16px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.wf-boxtab:hover{color:var(--mw-text);border-color:var(--mw-brand)}
.wf-boxtab.on{background:var(--mw-brand);color:#fff;border-color:var(--mw-brand)}
.wf-boxcnt{display:inline-block;min-width:16px;padding:0 5px;border-radius:9px;background:var(--mw-surface-muted);color:var(--mw-text-muted);font-size:11px;font-weight:700;margin-left:2px}
.wf-boxtab.on .wf-boxcnt{background:rgba(255,255,255,.25);color:#fff}
/* 검색형 선택 박스(search_select.js) — <select data-searchable> 점진적 향상 */
.ss-wrap{position:relative;display:inline-block}
.ss-native{display:none}
.ss-input{cursor:text}
.ss-panel{display:none;position:absolute;left:0;top:calc(100% + 2px);z-index:50;min-width:100%;max-height:240px;overflow:auto;background:var(--mw-surface);border:1px solid var(--mw-border-strong);border-radius:8px;box-shadow:0 8px 28px var(--mw-shadow,rgba(0,0,0,.18))}
.ss-panel.ss-open{display:block}
.ss-it{padding:7px 11px;cursor:pointer;font-size:14px;color:var(--mw-text);white-space:nowrap}
.ss-it.ss-sel{font-weight:700}
.ss-it:hover,.ss-it.ss-on{background:var(--mw-brand-soft);color:var(--mw-brand-strong)}
.ss-empty{padding:8px 11px;color:var(--mw-text-muted);font-size:13px}
/* 재사용 칸반 보드(kanban.js) */
.kb-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.kb-col{flex:1;min-width:200px;background:var(--mw-surface-muted);border-radius:10px;padding:8px}
.kb-colhead{font-weight:700;font-size:13px;color:var(--mw-text);padding:4px 6px 8px;border-top:3px solid var(--mw-brand);border-radius:2px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.kb-cnt{font-size:12px;font-weight:600;color:var(--mw-text-muted);background:var(--mw-surface);border-radius:10px;padding:0 8px;min-width:20px;text-align:center}
.kb-cards{display:flex;flex-direction:column;gap:6px;min-height:24px}
.kb-card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:8px;padding:9px 11px;font-size:13px;color:var(--mw-text)}
.kb-empty{color:var(--mw-text-muted);font-size:12px;padding:8px;text-align:center}
/* 칸반 DnD(docs/23 공유 엔진) — 드래그 카드·드롭 타깃 하이라이트 */
.kb-card[draggable="true"]{cursor:grab}
.kb-card[draggable="true"]:active{cursor:grabbing}
.kb-card.kb-dragging{opacity:.4}
.kb-col.kb-over{outline:2px dashed var(--mw-brand);outline-offset:-2px;background:var(--mw-surface)}
@media (prefers-reduced-motion: reduce){.kb-card.kb-dragging{opacity:.4;transition:none}}
/* OKR 정렬 트리(docs/23 PHASE 1) — 상위-하위 위계 시각화·진척 링 */
.gt-tree{overflow-x:auto;padding:2px}
.gt-node{position:relative}
.gt-card{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:3px 0;background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:8px}
.gt-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.gt-tog{flex:0 0 16px;cursor:pointer;color:var(--mw-text-muted);font-size:12px;text-align:center;user-select:none}
.gt-tog.gt-leaf{cursor:default;opacity:.25}
.gt-ring{flex:0 0 32px}
.gt-main{min-width:0;flex:1}
.gt-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%;vertical-align:bottom}
/* 트리 드래그 reparent */
.gt-card.gt-drag{cursor:grab}.gt-card.gt-drag:active{cursor:grabbing}
.gt-card.gt-dragging{opacity:.4}
.gt-card.gt-over{outline:2px dashed var(--mw-brand);outline-offset:1px;background:var(--mw-surface-muted)}
.gt-root-drop{margin:6px 0 2px;padding:7px 10px;border:1.5px dashed var(--mw-border-strong);border-radius:8px;color:var(--mw-text-muted);font-size:12px;text-align:center}
.gt-root-drop.gt-over{outline:2px dashed var(--mw-brand);background:var(--mw-surface-muted);color:var(--mw-text)}
@media (prefers-reduced-motion: reduce){.gt-card.gt-dragging{transition:none}}
/* OKR 사이클 간트(docs/23) — 기간 막대·진척 채움·오늘 마커 */
.gg-chart{padding:2px}
.gg-row{display:flex;align-items:center;gap:8px;margin:4px 0}
.gg-label{flex:0 0 120px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-lane{position:relative;flex:1;height:20px;background:var(--mw-surface-muted);border-radius:4px}
.gg-bar{position:absolute;top:2px;height:16px;background:var(--mw-surface);border:1px solid var(--mw-brand);border-radius:4px;overflow:hidden;min-width:3px}
.gg-bar>span{display:block;height:100%;background:var(--mw-brand);opacity:.4}
.gg-today{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--mw-danger,#dc2626);z-index:2;border-radius:1px}
/* 토스트 — fetch 액션 성공/실패 즉시 피드백(우하단, 자동 소멸). 재사용 window.toast(msg,type). */
.toast-wrap{position:fixed;bottom:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--mw-surface);border:1px solid var(--mw-border-strong);border-left:3px solid var(--mw-brand);border-radius:9px;padding:10px 14px;box-shadow:0 8px 28px var(--mw-shadow,rgba(0,0,0,.18));color:var(--mw-text);font-size:14px;max-width:330px;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
.toast.show{opacity:1;transform:translateY(0)}
.toast.t-ok{border-left-color:var(--mw-success,#10b981)}
.toast.t-err{border-left-color:var(--mw-danger,#dc2626)}
@media (prefers-reduced-motion:reduce){ .toast{transition:none} }
/* 공지 작성 에디터 — 화면 반 높이(양식 입력 가능). 다른 오두막 에디터엔 영향 없게 #noticeModal 스코프. */
#noticeModal .hut-in{min-height:48vh;max-height:62vh}
#noticeModal>div[role=dialog]{max-width:720px}
.shell{display:flex;min-height:100vh}
.nav{width:var(--nav-w,220px);background:var(--mw-surface);border-right:1px solid var(--mw-border);
  padding:16px 10px;flex:0 0 auto;position:relative}
/* 네비 리사이즈 — 우측 경계 드래그로 폭 조절(160~420px, localStorage 영속) */
.nav-resize{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:6;touch-action:none}
.nav-resize:hover,.nav-resize.drag{background:var(--mw-brand-soft)}
body.nav-resizing{cursor:col-resize;user-select:none}
/* 네비 접기/펴기 — 접으면 폭 0(콘텐츠 전폭), 좌상단 펴기 버튼 노출. 영속. */
.nav-collapse-btn{position:absolute;top:8px;right:7px;width:24px;height:24px;border:1px solid var(--mw-border);
  background:var(--mw-surface);border-radius:6px;cursor:pointer;color:var(--mw-text-muted);font-size:13px;line-height:1;padding:0;z-index:7}
.nav-collapse-btn:hover{background:var(--mw-surface-muted);color:var(--mw-text-body)}
.nav-collapsed .nav{width:0;padding:0;border:0;overflow:hidden}
.nav-collapsed .nav>*{visibility:hidden}
.nav-reopen{display:none;position:fixed;top:11px;left:9px;z-index:1100;width:30px;height:30px;
  border:1px solid var(--mw-border);background:var(--mw-surface);border-radius:7px;cursor:pointer;
  color:var(--mw-text-body);font-size:15px;line-height:1;box-shadow:0 1px 3px var(--mw-shadow)}
.nav-reopen:hover{background:var(--mw-surface-muted)}
.nav-collapsed .nav-reopen{display:block}
.nav-collapsed .main .topbar{padding-left:50px}
.nav .brand{font-weight:700;color:var(--mw-text);font-size:18px;padding:6px 10px 16px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;color:var(--mw-text-body);margin:2px 0}
.nav a:hover,.nav a.active{background:var(--mw-brand-soft);color:var(--mw-brand-strong)}
.nav-ico{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav a.active .nav-ico,.nav a:hover .nav-ico{opacity:1}
/* 접이식 섹션(accordion) — 헤더(button)는 클릭 토글, 셰브론 회전, 아이템은 펼침 시 노출 */
.nav-section{margin-top:8px}
.nav-group{display:flex;align-items:center;width:100%;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mw-text-muted);padding:7px 12px 5px;text-align:left;border-radius:6px;user-select:none}
.nav-group:hover{color:var(--mw-text-body);background:var(--mw-surface-muted)}
.nav-chev{margin-left:auto;font-size:13px;line-height:1;opacity:.7;transition:transform .15s ease}
.nav-section.open .nav-chev{transform:rotate(90deg)}
.nav-items{display:none}
.nav-section.open .nav-items{display:block}
/* 접힌 섹션의 미읽음 롤업 점(알림·채널 배지가 자식에 있으면 헤더에 표시) */
.nav-sec-dot{width:7px;height:7px;border-radius:50%;background:var(--mw-danger,#cf222e);margin-left:7px;flex:0 0 auto}
/* 접이식 카드(details.card) — 생성/설정 폼을 기본 접힘으로 두어 목록/내용 우선. 셰브론은 nav 와 일관 */
details.card>summary{cursor:pointer;font-weight:700;color:var(--mw-text);list-style:none;display:flex;align-items:center;gap:8px;margin:-2px 0}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:'▸';color:var(--mw-text-muted);font-weight:700;transition:transform .15s ease;display:inline-block}
details.card[open]>summary{margin-bottom:12px}
details.card[open]>summary::before{transform:rotate(90deg)}
details.card>summary .muted{font-weight:400}
.main{flex:1;min-width:0}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;background:var(--mw-surface);border-bottom:1px solid var(--mw-border)}
.topbar .title{font-weight:700;color:var(--mw-text);font-size:18px}
.content{padding:22px}
.card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:12px;
  padding:18px;margin-bottom:16px;box-shadow:0 1px 3px var(--mw-shadow)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric{font-size:30px;font-weight:700;color:var(--mw-text)}
.muted{color:var(--mw-text-muted)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--mw-border)}
th{color:var(--mw-text-muted);font-weight:600;font-size:13px}
td{transition:background .12s ease}
tr:hover td{background:var(--mw-grid-hover)}  /* 데이터 행 hover 강조(헤더 제외) — flex 식 스캔성 */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--mw-surface-muted);
  color:var(--mw-text-body);font-size:12px}
/* 상태칩 의미 색(flex 구도) — 정상/완료=그린, 대기/진행=앰버, 반려/만료=레드 */
.badge.b-ok{background:var(--mw-brand-soft);color:var(--mw-brand-strong)}
.badge.b-warn{background:rgba(245,158,11,.16);color:var(--mw-warning)}
.badge.b-danger{background:rgba(220,38,38,.13);color:var(--mw-danger)}
/* 근무 유형 선택(슬랙 상태-picker 풍 이모지 타일) + 행 유형 칩 */
.wm-picker{display:flex;gap:10px;flex-wrap:wrap}
.wm-btn{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:104px;padding:14px 12px;
  border:1px solid var(--mw-border-strong);border-radius:12px;background:var(--mw-surface-2);
  color:var(--mw-text);cursor:pointer;font-family:inherit;font-size:13px;
  transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}
.wm-btn:hover{border-color:var(--mw-brand);background:var(--mw-brand-soft);color:var(--mw-brand-strong);
  transform:translateY(-1px);box-shadow:0 3px 10px var(--mw-shadow)}
.wm-emoji{font-size:26px;line-height:1}
.wm-tag{display:inline-block;font-size:11px;color:var(--mw-text-muted);white-space:nowrap}
h3{color:var(--mw-text)}
/* 로그인 — mw 토큰/브랜드 그라데 */
/* 로그인 — 엔터프라이즈 split 레이아웃(좌: 브랜드 쇼케이스 / 우: 폼). 모바일은 폼만. */
.login-split{display:flex;min-height:100vh;background:var(--mw-bg)}
.login-brand{flex:1.05;display:flex;flex-direction:column;justify-content:center;padding:60px 56px;color:#fff;
  background:linear-gradient(135deg,var(--mw-brand-grad-a),var(--mw-brand-grad-b),var(--mw-brand-grad-a));
  background-size:220% 220%;animation:loginGrad 16s ease infinite;position:relative;overflow:hidden}
@keyframes loginGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.login-brand::after{content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);animation:loginFloat 11s ease-in-out infinite}
.login-brand::before{content:"";position:absolute;left:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.13),rgba(255,255,255,0) 70%);animation:loginFloat 9s ease-in-out infinite reverse}
@keyframes loginFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-30px) scale(1.06)}}
/* 도트 메시 패턴 오버레이 */
.login-brand-in::before{content:"";position:absolute;inset:-60px -200px;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px);background-size:26px 26px;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.login-brand-in{position:relative;z-index:1;max-width:460px}
.login-brand-in>*{animation:loginIn .6s cubic-bezier(.2,.7,.2,1) both}
.login-brand-in>*:nth-child(2){animation-delay:.07s}.login-brand-in>*:nth-child(3){animation-delay:.14s}.login-brand-in>*:nth-child(4){animation-delay:.21s}
@keyframes loginIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 전정장애 배려 — 로그인 배경/플로팅/등장 애니메이션 비활성(정적 표시) */
@media (prefers-reduced-motion:reduce){
  .login-brand,.login-brand::after,.login-brand::before,.login-brand-in>*{animation:none}
}
.login-brand h2{font-size:34px;line-height:1.28;margin:24px 0 14px;font-weight:800;letter-spacing:-.5px;white-space:pre-line}
.login-brand .lead{font-size:16px;opacity:.93;line-height:1.65;margin:0}
.login-feat{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.login-feat>div{display:flex;align-items:center;gap:12px;font-size:15px;opacity:.96}
.login-feat .fi{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.18);display:inline-flex;
  align-items:center;justify-content:center;font-size:16px;flex:none}
.login-logo{display:inline-flex;align-items:center;gap:12px;font-size:26px;font-weight:800;letter-spacing:-.5px}
.login-panel{flex:.95;display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--mw-bg)}
.login-box{width:380px;max-width:92vw;background:var(--mw-surface);border:1px solid var(--mw-border);
  border-radius:18px;padding:38px 34px;box-shadow:0 18px 50px var(--mw-shadow)}
.login-box .login-logo{color:var(--mw-text);font-size:24px;margin-bottom:18px}
.login-box h1{margin:0 0 4px;font-size:23px;font-weight:800;color:var(--mw-text);letter-spacing:-.3px}
.login-box input{width:100%;box-sizing:border-box;padding:13px 14px;margin-top:11px;border:1px solid var(--mw-border-strong);
  border-radius:10px;background:var(--mw-surface-2);color:var(--mw-text);font-size:15px}
.login-box input:focus{outline:none;border-color:var(--mw-brand);box-shadow:0 0 0 3px var(--mw-focus-ring)}
.login-box .mw-btn-primary{width:100%;justify-content:center;margin-top:18px;padding:13px;font-size:15px;font-weight:700}
.err{color:var(--mw-danger);margin-top:12px;font-size:14px}
@media (max-width:860px){ .login-brand{display:none} .login-panel{flex:1} }
/* 모바일 하단 탭바·드로어 백드롭 — 데스크톱 기본 숨김(모바일 @media 에서 노출) */
.bottom-tab{display:none}
.nav-backdrop{display:none}
/* 반응형: 모바일 → flex 구도(하단 탭바 + 좌측 nav 슬라이드 드로어) */
@media (max-width:760px){
  .shell{flex-direction:column}
  /* 좌측 nav → 슬라이드인 드로어(기본 숨김, body.nav-open 시 노출, 그룹 라벨 유지) */
  .nav{position:fixed;top:0;left:0;bottom:0;z-index:1200;width:80%;max-width:300px;
    flex-direction:column;overflow-y:auto;border-right:1px solid var(--mw-border);border-bottom:0;
    transform:translateX(-100%);transition:transform .22s ease}
  body.nav-open .nav{transform:translateX(0);box-shadow:0 0 40px var(--mw-shadow-strong)}
  .nav a{white-space:nowrap;padding:10px 12px;min-height:44px}  /* 터치 타깃(WCAG 2.5.5) */
  .nav-backdrop{display:block;position:fixed;inset:0;background:var(--mw-overlay);z-index:1100;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  /* 하단 탭바(홈/근무/휴가/결재함/더보기) */
  .bottom-tab{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:1000;
    background:var(--mw-surface);border-top:1px solid var(--mw-border)}
  .bottom-tab a,.bottom-tab button{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:8px 2px;min-height:52px;background:none;border:0;
    cursor:pointer;text-decoration:none;color:var(--mw-text-muted);font-size:11px;font-family:inherit}
  .bt-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .topbar{padding:0 14px}
  .grid3{grid-template-columns:1fr}
  .wm-btn{flex:1 1 40%;min-width:0}
  .content{padding:14px;padding-bottom:74px}
  form[action]{flex-direction:column;align-items:stretch !important}
  form[action] input,form[action] select,form[action] button{width:100%}
}
@media (max-width:1100px) and (min-width:761px){ .grid3{grid-template-columns:repeat(2,1fr)} }

/* 노션식 본문 렌더(.md-body) — notion_md.js 출력 공통 스타일. 채널·공지 등에서 재사용. */
.md-body .md-h{font-weight:700;font-size:1.05em;color:var(--mw-text);margin:8px 0 2px}
.md-body .md-q{border-left:3px solid var(--mw-brand);padding-left:10px;color:var(--mw-text-muted);margin:4px 0}
.md-body .md-list{margin:4px 0 4px 20px;padding:0}
.md-body .md-olist{margin:4px 0 4px 22px;padding:0}
.md-body .md-hr{border:0;border-top:1px solid var(--mw-border-strong);margin:9px 0}
.md-body .md-link{color:var(--mw-brand-strong);text-decoration:underline}
.md-body .md-check{list-style:none;margin-left:2px}
.md-body .md-check li::before{content:"\2610  ";color:var(--mw-text-muted)}
.md-body .md-check li.done::before{content:"\2611  ";color:var(--mw-brand-strong)}
.md-body .md-check li.done{color:var(--mw-text-muted);text-decoration:line-through}
.md-body .md-code{background:var(--mw-surface-muted);padding:1px 5px;border-radius:5px;font-family:monospace;font-size:.9em}
.md-body .md-pre{background:var(--mw-surface-muted);border:1px solid var(--mw-border-strong);border-radius:7px;padding:9px 11px;margin:5px 0;overflow:auto}
.md-body .md-pre code{font-family:monospace;font-size:.88em;white-space:pre;color:var(--mw-text-body)}
.md-body .md-callout{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;margin:5px 0;border-radius:8px;border-left:3px solid var(--mw-brand);background:var(--mw-surface-muted)}
.md-body .md-callout-ico{flex:0 0 auto;line-height:1.45}
.md-body .md-callout-info{border-left-color:var(--mw-brand-strong);background:var(--mw-brand-soft)}
.md-body .md-callout-warn{border-left-color:#e0a13a;background:rgba(224,161,58,.12)}
.md-body .md-callout-ok{border-left-color:var(--mw-brand);background:var(--mw-brand-soft)}
.md-body .md-callout-danger{border-left-color:var(--mw-danger);background:rgba(220,53,69,.11)}
.md-body .md-table-wrap{overflow-x:auto;margin:6px 0}
.md-body .md-table{border-collapse:collapse;font-size:.92em}
.md-body .md-table th,.md-body .md-table td{border:1px solid var(--mw-border-strong);padding:5px 10px;text-align:left}
.md-body .md-table th{background:var(--mw-surface-muted);font-weight:600}
/* 노션식 리치 에디터 부착기(notion_edit.js) — 재사용 툴바 + 라이브 미리보기 */
.ne-toolbar{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.ne-btn{border:1px solid var(--mw-border-strong);background:var(--mw-surface-2);color:var(--mw-text-body);border-radius:6px;padding:3px 9px;font-size:13px;cursor:pointer;line-height:1.3}
.ne-btn:hover{background:var(--mw-brand-soft);border-color:var(--mw-brand)}
.ne-preview{margin-top:6px;padding:9px 11px;border:1px dashed var(--mw-border-strong);border-radius:8px;background:var(--mw-surface-muted);min-height:8px}
.ne-preview:empty{display:none}
.md-body .md-mention{color:var(--mw-brand-strong);background:var(--mw-brand-soft);border-radius:5px;padding:0 4px;font-weight:600}
/* 결재선 스텝퍼(.appr-*) — 결재함·전자결재 공유, 다크모드 토큰. 서류가 단계를 거치는 흐름 */
.appr-flow{display:inline-flex;align-items:center;margin-left:10px;vertical-align:middle}
.appr-node{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1.5px solid var(--mw-border-strong);background:var(--mw-surface);color:var(--mw-text-muted)}
.appr-node.done{background:var(--mw-success,#10b981);border-color:var(--mw-success,#10b981);color:#fff}
.appr-node.rej{background:var(--mw-danger,#dc2626);border-color:var(--mw-danger,#dc2626);color:#fff}
.appr-node.cur{border-color:var(--mw-brand);color:var(--mw-brand-strong);animation:apprPulse 1.4s infinite}
.appr-node.wait{opacity:.55}
.appr-line{width:15px;height:2px;background:var(--mw-border-strong);display:inline-block}
.appr-line.lit{background:var(--mw-success,#10b981)}
@keyframes apprPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@media (prefers-reduced-motion:reduce){.appr-node.cur{animation:none}}
/* 전정장애 배려(표준 a11y) — 모션 최소화 선호 시 전 애니메이션/트랜지션 사실상 제거.
   개별 가드를 보강하는 캐치올(현재·향후 모든 모션 커버). transitionend 보존 위해 0 아닌 .001ms. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
/* ── 홈 피드 디자인 시스템(.hf-*) — 슬랙·노션식 정돈 카드/아이콘칩/상태색.
   모든 색은 mw-ui 토큰으로 매핑돼 다크/라이트 + 5색 액센트에서 동일 동작. 홈 외 화면에도 재사용. */
.hf{display:flex;flex-direction:column;gap:18px;max-width:1560px;padding-bottom:40px}
.hf-card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px var(--mw-shadow);margin:0}
.hf-h{font-size:16px;font-weight:700;color:var(--mw-text);margin:0}
.hf-link{font-size:12.5px;font-weight:600;color:var(--mw-brand-strong);text-decoration:none}
.hf-chip{display:flex;align-items:center;justify-content:center;flex:none;border-radius:9px}
.hf-c-brand{background:var(--mw-brand-soft);color:var(--mw-brand-strong)}
.hf-c-blue{background:rgba(37,99,235,.12);color:#2563eb}
.hf-c-violet{background:rgba(124,58,237,.13);color:#7c3aed}
.hf-c-rose{background:rgba(225,29,72,.12);color:#e5466f}
.hf-c-amber{background:rgba(245,158,11,.16);color:var(--mw-warning)}
.hf-c-slate{background:var(--mw-surface-muted);color:var(--mw-text-muted)}
html[data-theme="dark"] .hf-c-blue{color:#7fb0ff}
html[data-theme="dark"] .hf-c-violet{color:#b794ff}
html[data-theme="dark"] .hf-c-rose{color:#fb7a96}
.hf-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}
.hf-greet-h{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--mw-text);display:block}
.hf-greet-s{font-size:14px;color:var(--mw-text-muted);display:block;margin-top:5px}
.hf-today{display:flex;align-items:center;gap:16px;background:var(--mw-surface-2);border:1px solid var(--mw-border);border-radius:13px;padding:13px 17px;flex-wrap:wrap}
.hf-today-status{font-size:15px;font-weight:700;color:var(--mw-text);margin-top:2px}
.hf-today-actions{display:flex;gap:8px;align-items:center;margin-top:6px}
.hf-today-msg{font-size:12px;flex-basis:100%}
.hf-tl{margin-top:18px}
.hf-tl-track{position:relative;height:8px;background:var(--mw-surface-muted);border-radius:6px}
.hf-tl-fill{position:absolute;top:0;bottom:0;background:var(--mw-brand);border-radius:6px}
.hf-tl-dot{position:absolute;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--mw-surface);border:3px solid var(--mw-brand);transform:translateX(-50%)}
.hf-tl-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--mw-text-muted)}
.hf-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hf-kpi-card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:15px;box-shadow:0 1px 2px var(--mw-shadow);transition:box-shadow .15s,transform .15s;text-decoration:none}
.hf-kpi-card:hover{box-shadow:0 6px 18px var(--mw-shadow);transform:translateY(-2px)}
.hf-kpi-num{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--mw-text);line-height:1.05}
.hf-kpi-num small{font-size:15px;font-weight:600;color:var(--mw-text-muted)}
.hf-kpi-lbl{font-size:13px;color:var(--mw-text-muted);font-weight:500}
.hf-kpi-sub{font-size:12px;color:var(--mw-text-muted);opacity:.85}
.hf-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.hf-wc{position:relative;border:1px solid var(--mw-border);border-radius:13px;padding:15px 16px;display:flex;flex-direction:column;gap:11px;background:var(--mw-surface);transition:box-shadow .15s,transform .15s,border-color .15s;text-decoration:none}
.hf-wc:hover{border-color:var(--mw-brand-soft-border,var(--mw-brand));box-shadow:0 6px 16px var(--mw-shadow);transform:translateY(-2px)}
.hf-wc.alert{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.36)}
.hf-wc-top{display:flex;align-items:center;gap:9px}
.hf-wc-lbl{font-size:12.5px;color:var(--mw-text-muted);font-weight:500}
.hf-wc-num{font-size:24px;font-weight:800;color:var(--mw-text);letter-spacing:-.02em}
.hf-wc-num small{font-size:13px;font-weight:500;color:var(--mw-text-muted)}
.hf-wc-sub{font-size:11.5px;color:var(--mw-text-muted);opacity:.85}
.hf-pill{align-self:flex-start;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.hf-prog{height:6px;background:var(--mw-surface-muted);border-radius:4px;overflow:hidden}
.hf-prog>i{display:block;height:100%;background:var(--mw-brand);border-radius:4px}
.hf-whide{position:absolute;top:4px;right:6px;border:0;background:transparent;color:var(--mw-text-muted);cursor:pointer;line-height:1;font-size:14px;display:none}
.hf-bottom{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.hf-rcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.hf-srow{display:flex;align-items:center;gap:13px;padding:10px;border-radius:9px;text-decoration:none;color:var(--mw-text-body)}
.hf-srow:hover{background:var(--mw-surface-2)}
.hf-sdate{font-size:12.5px;color:var(--mw-text-muted);font-variant-numeric:tabular-nums;width:88px;flex:none}
.hf-sbadge{font-size:11px;font-weight:700;padding:3px 0;border-radius:6px;width:46px;text-align:center;flex:none}
.hf-stxt{font-size:13.5px;color:var(--mw-text-body);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-anni{display:flex;align-items:center;gap:12px;padding:11px;border-radius:11px;background:var(--mw-surface-2);border:1px solid var(--mw-border);text-decoration:none}
.hf-avatar{width:36px;height:36px;border-radius:50%;background:var(--mw-brand);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.hf-step{display:flex;align-items:center;gap:11px;padding:2px 0}
.hf-step-ic{width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.hf-step-ic.done{background:var(--mw-brand);color:#fff}
.hf-step-ic.todo{border:2px solid var(--mw-border-strong)}
.hf-step a{text-decoration:none;font-size:13.5px}
@media (max-width:1100px){ .hf-bottom{grid-template-columns:1fr} }
@media (max-width:760px){ .hf-kpi{grid-template-columns:1fr} .hf-card{padding:16px 16px;border-radius:13px} }