/* 문의온다 셸 컴포넌트 — 1차.
   원천 = agency training/camera/design/stage2_mockup.html 제품 화면 CSS (.adm·.auth·.mo-btn·.pill).
   색은 전부 토큰(색 리터럴 0) · 글자 크기는 tokens.json 타입 스케일 값. build_tokens.py --check 가 색 리터럴·미정의 토큰을 잡는다.
   2차(9/28 ⑤ 결정): box-sizing · 숫자 Pretendard tnum · 상태 모양 구분 · 주의 한 색(주황) · Brand 락업 · UrgentBar · Mesh · Ledger · Revenue. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 화면에서 감추고 보조기기에만 읽히는 글 — aria-live 알림·라벨 보강(9/29 랜딩 진단 위젯부터). 겹침 검사(check_screens)는 이 클래스를 뺀다 */
.mo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Button ---------- */
.mo-btn{font:inherit;font-size:14px;font-weight:600;height:var(--mo-btn-h);padding:0 var(--mo-space-4);
  border-radius:var(--mo-r-sm);border:1px solid var(--mo-line);background:var(--mo-bg);color:var(--mo-ink);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;text-decoration:none}   /* 링크(<a>)로 그린 단추에 밑줄이 없게 — .mo-chip 과 같은 원인(S6) */
.mo-btn:hover{background:var(--mo-bg-alt)}
.mo-btn:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px}
.mo-btn--pri{background:var(--mo-btn);border-color:var(--mo-btn);color:var(--mo-on-btn)}
.mo-btn--pri:hover{background:var(--mo-btn-hover);border-color:var(--mo-btn-hover)}
.mo-btn--sec{border-color:var(--mo-btn);color:var(--mo-btn)}
.mo-btn--touch{min-height:var(--mo-touch-min);height:auto;border-radius:var(--mo-r-md);padding:0 1.1em}
.mo-btn--lg{width:100%;height:var(--mo-btn-h-lg);border-radius:var(--mo-r-md);font-size:16px;font-weight:700}
.mo-btn:disabled{opacity:.35;cursor:default}

/* ---------- Field (label · input · hint) ---------- */
.mo-field{display:block;margin-bottom:var(--mo-space-4)}
.mo-label{display:block;font-size:13px;font-weight:600;color:var(--mo-ink-2);margin:0 0 6px}
.mo-input{width:100%;height:var(--mo-input-h);border-radius:var(--mo-r-sm);padding:0 var(--mo-space-4);background:var(--mo-bg-alt);
  border:1px solid var(--mo-line);font:inherit;font-size:15px;color:var(--mo-ink)}
.mo-input::placeholder{color:var(--mo-placeholder)}
.mo-input:focus{outline:none;border-color:var(--mo-primary);background:var(--mo-bg)}
.mo-input[aria-invalid="true"]{border-color:var(--mo-warn);background:var(--mo-bg)}
.mo-input[readonly]{color:var(--mo-muted)}
.mo-hint{font-size:12px;color:var(--mo-faint);margin-top:6px}
.mo-hint--warn{color:var(--mo-warn)}

/* ---------- PasswordRules (입력 중 안내 — 서버가 최종 판정) ---------- */
.mo-rules{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.mo-rules li{color:var(--mo-faint);padding-left:20px;position:relative}
.mo-rules li::before{content:"·";position:absolute;left:6px}
.mo-rules li[data-state="ok"]{color:var(--mo-ink-2)}
.mo-rules li[data-state="ok"]::before{content:"✓";left:2px;color:var(--mo-primary);font-weight:700}
.mo-rules li[data-state="no"]{color:var(--mo-warn)}
.mo-rules li[data-state="no"]::before{content:"✕";left:2px;font-weight:700}

/* ---------- OtpInput · RecoveryCodes (관리자·소유자 2단계 인증) ---------- */
.mo-otp{font-family:var(--mo-font-mono);font-size:22px;letter-spacing:.4em;text-align:center}
.mo-secret{font-family:var(--mo-font-mono);font-size:13px;background:var(--mo-bg-alt);border:1px solid var(--mo-line);
  border-radius:var(--mo-r-sm);padding:8px 10px;text-align:center;letter-spacing:.08em;color:var(--mo-ink-2)}
.mo-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-family:var(--mo-font-mono);font-size:13px;
  background:var(--mo-bg-alt);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-3);text-align:center;color:var(--mo-ink-2)}

/* ---------- StatusPill (인증 상태 5종 — 신호등 3색 금지) ---------- */
.mo-pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--mo-r-pill);font-size:12px;font-weight:700;white-space:nowrap}
.mo-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mo-pill--valid{background:var(--mo-bg-alt-strong);color:var(--mo-ink-2)}
.mo-pill--valid::before{content:"✓";width:auto;height:auto;background:none;border-radius:0;font-size:12px}
.mo-pill--soon::before,.mo-pill--expired::before{content:"!";width:auto;height:auto;background:none;border-radius:0;font-size:12px}
.mo-pill--soon{background:var(--mo-bg);color:var(--mo-warn);box-shadow:inset 0 0 0 1px var(--mo-warn)}
.mo-pill--expired{background:var(--mo-warn-soft);color:var(--mo-warn)}
.mo-pill--progress{background:var(--mo-bg-alt-strong);color:var(--mo-ink-2)}
.mo-pill--none{background:var(--mo-bg);color:var(--mo-muted);box-shadow:inset 0 0 0 1px var(--mo-line)}
.mo-pill--none::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- FilterChips · Segmented ---------- */
.mo-chips{display:flex;flex-wrap:wrap;gap:6px}
/* 링크(<a>)로 그려도 글자가 세로 가운데에 오고 밑줄이 없게 — 서버 렌더 목록(S5b 초대)은 필터를 링크로 낸다 */
.mo-chip{display:inline-flex;align-items:center;font:inherit;font-size:13px;font-weight:600;height:32px;padding:0 var(--mo-space-3);border-radius:var(--mo-r-pill);
  border:1px solid var(--mo-line);background:var(--mo-bg);color:var(--mo-muted);cursor:pointer;text-decoration:none}
.mo-chip[aria-pressed="true"]{border-color:var(--mo-primary);color:var(--mo-primary);background:var(--mo-primary-soft)}
.mo-seg{display:flex;border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);overflow:hidden}
.mo-seg button{flex:1;font:inherit;height:40px;border:0;font-weight:600;font-size:14px;color:var(--mo-muted);background:var(--mo-bg);cursor:pointer}
.mo-seg button+button{border-left:1px solid var(--mo-line)}
.mo-seg button[aria-pressed="true"]{background:var(--mo-primary-soft);color:var(--mo-primary)}
/* 라디오 판(S12 재인증 설정) — 폼으로 제출하는 고르기. label 이 단추와 같은 모양이고 radio 는 보이지 않게 둔다(초점은 label 에 그린다).
   JS 없이도 고르고 제출된다. 고른 것 = :has(input:checked) */
.mo-seg label{flex:1;display:flex;align-items:center;justify-content:center;position:relative;height:40px;font-weight:600;font-size:14px;color:var(--mo-muted);background:var(--mo-bg);cursor:pointer}
.mo-seg label+label{border-left:1px solid var(--mo-line)}
.mo-seg label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mo-seg label:has(input:checked){background:var(--mo-primary-soft);color:var(--mo-primary)}
.mo-seg label:has(input:focus-visible){outline:2px solid var(--mo-primary);outline-offset:-2px}

/* ---------- AppShell (GNB · 본문 · 페이지 머리) ---------- */
.mo-app{background:var(--mo-bg-alt);color:var(--mo-ink);font-family:var(--mo-font);font-size:14px;line-height:1.5;min-height:100%}
.mo-gnb{height:calc(var(--mo-gnb-h) + 1px);border-bottom:1px solid var(--mo-line);background:var(--mo-bg);display:flex;align-items:center}
.mo-gnb__in{width:100%;max-width:calc(var(--mo-container) + 40px);margin:0 auto;padding:0 var(--mo-space-5);display:flex;align-items:center;gap:var(--mo-space-4)}
.mo-org{font-size:13px;color:var(--mo-muted);padding-left:var(--mo-space-3);border-left:1px solid var(--mo-line)}
.mo-gnb__sp{flex:1}
.mo-gnb nav{display:flex;gap:4px}
.mo-gnb nav a{font-size:14px;color:var(--mo-muted);text-decoration:none;padding:8px 10px;border-radius:var(--mo-r-sm);font-weight:600}
.mo-gnb nav a[aria-current="page"]{color:var(--mo-primary);background:var(--mo-primary-soft)}
.mo-nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;
  background:var(--mo-warn);color:var(--mo-on-btn);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}
.mo-main{max-width:calc(var(--mo-container) + 40px);margin:0 auto;padding:var(--mo-space-6) var(--mo-space-5) var(--mo-space-10)}
.mo-ph{display:flex;flex-wrap:wrap;gap:8px var(--mo-space-4);align-items:flex-end;margin-bottom:var(--mo-space-5)}
.mo-ph h1{font-size:22px;margin:0;line-height:1.3}
.mo-ph p{font-size:13px;color:var(--mo-muted);margin:2px 0 0}
.mo-ph__sp{flex:1}
@media (max-width:833px){.mo-gnb nav,.mo-org{display:none}}
@media (min-width:834px){.mo-main{padding:var(--mo-space-8) var(--mo-space-5) 48px}}

/* ---------- AppShell 2 — 9/28 셸 전후 시안 채택(design/screens/shell.html): 고정 GNB · 내비 hover/focus · 사용자 메뉴 · 모바일 메뉴 · 자동 로그아웃 예고 · 학습자 셸 ---------- */
/* 본문 바로가기 — 포커스 받을 때만 보인다 */
.mo-skip{position:absolute;left:var(--mo-space-3);top:-100px;z-index:60;background:var(--mo-dark);color:var(--mo-on-btn);
  padding:var(--mo-space-2) var(--mo-space-3);border-radius:var(--mo-r-sm);font-weight:600;text-decoration:none}
.mo-skip:focus{top:var(--mo-space-3)}

/* GNB 고정 — Rails GNB sticky top-0 z-50 */
.mo-gnb{position:sticky;top:0;z-index:50}
/* 붙은 GNB 가 Shift+Tab 포커스를 가린다(9/29 랜딩 실측 — 같은 원인) — 69(gnb 68 + border 1) + 포커스 링 돌출 4(outline 2 + offset 2).
   UrgentBar 가 그 밑에 붙으면 그 높이(padding 10×2 + 줄 21×줄수)를 더한다 — <834 는 두 줄로 접힌다(9/29 390 실측 62). 넉넉한 값은 여백만 남기고 해가 없다 */
html:has(.mo-gnb){scroll-padding-top:calc(var(--mo-gnb-h) + 1px + 4px)}
html:has(.mo-gnb ~ .mo-urgent){scroll-padding-top:calc(var(--mo-gnb-h) + 1px + 41px + 4px)}
@media (max-width:833px){html:has(.mo-gnb ~ .mo-urgent){scroll-padding-top:calc(var(--mo-gnb-h) + 1px + 62px + 4px)}}
.mo-main:focus{outline:0}   /* 본문 바로가기 대상(tabindex=-1) — 컨트롤이 아니라 링을 안 그린다 */
.mo-gnb__in{gap:var(--mo-space-4)}
.mo-gnb nav a{display:inline-flex;align-items:center}
.mo-gnb nav a:hover{background:var(--mo-bg-alt);color:var(--mo-ink-2)}
.mo-gnb nav a[aria-current="page"]:hover{background:var(--mo-primary-soft);color:var(--mo-primary)}
.mo-gnb a:focus-visible,.mo-gnb button:focus-visible,.mo-sheet a:focus-visible,.mo-sheet button:focus-visible,.mo-um__menu a:focus-visible,.mo-um__menu button:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px}

/* UrgentBar 는 GNB 밑에 붙는다(둘 다 고정) */
.mo-app .mo-urgent{top:calc(var(--mo-gnb-h) + 1px);z-index:40}
.mo-urgent{padding:10px var(--mo-space-5);font-size:14px}

/* 사용자 메뉴 (≥834) — Rails「내 메뉴」: 버튼 border r8 px12 py8 · 메뉴 w200 r8 border py4 · 항목 px16 py8 · shadow-lg */
.mo-um{position:relative}
.mo-um__btn{font:inherit;font-size:14px;font-weight:600;color:var(--mo-ink-2);background:var(--mo-bg);border:1px solid var(--mo-line);
  border-radius:var(--mo-r-sm);height:var(--mo-btn-h);padding:0 var(--mo-space-3);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.mo-um__btn:hover{background:var(--mo-bg-alt)}
.mo-um__btn svg{width:12px;height:12px;flex:none;color:var(--mo-muted)}
.mo-um__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mo-um__menu{position:absolute;right:0;top:calc(100% + var(--mo-space-2));width:240px;background:var(--mo-bg);border:1px solid var(--mo-line);
  border-radius:var(--mo-r-sm);padding:var(--mo-space-1) 0;box-shadow:var(--mo-shadow-pop);z-index:55}
.mo-um__id{padding:var(--mo-space-2) var(--mo-space-4) var(--mo-space-3);border-bottom:1px solid var(--mo-line);margin-bottom:var(--mo-space-1)}
.mo-um__id b{display:block;font-size:14px}
.mo-um__id small{display:block;font-size:13px;color:var(--mo-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-um__role{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--mo-ink-2);background:var(--mo-bg-alt);border-radius:var(--mo-r-pill);padding:2px var(--mo-space-2)}
.mo-um__menu a,.mo-um__menu button{display:block;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--mo-ink-2);background:none;border:0;
  padding:var(--mo-space-2) var(--mo-space-4);text-decoration:none;cursor:pointer}
.mo-um__menu a:hover,.mo-um__menu button:hover{background:var(--mo-bg-alt)}

/* 모바일 메뉴 버튼 (<834) — Rails if-gnb-menu-toggle 44×44 · 글리프 24 */
.mo-menu-btn{display:none;position:relative;width:var(--mo-touch-min);height:var(--mo-touch-min);margin-right:-10px;border:0;background:none;color:var(--mo-ink);
  align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none}
.mo-menu-btn svg{width:24px;height:24px}
.mo-menu-btn .mo-nbadge{position:absolute;top:4px;right:2px;margin:0}

/* 모바일 시트 — Rails mo-menu-sheet: 전면 흰 면 p20 · 항목 h48 16px ink-2 · 구분선 1px m8 */
.mo-sheet{position:fixed;inset:0;z-index:70;background:var(--mo-bg);overflow-y:auto;display:flex;flex-direction:column}
.mo-sheet__top{height:calc(var(--mo-gnb-h) + 1px);border-bottom:1px solid var(--mo-line);display:flex;align-items:center;padding:0 var(--mo-space-5);gap:var(--mo-space-4);flex:none}
.mo-sheet__top .mo-menu-btn{display:inline-flex}
.mo-sheet__body{padding:var(--mo-space-3) var(--mo-space-5) var(--mo-space-8)}
.mo-sheet__org{font-size:13px;color:var(--mo-muted);padding:var(--mo-space-2) 12px}
.mo-sheet a,.mo-sheet__body button{display:flex;align-items:center;width:100%;height:48px;padding:0 12px;font:inherit;font-size:16px;letter-spacing:-.02em;
  color:var(--mo-ink-2);text-decoration:none;background:none;border:0;border-radius:var(--mo-r-sm);cursor:pointer;text-align:left}
.mo-sheet a[aria-current="page"]{color:var(--mo-primary);background:var(--mo-primary-soft);font-weight:600}
.mo-sheet a .mo-nbadge{margin-left:8px}
.mo-sheet hr{border:0;height:1px;background:var(--mo-line);margin:8px 0}
.mo-sheet__id{padding:var(--mo-space-2) 12px var(--mo-space-1)}
.mo-sheet__id b{display:block;font-size:15px}
.mo-sheet__id small{font-size:13px;color:var(--mo-muted)}

/* 세션 만료 예고 — 가운데 카드(로그인 카드 규격 400·r16) */
.mo-dlg{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:var(--mo-space-5);background:var(--mo-scrim)}
.mo-dlg__card{width:100%;max-width:var(--mo-auth-max);background:var(--mo-bg);border-radius:var(--mo-r-lg);padding:var(--mo-space-6)}
.mo-dlg__card h2{font-size:18px;margin:0 0 var(--mo-space-2)}
.mo-dlg__card p{margin:0 0 var(--mo-space-5);color:var(--mo-ink-2);font-size:14px;line-height:1.6}
.mo-dlg__t{font-variant-numeric:tabular-nums;font-weight:700;color:var(--mo-ink)}
.mo-dlg__act{display:flex;gap:var(--mo-space-2);justify-content:flex-end}


/* 학습자 셸 — 관리자 내비 없음 · 다크 허용(html.mo-learner) */
.mo-lgnb .mo-gnb__in{max-width:calc(1280px + 40px)}
.mo-main--learner{max-width:calc(1280px + 40px)}   /* 학습자 본문 폭 — 시안에서는 인라인 style 이었다(9/29 앱 이관 때 클래스로) */
.mo-lgnb__course{font-size:13px;color:var(--mo-muted);padding-left:var(--mo-space-3);border-left:1px solid var(--mo-line);white-space:nowrap}

/* ---------- AppShell 3 — 9/29 앱 이관(S2): 서버가 그린 마크업을 JS 가 열고 닫는다 ---------- */
/* 앱 문서 기본 — 시안 프레임이 인라인으로 주던 값 */
.mo-body{margin:0}
.mo-body .mo-app{min-height:100vh}
/* 인증 화면(S5) — 바탕(mo-bg-alt)이 화면 아래까지. 시안 프레임(auth_frame.html)은 인라인으로 같은 값을 준다 */
.mo-body .mo-auth{min-height:100vh}
/* 닫힌 메뉴·시트·예고 창은 DOM 에 남고 hidden 으로 감춘다. display 를 준 요소는 UA 의 [hidden] 규칙을 덮어쓰므로 다시 적는다 */
.mo-um__menu[hidden],.mo-sheet[hidden],.mo-dlg[hidden]{display:none}
/* S2b — 메뉴 서랍도 닫힌 채로 실린다. 막 · 하위 항목 · 접은 사이드바의 하위 메뉴는 display 를 주지 않아 UA 규칙이 그대로 듣지만 한 줄에 같이 적는다 */
.mo-navdrawer[hidden],.mo-navscrim[hidden],.mo-nsub[hidden],.mo-fly[hidden]{display:none}
/* 모바일 메뉴가 열린 동안 뒤 문서를 굴리지 않는다 */
.mo-lock{overflow:hidden}
/* 로그아웃은 form(button_to) 안의 버튼이다 — form 이 메뉴·시트의 줄 배치를 흐트러뜨리지 않게 */
.mo-um__menu form,.mo-sheet__body form,.mo-dlg__act form{margin:0}
/* S2b — 메뉴 서랍의 로그아웃도 form 안의 버튼이다 */
.mo-side__acts form{margin:0}
/* S2b — <834 예고 창의 버튼 둘은 폭을 반씩 나눈다(.mo-dlg__act .mo-btn{flex:1}). 앱의 「로그아웃」은 form(button_to) 안에 있어 form 상자를 없애고
   버튼이 시안처럼 .mo-dlg__act 의 직접 flex 항목이 되게 한다. form 에 flex:1 을 주는 방식은 두 버튼 폭이 130·164 로 갈렸다(9/29 실측) */
.mo-dlg__act form{display:contents}
/* ImpactFlow 로고 밝은 판·어두운 판 — 서버는 화면 테마(prefers-color-scheme)를 모른다. 둘 다 싣고 CSS 가 고른다(fill 변경 금지 — Brand README) */
.mo-lk .mo-lk__if--dark{display:none}   /* 뒤에 오는 Brand 의 .mo-lk__if{display:block} 에 덮이지 않게 한 단 높인다 */
html.mo-learner[data-theme="dark"] .mo-lk__if--light{display:none}
html.mo-learner[data-theme="dark"] .mo-lk__if--dark{display:block}
@media (prefers-color-scheme:dark){
  html.mo-learner:not([data-theme="light"]) .mo-lk__if--light{display:none}
  html.mo-learner:not([data-theme="light"]) .mo-lk__if--dark{display:block}
}
@media (max-width:345px){html.mo-learner .mo-lk__if--dark{display:none}}

@media (max-width:833px){
  .mo-um{display:none}
  .mo-menu-btn{display:inline-flex}
  .mo-urgent{padding:10px var(--mo-space-5);font-size:13px}
  .mo-lgnb__course{display:none}
}


/* ---------- KpiRow ---------- */
.mo-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:var(--mo-space-5)}
.mo-kpi>div{background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:14px var(--mo-space-4)}
.mo-kpi small{display:block;font-size:13px;color:var(--mo-muted)}
.mo-kpi b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mo-kpi b span{font-size:13px;color:var(--mo-faint);font-weight:500;margin-left:2px}
.mo-kpi .is-warn{border-color:var(--mo-warn-dot);box-shadow:inset 3px 0 0 var(--mo-warn-dot)}
.mo-kpi .is-warn b{color:var(--mo-warn)}
.mo-kpi .is-warn b::before{content:"! "}
@media (min-width:834px){.mo-kpi{grid-template-columns:repeat(4,1fr);gap:var(--mo-space-3)}}

/* ---------- DataTable (+ <834 카드 목록) ---------- */
.mo-tbl{background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);overflow:auto}
.mo-tbl table{width:100%;border-collapse:collapse;font-size:14px}
.mo-tbl th{padding:var(--mo-space-3) var(--mo-space-4);text-align:left;color:var(--mo-muted);font-weight:600;background:var(--mo-bg-alt);border-bottom:1px solid var(--mo-line);white-space:nowrap}
.mo-tbl td{padding:var(--mo-space-3) var(--mo-space-4);border-bottom:1px solid var(--mo-line);vertical-align:middle}
.mo-tbl tr:last-child td{border-bottom:0}
.mo-tbl tbody tr:hover td{background:var(--mo-bg-alt)}
.mo-tbl tbody tr[aria-selected="true"] td{background:var(--mo-primary-soft)}
.mo-tbl .mo-num{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--mo-ink-2)}
.mo-num{font-variant-numeric:tabular-nums}
.mo-who b{display:block;font-weight:600}
.mo-who small{color:var(--mo-faint);font-size:12px}
.mo-cards{display:none;list-style:none;margin:0;padding:0;gap:10px}
.mo-cards li{background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:14px var(--mo-space-4)}
.mo-cards__top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.mo-cards__meta{margin-top:8px;font-size:12px;color:var(--mo-muted);display:flex;flex-wrap:wrap;gap:2px var(--mo-space-3)}
@media (max-width:833px){.mo-tbl--responsive{display:none}.mo-cards{display:grid}}

/* ---------- Alert (주의·안내) ---------- */
.mo-alert{border-radius:var(--mo-r-sm);padding:10px var(--mo-space-3);font-size:13px;margin:0 0 14px}
.mo-alert--warn{background:var(--mo-warn-soft);color:var(--mo-warn)}
.mo-alert--info{background:var(--mo-primary-soft);color:var(--mo-ink-2)}
.mo-alert--panel{border:1px solid var(--mo-warn);background:var(--mo-warn-soft);color:var(--mo-ink-2);padding:var(--mo-space-3) 14px}
.mo-alert--panel b{color:var(--mo-warn)}

/* ---------- Toast ---------- */
.mo-toast{display:inline-flex;gap:8px;align-items:center;background:var(--mo-dark);color:var(--mo-on-btn);border-radius:var(--mo-r-sm);padding:10px 14px;font-size:13px}

/* ---------- EmptyState ---------- */
.mo-empty{background:var(--mo-bg);border:1px dashed var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-10) var(--mo-space-5);text-align:center}
.mo-empty h3{margin:0 0 4px;font-size:18px}
.mo-empty p{margin:0 0 14px;color:var(--mo-muted);font-size:14px}

/* ---------- Skeleton ---------- */
.mo-sk{background:linear-gradient(90deg,var(--mo-bg-alt-strong) 25%,var(--mo-bg-alt) 50%,var(--mo-bg-alt-strong) 75%);background-size:200% 100%;
  animation:mo-sk 1.2s infinite linear;border-radius:var(--mo-r-sm)}
@keyframes mo-sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.mo-sk{animation:none}}

/* ---------- Drawer ---------- */
.mo-scrim{position:fixed;inset:0;background:var(--mo-scrim)}
.mo-drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--mo-drawer-max),100%);background:var(--mo-bg);border-left:1px solid var(--mo-line);
  box-shadow:var(--mo-shadow-drawer);padding:var(--mo-space-5);overflow:auto}
.mo-drawer__hd{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.mo-drawer__hd h2{margin:0;font-size:18px}
.mo-drawer__hd small{display:block;color:var(--mo-faint);font-size:12px}
.mo-drawer__hd span{flex:1}

/* ---------- AuthCard (로그인·초대 수락·재설정·2단계) ---------- */
.mo-auth{background:var(--mo-bg-alt);color:var(--mo-ink);font-size:14px;line-height:1.5;display:flex;justify-content:center;padding:48px var(--mo-space-4)}
.mo-auth__box{width:100%;max-width:var(--mo-auth-max);background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-lg);padding:28px var(--mo-space-6)}
.mo-auth__ten{font-size:13px;color:var(--mo-muted);margin:4px 0 var(--mo-space-5)}
.mo-auth h1{font-size:22px;margin:0 0 6px;line-height:1.3}
.mo-auth__lead{font-size:14px;color:var(--mo-muted);margin:0 0 var(--mo-space-5)}
.mo-auth__alt{display:flex;justify-content:space-between;margin-top:14px;font-size:13px}
.mo-auth__alt a{color:var(--mo-primary);text-decoration:none}
@media (min-width:834px){.mo-auth{padding-top:96px}}
/* AuthCard 2 — 9/28 인증 전후 시안 채택(design/screens/auth.html): 세로 위 고정 · 보기 토글 · <834 링크 44 · 단계 · 복구 코드 · 약관 푸터 */
.mo-auth{flex-direction:column;align-items:center;justify-content:flex-start}
.mo-auth__box .mo-lk{margin-bottom:2px}
.mo-pw{position:relative}
.mo-pw .mo-input{padding-right:64px}
.mo-pw__tg{position:absolute;right:2px;top:2px;height:calc(var(--mo-input-h) - 4px);min-width:var(--mo-touch-min);padding:0 var(--mo-space-3);border:0;background:none;
  font:inherit;font-size:13px;font-weight:600;color:var(--mo-primary);cursor:pointer;border-radius:var(--mo-r-sm)}
.mo-pw__tg:focus-visible,.mo-auth a:focus-visible,.mo-check input:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px}
.mo-auth__note{font-size:13px;color:var(--mo-muted);margin:14px 0 0;text-align:center}
.mo-auth__alt{flex-wrap:wrap;gap:8px}
/* <834 터치 44 — Rails 같은 처리(min-height 44 · margin-block -11px, 줄 간격은 그대로) */
@media (max-width:833px){.mo-auth__alt a{display:inline-flex;align-items:center;min-height:var(--mo-touch-min);margin-block:-11px}.mo-row2 .mo-btn{min-height:var(--mo-touch-min)}}
.mo-auth__ft{max-width:var(--mo-auth-max);width:100%;margin:var(--mo-space-5) auto 0;display:flex;justify-content:center;gap:var(--mo-space-3);font-size:12px;color:var(--mo-muted)}
.mo-auth__ft a{color:var(--mo-muted)}
.mo-step{font-size:12px;font-weight:700;color:var(--mo-muted);margin:0 0 4px;font-variant-numeric:tabular-nums}
.mo-qr{width:152px;height:152px;margin:0 auto var(--mo-space-3);border:1px dashed var(--mo-line);border-radius:var(--mo-r-sm);display:flex;align-items:center;justify-content:center;color:var(--mo-faint);font-size:12px}
.mo-check{display:flex;gap:var(--mo-space-2);align-items:flex-start;font-size:14px;color:var(--mo-ink-2);margin:var(--mo-space-4) 0;cursor:pointer}
.mo-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--mo-btn);flex:none}
.mo-row2{display:flex;gap:var(--mo-space-2);margin-top:var(--mo-space-3)}.mo-row2 .mo-btn{flex:1}
.mo-code{font-family:var(--mo-font-mono);letter-spacing:.08em}
.mo-done{font-size:14px;color:var(--mo-ink-2);margin:0 0 var(--mo-space-5);line-height:1.6}
/* AuthCard 3 — S6 2단계 등록(앱): 실제 QR(실선 테두리 · 둘레 여백 = 조용한 띠) · 직접 입력 키 줄 · <834 확인란 누르는 면 44(프로토타입 proto.css 값) */
.mo-qr--code{border-style:solid;padding:var(--mo-space-2);background:var(--mo-bg);color:var(--mo-ink)}
.mo-qr--code svg{display:block;width:100%;height:100%}
.mo-auth__key{text-align:center}
.mo-auth .mo-secret{margin-bottom:var(--mo-space-4)}
@media (max-width:833px){.mo-auth .mo-check{min-height:var(--mo-touch-min);align-items:center}}


/* ---------- Brand (무니 + 워드마크 + by + ImpactFlow) — 원천: 문의온다 랜딩 .brand/.wordmark · 에버인 제안서 lockup ---------- */
.mo-lk{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--mo-ink)}
.mo-lk__muni{width:24px;height:26px;display:block;flex:none}
.mo-lk__wm{font-weight:900;font-size:17px;letter-spacing:-.045em;line-height:1;position:relative;padding-right:11px}
.mo-lk__wm::after{content:"";position:absolute;right:0;top:1px;width:7px;height:7px;background:var(--mo-btn);border-radius:50% 50% 50% 2px}
.mo-lk__by{font-size:11px;font-weight:600;color:var(--mo-muted)}
.mo-lk__if{height:13px;width:auto;display:block}
.mo-lk--lg .mo-lk__muni{width:26px;height:28px}.mo-lk--lg .mo-lk__wm{font-size:22px;padding-right:13px}
.mo-lk--lg .mo-lk__wm::after{width:9px;height:9px}.mo-lk--lg .mo-lk__by{font-size:12px}
.mo-lk--live .mo-lk__wm::after{animation:mo-ping var(--mo-dur-ping) ease-in-out infinite}
@keyframes mo-ping{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
@media (max-width:345px){.mo-lk__by,.mo-lk__if{display:none}}
/* 새 문의 도착 = 무니 반응(9/28 채택). 앱이 도착 이벤트마다 .is-new 를 뗐다 붙인다(1회 재생, 상시 반복 금지). */
.mo-lk__muni{transform-origin:50% 100%}
.mo-lk.is-new .mo-lk__muni{animation:mo-hop-sm var(--mo-dur-hop-sm) ease-out 1}
@keyframes mo-hop-sm{0%,100%{transform:none}35%{transform:translateY(-5px)}60%{transform:none}80%{transform:translateY(-2px)}}
.mo-mascot{position:relative;width:120px;height:130px}
.mo-mascot svg{width:100%;height:100%;display:block;position:relative;z-index:1}
.mo-mascot__puff{position:absolute;left:50%;top:60%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,var(--mo-mesh-1) 0,var(--mo-mesh-2) 45%,transparent 70%)}
.mo-mascot.is-new svg{animation:mo-hop var(--mo-dur-hop) var(--mo-ease-hop) 1}
.mo-mascot.is-new .mo-mascot__puff{animation:mo-puff var(--mo-dur-puff) ease-out .25s 1 both}
@keyframes mo-hop{0%{transform:none}12%{transform:translateY(0) scale(1.08,.9)}30%{transform:translateY(-22px) scale(.96,1.05)}
  45%{transform:translateY(0) scale(1.06,.93)}60%{transform:translateY(-12px) scale(.98,1.03)}75%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}
@keyframes mo-puff{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
@media (max-width:833px){.mo-mascot{width:72px;height:78px}}
@media (prefers-reduced-motion:reduce){.mo-lk--live .mo-lk__wm::after,.mo-lk.is-new .mo-lk__muni,.mo-mascot.is-new svg,.mo-mascot.is-new .mo-mascot__puff{animation:none}}

/* ---------- UrgentBar (응대 전 문의가 있을 때만) ---------- */
.mo-urgent{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;background:var(--mo-dark);color:var(--mo-on-btn);
  padding:10px var(--mo-space-5);font-size:14px;font-weight:600}
.mo-urgent__dot{width:8px;height:8px;border-radius:50%;background:var(--mo-warn-dot);box-shadow:0 0 0 3px var(--mo-warn-ring);flex:none}
.mo-urgent__t{font-variant-numeric:tabular-nums}
.mo-urgent__sp{flex:1}
.mo-urgent a{color:inherit;font-weight:700;white-space:nowrap}

/* ---------- Mesh (파스텔 면 — 히어로·매출 카드 머리·빈 상태만. 표·폼 바탕 금지) ---------- */
.mo-mesh{background:
  radial-gradient(60% 80% at 8% 10%,var(--mo-mesh-1) 0,transparent 70%),radial-gradient(55% 70% at 92% 18%,var(--mo-mesh-2) 0,transparent 70%),
  radial-gradient(60% 80% at 80% 95%,var(--mo-mesh-3) 0,transparent 70%),radial-gradient(55% 75% at 18% 92%,var(--mo-mesh-4) 0,transparent 70%),var(--mo-mesh-base)}
.mo-mesh small,.mo-mesh p{color:var(--mo-ink-2)}

/* ---------- Ledger (시그니처: 접수 → 첫 응대·경과 → 금액 한 줄) ---------- */
.mo-led{background:var(--mo-glass);backdrop-filter:blur(6px);border:1px solid var(--mo-line-soft);border-radius:var(--mo-r-lg);overflow:hidden}
.mo-led__hd{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--mo-line);font-size:13px;color:var(--mo-ink-2)}
.mo-led__hd b{color:var(--mo-ink);font-size:13px}
.mo-led__row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--mo-line)}
.mo-led__row:last-of-type{border-bottom:0}
.mo-led__who{font-weight:600;font-size:14px;color:var(--mo-ink)}
.mo-led__path{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;color:var(--mo-muted)}
.mo-led__path time{font-variant-numeric:tabular-nums;color:var(--mo-ink-2)}
.mo-led__path i{font-style:normal;color:var(--mo-faint)}
.mo-led__amt{font-weight:800;font-size:16px;color:var(--mo-rev);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;text-align:right}
.mo-led__amt--wait{color:var(--mo-warn);font-weight:700;font-size:13px}
.mo-led__amt--wait::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mo-warn-dot);margin-right:5px;vertical-align:1px}
.mo-led__ft{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-top:1px solid var(--mo-line)}
.mo-led__ft small{font-size:13px;color:var(--mo-muted)}
.mo-led__ft b{font-size:22px;font-weight:800;color:var(--mo-rev);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- Revenue (매출 카드 + 막대 — 그래프는 mo-rev-fill 한 색, 라벨은 최고점만) ---------- */
.mo-rev{border:1px solid var(--mo-line-soft);border-radius:var(--mo-r-sm);padding:18px var(--mo-space-4);margin-bottom:var(--mo-space-4)}
.mo-rev small{display:block;font-size:13px}
.mo-rev__n{font-size:32px;font-weight:800;color:var(--mo-rev);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2;margin:4px 0}
.mo-rev__n span{font-size:15px;font-weight:600;margin-left:2px}
.mo-rev__up{font-size:13px;color:var(--mo-ink-2)}
.mo-bars{display:flex;align-items:flex-end;gap:2px;height:112px;margin-top:16px;border-bottom:1px solid var(--mo-line-soft)}
.mo-bars div{flex:1;background:var(--mo-rev-fill);border-radius:4px 4px 0 0;position:relative;margin:0 4px}
.mo-bars div span{position:absolute;top:-18px;left:-10px;right:-10px;text-align:center;font-size:12px;color:var(--mo-ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.mo-bars__x{display:flex;gap:2px;font-size:12px;color:var(--mo-faint);margin-top:4px}.mo-bars__x span{flex:1;text-align:center}

/* ==================== P0 문의 화면 — 9/29 시안 3차 채택(design/screens/p0.html) ====================
   1차(문의 목록·상세·확인할 메일·연동 현황·수동 개통) → 2차(사이드바 셸·보기 전환·칸반) → 3차(되돌리기·부가세·표시 기간) 순서로 얹는다.
   순서가 곧 우선순위다 — 뒤 절이 앞 절 값을 덮는 곳이 있어 절 순서를 바꾸지 않는다. 시안용 p0.css·p0v2.css·p0v3.css 는 이 절로 옮기고 지웠다(두 벌 금지). */

/* ---------- Leads — P0 1차 ---------- */
/* ---------- Tabs (「문의」 안 하위 화면 3개) ---------- */
.mo-tabs{display:flex;gap:var(--mo-space-1);border-bottom:1px solid var(--mo-line);margin:0 0 var(--mo-space-5);overflow-x:auto}
.mo-tabs a{display:inline-flex;align-items:center;gap:6px;height:var(--mo-touch-min);padding:0 var(--mo-space-3);font-size:14px;font-weight:600;
  color:var(--mo-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.mo-tabs a:hover{color:var(--mo-ink-2)}
.mo-tabs a[aria-current="page"]{color:var(--mo-primary);border-bottom-color:var(--mo-primary)}
.mo-tabs a:focus-visible{outline:2px solid var(--mo-primary);outline-offset:-2px}
.mo-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--mo-bg-alt-strong);color:var(--mo-ink-2);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- 문의 상태 배지 (StatusPill 확장 — 모양으로 구분, 신호등 3색 금지) ---------- */
.mo-pill--wait{background:var(--mo-warn-soft);color:var(--mo-warn)}
.mo-pill--wait::before{background:var(--mo-warn-dot)}
.mo-pill--closed{background:var(--mo-bg);color:var(--mo-muted);box-shadow:inset 0 0 0 1px var(--mo-line)}
.mo-pill--closed::before{content:"✕";width:auto;height:auto;background:none;border-radius:0;font-size:11px}

/* ---------- 미측정 · 경과 ---------- */
.mo-unm{color:var(--mo-muted);font-size:13px;text-decoration:underline dashed var(--mo-faint);text-underline-offset:3px}
.mo-elapsed{color:var(--mo-warn);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-elapsed::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mo-warn-dot);margin-right:5px;vertical-align:1px}
.mo-sub{display:block;font-size:12px;color:var(--mo-muted)}

/* ---------- 목록 도구 줄 · 예시 표기 ---------- */
.mo-bar{display:flex;flex-wrap:wrap;gap:var(--mo-space-2) var(--mo-space-4);align-items:center;margin-bottom:var(--mo-space-3)}
.mo-bar__sp{flex:1}
.mo-demo{font-size:12px;color:var(--mo-muted)}
.mo-lead{font-size:13px;color:var(--mo-muted);margin:0 0 var(--mo-space-4);max-width:720px}

/* ---------- 문의 표 ---------- */
.mo-tbl--leads table{table-layout:fixed;min-width:760px}
.mo-tbl--leads tbody tr{cursor:pointer}
.mo-tbl a.mo-rowlink{display:block;color:inherit;text-decoration:none;font-weight:600}
.mo-tbl a.mo-rowlink:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px;border-radius:2px}
.mo-sum{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mo-cards li>a{display:block;color:inherit;text-decoration:none;margin:-14px calc(var(--mo-space-4) * -1);padding:14px var(--mo-space-4);border-radius:var(--mo-r-sm)}
.mo-cards li>a:focus-visible{outline:2px solid var(--mo-primary);outline-offset:-2px}
.mo-cards__sum{margin:6px 0 0;font-size:14px;color:var(--mo-ink-2)}
.mo-cards__act{display:flex;flex-wrap:wrap;gap:var(--mo-space-2);margin-top:var(--mo-space-3)}
.mo-cards__act .mo-btn{flex:1}
.mo-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ---------- 드로어 층 — GNB 가 sticky z50 이 된 뒤(9/28 셸) 드로어 머리가 GNB 밑에 깔렸다(9/29 실측). 시트 70 · 예고 창 80 보다 아래 ---------- */
.mo-scrim{z-index:60}
.mo-drawer{z-index:61}

/* ---------- 드로어 안 ---------- */
.mo-x{width:var(--mo-touch-min);height:var(--mo-touch-min);margin:-10px -10px 0 0;border:0;background:none;color:var(--mo-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;border-radius:var(--mo-r-sm)}
.mo-x svg{width:24px;height:24px}
.mo-drawer__hd .mo-pill{flex:none}   /* Drawer 의 `.mo-drawer__hd span{flex:1}` 이 배지까지 늘린다(9/29 실측) */
.mo-x:focus-visible{outline:2px solid var(--mo-primary);outline-offset:-2px}
.mo-drawer h3,.mo-sec h3{font-size:13px;color:var(--mo-muted);font-weight:600;margin:var(--mo-space-6) 0 var(--mo-space-2)}
.mo-dl{display:grid;grid-template-columns:88px 1fr;gap:6px var(--mo-space-3);margin:0;font-size:14px}
.mo-dl dt{color:var(--mo-muted);font-size:13px}
.mo-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mo-dl a{color:var(--mo-primary);text-decoration:none}
.mo-dl .mo-sub{display:inline;margin-left:6px}
.mo-quote{background:var(--mo-bg-alt);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-3);font-size:14px;color:var(--mo-ink-2);margin:0;white-space:pre-line}
.mo-seg--st button{font-size:13px}
.mo-memo textarea{display:block;width:100%;min-height:72px;border-radius:var(--mo-r-sm);padding:var(--mo-space-3) var(--mo-space-4);background:var(--mo-bg-alt);
  border:1px solid var(--mo-line);font:inherit;font-size:15px;color:var(--mo-ink);resize:vertical;margin-bottom:var(--mo-space-2)}
.mo-memo textarea:focus{outline:none;border-color:var(--mo-primary);background:var(--mo-bg)}
.mo-memo{display:flex;flex-direction:column;align-items:flex-end}

/* ---------- Timeline (문의 한 건의 기록 — 원장 이벤트를 시간순으로) ---------- */
.mo-tl{list-style:none;margin:0;padding:0}
.mo-tl li{position:relative;padding:0 0 var(--mo-space-4) var(--mo-space-6)}
.mo-tl li::before{content:"";position:absolute;left:5px;top:18px;bottom:-2px;width:1px;background:var(--mo-line)}
.mo-tl li:last-child{padding-bottom:0}
.mo-tl li:last-child::before{display:none}
.mo-tl__dot{position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--mo-bg);box-shadow:inset 0 0 0 2px var(--mo-faint)}
.mo-tl .is-in .mo-tl__dot{background:var(--mo-ink-2);box-shadow:none}
.mo-tl .is-us .mo-tl__dot{background:var(--mo-primary);box-shadow:none}
.mo-tl .is-sys .mo-tl__dot{border-radius:2px}
.mo-tl .is-warn .mo-tl__dot{background:var(--mo-warn-dot);box-shadow:none;border-radius:2px}
.mo-tl__hd{display:flex;flex-wrap:wrap;gap:2px var(--mo-space-2);align-items:baseline}
.mo-tl__hd b{font-size:14px}
.mo-tl__hd time,.mo-tl__who{font-size:12px;color:var(--mo-muted);font-variant-numeric:tabular-nums}
.mo-tl p{margin:2px 0 0;font-size:14px;color:var(--mo-ink-2)}
.mo-tl__late{font-size:12px;color:var(--mo-warn)}

/* ---------- 연결 후보 고르기 ---------- */
.mo-cand{display:grid;gap:var(--mo-space-1);margin:var(--mo-space-2) 0 0;padding:0;border:0}
.mo-cand legend{font-size:12px;color:var(--mo-muted);padding:0;margin-bottom:2px}
.mo-cand label{display:flex;gap:var(--mo-space-2);align-items:center;min-height:var(--mo-touch-min);padding:0 var(--mo-space-3);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);font-size:13px;cursor:pointer;background:var(--mo-bg)}
.mo-cand input{width:18px;height:18px;accent-color:var(--mo-btn);flex:none;margin:0}

/* ---------- 묶음 제목 (연동 현황) ---------- */
.mo-sec{margin-bottom:var(--mo-space-8)}
.mo-sec h2{font-size:18px;line-height:1.3;margin:0 0 2px}
.mo-sec>p{font-size:13px;color:var(--mo-muted);margin:0 0 var(--mo-space-3)}

/* ---------- 폼 (개통) ---------- */
.mo-form{max-width:var(--mo-form-max);background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-5)}
.mo-fs{border:0;padding:0;margin:0 0 var(--mo-space-4);min-width:0}
.mo-fs legend{font-size:13px;font-weight:600;color:var(--mo-ink-2);padding:0;margin:0 0 6px}
.mo-form .mo-check{margin:0;min-height:var(--mo-touch-min);align-items:center}
.mo-form .mo-check input{margin:0}
.mo-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--mo-space-3)}
.mo-cols .mo-field{min-width:0}
.mo-form__act{display:flex;gap:var(--mo-space-2);justify-content:flex-end;margin-top:var(--mo-space-5)}
.mo-dlg__card .mo-dl{margin-bottom:var(--mo-space-5)}
.mo-toast-wrap{position:fixed;left:0;right:0;bottom:var(--mo-space-6);z-index:60;display:flex;justify-content:center;padding:0 var(--mo-space-4);pointer-events:none}

/* ---------- 운영자 GNB (임팩트플로우 운영 화면 — 고객사 화면과 헷갈리지 않게 어두운 띠) ---------- */
.mo-gnb--ops{background:var(--mo-dark);border-bottom-color:var(--mo-dark)}
.mo-gnb--ops .mo-lk{color:var(--mo-on-btn)}
.mo-gnb--ops .mo-lk__by,.mo-gnb--ops .mo-org{color:var(--mo-on-dark-muted)}
.mo-gnb--ops .mo-org{border-left-color:var(--mo-muted)}
.mo-gnb--ops nav a{color:var(--mo-on-dark-muted);border-radius:0}
.mo-gnb--ops nav a:hover{background:none;color:var(--mo-on-btn)}
.mo-gnb--ops nav a[aria-current="page"],.mo-gnb--ops nav a[aria-current="page"]:hover{background:none;color:var(--mo-on-btn);box-shadow:inset 0 -2px 0 var(--mo-primary-on-dark)}
.mo-gnb--ops .mo-um__btn{background:none;border-color:var(--mo-muted);color:var(--mo-on-btn)}
.mo-gnb--ops .mo-um__btn:hover{background:none;border-color:var(--mo-on-dark-muted)}
.mo-gnb--ops .mo-um__btn svg{color:var(--mo-on-dark-muted)}
.mo-gnb--ops .mo-menu-btn{color:var(--mo-on-btn)}
.mo-gnb--ops a:focus-visible,.mo-gnb--ops button:focus-visible{outline-color:var(--mo-primary-on-dark)}

/* ---------- <834: 누르는 면 44 ---------- */
@media (max-width:833px){
  .mo-app .mo-btn:not(.mo-btn--lg),.mo-drawer .mo-btn,.mo-dlg .mo-btn{min-height:var(--mo-touch-min);height:auto;border-radius:var(--mo-r-md)}
  .mo-chip{height:var(--mo-touch-min);padding:0 var(--mo-space-4)}
  .mo-seg button,.mo-seg label{height:var(--mo-touch-min)}
  .mo-dlg__act .mo-btn,.mo-form__act .mo-btn{flex:1}
  .mo-dl{grid-template-columns:76px 1fr}
  .mo-dl a{display:inline-flex;align-items:center;min-height:var(--mo-touch-min);margin-block:-11px}
}

/* ---------- AppShell 3 · ViewSwitch · Kanban — P0 2차 (크기 토큰 6 = tokens.json size) ---------- */
/* ---------- AppShell 3: 좌측 사이드바 ---------- */
.mo-app--side{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.mo-app--side>.mo-col{min-width:0;display:flex;flex-direction:column}
.mo-app--side .mo-main{width:100%}
.mo-side{display:none}
.mo-side__hd{height:calc(var(--mo-gnb-h) + 1px);border-bottom:1px solid var(--mo-line);display:flex;align-items:center;padding:0 var(--mo-space-4);flex:none;gap:var(--mo-space-2)}
/* 락업 2행(9/30 hayden — by ImpactFlow 는 바닥이 아니라 락업 옆): 폭 240 에 한 줄로는 안 들어간다(락업 99 + by 14 + 로고 74 + 간격 16 + 접기 36 = 247 > 208).
   1행 무니 + 워드마크, 2행 by + 로고를 워드마크 아래 정렬. 서랍 머리도 같은 부분이라 같이 바뀐다 */
.mo-side__hd .mo-lk{display:grid;grid-template-columns:24px auto auto;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center;justify-content:start}
.mo-side__hd .mo-lk__muni{grid-row:1/3;grid-column:1}
.mo-side__hd .mo-lk__wm{grid-row:1;grid-column:2/4;justify-self:start}
.mo-side__hd .mo-lk__by{grid-row:2;grid-column:2;justify-self:start}
.mo-side__hd .mo-lk__if{grid-row:2;grid-column:3;height:12px}
.mo-side__org{padding:var(--mo-space-3) var(--mo-space-4) var(--mo-space-2);font-size:13px;color:var(--mo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.mo-side__nav{flex:1;overflow-y:auto;padding:0 var(--mo-space-2) var(--mo-space-4)}
.mo-side__grp{margin-top:var(--mo-space-4)}
.mo-side__grp:first-child{margin-top:0}
/* 제목 없는 묶음은 선으로 가른다(접점박사 .navgap 과 같은 방식) */
.mo-side__grp + .mo-side__grp:not(:has(.mo-side__gt)){margin-top:var(--mo-space-2);padding-top:var(--mo-space-2);border-top:1px solid var(--mo-line)}
.mo-side__gt{font-size:12px;font-weight:600;color:var(--mo-faint);padding:0 var(--mo-space-3);margin:0 0 var(--mo-space-1);height:24px;display:flex;align-items:center}
.mo-side ul,.mo-navdrawer ul,.mo-fly ul{list-style:none;margin:0;padding:0}
.mo-nav{display:flex;align-items:center;gap:10px;width:100%;height:var(--mo-nav-h);padding:0 var(--mo-space-3);border:0;background:none;border-radius:var(--mo-r-sm);
  font:inherit;font-size:14px;font-weight:600;color:var(--mo-muted);text-decoration:none;text-align:left;cursor:pointer;white-space:nowrap}
.mo-nav svg.mo-ic{width:20px;height:20px;flex:none}
.mo-nav__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mo-nav__chev{width:12px;height:12px;flex:none;color:var(--mo-faint);transition:transform .15s}
.mo-nav[aria-expanded="true"] .mo-nav__chev{transform:rotate(180deg)}
.mo-nav:hover{background:var(--mo-bg-alt);color:var(--mo-ink-2)}
.mo-nav[aria-current="page"],.mo-nav[aria-current="page"]:hover{color:var(--mo-primary);background:var(--mo-primary-soft)}
.mo-nav.is-in{color:var(--mo-ink)}                         /* 현재 화면이 이 묶음 안에 있다 — 부모는 글자만 짙게, 면은 하위 항목에 */
.mo-nav:focus-visible,.mo-side button:focus-visible,.mo-side a:focus-visible{outline:2px solid var(--mo-primary);outline-offset:-2px}
.mo-nav .mo-nbadge{margin-left:0}
/* 하위 메뉴는 .mo-nsub — 1차 p0.css 의 .mo-sub(둘째 줄 글)와 이름이 겹치지 않게 */
.mo-nsub{margin:2px 0 var(--mo-space-1)}
.mo-nsub .mo-nav{height:36px;padding-left:42px;font-size:13px;font-weight:500}   /* 42 = 안쪽 12 + 아이콘 20 + 간격 10 — 부모 글자와 왼쪽 맞춤 */
.mo-nsub .mo-nav[aria-current="page"]{font-weight:600}
.mo-side__ft{flex:none;border-top:1px solid var(--mo-line);padding:var(--mo-space-2)}
.mo-side__user{position:relative}
.mo-side__user .mo-nav{height:48px}
.mo-side__user b{display:block;font-size:14px;color:var(--mo-ink);line-height:1.3}
.mo-side__user small{display:block;font-size:12px;color:var(--mo-muted);font-weight:500;line-height:1.3}
.mo-side__user .mo-um__menu{left:0;right:auto;top:auto;bottom:calc(100% + var(--mo-space-2));width:calc(var(--mo-side-w) - var(--mo-space-4))}
.mo-side__tg{width:var(--mo-btn-h);height:var(--mo-btn-h);margin-left:auto;border:0;background:none;color:var(--mo-muted);border-radius:var(--mo-r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.mo-side__tg:hover{background:var(--mo-bg-alt);color:var(--mo-ink-2)}
.mo-side__tg svg{width:20px;height:20px}

/* 상단 바(<1280) — 9/28 채택 GNB 를 그대로 쓴다. 내비·조직명·사용자 메뉴는 메뉴 안으로 */
.mo-app--side .mo-gnb nav,.mo-app--side .mo-gnb .mo-org,.mo-app--side .mo-gnb .mo-um{display:none}
.mo-app--side .mo-gnb .mo-menu-btn{display:inline-flex}
.mo-app--side .mo-gnb__in{max-width:none}
.mo-app--side .mo-main{max-width:none;margin:0}

/* 메뉴 서랍(834~1279) — 왼쪽에서 나온다. <834 는 9/28 채택 전면 시트 그대로 */
.mo-navdrawer{position:fixed;inset:0 auto 0 0;z-index:70;width:min(320px,100%);background:var(--mo-bg);border-right:1px solid var(--mo-line);
  box-shadow:var(--mo-shadow-pop);display:flex;flex-direction:column}
.mo-navscrim{position:fixed;inset:0;z-index:69;background:var(--mo-scrim)}
.mo-navdrawer .mo-side__hd{justify-content:space-between}
.mo-navdrawer .mo-menu-btn{display:inline-flex}
.mo-navdrawer .mo-nav{height:48px;font-size:16px;letter-spacing:-.02em}
.mo-navdrawer .mo-nsub .mo-nav{height:var(--mo-touch-min);font-size:15px;padding-left:42px}
.mo-navdrawer .mo-side__user .mo-nav{height:56px}
.mo-navdrawer .mo-side__acts{display:grid;gap:2px;padding:0 0 var(--mo-space-1)}
.mo-navdrawer .mo-side__acts .mo-nav{font-size:15px;font-weight:500;padding-left:var(--mo-space-3)}
@media (max-width:833px){.mo-navdrawer{width:100%;border-right:0;box-shadow:none}.mo-navscrim{display:none}}

@media (min-width:1280px){
  .mo-app--side{grid-template-columns:var(--mo-side-w) minmax(0,1fr)}
  .mo-app--side.is-rail{grid-template-columns:var(--mo-rail-w) minmax(0,1fr)}
  .mo-side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;background:var(--mo-bg);border-right:1px solid var(--mo-line);z-index:45}
  .mo-app--side .mo-gnb{display:none}
  .mo-app--side .mo-main{max-width:calc(var(--mo-container) + 40px);margin:0 auto}
  .mo-app--side .mo-main--wide{max-width:none}             /* 칸반은 본문 폭 제한을 풀어 열을 넓힌다 */
  .mo-app--side .mo-urgent{top:0}                          /* 상단 바가 없다 — 긴급 바가 본문 열 맨 위에 붙는다 */
  html:has(.mo-app--side){scroll-padding-top:4px}
  html:has(.mo-app--side .mo-urgent){scroll-padding-top:calc(41px + 4px)}
  .mo-navdrawer,.mo-navscrim{display:none}

  /* 접은 사이드바(레일) — 아이콘만. 하위 항목은 누르면 옆으로 펼친다 */
  .is-rail .mo-side__hd{padding:0;justify-content:center}
  .is-rail .mo-side__hd .mo-lk{display:inline-flex}   /* 격자를 풀어야 빈 열의 간격 없이 무니가 가운데 온다 */
  .is-rail .mo-side__hd .mo-lk__wm,.is-rail .mo-side__org,.is-rail .mo-side__gt,.is-rail .mo-nav__t,.is-rail .mo-nav__chev,.is-rail .mo-nsub,.is-rail .mo-side__hd .mo-lk__by,.is-rail .mo-side__hd .mo-lk__if,.is-rail .mo-side__user small,.is-rail .mo-side__user b{display:none}
  .is-rail .mo-side__hd .mo-side__tg{display:none}
  .is-rail .mo-side__nav{padding:var(--mo-space-3) var(--mo-space-2)}
  .is-rail .mo-side__grp{margin-top:var(--mo-space-2);padding-top:var(--mo-space-2);border-top:1px solid var(--mo-line)}
  .is-rail .mo-side__grp:first-child{margin-top:0;padding-top:0;border-top:0}
  .is-rail .mo-nav{width:52px;height:var(--mo-touch-min);padding:0;justify-content:center;position:relative}
  .is-rail .mo-nav svg.mo-ic{width:24px;height:24px}
  .is-rail .mo-nav.is-in{color:var(--mo-primary);background:var(--mo-primary-soft)}
  .is-rail .mo-nav .mo-nbadge{position:absolute;top:2px;right:2px}
  .is-rail .mo-side__ft{display:grid;gap:var(--mo-space-1);justify-items:center}
  .is-rail .mo-side__tg--ft{display:inline-flex}
  .mo-fly{position:fixed;left:0;top:0;z-index:55;width:200px;background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);
    padding:var(--mo-space-1);box-shadow:var(--mo-shadow-pop)}
  .mo-fly__t{font-size:12px;font-weight:600;color:var(--mo-faint);padding:6px var(--mo-space-3) 2px}
  .is-rail .mo-fly .mo-nav{width:100%;height:36px;padding:0 var(--mo-space-3);justify-content:flex-start;font-size:13px;font-weight:500}
  .is-rail .mo-fly .mo-nav__t{display:block}
  .is-rail li{position:relative}
}
.mo-side__tg--ft{display:none}
.mo-avatar{width:28px;height:28px;border-radius:50%;background:var(--mo-bg-alt-strong);color:var(--mo-ink-2);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* 운영자 사이드바 — 1차의 어두운 GNB 와 같은 구분을 사이드바·상단 바에 */
.mo-side--ops{background:var(--mo-dark);border-right-color:var(--mo-dark)}
.mo-side--ops .mo-side__hd{border-bottom-color:var(--mo-muted)}
.mo-side--ops .mo-lk{color:var(--mo-on-btn)}
.mo-side--ops .mo-side__org,.mo-side--ops .mo-lk__by,.mo-side--ops .mo-side__user small{color:var(--mo-on-dark-muted)}
.mo-side--ops .mo-nav{color:var(--mo-on-dark-muted)}
.mo-side--ops .mo-nav:hover{background:var(--mo-dark-deep);color:var(--mo-on-btn)}
.mo-side--ops .mo-nav[aria-current="page"],.mo-side--ops .mo-nav[aria-current="page"]:hover{background:var(--mo-dark-deep);color:var(--mo-on-btn);box-shadow:inset 3px 0 0 var(--mo-primary-on-dark)}
.mo-side--ops .mo-side__ft{border-top-color:var(--mo-muted)}
.mo-side--ops .mo-side__user b{color:var(--mo-on-btn)}
.mo-side--ops .mo-side__tg{color:var(--mo-on-dark-muted)}
.mo-side--ops .mo-side__tg:hover{background:var(--mo-dark-deep);color:var(--mo-on-btn)}
.mo-side--ops .mo-sheet__id b,.mo-side--ops .mo-menu-btn{color:var(--mo-on-btn)}
.mo-side--ops .mo-sheet__id small{color:var(--mo-on-dark-muted)}
.mo-side--ops .mo-avatar{background:var(--mo-dark-deep);color:var(--mo-on-btn)}
.mo-side--ops .mo-nav:focus-visible,.mo-side--ops button:focus-visible,.mo-side--ops a:focus-visible{outline-color:var(--mo-primary-on-dark)}

/* ---------- 보기 전환(목록 · 칸반) ---------- */
.mo-view{display:inline-flex;border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);background:var(--mo-bg);padding:2px;gap:2px;flex:none}
.mo-view button{font:inherit;font-size:13px;font-weight:600;color:var(--mo-muted);background:none;border:0;border-radius:6px;height:calc(var(--mo-btn-h) - 6px);padding:0 var(--mo-space-3);
  display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.mo-view button svg{width:16px;height:16px}
.mo-view button:hover{color:var(--mo-ink-2)}
.mo-view button[aria-pressed="true"]{background:var(--mo-primary-soft);color:var(--mo-primary)}
.mo-view button:focus-visible{outline:2px solid var(--mo-primary);outline-offset:1px}
.mo-ph .mo-view{align-self:flex-end}

/* ---------- Kanban ---------- */
.mo-kbnote{font-size:13px;color:var(--mo-muted);margin:0 0 var(--mo-space-3)}
.mo-kbpick.mo-tabs{display:none}
.mo-kb{display:flex;gap:var(--mo-space-3);align-items:flex-start;overflow-x:auto;padding-bottom:var(--mo-space-2);scroll-snap-type:x proximity}
.mo-kb__col{flex:0 0 var(--mo-kb-col);min-width:0;background:var(--mo-bg-alt-strong);border-radius:var(--mo-r-sm);padding:var(--mo-space-2);scroll-snap-align:start}
.mo-kb__hd{display:flex;align-items:center;gap:6px;padding:var(--mo-space-1) var(--mo-space-1) var(--mo-space-2);position:relative}
.mo-kb__hd h2{font-size:14px;margin:0;line-height:1.3;white-space:nowrap}
.mo-kb__n{font-size:12px;font-weight:700;color:var(--mo-muted);font-variant-numeric:tabular-nums}
.mo-kb__sp{flex:1}
.mo-kb__sum{font-size:12px;color:var(--mo-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-kb__kind{display:block;font-size:11px;color:var(--mo-faint);padding:0 var(--mo-space-1) var(--mo-space-2);margin-top:-4px}
.mo-kb__i{width:28px;height:28px;margin:-4px -4px -4px 0;border:0;background:none;color:var(--mo-faint);border-radius:var(--mo-r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.mo-kb__i svg{width:16px;height:16px}
.mo-kb__i:hover,.mo-kb__i[aria-expanded="true"]{background:var(--mo-bg);color:var(--mo-ink-2)}
.mo-kb__i:focus-visible,.mo-kc:focus-visible,.mo-kc__more:focus-visible,.mo-kb__lane:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px}
.mo-kb__list>li{position:relative}
.mo-kb__drop{border:1px dashed var(--mo-primary);border-radius:var(--mo-r-sm);background:var(--mo-primary-soft);color:var(--mo-primary);font-size:12px;font-weight:600;text-align:center;padding:var(--mo-space-3) 0}
.mo-kb__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--mo-space-2);min-height:var(--mo-touch-min)}
.mo-kb__none{font-size:12px;color:var(--mo-faint);text-align:center;padding:var(--mo-space-3) 0;border:1px dashed var(--mo-line);border-radius:var(--mo-r-sm);background:var(--mo-bg-alt)}
.mo-kb__col.is-warn .mo-kb__hd h2::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mo-warn-dot);margin-right:6px;vertical-align:2px}
.mo-kb__col.is-target{box-shadow:inset 0 0 0 2px var(--mo-primary)}
.mo-kb__col.is-deny{opacity:.55}

/* 접힌 열(보류 · 실격·실패) — 건수만. 누르면 펼친다 */
.mo-kb__col--lane{display:none}
.mo-kb__col--lane.is-open{display:block}
.mo-kb__lane{flex:0 0 var(--mo-kb-lane);width:var(--mo-kb-lane);min-height:160px;border:0;background:var(--mo-bg-alt-strong);border-radius:var(--mo-r-sm);padding:var(--mo-space-3) 0;
  display:flex;flex-direction:column;align-items:center;gap:var(--mo-space-2);font:inherit;color:var(--mo-muted);cursor:pointer}
.mo-kb__lane b{font-size:12px;font-weight:700;color:var(--mo-ink-2);font-variant-numeric:tabular-nums}
.mo-kb__lane span{writing-mode:vertical-rl;font-size:13px;font-weight:600;letter-spacing:.02em}
.mo-kb__lane:hover{color:var(--mo-ink-2)}

/* 카드 */
.mo-kc{display:block;background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-3);color:inherit;text-decoration:none;cursor:pointer}
.mo-kc:hover{border-color:var(--mo-faint)}
.mo-kc[aria-selected="true"]{border-color:var(--mo-primary);box-shadow:0 0 0 1px var(--mo-primary)}
.mo-kc.is-drag{box-shadow:var(--mo-shadow-pop);border-color:var(--mo-primary);cursor:grabbing}
.mo-kc__top{display:flex;gap:var(--mo-space-2);align-items:flex-start;padding-right:28px}
.mo-kc__co{font-size:14px;font-weight:600;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.mo-kc__who{display:block;font-size:12px;color:var(--mo-faint);font-weight:500}
.mo-kc__sum{margin:6px 0 0;font-size:13px;color:var(--mo-ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mo-kc__meta{display:flex;flex-wrap:wrap;gap:2px var(--mo-space-3);margin-top:var(--mo-space-2);font-size:12px;color:var(--mo-muted)}
.mo-kc__amt{font-size:13px;font-weight:700;color:var(--mo-ink);font-variant-numeric:tabular-nums}
.mo-kc__amt small{font-size:11px;font-weight:500;color:var(--mo-faint);margin-left:4px}
.mo-kc__warn{color:var(--mo-warn);font-weight:600}
.mo-kc__warn::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mo-warn-dot);margin-right:5px;vertical-align:1px}
.mo-kc__next{margin-top:var(--mo-space-2);padding-top:var(--mo-space-2);border-top:1px solid var(--mo-line);font-size:12px;color:var(--mo-ink-2)}
.mo-kc__next small{color:var(--mo-faint);margin-right:6px}
.mo-kc__tag{display:inline-block;font-size:11px;font-weight:600;color:var(--mo-muted);background:var(--mo-bg-alt);border-radius:var(--mo-r-pill);padding:1px var(--mo-space-2);margin-top:6px}
.mo-kc__more{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;background:none;color:var(--mo-faint);border-radius:var(--mo-r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mo-kc__more svg{width:16px;height:16px}
.mo-kc__more:hover,.mo-kc__more[aria-expanded="true"]{background:var(--mo-bg-alt);color:var(--mo-ink-2)}

/* 열 조건 · 옮기기 메뉴 (떠 있는 작은 면) */
.mo-pop{position:fixed;left:0;top:0;z-index:56;background:var(--mo-bg);border:1px solid var(--mo-line);border-radius:var(--mo-r-sm);box-shadow:var(--mo-shadow-pop);padding:var(--mo-space-3)}
.mo-pop--cond{width:min(320px,calc(100vw - 40px))}
.mo-pop h3{font-size:12px;font-weight:700;color:var(--mo-muted);margin:0 0 var(--mo-space-1)}
.mo-pop h3 ~ h3{margin-top:var(--mo-space-3)}
.mo-pop ul{margin:0;padding:0 0 0 16px;font-size:13px;color:var(--mo-ink-2);line-height:1.5}
.mo-pop--move{width:200px;padding:var(--mo-space-1)}
.mo-pop--move .mo-pop__t{font-size:12px;font-weight:600;color:var(--mo-faint);padding:6px var(--mo-space-3) 2px}
.mo-pop--move button{display:flex;align-items:center;width:100%;min-height:36px;padding:0 var(--mo-space-3);border:0;background:none;border-radius:6px;font:inherit;font-size:14px;color:var(--mo-ink-2);text-align:left;cursor:pointer}
.mo-pop--move button:hover{background:var(--mo-bg-alt)}
.mo-pop--move button[disabled]{color:var(--mo-placeholder);cursor:not-allowed}
.mo-pop--move button small{margin-left:auto;font-size:11px;color:var(--mo-faint)}
.mo-pop--move hr{border:0;height:1px;background:var(--mo-line);margin:var(--mo-space-1) 0}

/* 잠긴 열 묶음(기본 플랜만 쓰는 고객사) */
.mo-kb__lock{flex:0 0 var(--mo-kb-col);border:1px dashed var(--mo-line);border-radius:var(--mo-r-sm);padding:var(--mo-space-4);background:var(--mo-bg);font-size:13px;color:var(--mo-muted);line-height:1.55}
.mo-kb__lock b{display:block;font-size:14px;color:var(--mo-ink-2);margin-bottom:var(--mo-space-1)}

/* 금액 입력 */
.mo-amt{position:relative}
.mo-amt .mo-input{padding-right:40px;text-align:right;font-variant-numeric:tabular-nums}
.mo-amt__u{position:absolute;right:var(--mo-space-4);top:0;height:var(--mo-input-h);display:flex;align-items:center;font-size:14px;color:var(--mo-muted);pointer-events:none}
.mo-dlg__card .mo-field{display:block;margin-bottom:var(--mo-space-4)}
.mo-dlg__card .mo-seg{margin-bottom:var(--mo-space-4)}
.mo-dlg__card textarea.mo-input{height:auto;min-height:72px;padding:var(--mo-space-3) var(--mo-space-4);resize:vertical;font:inherit;font-size:15px;display:block;width:100%}
.mo-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mo-muted) 50%),linear-gradient(135deg,var(--mo-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}

@media (min-width:1280px){
  .mo-kb__col{flex:1 1 0;min-width:var(--mo-kb-col-min)}
  .mo-kb__lock{flex:1 1 0;min-width:var(--mo-kb-col-min)}
}
@media (max-width:833px){
  /* 390: 열을 하나씩 본다 — 열 고르기 칩으로 바꾼다 */
  .mo-kbpick.mo-tabs{display:flex;margin-bottom:var(--mo-space-3)}
  .mo-kb{display:block;overflow:visible}
  .mo-kb__col{display:none;background:none;padding:0}
  .mo-kb__col.is-cur{display:block}
  .mo-kb__col.is-cur .mo-kb__hd h2{font-size:16px}
  .mo-kb__lane,.mo-kb__lock{display:none}
  .mo-kb__lock.is-cur{display:block}
  .mo-kb__list{gap:10px}
  .mo-kc{padding:14px var(--mo-space-4)}
  .mo-kc__top{padding-right:var(--mo-touch-min)}
  .mo-kc__more,.mo-kb__i{width:var(--mo-touch-min);height:var(--mo-touch-min)}
  .mo-kc__more{top:2px;right:2px}
  .mo-kc__more svg,.mo-kb__i svg{width:20px;height:20px}
  .mo-pop--move{width:min(260px,calc(100vw - 48px))}
  .mo-pop--move button{min-height:var(--mo-touch-min);font-size:15px}
  .mo-view{padding:0;gap:0}
  .mo-view button{height:var(--mo-touch-min);padding:0 var(--mo-space-4);border-radius:7px}
  .mo-ph .mo-view{width:100%}
  .mo-ph .mo-view button{flex:1;justify-content:center}
}

/* ---------- Kanban 3차 — 2차에 더한 것만 ---------- */
/* 금액: 근거 · 부가세를 금액 아래 줄로 — 열 213(1280, 펼친 사이드바)에서 한 줄에 안 들어간다 */
.mo-kc__amt small{display:block;margin:2px 0 0}

/* 끝난 열(계약 · 실격·실패)의 표시 기간 */
.mo-kb__range{display:inline-flex;align-items:center;gap:var(--mo-space-1);height:28px;margin:0 var(--mo-space-1) var(--mo-space-2);padding:0 var(--mo-space-2);
  border:1px solid var(--mo-line);background:var(--mo-bg);border-radius:var(--mo-r-sm);font:inherit;font-size:12px;font-weight:600;color:var(--mo-muted);cursor:pointer;font-variant-numeric:tabular-nums}
.mo-kb__range svg{width:12px;height:12px;flex:none}
.mo-kb__range:hover,.mo-kb__range[aria-expanded="true"]{color:var(--mo-ink-2);border-color:var(--mo-faint)}
.mo-kb__range:focus-visible{outline:2px solid var(--mo-primary);outline-offset:2px}
.mo-kb__hid{margin:0;padding:var(--mo-space-2) var(--mo-space-1) 0;font-size:12px;color:var(--mo-faint);line-height:1.5}
.mo-pop--range{width:min(280px,calc(100vw - 40px))}
.mo-pop--range .mo-field{margin-bottom:var(--mo-space-3)}
.mo-pop__act{display:flex;gap:var(--mo-space-2);justify-content:flex-end}

/* 창 안 세그먼트 밑 안내 — 2차의 .mo-dlg__card .mo-seg 아래 여백(space-4) 안으로 끌어올린다 */
.mo-dlg__card .mo-seg+.mo-hint{display:block;margin:calc(var(--mo-space-2) - var(--mo-space-4)) 0 var(--mo-space-4)}

@media (max-width:833px){
  .mo-kb__range{height:var(--mo-touch-min);padding:0 var(--mo-space-3);font-size:13px;margin-left:0}
  .mo-kb__hid{padding-left:0}
  .mo-pop--range .mo-btn{min-height:var(--mo-touch-min);height:auto;border-radius:var(--mo-r-md)} /* 1차 p0.css 의 <834 버튼 값과 같다 */
}

/* ==================== 교육 관리자 화면 — 9/29 사이드바 셸(AppShell 3)에 다시 그림(design/screens/edu.html) ====================
   원본 = 교육 2단계 시안(9/27) 관리자 2화면 9상태. 셸 · 드로어 · 표 · 폼 · 토스트는 위 절의 것을 그대로 쓰고, 여기에는 교육에만 있는 것만 둔다. */
/* ---------- PartCell (표의 부별 점수 칸) · PartGrid (<834 카드 안 5칸) ---------- */
.mo-tbl th.mo-part,.mo-tbl td.mo-part{text-align:center;padding-left:6px;padding-right:6px;width:76px}
.mo-part__s{display:block;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mo-ink);white-space:nowrap}
.mo-part__c{display:block;font-size:12px;color:var(--mo-faint)}
.mo-part--ok .mo-part__s::before{content:"✓ ";color:var(--mo-primary)}
.mo-part--no .mo-part__s{color:var(--mo-warn)}
.mo-part--none .mo-part__s{color:var(--mo-placeholder);font-weight:500}
.mo-part.is-stale,.mo-parts .is-stale{opacity:.45}   /* 인증이 만료된 직원의 지난 점수 */
.mo-parts{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px}
.mo-parts>span{text-align:center;border-radius:6px;background:var(--mo-bg-alt);padding:6px 0;font-size:12px;line-height:1.3}
.mo-parts em{display:block;font-style:normal;color:var(--mo-faint)}
.mo-parts b{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.mo-parts .mo-part--no b{color:var(--mo-warn)}
.mo-parts .mo-part--none b{color:var(--mo-placeholder)}
.mo-tbl--edu tbody tr{cursor:pointer}
/* 최근 응시 열은 표가 놓인 자리가 좁으면 숨긴다 — 기준은 화면 폭이 아니라 자리 폭(사이드바를 접고 펴면 본문 폭이 바뀐다).
   930 = 직원 168(문의 표의 회사 열과 같은 값) + 부 5칸 380 + 인증 상태 114 + 최근 응시 155 + 인증 만료일 113 — 뒤 세 값은 9/29 실측 올림 */
.mo-fit{container-type:inline-size}
@container (max-width:929px){.mo-tbl--edu .mo-col-opt{display:none}}

/* ---------- 목록 도구 줄의 검색 칸 · 표 아래 주석 · 페이지 머리 안 링크 ---------- */
.mo-bar .mo-input{flex:1 1 220px;width:auto;min-width:0}
.mo-note{font-size:12px;color:var(--mo-faint);margin:10px 0 0}
.mo-ph p a{color:var(--mo-primary)}

/* ---------- 드로어 안 표(응시 이력) ---------- */
.mo-drawer .mo-tbl table{font-size:13px}
.mo-drawer .mo-tbl th,.mo-drawer .mo-tbl td{padding:var(--mo-space-2) 10px}
.mo-drawer .mo-tbl td:not(:last-child){white-space:nowrap}   /* 긴 글은 마지막 열에 둔다 — 「4부」가 두 줄로 갈렸다(9/29 실측 834) */

/* ---------- 설정 폼 — 제목 · 설명 · 영향 미리보기 · 변경 이력 ---------- */
.mo-form__t{font-size:18px;line-height:1.3;margin:0 0 4px}
.mo-form__d{font-size:13px;color:var(--mo-muted);margin:0 0 var(--mo-space-4)}
.mo-form__off{margin:-6px 0 var(--mo-space-4)}
.mo-form .mo-alert{margin:0 0 var(--mo-space-4)}
.mo-alert ul{margin:6px 0 0;padding-left:18px}
.mo-sec--log{max-width:var(--mo-form-max);margin-top:var(--mo-space-4)}
.mo-sec--log h3{margin-top:0}
.mo-sec--log .mo-note{margin:0}

/* ---------- 구성원 · 내 계정(S6) — 프로토타입 proto.css 의 보조 값(px-me · px-role · px-muted · px-stack · px-h2 · px-dl)을 DS 이름으로 ---------- */
.mo-me{display:inline-block;font-size:12px;font-weight:600;color:var(--mo-ink-2);background:var(--mo-bg-alt-strong);border-radius:var(--mo-r-pill);padding:0 var(--mo-space-2);margin-left:4px;vertical-align:1px}
.mo-role{font-size:12px;font-weight:600;color:var(--mo-ink-2);background:var(--mo-bg-alt-strong);border-radius:var(--mo-r-pill);padding:2px var(--mo-space-2);white-space:nowrap}
.mo-muted{color:var(--mo-muted)}
.mo-stack{display:grid;gap:var(--mo-space-4)}
.mo-stack .mo-form__t{margin-bottom:var(--mo-space-3)}
.mo-stack .mo-dl{margin-bottom:var(--mo-space-4)}
.mo-stack .mo-form>:last-child{margin-bottom:0}