/* KOG Ops One 앱 셸 — 데스크톱 사이드바+탑바 / 모바일 탑바+하단탭 반응형 */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; color: var(--text-strong); font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* ============ Desktop shell ============ */
/* 기본 2컬럼 — 트리패널은 업무 화면(.has-tree)에서만 표시 */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; position: relative; transition: grid-template-columns .2s; }
/* 업무 화면 — 3컬럼으로 전환 */
.app.has-tree { grid-template-columns: var(--sidebar-w) var(--tree-w) minmax(0, 1fr); }
/* has-tree × sidebar-collapsed */
.app.has-tree.sidebar-collapsed { grid-template-columns: 64px var(--tree-w) minmax(0, 1fr); }
/* has-tree × tree-collapsed */
.app.has-tree.tree-collapsed { grid-template-columns: var(--sidebar-w) 0 minmax(0, 1fr); }
/* has-tree × sidebar-collapsed × tree-collapsed */
.app.has-tree.sidebar-collapsed.tree-collapsed { grid-template-columns: 64px 0 minmax(0, 1fr); }
/* 비업무 × sidebar-collapsed */
.app:not(.has-tree).sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
/* 트리패널 — 비업무 화면에서 숨김 */
.app:not(.has-tree) .tree-panel { display: none; }
/* 트리 플로팅 토글(사이드바 토글 버튼 방식과 동일) — 비업무에서 숨김 */
.app:not(.has-tree) .tree-panel-toggle { display: none; }

/* ---- Sidebar ---- */
.sidebar {
  position: sticky; top: 0; height: 100vh; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  padding: 22px 16px 16px;
  transition: width .2s;
  overflow-x: hidden; overflow-y: auto; /* 메뉴가 화면보다 길면 잘리지 않고 세로 스크롤. overflow-x:hidden은 접힘 애니메이션 보존 */
  scrollbar-width: none; -ms-overflow-style: none; /* 스크롤 기능은 유지하되 스크롤바는 숨김(휠·트랙패드 스크롤) */
  width: var(--sidebar-w);
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.logo { display: flex; align-items: center; gap: 7px; padding: 4px 8px 22px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; cursor: pointer; }
.logo .logo-mark { width: 22px; height: 22px; flex: 0 0 auto; }
.logo:hover .kog { color: var(--primary-strong); }
.logo .kog { color: var(--primary); transition: color .12s; }
.logo .rest { color: var(--text-strong); font-weight: 700; }

/* 사이드바 토글 버튼 — .app 직속, 사이드바 우측 테두리 중앙에 떠 있는 원형 버튼.
   absolute라 그리드 아이템에서 빠져 본문(.main)을 밀어내지 않는다. 접힘/펼침 모두 같은 자리. */
.sidebar-toggle {
  position: absolute; left: var(--sidebar-w); top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 30; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: left .2s, background .15s, color .15s;
}
.sidebar-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.sidebar-toggle .ic { width: 15px; height: 15px; }
.app.sidebar-collapsed .sidebar-toggle { left: 64px; }
.app.sidebar-collapsed .sidebar-toggle .ic { transform: rotate(180deg); }
@media (max-width: 768px) { .sidebar-toggle { display: none; } }

/* ---- 사이드바 접힘 상태 ---- */
/* 사이드바 접힘 grid는 위 has-tree 조합 규칙에서 관리 — 여기서는 sidebar 자체 스타일만 */
.app.sidebar-collapsed .sidebar { width: 64px; padding: 22px 8px 16px; }
/* 접힌 상태: 텍스트·레이블·메타 숨김 */
.app.sidebar-collapsed .sidebar .nav-item span,
.app.sidebar-collapsed .sidebar .nav-label,
.app.sidebar-collapsed .sidebar .nav-user .meta,
.app.sidebar-collapsed .sidebar .logo .rest,
.app.sidebar-collapsed .sidebar .logo .kog { display: none; }
/* 접힌 상태: 아이콘 중앙 정렬 */
.app.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 10px 0; }
.app.sidebar-collapsed .sidebar .logo { justify-content: center; padding: 4px 0 22px; }
.app.sidebar-collapsed .sidebar .nav-user { justify-content: center; padding: 10px 0; gap: 0; }
/* 접힌 상태: 카운트 배지 위치 조정 */
.app.sidebar-collapsed .sidebar .nav-item .count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { font-size: 11px; color: var(--text-faint); font-weight: 600; padding: 14px 12px 6px; letter-spacing: .03em; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md);
  color: var(--text-muted); font-weight: 600; font-size: 14px; transition: background .12s, color .12s; position: relative;
  cursor: pointer;
}
.nav-item .ic { width: 20px; height: 20px; flex: 0 0 20px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); }
.nav-item .count {
  margin-left: auto; font-size: 11px; font-weight: 700; background: var(--primary); color: #fff;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center;
}
.nav-item.active .count { background: var(--primary); }
a[data-nav] { cursor: pointer; }
.sidebar .spacer { flex: 1; }
.sidebar .nav-sub { margin-top: 6px; }

.nav-user {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin-top: 8px;
  border-top: 1px solid var(--border);
}
.nav-user .meta { line-height: 1.25; flex: 1; min-width: 0; }
.nav-user .meta b { font-size: 13px; color: var(--text-strong); display: block; }
.nav-user .meta span { font-size: 11.5px; color: var(--text-faint); }
.nav-user .chev { color: var(--text-faint); }
.nav-logout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--r-md);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  transition: background .12s, color .12s; white-space: nowrap;
}
.nav-logout-btn:hover { background: var(--surface-2); color: var(--danger, #E5484D); }
.nav-logout-btn .ic { width: 16px; height: 16px; flex: 0 0 16px; }
.app.sidebar-collapsed .sidebar .nav-logout-btn span { display: none; }
.app.sidebar-collapsed .sidebar .nav-logout-btn { padding: 6px 0; }

/* ---- 트리패널 (사이드바 + 본문 사이, 데스크톱 전용) ---- */
.tree-panel {
  position: sticky; top: 0; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  width: var(--tree-w);
  transition: width .2s;
}
.tree-panel::-webkit-scrollbar { display: none; }

/* 트리패널 접힘 — grid는 위 has-tree 조합 규칙에서 관리 */
.app.has-tree.tree-collapsed .tree-panel { width: 0; overflow: hidden; }

/* 트리패널 플로팅 토글 버튼 — 트리패널 우측 테두리 중앙에 떠 있는 원형 버튼 */
.tree-panel-toggle {
  position: absolute; top: 50%; z-index: 30;
  /* 기본(사이드바 full + 트리 펼침): sidebar-w + tree-w */
  left: calc(var(--sidebar-w) + var(--tree-w));
  transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: left .2s, background .15s, color .15s;
}
.tree-panel-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.tree-panel-toggle .ic { width: 15px; height: 15px; }
/* 사이드바 접힘 시 left 보정 */
.app.has-tree.sidebar-collapsed .tree-panel-toggle { left: calc(64px + var(--tree-w)); }
/* 트리 접힘 시 left 보정 + 아이콘 반전 */
.app.has-tree.tree-collapsed .tree-panel-toggle { left: calc(var(--sidebar-w) + 0px); }
.app.has-tree.sidebar-collapsed.tree-collapsed .tree-panel-toggle { left: 64px; }
.app.has-tree.tree-collapsed .tree-panel-toggle .ic { transform: rotate(180deg); }
@media (max-width: 768px) { .tree-panel-toggle { display: none; } }

/* 트리패널 내부 레이아웃 */
.tree-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 12px 8px; flex-shrink: 0;
}
.tree-panel-title {
  font-size: 11px; font-weight: 700; color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase;
}
.tree-toggle-btn {
  width: 24px; height: 24px; border-radius: var(--r-md); display: grid; place-items: center;
  color: var(--text-muted); flex-shrink: 0;
}
.tree-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.tree-toggle-btn .ic { width: 14px; height: 14px; }

.tree-body { flex: 1; padding: 0 4px; overflow-y: auto; scrollbar-width: none; }
.tree-body::-webkit-scrollbar { display: none; }

.tree-footer { padding: 8px 8px 12px; flex-shrink: 0; border-top: 1px solid var(--border); }
.tree-add-btn {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px;
  border-radius: var(--r-md); color: var(--text-muted); font-size: 13px; font-weight: 500;
  transition: background .12s, color .12s;
}
.tree-add-btn:hover { background: var(--surface-2); color: var(--text); }
.tree-add-btn .ic { width: 16px; height: 16px; }

/* 트리 노드 행 */
.tree-node {
  display: flex; align-items: center; gap: 2px;
  padding: 1px 4px 1px calc(8px + var(--depth, 0) * 16px);
  border-radius: var(--r-md); position: relative;
}
.tree-node:hover { background: var(--surface-2); }
.tree-node:hover .tree-more { opacity: 1; }

.tree-twist {
  width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--text-faint); cursor: pointer; border-radius: 4px; font-size: 11px;
  transition: color .12s;
}
.tree-twist:hover { color: var(--text); background: var(--surface-2); }
.tree-twist-placeholder { width: 20px; flex-shrink: 0; }

.tree-link {
  flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 2px;
  border-radius: var(--r-md); color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .12s;
}
.tree-link:hover { color: var(--text); }
.tree-link.active { color: var(--primary); font-weight: 600; }
.tree-node.active { background: var(--primary-soft); }

.tree-more {
  width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--text-faint); border-radius: 4px; opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
  font-size: 15px;
}
.tree-more:hover { background: var(--surface-2); color: var(--text); opacity: 1; }

/* 트리 노드 인라인 편집 */
.tree-rename-input {
  flex: 1; padding: 3px 6px; border: 1px solid var(--primary); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
  outline: none; min-width: 0;
}

/* 트리 컨텍스트 메뉴 */
.tree-ctx-menu {
  position: fixed; z-index: 200; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 4px; min-width: 140px;
}
.tree-ctx-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--r-sm); color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .1s;
}
.tree-ctx-item:hover { background: var(--surface-2); }
.tree-ctx-item.danger { color: var(--danger, #E5484D); }
.tree-ctx-item .ic { width: 15px; height: 15px; color: var(--text-muted); }
.tree-ctx-item.danger .ic { color: var(--danger, #E5484D); }

/* 컨텍스트 메뉴 이름 헤더 — 어떤 메뉴를 우클릭했는지 확인용(메뉴 새 창·새 탭 열기) */
.ctx-menu-head {
  padding: 6px 10px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; color: var(--text-faint);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Main / topbar ---- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 16px 32px 0;
  justify-content: flex-end;
}
.topbar .grow { flex: 1; }
/* 상단바로 옮긴 실시간 배지 — 사이드바용 외부 여백 제거 */
.topbar .live-badge { margin: 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  color: var(--text-muted); position: relative;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }

/* ---- 열린 화면 탭 (PC 전용) ---- */
/* 이동한 화면이 탭으로 쌓인다. 상태·렌더는 app/tabbar.js. 모바일은 아래 미디어쿼리에서 숨김. */
/* 세로 구분선으로 칸을 나누고 현재 탭만 흰 셀 — 이카운트식 촘촘 그리드 기조(부장님 2026-08-10 시안 2 확정).
   박스형 탭(회색 칠 + 둥근 위 모서리 + 사방 테두리)은 쓰지 않는다. */
/* 가로선은 화면 끝까지 한 줄로 잇고(중간에서 끊기지 않게), 탭 사이 세로 구분선은 두지 않는다
   — 조각난 선이 눈에 걸린다는 부장님 지적(2026-08-10). 칸 구분은 현재 탭의 흰 셀만으로. */
.opstabs {
  width: 100%; margin-top: 8px;
  border-bottom: 1px solid var(--border-2);
  overflow-x: auto; scrollbar-width: none;
}
.opstabs::-webkit-scrollbar { display: none; }
.opstabs:empty { display: none; }
.opstabs-in {
  display: flex; align-items: stretch;
  max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 32px;
}
.opstab {
  display: flex; align-items: center; flex: 0 0 auto;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.opstab:hover { background: var(--surface-2); }
.opstab.is-active { background: var(--surface); border-bottom-color: var(--primary); }
.opstab-go {
  padding: 8px 4px 8px 14px; font-size: 12.5px; color: var(--text-muted);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opstab.is-active .opstab-go { color: var(--text-strong); font-weight: 700; }
.opstab-go:only-child { padding-right: 14px; }
.opstab-x {
  width: 18px; height: 18px; margin: 0 8px 0 0; border-radius: 6px;
  display: grid; place-items: center; color: var(--text-faint); flex: 0 0 auto;
  opacity: 0; transition: opacity .12s;
}
.opstab:hover .opstab-x, .opstab.is-active .opstab-x { opacity: 1; }
.opstab-x:hover { background: var(--danger-soft); color: var(--danger); }
.opstab-x .ic { width: 11px; height: 11px; }

.page { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 14px 32px 48px; }

/* ---- Mobile chrome (hidden on desktop) ---- */
.m-topbar, .bottomnav, .sticky-cta { display: none; }

/* ============ Tablet ============ */
@media (max-width: 1100px) {
  .page { padding: 14px 24px 48px; }
  .topbar { padding: 14px 24px 0; }
  .opstabs-in { padding: 0 24px; }
}

/* ============ Mobile ============ */
@media (max-width: 768px) {
  .app { display: block; }
  /* M1: 사이드바 완전 격리 — display:none에 position/height/overflow 명시해
     Samsung Internet 등 일부 엔진에서 sticky가 display:none을 우회하는 버그 차단.
     snav-rail·snav-panel도 별도 명시(position:absolute 자식이 부모 숨김을 뚫고 나오는 케이스 방지). */
  .sidebar, .topbar { display: none !important; position: static !important; height: 0 !important; overflow: hidden !important; }
  /* 화면 탭은 PC(관리) 전용 — 모바일은 하단탭·뒤로가기가 이동 수단이다. */
  .opstabs { display: none !important; }
  .snav-rail, .snav-panel { display: none !important; }
  /* R1: 트리패널 모바일 격리 — display:block에서 본문 위로 침범 방지. Phase 1 데스크톱 전용. */
  .tree-panel { display: none; }

  .m-topbar {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: var(--bg); position: sticky; top: 0; z-index: 30;
  }
  .m-topbar .m-title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--text-strong); }
  .m-topbar .m-logo { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
  .m-topbar .m-logo .kog { color: var(--primary); }
  .m-topbar .grow { flex: 1; }
  .m-topbar .icon-btn { width: var(--touch-min); height: var(--touch-min); }
  .m-topbar .avatar { width: 38px; height: 38px; }

  .main { display: block; }
  .page { padding: 4px 18px calc(var(--bottomnav-h) + 120px); max-width: 100%; }

  .bottomnav {
    display: grid; grid-template-columns: repeat(5,1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface-glass, rgba(255,255,255,.96)); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--text-faint); font-size: 11px; font-weight: 600; position: relative;
  }
  .bottomnav a .ic { width: 23px; height: 23px; }
  .bottomnav a.active { color: var(--primary); }
  .bottomnav a .count {
    position: absolute; top: 6px; left: 50%; margin-left: 4px; font-size: 10px; font-weight: 700;
    background: var(--primary); color: #fff; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
    display: grid; place-items: center;
  }
  .bottomnav a .ndot { position: absolute; top: 8px; left: 50%; margin-left: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding: 12px 18px 14px; z-index: 35;
    background: linear-gradient(180deg, rgba(246,247,251,0), var(--bg) 38%);
    pointer-events: none;
  }
  .sticky-cta > .btn { pointer-events: auto; }

  .page-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .page-title h1 { flex: 1; font-size: 24px !important; }
  .page-title .sub { flex-basis: 100%; }
}

@media (max-width: 768px) { .only-desktop { display: none !important; } }
@media (min-width: 768.01px) { .only-mobile { display: none !important; } }

/* ============================================================
   근태 상태 위젯 (헤더 칩) + 근태현황 보드
   ============================================================ */

/* 헤더 칩 버튼 — 데스크톱 topbar / 모바일 m-topbar */
.att-widget-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  border: none; background: var(--surface-2);
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.att-widget-chip:hover { background: var(--surface-3); color: var(--text); }
.att-widget-chip .ic { width: 15px; height: 15px; }
/* 출근 상태 — 솔리드 초록 배경 + 흰 글씨 */
.att-widget-chip.is-checkedin {
  color: #fff; background: var(--success);
}
.att-widget-chip.is-checkedin:hover { background: #15803d; color: #fff; }
#att-widget-desktop { display: flex; align-items: center; margin-right: 4px; }

/* 모바일 위젯 래퍼 — m-topbar 안의 span */
.att-widget-mobile { display: inline-flex; align-items: center; }

/* 근태현황 보드 목록 */
.att-board-list { display: flex; flex-direction: column; }
.att-board-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid var(--border);
}
.att-board-row:last-child { border-bottom: none; }
.att-board-row .tx { flex: 1; min-width: 0; }
.att-board-row .tx .t { font-size: 14.5px; font-weight: 700; color: var(--text-strong); }
.att-board-row .tx .s { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.att-board-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.att-board-time { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.att-board-date { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* 스켈레톤 애니메이션 */
@keyframes skel-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skel-av {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-line {
  border-radius: 6px; height: 12px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-name  { width: 80px; margin-bottom: 6px; }
.skel-sub   { width: 56px; height: 10px; }
.skel-badge { width: 44px; }
/* 4상태 가드 — 목록 로드 전 스켈레톤 컨테이너(ui.js loadingState) */
.load-state-skel { display: flex; flex-direction: column; gap: 10px; padding: 20px 4px; }
/* 4상태 가드 — 조회 실패 상태(ui.js errorState). 아이콘·제목만 경고색으로 구분.
   .empty-state.empty-state--error — components.css의 .empty-state > .ic(primary색)보다 특이성 우위 확보 */
.empty-state.empty-state--error > .ic { color: var(--danger); background: var(--danger-soft); }
.empty-state.empty-state--error .empty-state-title { color: var(--danger); }
/* 홈 미니 진입점·진척 링 — 조회 실패 정직 안내(위장 0 금지).
   .home-focus-text b(components.css)와 동점 방지 위해 조상 클래스 병기 */
.home-mini-error .stat, .home-mini-error b,
.home-focus.home-mini-error .home-focus-text b { color: var(--danger); }
/* 종합상황실 — 공유 동기화 상태 표시(로컬 폴백 침묵 금지) */
.sit-sync-note { color: var(--text-faint); font-size: 12px; }
.sit-sync-err, .sit-sync-err .tlink { color: var(--danger); font-weight: 700; }

/* 전체 알림함 페이지 — 벨 드로어 카드(.notif-row) 재사용 + 페이지 전용 레이아웃 */
.nfp-root { max-width: 760px; margin: 0 auto; }
.nfp-root .page-title-row { display: flex; align-items: flex-start; gap: 12px; }
.nfp-root .page-title-row .btn { margin-left: auto; flex-shrink: 0; }
.nfp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.nfp-day { font-size: 12px; font-weight: 800; color: var(--text-faint); padding: 14px 2px 6px; }
.nfp-list .notif-row { border: 1px solid var(--border, #e5e7eb); border-radius: 12px; margin-bottom: 8px; background: var(--surface-1, #fff); }
.nfp-more-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 30px; }
.nfp-more-err { color: var(--danger); font-size: 13px; }

/* ============================================================
   커스텀 툴팁 — 먼데이 스타일 다크 말풍선
   사용법: data-tip="라벨" + data-tip-pos="bottom"(기본) 또는 "right"
   ============================================================ */
[data-tip] { position: relative; }

/* 말풍선 본문 */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; transform: translateX(-50%) translateY(4px);
  top: calc(100% + 8px);
  background: #323338;
  color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  padding: 7px 11px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 200;
}
/* 화살표 */
[data-tip]::before {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%) translateY(4px);
  top: calc(100% - 6px);
  border: 7px solid transparent;
  border-bottom-color: #323338;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 201;
}
[data-tip]:hover::after,
[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: .12s;
}

/* 오른쪽 방향 — [data-tip-pos="right"] */
[data-tip][data-tip-pos="right"]::after {
  left: calc(100% + 8px); top: 50%;
  transform: translateX(4px) translateY(-50%);
}
[data-tip][data-tip-pos="right"]::before {
  left: calc(100% + 2px); top: 50%;
  transform: translateX(4px) translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #323338;
  border-bottom-color: transparent;
}
[data-tip][data-tip-pos="right"]:hover::after {
  transform: translateX(0) translateY(-50%);
}
[data-tip][data-tip-pos="right"]:hover::before {
  transform: translateX(0) translateY(-50%);
}

/* 사이드바 nav-item 툴팁 — CSS ::after 방식은 overflow:hidden 클리핑으로 작동 불가.
   축소 사이드바는 JS floating 툴팁(initSidebarTooltip)으로 대체.
   nav-item의 [data-tip] ::after/::before는 표시하지 않는다. */
.sidebar .nav-item[data-tip]::after,
.sidebar .nav-item[data-tip]::before,
.sidebar .nav-logout-btn[data-tip]::after,
.sidebar .nav-logout-btn[data-tip]::before { display: none; }

/* 사이드바 JS floating 툴팁(.js-tip) — 좌측 삼각 화살표(아이콘 쪽을 가리킴) */
.js-tip::before {
  content: ''; position: absolute;
  left: -5px; top: 50%; transform: translateY(-50%);
  border-width: 5px 5px 5px 0; border-style: solid;
  border-color: transparent #323338 transparent transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-tip]::after, [data-tip]::before { transition: none; }
}

/* ============ 모바일↔PC 뷰 토글 버튼 ============ */
/* pointer:fine(마우스) 기기에선 항상 숨김 — 터치 기기에서만 노출 */
#view-mode-toggle { display: none; }
@media (pointer: coarse) {
  #view-mode-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    position: fixed; left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    z-index: 60;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(20,24,40,.82); color: #fff; backdrop-filter: blur(6px);
    font-size: 12px; font-weight: 700; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.25);
    cursor: pointer;
  }
}

/* ============ PC→모바일 미리보기 (폰 프레임 iframe) ============ */
/* 탑바 아이콘으로 노출 — pointer:fine(마우스) 기기에서만(터치 기기는 숨김).
   .icon-btn 스타일을 그대로 따르고, 터치 기기에선 #id 우선순위로 숨김 유지. */
#mobile-preview-toggle { display: none; }
@media (hover: hover) and (pointer: fine) {
  #mobile-preview-toggle { display: inline-flex; }
}
#mobile-preview-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
#mobile-preview-overlay[hidden] { display: none; }
.mpv-backdrop { position: absolute; inset: 0; background: rgba(10,12,20,.55); backdrop-filter: blur(2px); }
.mpv-phone {
  position: relative; z-index: 1;
  width: 390px; height: min(844px, 92vh);
  background: #000; border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.mpv-frame {
  width: 100%; height: 100%; border: none; border-radius: 32px; background: #fff; display: block;
}
.mpv-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); color: var(--text-strong); border: none; font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer;
  display: grid; place-items: center;
}

/* ============ 메신저 (chat) ============ */
/*
 * Phase A — 적응형 단일 셸
 * .chat-root가 컨테이너 쿼리 기준점이 되어 폭에 따라 1~4열 자동 전환.
 * 메뉴 내장(#chat)·독립창(?view=chat) 양쪽에서 동일하게 동작.
 *
 * 열 소멸 순서: ④우측패널 → ①레일 → ②목록, ③본문은 상시 상주
 * S  <768  : 1fr                            (목록↔본문 토글)
 * M  768~  : 300px 1fr                      (목록+본문)
 * L  1024~ : 64px 280px 1fr                 (레일+목록+본문)
 * XL 1280+ : 64px 280px 1fr 280px           (레일+목록+본문+패널)
 */
.chat-root {
  display: grid;
  /* 기본(XL) — 4열 */
  grid-template-columns: 64px 300px minmax(0, 1fr) 280px;
  grid-template-areas: "rail sidebar main panel";
  height: calc(100vh - 56px); /* topbar 높이 제외 */
  overflow: hidden;
  /* 채팅 전용 지역 토큰 */
  --chat-bubble-r: 18px;
  --chat-bubble-tail-r: 6px;
  --chat-avatar: 34px;
}
/* panel-collapsed 상태 — 우측패널 접힘(헤더 햄버거 토글) */
.chat-root.panel-collapsed {
  grid-template-columns: 64px 300px minmax(0, 1fr);
  grid-template-areas: "rail sidebar main";
}

/* 반응형 — 각 메신저 창(독립창·팝업·임베드)의 뷰포트 폭 기준 @media.
   (@container는 .chat-root 자신을 스타일할 수 없어 미사용 — 뷰포트 @media로 일원화) */
/* 1024px 이상이면 우측 패널 포함 4단. 3단(패널만 숨김) 구간 제거 — 태블릿 폭에서도 4단. */
@media (max-width: 1023px) {
  .chat-root,
  .chat-root.panel-collapsed {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "sidebar main";
  }
  .chat-rail { display: none !important; }
  .chat-side-panel { display: none !important; }
}
@media (max-width: 767px) {
  .chat-root,
  .chat-root.panel-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas: "sidebar";
    height: calc(100dvh - var(--bottomnav-h, 0px));
  }
  .chat-rail { display: none !important; }
  .chat-side-panel { display: none !important; }
}
/* 독립앱(messenger-app)·풀스크린 셸은 메신저 전용 창이라 본문 폭을 양보할 수 있다.
   임베드 화면과 달리 태블릿 폭(768~1023)에서도 레일+우측패널 4단을 그대로 유지한다.
   (.messenger-app 접두 — 전역 1023 규칙보다 우선순위 높아 패널·레일 숨김을 덮어쓴다.) */
@media (min-width: 768px) and (max-width: 1023px) {
  .messenger-app .chat-root,
  .chat-root.chat-root-fullscreen {
    grid-template-columns: 56px 248px minmax(0, 1fr) 232px;
    grid-template-areas: "rail sidebar main panel";
  }
  .messenger-app .chat-root.panel-collapsed,
  .chat-root.chat-root-fullscreen.panel-collapsed {
    grid-template-columns: 56px 248px minmax(0, 1fr);
    grid-template-areas: "rail sidebar main";
  }
  .messenger-app .chat-rail,
  .chat-root.chat-root-fullscreen .chat-rail { display: flex !important; }
  .messenger-app .chat-side-panel,
  .chat-root.chat-root-fullscreen .chat-side-panel { display: flex !important; }
}
/* 카톡 PC식 2열 구조: 레일(56px) + 바디(나머지) */
.chat-sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: row;
  background: var(--surface);
  overflow: hidden;
}

/* 좌측 세로 레일 */
.chat-nav-rail {
  width: 56px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.chat-nav-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; min-height: 48px;
  border: none; background: none; cursor: pointer; border-radius: var(--r-md);
  color: var(--text-muted);
  transition: background .12s, color .12s;
  gap: 3px; padding: 6px 4px;
}
.chat-nav-btn:hover { background: var(--surface-2); color: var(--text-strong); }
.chat-nav-btn.active {
  color: var(--primary);
  background: var(--primary-soft);
}
/* 활성 시 좌측 액센트 바 */
.chat-nav-btn.active::before {
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: var(--r-pill); background: var(--primary);
}
.chat-nav-btn .ic { width: 20px; height: 20px; }
/* 앱 레일(.chat-rail)이 보이는 폭에서는 사이드바 안쪽 직원/채팅 스트립이 중복(5단처럼 보임)이라 숨긴다.
   직원/채팅 전환은 앱 레일 상단 버튼이 담당. 레일이 숨는 좁은 폭(≤767)에서만 이 스트립을 복원. */
@media (min-width: 1024px) { .chat-nav-rail { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .messenger-app .chat-nav-rail,
  .chat-root.chat-root-fullscreen .chat-nav-rail { display: none; }
}
.chat-nav-caption {
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
}
/* 채팅 버튼 안읽음 배지 */
.chat-nav-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px;
  background: #ff3b30; color: #fff;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}

/* 레일 오른쪽 바디 (헤더 + 목록) */
.chat-sidebar-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.chat-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px;
  flex-shrink: 0;
  gap: 4px;
}
/* 카톡식 "채팅 ▾" 제목 버튼 */
.chat-title-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 2px 4px 2px 0;
  border-radius: 6px; transition: background .12s;
}
.chat-title-btn:hover { background: var(--surface-2); }
.chat-sidebar-title {
  font-weight: 700; font-size: 18px; color: var(--text-strong);
  pointer-events: none;
}
.chat-title-caret {
  width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0;
}
/* 카톡식 필터 칩 줄 */
.chat-filter-chips {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px 8px;
  flex-shrink: 0;
}
.chat-filter-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px;
  padding: 0 11px; font-size: 13px; font-weight: 600;
  border: none; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); color: var(--text-muted);
  transition: background .12s, color .12s;
  line-height: 1;
  white-space: nowrap;
}
.chat-filter-chip.active {
  background: var(--text-strong); color: #fff;
}
/* 안읽음 칩 — 말풍선 아이콘 */
.chat-filter-chip-icon {
  width: 13px; height: 13px; flex-shrink: 0;
}
/* 안읽음 칩 — 카운트 배지(KOG 블루) */
.chat-filter-unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--primary); color: #fff;
  border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1;
}
.chat-filter-unread-badge:empty { display: none; }
/* 활성(검정) 칩 안 배지는 흰색 테두리로 구분 */
.chat-filter-chip.active .chat-filter-unread-badge {
  border: 1.5px solid rgba(255,255,255,.5);
}
/* 폴더 추가 + 버튼 */
.chat-filter-folder-btn {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 400; line-height: 1;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  transition: background .12s, color .12s;
}
.chat-filter-folder-btn:hover { background: var(--surface-2); color: var(--text); }

/* 헤더 액션 아이콘 버튼 — 카톡식 작은 회색 아이콘 */
.chat-header-actions { display: flex; align-items: center; gap: 1px; }
.chat-header-actions .icon-btn {
  width: 30px; height: 30px; color: var(--text-muted);
  border-radius: 8px;
}
.chat-header-actions .icon-btn:hover { background: var(--surface-2); color: var(--text); }
.chat-header-actions .icon-btn .ic { width: 17px; height: 17px; }
/* 새채팅(new-dm) 버튼 — 카톡처럼 약간 더 강조 */
.chat-new-dm-btn { color: var(--text) !important; }
.chat-new-dm-btn:hover { background: var(--surface-2) !important; color: var(--primary) !important; }

.chat-room-list {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.chat-section-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 8px 16px 4px;
  display: flex; align-items: center; justify-content: space-between;
}
/* 채널 섹션 — 탐색·만들기 버튼 묶음 */
.chat-section-label-channel { }
/* 즐겨찾기 섹션 라벨 */
.chat-section-label-fav { color: #b45309; }

/* 별표(즐겨찾기) 버튼 */
.chat-fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
  color: var(--text-muted); opacity: 0;
  padding: 2px 3px; border-radius: var(--r-sm);
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.chat-room-item:hover .chat-fav-btn,
.chat-fav-btn.active { opacity: 1; }
.chat-fav-btn.active { color: #f59e0b; }
.chat-fav-btn:hover { color: #f59e0b; }
.chat-section-actions { display: flex; align-items: center; gap: 2px; }
.chat-section-action {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  padding: 1px 6px; border-radius: var(--r-sm);
  transition: background .1s, color .1s;
  line-height: 1.6;
}
.chat-section-action:hover { background: var(--primary-soft); color: var(--primary); }

/* 채널 헤더 나가기 버튼 */
.chat-leave-btn { color: var(--text-muted); }
.chat-leave-btn:hover { color: var(--danger, #dc2626); }

/* 읽기전용(공지) 채널 안내 배너 */
.chat-readonly-banner {
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 600; text-align: center;
  padding: 6px 16px; flex-shrink: 0;
}
/* 입력바 대신 표시되는 읽기전용 안내 */
.chat-readonly-input-notice {
  padding: 12px 20px; text-align: center;
  font-size: 12.5px; color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}

/* 채널 만들기 폼 */
.chat-channel-form { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.chat-channel-form-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 4px; }
.chat-channel-form-required { color: var(--danger, #dc2626); }
.chat-channel-form-hint { color: var(--text-faint); font-weight: 400; }
.chat-channel-form-input {
  width: 100%; padding: 8px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; color: var(--text-strong); outline: none;
  box-sizing: border-box;
}
.chat-channel-form-input:focus { border-color: var(--primary); background: var(--surface); }
.chat-channel-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px;
}
.chat-channel-toggle-label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.chat-channel-toggle-desc { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* 토글 스위치 */
.chat-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.chat-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.chat-toggle-track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--border); transition: background .2s;
}
.chat-toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.chat-toggle input:checked + .chat-toggle-track { background: var(--primary); }
.chat-toggle input:checked + .chat-toggle-track::after { transform: translateX(16px); }

/* 채널 탐색 모달 — 넓이 확장 */
.chat-modal-browse { width: 440px; }

/* 채널 탐색 항목 */
.ch-browse-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; cursor: pointer; transition: background .12s;
}
.ch-browse-item:hover { background: var(--surface-2); }
.ch-browse-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--primary-soft); color: var(--primary);
  font-size: 18px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
}
.ch-browse-info { flex: 1; min-width: 0; }
.ch-browse-name {
  font-size: 13.5px; font-weight: 700; color: var(--text-strong);
  display: flex; align-items: center; gap: 4px;
}
.ch-lock-ic { width: 12px; height: 12px; flex-shrink: 0; }
.ch-browse-topic { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 참여/참여중 버튼 */
.btn-primary-sm {
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .12s;
}
.btn-primary-sm:hover { background: var(--primary-strong, #1d4ed8); }
.btn-primary-sm:disabled { opacity: .6; cursor: default; }
.btn-ghost-sm {
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  background: none; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: default; white-space: nowrap; flex-shrink: 0;
}
.ch-btn-joined { }

/* 탐색 모달 하단 새 채널 만들기 버튼 */
.btn-outline-sm {
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
  background: none; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--r-pill);
  cursor: pointer; transition: background .12s;
}
.btn-outline-sm:hover { background: var(--primary-soft); }

/* 방 목록 아이템 — 카카오워크식 우측 세로 스택(시각↑ 배지↓) */
.chat-room-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 6px;
  border-radius: var(--r-lg); cursor: pointer;
  transition: background .12s;
  min-height: 64px;
}
.chat-room-item:hover { background: var(--surface-2); }
.chat-room-item.active {
  background: var(--primary-softer);
}
/* 활성 방 — 좌측 액센트 바 */
.chat-room-item.active::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 28px; border-radius: var(--r-pill); background: var(--primary);
}
.chat-room-item .avatar {
  width: 48px; height: 48px; font-size: 16px; font-weight: 700; flex-shrink: 0;
  border-radius: 14px; /* 카톡식 squircle */
}
/* 그룹/채널 2x2 아바타 그리드 */
.chat-room-group-avatar {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border-radius: 14px; overflow: hidden; gap: 1.5px; background: var(--border);
}
.chat-avatar-tile {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--surface-3);
}
/* 단일 아바타 */
.chat-room-single-avatar {
  width: 48px; height: 48px; font-size: 16px; font-weight: 700;
  border-radius: 14px;
}
/* 멤버수 레이블 */
.chat-room-member-count {
  font-size: 11px; color: var(--text-muted); font-weight: 500; flex-shrink: 0; margin-left: 2px;
}
/* 중앙 메타 + 우측 스택(세로) 래퍼 */
.chat-room-meta-wrap {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
}
.chat-room-meta { flex: 1; min-width: 0; }
.chat-room-name-row {
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.chat-room-name {
  font-size: 14px; font-weight: 700; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
/* 우측 세로 스택 — 시각(위) / 배지(아래) */
.chat-room-right-stack {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0; align-self: stretch; justify-content: center;
}
.chat-room-time { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.chat-room-preview-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
}
.chat-room-preview {
  font-size: 12.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.chat-unread-badge {
  flex-shrink: 0; min-width: 18px; height: 18px;
  background: var(--primary); color: #fff; /* KOG 블루 배지 */
  border-radius: 9px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.chat-room-empty {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
}

/* 대화창 */
.chat-main {
  grid-area: main;
  display: flex; flex-direction: column;
  background: var(--surface-2); overflow: hidden; position: relative;
}
.chat-conv-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.chat-conv-title {
  font-weight: 700; font-size: 15px; color: var(--text-strong);
}
.chat-back-btn { display: none; } /* 모바일에서만 표시 */
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.chat-new-msg-btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 86px; z-index: 20;
  background: var(--surface); color: var(--primary);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .12s;
}
.chat-new-msg-btn:hover { background: var(--surface-2); }
.chat-msg-empty {
  text-align: center; color: var(--text-muted);
  font-size: 13px; margin: auto;
}
.chat-date-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0;
}
.chat-date-divider span {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 3px 12px;
  border-radius: var(--r-pill);
}
.chat-msg-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; margin-bottom: 0;
}
.chat-msg-row.mine { flex-direction: row-reverse; }
.chat-msg-row.grouped { margin-top: 2px; }
.chat-avatar-placeholder { width: var(--chat-avatar); flex-shrink: 0; }
.chat-msg-avatar { width: var(--chat-avatar); height: var(--chat-avatar); font-size: 12.5px; flex-shrink: 0; }
.chat-msg-body { display: flex; flex-direction: column; max-width: 66%; }
.chat-msg-row.mine .chat-msg-body { align-items: flex-end; }
.chat-sender-name {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 4px; padding-left: 4px;
}
.chat-bubble-wrap { display: flex; align-items: flex-end; gap: 5px; }
.chat-msg-row.mine .chat-bubble-wrap { flex-direction: row-reverse; }
.chat-bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--chat-bubble-r); padding: 9px 13px;
  font-size: 14px; line-height: 1.5; color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap;
  max-width: 100%;
}
/* 봇 메시지 마크다운 본문 — renderAnswer가 블록 구조를 만드므로 pre-wrap 해제(빈 줄 중복 방지) */
.chat-bubble-md { white-space: normal; }
.chat-bubble-md .ai-md-p:last-child { margin-bottom: 0; }
/* 방향 모서리 — 상대는 좌하단, 내것은 우하단을 살짝 줄여 말풍선 방향감 */
.chat-msg-row:not(.mine) .chat-bubble { border-bottom-left-radius: var(--chat-bubble-tail-r); }
.chat-msg-row.mine .chat-bubble {
  background: var(--primary); border-color: transparent;
  color: #fff;
  border-bottom-right-radius: var(--chat-bubble-tail-r);
  box-shadow: 0 1px 2px rgba(45,91,255,.18);
}
/* 연속 메시지(.grouped) — 발신자 쪽 안쪽 모서리도 줄여 묶음감 */
.chat-msg-row.grouped:not(.mine) .chat-bubble { border-top-left-radius: var(--chat-bubble-tail-r); }
.chat-msg-row.grouped.mine .chat-bubble { border-top-right-radius: var(--chat-bubble-tail-r); }
.chat-bubble.deleted {
  color: var(--text-faint); font-style: italic;
  background: var(--surface-2); border-color: var(--border);
}
.chat-read-receipt {
  font-size: 11px; color: var(--primary); font-weight: 700; line-height: 1.4;
  align-self: flex-end; white-space: nowrap; margin-bottom: 2px;
}
.chat-msg-time {
  font-size: 10px; color: var(--text-faint); margin-top: 2px; padding: 0 2px;
}
.chat-msg-row.mine .chat-msg-time { text-align: right; }

/* 첨부 */
.chat-attach-img-wrap { max-width: 240px; margin-top: 4px; }
.chat-attach-img {
  max-width: 100%; border-radius: var(--r-md);
  display: block; cursor: pointer;
}
.chat-attach-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text);
  max-width: 220px; overflow: hidden;
  margin-top: 4px;
}
/* 내 말풍선(블루) 안 파일칩 — 흰 반투명으로 대비 */
.chat-msg-row.mine .chat-bubble .chat-attach-chip {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: #fff;
}
.chat-msg-row.mine .chat-bubble .chat-attach-size { color: rgba(255,255,255,.7); }
.chat-attach-chip.pending { background: var(--primary-soft); border-color: var(--primary); }
.chat-attach-chip .ic { flex-shrink: 0; width: 15px; height: 15px; }
.chat-attach-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attach-size { color: var(--text-faint); font-size: 11px; flex-shrink: 0; }
.chat-attach-remove {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint); color: #fff; font-size: 12px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; border: none;
}

/* 입력창 — 도구버튼 · textarea · 전송 버튼 가로 한 줄 */
.chat-input-area {
  display: flex; flex-direction: row; align-items: flex-end; gap: 8px;
  padding: 10px 14px 12px; border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
/* 메신저앱 모드 도구줄(이모지·멘션·첨부) — 첨부버튼 그대로 */
.chat-input-tools {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.chat-attach-btn {
  cursor: pointer; width: 36px; height: 36px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--text-muted); transition: background .12s, color .12s;
}
.chat-attach-btn:hover { background: var(--surface-2); color: var(--text); }
.chat-input-wrap {
  flex: 1;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 22px; padding: 6px 14px;
  transition: border-color .15s;
}
.chat-input-wrap:focus-within {
  border-color: var(--primary); background: var(--surface);
}
.chat-input {
  width: 100%; min-height: 24px; max-height: 120px;
  border: none; border-radius: 0;
  padding: 2px 0; font-size: 14px; font-family: inherit;
  background: transparent; color: var(--text);
  resize: none; outline: none; line-height: 1.5; overflow-y: auto;
}
.chat-input::placeholder { color: var(--text-faint); }
.chat-input:focus { border: none; background: transparent; }
.chat-send-btn {
  align-self: flex-end; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%;
  padding: 0;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, transform .1s;
}
.chat-send-btn:not(:disabled):active { transform: scale(.92); }
.chat-send-btn:not(:disabled) { background: var(--primary); color: #fff; }
.chat-send-btn:not(:disabled):hover { background: var(--primary-strong); }
/* 입력 없을 때 비활성 — 회색 톤(JS가 disabled 토글) */
.chat-send-btn:disabled { background: var(--surface-3); color: var(--text-faint); cursor: default; }
.chat-send-btn .ic { width: 16px; height: 16px; }
.chat-attach-preview {
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 8px 16px; border-top: 1px solid var(--border);
  background: var(--surface);
}

/* 답장 바 — 입력창 위에 표시되는 인용 대상 미리보기 */
.chat-reply-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-top: 1px solid var(--border);
  background: var(--primary-soft);
  flex-shrink: 0;
}
.chat-reply-bar-inner {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
}
.chat-reply-bar-label {
  font-size: 11px; font-weight: 700; color: var(--primary);
  flex-shrink: 0;
}
.chat-reply-bar-preview {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-reply-bar-preview strong { color: var(--text-strong); font-weight: 600; }
.chat-reply-bar-cancel {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.chat-reply-bar-cancel:hover { background: var(--surface-2); color: var(--text); }

/* 인용 블록 — 말풍선 위에 표시, 클릭 시 원문 스크롤 */
.chat-reply-quote {
  display: flex; flex-direction: column; gap: 2px;
  padding: 5px 10px;
  border-left: 3px solid var(--primary);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: 5px;
  cursor: pointer;
  max-width: 100%; overflow: hidden;
  transition: background .12s;
}
.chat-reply-quote:hover { background: var(--primary-soft); }
.chat-msg-row.mine .chat-reply-quote {
  border-left-color: rgba(0,0,0,.3);
  background: rgba(0,0,0,.07);
  text-align: left;
}
.chat-msg-row.mine .chat-reply-quote:hover { background: rgba(0,0,0,.12); }
.chat-reply-quote-name {
  font-size: 11px; font-weight: 700; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-msg-row.mine .chat-reply-quote-name { color: rgba(0,0,0,.7); }
.chat-reply-quote-body {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-msg-row.mine .chat-reply-quote-body { color: rgba(0,0,0,.6); }

/* 답장 버튼 — 말풍선 우측에 hover 시 표시 */
.chat-reply-btn {
  opacity: 0; pointer-events: none;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  transition: opacity .15s, background .12s, color .12s;
}
.chat-reply-btn .ic { width: 13px; height: 13px; }
.chat-msg-row:hover .chat-reply-btn { opacity: 1; pointer-events: auto; }
.chat-reply-btn:hover { background: var(--primary-soft); color: var(--primary); }
/* 내 메시지(mine) 버튼은 말풍선 왼쪽에 오도록 bubble-wrap이 row-reverse */

/* 메시지 회수 버튼 — 내 메시지 hover 시 표시, 답장 버튼 같은 패턴 */
.chat-recall-btn {
  opacity: 0; pointer-events: none;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  transition: opacity .15s, background .12s, color .12s;
}
.chat-recall-btn .ic { width: 13px; height: 13px; }
.chat-msg-row.mine:hover .chat-recall-btn { opacity: 1; pointer-events: auto; }
.chat-recall-btn:hover { background: var(--danger-soft); color: var(--danger); }
/* 모바일 — 내 메시지에 항상 표시 */
@media (hover: none) {
  .chat-msg-row.mine .chat-recall-btn { opacity: 1; pointer-events: auto; }
}

/* OPS-20 — 반응 추가(+😊) 버튼 — 답장 버튼과 같은 hover 패턴 */
.chat-react-btn {
  opacity: 0; pointer-events: none;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  transition: opacity .15s, background .12s;
}
.chat-msg-row:hover .chat-react-btn { opacity: 1; pointer-events: auto; }
.chat-react-btn:hover { background: var(--primary-soft); }
/* 메시지 → 업무 만들기 버튼 — 반응 버튼과 동일 스타일 */
.chat-totask-btn {
  opacity: 0; pointer-events: none;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: center;
  transition: opacity .15s, background .12s;
}
.chat-msg-row:hover .chat-totask-btn { opacity: 1; pointer-events: auto; }
.chat-totask-btn:hover { background: var(--primary-soft); }
/* 모바일 — 항상 표시(hover 없음) */
@media (hover: none) {
  .chat-react-btn { opacity: 1; pointer-events: auto; }
  .chat-totask-btn { opacity: 1; pointer-events: auto; }
}

/* 채팅 본문 업무 칩 — /task·#task 딥링크가 제목·상태 보이는 칩으로 */
.chat-task-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  max-width: 100%; padding: 1px 9px 1px 7px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.chat-task-chip:hover { filter: brightness(.97); }
.chat-task-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.chat-task-chip-status { font-size: 11px; font-weight: 600; opacity: .85; padding-left: 5px; margin-left: 3px; border-left: 1px solid currentColor; }

/* F3 — 채팅 메시지 아래 업무 액션 카드 */
.chat-taskcard {
  margin-top: 6px; max-width: 320px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.chat-taskcard-main { display: flex; align-items: center; gap: 8px; }
.chat-taskcard-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-taskcard-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.chat-taskcard-status.s-done { background: rgba(46,160,67,.15); color: #2EA043; }
.chat-taskcard-status.s-doing { background: var(--primary-soft); color: var(--primary); }
.chat-taskcard-status.s-wait { background: var(--surface-2); color: var(--text-muted); }
.chat-taskcard-status.s-reject { background: rgba(229,72,77,.15); color: #E5484D; }
.chat-taskcard-meta { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.chat-taskcard-actions { display: flex; gap: 6px; margin-top: 8px; }
.chat-taskcard-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: background .12s;
}
.chat-taskcard-btn:hover { background: var(--surface); }
.chat-taskcard-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.chat-taskcard-btn.primary:hover { filter: brightness(1.05); }
.chat-taskcard-btn:disabled { opacity: .5; cursor: default; }

/* F4 — 메신저 '오늘 마감 N건' 배너 (방 목록 상단) */
.chat-due-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 10px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--primary-soft); color: var(--text-strong); font-size: 13px;
}
.chat-due-banner-ic { flex: 0 0 auto; font-size: 15px; }
.chat-due-banner-text { flex: 1; min-width: 0; }
.chat-due-banner-text b { color: var(--primary); }
.chat-due-banner-go {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 4px 10px;
  border-radius: 8px; background: var(--primary); color: #fff; cursor: pointer;
}
.chat-due-banner-x { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); padding: 2px 4px; cursor: pointer; }
.chat-due-banner-x:hover { color: var(--text); }

/* F5 — '이 채널의 업무' 목록(우측 패널) */
.chat-channel-tasks { display: flex; flex-direction: column; gap: 3px; }
.chat-channel-task {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 6px; border-radius: 8px; background: none; cursor: pointer; text-align: left;
}
.chat-channel-task:hover { background: var(--surface-2); }
.chat-channel-task-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 채팅 프로필 카드 — 아바타·이름 클릭 시(카톡식) */
.chat-msg-avatar, .chat-sender-name, .chat-fav-member { cursor: pointer; }
.chat-profile-card {
  position: relative; width: 280px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 16px; padding: 28px 20px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.chat-profile-close { position: absolute; top: 8px; right: 8px; color: var(--text-muted); }
.chat-profile-avatar .avatar.xl { width: 88px; height: 88px; font-size: 34px; border-radius: 50%; }
.chat-profile-name {
  margin-top: 14px; font-size: 18px; font-weight: 700; color: var(--text-strong);
  display: flex; align-items: center; gap: 6px;
}
.chat-profile-bot { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 1px 7px; border-radius: var(--r-pill); }
.chat-profile-sub { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.chat-profile-email { margin-top: 2px; font-size: 12px; color: var(--text-faint); }
.chat-profile-dm { margin-top: 18px; width: 100%; }

/* OPS-20 — 반응 칩 줄 */
.chat-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.chat-msg-row.mine .chat-reactions { justify-content: flex-end; }
.chat-reaction-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.4; cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
  color: var(--text-strong);
}
.chat-reaction-chip:hover { background: var(--primary-softer); border-color: var(--primary); transform: scale(1.08); }
.chat-reaction-chip.mine {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary);
}
.chat-reaction-chip.mine:hover { background: var(--primary); color: #fff; }
.chat-reaction-count {
  font-size: 11px; font-weight: 600; color: inherit;
}

/* OPS-20 — 반응 피커 팝오버 */
.chat-reaction-picker {
  position: fixed; z-index: 9999;
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.chat-reaction-picker-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: none; border: none; font-size: 18px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .1s;
}
.chat-reaction-picker-btn:hover { background: var(--primary-soft); transform: scale(1.2); }

/* 카톡 PC식 우클릭 컨텍스트 메뉴 */
.chat-context-menu {
  position: fixed; z-index: 1000; min-width: 132px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 4px; display: flex; flex-direction: column;
  animation: ctxMenuIn .1s ease;
}
@keyframes ctxMenuIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.chat-context-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: 13px; color: var(--text-strong);
  background: none; border: none; border-radius: var(--r-sm); cursor: pointer;
  white-space: nowrap;
}
.chat-context-item:hover { background: var(--surface-2); }
.chat-context-item.danger { color: #e0342b; }
.chat-context-item.danger:hover { background: rgba(224,52,43,.08); }

/* 스크롤 하이라이트 — 원문 메시지 클릭으로 이동 시 잠깐 강조 */
@keyframes chat-highlight-flash {
  0%   { background: var(--primary-soft); }
  80%  { background: var(--primary-soft); }
  100% { background: transparent; }
}
.chat-msg-row.reply-highlight .chat-bubble {
  animation: chat-highlight-flash 1.2s ease forwards;
}

/* 빈 상태 */
.chat-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; color: var(--text-faint); padding: 24px;
}
.chat-empty-icon {
  width: 76px; height: 76px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.chat-empty-icon .ic { width: 34px; height: 34px; stroke-width: 1.4; }
.chat-empty-text {
  font-size: 15px; font-weight: 700; color: var(--text-strong); text-align: center;
}
.chat-empty-sub {
  font-size: 13px; color: var(--text-muted); text-align: center; margin-top: -6px;
}

/* 새 DM 모달 */
.chat-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17,24,39,.35); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.chat-modal {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 360px; max-height: 70vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.chat-modal-body { overflow-y: auto; padding: 8px 0; max-height: 40vh; }
.chat-user-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; cursor: pointer; transition: background .12s;
}
.chat-user-pick:hover { background: var(--surface-2); }
.chat-user-pick.checked { background: var(--primary-soft); }
.chat-user-pick-check {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--primary); flex-shrink: 0;
}
.chat-user-pick.checked .chat-user-pick-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-user-pick-info { display: flex; flex-direction: column; }
.chat-user-pick-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.chat-user-pick-role { font-size: 11px; color: var(--text-faint); }

/* 선택된 사용자 칩 목록 */
.chat-modal-selected {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 20px; min-height: 0; transition: padding .12s;
}
.chat-modal-selected:not(:empty) { padding: 10px 20px 0; }
.chat-modal-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
}
.chat-modal-chip:hover { background: var(--primary); color: #fff; }

/* 검색 입력 */
.chat-modal-search-wrap { padding: 10px 20px 4px; }
.chat-modal-search {
  width: 100%; padding: 7px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; color: var(--text-strong); outline: none;
}
.chat-modal-search:focus { border-color: var(--primary); background: var(--surface); }

/* 그룹 이름 입력 행 */
.chat-modal-group-row { padding: 8px 20px 0; }
.chat-modal-group-input {
  width: 100%; padding: 8px 12px; border-radius: var(--r-md);
  border: 1.5px solid var(--primary); background: var(--surface);
  font-size: 13px; color: var(--text-strong); outline: none;
}

/* 모달 하단 버튼 */
.chat-modal-footer { padding: 12px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }

/* 방 목록 온라인 점 */
.chat-room-online-dot {
  position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px;
  border-radius: 50%; background: #3dc95a; border: 2px solid var(--surface);
}
.chat-room-avatar-wrap { position: relative; flex-shrink: 0; }

/* 직원 뷰(friends) 스타일 */

/* 내 프로필 행 (카톡 친구탭 최상단) */
.chat-my-profile {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px 12px;
  cursor: default;
}
.chat-my-avatar {
  width: 52px; height: 52px; font-size: 18px; font-weight: 700; flex-shrink: 0;
  border-radius: 18px; /* 큰 squircle */
}
.chat-my-name {
  font-size: 15px; font-weight: 700; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 구분선 */
.chat-list-sep {
  height: 1px; background: var(--border); margin: 0 0 4px;
}

/* 검색 입력 래퍼 — 직원탭 / 채팅탭 공용 */
.chat-list-search-wrap {
  position: relative;
  padding: 0 12px 8px;
  flex-shrink: 0;
  display: flex; align-items: center;
}
.chat-list-search-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  pointer-events: none; color: var(--text-faint); display: flex; align-items: center;
}
.chat-list-search-icon svg { width: 16px; height: 16px; }
.chat-list-search {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px 0 34px;
  height: 36px; line-height: 36px;
  font-size: 13px; color: var(--text);
  outline: none;
  transition: border-color .12s, background .12s;
}
.chat-list-search::placeholder { color: var(--text-faint); }
.chat-list-search:focus { border-color: var(--primary-soft); background: var(--surface); }

.chat-friends-count {
  font-size: 11px; font-weight: 600; color: var(--text-faint);
  padding: 8px 16px 4px; letter-spacing: .03em;
}
.chat-friend-item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 14px; margin: 1px 6px;
  border-radius: var(--r-lg); cursor: pointer;
  transition: background .12s;
}
.chat-friend-item:hover { background: var(--surface-2); }
.chat-friend-avatar {
  width: 46px; height: 46px; font-size: 16px; font-weight: 700; flex-shrink: 0;
  border-radius: 16px; /* squircle */
}
.chat-friend-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-friend-name {
  font-size: 14px; font-weight: 700; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-friend-status {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Phase C — 즐겨찾기 별 토글 버튼 */
.chat-friend-fav-btn {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--text-faint); border-radius: var(--r-md);
  opacity: 0; transition: opacity .12s, color .12s;
}
.chat-friend-item:hover .chat-friend-fav-btn,
.chat-friend-fav-btn.active { opacity: 1; }
.chat-friend-fav-btn.active { color: #f59e0b; }
.chat-friend-fav-btn:hover { color: #f59e0b; background: var(--surface-2); }
.chat-friend-fav-btn svg { width: 14px; height: 14px; }

/* 참여자 패널 (대화창 내 오버레이) */
.chat-members-panel {
  position: absolute; top: 56px; right: 12px; z-index: 30;
  width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.chat-members-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-strong); flex-shrink: 0;
}
.chat-members-list { padding: 6px 0; overflow-y: auto; }
.chat-member-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
}
.chat-member-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-member-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-member-name { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-member-title { font-size: 11px; color: var(--text-faint); }
.chat-member-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.chat-member-kick-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--text-muted); padding: 2px 6px;
  border-radius: var(--r-sm); transition: background 0.15s, color 0.15s;
}
.chat-member-kick-btn:hover { background: var(--danger-soft, #fee2e2); color: var(--danger, #dc2626); }
.chat-member-kick-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-member-invite-btn { font-size: 12px; padding: 3px 10px; }

/* 팝업·독립앱 부트 모드 (?view=chat) — ops-one 전역 UI를 메신저 창에서 완전 차단 */
/* chat-popup-mode 와 messenger-app 양쪽 동일 숨김 목록 */
.chat-popup-mode .sidebar,
.chat-popup-mode .sidebar-toggle,
.chat-popup-mode .topbar,
.chat-popup-mode .opstabs,
.messenger-app .opstabs,
.chat-popup-mode .m-topbar,
.chat-popup-mode .bottomnav,
.chat-popup-mode .sticky-cta,
.chat-popup-mode .ai-fab,
.chat-popup-mode .ai-nudge,
.chat-popup-mode #morning-overlay,
.chat-popup-mode #morning-placeholder,
.chat-popup-mode #opsSplash,
.messenger-app .sidebar,
.messenger-app .sidebar-toggle,
.messenger-app .topbar,
.messenger-app .m-topbar,
.messenger-app .bottomnav,
.messenger-app .sticky-cta,
.messenger-app .ai-fab,
.messenger-app .ai-nudge,
.messenger-app #morning-overlay,
.messenger-app #morning-placeholder,
/* A: 메신저 컨텍스트에서 모바일 미리보기 버튼 숨김 */
.chat-popup-mode #mobile-preview-toggle,
.messenger-app #mobile-preview-toggle { display: none !important; }

.chat-popup-mode .app,
.messenger-app .app { display: block; }
.chat-popup-mode .main,
.messenger-app .main { margin: 0; padding: 0; width: 100%; }
.chat-popup-mode .page,
.messenger-app .page { padding: 0; overflow: hidden; }

/* 팝업 모드(기존 2-pane): 레일·패널 없이 목록+대화창만.
   ⚠️ 독립앱(?view=chat)은 chat-popup-mode + messenger-app 두 클래스를 함께 단다.
   messenger-app은 4단 적응형 셸이므로, 이 레거시 2-pane 규칙이 4단을 덮어쓰지 않도록
   :not(.messenger-app)으로 한정한다(순수 팝업에서만 2-pane 유지). */
.chat-popup-mode:not(.messenger-app) .chat-root {
  height: 100vh;
  height: 100dvh;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}
/* High(QA) — 팝업 2-pane에서 레일·우측패널 확실히 제거 (4단 독립앱은 제외) */
.chat-popup-mode:not(.messenger-app) .chat-rail,
.chat-popup-mode:not(.messenger-app) .chat-side-panel { display: none !important; }

/* 팝업 창(420px 이하)에서는 좌측 패널을 더 좁게 */
@media (max-width: 500px) {
  .chat-popup-mode:not(.messenger-app) .chat-root { grid-template-columns: 1fr; grid-template-areas: "sidebar"; }
}

/* ── 독립창(?view=chat) — messenger-app body 클래스 — 풀스크린 적응형 셸 ── */
/* Phase A: .msg-shell 중간 래퍼 없이 .chat-root 자체가 position:fixed 풀스크린. */
.messenger-app .chat-root,
.chat-root.chat-root-fullscreen {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 10;
}

/* ============ 메신저 4단 레이아웃 (카카오워크풍·KOG) ============ */
/* msg-shell: 하위호환 유지 — Phase A 이후 신규 독립창은 .chat-root-fullscreen 사용 */
.msg-shell {
  position: fixed; inset: 0; z-index: 10; background: var(--surface);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 250px;
  grid-template-rows: 100vh;
  overflow: hidden;
  font-family: 'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR','Pretendard',sans-serif;
}
.msg-shell.panel-collapsed {
  grid-template-columns: 62px minmax(0, 1fr);
}

/* msg-chat-area: chat.js _renderShell이 주입하는 sidebar+main의 2-pane flex (하위호환 유지) */
.msg-chat-area {
  display: flex; flex-direction: row;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  --chat-bubble-r: 18px;
  --chat-bubble-tail-r: 6px;
  --chat-avatar: 34px;
}
/* 4단 메신저 모드에서 sidebar 폭 초기값 */
.msg-chat-area .chat-sidebar { width: 280px; flex-shrink: 0; }
.msg-chat-area .chat-main { flex: 1; min-width: 0; }

/* 본문(#chat-root)을 본문 칸(2열)에 고정 — 앱 레일이 숨겨지거나 비어도
   grid 자동배치로 62px 레일 칸에 밀려 찌그러지는 것을 원천 차단한다. */
.msg-shell > #chat-root { grid-column: 2; }
.msg-shell > .chat-rail { grid-column: 1; }
.msg-shell > .chat-side-panel { grid-column: 3; }

/* ① 앱 아이콘 레일 */
.chat-rail {
  grid-area: rail;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 12px 0;
  width: 62px; flex-shrink: 0;
  background: var(--surface-2); border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
}
.chat-rail .rail-bottom {
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 4px;
}
.chat-rail-btn {
  position: relative; width: 46px; min-height: 48px; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 5px 2px;
  color: var(--text-muted);
  cursor: pointer; transition: background .12s, color .12s; border: none; background: transparent;
}
/* 캡션이 없는 버튼(todo·board 등)은 높이 44px */
.chat-rail-btn:not(:has(.chat-rail-caption)) {
  height: 44px; min-height: 44px; padding: 0;
}
/* 직원·채팅 스위처 버튼 캡션 */
.chat-rail-caption {
  font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: -.01em;
  color: inherit; text-align: center;
}
/* 앱 레일 채팅 안읽음 배지 */
.chat-rail-badge {
  position: absolute; top: 5px; right: 3px;
  min-width: 16px; height: 16px;
  background: var(--primary); color: #fff;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  border: 1.5px solid var(--surface-2);
}
.chat-rail-btn:hover { background: var(--surface-3); color: var(--text-strong); }
.chat-rail-btn.active { background: var(--primary-soft); color: var(--primary); }
.chat-rail-btn.active::before {
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: var(--r-pill); background: var(--primary);
}
.chat-rail-btn .ic { width: 22px; height: 22px; }
.chat-rail-btn .rail-badge {
  position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: var(--r-pill); display: grid; place-items: center; border: 2px solid var(--surface-2);
}
.chat-rail-avatar {
  width: 36px; height: 36px; font-size: 13px; cursor: pointer;
  border-radius: 50%; margin-top: 4px;
}

/* ② 채팅 목록 헤더 (카카오워크식 "채팅 ▾") */
.chat-list-col {
  display: flex; flex-direction: column; background: var(--surface);
  border-right: 1px solid var(--border); overflow: hidden;
}
.chat-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.chat-list-title {
  font-size: 17px; font-weight: 800; color: var(--text-strong); letter-spacing: -.02em;
}
.chat-list-title .caret { font-size: 13px; color: var(--text-muted); margin-left: 2px; }
.chat-list-tools { display: flex; gap: 2px; }
.chat-channel-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-muted); margin-left: 6px; flex-shrink: 0;
}

/* ③ 대화창 헤더 (4단 모드 확장) */
.chat-conv-avatar-wrap { position: relative; flex-shrink: 0; }
.chat-online-dot {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--ok, #16A34A); border: 2px solid var(--surface);
}
.chat-conv-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-conv-title-text { font-size: 15px; font-weight: 700; color: var(--text-strong); line-height: 1.2; }
.chat-conv-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.chat-conv-tools {
  margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.chat-conv-tools .icon-btn {
  width: 34px; height: 34px; color: var(--text-muted); border-radius: var(--r-md);
}
.chat-conv-tools .icon-btn:hover { background: var(--surface-2); color: var(--text-strong); }

/* 드래그 스플리터 — 4단 메신저 전용(리스트|대화 사이) */
/* 기본(일반 2-pane grid) 에서는 숨김 */
.chat-splitter { display: none; }
/* 4단 메신저 flex 컨텍스트에서만 표시 */
.msg-chat-area .chat-splitter {
  display: block;
  width: 5px; flex-shrink: 0; cursor: col-resize;
  background: transparent;
  transition: background .15s;
  z-index: 5; position: relative;
}
.msg-chat-area .chat-splitter:hover,
.msg-chat-area .chat-splitter.dragging { background: var(--primary-soft); }
.msg-chat-area .chat-splitter::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 2px; height: 32px; border-radius: 1px;
  background: var(--border); pointer-events: none;
}
.msg-chat-area .chat-splitter:hover::after,
.msg-chat-area .chat-splitter.dragging::after { background: var(--primary); }

/* 활성 방 없음(첫 화면) — 목록만 꽉 채워 2단으로. 대화창·스플리터 숨김(카톡식).
   grid/flex·미디어쿼리와 무관하게 동작하도록 #chat-root을 단일 flex로 강제하고
   사이드바가 전폭을 차지하게 한다(id 셀렉터 + !important로 모든 폭에서 우선). */
#chat-root.no-active-room {
  display: flex !important;
  flex-direction: row !important;
  grid-template-columns: none !important;
}
#chat-root.no-active-room > .chat-main,
#chat-root.no-active-room > .chat-splitter { display: none !important; }
#chat-root.no-active-room > .chat-sidebar {
  flex: 1 1 100% !important; width: auto !important; max-width: none !important;
}

/* 말풍선 안 액션 버튼 */
.chat-bubble-action {
  display: block; width: 100%; margin-top: 8px; padding: 8px 12px;
  font-size: 13px; font-weight: 700; text-align: center; border: none; cursor: pointer;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--surface-2); color: var(--primary);
}
.chat-msg-row.mine .chat-bubble-action {
  background: rgba(255,255,255,.18); color: #fff; border-top-color: rgba(255,255,255,.25);
}

/* 입력바 도구 줄 (이모지·멘션·첨부) */
.chat-input-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; align-self: flex-start; }
.chat-input-tools .icon-btn { width: 34px; height: 34px; }

/* M 이하 IA 드롭다운 버튼 — 레일이 숨겨진 폭(≤1023px)에서만 표시 */
.chat-ia-dropdown-btn { display: none; }
@container (max-width: 1023px) {
  .chat-ia-dropdown-btn { display: flex; }
}
@media (max-width: 1023px) {
  .chat-root:not([data-cq]) .chat-ia-dropdown-btn { display: flex; }
}

/* IA 드롭다운 메뉴 */
.chat-ia-dropdown {
  position: absolute;
  z-index: 2000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.14));
  display: flex; flex-direction: column;
  min-width: 160px;
  overflow: hidden;
}
.chat-ia-dropdown-item {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--text-strong);
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .1s;
}
.chat-ia-dropdown-item:hover { background: var(--surface-2); }
.chat-ia-dropdown-item.active { font-weight: 700; color: var(--primary); background: var(--primary-soft); }

/* ④ 우측 정보 패널 */
.chat-side-panel {
  grid-area: panel;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 14px; background: var(--surface);
  border-left: 1px solid var(--border); overflow-y: auto;
}
/* 패널 접힘 — panel-collapsed는 이제 .chat-root에도 적용 */
.msg-shell.panel-collapsed .chat-side-panel,
.chat-root.panel-collapsed .chat-side-panel { display: none; }
.chat-side-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-xs);
}
.chat-side-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.chat-side-card-title { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.chat-side-card-link { font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; }
.chat-side-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 8px 0; text-align: center;
}
.chat-side-empty-icon {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
}
.chat-side-empty-icon .ic { width: 26px; height: 26px; }
.chat-side-empty-text { font-size: 12.5px; color: var(--text-muted); }
.chat-fav-member {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--r-md); cursor: pointer;
}
.chat-fav-member:hover { background: var(--surface-2); }
.chat-fav-member .avatar { width: 32px; height: 32px; font-size: 12px; }
.chat-fav-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }

/* 우측 패널 — 오늘 일정(오늘·지난 마감 내 업무) 리스트 */
.chat-sched-list { display: flex; flex-direction: column; gap: 2px; }
.chat-sched-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px; border: none; background: none; cursor: pointer;
  border-radius: var(--r-md); text-align: left;
}
.chat-sched-item:hover { background: var(--surface-2); }
.chat-sched-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: var(--r-pill);
}
.chat-sched-badge.today { color: var(--primary); background: var(--primary-soft); }
.chat-sched-badge.overdue { color: #b91c1c; background: #fee2e2; }
.chat-sched-title {
  font-size: 13px; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 우측 패널 — 방 정보 + 대화상대 (카톡식) */
.chat-side-room-head {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.chat-side-room-avatar { width: 64px; height: 64px; font-size: 22px; font-weight: 700; border-radius: 22px; }
.chat-side-room-name { font-size: 15px; font-weight: 700; color: var(--text-strong); text-align: center; }
.chat-side-room-sub { font-size: 12px; color: var(--text-muted); }
.chat-side-members { display: flex; flex-direction: column; gap: 2px; }
.chat-side-member {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--r-md);
}
.chat-side-member:hover { background: var(--surface-2); }
.chat-side-member-avatar { width: 34px; height: 34px; font-size: 13px; font-weight: 700; flex-shrink: 0; border-radius: 12px; }
.chat-side-member-name {
  font-size: 13px; color: var(--text-strong); display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-side-me-badge {
  font-size: 10px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); border-radius: 4px; padding: 1px 5px;
}

/* 메신저 셸 반응형 */
@media (max-width: 1279px) {
  .msg-shell { grid-template-columns: 62px minmax(0, 1fr); }
  .msg-shell .chat-side-panel { display: none; }
}
@media (max-width: 1023px) {
  .msg-chat-area { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .msg-shell { grid-template-columns: 1fr; }
  .msg-shell .chat-rail { display: none; }
  .msg-shell .chat-side-panel { display: none; }
  /* 단일 컬럼이므로 본문을 1열로 (위 grid-column:2 고정 해제) */
  .msg-shell > #chat-root { grid-column: 1; }
  .msg-chat-area {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--bottomnav-h, 0px));
  }
}

/* 모바일 반응형 (기존 2-pane) */
@media (max-width: 768px) {
  .chat-root {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--bottomnav-h));
  }
  .chat-main { display: none; } /* 기본: 사이드바만 */
  .chat-main.chat-main-visible { display: flex; position: fixed; inset: 0; z-index: 50; }
  .chat-sidebar.chat-sidebar-hidden { display: none; }
  .chat-back-btn { display: flex; }
  .chat-msg-body { max-width: 76%; }
  /* 모바일에서도 레일 고정폭 유지 */
  .chat-nav-rail { width: 52px; }
  /* 메신저 액션 버튼 — 모바일 터치타깃 44px */
  .chat-input-tools .icon-btn { min-width: var(--touch-min); min-height: var(--touch-min); width: var(--touch-min); height: var(--touch-min); }
  .chat-conv-tools .icon-btn { min-width: var(--touch-min); min-height: var(--touch-min); width: var(--touch-min); height: var(--touch-min); }
  .chat-send-btn { width: var(--touch-min); height: var(--touch-min); }
}

/* 사이드바 거래처 트리 — 부모 토글 행 + 하위 들여쓰기 (거래처 관리 메뉴) */
.nav-tree { display: flex; flex-direction: column; }
.nav-tree-children { margin-left: 16px; display: flex; flex-direction: column; }
.nav-tree.collapsed .nav-tree-children { display: none; }
.nav-tree-parent { cursor: pointer; }
.nav-tree-parent .tree-chev { margin-left: auto; display: inline-flex; transition: transform .15s ease; }
.nav-tree-parent .tree-chev .ic { width: 14px; height: 14px; }
/* 트리 자식 그룹 소제목 — grp 필드가 바뀌는 지점에 삽입 */
.nav-tree-subhead { font-size: 10px; font-weight: 700; color: var(--text-faint); letter-spacing: .06em; text-transform: none; padding: 10px 8px 3px; }

/* ============ C: 드래그앤드롭 파일 업로드 오버레이 ============ */
.chat-drop-overlay {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  background: rgba(37,99,235,.08); border: 2px dashed var(--primary);
  border-radius: var(--r-lg);
}
.chat-drop-overlay.active { opacity: 1; pointer-events: none; }
.chat-drop-overlay-inner {
  padding: 18px 32px; border-radius: var(--r-lg);
  background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 24px rgba(37,99,235,.3);
}
/* chat-main을 relative로 — 오버레이 absolute 기준점 */
#chat-main { position: relative; }

/* ============ D: 이미지 라이트박스 ============ */
.chat-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.chat-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(10,12,20,.75); backdrop-filter: blur(3px);
  cursor: pointer;
}
.chat-lightbox-content {
  position: relative; z-index: 1; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.chat-lightbox-close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); color: var(--text-strong); border: none; font-size: 16px;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 2;
}
.chat-lightbox-img {
  max-width: 100%; max-height: 80vh; border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0,0,0,.5); display: block;
}
.chat-lightbox-open-btn {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8);
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-lightbox-open-btn:hover { color: #fff; }

/* ============ E: URL 링크 칩 ============ */
.chat-url-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--primary);
  vertical-align: baseline; text-decoration: none;
  transition: background .12s, border-color .12s;
  max-width: 220px; overflow: hidden;
}
.chat-url-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
/* 내 말풍선(노랑 배경) 안 URL 칩 — 어두운 반투명으로 대비 */
.chat-msg-row.mine .chat-bubble .chat-url-chip {
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14); color: #1a4a8a;
}
.chat-msg-row.mine .chat-bubble .chat-url-chip:hover {
  background: rgba(0,0,0,.11);
}
.chat-url-favicon { display: inline-block; flex-shrink: 0; border-radius: 2px; }
.chat-url-chip-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-tree.collapsed .tree-chev { transform: rotate(-90deg); }

/* ============ 2-C: 스레드 패널 + 풋터 ============ */
/* 스레드 풋터 버튼 — 루트 버블 아래 "답글 N개" */
.chat-thread-footer {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 3px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--primary);
  transition: background .12s, border-color .12s;
}
.chat-thread-footer:hover { background: var(--primary-soft); border-color: var(--primary); }
.chat-thread-footer-ic { font-size: 13px; line-height: 1; }
.chat-thread-footer-label { line-height: 1.2; }

/* 스레드 패널 — .chat-main 안 우측 슬라이드 오버레이 */
.chat-thread-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 25;
  width: 320px; max-width: 90%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
}
.chat-thread-panel.open { transform: translateX(0); }

.chat-thread-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-thread-panel-title { font-size: 13px; font-weight: 700; color: var(--text-strong); }

.chat-thread-body {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.chat-thread-loading,
.chat-thread-empty {
  padding: 16px; font-size: 13px; color: var(--text-muted); text-align: center;
}
/* 루트 메시지와 답글 사이 구분선 */
.chat-thread-divider {
  margin: 4px 16px 8px; border-top: 1px solid var(--border);
}

.chat-thread-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-thread-input-area .chat-input {
  flex: 1; min-height: 36px; max-height: 100px; resize: none;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 6px 10px; font-size: 13px; background: var(--surface-2);
}
.chat-thread-input-area .chat-send-btn {
  flex-shrink: 0; height: 34px; padding: 0 14px; font-size: 13px;
}

/* ============ 2-D: @멘션 자동완성 팝업 ============ */
.mention-popup {
  position: fixed; z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 220px; overflow-y: auto;
  padding: 4px 0;
  display: none;
}
.mention-popup-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
  font-size: 13px; color: var(--text-strong);
  transition: background .1s;
}
.mention-popup-item:hover,
.mention-popup-item.active {
  background: var(--primary-soft);
}
.mention-popup-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.mention-popup-name {
  font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* 내가 멘션된 버블 — 연한 파란 틴트 배경 강조 */
.chat-bubble.mentioned {
  background: #EFF6FF;
  border-color: #BFDBFE;
}
.chat-msg-row.mine .chat-bubble.mentioned {
  background: #FEF08A;
  border-color: #FDE047;
}

/* ── Phase B: 레일 ops 임베드 오버레이 ── */
/* .chat-embed-frame — .chat-main 위에 절대 위치로 덮어 대화 DOM 보존 */
.chat-embed-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-page, #F6F7FB);
  z-index: 10;
}

.chat-embed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border, #E5E7EB);
  background: var(--bg-surface, #fff);
  flex-shrink: 0;
  min-height: 36px;
}

.chat-embed-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  flex: 1;
}

.chat-embed-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--brand, #4F46E5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.chat-embed-open-btn:hover {
  background: var(--bg-hover, #F3F4F6);
}
.chat-embed-open-btn .ic {
  width: 13px;
  height: 13px;
}

/* 로딩 스피너 */
.chat-embed-loading {
  position: absolute;
  inset: 36px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.chat-embed-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border, #E5E7EB);
  border-top-color: var(--brand, #4F46E5);
  border-radius: 50%;
  animation: embed-spin 0.7s linear infinite;
}
@keyframes embed-spin { to { transform: rotate(360deg); } }

.chat-embed-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

/* .chat-main은 relative 기준점 필요 */
.chat-main {
  position: relative;
}

/* 앱 서랍 — 메신저 안에서 ops 업무 메뉴를 띄우는 런처 그리드 */
.chat-apps-drawer {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  background: var(--surface);
}
.chat-apps-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; }
.chat-apps-section { margin-bottom: 22px; }
.chat-apps-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .02em; margin: 0 4px 10px;
}
.chat-apps-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
}
.chat-app-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.chat-app-tile:hover { background: var(--primary-soft); border-color: var(--primary); }
.chat-app-tile:active { transform: scale(.97); }
.chat-app-tile-icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs);
}
.chat-app-tile-icon .ic { width: 22px; height: 22px; }
.chat-app-tile-label { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }

/* ── P3 현장 재입고 입력 화면 (.edw-repl-*) ── */
/* 모바일 우선 — 데스크톱 화면 누수 방지를 위해 .edw-repl-root 스코프 안에만 정의 */
.edw-repl-root {
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 16px 120px;
  font-size: 15px;
}
.edw-repl-header { margin-bottom: 8px; }
.edw-repl-title { font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 0; }

/* 스텝 인디케이터 */
.edw-repl-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 20px;
}
.edw-repl-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1;
}
.edw-repl-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2, #f0f0f0); color: var(--text-faint, #aaa);
  border: 2px solid var(--border, #e0e0e0);
}
.edw-repl-step.active .edw-repl-step-num {
  background: var(--primary, #2D5BFF); color: #fff; border-color: var(--primary, #2D5BFF);
}
.edw-repl-step.done .edw-repl-step-num {
  background: var(--success-bg, #D6F0DE); color: var(--success, #15803D); border-color: var(--success, #15803D);
}
.edw-repl-step-label { font-size: 11px; color: var(--text-muted, #888); }
.edw-repl-step.active .edw-repl-step-label { color: var(--primary, #2D5BFF); font-weight: 600; }
.edw-repl-step-line { flex: 0 0 24px; height: 2px; background: var(--border, #e0e0e0); align-self: flex-start; margin-top: 13px; }

/* 안내 텍스트 */
.edw-repl-hint { font-size: 13px; color: var(--text-muted, #888); margin: 0 0 12px; }
.edw-repl-hint--loc { color: var(--primary, #2D5BFF); font-size: 12px; }
.edw-repl-empty { font-size: 13px; color: var(--text-faint, #aaa); padding: 24px 0; text-align: center; }
.edw-repl-empty--retry { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-muted, #6b7280); line-height: 1.55; }

/* ── 공통 swipe-to-reveal(클로드 앱식 밀어서 수정/삭제) ── */
.swipe-row { position: relative; overflow: hidden; touch-action: pan-y; }
.swipe-row .swipe-content {
  position: relative; z-index: 1;
  transform: translateX(var(--swipe-x, 0px));
  background: var(--surface, #fff);
}
.swipe-row:not(.swipe-dragging) .swipe-content { transition: transform .22s cubic-bezier(.3,.8,.4,1); }
.swipe-row .swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0;
  display: flex; align-items: stretch;
}
.swipe-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 78px; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; line-height: 1;
}
.swipe-act svg { width: 20px; height: 20px; }
.swipe-act:active { filter: brightness(.92); }
.swipe-act--edit { background: var(--primary, #2d5bff); }
.swipe-act--del { background: var(--danger, #E5484D); }
.swipe-act--supplier { background: #0E9F6E; }
.swipe-act--cancel { background: var(--warning, #D9820B); }
/* 살짝 밀린 힌트(열림 가능 표시) — 닫힌 상태에서도 우측 모서리에 옅은 그림자 */
.swipe-row.swipe-open .swipe-content { box-shadow: -8px 0 12px -8px rgba(17,24,39,.18); }
/* 점검 내역 카드 — swipe-row가 카드 경계가 되도록 라운드 클립 */
.edw-repl-draft-swipe { border-radius: 14px; }
.edw-repl-draft-swipe .edw-repl-draft-row { border-radius: 14px; }

.edw-repl-empty--retry p { margin: 0; }
.edw-repl-retry-btn {
  padding: 9px 20px; border-radius: 10px; border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff); color: var(--primary, #2d5bff); font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.edw-repl-retry-btn:active { background: rgba(45,91,255,.06); }
/* 로딩 스켈레톤 — 위장 0 방지 */
.edw-repl-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.edw-repl-skel-row { height: 60px; border-radius: 12px; background: var(--bg, #f1f3f7); animation: edw-repl-skel-pulse 1.2s ease-in-out infinite; }
.edw-repl-skel--chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.edw-repl-skel-chip { height: 38px; width: 88px; border-radius: 999px; background: var(--bg, #f1f3f7); animation: edw-repl-skel-pulse 1.2s ease-in-out infinite; }
@keyframes edw-repl-skel-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* 스텝1 — 위치 칩 그리드 */
.edw-repl-loc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.edw-repl-loc-chip {
  min-height: 48px; padding: 10px 12px;
  border: 2px solid var(--border, #e0e0e0);
  border-radius: 10px; background: var(--surface, #fff);
  font-size: 14px; font-weight: 600; color: var(--text-strong, #111);
  cursor: pointer; text-align: center;
  transition: background 0.12s, border-color 0.12s;
}
.edw-repl-loc-chip:hover, .edw-repl-loc-chip:active {
  background: var(--primary-soft, #EAEFFF); border-color: var(--primary, #2D5BFF);
  color: var(--primary, #2D5BFF);
}

/* 스텝2 — 검색 + 품목 카드 그리드 */
.edw-repl-search-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.edw-repl-search {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 12px 14px; border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 10px; font-size: 16px; background: var(--surface, #fff);
  color: var(--text-strong, #111); outline: none;
}
.edw-repl-search:focus { border-color: var(--primary, #2D5BFF); }
.edw-repl-search-wrap .edw-repl-mic-btn {
  flex: 0 0 auto; min-width: 50px; min-height: 50px;
  border: 1.5px solid var(--border, #e0e0e0); background: var(--surface, #fff);
  border-radius: 10px; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.edw-repl-search-wrap .edw-repl-mic-btn:active { background: var(--primary-softer, #F2F5FF); }
/* 카메라 바코드 스캔 버튼 — 스텝2 검색 영역 */
.edw-repl-search-wrap .edw-repl-cam-btn {
  flex: 0 0 auto; min-width: 50px; min-height: 50px;
  border: 1.5px solid var(--border, #e0e0e0); background: var(--surface, #fff);
  border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
  color: var(--primary, #2D5BFF);
}
.edw-repl-search-wrap .edw-repl-cam-btn:active { background: var(--primary-softer, #F2F5FF); }
.edw-repl-search-wrap .edw-repl-kp-btn.active,
.edw-repl-step2.kp-open .edw-repl-kp-btn { border-color: var(--primary, #2D5BFF); background: var(--primary-soft, #EAEFFF); }
/* 결과가 키패드에 가려지지 않게 여백 확보 */
.edw-repl-step2.kp-open { padding-bottom: 340px; }
/* 숫자 키패드 — 하단 팝업 시트(글로벌 내비 위) */
.edw-repl-keypad {
  position: fixed; left: 0; right: 0; z-index: 110;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  background: var(--surface, #fff); border-top: 1px solid var(--border, #e0e0e0);
  box-shadow: 0 -10px 30px rgba(17,24,39,.14); padding: 12px 12px 16px;
}
/* 수량 빠른 입력 프리셋 — 기능 4: 소량/대량 2줄 이원화 */
.edw-repl-qty-presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.edw-repl-qty-presets-row { display: flex; gap: 8px; }
/* 키패드 내부 프리셋은 기존 1줄 유지 */
.edw-repl-keypad-presets { display: flex; gap: 8px; margin-bottom: 10px; }
.edw-repl-qty-preset, .edw-repl-kp-preset {
  flex: 1; min-height: 56px; border: 1.5px solid var(--primary-soft, #EAEFFF);
  background: var(--primary-softer, #F2F5FF); color: var(--primary, #2D5BFF);
  border-radius: 10px; font-size: 17px; font-weight: 800; cursor: pointer;
  touch-action: manipulation; font-variant-numeric: tabular-nums;
}
.edw-repl-qty-preset--sm { font-size: 18px; }
.edw-repl-qty-preset:active, .edw-repl-kp-preset:active { background: var(--primary-soft, #EAEFFF); }
/* 기능 2 — 직전 보충수량 보조 표시 */
.edw-repl-qty-notes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.edw-repl-last-qty-note {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary, #2D5BFF);
  background: var(--primary-softer, #F2F5FF); border-radius: 8px;
  padding: 5px 12px;
}
/* 기능 5 — 수량 마이크 버튼 */
.edw-repl-mic-btn--qty {
  min-width: 64px; min-height: 64px; border: 1.5px solid var(--border, #e0e0e0);
  background: var(--surface, #fff); border-radius: 12px; font-size: 22px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; margin-left: 4px;
}
.edw-repl-mic-btn--qty:active { background: var(--primary-softer, #F2F5FF); border-color: var(--primary, #2D5BFF); }
.edw-repl-mic-btn--qty.recording { background: var(--danger-bg, #FEF2F2); border-color: var(--danger, #DC2626); }
.edw-repl-qty-kp-btn { font-size: 20px; }
.edw-repl-keypad-title { font-size: 13px; font-weight: 700; color: var(--text-muted, #6B7280); flex-shrink: 0; }
.edw-repl-step3.kp-open { padding-bottom: 380px; }
.edw-repl-keypad-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.edw-repl-keypad-q {
  flex: 1; min-height: 28px; font-size: 20px; font-weight: 800;
  color: var(--text-strong, #111); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 2px solid var(--border, #e0e0e0); padding-bottom: 4px;
}
.edw-repl-keypad-close {
  min-width: 44px; min-height: 44px; border: none; background: transparent;
  font-size: 18px; color: var(--text-muted, #6B7280); cursor: pointer; border-radius: 8px;
}
.edw-repl-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.edw-repl-kp-key {
  min-height: 58px; border: 1.5px solid var(--border, #e0e0e0); background: var(--surface, #fff);
  border-radius: 12px; font-size: 26px; font-weight: 800; color: var(--text-strong, #111);
  cursor: pointer; touch-action: manipulation; display: flex; align-items: center; justify-content: center;
}
.edw-repl-kp-key:active { background: var(--primary-softer, #F2F5FF); border-color: var(--primary, #2D5BFF); }
.edw-repl-kp-clear, .edw-repl-kp-back { font-size: 18px; font-weight: 700; color: var(--primary, #2D5BFF); }
/* 키패드 푸터 — 입력 완료 / 저장 */
.edw-repl-keypad-foot { display: flex; gap: 8px; margin-top: 10px; }
.edw-repl-kp-done {
  flex: 1; min-height: 54px; border: 1.5px solid var(--border, #e0e0e0);
  background: var(--surface, #fff); color: var(--text, #374151);
  border-radius: 12px; font-size: 17px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.edw-repl-kp-done--full { flex: 1; }
.edw-repl-kp-save {
  flex: 1.4; min-height: 54px; border: none; border-radius: 12px;
  background: var(--primary, #2D5BFF); color: #fff;
  font-size: 18px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.edw-repl-kp-save:active { background: var(--primary-strong, #1E45E6); }
@media (min-width: 640px) {
  .edw-repl-keypad { max-width: 540px; left: 50%; transform: translateX(-50%); bottom: 20px; border: 1px solid var(--border, #e0e0e0); border-radius: 16px; }
  .edw-repl-step2.kp-open { padding-bottom: 360px; }
}
.edw-repl-item-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.edw-repl-item-card {
  display: flex; flex-direction: column; align-items: stretch;
  border: 1.5px solid var(--border, #e0e0e0); border-radius: 10px;
  background: var(--surface, #fff); cursor: pointer; overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
  min-height: 44px; padding: 0;
}
.edw-repl-item-card:hover, .edw-repl-item-card:active {
  border-color: var(--primary, #2D5BFF);
  box-shadow: 0 2px 8px rgba(45,91,255,.12);
}
.edw-repl-thumb-wrap {
  position: relative;
  width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: var(--surface-2, #f5f5f5); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.edw-repl-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.edw-repl-thumb--init {
  font-size: 20px; font-weight: 700; color: var(--primary, #2D5BFF);
  background: var(--primary-soft, #EAEFFF);
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center; line-height: 1.2; word-break: break-all;
}
.edw-repl-thumb--lg { width: 72px; height: 72px; border-radius: 8px; flex-shrink: 0; }
.edw-repl-thumb--lg.edw-repl-thumb--init { font-size: 12px; padding: 4px; }
/* 스텝3 큰 썸네일 래퍼 */
.edw-repl-thumb-wrap--lg { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 8px; }
/* 썸네일 카메라 배지 — 탭하면 사진 바로 업로드 */
.edw-repl-thumb-cam {
  position: absolute; right: 2px; bottom: 2px;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--primary, #2D5BFF); color: #fff;
  font-size: 12px; line-height: 22px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; z-index: 2;
}
.edw-repl-thumb-cam:hover { filter: brightness(1.08); }
/* 스텝3 사진 관리 갤러리 — 상단 배치 */
.edw-repl-gallery { margin: 4px 0 2px; }
.edw-repl-gallery .itg-wrap { margin-top: 0; }
/* 에드워드 관리 드로어 — 이미지 갤러리를 본문 상단에 배치 */
.edw-gallery-top { margin: 0 0 14px; }
.edw-gallery-top .itg-wrap { margin-top: 0; }
.edw-repl-item-info {
  padding: 8px 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.edw-repl-item-code { font-size: 10px; font-weight: 600; color: var(--text-muted, #888); letter-spacing: 0.02em; word-break: break-all; }
.edw-repl-item-name { font-size: 13px; font-weight: 600; color: var(--text-strong, #111); word-break: break-all; }
.edw-repl-item-spec { font-size: 11px; color: var(--text-muted, #888); }
.edw-repl-info-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.edw-repl-info-chip { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid; }
.edw-repl-info-chip--supplier { color: #6D28D9; background: #ECDDFD; border-color: #C7A6F0; }
.edw-repl-info-chip--loc { color: #0369A1; background: #E0F2FE; border-color: #7DD3FC; }

/* 스텝3 — 품목 헤더(풀폭·또렷한 위계) */
.edw-repl-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.edw-repl-head-code {
  align-self: flex-start; font-size: 12px; font-weight: 700;
  color: var(--primary, #2D5BFF); background: var(--primary-soft, #EAEFFF);
  padding: 2px 10px; border-radius: 999px; letter-spacing: .02em;
}
.edw-repl-head-name {
  font-size: 23px; font-weight: 800; color: var(--text-strong, #111);
  line-height: 1.22; margin: 3px 0 0; letter-spacing: -.01em;
}
.edw-repl-head-spec { font-size: 15px; color: var(--text-muted, #6B7280); line-height: 1.4; }
.edw-repl-head-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.edw-repl-head-chips .edw-repl-info-chips { margin-top: 0; }
/* 스텝3 — 요약·스텝퍼 */
.edw-repl-item-summary {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px;
}
.edw-repl-summary-info {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.edw-repl-stock-info { font-size: 12px; color: var(--text-muted, #888); }
/* 단위 안내 — 입고/납품 단위·환산 한 줄 강조 */
/* UX-A — 저장 후 발주 CTA 배너 (step1 상단) */
.edw-repl-saved-cta {
  display: flex; align-items: center; gap: 8px;
  background: var(--primary-soft, #e8efff);
  border: 1px solid var(--primary, #3556E8);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: .88rem;
}
.edw-repl-saved-cta-txt { flex: 1; color: var(--text, #1b1f27); }
.edw-repl-saved-cta-go {
  flex-shrink: 0;
  background: var(--primary, #3556E8); color: #fff;
  border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 800;
  padding: 8px 14px; min-height: 38px;
  -webkit-tap-highlight-color: transparent;
}
.edw-repl-saved-cta-x {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-faint, #9ca3af); font-size: .9rem; padding: 6px;
  -webkit-tap-highlight-color: transparent;
}

.edw-repl-unit-hint {
  font-size: 14.5px; font-weight: 700; color: var(--primary, #2D5BFF);
  background: var(--primary-soft, #EAEFFF); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 12px;
}
/* 수량·단가 정보 — 표(행) 형태, 현장에서 크게 읽히게 */
.edw-repl-facts {
  display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; overflow: hidden; margin-bottom: 16px;
}
.edw-repl-fact {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--border, #e5e7eb);
}
.edw-repl-fact:first-child { border-top: none; }
.edw-repl-fact-k { font-size: 15px; color: var(--text-muted, #6B7280); font-weight: 600; }
.edw-repl-fact-v { font-size: 20px; font-weight: 800; color: var(--text-strong, #111); font-variant-numeric: tabular-nums; text-align: right; }
.edw-repl-unit { font-size: 13px; font-weight: 600; color: var(--text-muted, #888); margin-left: 4px; }
/* 보충 시급도 선택 — UX-E: 수량 위로 이동 + 필수 강조 칩 + 큰 토글 */
.edw-repl-urgency {
  background: var(--surface, #fff); border: 1px solid var(--border, #ECEEF2);
  border-radius: var(--r-xl, 22px); box-shadow: 0 2px 8px rgba(17,24,39,.05);
  padding: 16px; margin-bottom: 14px;
}
.edw-repl-urgency-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 800; color: var(--text-strong, #111); margin-bottom: 10px;
}
.edw-repl-req { font-size: 12px; font-weight: 800; color: var(--danger, #e5484d); margin-left: 2px; }
/* UX-E: 필수 칩 (빨강 배경) — 시급도 섹션 전용 */
.edw-repl-req-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; color: var(--danger, #E5484D);
  background: var(--danger-soft, #FCEAEA); border-radius: 999px;
  padding: 2px 8px; line-height: 1.4;
}
.edw-repl-urgency-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 시급도 버튼 — 62px 큰 카드, 색 dot + 라벨 + 힌트 */
.edw-repl-urg-btn {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 62px; border: 1.5px solid var(--border-2, #E2E5EB); background: var(--surface, #fff);
  border-radius: var(--r-md, 14px); cursor: pointer; touch-action: manipulation;
  padding: 13px 12px; text-align: left; font-family: inherit;
}
.edw-repl-urg-dot {
  position: absolute; top: 13px; right: 13px;
  width: 11px; height: 11px; border-radius: 50%;
}
.edw-repl-urg-btn--danger .edw-repl-urg-dot { background: var(--danger, #E5484D); }
.edw-repl-urg-btn--warn   .edw-repl-urg-dot { background: var(--warning, #D9820B); }
.edw-repl-urg-btn--info   .edw-repl-urg-dot { background: var(--primary, #2D5BFF); }
.edw-repl-urg-btn--ok     .edw-repl-urg-dot { background: var(--success, #16A34A); }
.edw-repl-urg-label { font-size: 15.5px; font-weight: 800; color: var(--text-strong, #111); }
.edw-repl-urg-hint { font-size: 12px; font-weight: 600; color: var(--text-muted, #6B7280); }
.edw-repl-urg-btn--danger.active { border-color: var(--danger, #E5484D); background: var(--danger-soft, #FCEAEA); }
.edw-repl-urg-btn--danger.active .edw-repl-urg-label { color: var(--danger, #E5484D); }
.edw-repl-urg-btn--warn.active { border-color: var(--warning, #D9820B); background: var(--warning-soft, #FCEFD7); }
.edw-repl-urg-btn--warn.active .edw-repl-urg-label { color: var(--warning, #D9820B); }
.edw-repl-urg-btn--info.active { border-color: var(--primary, #2D5BFF); background: var(--primary-soft, #EAEFFF); }
.edw-repl-urg-btn--info.active .edw-repl-urg-label { color: var(--primary, #2D5BFF); }
.edw-repl-urg-btn--ok.active { border-color: var(--success, #16A34A); background: var(--success-soft, #E7F6EC); }
.edw-repl-urg-btn--ok.active .edw-repl-urg-label { color: var(--success, #16A34A); }
.edw-repl-urg-btn:active { transform: translateY(1px); }
.edw-repl-urg-badge { flex-shrink: 0; }

/* 수량 입력 블록 */
.edw-repl-qty-block {
  background: var(--surface, #fff); border: 1px solid var(--border, #ECEEF2);
  border-radius: var(--r-xl, 22px); box-shadow: 0 2px 8px rgba(17,24,39,.05);
  padding: 16px; margin-bottom: 14px;
}
.edw-repl-qty-label {
  font-size: 14px; font-weight: 800; color: var(--text-strong, #111);
  margin-bottom: 12px;
}
.edw-repl-qty-block .edw-repl-stepper { margin-bottom: 0; }
.edw-repl-qty-label .edw-repl-unit { color: var(--primary, #2D5BFF); }
.edw-repl-loc-label { font-size: 15px; color: var(--text-muted, #6B7280); margin-bottom: 12px; }
/* UX-F: 프리필 칩 영역 — 추천값 채우기 + 이전 보충 */
.edw-repl-prefill-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.edw-repl-prefill-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; padding: 8px 13px;
  border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums;
  touch-action: manipulation;
}
.edw-repl-prefill-chip--rec {
  background: var(--warning-soft, #FCEFD7); color: var(--tile-amber-fg, #C77B0A);
}
.edw-repl-prefill-chip--rec:active { filter: brightness(.95); }
.edw-repl-prefill-chip--last {
  background: var(--surface-2, #F3F5F9); color: var(--text-muted, #6B7280);
}
.edw-repl-prefill-chip--last:active { filter: brightness(.95); }
/* 구버전 recNote 스타일 보존(다른 화면 혹시 참조) */
.edw-repl-rec-note {
  font-size: 14.5px; font-weight: 600; color: var(--text-muted, #6B7280);
  background: var(--surface-2, #f5f5f5); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 16px;
}
.edw-repl-rec-note--warn {
  background: var(--danger-bg, #FEF2F2); color: var(--danger, #DC2626);
}
/* 스텝퍼 — 60px 큰 버튼(한 손 엄지·장갑). 핵심 3요소(−/숫자/+)만 한 줄 */
.edw-repl-stepper {
  display: flex; align-items: stretch; gap: 12px;
  margin-bottom: 8px;
}
.edw-repl-stepper-btn {
  flex: 0 0 60px; min-height: 60px;
  border: 1.5px solid var(--border-2, #E2E5EB); background: var(--surface, #fff);
  font-size: 28px; font-weight: 700; color: var(--primary, #2D5BFF);
  cursor: pointer; border-radius: var(--r-lg, 18px);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.edw-repl-stepper-btn:active { background: var(--primary-soft, #EAEFFF); transform: translateY(1px); }
/* 수량 표시 — 38px 큰 숫자 (시안 기준) */
.edw-repl-qty-input {
  flex: 1 1 auto; min-width: 0; min-height: 60px; text-align: center;
  border: 1.5px solid var(--border-2, #E2E5EB); border-radius: var(--r-lg, 18px);
  font-size: 38px; font-weight: 800; color: var(--text-strong, #111);
  background: var(--surface-2, #F3F5F9); outline: none;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
/* 보조 액션 행 — 키패드·마이크 (스텝퍼 아래 둘째 줄) */
.edw-repl-stepper-aux {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.edw-repl-stepper-aux .edw-repl-stepper-btn {
  flex: 1 1 auto; min-height: 44px; font-size: 15px; font-weight: 700;
}
.edw-repl-stepper-aux-mic {
  flex: 1 1 auto; min-height: 44px;
  border: 1.5px solid var(--border-2, #E2E5EB); background: var(--surface, #fff);
  color: var(--text, #374151); font-size: 15px; font-weight: 700;
  cursor: pointer; border-radius: var(--r-lg, 18px);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  touch-action: manipulation;
}
.edw-repl-stepper-aux-mic:active { background: var(--primary-soft, #EAEFFF); transform: translateY(1px); }
/* 소량 프리셋 — 한 줄 4버튼 (대량은 키패드 팝업으로 이관) */
.edw-repl-qty-presets--single { display: flex; gap: 8px; margin-top: 12px; }
.edw-repl-qty-presets--single .edw-repl-qty-preset { flex: 1; min-height: 46px; }
/* 구버전 2줄 프리셋 스타일 보존 */
.edw-repl-qty-presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.edw-repl-qty-presets-row { display: flex; gap: 8px; }
.edw-repl-qty-preset, .edw-repl-kp-preset {
  flex: 1; min-height: 46px; border: 1.5px solid var(--border-2, #E2E5EB);
  background: var(--surface, #fff); color: var(--text, #374151);
  border-radius: var(--r-md, 14px); font-size: 15px; font-weight: 800; cursor: pointer;
  touch-action: manipulation; font-variant-numeric: tabular-nums; font-family: inherit;
}
.edw-repl-qty-preset--sm { font-size: 15px; }
.edw-repl-qty-preset:active, .edw-repl-kp-preset:active {
  background: var(--primary-soft, #EAEFFF); color: var(--primary, #2D5BFF); transform: translateY(1px);
}
.edw-repl-note-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.edw-repl-note-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.edw-repl-note-label { font-size: 14px; font-weight: 800; color: var(--text-strong, #111); }
.edw-repl-note-inp {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--border-2, #E2E5EB); border-radius: var(--r-md, 14px);
  font-size: 14px; color: var(--text, #374151);
  background: var(--surface-2, #F3F5F9); resize: none; outline: none;
}
.edw-repl-note-inp:focus { border-color: var(--primary, #2D5BFF); background: var(--surface, #fff); }

/* UX-D: 단가·재고 접힘 블록 */
.edw-repl-facts-fold {
  background: var(--surface, #fff); border: 1px solid var(--border, #ECEEF2);
  border-radius: var(--r-lg, 18px); box-shadow: 0 1px 2px rgba(17,24,39,.04);
  margin-bottom: 14px; overflow: hidden;
}
.edw-repl-facts-summary {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.edw-repl-facts-ico { width: 20px; height: 20px; color: var(--text-muted, #6B7280); flex: 0 0 auto; }
.edw-repl-facts-title { font-size: 14px; font-weight: 700; color: var(--text-strong, #111); }
.edw-repl-facts-peek {
  font-size: 12px; color: var(--text-muted, #6B7280); font-weight: 600;
  margin-left: auto; font-variant-numeric: tabular-nums;
}
.edw-repl-facts-chev { width: 18px; height: 18px; color: var(--text-faint, #9AA1AC); flex: 0 0 auto; transition: transform .15s; }
.edw-repl-facts-body { padding: 0 16px 6px; display: none; }
.edw-repl-facts-fold.open .edw-repl-facts-body { display: block; }
.edw-repl-facts-fold.open .edw-repl-facts-chev { transform: rotate(180deg); }
/* facts 내부 행 스타일 — 기존 edw-repl-facts / edw-repl-fact 유지(접힘 래퍼 내부) */
.edw-repl-facts-body .edw-repl-facts { border: none; border-radius: 0; margin-bottom: 0; }
.edw-repl-facts-body .edw-repl-fact { padding: 10px 0; }
.edw-repl-facts-body .edw-repl-fact-k { font-size: 13px; }
.edw-repl-facts-body .edw-repl-fact-v { font-size: 15px; }

/* 기존 facts 테이블(접힘 래퍼 밖에서도 유지) */
.edw-repl-facts {
  display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; overflow: hidden; margin-bottom: 16px;
}
.edw-repl-fact {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--border, #e5e7eb);
}
.edw-repl-fact:first-child { border-top: none; }
.edw-repl-fact-k { font-size: 15px; color: var(--text-muted, #6B7280); font-weight: 600; }
.edw-repl-fact-v { font-size: 20px; font-weight: 800; color: var(--text-strong, #111); font-variant-numeric: tabular-nums; text-align: right; }
.edw-repl-unit { font-size: 13px; font-weight: 600; color: var(--text-muted, #888); margin-left: 4px; }

/* 하단 고정 액션바 (스텝2 이전 버튼용) */
.edw-repl-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 12px 16px; background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e0e0e0);
  z-index: 100; display: flex; gap: 10px;
}
.edw-repl-action-bar--back { background: transparent; border: none; padding-top: 0; }
.edw-repl-action-bar--save { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.edw-repl-back-btn { flex: 0 0 auto; }
.edw-repl-save-btn { flex: 1; min-height: 56px; font-size: 18px; font-weight: 800; }
/* 스텝3 고정 저장 바 — "저장하고 다음 품목" (시안 UX) */
/* UX-E: 시급도 미선택 안내 — 저장 비활성과 함께 표시 */
.edw-repl-save-hint {
  margin-top: 14px; font-size: 13px; font-weight: 700;
  color: var(--warning, #D9820B);
}
.edw-repl-step3-savebar {
  display: flex; gap: 10px; margin-top: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* 구버전 인라인 액션 클래스 보존(혹시 다른 곳 참조) */
.edw-repl-step3-actions { display: flex; gap: 10px; margin-top: 16px; }
.edw-repl-cancel-btn {
  flex: 0 0 auto; min-width: 80px; min-height: 56px;
  border: 1.5px solid var(--border-2, #E2E5EB); border-radius: var(--r-lg, 18px);
  background: var(--surface, #fff); color: var(--text-muted, #6B7280);
  font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.edw-repl-cancel-btn:active { background: var(--surface-2, #F3F5F9); }
.edw-repl-save-btn2 {
  flex: 1; min-height: 56px; border: none; border-radius: var(--r-lg, 18px);
  background: var(--primary, #2D5BFF); color: #fff;
  font-size: 17px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 22px rgba(45, 91, 255, .26);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent; font-family: inherit; letter-spacing: -.01em;
}
.edw-repl-save-btn2:active { background: var(--primary-strong, #1E45E6); transform: translateY(1px); }
.edw-repl-save-btn2:disabled { opacity: .6; box-shadow: none; cursor: default; }
/* OPS One 글로벌 하단 내비(64px)에 가려지지 않게 — 모바일에서 액션바를 내비 위로 올림 */
@media (max-width: 768px) {
  .edw-repl-action-bar { bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  .edw-repl-action-bar--save { padding-bottom: 12px; }
}

/* 내 입력목록 — 표 형태·현장 가독성 */
.edw-repl-divider { border: none; border-top: 1px solid var(--border, #e0e0e0); margin: 24px 0 12px; }
/* 기능 10 — 섹션 헤더 (제목 + 요약 공유 버튼) */
.edw-repl-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.edw-repl-section-title { font-size: 16px; font-weight: 800; color: var(--text-strong, #111); }
.edw-repl-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700;
  color: var(--primary, #2D5BFF); background: var(--primary-soft, #EAEFFF);
  border: none; border-radius: 999px; cursor: pointer;
  padding: 6px 12px; -webkit-tap-highlight-color: transparent;
}
.edw-repl-share-btn svg { width: 15px; height: 15px; }
.edw-repl-share-btn:disabled { color: var(--text-faint, #9ca3af); background: var(--border, #e5e7eb); cursor: not-allowed; }
.edw-repl-draft-empty { font-size: 14px; color: var(--text-faint, #aaa); padding: 14px 0; }
.edw-repl-draft-list { display: flex; flex-direction: column; gap: 10px; }
.edw-repl-draft-row {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 15px; border: 1px solid var(--border, #e0e0e0);
  border-radius: 14px; background: var(--surface, #fff);
}
.edw-repl-draft-row.is-editing { border-color: var(--primary, #2D5BFF); background: var(--primary-softer, #F2F5FF); }
/* 1줄째 — 품목명·코드 또렷이 */
.edw-repl-draft-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.edw-repl-draft-name { font-size: 16.5px; font-weight: 800; color: var(--text-strong, #111); line-height: 1.25; }
.edw-repl-draft-code { font-size: 12px; font-weight: 700; color: var(--primary, #2D5BFF); background: var(--primary-soft, #EAEFFF); padding: 1px 8px; border-radius: 999px; }
/* 메모 품목(카탈로그에 없는 요청) 배지 */
.edw-repl-draft-memo-badge { font-size: 11px; font-weight: 800; color: var(--warning, #D9820B); background: var(--warning-soft, #FCEFD7); padding: 1px 8px; border-radius: 999px; }
/* Step2 — 없는 품목 메모 추가 버튼 */
.edw-repl-memo-add {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: calc(100% - 32px); margin: 4px 16px 16px; padding: 13px;
  background: var(--surface, #fff); color: var(--warning, #D9820B);
  border: 1.5px dashed var(--warning, #D9820B); border-radius: 14px;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.edw-repl-memo-add:active { background: var(--warning-soft, #FCEFD7); }
.edw-repl-memo-add svg { width: 18px; height: 18px; }
/* 2줄째 — 규격·구매처(디테일) */
.edw-repl-draft-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.edw-repl-draft-spec { font-size: 12.5px; color: var(--text-faint, #6b7280); }
/* 날짜 칩 — 점검 작성일 vs 납품예정일 구분 */
.edw-repl-draft-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.edw-repl-draft-date {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 1px 7px; border-radius: 999px;
}
.edw-repl-draft-date--made { color: var(--text-muted, #6b7280); background: var(--bg, #f1f3f7); }
.edw-repl-draft-date--deliv { color: #b45309; background: #fef3c7; }
/* 3줄째 — 위치·시급도·수량·상태·버튼 */
.edw-repl-draft-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edw-repl-draft-sp { flex: 1; }
.edw-repl-draft-loc { flex-shrink: 0; }
.edw-repl-draft-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edw-repl-draft-qty { flex-shrink: 0; font-weight: 800; font-size: 18px; color: var(--text-strong, #111); font-variant-numeric: tabular-nums; }
.edw-repl-draft-edit-btn, .edw-repl-draft-del {
  min-width: 40px; min-height: 40px; padding: 0;
  border: none; background: transparent; cursor: pointer; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.edw-repl-draft-edit-btn { color: var(--primary, #2D5BFF); }
.edw-repl-draft-edit-btn:hover { background: var(--primary-soft, #EAEFFF); }
.edw-repl-draft-del { color: var(--danger, #DC2626); }
.edw-repl-draft-del:hover { background: var(--danger-bg, #FEF2F2); }
/* 인라인 수정 컨트롤 */
.edw-repl-draft-edit { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.edw-repl-draft-step {
  min-width: 40px; min-height: 40px; border: 1.5px solid var(--border, #e0e0e0);
  background: var(--surface, #fff); color: var(--primary, #2D5BFF);
  font-size: 20px; font-weight: 700; cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.edw-repl-draft-qtyinp {
  width: 56px; min-height: 40px; text-align: center; margin: 0 -1px;
  border: 1.5px solid var(--border, #e0e0e0); border-left: none; border-right: none;
  font-size: 18px; font-weight: 800; color: var(--text-strong, #111); background: var(--surface, #fff); outline: none;
}
.edw-repl-draft-save {
  min-height: 40px; padding: 0 16px; border: none; border-radius: 8px;
  background: var(--primary, #2D5BFF); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.edw-repl-draft-cancel {
  min-height: 40px; padding: 0 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-muted, #6B7280); font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}

/* ── draft 풀편집 폼 ── */
.edw-repl-draft-row--full-edit {
  background: var(--surface-alt, #F9FAFB); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  border: 1.5px solid var(--primary-soft, #EAEFFF);
}
.edw-repl-fedit-item { display: flex; align-items: center; gap: 8px; }
.edw-repl-fedit-row2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edw-repl-fedit-label { font-size: 12px; color: var(--text-muted, #6B7280); min-width: 48px; flex-shrink: 0; }
.edw-repl-fedit-item-btn {
  flex: 1; min-height: 38px; padding: 0 12px; text-align: left;
  border: 1.5px solid var(--border, #e0e0e0); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text-strong, #111);
  font-size: 14px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edw-repl-fedit-item-btn:hover { border-color: var(--primary, #2D5BFF); }
.edw-repl-fedit-sel, .edw-repl-fedit-unit, .edw-repl-fedit-note {
  flex: 1; min-height: 38px; padding: 0 10px; font-size: 14px;
  border: 1.5px solid var(--border, #e0e0e0); border-radius: 8px;
  background: var(--surface, #fff); color: var(--text-strong, #111); outline: none;
}
.edw-repl-fedit-sel:focus, .edw-repl-fedit-unit:focus, .edw-repl-fedit-note:focus {
  border-color: var(--primary, #2D5BFF);
}
.edw-repl-fedit-actions { display: flex; gap: 8px; padding-top: 4px; }
/* PC: 인라인 수정·삭제 버튼 그룹, 모바일: 더보기 버튼 */
.edw-repl-pc-btn-group { display: flex; gap: 2px; }
.edw-repl-draft-more {
  min-width: 40px; min-height: 40px; padding: 0; border: none; background: transparent;
  cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-muted, #6B7280); flex-shrink: 0;
}
.edw-repl-draft-more:hover { background: var(--surface-alt, #F9FAFB); }
/* 모바일(< 900px): PC 그룹 숨김, 더보기 노출 */
@media (max-width: 899px) {
  .edw-repl-pc-btn-group { display: none; }
  .edw-repl-mobile-btn { display: flex; }
}
/* PC(≥ 900px): 더보기 숨김, PC 그룹 노출 */
@media (min-width: 900px) {
  .edw-repl-pc-btn-group { display: flex; }
  .edw-repl-mobile-btn { display: none; }
}
/* 확정됨 배지 */
.edw-repl-draft-confirmed-badge { font-size: 11px; }

/* 현장 점검 대기 패널 — PC list 뷰 최상단, 이카운트식 촘촘 표, 모바일 미노출 */
.edw-repl-waiting-panel {
  margin-bottom: 20px;
  padding: 14px 16px 14px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--primary-soft, #EAEFFF);
  border-left: 4px solid var(--primary, #2D5BFF);
  border-radius: 10px;
}
.edw-repl-waiting-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-strong, #111);
  margin-bottom: 10px;
}
/* 헤더 우측 — "발주 집계로 →" 버튼 영역 */
.edw-repl-waiting-actions-inline {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
}
.edw-wait-purchase-btn {
  font-size: 12px; padding: 3px 10px; height: 26px; line-height: 1;
}
.edw-repl-waiting-loading {
  font-size: 12px; color: var(--text-faint, #6b7280); padding: 4px 0;
}
/* 표 래퍼 — ledger-table-wrap 위에 상단 border-radius 없애 패널과 자연스럽게 합성 */
.edw-wait-table-wrap { border-radius: 6px; }
/* 촘촘 표 — 시스템폰트·소형 패딩 */
.edw-wait-table { font-size: .82rem; }
.edw-wait-table .ledger-th { padding: 6px 10px; font-size: .72rem; }
.edw-wait-table .ledger-td { padding: 6px 10px; }
/* 품목 열 — 품목명+코드 칩 인라인 */
.edw-wait-th--item { min-width: 160px; }
.edw-wait-td--item { white-space: nowrap; }
.edw-wait-item-name { font-weight: 600; color: var(--text-strong, #111); margin-right: 5px; }
/* 수량 — 숫자 오른정렬 */
.edw-wait-td--qty { font-weight: 700; font-variant-numeric: tabular-nums; }
/* 날짜 — 좁게 */
.edw-wait-td--date { white-space: nowrap; color: var(--text-muted, #6b7280); font-size: .80rem; }
/* 납품예정일이 미정이면 강조색 */
.edw-wait-td--deliv { color: #b45309; }
/* 행 hover — 읽기 전용이므로 pointer 없이 배경 변화만 */
.edw-wait-tr:hover .ledger-td { background: var(--bg, #f8f9fa); }

/* 발주처별 집계 섹션 */
.edw-repl-agg-section {
  margin-top: 20px;
  padding: 16px 0 4px;
  border-top: 1.5px solid var(--border, #e0e0e0);
}
.edw-repl-agg-groups { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.edw-repl-agg-group {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px;
  padding: 12px 14px;
}
.edw-repl-agg-group-header { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
/* 발주안함(폐기) 버튼 — admin 전용. 그룹 헤더 우측 + 개별 라인 우측(margin-left:auto) */
.edw-repl-agg-drop {
  margin-left: auto; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
  color: var(--text-muted, #6B7280);
  background: var(--surface-alt, #F3F4F6);
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer; white-space: nowrap;
}
.edw-repl-agg-drop:hover {
  color: var(--danger, #DC2626);
  border-color: var(--danger, #DC2626);
  background: var(--danger-soft, #FEF2F2);
}
/* 점검일지 폐기 행 — 이력은 보이되 흐리게(dim) */
.edw-repl-jrow.is-dropped { opacity: 0.55; }
.edw-repl-jrow.is-dropped .edw-repl-jrow-qty { text-decoration: line-through; }
.edw-repl-agg-nochip {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  color: var(--text-faint, #6b7280);
  background: var(--surface-alt, #f3f4f6);
  border-radius: 999px;
  padding: 3px 10px;
}
.edw-repl-agg-lines { display: flex; flex-direction: column; gap: 6px; }
.edw-repl-agg-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.edw-repl-agg-name {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edw-repl-agg-chip { flex: 0 0 auto; min-width: 0; }
.edw-repl-agg-qty {
  flex-shrink: 0;
  font-size: 14px; font-weight: 800;
  color: var(--text-strong, #111);
  font-variant-numeric: tabular-nums;
}
.edw-repl-agg-footer { display: flex; justify-content: flex-end; }
.edw-repl-agg-go-btn {
  min-height: 48px; padding: 0 24px;
  font-size: 15px; font-weight: 800;
}

/* 데스크톱에서 최대폭 가운데 정렬 유지 */
@media (min-width: 640px) {
  .edw-repl-root { padding-top: 24px; }
  .edw-repl-action-bar {
    max-width: 540px; left: 50%; transform: translateX(-50%);
  }
}

/* ── PC 3-pane (≥ 900px) ── */
@media (min-width: 900px) {
  /* 모바일 위저드 숨김 */
  .edw-repl-mobile-only { display: none !important; }
  /* PC 3-pane 노출 */
  .edw-repl-pc-only { display: block; }
  .edw-repl-root {
    max-width: none;
    padding: 16px 20px 20px;
  }
  .edw-repl-pc-pane {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 0;
    height: calc(100vh - var(--header-h, 56px) - 80px);
    min-height: 400px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }
  .edw-repl-pc-left,
  .edw-repl-pc-center,
  .edw-repl-pc-right {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .edw-repl-pc-left {
    border-right: 1px solid var(--border);
    background: var(--surface-2);
  }
  .edw-repl-pc-center {
    border-right: 1px solid var(--border);
    background: var(--surface);
  }
  .edw-repl-pc-right {
    background: var(--surface-2);
    overflow-y: auto;
  }
  .edw-repl-pc-pane-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  /* 좌 패널 — 위치 칩 목록 스크롤 */
  .edw-repl-pc-left .edw-repl-step1 {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px;
  }
  .edw-repl-pc-left .edw-repl-hint { display: none; }
  .edw-repl-pc-left .edw-repl-loc-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .edw-repl-pc-left .edw-repl-loc-chip {
    min-height: 40px;
    font-size: 13px;
    padding: 8px 10px;
    text-align: left;
    border-radius: 8px;
  }
  .edw-repl-loc-chip--active {
    border-color: var(--primary) !important;
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
  }
  /* 중앙 패널 — 품목 검색 또는 수량 입력 스크롤 */
  #edw-repl-pc-center-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
  }
  .edw-repl-pc-center-hint {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-faint);
  }
  /* 중앙 패널 품목 카드 — 3열 그리드로 넓게 */
  #edw-repl-pc-center-body .edw-repl-item-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* 중앙 패널 스텝3 — 폭 최대 활용 */
  #edw-repl-pc-center-body .edw-repl-step3 {
    max-width: 480px;
  }
  /* 중앙 패널 수량 스텝퍼 — PC에서도 충분히 클릭 가능 */
  #edw-repl-pc-center-body .edw-repl-stepper-btn {
    min-width: 48px; min-height: 48px;
  }
  /* PC 보조 행 버튼 — 핵심 스텝퍼보다 작게, 그러나 클릭 가능 */
  #edw-repl-pc-center-body .edw-repl-stepper-aux .edw-repl-stepper-btn,
  #edw-repl-pc-center-body .edw-repl-stepper-aux-mic {
    min-height: 40px; font-size: 14px;
  }
  /* 우측 패널 — 오늘 내역 스크롤 */
  .edw-repl-pc-right .edw-repl-section-title {
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
    display: none; /* pc-pane-title이 대신함 */
  }
  .edw-repl-pc-right .edw-repl-queue-badge,
  .edw-repl-pc-right .edw-repl-draft-list,
  .edw-repl-pc-right .edw-repl-draft-empty {
    padding: 8px 12px;
  }
  .edw-repl-pc-right .edw-repl-draft-row {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
  }
  .edw-repl-pc-right .edw-repl-draft-name { font-size: 13px; }
  .edw-repl-pc-right .edw-repl-draft-qty { font-size: 14px; }
  /* PC에서 키패드 위치 조정 */
  .edw-repl-keypad { bottom: 20px; max-width: 480px; left: 50%; transform: translateX(-50%); border: 1px solid var(--border); border-radius: 16px; }
  .edw-repl-step2.kp-open { padding-bottom: 360px; }
}
/* PC 아닐 때 PC-pane 요소 숨김 */
@media (max-width: 899px) {
  .edw-repl-pc-only { display: none; }
}

/* ──────────────────────────────────────────
   edwlbl- 네임스페이스 — 바코드 라벨 인쇄 화면
   기존 edw- 클래스와 충돌 없음
   ────────────────────────────────────────── */
.edwlbl-root { padding: 16px; max-width: 960px; }

/* 툴바 */
.edwlbl-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.edwlbl-toolbar-left { display: flex; gap: 8px; flex: 1; min-width: 0; }
.edwlbl-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.edwlbl-search {
  flex: 1; min-width: 160px; padding: 7px 10px;
  border: 1.5px solid var(--border, #e0e0e0); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface, #fff); color: var(--text, #111);
}
.edwlbl-search:focus { outline: 2px solid var(--primary, #2D5BFF); outline-offset: 1px; border-color: transparent; }
.edwlbl-loc-sel, .edwlbl-preset-sel {
  padding: 7px 10px; border: 1.5px solid var(--border, #e0e0e0); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface, #fff); color: var(--text, #111);
  cursor: pointer;
}
.edwlbl-preset-label { display: inline-flex; align-items: center; gap: 4px; }
.edwlbl-preview-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.edwlbl-btn-all, .edwlbl-btn-none {
  padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border, #e0e0e0); background: var(--surface, #fff); color: var(--text, #111);
  cursor: pointer;
}
.edwlbl-btn-all:hover, .edwlbl-btn-none:hover { background: var(--bg, #f5f5f5); }
.edwlbl-btn-print {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  background: var(--primary, #2D5BFF); color: #fff; border: none; cursor: pointer;
}
.edwlbl-btn-print:hover { opacity: .88; }
.edwlbl-count { font-size: 12px; color: var(--text-faint, #888); white-space: nowrap; }

/* 표 */
.edwlbl-table-wrap { overflow-x: auto; }
.edwlbl-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface, #fff); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.edwlbl-table th {
  background: var(--bg, #f5f5f5); font-size: 12px; font-weight: 700;
  color: var(--text-faint, #888); padding: 9px 12px; text-align: left;
  border-bottom: 1.5px solid var(--border, #e0e0e0);
}
.edwlbl-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--border, #e0e0e0);
  font-size: 13px; vertical-align: middle;
}
.edwlbl-table tr:last-child td { border-bottom: none; }
.edwlbl-table tr:hover td { background: var(--primary-soft, #EAEFFF); }
.edwlbl-chk-cell { width: 36px; }
.edwlbl-code-cell { font-family: 'Menlo', 'Consolas', monospace; font-size: 12px; color: var(--primary, #2D5BFF); }
.edwlbl-loc-cell { font-size: 12px; color: var(--primary, #2D5BFF); }
.edwlbl-barcode-cell { padding: 6px 12px; }
.edwlbl-barcode-cell svg { display: block; }
.edwlbl-barcode-placeholder { color: var(--text-faint, #aaa); font-size: 12px; }
.edwlbl-barcode-bad { color: var(--warn, #e67700); font-size: 12px; white-space: nowrap; }
.edwlbl-empty { text-align: center; color: var(--text-faint, #aaa); padding: 24px 0; }

/* 인쇄 전용 라벨 그리드 — 화면에서는 숨김 */
.edwlbl-print-grid { display: none; }

/* ── PC 화면 전용 (≥900px) — 스크린만, 인쇄 레이아웃 무관 ── */
@media screen and (min-width: 900px) {
  /* 넓은 화면 활용: root 폭 제한 해제 */
  .edwlbl-root { max-width: none; padding: 20px 24px; }

  /* 툴바: 한 행으로 고정 — left(검색·필터)와 right(버튼) 양끝 정렬 */
  .edwlbl-toolbar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
  }
  .edwlbl-toolbar-left { flex: 1; min-width: 0; }
  .edwlbl-toolbar-right { flex-shrink: 0; flex-wrap: nowrap; }

  /* 검색창: PC에서 더 넓게 */
  .edwlbl-search { min-width: 220px; }

  /* 표 셀 높이 여유 */
  .edwlbl-table th,
  .edwlbl-table td { padding: 10px 14px; }
}

/* @media print — 라벨 격자 인쇄 */
@media print {
  .no-print, .edwlbl-toolbar, .edwlbl-table-wrap { display: none !important; }
  .edwlbl-root { padding: 0; max-width: none; }

  /* ① A4 스티커 다칸 (기본) — 3열 격자 */
  .edwlbl-print-grid.edwlbl-print-grid--a4 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6mm; padding: 8mm;
  }
  /* ② 라벨 프린터 롤 소형 — 2열 */
  .edwlbl-print-grid.edwlbl-print-grid--roll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 4mm; padding: 4mm;
  }

  .edwlbl-label-card {
    border: 1px solid #aaa; border-radius: 4px;
    padding: 5mm 4mm; text-align: center;
    page-break-inside: avoid;
  }
  .edwlbl-label-card svg { display: block; margin: 0 auto 3px; }
  .edwlbl-label-code { font-family: monospace; font-size: 9pt; font-weight: 700; margin-bottom: 2px; }
  .edwlbl-label-name { font-size: 8pt; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ──────────────────────────────────────────────────────────────
   기능 7 — 오늘 갈 곳 빠른 선택 (최근 방문 위치 칩)
   에드워드 현장앱 스텝1 위치 선택 상단 행
   ────────────────────────────────────────────────────────────── */
.edw-repl-recent-locs {
  margin-bottom: 12px;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
/* .edw-repl-chips-label / .edw-repl-chips-list 은 기존 스타일 재사용 */
/* 위치 칩 — 위치명 특성상 기존 quick-chip보다 약간 넓게 */
.edw-repl-quick-chip--loc {
  background: var(--primary-soft, #EAEFFF);
  color: var(--primary, #2D5BFF);
  border: 1.5px solid var(--primary, #2D5BFF);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.edw-repl-quick-chip--loc:active {
  background: var(--primary, #2D5BFF);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────
   기능 8 — 현장 홈 요약 카드 (오늘/미확정 발주/시급 N건)
   에드워드 현장앱 보충점검 탭 헤더 아래 요약 카드
   ────────────────────────────────────────────────────────────── */
.edw-repl-summary-card {
  display: flex;
  gap: 0;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.edw-repl-summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 6px;
  background: none;
  border: none;
  border-right: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.edw-repl-summary-item:last-child { border-right: none; }
.edw-repl-summary-item:active { background: var(--primary-soft, #e8efff); }
.edw-repl-summary-n {
  font-size: 24px;
  font-weight: 900;
  color: var(--text, #1b1f27);
  line-height: 1;
}
.edw-repl-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint, #9ca3af);
  white-space: nowrap;
}
/* 시급 N — 빨간 강조 */
.edw-repl-summary-item--urgent .edw-repl-summary-n {
  color: var(--danger, #dc2626);
}

/* ──────────────────────────────────────────────────────────────
   라인 그리드 (line-grid.js) — 이카운트식 행 입력 그리드
   매입·주문·발주·입고 공통 재사용. .lg-* 네임스페이스.
   고밀도 룩: 시스템폰트·촘촘 행·셀 경계선·헤더 음영·숫자 우정렬·선택 하이라이트.
   ────────────────────────────────────────────────────────────── */
.lg-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  /* 시스템폰트 강제 — 웹폰트 상속 차단 */
  font-family: -apple-system, "Malgun Gothic", "맑은 고딕", system-ui, Arial, sans-serif;
}
.lg-table {
  width: 100%;
  border-collapse: collapse;
  /* 고밀도: 12px 기본 크기 */
  font-size: 12px;
  table-layout: fixed;
  /* 좁은 화면(폰 세로)에서 width:100%가 고정폭 컬럼들을 짓눌러 품목명 열이 0폭으로
     사라지고 눌리지도 않았다. 컬럼 폭 합 밑으로는 줄지 않게 하고 .lg-wrap이 가로로 스크롤한다. */
  min-width: max-content;
}
/* 컬럼 너비 — fixed 레이아웃 기준, th 폭이 td를 결정 */
.lg-th--drag  { width: 22px; }
.lg-th--item  { width: auto; }   /* 품목명: 나머지 공간 흡수 */
.lg-th--qty   { width: 96px; }
.lg-th--unit  { width: 50px; }
.lg-th--price { width: 88px; }
.lg-th--amount{ width: 88px; }
.lg-th--del   { width: 30px; }
/* 좁은 화면 — auto 폭(나머지 흡수)이 0에 수렴해 품목명 열이 사라지므로 폭을 고정한다.
   table-layout:fixed 에서는 th의 min-width가 먹지 않아 width로 준다. */
@media (max-width: 900px) {
  .lg-th--item { width: 220px; }
}
/* 읽기전용 정보 컬럼(infoCols / leadingInfoCols) */
.lg-th--info  { width: 130px; }
.lg-cell--info {
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 편집 가능 per-row 컬럼(extraCols) — 납품위치 select 등 */
.lg-th--extra { width: 150px; }
.lg-cell--extra { padding: 2px 3px; }
.lg-input--extra {
  width: 100%;
  height: 28px;
  padding: 0 5px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.lg-input--extra:focus {
  outline: none;
  border-color: var(--primary, #2D5BFF);
  box-shadow: 0 0 0 2px var(--primary-soft, #EAEFFF);
  background: #fff;
}

.lg-th {
  /* 헤더 음영 배경 — 코리아e플랫폼 수준: 은은한 회색 */
  padding: 6px 7px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #4b5563;
  background: #f1f3f7;
  border-bottom: 1px solid #c4c9d4;  /* 헤더·바디 구분선 — 셀 1px과 두께 통일 */
  border-right: 1px solid #dde1e8;   /* 바디 셀과 동일 색상으로 세로 격자 연속 */
  white-space: nowrap;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; /* 리사이즈 핸들 position:absolute 기준 */
}
.lg-th:last-child { border-right: none; }
.lg-th--qty,
.lg-th--price,
.lg-th--amount { text-align: right; }

/* 행 — 36px 행 높이, 셀 경계선 */
/* ⚠️ 클래스명 충돌 방어: components.css의 차트 범례 `.lg-row { display:flex }`가
   이 표의 <tr class="lg-row">를 flex로 덮어써 행이 무너지는 것을 더 높은 특이성으로 강제 복원. */
.lg-table .lg-row { display: table-row; }
/* 행 border-bottom 제거 — 셀 단위 border-bottom으로 통일해 끊김 방지. */
.lg-row { border-bottom: none; }
/* 선택/포커스 행 하이라이트 — 파란 계열 */
.lg-row:hover { background: #f5f8ff; }
.lg-row:focus-within { background: #eef4ff; }
/* 빈 입력 행은 흐리게 하지 않는다 — opacity 0.55는 입력칸을 비활성처럼 보이게 했다. */
.lg-row--empty { opacity: 1; }

/* 셀 — 경계선: 우측(세로 격자) + 하단(가로 격자) 모두 셀 레벨로 통일 */
/* border-collapse:collapse 환경에서 셀마다 border-bottom 지정 시 연속 가로선 보장. */
.lg-cell {
  padding: 2px 4px;
  height: 36px;
  vertical-align: middle;
  border-right: 1px solid #dde1e8;
  border-bottom: 1px solid #dde1e8;
  overflow: hidden;
}
.lg-cell:last-child { border-right: none; }
/* tfoot 바로 위 마지막 tbody 행의 하단 경계는 tfoot border-top이 담당 — 중복 제거 */
.lg-tbody tr:last-child .lg-cell { border-bottom: none; }
/* 읽기전용 금액 셀 */
.lg-cell--ro {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
  white-space: nowrap;
  font-size: 12px;
}

/* 드래그 핸들 */
.lg-drag-handle {
  display: block;
  color: var(--text-faint);
  cursor: grab;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* 품목 셀 래퍼 — 입력+매칭점+드롭다운 */
.lg-item-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}
/* 매칭 완료 초록 점 */
.lg-matched-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex: 0 0 auto;
}

/* 입력 필드 공통 — in-cell: 투명 배경·포커스시 파란 테두리+ring */
.lg-input {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 12px;
  background: transparent;
  color: var(--text-strong);
  outline: none;
  transition: border-color .12s, background .12s, box-shadow .12s;
  font-family: inherit;
  line-height: 1.4;
  height: 28px;
}
/* 포커스 시 파란 보더 + 연파랑 ring — 노란 배경 제거 */
.lg-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.lg-input:hover:not(:focus) { background: #f5f7fa; }
.lg-input::placeholder { color: var(--text-faint); font-size: 11px; }
/* 숫자 컬럼 우측정렬 */
.lg-input--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.lg-input--num::-webkit-outer-spin-button,
.lg-input--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lg-input--item { min-width: 120px; }
.lg-input--unit { text-align: center; font-size: 11px; }

/* 행 삭제 버튼 */
.lg-del-btn {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.lg-del-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* 서제스트 드롭다운 — 흰 카드·그림자·라운드.
   .lg-wrap이 overflow-x:auto(가로스크롤)라 absolute로 두면 드롭다운이 통째로 잘려
   화면에 아예 안 보였다. fixed로 띄우고 좌표는 _positionSuggests()가 잡는다. */
.lg-suggests {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 260px;
  max-width: 380px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 200;
  overflow: hidden;
}
.lg-sug-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  font-size: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  border-bottom: 1px solid #f3f4f6;
}
.lg-sug-item:last-child { border-bottom: none; }
.lg-sug-item:hover, .lg-sug-item:focus { background: #eff4ff; outline: none; }
.lg-sug-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-sug-code { font-size: 10px; color: var(--text-muted); font-family: monospace; flex: 0 0 auto; }
.lg-sug-spec { font-size: 10px; color: var(--text-faint); flex: 0 0 auto; }
.lg-sug-empty { padding: 10px 12px; font-size: 12px; color: var(--text-faint); }

/* 합계 행(tfoot) — 연회색 배경·굵게·우측정렬 */
/* 모든 tfoot 셀에 상단선·배경 통일 — 빈 <td>(단가·납기일자·납품위치·삭제)에도 적용해
   그 아래 가로선이 끊기지 않게(마지막 tbody 행 하단 경계를 tfoot border-top이 담당). */
.lg-table tfoot td { border-top: 1px solid #d1d5db; background: #f8fafc; }
.lg-tfoot-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  background: #f8fafc;
  border-top: 1px solid #d1d5db;
}
.lg-tfoot-total {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  color: var(--text-strong);
  background: #f8fafc;
  border-top: 1px solid #d1d5db;
  font-variant-numeric: tabular-nums;
}
/* 수량 전용 합계 셀(showPrice=false 또는 showPrice=true 모두 사용) */
.lg-tfoot-qty {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  color: var(--text-strong);
  background: #f8fafc;
  border-top: 1px solid #d1d5db;
  font-variant-numeric: tabular-nums;
}
/* 부가세 합계 셀 (showVat=true) */
.lg-tfoot-vat {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--text);
  background: #f8fafc;
  border-top: 1px solid #d1d5db;
  font-variant-numeric: tabular-nums;
}

/* 부가세 컬럼 헤더·셀 */
.lg-th--vat   { width: 72px; text-align: right; }
.lg-cell--vat {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
  white-space: nowrap;
  font-size: 11px;
  background: #f8fafc;
}

/* 이카운트식 품목코드 직접 타이핑 셀 (searchable leadingInfoCols) */
.lg-th--code  { width: 110px; }
.lg-cell--code {
  padding: 2px 3px;
}
.lg-input--code {
  width: 100%;
  min-width: 90px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  font-family: monospace, inherit;
  background: transparent;
  color: var(--text-strong);
  outline: none;
  transition: border-color .12s, background .12s, box-shadow .12s;
  height: 28px;
}
.lg-input--code:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.lg-input--code:hover:not(:focus) { background: #f5f7fa; }
.lg-input--code::placeholder { color: var(--text-faint); font-size: 10px; }

/* 날짜 타입 extraCols 입력 (납기일자 등) */
.lg-input--date {
  width: 100%;
  height: 28px;
  padding: 0 4px;
  font-size: 11px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  box-sizing: border-box;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.lg-input--date:focus {
  border-color: var(--primary, #2D5BFF);
  box-shadow: 0 0 0 2px var(--primary-soft, #EAEFFF);
  background: #fff;
}

/* 서제스트 — 코드 앞표시 스타일 조정 (이카운트식 코드+이름+규격 순서) */
.lg-sug-code {
  font-size: 11px;
  color: var(--primary, #2D5BFF);
  font-family: monospace;
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 70px;
}
.lg-sug-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong);
}

/* 컬럼 리사이즈 핸들 — ot-resize-handle 패턴 이식, lg-th position:relative 기반 */
.lg-resize-handle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  /* 드래그 시작 예방 — 텍스트 선택 차단 */
  user-select: none;
}
.lg-resize-handle:hover,
.lg-resize-handle--resizing { background: var(--primary, #2D5BFF); opacity: .35; }

/* line-grid 다크모드 — 위 .lg-* 는 헤더·입력·드롭다운·합계에 하드코딩 흰/연회색 배경을
   쓰는데 글자색은 적응형(var(--text*))이라 다크에선 밝은 글자가 밝은 배경에 묻혀 안 보였다
   (납품위치 입력·자동완성·합계행 등). 다크 스코프로 어두운 표면에 재매핑(라이트 무영향). */
[data-theme="dark"] .lg-th {
  color: var(--text-muted); background: var(--surface-2);
  border-bottom-color: var(--border-2); border-right-color: var(--border);
}
[data-theme="dark"] .lg-cell { border-right-color: var(--border); border-bottom-color: var(--border); }
[data-theme="dark"] .lg-row:hover { background: var(--surface-2); }
[data-theme="dark"] .lg-row:focus-within { background: var(--primary-softer); }
[data-theme="dark"] .lg-input:focus,
[data-theme="dark"] .lg-input--code:focus { background: var(--surface); }
[data-theme="dark"] .lg-input:hover:not(:focus),
[data-theme="dark"] .lg-input--code:hover:not(:focus) { background: var(--surface-2); }
[data-theme="dark"] .lg-input--extra,
[data-theme="dark"] .lg-input--date {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] .lg-input--extra:focus,
[data-theme="dark"] .lg-input--date:focus { background: var(--surface); }
[data-theme="dark"] .lg-suggests { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .lg-sug-item { border-bottom-color: var(--border); }
[data-theme="dark"] .lg-sug-item:hover,
[data-theme="dark"] .lg-sug-item:focus { background: var(--surface-2); }
[data-theme="dark"] .lg-table tfoot td,
[data-theme="dark"] .lg-tfoot-label,
[data-theme="dark"] .lg-tfoot-total,
[data-theme="dark"] .lg-tfoot-qty,
[data-theme="dark"] .lg-tfoot-vat,
[data-theme="dark"] .lg-cell--vat { background: var(--surface-2); border-top-color: var(--border); }

/* 에드워드 구매관리 — 라인 그리드 마운트 래퍼 */
.edw-pur-line-grid-mount {
  margin-top: 12px;
}
/* 그리드 위 액션 버튼 줄 */
.edw-pur-grid-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────
   에드워드 PC 주문 입력 폼 — 이카운트식 문서 입력(.edw-order-form-*)
   PC(≥900px) 전용. 모바일 위자드와 완전 분리.
   ────────────────────────────────────────────────────────────── */
.edw-order-form-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg, #F6F7FB);
  font-family: -apple-system, "Malgun Gothic", "맑은 고딕", system-ui, Arial, sans-serif;
}

/* ① 상단 타이틀바 — 이카운트식 (화면명 좌측, 리스트 버튼 우측) */
.edw-order-form-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.edw-order-form-screen-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -.02em;
}
/* 기존 타이틀 클래스 하위호환 유지 */
.edw-order-form-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
}
.edw-order-form-list-btn {
  font-size: 11px;
  padding: 3px 10px;
  height: 26px;
  border-radius: 6px;
}

/* ② 헤더 폼 — 카드형 컨테이너, 2단 라벨-좌측 그리드 */
.edw-order-form-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
  /* 카드형: 흰 배경·은은한 그림자 */
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.edw-order-form-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.edw-order-form-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edw-order-form-row {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
}
.edw-order-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.edw-order-form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  /* 라벨폭 고정 — 라벨/인풋 정렬 */
  min-width: 72px;
  width: 72px;
  flex: 0 0 72px;
  padding-right: 8px;
  white-space: nowrap;
}
.edw-order-form-value {
  font-size: 13px;
  color: var(--text-strong);
  padding: 0 4px;
}
.edw-order-form-value--fixed {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-2, #f3f5f9);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  height: 34px;
  display: inline-flex;
  align-items: center;
}
.edw-order-form-value--orderno {
  font-family: monospace;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: .02em;
}
/* 필수 표시 별표 */
.edw-order-form-req {
  color: var(--danger);
  margin-left: 2px;
}
/* 인풋 — 34px 높이·라운드 6px·흰 배경·보더 */
.edw-order-form-select,
.edw-order-form-input {
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 13px;
  background: #fff;
  color: var(--text-strong);
  font-family: inherit;
  outline: none;
  min-width: 130px;
  transition: border-color .12s, box-shadow .12s;
}
.edw-order-form-select:focus,
.edw-order-form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ③ 툴바 — 그리드 위 버튼 행 (보더형 버튼) */
.edw-order-form-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, #f3f5f9);
  flex: 0 0 auto;
}
.edw-order-form-tool-btn {
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: var(--text-strong);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.edw-order-form-tool-btn:hover {
  background: #f3f4f6;
  border-color: #b0b7c3;
}
/* 전표불러오기 버튼 — 약한 primary 강조 */
.edw-order-form-tool-btn[data-action="load-replenish"] {
  border-color: var(--primary);
  color: var(--primary);
}
.edw-order-form-tool-btn[data-action="load-replenish"]:hover {
  background: var(--primary-soft, #EAEFFF);
  border-color: var(--primary);
}

/* ④ 그리드 영역 — 라인 그리드 마운트 */
.edw-order-form-grid-area {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  background: var(--bg, #F6F7FB);
}
.edw-order-form-grid-area .lg-wrap {
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  /* 그리드는 bg와 구분되도록 흰 배경 */
  background: #fff;
}
/* 기존 hint — 더 이상 미사용이나 하위호환 유지 */
.edw-order-form-grid-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 6px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ⑤ 하단 액션바 — 저장(F8)·다시 작성·리스트, 우측 정렬 */
.edw-order-form-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
  box-shadow: 0 -1px 4px rgba(0,0,0,.04);
}
.edw-order-form-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* 저장 버튼 — primary, 라운드 8px, 넉넉한 패딩 */
.edw-order-form-save-btn {
  font-size: 13px;
  font-weight: 700;
  height: 36px;
  padding: 0 22px;
  border-radius: 8px;
  letter-spacing: -.01em;
}
/* 하단바 ghost 버튼 라운드 통일 */
.edw-order-form-footer .btn--ghost {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
}

/* 확정 전 검증 에러 메시지 */
.edw-order-form-err {
  font-size: 12px;
  color: var(--danger);
  margin-right: auto;
}

/* ──────────────────────────────────────────────────────────────
   에드워드 모바일 주문관리 — 확정 버튼·주문 카드·상세 드로어·목록 래퍼
   모바일(field-main.js)에서 렌더. PC edw-order-form-*과 별개.
   ────────────────────────────────────────────────────────────── */

/* 주문 확정 버튼 래퍼 — 내역 목록·[주문 목록] 세그먼트 상단 공통 */
.edw-order-confirm-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.edw-order-confirm-btn {
  width: 100%;
  height: 52px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
}
.edw-order-offline-hint {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  text-align: center;
}

/* 확정 주문 목록 카드 */
.edw-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.edw-order-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, background .12s;
  min-height: 56px;
}
.edw-order-card:active {
  border-color: var(--primary, #3556E8);
  background: var(--primary-soft, #e8efff);
}
.edw-order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.edw-order-no {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-strong, #111);
  letter-spacing: -.01em;
}
.edw-order-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}
.edw-order-date { font-variant-numeric: tabular-nums; }

/* 확정 주문 섹션(보충 입력 위자드 영역 하단) */
.edw-order-section {
  padding: 0 0 8px;
}
.edw-order-loading,
.edw-order-empty {
  padding: 18px 16px;
  font-size: 14px;
  color: var(--text-faint, #9ca3af);
}

/* [주문 목록] 세그먼트 래퍼 */
.edw-field-list-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 확정 주문 상세 드로어 */
.edw-order-detail-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
}
.edw-order-detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.edw-order-detail-panel {
  position: relative;
  width: 100%;
  max-height: 88dvh;
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.edw-order-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.edw-order-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edw-order-detail-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #f9fafb);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted, #9ca3af);
  flex-shrink: 0;
}
.edw-order-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.edw-order-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px;
}
.edw-order-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.edw-order-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* 주문 상세 라인 — 품목명(또렷이) + 코드 칩 + 규격 */
.edw-order-detail-name { font-weight: 600; color: var(--text, #111827); }
.edw-order-detail-code {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 10px; background: var(--primary-soft, #eef2ff);
  color: var(--primary, #4f46e5); font-size: 11px; font-family: monospace;
  vertical-align: middle;
}
.edw-order-detail-spec { margin-left: 6px; font-size: 11px; color: var(--text-faint, #9ca3af); }
.edw-order-detail-table th {
  text-align: left;
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.edw-order-detail-row td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2, #f3f4f6);
  vertical-align: middle;
}
.edw-order-detail-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.edw-order-ecount-btn {
  font-size: 13px;
}

/* 현장 세그먼트 탭 — 보충 입력 / 주문 목록 */
.edw-field-segment {
  display: flex;
  border-bottom: 2px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  flex-shrink: 0;
}
.edw-field-seg-btn {
  flex: 1;
  padding: 13px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-faint, #9ca3af);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.edw-field-seg-btn.active {
  color: var(--primary, #3556E8);
  border-bottom-color: var(--primary, #3556E8);
}

/* ── 보충 점검 일지 — 날짜별 그룹 일지 (.edw-repl-journal-*) ── */
.edw-repl-journal-preset-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px 0;
}
.edw-repl-journal-preset-btn {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  background: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.edw-repl-journal-preset-btn.active {
  background: var(--primary, #3556E8);
  color: #fff;
  border-color: var(--primary, #3556E8);
}
.edw-repl-journal-groups {
  padding: 6px 0 32px;
}
.edw-repl-journal-group {
  margin-bottom: 4px;
}

/* ── 점검 일지 하루 단위 날짜 네비게이션 ── */
.edw-repl-journal-day-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 2px;
}
.edw-repl-day-nav {
  flex: 0 0 auto;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; border: 1.5px solid var(--border, #e5e7eb);
  background: var(--surface, #fff); color: var(--primary, #2D5BFF); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edw-repl-day-nav svg { width: 20px; height: 20px; }
.edw-repl-day-nav:disabled { opacity: .35; cursor: default; color: var(--text-faint, #9aa1ac); }
.edw-repl-day-label {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 10px; border-radius: 10px;
  background: var(--bg, #F1F3F7); cursor: pointer; text-align: center;
}
.edw-repl-day-label-text { font-size: 15px; font-weight: 800; color: var(--text-strong, #111); letter-spacing: -.01em; }
.edw-repl-day-count {
  font-size: 12px; font-weight: 700; color: var(--primary, #2D5BFF);
  background: var(--surface, #fff); border-radius: 999px; padding: 1px 9px;
  font-variant-numeric: tabular-nums;
}
/* 날짜 입력 — 라벨 전체를 덮어 탭 시 네이티브 달력 */
.edw-repl-day-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; padding: 0; margin: 0; cursor: pointer;
}

/* ── 점검 일지 다중선택(일괄 삭제) ── */
.edw-repl-journal-preset-sp { flex: 1; }
.edw-repl-journal-select-toggle {
  padding: 4px 13px; font-size: 12px; font-weight: 700;
  border-radius: 12px; border: 1.5px solid var(--border, #e5e7eb);
  background: none; color: var(--primary, #2D5BFF); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edw-repl-journal-select-toggle.active {
  background: var(--primary-soft, #e8efff); border-color: var(--primary, #2D5BFF);
}
.edw-repl-select-hint {
  margin: 8px 14px 2px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted, #6b7280);
}
/* 선택 모드 행 — 좌측 체크 + 본문 */
.edw-repl-draft-row--select {
  flex-direction: row !important; align-items: center; gap: 12px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.edw-repl-draft-row--select.is-selected {
  border-color: var(--primary, #2D5BFF); background: var(--primary-softer, #F2F5FF);
}
.edw-repl-draft-row--select.is-locked { opacity: .6; cursor: default; }
.edw-repl-draft-row-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px;
}
.edw-repl-draft-check {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--border-2, #cdd2da);
  display: grid; place-items: center;
  font-size: 16px; font-weight: 900; color: #fff;
  background: var(--surface, #fff);
}
.edw-repl-draft-row--select.is-selected .edw-repl-draft-check {
  background: var(--primary, #2D5BFF); border-color: var(--primary, #2D5BFF);
}
.edw-repl-draft-check--locked {
  border: none; background: none; color: var(--text-faint, #9aa1ac); font-size: 15px;
}
/* 선택 모드에서는 행 내부 편집/삭제/더보기 버튼 숨김(체크 동작과 충돌 방지) */
.edw-repl-draft-row--select .edw-repl-pc-btn-group,
.edw-repl-draft-row--select .edw-repl-draft-more { display: none !important; }
/* 일괄 삭제 하단 바 */
.edw-repl-bulk-bar {
  position: sticky; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 10px;
  margin: 10px 14px 0; padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb); border-radius: 14px;
  box-shadow: 0 -4px 16px rgba(17, 24, 39, .08);
}
.edw-repl-bulk-info { font-size: 14px; font-weight: 700; color: var(--text-strong, #111); }
.edw-repl-bulk-info b { color: var(--primary, #2D5BFF); font-variant-numeric: tabular-nums; }
.edw-repl-bulk-clear {
  margin-left: auto; padding: 9px 14px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-muted, #6b7280); cursor: pointer;
}
.edw-repl-bulk-del {
  padding: 11px 18px; font-size: 14px; font-weight: 800;
  border: none; border-radius: 10px;
  background: var(--danger, #E5484D); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.edw-repl-bulk-del:active { opacity: .88; }
.edw-repl-journal-date-header {
  padding: 8px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  background: var(--surface-alt, #f9fafb);
  border-top: 1px solid var(--border, #e5e7eb);
  letter-spacing: .01em;
}
.edw-repl-journal-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-faint, #9ca3af);
  font-size: 14px;
}

/* ── 모바일 일지 레이아웃 토글 바 (.edw-repl-jlayout-*) ── */
.edw-repl-jlayout-bar {
  display: flex;
  gap: 4px;
  padding: 6px 14px 0;
}
.edw-repl-jlayout-btn {
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e5e7eb);
  background: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.edw-repl-jlayout-btn.active {
  background: var(--primary, #3556E8);
  color: #fff;
  border-color: var(--primary, #3556E8);
}

/* ── 모바일 일지 납품구역 카드 보기 (.edw-repl-jgrp-*) ── */
.edw-repl-jgrp-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  margin: 6px 14px 0;
  overflow: hidden;
}
.edw-repl-jgrp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 5px;
  background: var(--surface-alt, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.edw-repl-jgrp-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  letter-spacing: .01em;
}
.edw-repl-jgrp-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint, #9ca3af);
}
/* 구역 카드 안 품목 행 — 첫/마지막 라운드 제거(카드가 이미 라운드) */
.edw-repl-jgrp-card .edw-repl-jrow:first-child { border-radius: 0; }
.edw-repl-jgrp-card .edw-repl-jrow:last-child  { border-radius: 0; border-bottom: none; }
.edw-repl-jgrp-card .edw-repl-jrow:only-child  { border-radius: 0; border-bottom: none; }

/* ── 모바일 일지 표 보기 (.edw-repl-jtbl-*) ── */
.edw-repl-jtbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 6px 0 0;
}
.edw-repl-jtbl-th {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  background: var(--surface-alt, #f9fafb);
  border-bottom: 1.5px solid var(--border, #e5e7eb);
  text-align: left;
  white-space: nowrap;
}
.edw-repl-jtbl-th--qty,
.edw-repl-jtbl-th--status { text-align: right; }
.edw-repl-jtbl-row {
  border-bottom: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background .1s;
}
.edw-repl-jtbl-row:active { background: var(--surface-alt, #f9fafb); }
.edw-repl-jtbl-row.is-confirmed { opacity: 0.62; }
.edw-repl-jtbl-loc {
  padding: 6px 6px 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  vertical-align: top;
  white-space: nowrap;
  border-right: 1px solid var(--border, #e5e7eb);
}
.edw-repl-jtbl-item {
  padding: 5px 6px;
  min-width: 0;
}
.edw-repl-jtbl-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.edw-repl-jtbl-item-code {
  font-size: 10.5px;
  color: var(--text-faint, #9ca3af);
}
.edw-repl-jtbl-qty {
  padding: 5px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-strong, #111);
  white-space: nowrap;
}
.edw-repl-jtbl-status {
  padding: 5px 8px 5px 4px;
  text-align: right;
  white-space: nowrap;
}

/* 주문 목록 — 현장 날짜그룹 카드 */
.edw-repl-order-field-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 14px 8px;
}
.edw-repl-order-field-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .12s;
}
.edw-repl-order-field-card:active {
  background: var(--surface-alt, #f9fafb);
}
.edw-repl-order-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edw-repl-order-field-row--sub {
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 6px;
}
.edw-repl-order-no {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
  flex: 1;
}
.edw-repl-order-meta {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* PC 우측 일지 패널 — 전체 높이 스크롤 */
#edw-repl-journal-pc {
  overflow-y: auto;
  flex: 1;
}

/* ── P1 재고현황 PC 표 (.edw-stk-*) ── */
/* 이카운트/다비치식 촘촘한 스프레드시트 그리드 — 시스템 기본폰트, 정보밀도 최대 */
.edw-stk-root {
  padding: 12px 16px;
  font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  color: var(--text, #1b1f27);
}
.edw-stk-header { margin-bottom: 8px; }
.edw-stk-title { font-size: 15px; font-weight: 700; color: var(--text-strong, #111); margin: 0 0 2px; }
.edw-stk-desc { font-size: 11px; color: var(--text-muted, #888); margin: 0; }
.edw-stk-filter-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.edw-stk-search {
  flex: 1;
  min-width: 160px;
  padding: 4px 7px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1b1f27);
}
.edw-stk-loc-sel {
  padding: 4px 6px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1b1f27);
  cursor: pointer;
}
.edw-stk-refresh-btn {
  padding: 4px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 11px;
  background: var(--surface, #fff);
  color: var(--text-muted, #555);
  cursor: pointer;
  white-space: nowrap;
}
.edw-stk-refresh-btn:hover { background: var(--surface-hover, #f3f4f6); }
.edw-stk-row--edit { background: var(--primary-tint, #eff4ff) !important; }
.edw-stk-save-btn, .edw-stk-cancel-btn {
  padding: 2px 6px;
  margin-left: 3px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid;
  vertical-align: middle;
}
.edw-stk-save-btn {
  background: var(--primary, #3556E8);
  color: #fff;
  border-color: var(--primary, #3556E8);
}
.edw-stk-cancel-btn {
  background: var(--surface, #fff);
  color: var(--text-muted, #555);
  border-color: var(--border, #d1d5db);
}
.edw-stk-msg {
  padding: 24px;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 13px;
  line-height: 1.6;
}
.edw-stk-msg--info { color: var(--text-muted, #888); }

/* ============================================================
   .xg-* — 엑셀식 셀 그리드 (재고현황 샘플 1호, 2026-08-12)
   웹폰트 아닌 시스템 기본폰트 · 전 셀 1px 격자 · 셀 단위 선택/편집.
   참조 화면(이카운트)에서 가져온 것은 동작과 정보밀도지 스킨이 아니다.
   신규 hex 없음 — 기존 토큰만 사용.
   ============================================================ */
/* 격자·선택 토큰 — :root에 둔다. 화면마다 루트 클래스가 달라(.edw-stk-root·.page-sc·.page-dw)
   특정 클래스에만 걸면 그 클래스를 안 쓰는 화면에서 --xg-row-h가 미정의가 되고,
   행 높이가 내용에 따라 제각각이 된다(2026-08-12 스캔함·도면조회에서 실제로 그랬다). */
:root {
  --xg-line: var(--border-2, #E2E5EB);
  --xg-line-strong: var(--text-faint, #9AA1AC);
  --xg-head-bg: var(--surface-2, #F3F5F9);
  --xg-sel-bg: var(--primary-softer, #F2F5FF);
  --xg-row-h: 24px;
}
.xg-wrap {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - 230px);
  border: 1px solid var(--xg-line);
  border-radius: 4px;
  background: var(--surface, #fff);
  outline: none;
}
.xg-wrap:focus-visible { box-shadow: inset 0 0 0 1px var(--primary, #2D5BFF); }
.xg-tbl {
  border-collapse: separate;   /* sticky + 셀 테두리 공존 — collapse는 sticky에서 선이 사라진다 */
  border-spacing: 0;
  /* 엑셀 느낌의 핵심 — 웹폰트(Pretendard) 대신 OS 기본 UI 폰트 */
  font-family: -apple-system, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', system-ui, Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: var(--text-strong, #111827);
  /* 너비는 JS가 열 너비 합을 px로 넣어 준다 — fixed 레이아웃은 확정 너비일 때만
     colgroup을 지킨다(max-content 같은 비확정값이면 내용 길이대로 늘어난다). */
  table-layout: fixed;
  min-width: 100%;
  cursor: cell;
  user-select: none;
}

/* 헤더 — 상단 고정 */
.xg-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: var(--xg-row-h);
  padding: 0 6px;
  background: var(--xg-head-bg);
  border-right: 1px solid var(--xg-line);
  border-bottom: 1px solid var(--xg-line-strong);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #6B7280);
  white-space: nowrap;
  cursor: pointer;
}
.xg-th { position: relative; text-align: center; }
.xg-th-label { pointer-events: none; }
.xg-th-sort { margin-left: 3px; font-size: 9px; color: var(--primary, #2D5BFF); pointer-events: none; }
.xg-th--sorted { color: var(--text-strong, #111827); }
.xg-th.xg-hl { background: var(--primary-soft, #EAEFFF); color: var(--primary, #2D5BFF); }
/* 열 너비 드래그 손잡이 — 경계 밖으로 내밀면 다음 헤더(같은 z-index, DOM 뒤)가
   덮어 잡히는 폭이 절반으로 준다. 자기 헤더 안쪽 끝 8px를 손잡이로 쓴다. */
.xg-th-grip {
  position: absolute; top: 0; right: 0; width: 8px; height: 100%;
  cursor: col-resize; z-index: 4;
}
body.xg-resizing { cursor: col-resize; user-select: none; }

/* 좌상단 모서리 — 전체 선택. 가로 스크롤 시 다른 헤더 위에 떠야 하므로
   .xg-tbl thead th(z-index:3)보다 높은 특이도로 z-index를 다시 준다. */
.xg-tbl thead th.xg-corner {
  left: 0; z-index: 6;
  width: 46px;
  background: var(--xg-head-bg);
}

/* 행번호 열 — 좌측 고정 */
.xg-rowno {
  position: sticky; left: 0; z-index: 2;
  height: var(--xg-row-h);
  padding: 0 4px;
  background: var(--xg-head-bg);
  border-right: 1px solid var(--xg-line-strong);
  border-bottom: 1px solid var(--xg-line);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint, #9AA1AC);
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.xg-rowno.xg-hl { background: var(--primary-soft, #EAEFFF); color: var(--primary, #2D5BFF); font-weight: 600; }

/* 데이터 셀 — 엑셀처럼 넘치면 자르고 줄바꿈 없음 */
.xg-td {
  height: var(--xg-row-h);
  padding: 0 6px;
  border-right: 1px solid var(--xg-line);
  border-bottom: 1px solid var(--xg-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}
.xg-a-left   { text-align: left; }
.xg-a-right  { text-align: right; font-variant-numeric: tabular-nums; }
.xg-a-center { text-align: center; }
.xg-td--zero { color: var(--text-faint, #9AA1AC); }
/* 읽기 전용 열은 편집 커서를 주지 않는다(이동·선택·복사는 그대로) */
.xg-td--ro { cursor: cell; }

/* 선택 범위 — 옅은 배경 + 범위 바깥선(엑셀 동작) */
.xg-td.xg-sel { background: var(--xg-sel-bg); }
.xg-td.xg-e-t { box-shadow: inset 0 1px 0 0 var(--primary, #2D5BFF); }
.xg-td.xg-e-b { box-shadow: inset 0 -1px 0 0 var(--primary, #2D5BFF); }
.xg-td.xg-e-l { box-shadow: inset 1px 0 0 0 var(--primary, #2D5BFF); }
.xg-td.xg-e-r { box-shadow: inset -1px 0 0 0 var(--primary, #2D5BFF); }
.xg-td.xg-e-t.xg-e-b { box-shadow: inset 0 1px 0 0 var(--primary), inset 0 -1px 0 0 var(--primary); }
.xg-td.xg-e-l.xg-e-r { box-shadow: inset 1px 0 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-l { box-shadow: inset 0 1px 0 0 var(--primary), inset 1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-r { box-shadow: inset 0 1px 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-b.xg-e-l { box-shadow: inset 0 -1px 0 0 var(--primary), inset 1px 0 0 0 var(--primary); }
.xg-td.xg-e-b.xg-e-r { box-shadow: inset 0 -1px 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-b.xg-e-l { box-shadow: inset 0 1px 0 0 var(--primary), inset 0 -1px 0 0 var(--primary), inset 1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-b.xg-e-r { box-shadow: inset 0 1px 0 0 var(--primary), inset 0 -1px 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-l.xg-e-r { box-shadow: inset 0 1px 0 0 var(--primary), inset 1px 0 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-b.xg-e-l.xg-e-r { box-shadow: inset 0 -1px 0 0 var(--primary), inset 1px 0 0 0 var(--primary), inset -1px 0 0 0 var(--primary); }
.xg-td.xg-e-t.xg-e-b.xg-e-l.xg-e-r { box-shadow: inset 0 0 0 1px var(--primary, #2D5BFF); }

/* 활성 셀 — 엑셀의 굵은 커서 테두리. 범위 바깥선을 덮는다. */
.xg-td.xg-cur {
  background: var(--surface, #fff);
  box-shadow: inset 0 0 0 2px var(--primary, #2D5BFF) !important;
  z-index: 1;
}

/* 셀 안 버튼·칩 — 행 높이(24px)를 절대 넘기지 않는다.
   넘기면 그 행만 부풀어 격자가 들쭉날쭉해지고, 표가 표가 아니게 된다.
   (2026-08-12 스캔함 — 보기·받기 버튼이 든 행만 36px로 늘어난 것에서 규칙화.) */
.xg-td .btn,
.xg-td button:not(.xg-input) {
  height: 18px; min-height: 0; padding: 0 7px;
  font-size: 11px; line-height: 1; border-radius: 3px;
  display: inline-flex; align-items: center; vertical-align: middle;
}
.xg-td .btn + .btn { margin-left: 3px; }
.xg-td .badge, .xg-td .sc-skip {
  display: inline-flex; align-items: center; height: 16px;
  padding: 0 6px; font-size: 11px; line-height: 1; vertical-align: middle;
}

/* 인라인 편집 */
.xg-td--editing { padding: 0; }
/* 입력칸은 셀 위에 절대배치 — 흐름에 끼우면 편집 중 행 높이가 1~2px 밀려 표가 흔들린다. */
.xg-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 5px;
  border: 2px solid var(--primary, #2D5BFF);
  border-radius: 0;
  background: var(--surface, #fff);
  color: var(--text-strong, #111827);
  font: inherit;
  text-align: right;
  outline: none;
  box-sizing: border-box;
}
.xg-td--pending { opacity: .55; }
.xg-td--failed { background: var(--danger-soft, #FCEAEA) !important; }

/* 상태줄 — 엑셀 하단 바 */
.xg-status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 3px 8px;
  border: 1px solid var(--xg-line);
  border-radius: 4px;
  background: var(--surface-2, #F3F5F9);
  font-family: -apple-system, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', system-ui, Arial, sans-serif;
  font-size: 11px;
  color: var(--text-muted, #6B7280);
  min-height: 22px;
}
.xg-status-pos { font-weight: 600; color: var(--text-strong, #111827); }
.xg-status-sum { font-variant-numeric: tabular-nums; }
.xg-status-hint { margin-left: auto; color: var(--text-faint, #9AA1AC); }
.xg-status-flash { color: var(--primary, #2D5BFF); font-weight: 600; }

/* 4상태 — 로딩 스켈레톤 · 빈 · 에러 */
.xg-state {
  border: 1px solid var(--xg-line);
  border-radius: 4px;
  background: var(--surface, #fff);
  padding: 20px 18px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted, #6B7280);
}
.xg-state-title { display: block; font-size: 13px; color: var(--text-strong, #111827); margin-bottom: 4px; }
.xg-state-msg { margin: 0; }
.xg-state-sub { margin: 6px 0 0; font-size: 11px; color: var(--text-faint, #9AA1AC); }
.xg-state--error .xg-state-title { color: var(--danger, #E5484D); }
.xg-retry-btn {
  margin-top: 10px;
  padding: 4px 14px;
  border: 1px solid var(--border-2, #E2E5EB);
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--text, #374151);
  font: inherit;
  cursor: pointer;
}
.xg-retry-btn:hover { background: var(--surface-2, #F3F5F9); }
.xg-sk-head, .xg-sk-row { display: flex; gap: 1px; padding: 0 1px; }
.xg-sk-head { background: var(--xg-head-bg); border-bottom: 1px solid var(--xg-line); }
.xg-sk-head .xg-sk-bar, .xg-sk-row .xg-sk-bar {
  flex: 1;
  height: var(--xg-row-h);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: xg-sk 1.4s ease infinite;
  transform: scaleX(1);
}
.xg-sk-row { border-bottom: 1px solid var(--xg-line); }
@keyframes xg-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .xg-sk-bar { animation: none; } }
.xg-state[aria-busy="true"] { padding: 0; overflow: hidden; }
.xg-state[aria-busy="true"] .xg-state-msg { padding: 10px; }

/* 다크 — 격자선과 선택 배경만 다시 잡는다(글자·표면은 기존 토큰이 처리) */
[data-theme="dark"] {
  --xg-line: #2A3450;
  --xg-line-strong: #3C4870;
  --xg-head-bg: var(--surface-2);
  --xg-sel-bg: #172142;
}

/* ── 거래처 이메일 마스터 PC 표 (.emp-*) ── */
/* edw-stk-*와 동일한 이카운트식 촘촘한 스프레드시트 그리드 관행 재사용 */
.emp-root {
  padding: 12px 16px;
  font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  color: var(--text, #1b1f27);
}
/* AI 거래처 제안(121) — 표준 카드(굵은 컬러 테두리 금지 규칙 준수) */
.emp-sg { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); padding: 10px 14px 12px; margin-bottom: 12px; }
.emp-sg-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--text-strong); margin-bottom: 8px; }
.emp-sg-head .ic { width: 15px; height: 15px; color: var(--primary); }
.emp-sg-n { font-size: 11px; font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: var(--r-pill); padding: 2px 8px; }
.emp-sg-sub { font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.emp-sg-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.emp-sg-fields { display: flex; gap: 6px; flex: 2 1 420px; min-width: 0; }
.emp-sg-fields input, .emp-sg-fields select { font: 12px/1.4 inherit; border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 5px 8px; background: var(--surface); color: var(--text-strong); min-width: 0; }
.emp-sg-fields input[data-sg-field="name"] { flex: 1 1 120px; }
.emp-sg-fields input[data-sg-field="senders"] { flex: 1.4 1 160px; font-family: Menlo, Monaco, monospace; font-size: 11.5px; }
.emp-sg-fields input[data-sg-field="category"] { flex: 0.8 1 90px; }
.emp-sg-meta { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.emp-sg-count { font-size: 11px; font-weight: 800; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 8px; flex: none; }
.emp-sg-evidence { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-sg-actions { display: flex; gap: 6px; flex: none; }
.emp-sg-actions .btn { font-size: 12px; padding: 5px 12px; }
.emp-filter-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.emp-search-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: var(--surface, #fff);
}
.emp-search-wrap svg { flex: none; width: 14px; height: 14px; color: var(--text-faint, #aaa); }
.emp-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12px;
  background: transparent;
  color: var(--text, #1b1f27);
}
.emp-sel {
  padding: 4px 6px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1b1f27);
  cursor: pointer;
}
.emp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
}
.emp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.emp-th {
  background: var(--surface-alt, #f3f4f6);
  border-bottom: 1px solid var(--border, #d1d5db);
  border-right: 1px solid var(--border-light, #e5e7eb);
  padding: 4px 8px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted, #555);
}
.emp-th:last-child { border-right: none; }
.emp-th--senders { min-width: 220px; }
.emp-th--note { min-width: 180px; }
.emp-th--actions { width: 68px; }
.emp-row { border-bottom: 1px solid var(--border-light, #e5e7eb); }
.emp-row:last-child { border-bottom: none; }
.emp-row:hover { background: var(--surface-hover, #f9fafb); }
.emp-row--edit, .emp-row--add { background: var(--primary-tint, #eff4ff) !important; }
.emp-td {
  padding: 3px 8px;
  border-right: 1px solid var(--border-light, #e5e7eb);
  vertical-align: middle;
}
.emp-td:last-child { border-right: none; }
.emp-td--name { white-space: normal; word-break: break-word; font-weight: 600; }
.emp-td--senders { white-space: normal; word-break: break-word; color: var(--text, #333); font-size: 11px; line-height: 1.9; }
.emp-td--category, .emp-td--owner { font-size: 11px; white-space: nowrap; }
.emp-td--note { white-space: normal; word-break: break-word; color: var(--text, #3a3f47); font-size: 11px; }
.emp-tok {
  display: inline-block;
  font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #1a45a8;
  background: #dfe9fc;
  border: 1px solid #b9cdf5;
  border-radius: 4px;
  padding: 1px 5px;
  margin: 1px 3px 1px 0;
  white-space: nowrap;
}
/* 그룹별 색 배지 — 안내 페이지·엑셀과 동일 색 체계 */
.emp-group-badge--sales    { background: #e3ecfb; color: #1d4ed8; border-color: #bfd3f6; }
.emp-group-badge--sales2   { background: #fcebdd; color: #b05314; border-color: #f3d0b3; }
.emp-group-badge--sales3   { background: #e4f5ea; color: #1f7a45; border-color: #bfe5cd; }
.emp-group-badge--export   { background: #f1e9fa; color: #6d3fa8; border-color: #ddc9f0; }
.emp-group-badge--purchase { background: #e2f4f7; color: #0e7490; border-color: #bde3ea; }
.emp-group-badge--qc       { background: #fdf6dc; color: #a16207; border-color: #f0e0a8; }
.emp-group-badge--account  { background: #eceff3; color: #475569; border-color: #d4dae2; }
.emp-group-badge--none     { background: var(--surface-alt, #f3f4f6); color: var(--text-faint, #aaa); }
.emp-cat-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.emp-cat-badge--bom { background: #e7f3ee; color: #16694a; border-color: #c4e2d5; }
.emp-cat-badge--sub { background: #eef0f4; color: #4b5563; border-color: #d7dce3; }
/* 엑셀식 헤더 필터 행 */
.emp-filter-row .emp-fth {
  background: var(--surface-alt, #f3f5f8);
  border-right: 1px solid var(--border-light, #e5e7eb);
  border-bottom: 1px solid var(--border, #d8dce2);
  padding: 3px 4px;
}
.emp-filter-row .emp-fth:last-child { border-right: none; text-align: right; }
.emp-flt {
  width: 100%;
  box-sizing: border-box;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 4px;
  background: #fff;
  color: var(--text, #333);
}
.emp-flt:focus { outline: none; border-color: var(--primary, #3556E8); }
.emp-flt--sel { padding: 0 2px; }
.emp-td--actions { white-space: nowrap; text-align: right; }
.emp-group-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  background: var(--primary-tint, #eff4ff);
  color: var(--primary, #3556E8);
}
.emp-group-badge--none { background: var(--surface-alt, #f3f4f6); color: var(--text-faint, #aaa); }
.emp-inp {
  width: 100%;
  min-width: 60px;
  box-sizing: border-box;
  padding: 2px 5px;
  border: 1px solid var(--primary, #3556E8);
  border-radius: 3px;
  font-size: 12px;
  font-family: inherit;
  background: var(--surface, #fff);
  color: var(--text, #1b1f27);
}
.emp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 2px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 3px;
  background: var(--surface, #fff);
  color: var(--text-muted, #555);
  cursor: pointer;
}
.emp-icon-btn svg { width: 13px; height: 13px; }
.emp-icon-btn:hover { background: var(--surface-hover, #f3f4f6); }
.emp-icon-btn--ok { background: var(--primary, #3556E8); color: #fff; border-color: var(--primary, #3556E8); }
.emp-icon-btn--ok:hover { opacity: .9; background: var(--primary, #3556E8); }
.emp-icon-btn--danger:hover { background: var(--danger-soft, #fee2e2); color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.emp-count { margin-top: 6px; font-size: 11px; color: var(--text-faint, #aaa); }

/* ── P1 모바일 재고조사 위자드 (.edw-fstk-*) ── */
/* edwards-replenish 현장 위자드 룩 재사용 */
.edw-fstk-root {
  padding: 12px 16px 80px;
  max-width: 540px;
  margin: 0 auto;
}
.edw-fstk-steps {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 0;
}
.edw-fstk-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.edw-fstk-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-alt, #e5e7eb);
  color: var(--text-muted, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.edw-fstk-step.active .edw-fstk-step-num {
  background: var(--primary, #3556E8);
  color: #fff;
}
.edw-fstk-step.done .edw-fstk-step-num {
  background: var(--success, #22c55e);
  color: #fff;
}
.edw-fstk-step-label { font-size: 11px; color: var(--text-muted, #888); }
.edw-fstk-step.active .edw-fstk-step-label { color: var(--primary, #3556E8); font-weight: 600; }
.edw-fstk-step.done .edw-fstk-step-label { color: var(--success, #22c55e); }
.edw-fstk-step-line {
  flex: 2;
  height: 2px;
  background: var(--border-light, #e5e7eb);
  align-self: flex-start;
  margin-top: 12px;
}
.edw-fstk-hint {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin: 0 0 10px;
}
.edw-fstk-hint--sm { font-size: 11px; margin-top: 8px; }
.edw-fstk-loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.edw-fstk-loc-chip {
  padding: 12px 10px;
  border: 1.5px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: var(--text-strong, #111);
  transition: border-color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
}
.edw-fstk-loc-chip:active { background: var(--primary-tint, #eff4ff); border-color: var(--primary, #3556E8); }
.edw-fstk-loc-chip.on { background: var(--primary-tint, #eff4ff); border-color: var(--primary, #3556E8); color: var(--primary, #3556E8); font-weight: 700; }   /* 입고 — 고른 자리 */
/* 고른 자리 — 눌린 순간(:active)만이 아니라 고른 상태가 계속 보여야 한다(자리 이동 스텝3) */
.edw-fstk-loc-chip.active { background: var(--primary-tint, #eff4ff); border-color: var(--primary, #3556E8); color: var(--primary, #3556E8); }
.edw-fstk-skip-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--primary, #3556E8);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.edw-fstk-search-wrap { margin-bottom: 10px; }
.edw-fstk-search {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #d1d5db);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--text, #1b1f27);
  box-sizing: border-box;
}
.edw-fstk-search:focus { border-color: var(--primary, #3556E8); outline: none; }
/* 검색·스캔 우선 — 품목 목록을 미리 펼치지 않는다(부장님 2026-09-14 "검색 및 스캔으로만 선택하게"). 검색칸·안내·버튼을 큼직하게. */
.edw-fstk-search--big { min-height: 64px; padding: 14px 20px; font-size: 22px; font-weight: 700; border-width: 2px; border-radius: 14px; }
.edw-fstk-save-btn--big { padding: 20px; font-size: 20px; border-radius: 14px; }
.edw-fstk-find-hint { grid-column: 1 / -1; text-align: center; color: var(--text-muted, #888); font-size: 17px; line-height: 1.5; padding: 32px 12px; }   /* 넓은 화면 격자에서도 가운데 */
.edw-fstk-item-list { display: flex; flex-direction: column; gap: 6px; }
.edw-fstk-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 12px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: border-color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.edw-fstk-item-row:active { background: var(--surface-hover, #f3f4f6); border-color: var(--primary, #3556E8); }
.edw-fstk-item-code { font-size: 11px; color: var(--text-muted, #888); }
.edw-fstk-item-name { font-weight: 600; color: var(--text-strong, #111); }
.edw-fstk-item-spec { font-size: 11px; color: var(--text-faint, #aaa); }
.edw-fstk-item-stock {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #777);
  font-variant-numeric: tabular-nums;
}
/* 전수 재고조사 — 오늘 센 품목 표시·진행 요약 */
.edw-fstk-progress { margin: 0 0 10px; }
.edw-fstk-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.edw-fstk-progress-txt { font-size: 13px; color: var(--text-muted, #555); font-variant-numeric: tabular-nums; }
.edw-fstk-progress-txt b { color: var(--text-strong, #111); }
.edw-fstk-progress-bar { height: 4px; border-radius: 2px; background: var(--surface-alt, #eef0f4); overflow: hidden; }
.edw-fstk-progress-bar span { display: block; height: 100%; background: var(--primary, #3556E8); transition: width .2s; }
.edw-fstk-toggle {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--border, #d1d5db); border-radius: 16px;
  background: var(--surface, #fff); color: var(--text-muted, #555);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.edw-fstk-toggle.active { background: var(--primary, #3556E8); border-color: var(--primary, #3556E8); color: #fff; }
/* 자리 정리 — 같은 새 자리로 보낼 품목을 여럿 고른다. 색 띠가 아니라 테두리+체크로 말한다(굵은 컬러 테두리 금지 규칙). */
.edw-fstk-item-row.sel { border-color: var(--primary, #3556E8); background: var(--primary-tint, #eff4ff); }
.edw-fstk-sel-mark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--border, #d1d5db); background: var(--surface, #fff);
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1; color: transparent;
  align-self: center;
}
.edw-fstk-item-row.sel .edw-fstk-sel-mark { border-color: var(--primary, #3556E8); background: var(--primary, #3556E8); color: #fff; }
/* 자리 정리 — 한 자리에 품목이 66종까지 있다. 다음 버튼이 끝까지 스크롤해야 보이면 아무도 안 누른다. */
.edw-fstk-sticky {
  position: sticky; bottom: 0; z-index: 3;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #fff);
  box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .18);
}
.edw-fstk-item-row.done { background: var(--surface-alt, #f6f7f9); }
.edw-fstk-item-row.done .edw-fstk-item-name { color: var(--text-muted, #666); font-weight: 500; }
.edw-fstk-done-badge {
  flex-basis: 100%; font-size: 12px; font-weight: 600;
  color: var(--success, #16a34a); font-variant-numeric: tabular-nums;
}
.edw-fstk-done-badge em { font-style: normal; color: var(--warning, #D9820B); margin-left: 2px; }
.edw-fstk-preset-btn--same { flex-basis: 100%; }
.edw-fstk-gallery { margin: 0 0 14px; }
.edw-fstk-pack { margin: 14px 0 16px; }
.edw-fstk-pack-row { display: flex; gap: 10px; }
.edw-fstk-pack-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.edw-fstk-pack-field span { font-size: 12px; color: var(--text-muted, #6B7280); font-weight: 600; }
.edw-fstk-pack-field input {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 18px; font-weight: 700; text-align: center;
  min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-strong, #111);
  font-variant-numeric: tabular-nums;
}
.edw-fstk-pack-field input:focus { outline: none; border-color: var(--primary, #3556E8); }
.edw-fstk-calc-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.edw-fstk-calc-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.edw-fstk-calc-field span { font-size: 12px; color: var(--text-muted, #6B7280); font-weight: 600; white-space: nowrap; }
.edw-fstk-calc-field small { font-size: 11px; font-weight: 500; color: var(--text-faint, #9AA1AC); }
.edw-fstk-calc-field input {
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 17px; font-weight: 700; text-align: center;
  min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--border, #d1d5db); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-strong, #111);
  font-variant-numeric: tabular-nums;
}
.edw-fstk-calc-field input:focus { outline: none; border-color: var(--primary, #3556E8); }
.edw-fstk-calc-eq { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--text-muted, #6B7280); font-variant-numeric: tabular-nums; }
.edw-fstk-calc-eq b { color: var(--text-strong, #111); margin-left: 4px; }
.edw-fstk-item-head { margin-bottom: 14px; }
.edw-fstk-head-code { font-size: 12px; color: var(--text-muted, #888); display: block; margin-bottom: 2px; }
.edw-fstk-head-name { font-size: 17px; font-weight: 700; color: var(--text-strong, #111); margin: 0 0 3px; }
.edw-fstk-head-spec { font-size: 12px; color: var(--text-muted, #888); }
.edw-fstk-prev-qty {
  padding: 10px 12px;
  background: var(--surface-alt, #f3f4f6);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted, #555);
  margin-bottom: 8px;
}
.edw-fstk-loc-label {
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-bottom: 14px;
}
.edw-fstk-qty-block { margin-bottom: 20px; }
.edw-fstk-qty-label { font-size: 13px; font-weight: 600; color: var(--text, #1b1f27); margin-bottom: 10px; }
.edw-fstk-unit { font-size: 12px; color: var(--text-muted, #888); font-weight: 400; }
.edw-fstk-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.edw-fstk-stepper-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border, #d1d5db);
  background: var(--surface, #fff);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #3556E8);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.edw-fstk-stepper-btn:active { background: var(--primary-tint, #eff4ff); }
.edw-fstk-qty-input {
  flex: 1;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  border: 2px solid var(--border, #d1d5db);
  border-radius: 8px;
  padding: 8px;
  color: var(--text-strong, #111);
  background: var(--surface, #fff);
  font-variant-numeric: tabular-nums;
}
.edw-fstk-qty-input:focus { border-color: var(--primary, #3556E8); outline: none; }
.edw-fstk-qty-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.edw-fstk-preset-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--border, #d1d5db);
  border-radius: 20px;
  background: var(--surface, #fff);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted, #555);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, background .12s, color .12s;
}
.edw-fstk-preset-btn.active {
  border-color: var(--primary, #3556E8);
  background: var(--primary-tint, #eff4ff);
  color: var(--primary, #3556E8);
  font-weight: 600;
}
.edw-fstk-save-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--primary, #3556E8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s;
}
.edw-fstk-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.edw-fstk-save-btn.loading { opacity: .7; }
/* 보조 큰 버튼 — 주 동작만 파랗게 둔다. 파란 큰 버튼이 둘 이상이면 뭘 눌러야 할지 모른다.
   🔴 화면 코드는 이 클래스를 오래 붙여 왔는데 CSS 가 없어 16곳이 전부 똑같은 파란 슬래브로 떨어졌고,
   버튼 사이 간격도 없어 한 덩어리로 붙어 보였다(부장님 2026-09-18 현장 사진 — 이동 3단계).
   굵은 컬러 테두리는 쓰지 않는다 — 1px 계열 중립 테두리 + 흰 배경으로만 가른다. */
.edw-fstk-save-btn--sec {
  background: var(--surface, #fff);
  color: var(--primary, #3556E8);
  border: 1.5px solid var(--border, #d1d5db);
}
.edw-fstk-save-btn + .edw-fstk-save-btn { margin-top: 8px; }
/* 구역 큰 버튼 줄(228) — 자리마다 하나라 여럿이 온다. 간격은 줄이 쥔다. */
.edw-fstk-zone-row { display: grid; gap: 8px; margin-top: 8px; }
.edw-fstk-zone-row .edw-fstk-save-btn + .edw-fstk-save-btn { margin-top: 0; }
/* 한 번 더 눌러야 저장하는 상태 — 문구가 이미 "한 번 더 눌러 저장"으로 바뀌고 테두리가 거든다(색만으로 말하지 않는다) */
.edw-fstk-zone-btn.is-armed { border-color: var(--warning, #D9820B); color: var(--warning, #D9820B); font-weight: 800; }
.edw-fstk-back-bar { margin-top: 12px; }
.edw-fstk-back-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted, #555);
  -webkit-tap-highlight-color: transparent;
}
.edw-fstk-empty {
  text-align: center;
  color: var(--text-faint, #aaa);
  font-size: 13px;
  padding: 16px 0;
}

/* ── 담는 목록 — 한 자리(·한 용기)에 여러 품목을 쌓아 한 번에 입고(2026-09-18) ──
   새 시각 언어를 만들지 않는다. 위 .edw-fstk-* 어휘 안의 배치 규칙일 뿐이고 색은 전부 토큰이다. */
.edw-fstk-order { margin-bottom: 12px; }
/* 담는 곳 — 12줄을 담고 스크롤이 내려가도 "어디에 담는 중인지"가 항상 보여야 한다 */
.edw-fstk-where {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  background: var(--surface, #fff);
}
.edw-fstk-where-tx { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-muted, #6B7280); overflow-wrap: anywhere; }
.edw-fstk-where-tx b { display: block; color: var(--text-strong, #111); font-size: 15px; font-weight: 800; }
.edw-fstk-where-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-strong, #111);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
/* 담은 줄은 **언제나 한 열**이다 — 고르는 격자(.edw-fstk-item-list)를 쓰면 넓은 화면에서
   2열 격자에 얹혀 입력칸이 줄 안에서 또 접힌다(2026-09-18 태블릿 렌더 실측). */
.edw-fstk-cart-list { display: flex; flex-direction: column; gap: 6px; }
/* 좁은 화면(폰)에서는 품번이 한 줄을 통째로 쓰고 입력칸이 그 아래로 내려간다.
   한 줄에 다 넣으면 412px 에서 `400220T9D070600` 이 네 조각으로 쪼개진다(2026-09-18 렌더 실측). */
.edw-fstk-cart-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: var(--surface, #fff);
}
/* 수량을 안 적은 줄 — 테두리만으로 말하지 않는다. 칸의 자리표시자('수량')와 아래 안내문이 글자로 같이 말한다 */
.edw-fstk-cart-row.is-empty { border-color: var(--warning, #D9820B); }
.edw-fstk-cart-tx { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.edw-fstk-cart-tx b { font-size: 15px; font-weight: 800; color: var(--text-strong, #111); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.edw-fstk-cart-tx small { font-size: 11.5px; color: var(--text-muted, #888); overflow-wrap: anywhere; }
.edw-fstk-cart-row .edw-fstk-qty-input { min-height: 44px; font-size: 17px; width: auto; }
/* 숫자 칸이 둘이면 어느 쪽이 봉지고 어느 쪽이 수량인지 글자로 말해야 한다 — 자리표시자는 채우면 사라진다 */
.edw-fstk-cart-bags, .edw-fstk-cart-qty { flex: 1 1 0; min-width: 0; }
.edw-fstk-cart-row .edw-fstk-calc-field span { font-size: 11.5px; }
.edw-fstk-cart-row .edw-fstk-calc-field span small { font-weight: 500; color: var(--text-faint, #9AA1AC); }
.edw-fstk-cart-del { align-self: flex-end; margin-left: auto; }   /* 용기째 줄은 입력칸이 없어 그냥 두면 왼쪽에 붙는다 */
/* 출고·이동 줄의 '어느 자리에서' — 자리가 여럿일 때만 셀렉트가 뜬다.
   네이티브 select 를 쓴다: 폰에서 휠 피커가 뜨고, 새 드롭다운 컴포넌트를 만들 이유가 없다. */
.edw-fstk-cart-loc { flex: 1.4 1 0; min-width: 0; }
.edw-fstk-cart-sel {
  width: 100%; min-height: 44px; padding: 0 6px;
  font: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-strong, #111);
}
.edw-fstk-cart-sel:focus { outline: none; border-color: var(--primary, #3556E8); }
.edw-fstk-cart-one {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 800; color: var(--text-strong, #111); overflow-wrap: anywhere;
}
.edw-fstk-cart-del {
  flex: 0 0 auto; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 10px;
  background: var(--surface, #fff); color: var(--text-muted, #6B7280);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ── WMS 2.5D 재고 평면 보드 (.wms-*) ── */
.wms-wrap { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 64px; }
.wms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.wms-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); margin: 0 0 4px; }
.wms-desc { margin: 0; color: var(--text-muted); font-size: 13px; }
.wms-head-actions { display: flex; gap: 8px; align-items: center; }

.wms-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.wms-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.wms-seg button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

.wms-body { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .wms-body { grid-template-columns: 1fr; } }

.wms-board-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.wms-board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wms-board-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-strong); letter-spacing: -.01em; }
.wms-channel-key { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-muted); }
.wms-ck { display: inline-flex; align-items: center; gap: 5px; }
.wms-ck i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }

.wms-stage {
  perspective: 1600px;
  padding: 18px 8px 8px;
  background:
    linear-gradient(var(--surface-2) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
}
.wms-floor { transform: rotateX(16deg) rotateZ(0deg); transform-style: preserve-3d; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.wms-floor.flat { transform: none; }
.wms-aisle { grid-column: 1 / -1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; padding: 2px 0 6px; }

.wms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 680px) { .wms-grid { grid-template-columns: repeat(2, 1fr); } }

.wms-tile {
  position: relative; text-align: left; cursor: pointer; font: inherit;
  border-radius: var(--r-md); padding: 13px 13px 12px; min-height: 108px;
  border: 1px solid var(--heat-bd, var(--border-2));
  background: var(--heat-bg, var(--surface));
  box-shadow: 0 2px 0 var(--heat-bd, var(--border-2)), var(--shadow-xs);
  transition: transform .14s ease, box-shadow .14s ease;
  display: flex; flex-direction: column; gap: 7px;
}
.wms-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--heat-bd, var(--border-2)), var(--shadow-md); }
.wms-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft), 0 2px 0 var(--heat-bd); }
.wms-tile.active { outline: 2px solid var(--primary); outline-offset: 1px; }

.wms-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wms-tile-name { font-size: 15px; font-weight: 800; color: var(--text-strong); letter-spacing: -.01em; line-height: 1.25; }
.wms-tile-name small { display: block; font-size: 11px; font-weight: 600; color: var(--heat-fg, var(--text-muted)); margin-top: 1px; }

.wms-chan { font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 3px 7px; border-radius: var(--r-pill); border: 1px solid; white-space: nowrap; }
.wms-chan--sap { background: var(--ch-sap-bg); color: var(--ch-sap-fg); border-color: var(--ch-sap-bd); }
.wms-chan--ereq { background: var(--ch-ereq-bg); color: var(--ch-ereq-fg); border-color: var(--ch-ereq-bd); }

.wms-tile-stats { display: flex; gap: 14px; margin-top: auto; }
.wms-stat { display: flex; flex-direction: column; }
.wms-stat b { font-size: 18px; font-weight: 800; color: var(--text-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.wms-stat span { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }
.wms-stat--zero b { color: var(--heat-0-fg); }

.wms-zero-flag { position: absolute; top: 11px; right: 11px; font-size: 10px; font-weight: 800; color: var(--heat-0-fg); background: var(--surface); border: 1px solid var(--heat-0-bd); padding: 2px 7px; border-radius: var(--r-pill); }

.wms-legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }
.wms-legend-cap { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wms-scale { display: flex; align-items: center; gap: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.wms-scale .seg { display: flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 11px; font-weight: 700; }
.wms-legend-note { font-size: 11px; color: var(--text-faint); margin-left: auto; }

.wms-drawer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 20px; position: sticky; top: 20px; min-height: 340px; }
.wms-drawer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--text-faint); height: 300px; gap: 8px; }
.wms-drawer-empty svg { width: 38px; height: 38px; stroke: var(--text-faint); }
.wms-drawer-empty b { color: var(--text-muted); font-size: 14px; }

.wms-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.wms-d-name { font-size: 18px; font-weight: 800; color: var(--text-strong); letter-spacing: -.01em; }
.wms-d-close { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.wms-d-close:hover { background: var(--surface-2); }
.wms-d-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.wms-d-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.wms-d-pill b { color: var(--text-strong); }

.wms-d-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.wms-d-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: var(--surface); padding: 9px 12px; }
.wms-d-row:hover { background: var(--surface-2); }
.wms-d-iname { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.wms-d-code { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wms-d-qty { font-size: 14px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.wms-d-qty.zero { color: var(--heat-0-fg); }
.wms-d-qty small { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.wms-d-loading { padding: 16px; text-align: center; color: var(--text-faint); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .wms-floor, .wms-tile { transition: none; }
  .wms-tile:hover { transform: none; }
}

/* ══ CRM 영업분석 (sales-analysis) — PC 이카운트식 촘촘 그리드 ══ */
.sa-root { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 24px; }
.sa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sa-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #667); }
.sa-src .ic { width: 14px; height: 14px; }
.sa-inp { height: 30px; padding: 0 10px; font-size: 12.5px; border: 1px solid var(--border, #d7dbe2); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #222); min-width: 180px; }
.sa-inp:focus { outline: none; border-color: var(--primary, #2563eb); }
.sa-ginp { min-width: 280px; }
.sa-sel { height: 30px; padding: 0 6px; font-size: 12px; border: 1px solid var(--border, #d7dbe2); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #222); }

/* KPI 스트립 */
.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.sa-kpi { border: 1px solid var(--border, #d7dbe2); border-radius: 8px; padding: 10px 12px; background: var(--surface, #fff); }
.sa-kpi-l { font-size: 11px; color: var(--text-muted, #667); }
.sa-kpi-v { font-size: 18px; font-weight: 800; margin-top: 2px; letter-spacing: -0.02em; color: var(--text-strong, #111); }
.sa-kpi-s { font-size: 11px; color: var(--text-faint, #99a); margin-top: 2px; }

/* 카테고리 탭 */
.sa-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 12.5px; border: 1px solid var(--border, #d7dbe2); border-radius: 16px; background: var(--surface, #fff); color: var(--text, #333); cursor: pointer; }
.sa-tab b { font-weight: 800; }
.sa-tab.on { background: var(--text-strong, #16181d); color: var(--surface, #fff); border-color: var(--text-strong, #16181d); }
.sa-tab.on .sa-tab-addr, .sa-tab.on .sa-tab-amt { color: inherit; opacity: 0.75; }
.sa-tab-addr { font-size: 11px; color: var(--primary, #2563eb); font-weight: 600; }
.sa-tab-amt { font-size: 11px; color: var(--text-muted, #667); }

/* 분할 레이아웃 */
.sa-split { display: grid; grid-template-columns: minmax(380px, 33%) 1fr; gap: 12px; align-items: start; }
.sa-split > * { min-width: 0; }
@media (max-width: 1100px) { .sa-split { grid-template-columns: 1fr; } }
.sa-list-scroll, .sa-items-scroll { overflow-x: auto; }

/* 공용 테이블 */
.sa-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sa-tbl th { position: sticky; top: 0; background: var(--surface-alt, #f3f4f6); z-index: 1; text-align: left; font-size: 11px; color: var(--text-muted, #555); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border, #d7dbe2); white-space: nowrap; }
.sa-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border-light, #e5e7eb); vertical-align: middle; }
.sa-tbl .num, .sa-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-empty-cell { text-align: center; color: var(--text-muted, #667); padding: 28px 8px !important; font-size: 12.5px; }

/* 거래처 목록 */
.sa-list-wrap { border: 1px solid var(--border, #d7dbe2); border-radius: 10px; background: var(--surface, #fff); overflow: hidden; }
.sa-list-head { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border, #d7dbe2); }
.sa-list-head .sa-inp { flex: 1; min-width: 0; }
.sa-list-cnt { font-size: 11px; color: var(--text-muted, #667); white-space: nowrap; }
.sa-list-scroll { max-height: calc(100vh - 320px); min-height: 300px; overflow: auto; }
.sa-crow { cursor: pointer; }
.sa-crow:hover td { background: var(--surface-hover, #f9fafb); }
.sa-crow.on td { background: var(--primary-tint, #eff4ff); }
.sa-cname { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cat-chip { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; border: 1px solid transparent; }
/* 그룹 색 — 이메일 마스터(emp-group-badge)와 동일 체계: sales=파랑 / sales2=주황 / sales3=초록 / export=보라 */
.sa-cat-chip.d1 { background: #e3ecfb; color: #1d4ed8; border-color: #bfd3f6; }
.sa-cat-chip.d2 { background: #fcebdd; color: #b05314; border-color: #f3d0b3; }
.sa-cat-chip.d3 { background: #e4f5ea; color: #1f7a45; border-color: #bfe5cd; }
.sa-cat-chip.ex { background: #f1e9fa; color: #6d3fa8; border-color: #ddc9f0; }
[data-theme="dark"] .sa-cat-chip.d1 { background: #1b2c50; color: #93b6f2; border-color: #2c437a; }
[data-theme="dark"] .sa-cat-chip.d2 { background: #46280f; color: #eba76b; border-color: #6b3d17; }
[data-theme="dark"] .sa-cat-chip.d3 { background: #14331e; color: #74d194; border-color: #275c38; }
[data-theme="dark"] .sa-cat-chip.ex { background: #2a1d47; color: #b899ec; border-color: #443066; }
.sa-cat-chip.lg { font-size: 11.5px; padding: 3px 9px; }
.sa-abar { display: block; height: 3px; border-radius: 2px; background: var(--primary, #2563eb); opacity: 0.5; width: var(--w); margin-bottom: 2px; margin-left: auto; }
.sa-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; }
.sa-dot.warn { background: var(--danger, #e0483e); }
.sa-dot.grow { background: var(--success, #1c9e4f); }
.sa-ld { color: var(--text-muted, #667); }

/* 상세 */
.sa-detail { border: 1px solid var(--border, #d7dbe2); border-radius: 10px; background: var(--surface, #fff); padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 400px; }
.sa-detail-empty { justify-content: center; }
.sa-d-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sa-d-title h2 { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--text-strong, #111); }
.sa-d-kvs { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.sa-dkv { display: flex; flex-direction: column; gap: 1px; }
.sa-dkv span { font-size: 10.5px; color: var(--text-muted, #667); }
.sa-dkv b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-strong, #111); }
.sa-sec-h { font-size: 12.5px; font-weight: 800; color: var(--text-strong, #111); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.sa-sec-n { font-size: 11px; color: var(--text-muted, #667); font-weight: 600; }
.sa-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-flag { font-size: 11px; padding: 3px 8px; border-radius: 12px; background: var(--surface-alt, #f3f4f6); color: var(--text, #333); border: 1px solid var(--border, #d7dbe2); }
.sa-flag.warn { background: var(--danger-bg, #fdecea); color: var(--danger, #b3261e); border-color: transparent; }
.sa-flag.grow { background: var(--success-bg, #e9f7ee); color: var(--success, #1c7d3f); border-color: transparent; }

/* 담당자 칩 */
.sa-cts { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-ct { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--border, #d7dbe2); border-radius: 16px; padding: 4px 10px; background: var(--surface-alt, #f7f8fa); cursor: pointer; }
.sa-ct b { font-weight: 700; }
.sa-ct-r { font-size: 10.5px; color: var(--text-muted, #667); }
.sa-ct-mail { font-size: 11.5px; color: var(--primary, #2563eb); text-decoration: none; }
.sa-ct-mail:hover { text-decoration: underline; }
.sa-ct-mail.muted { color: var(--text-faint, #99a); }
.sa-noct { font-size: 12px; color: var(--text-muted, #667); background: var(--surface-alt, #f7f8fa); border: 1px dashed var(--border, #d7dbe2); border-radius: 8px; padding: 10px 12px; }
.sa-note { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--text, #333); background: var(--surface-alt, #f7f8fa); border-radius: 8px; padding: 10px 12px; }
.sa-note-i .ic { width: 15px; height: 15px; color: var(--primary, #2563eb); }

/* 월별 차트 */
.sa-mchart { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; align-items: end; height: 150px; padding: 4px 2px 0; }
@media (max-width: 700px) { .sa-mc-v { display: none; } .sa-mchart { gap: 2px; } .sa-mc-m { font-size: 8.5px; } }
.sa-mc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; cursor: default; }
.sa-mc-bar { width: 70%; max-width: 34px; background: var(--primary, #2563eb); border-radius: 3px 3px 0 0; opacity: 0.85; min-height: 0; }
.sa-mc-bar.neg { background: var(--danger, #e0483e); }
.sa-mc-col:hover .sa-mc-bar { opacity: 1; }
.sa-mc-v { font-size: 9.5px; color: var(--text-muted, #667); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-mc-m { font-size: 10px; color: var(--text-faint, #99a); }

/* 선등록·미니 테이블 */
.sa-mini-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sa-mini-tbl th { text-align: left; font-size: 10.5px; color: var(--text-muted, #667); padding: 4px 6px; border-bottom: 1px solid var(--border, #d7dbe2); }
.sa-mini-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--border-light, #e5e7eb); }
.sa-mini-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.sa-mini-note { font-size: 11.5px; color: var(--text, #333); line-height: 1.5; background: var(--surface-alt, #f7f8fa); border-radius: 6px; padding: 8px 10px; }

/* 품목 테이블 */
.sa-items-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sa-items-head .sa-sec-h { margin: 0 auto 0 0; }
.sa-items-scroll { overflow: auto; max-height: 640px; border: 1px solid var(--border, #d7dbe2); border-radius: 8px; }
.sa-itbl { min-width: 900px; }
.sa-irow { cursor: pointer; }
.sa-irow:hover td { background: var(--surface-hover, #f9fafb); }
.sa-irow.open td { background: var(--primary-tint, #eff4ff); }
.sa-iname { max-width: 260px; }
.sa-iname-1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-iname-2 { font-size: 10.5px; color: var(--text-muted, #667); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-code { font-family: ui-monospace, Consolas, monospace; font-size: 10px; background: var(--surface-alt, #f3f4f6); border-radius: 3px; padding: 0 3px; }
.sa-ss b { color: var(--primary, #2563eb); }
.sa-rop { color: var(--text-muted, #667); font-size: 10.5px; }
.sa-prange i { font-style: normal; color: var(--text-muted, #667); }
.sa-up { color: var(--danger, #e0483e); font-size: 10px; }
.sa-dn { color: var(--success, #1c7d3f); font-size: 10px; }
.sa-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 16px; width: 46px; margin-left: 8px; vertical-align: -3px; }
.sa-sp-b { flex: 1; background: var(--primary, #2563eb); opacity: 0.55; border-radius: 1px; min-height: 1px; }
.sa-sp-b.neg { background: var(--danger, #e0483e); }
.sa-irow-x td { background: var(--surface-alt, #f7f8fa); }
.sa-x-grid { display: grid; grid-template-columns: 180px 220px 1fr; gap: 16px; padding: 8px 4px; align-items: start; }
@media (max-width: 900px) { .sa-x-grid { grid-template-columns: 1fr; } }
.sa-x-h { font-size: 11px; font-weight: 700; color: var(--text, #333); margin-bottom: 4px; }
.sa-x-meta { font-size: 11px; color: var(--text-muted, #667); margin-top: 8px; line-height: 1.5; }

/* 통합검색 */
.sa-global { border: 1px solid var(--primary, #2563eb); border-radius: 10px; padding: 10px 12px; background: var(--surface, #fff); }
.sa-global .sa-sec-h { margin-bottom: 6px; }
.sa-gclose { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--text-muted, #667); display: inline-flex; }
.sa-gclose .ic { width: 14px; height: 14px; }
.sa-grow-r { cursor: pointer; }
.sa-grow-r:hover td { background: var(--surface-hover, #f9fafb); }

/* ── 영업분석 대시보드(2026-07-15 2차) ── */
.sa-back { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 10px 0 6px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border, #d7dbe2); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #333); cursor: pointer; }
.sa-back:hover { background: var(--surface-hover, #f9fafb); }
.sa-back .ic { width: 14px; height: 14px; }
.sa-title-wrap { display: flex; align-items: center; gap: 12px; }
.sa-panel { border: 1px solid var(--border, #d7dbe2); border-radius: 10px; background: var(--surface, #fff); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sa-cat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sa-cat-card { border: 1px solid var(--border, #d7dbe2); border-radius: 10px; background: var(--surface, #fff); padding: 12px 14px; cursor: pointer; }
.sa-cat-card:hover { background: var(--surface-hover, #f9fafb); }
.sa-cc-head { display: flex; align-items: center; gap: 6px; }
.sa-cc-addr { font-size: 11px; color: var(--primary, #2563eb); font-weight: 600; }
.sa-cc-amt { font-size: 20px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; color: var(--text-strong, #111); }
.sa-cc-sub { font-size: 11px; color: var(--text-muted, #667); margin-top: 1px; }
.sa-cc-bar { height: 4px; border-radius: 2px; background: var(--surface-alt, #f0f1f4); margin-top: 8px; overflow: hidden; }
.sa-cc-bar i { display: block; height: 100%; border-radius: 2px; }
.sa-cc-tops { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; font-size: 11px; color: var(--text-muted, #667); }
.sa-cc-tops span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-legend { display: inline-flex; gap: 10px; margin-left: auto; font-weight: 500; font-size: 11px; color: var(--text-muted, #667); }
.sa-lg-i { display: inline-flex; align-items: center; gap: 4px; }
.sa-lg-i i { width: 8px; height: 8px; border-radius: 2px; }
.sa-stack { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; align-items: end; height: 170px; padding-top: 4px; }
.sa-st-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.sa-st-bar { display: flex; flex-direction: column-reverse; width: 70%; max-width: 38px; height: calc(100% - 30px); justify-content: flex-start; }
.sa-st-bar i { display: block; width: 100%; }
.sa-st-bar i:last-child { border-radius: 3px 3px 0 0; }
.sa-sig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sa-sig-grid > * { min-width: 0; }
@media (max-width: 900px) { .sa-sig-grid { grid-template-columns: 1fr; } }
.sa-sig-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border-light, #e5e7eb); font-size: 12px; cursor: pointer; }
.sa-sig-row:last-child { border-bottom: none; }
.sa-sig-row:hover { background: var(--surface-hover, #f9fafb); }
.sa-sig-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.sa-sig-f { font-size: 11px; color: var(--text-muted, #667); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-sig-a { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sa-rank { color: var(--text-faint, #99a); font-size: 11px; }
.sa-rank-scroll { max-height: 560px; }
.sa-more { align-self: center; border: 1px solid var(--border, #d7dbe2); background: var(--surface, #fff); color: var(--text, #333); font-size: 12px; border-radius: 6px; padding: 6px 14px; cursor: pointer; }
.sa-more:hover { background: var(--surface-hover, #f9fafb); }

/* 사이드바 업체 트리 거래처 검색 */
.snav-search--sub { margin: 2px 10px 6px; }
.snav-search--sub input { font-size: 12px; }
.sa-tscroll { overflow-x: auto; }
/* flex 자식 min-width:auto가 표 내용 폭까지 커지는 것 차단 — 내부 overflow-x 컨테이너가 스크롤을 받게 */
.sa-root > *, .sa-panel > *, .sa-detail > * { min-width: 0; max-width: 100%; }

/* 품목리스트 코드 우선 표기 — 품목코드·거래처품번 강조, 품목명은 보조(2026-07-15) */
.sa-icodes { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.sa-code-main, .sa-code-pn {
  display: inline-block; font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
  border: 1px solid transparent;
}
.sa-code-main { color: #1a45a8; background: #dfe9fc; border-color: #b9cdf5; }
.sa-code-pn { color: #8a4b0f; background: #fdeeda; border-color: #f0d3ab; }
.sa-code-pn::before { content: '거래처 '; font-size: 9.5px; font-weight: 600; opacity: 0.75; }
[data-theme="dark"] .sa-code-main { color: #93b6f2; background: #1b2c50; border-color: #2c437a; }
[data-theme="dark"] .sa-code-pn { color: #eba76b; background: #46280f; border-color: #6b3d17; }

/* 코그 담당 배정 패널(sa-staff) — 거래처 상세 상단 강조 카드 */
.sa-staff { border: 1.5px solid var(--primary, #2563eb); border-radius: 10px; background: var(--primary-tint, #eff4ff); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sa-staff .sa-sec-h { margin: 0; }
.sa-staff .sa-sec-h .ic { width: 15px; height: 15px; color: var(--primary, #2563eb); }
.sa-stf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sa-stf-cell { display: flex; flex-direction: column; gap: 3px; background: var(--surface, #fff); border: 1px solid var(--border, #d7dbe2); border-radius: 8px; padding: 7px 9px; }
.sa-stf-cell.on { border-color: var(--primary, #2563eb); }
.sa-stf-role { font-size: 10.5px; font-weight: 700; color: var(--text-muted, #667); }
.sa-stf-cell.on .sa-stf-role { color: var(--primary, #2563eb); }
.sa-stf-sel { height: 28px; font-size: 12.5px; border: 1px solid var(--border-light, #e5e7eb); border-radius: 6px; background: var(--surface, #fff); color: var(--text-faint, #99a); padding: 0 4px; }
.sa-stf-cell.on .sa-stf-sel { font-weight: 700; color: var(--text-strong, #111); }
.sa-stf-note { font-size: 11.5px; color: var(--text-muted, #667); }
.sa-stf-note.warn { color: var(--danger, #b3261e); }
.sa-kog-owner { font-weight: 700; color: var(--primary, #2563eb); }
[data-theme="dark"] .sa-staff { background: #17233f; }

/* 내 담당 토글·홈 위젯 역할 칩 */
.sa-tab-mine.on { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.home-mp-role { font-size: 10px; font-weight: 700; color: var(--primary, #2563eb); background: var(--primary-tint, #eff4ff); border-radius: 8px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.sa-cat-card.on { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 1px var(--primary, #2563eb) inset; }
.sa-cathead-desc { font-size: 12px; color: var(--text-muted, #667); margin-right: auto; }
.sa-stf-ro { display: flex; flex-direction: column; gap: 6px; }
.home-mp-n { font-size: 10.5px; color: var(--text-muted, #667); font-weight: 500; margin-left: 4px; }

/* 영업분석 엑셀 버튼·연락처 편집 폼 */
.sa-xbtn { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border, #d7dbe2); border-radius: 6px; background: var(--surface, #fff); color: var(--text, #333); cursor: pointer; }
.sa-xbtn:hover { background: var(--surface-hover, #f9fafb); }
.sa-xbtn .ic { width: 13px; height: 13px; }
.sa-warn-txt { color: var(--danger, #b3261e) !important; }
.sa-me-form { display: flex; flex-direction: column; gap: 6px; background: var(--surface-alt, #f7f8fa); border: 1px solid var(--border, #d7dbe2); border-radius: 8px; padding: 10px 12px; }
.sa-me-row { display: flex; gap: 6px; align-items: center; }
.sa-me-inp { flex: 1; min-width: 0; }
.sa-me-mail { flex: 1.6; }
.sa-me-del { border: 0; background: none; cursor: pointer; color: var(--text-muted, #667); display: inline-flex; padding: 4px; }
.sa-me-del:hover { color: var(--danger, #e0483e); }
.sa-me-del .ic { width: 14px; height: 14px; }
.sa-me-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.sa-me-add .ic { width: 13px; height: 13px; }
.sa-me-note { border: 1px solid var(--border, #d7dbe2); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; background: var(--surface, #fff); color: var(--text, #222); resize: vertical; }
.sa-me-actions { display: flex; gap: 6px; }
.sa-me-save { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
.sa-me-save:hover { background: var(--primary-strong, #1d4ed8); }

/* 담당직원 다중 배정(칩 + 추가 셀렉트) */
.sa-stf-row { align-items: center; }
.sa-stf-chip { background: var(--surface, #fff); border-color: var(--primary, #2563eb); padding-right: 4px; cursor: default; }
.sa-stf-x { border: 0; background: none; cursor: pointer; color: var(--text-muted, #667); display: inline-flex; padding: 2px; border-radius: 50%; }
.sa-stf-x:hover { color: var(--danger, #e0483e); background: var(--danger-bg, #fdecea); }
.sa-stf-x .ic { width: 12px; height: 12px; }
.sa-stf-addsel { min-width: 130px; height: 30px; border-radius: 15px; padding: 0 10px; font-weight: 600; color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); background: var(--surface, #fff); }
.sa-ct-tel { font-size: 11.5px; color: var(--text, #333); text-decoration: none; font-variant-numeric: tabular-nums; }
.sa-ct-tel:hover { text-decoration: underline; }

/* ============================================================
   코그 메일 (mail.js) — 지메일 임베드 룩 (2단: 사이드바 + 리스트/대화 전환)
   ============================================================ */
/* 코그 메일 — 처리함 리디자인(2026-07). 옵스원 토큰 기반, 지메일 하드코딩 색 제거. */
/* 높이 고정 해제(2026-08-04) — 내부 스크롤 없이 페이지 스크롤 하나로(부장님 요청) */
.mailhub { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; height: auto; min-height: 480px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

.mh-sync-err, .mh-sync-off { color: var(--danger); display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.mh-sync-refresh { border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 50%; }
.mh-sync-refresh:hover { background: var(--surface-3); color: var(--text-strong); }
.mh-syncline { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint); flex: none; }
.mh-syncline .ic { width: 13px; height: 13px; }
.mh-writebtn { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #fff; background: var(--primary); border: 0; border-radius: var(--r-pill); padding: 10px 18px; cursor: pointer; flex: none; font-family: inherit; box-shadow: var(--shadow-xs); }
.mh-writebtn:hover { background: var(--primary-strong); }
.mh-writebtn .ic { width: 15px; height: 15px; }

/* 상태 세그먼트 — 미처리/처리중/완료/전체 원탭 필터(건수 배지 상시 노출) */
.mh-seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-pill); padding: 3px; flex: none; }
.mh-seg-btn { border: 0; background: none; font: 600 13.5px/1 inherit; font-family: inherit; color: var(--text-muted); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.mh-seg-btn.on { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(17,24,39,.12); }
.mh-seg-n { font-size: 11px; font-weight: 800; color: #fff; background: var(--danger); border-radius: var(--r-pill); padding: 2px 7px; }
.mh-seg-n--doing { background: var(--warning); }
/* 미회신 토글 — 상태 축과 겹쳐 쓰는 필터. 배지는 미처리와 같은 경고색 */
.mh-seg-n--await { background: var(--danger); }
/* 정보성 탭(127) — 상태 축과 분리된 별도 함. 배지는 저채도(대응 지표 아님) */
.mh-seg-btn--info { margin-left: 6px; border-left: 1px solid var(--border); border-radius: 0; padding-left: 12px; }
.mh-seg-n--info { background: var(--text-faint, #94A3B8); }
/* 스누즈 탭(189) — 다시 띄우기 대기. 있을 때만 렌더되고, 배지는 저채도(급하지 않음이 본질) */
.mh-seg-n--snooze { background: var(--text-faint, #94A3B8); }

/* 업무전환 칩 — 리스트 제목 셀. 클릭=연결 업무 딥링크(행 열림과 분리) */
.mh-ot-task { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 800; color: var(--primary-strong); background: var(--primary-soft); border-radius: var(--r-pill); padding: 1px 8px; text-decoration: none; }
.mh-ot-task:hover { background: var(--primary-softer, var(--primary-soft)); text-decoration: none; }
.mh-ot-task .ic { width: 11px; height: 11px; }
/* 품질 공유 칩 — 품질함에서 보는 구매함 성적서·밀시트류(부장님 2026-09-07).
   원본 함·회신 창구가 구매임을 밝히는 표시. 행에서 조용히 — 굵은 컬러 테두리 없이 배경 톤만. */
.mh-gtag--share { gap: 3px; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); padding: 1px 8px; }
.mh-gtag--share .ic { width: 11px; height: 11px; }

/* 메시지 본문 파이프 표 렌더 — 발신 사본·수신 평문의 | a | b | 를 실제 표로 */
.mg-tbl { border-collapse: collapse; margin: 6px 0; font-size: 13px; line-height: 1.5; white-space: normal; }
.mg-tbl th, .mg-tbl td { border: 1px solid var(--border); padding: 4px 12px; text-align: left; }
.mg-tbl th { background: var(--surface-alt); font-weight: 700; text-align: center; }

/* 메시지 한국어 번역 — 헤더 버튼 + 본문 아래 번역 카드(AI 톤) */
.mg-ko-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 1px solid #CFDCFF; background: var(--ai-soft); color: var(--primary-strong); font: 700 11.5px/1 inherit; font-family: inherit; border-radius: var(--r-pill); padding: 3px 10px; cursor: pointer; }
.mg-ko-btn:hover { filter: brightness(.96); }
.mg-ko-btn:disabled { opacity: .6; cursor: default; }
.mg-ko-btn .ic { width: 12px; height: 12px; }
/* 지메일 원본 바로가기(189) — 탈출구 링크. 번역 버튼과 같은 자리·저채도 */
.mg-gmail { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: 700 11.5px/1 inherit; font-family: inherit; border-radius: var(--r-pill); padding: 3px 10px; text-decoration: none; }
.mg-gmail:hover { color: var(--text-strong); }
.mg-gmail .ic { width: 12px; height: 12px; }
.mg-ko { margin-top: 10px; background: var(--ai-soft); border: 1px solid #CFDCFF; border-radius: var(--r-md); padding: 10px 14px; font-size: 12.5px; color: var(--primary-strong); }
.mg-ko .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--primary); }
.mg-ko-text { font: 13.5px/1.65 inherit; font-family: inherit; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; color: var(--text); }

/* AI 초안 준비 칩 — 리스트 제목 셀. 클릭=스레드 열고 컴포저에 초안 채움 */
.mh-ot-draft { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 800; color: var(--primary-strong); background: var(--ai-soft); border: 1px solid #CFDCFF; border-radius: var(--r-pill); padding: 1px 8px; cursor: pointer; }
.mh-ot-draft:hover { filter: brightness(.96); }
.mh-ot-draft .ic { width: 11px; height: 11px; }
/* 수동 AI 회신 요청(고스트) — 초안 없는 행. 생성중은 클릭 불가 무채색 */
.mh-ot-draft--make { color: var(--text-faint); background: none; border: 1px dashed var(--border); }
.mh-ot-draft--make:hover { color: var(--primary-strong); background: var(--ai-soft); border-color: #CFDCFF; filter: none; }
.mh-ot-draft--busy { color: var(--text-faint); background: var(--surface-alt); border: 1px solid var(--border); cursor: default; }
/* AI 회신함(166) — 완료 상태 표기. 요청 버튼과 달리 클릭 불가·무채색 배경으로 '했음'을 뜻한다 */
.mh-ot-airep { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 700; color: var(--primary-strong); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; cursor: default; }
.mh-ot-airep .ic { width: 11px; height: 11px; }

/* 자동 분류 규칙 모달 행 */
.mh-rule-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border-light, var(--border)); }
.mh-rule-row.is-off { opacity: .5; }
.mh-rule-main { flex: 1 1 auto; min-width: 0; }
.mh-rule-pat { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-rule-meta { font-size: 11.5px; color: var(--text-faint); }

/* 그룹칩 필터 행 — 한글 짧은 이름 + 그룹색 도트 + 미처리 건수 */
.mh-groupbar { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.mh-gfilter { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 inherit; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 7px 13px; cursor: pointer; white-space: nowrap; flex: none; }
.mh-gfilter:hover { background: var(--surface-2); }
.mh-gfilter.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.mh-gfilter-n { font-size: 11px; font-weight: 800; color: var(--danger); }
.mh-gdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mh-newcompose { position: fixed; right: 28px; bottom: 16px; width: 520px; max-width: calc(100vw - 40px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-lg); padding: 0 16px 12px; z-index: 900; }
.mh-newcompose-head { display: flex; align-items: center; margin: 0 -16px 10px; padding: 10px 16px; background: var(--primary-softer); border-radius: var(--r-md) var(--r-md) 0 0; font-size: 14px; font-weight: 700; color: var(--text-strong); flex: none; }
.mh-newcompose-head .mh-compose-x { margin-left: auto; }
.mh-newcompose-head .mh-compose-x + .mh-compose-x { margin-left: 2px; }
/* 창 크기 조절(2026-08-13) — 창이 우하단에 붙어 있어 좌상단 모서리를 잡아 끈다. */
.mh-nc-grip { position: absolute; top: 0; left: 0; width: 20px; height: 20px; cursor: nwse-resize; border-radius: var(--r-md) 0 0 0; z-index: 2; }
.mh-nc-grip::before { content: ''; position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; border-top: 2px solid var(--text-muted); border-left: 2px solid var(--text-muted); border-radius: 2px 0 0 0; opacity: .7; }
.mh-nc-grip:hover::before { opacity: 1; border-color: var(--primary); }
.mh-newcompose.is-resizing { user-select: none; }
/* 크기를 지정했을 때 — 남는 높이는 본문이 먹고 보내기 줄은 항상 보인다. */
.mh-newcompose > .mh-comp-row, .mh-newcompose > .mh-rich-bar, .mh-newcompose > .mh-oatts,
.mh-newcompose > [data-mh-oatts], .mh-newcompose > .mh-siglangs, .mh-newcompose > .mh-compose-actions { flex: none; }
.mh-newcompose > .mh-rich { flex: 1 1 auto; max-height: none; }
.mh-newcompose > .mh-compose-sig { flex: 0 1 auto; overflow-y: auto; }
.mh-newcompose textarea { width: 100%; border: 0; outline: 0; font: 14px/1.65 inherit; font-family: inherit; color: var(--text-strong); padding: 6px 0 10px; resize: vertical; min-height: 160px; }
.mh-ct-wrap { padding: 0 16px 16px; }
.mh-ct { width: 100%; border-collapse: collapse; font-size: 13px; }
.mh-ct th { text-align: left; font-size: 12px; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border-2); padding: 8px 10px; position: sticky; top: 0; background: var(--surface); }
.mh-ct td { border-bottom: 1px solid var(--border); padding: 7px 10px; color: var(--text-strong); }
.mh-ct tr:hover td { background: var(--surface-2); }
.mh-ct-addr { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text); }
.mh-ct-r { text-align: right; font-variant-numeric: tabular-nums; }
.mh-ct-unreg { color: var(--danger); font-weight: 700; font-size: 12px; }
.mh-ct .btn .ic { width: 12px; height: 12px; }

/* ── 본문 영역(리스트 ↔ 대화 전환) ── */
.mh-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }
.mh-main > .empty-state { margin: auto; }

/* 리스트 툴바 */
.mh-list-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); min-height: 56px; flex: none; }
.mh-list-bar .grow { flex: 1 1 auto; }
.mh-ck { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex: none; margin: 0; }
.mh-selinfo { font-size: 13px; font-weight: 700; color: var(--text-strong); }
/* 일괄 상태 변경 — 선택 모드 툴바의 상태 버튼 3종(리스트 상태 칩과 동일 색) */
.mh-bulk-st { display: inline-flex; gap: 4px; }
.mh-bulk-st-btn { border: 0; font: 700 12px/1 inherit; font-family: inherit; border-radius: var(--r-pill); padding: 7px 13px; cursor: pointer; }
.mh-bulk-st-btn:hover { filter: brightness(.95); }
.mh-list-title { font-size: 16px; font-weight: 700; color: var(--text-strong); padding: 12px 16px 6px; flex: none; }
.mh-sel { height: 30px; font-size: 13px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding: 0 6px; font-family: inherit; }
.mh-search { flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; gap: 9px; height: 38px; border-radius: var(--r-pill); padding: 0 15px; background: var(--surface-2); min-width: 0; }
.mh-search:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--primary-soft); }
.mh-search .ic { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.mh-search input { border: 0; outline: 0; background: none; font-size: 13.5px; width: 100%; color: var(--text-strong); font-family: inherit; }
.mh-list-body { flex: 1 1 auto; min-height: 0; }
/* 검색 알림 줄 — 본문 검색 진행·실패를 결과 위에 알린다(실패를 0건으로 위장하지 않는다) */
.mh-qnote { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 12.5px; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mh-qnote--err { color: var(--danger); background: var(--danger-soft, var(--surface-2)); }

/* 보낸편지함·미발신 한 줄 행(스레드 리스트는 아래 .mh-tbl 표) */
.mh-row { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; background: var(--surface); }
.mh-row:hover { background: var(--primary-softer); }
.mh-stchip { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; flex: none; white-space: nowrap; }
.mh-st--open { background: var(--danger-soft); color: var(--danger); }
.mh-st--doing { background: var(--warning-soft); color: var(--warning); }
.mh-st--done { background: var(--success-soft); color: var(--success); }
/* 보낸편지함 — 미발신(대기·실패) 라벨 + 구간 소제목 */
.mh-ob--wait { background: var(--surface-3); color: var(--text); }
.mh-ob--fail { background: var(--danger-soft); color: var(--danger); }
.mh-ob--ok { background: var(--success-soft); color: var(--success); }
/* 임시보관함(122) — 행 우측 전환 버튼·안내 */
.mh-dr-actions { flex: none; display: inline-flex; gap: 6px; align-items: center; }
.mh-dr-row:hover { background: var(--surface-2); }
.mh-dr-hint { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mh-sent-sub { padding: 8px 16px 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.mh-row-sender { flex: none; width: 185px; font-size: 13.5px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mh-unreg { color: var(--danger); display: inline-flex; flex: none; }
.mh-unreg .ic { width: 14px; height: 14px; }
.mh-row-chips { flex: none; display: inline-flex; gap: 4px; max-width: 320px; overflow: hidden; }
.mh-gchip, .mh-cat { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--text); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 9px; flex: none; white-space: nowrap; }
.mh-gtag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border-radius: var(--r-pill); padding: 2.5px 9px; flex: none; white-space: nowrap; }
.mh-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.mh-row-subject { font-size: 13.5px; color: var(--text-strong); flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
.mh-row-sn { font-size: 13.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mh-row-time { flex: none; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-left: 4px; min-width: 56px; text-align: right; }

/* 스레드 표 — 업무리스트(ops-tbl) 문법 재사용. 상태 컬러 셀·셀 경계·46px 행. */
.mh-tbl-wrap { padding: 0 0 12px; }
.mh-tbl { min-width: 860px; }
.mh-tbl thead th { cursor: default; font-size: 12px; font-weight: 700; color: var(--text-muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-2); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.mh-tbl thead th:first-child { padding-left: 10px; }
/* 엑셀식 헤더 필터 — 깔때기 버튼(거래처관리 crm-fbtn 패턴) + 값 체크박스 팝업 */
.mh-fbtn { border: 0; background: transparent; padding: 1px 2px; margin-left: 2px; color: var(--text-faint); cursor: pointer; vertical-align: middle; border-radius: 6px; }
.mh-fbtn:hover { color: var(--primary); background: var(--primary-soft); }
.mh-fbtn.on { color: var(--primary); }
.mh-fbtn svg { width: 12px; height: 12px; }
#mh-hfpop { position: fixed; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 10px; min-width: 200px; max-width: 300px; }
#mh-hfpop .mh-hfpop-h { font-size: 12px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
#mh-hfpop #mh-hf-q { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 4px 8px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
#mh-hfpop .mh-hfpop-list { max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
#mh-hfpop label { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--text); padding: 3px 4px; border-radius: 6px; cursor: pointer; }
#mh-hfpop label:hover { background: var(--primary-softer); }
#mh-hfpop .mh-hfpop-n { margin-left: auto; color: var(--text-faint); font-size: 11px; }
#mh-hfpop .mh-hfpop-foot { display: flex; gap: 6px; justify-content: flex-end; }
#mh-hfpop .mh-hfpop-empty { font-size: 12px; color: var(--text-faint); text-align: center; padding: 10px 4px; }
.mh-tbl tbody tr.mh-trw { cursor: pointer; }
.mh-tbl tbody tr.mh-trw:hover td { background: var(--primary-softer); }
.mh-tbl tbody tr.mh-trw.is-done td { opacity: .6; }
/* 정보성 행 — '전체' 세그먼트에 회색으로 섞여 표시(지표 제외는 유지). 상태 셀은 무채색 '정보성' */
.mh-tbl tbody tr.mh-trw.is-info td { opacity: .55; }
.ops-tbl .ot-status-cell.st-info { background: var(--text-faint, #94A3B8); }
.mh-tbl td[data-col="select"] { text-align: center; vertical-align: middle; }
.mh-tbl .ot-status-cell { font-size: 12px; }
.ops-tbl .ot-cell.mh-ot-partner { justify-content: flex-start; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.mh-ot-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-ot-sender { font-weight: 500; color: var(--text-muted); }
.mh-ot-unregtx { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.mh-trw.is-unread .mh-ot-partner { font-weight: 800; color: var(--text-strong); }
.mh-trw.is-unread .mh-ot-sender { font-weight: 700; color: var(--text); }
.ops-tbl .ot-cell.mh-ot-title { justify-content: flex-start; gap: 6px; font-size: 13.5px; white-space: nowrap; }
.mh-ot-subj { color: var(--text-strong); flex: none; max-width: 58%; overflow: hidden; text-overflow: ellipsis; }
.mh-trw.is-unread .mh-ot-subj { font-weight: 700; }
.mh-ot-cnt { flex: none; font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 1px 7px; }
.mh-ot-sn { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mh-ot-group { justify-content: flex-start; gap: 4px; }
.mh-ot-owner { justify-content: flex-start; }
/* 담당 인라인 셀렉트 — 평소엔 텍스트처럼, 호버 시 편집 가능 힌트(업무 표 인라인 편집 톤) */
.mh-ot-owner-sel { width: 100%; border: 0; background: transparent; font: 600 13px/1.4 inherit; font-family: inherit; color: var(--text); cursor: pointer; border-radius: 6px; padding: 4px 2px; appearance: none; text-align: center; }
.mh-ot-owner-sel:hover { background: var(--surface-2); }
.mh-ot-owner-sel.is-empty { color: var(--text-faint); font-weight: 500; }
.mh-ot-time { justify-content: flex-start; font-variant-numeric: tabular-nums; }
.mh-trw.is-unread .mh-ot-time { color: var(--primary); font-weight: 700; }
.mh-claim { font: 700 12px/1 inherit; font-family: inherit; color: var(--primary); background: var(--primary-soft); border: 0; border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; flex: none; }
.mh-claim:hover { background: #DCE5FF; }

/* ── 대화 뷰 ── */
.mh-detail-head { padding: 14px 22px 0; background: var(--surface); }
.mh-detail-titlerow { display: flex; align-items: flex-start; gap: 10px; }
.mh-backbtn { border: 0; background: var(--surface-2); color: var(--text); font-size: 17px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none; line-height: 1; }
.mh-backbtn:hover { background: var(--surface-3); }
.mh-detail-titlebox { min-width: 0; }
.mh-detail-title { font-size: 20px; font-weight: 800; color: var(--text-strong); line-height: 1.35; word-break: break-all; }
.mh-detail-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.mh-partner { font-size: 13px; font-weight: 700; color: var(--text); }
.mh-detail-addr { font-size: 12.5px; color: var(--text-faint); }

/* 처리 카드 — 상태 스테퍼 + 담당 + 읽음 + 액션. 이 화면의 주인공. */
.mh-proc { display: flex; align-items: center; gap: 14px; margin-top: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; flex-wrap: wrap; }
.mh-proc .grow { flex: 1 1 auto; }
.mh-proc .btn .ic { width: 13px; height: 13px; }
.mh-steps { display: inline-flex; align-items: center; flex: none; }
.mh-step { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 inherit; font-family: inherit; color: var(--text-faint); background: var(--surface); border: 1.5px solid var(--border-2); border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; }
.mh-step + .mh-step { margin-left: -1px; }
.mh-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex: none; }
.mh-step.past { color: var(--text-muted); }
.mh-step.past .mh-step-dot { background: var(--success); }
.mh-step.now { position: relative; z-index: 1; color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.mh-step.now .mh-step-dot { background: var(--danger); }
.mh-step.now[data-val="doing"] { color: #9A5B00; background: var(--warning-soft); border-color: var(--warning); }
.mh-step.now[data-val="doing"] .mh-step-dot { background: var(--warning); }
.mh-step.now[data-val="done"] { color: var(--success); background: var(--success-soft); border-color: var(--success); }
.mh-step.now[data-val="done"] .mh-step-dot { background: var(--success); }
.mh-proc-owner { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.mh-reads { display: inline-flex; align-items: center; }
.mh-reads .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface-2); }
.mh-reads .avatar:first-child { margin-left: 0; }
.mh-mismatch { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--warning); background: var(--warning-soft); border: 0; font-family: inherit; border-radius: var(--r-sm); padding: 2px 8px; cursor: pointer; }
.mh-mismatch:hover { filter: brightness(.95); }
.mh-mismatch .ic { width: 12px; height: 12px; color: var(--warning); }
.mh-task-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: var(--r-pill); padding: 5px 14px; text-decoration: none; }
.mh-task-link .ic { width: 13px; height: 13px; }
.mh-unreg-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px; font-size: 13px; color: var(--warning); background: var(--warning-soft); border-radius: var(--r-sm); flex-wrap: wrap; }
.mh-unreg-bar .ic { width: 14px; height: 14px; color: var(--warning); }
.mh-unreg-bar .btn { margin-left: auto; }
/* 내 Gmail(개인 지메일 미러) — 지메일 한 줄 목록. 시간은 오른쪽 끝(지메일과 같은 자리) */
.pmail-time, .pmail-th-time { text-align: right; }
.pmail-row .mh-ot-sender { min-width: 0; }
/* 거래처 등록·그룹 전달 — 본문 모달 머리의 액션 줄 */
.pmail-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.pmail-act-hint { flex: 1 1 200px; font-size: 12px; color: var(--text-faint); }
.pmail-act select { font: 400 13px/1.4 inherit; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 9px; }

/* 거래처 즉시 등록 폼 — 미등록 바에서 그 자리로 펼친다. 플랫 카드(1px 경계, 굵은 컬러 테두리 금지) */
.mh-reg { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.mh-reg-t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.mh-reg-t .ic { width: 14px; height: 14px; color: var(--text-muted); }
.mh-reg-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.mh-reg-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 0; }
.mh-reg-f > span { font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.mh-reg-f input, .mh-reg-f select { width: 100%; font: 400 13px/1.4 inherit; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 9px; }
.mh-reg-f input:focus, .mh-reg-f select:focus { outline: none; border-color: var(--primary); }
.mh-reg-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mh-reg-hint { flex: 1 1 220px; font-size: 12px; color: var(--text-faint); }
/* 한 문장 안에 <b>가 섞인다 — flex 로 만들면 모바일에서 굵은 글자가 한 글자씩 세로로 쪼개진다(412px 실측). */
.mh-reg-dup, .mh-reg-warn { font-size: 13px; line-height: 1.55; color: var(--text); }
.mh-reg-warn { margin-bottom: 10px; color: var(--warning); }
.mh-reg-dup .ic, .mh-reg-warn .ic { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--warning); }
@media (max-width: 640px) {
  .mh-reg-f { flex: 1 1 100%; }
  .mh-reg-foot .btn { flex: 1 1 auto; justify-content: center; }
  .mh-reg-hint { flex: 1 1 100%; }
}
.mh-arch-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px; font-size: 13px; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-sm); }
.mh-arch-bar .ic { width: 14px; height: 14px; color: var(--text-faint); }
/* 바 안에 버튼이 있는 경우(회신 없이 종결 [되돌리기], 192) — 좁은 폭에서 버튼 글자가 세로로
   쪼개지지 않게 버튼은 제 폭을 지키고, 문장 쪽이 줄바꿈을 흡수한다. */
.mh-arch-bar .mh-arch-tx { flex: 1 1 auto; min-width: 0; }
.mh-arch-bar .btn { flex: none; white-space: nowrap; }

/* 첨부함(#mail/atts, 첨부함 1단계) — 플랫 표(먼데이식 그룹 박스 금지). 파일명=열기 버튼 */
.mh-atts-body { padding: 0 22px 20px; }
.mh-atts-wrap { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-x: auto; }
.mh-atts-tbl { min-width: 860px; }
.mh-atts-file { justify-content: flex-start; gap: 6px; overflow: hidden; }
.mh-atts-name { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: 600 13px/1.4 inherit; font-family: inherit; color: var(--text); cursor: pointer; padding: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.mh-atts-name:hover { color: var(--primary); text-decoration: underline; }
.mh-atts-name .ic { width: 13px; height: 13px; flex: none; color: var(--text-faint); }
.mh-atts-st { flex: none; font-size: 11px; color: var(--text-faint); }
.mh-atts-st--fail { color: var(--danger); font-weight: 700; }
.mh-atts-sub { font-size: 12.5px; color: var(--text-muted); }
.mh-atts-mail { justify-content: flex-start; gap: 6px; overflow: hidden; }
.mh-atts-mail a { color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mh-atts-mail a:hover { color: var(--primary); text-decoration: underline; }
.mh-atts-out { flex: none; font-size: 10.5px; font-weight: 700; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 6px; }
.mh-atts-hint { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.mh-cat--dim { color: var(--text-faint); background: var(--surface-3); }
@media (max-width: 900px) { .mh-atts-body { padding: 0 12px 16px; } }

/* 거래처 컨텍스트 패널(제안 2-2) — 상세 헤더 아래 접이식 카드. 플랫 톤(1px 경계, 굵은 테두리 금지) */
.mh-ctx { margin: 10px 22px 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.mh-ctx-head { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; font: 600 13px/1.4 inherit; font-family: inherit; color: var(--text); padding: 9px 14px; cursor: pointer; text-align: left; }
.mh-ctx-head .ic { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.mh-ctx-head .grow { flex: 1 1 auto; }
.mh-ctx-head:hover { background: var(--surface-2, rgba(17,24,39,.03)); }
.mh-ctx-sum { font-weight: 500; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mh-ctx--open .mh-ctx-head { border-bottom: 1px solid var(--border); }
.mh-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; padding: 10px 14px 12px; }
.mh-ctx-blk { min-width: 0; padding: 4px 0; }
.mh-ctx-blk-t { font-size: 11px; font-weight: 700; color: var(--text-faint); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.mh-ctx-more { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--primary); text-decoration: none; }
.mh-ctx-more:hover { text-decoration: underline; }
/* 블록 제목 옆 방식 표기 — '제목 일치'처럼 데이터가 어떻게 잡혔는지 밝히는 작은 라벨.
   .mh-ctx-more 와 같은 자리(오른쪽 끝)를 쓰되 링크가 아니므로 중성색이다. */
.mh-ctx-note { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--text-faint); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 0 6px; cursor: default; }
.mh-ctx-row { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 3px 0; font-size: 12.5px; border: 0; background: none; font-family: inherit; text-align: left; color: var(--text); }
.mh-ctx-row--link { cursor: pointer; text-decoration: none; }
.mh-ctx-row--link:hover .mh-ctx-main { color: var(--primary); text-decoration: underline; }
.mh-ctx-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.mh-ctx-sub { flex: none; font-size: 11.5px; color: var(--text-muted); }
.mh-ctx-empty { font-size: 12px; color: var(--text-faint); padding: 3px 0 5px; }
.mh-ctx-err { font-size: 12px; color: var(--danger); padding: 3px 0 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mh-ctx-err .ic { width: 12px; height: 12px; }
.mh-ctx-retrybtn { border: 0; background: none; font: 700 11.5px/1 inherit; font-family: inherit; color: var(--primary); cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 900px) { .mh-ctx { margin: 8px 12px 0; } }
/* 리치 컴포저(지메일식) — 툴바 + contenteditable 본문. 표는 편집창·수신 메일 동일 괘선 */
.mh-rich-bar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--surface-2); }
.mh-rich-bar button { border: none; background: transparent; border-radius: 5px; min-width: 24px; height: 22px; padding: 0 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.mh-rich-bar button:hover { background: var(--surface-3); color: var(--text); }
.mh-rich-bar button .ic, .mh-rich-bar button svg { width: 13px; height: 13px; }
.mh-rich-hint { margin-left: auto; font-size: 11px; color: var(--text-faint, var(--text-muted)); }
.mh-rich { min-height: 120px; max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 10px 12px; font-size: 13.5px; line-height: 1.6; background: var(--bg-input, var(--surface)); color: var(--text); }
.mh-rich:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.mh-rich:empty::before { content: attr(data-ph); color: var(--text-faint, var(--text-muted)); pointer-events: none; }
.mh-rich table { border-collapse: collapse; margin: 6px 0; }
.mh-rich td, .mh-rich th { border: 1px solid var(--border-2, #B7BCC8); padding: 4px 9px; font-size: 13px; }
.mh-rich th { background: var(--surface-2); font-weight: 700; }
.mh-quote-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px; font-size: 13px; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-sm); flex-wrap: wrap; }
.mh-quote-bar .ic { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.mh-quote-bar--err { color: var(--danger); background: var(--danger-soft); }
.mh-quote-bar--err .ic { color: var(--danger); }

/* 메시지별 견적 인계(215) — 펼친 메시지 본문 아래 한 줄. 지메일 바로가기 버튼(.mg-gmail)과 같은 저채도 알약.
   좁은 화면에서 상태 줄과 버튼이 겹치지 않게 wrap 한다(412px 실측). */
.mg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* 상태 줄 — 아이콘이 혼자 한 줄을 차지하지 않게 아이콘·문구를 한 덩어리로 두고 문구만 안에서 접는다(412px 실측). */
.mg-acts .mh-quote-bar { margin-top: 0; flex-wrap: nowrap; align-items: flex-start; }
.mg-acts .mh-quote-bar .ic { margin-top: 3px; }
.mg-quote { display: inline-flex; align-items: center; gap: 5px; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: 700 11.5px/1 inherit; font-family: inherit; border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; text-decoration: none; }
.mg-quote:hover { color: var(--text-strong); background: var(--surface-2); }
.mg-quote .ic { width: 12px; height: 12px; }
.mg-quote--done { color: var(--primary-strong); border-color: #CFDCFF; background: var(--ai-soft); }
.mg-quote--done:hover { color: var(--primary-strong); background: var(--ai-soft); filter: brightness(.96); }

/* AI 요약 */
.mh-ai-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid var(--border-2); color: var(--primary); background: var(--surface); font-size: 13px; font-weight: 600; border-radius: var(--r-pill); padding: 6px 16px; cursor: pointer; font-family: inherit; }
.mh-ai-cta:hover { background: var(--primary-softer); }
.mh-ai-cta .ic { width: 14px; height: 14px; }
.mh-ai-box { margin-top: 10px; background: var(--ai-soft); border: 1px solid #CFDCFF; border-radius: var(--r-md); padding: 10px 16px; font-size: 13.5px; color: var(--text); }
.mh-ai-box--busy { display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; }
.mh-ai-box--fail { display: flex; align-items: center; gap: 8px; background: var(--danger-soft); border-color: #F6C9C5; color: var(--danger); font-weight: 700; }
.mh-ai-box .ic { width: 15px; height: 15px; color: var(--primary); flex: none; }
.mh-ai-box--fail .ic { color: var(--danger); }
.mh-ai-head { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--primary-strong); }
.mh-ai-redo { margin-left: auto; border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 3px; border-radius: 50%; }
.mh-ai-redo:hover { background: var(--surface); color: var(--text-strong); }
.mh-ai-redo .ic { width: 13px; height: 13px; }
.mh-ai-text { font: 13.5px/1.65 inherit; font-family: inherit; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; color: var(--text); }
.mh-ai-hint { font-weight: 400; color: var(--text-faint); }
/* AI 개요 — 지메일 Gemini 개요 카드식 개조 불릿 */
.mh-ai-ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.mh-ai-ul li { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.mh-ai-foot { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }

/* ── AI 업무 브리핑 대시보드 — 리스트 상단(그룹칩 아래) 카드. 표준 1px 테두리 + 배경 톤만(굵은 컬러 테두리 금지 규칙).
   테마와 무관한 고정 다크 톤 + 앰버 액센트(2026-08-06 부장님 "다크톤으로 통일") —
   메일 원문(흰 표)과 한눈에 구분되는 내부 분석 패널. 색은 다크 팔레트 고정값이라 라이트/다크 동일. ── */
.mh-dg { margin: 10px 16px 2px; border: 1px solid #343B47; border-radius: var(--r-md); background: #1F242E; flex: none; overflow: hidden; color: #D5DBE4; }
.mh-dg-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.mh-dg.is-closed .mh-dg-head { padding: 6px 12px; }
.mh-dg-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #EEF1F6; }
.mh-dg-title .ic { width: 14px; height: 14px; color: #E8A33D; }
.mh-dg-scope { font-weight: 800; font-size: 12px; color: #E8A33D; background: rgba(232, 163, 61, .16); border-radius: var(--r-pill); padding: 1px 9px; }
.mh-dg-meta { font-size: 11.5px; color: #7E8899; }
.mh-dg-btn { border: 0; background: none; cursor: pointer; color: #7E8899; padding: 3px; border-radius: 6px; }
.mh-dg-btn:hover { background: rgba(255, 255, 255, .07); color: #EEF1F6; }
.mh-dg-btn:disabled { opacity: .5; cursor: default; }
.mh-dg-btn .ic { width: 14px; height: 14px; display: block; }
.mh-dg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; padding: 0 12px 10px; }
.mh-dg-tile { border: 1px solid #3A4250; border-radius: var(--r-sm); padding: 6px 10px; background: #272E39; min-width: 0; }
.mh-dg-tile-n { font-size: 18px; font-weight: 800; color: #F2F5FA; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-dg-tile-l { font-size: 11px; color: #98A2B1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-dg-tile--danger { background: rgba(248, 113, 113, .12); }
.mh-dg-tile--danger .mh-dg-tile-n { color: #F87171; }
.mh-dg-tile--warn { background: rgba(232, 163, 61, .13); }
.mh-dg-tile--warn .mh-dg-tile-n { color: #E8A33D; }
.mh-dg-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.mh-dg-headline { font-size: 13.5px; line-height: 1.55; font-weight: 600; color: #F2F5FA; background: #272E39; border: 1px solid rgba(232, 163, 61, .3); border-radius: var(--r-sm); padding: 8px 12px; }
.mh-dg-headline--text { white-space: pre-wrap; word-break: break-word; }
/* 브리핑 표 — 플랫 표 규칙(테두리 래퍼 1겹). 다크 표면 위 동일 문법 */
.mh-dg-tblwrap { background: #232935; border: 1px solid rgba(232, 163, 61, .3); border-radius: var(--r-sm); overflow-x: auto; }
.mh-dg-tbl { min-width: 680px; }
.mh-dg-tbl th { font-size: 11.5px; font-weight: 800; color: #98A2B1; text-align: left; padding: 7px 10px; border-bottom: 1px solid #39414F; background: #2A3140; white-space: nowrap; }
.mh-dg-tbl td { font-size: 12.5px; color: #D5DBE4; padding: 6px 10px; border-bottom: 1px solid #313947; vertical-align: middle; }
.mh-dg-tbl tbody tr:last-child td { border-bottom: 0; }
.mh-dg-tr { cursor: pointer; }
.mh-dg-tr:hover td { background: #2C3443; }
.mh-dg-td-partner { font-weight: 700; color: #F2F5FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-dg-td-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-dg-td-when { font-size: 11.5px; font-weight: 800; color: #F87171; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-dg-td-why { color: #98A2B1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-dg-k { display: inline-block; font-size: 11px; font-weight: 800; border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.mh-dg-k--urgent { color: #F87171; background: rgba(248, 113, 113, .14); }
.mh-dg-k--due { color: #E8A33D; background: rgba(232, 163, 61, .16); }
.mh-dg-k--blocked { color: #98A2B1; background: rgba(255, 255, 255, .07); }
.mh-dg-watch { font-size: 12px; color: #98A2B1; line-height: 1.5; padding: 0 2px; }
.mh-dg-done { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4ADE80; font-weight: 600; }
.mh-dg-done .ic { width: 15px; height: 15px; }
.mh-dg-busy { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8FAAF7; font-weight: 600; }
.mh-dg-busy .ic { width: 14px; height: 14px; }
.mh-dg-skel { height: 12px; flex: 1; max-width: 320px; background: rgba(255, 255, 255, .10); }
.mh-dg-err { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #F87171; font-weight: 600; }
.mh-dg-err .ic { width: 14px; height: 14px; flex: none; }
.mh-dg-err--soft { font-weight: 400; }
.mh-dg-load { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: #98A2B1; }
.mh-dg-load-t { font-weight: 800; margin-right: 3px; }
.mh-dg-load-chip { border: 1px solid #3A4250; border-radius: var(--r-pill); padding: 1px 8px; background: #272E39; color: #D5DBE4; }
.mh-dg-load-chip b { font-weight: 800; color: #F2F5FA; }
.mh-dg-load-chip.is-none { color: #6E7889; }
@media (max-width: 720px) {
  .mh-dg { margin: 8px 10px 2px; }
  .mh-dg-tiles { grid-template-columns: repeat(3, 1fr); }
  /* 모바일 — 표는 래퍼 안에서 가로 스크롤(min-width 유지), 페이지 가로 스크롤 없음 */
}

/* 진행 기록(업무 리비전) — 내부 코멘트 + 상태 변경 타임라인.
   내부 메모(포스트잇) 톤 — 메일 카드(흰색)와 배경 톤으로 구분(2026-08-04 부장님 재요청).
   테두리는 표준 1px 유지(굵은 컬러 테두리 금지 규칙 준수) — 구분은 앰버 배경이 담당. */
#mh-note-zone { padding: 10px 22px 0; background: var(--surface); flex: none; }
.mh-note { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--warning-soft); overflow: hidden; box-shadow: var(--shadow-xs); }
.mh-note-bar { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; font: 800 13px/1 inherit; font-family: inherit; color: var(--text-strong); padding: 9px 14px; cursor: pointer; text-align: left; }
#mh-note-zone > .mh-note-bar { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--warning-soft); }
.mh-note-bar:hover { filter: brightness(.98); }
.mh-note-bar .ic { width: 14px; height: 14px; color: var(--warning); flex: none; }
.mh-note-n { font-size: 11.5px; font-weight: 800; color: var(--warning); background: rgba(217, 130, 11, .14); border-radius: var(--r-pill); padding: 2px 8px; }
/* 내부 전용 경고 문구 — 앰버 라벨 칩(테두리는 미세 톤만) */
.mh-note-hint { font-size: 12px; font-weight: 700; color: #8A5400; background: rgba(255, 255, 255, .55); border: 1px solid rgba(217, 130, 11, .35); border-radius: var(--r-pill); padding: 2px 10px; }
.mh-note-preview { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-note-preview--empty { color: var(--text-faint); }
.mh-note-chev { margin-left: auto; color: var(--text-faint); font-size: 11px; flex: none; }
.mh-note-bar .mh-note-hint + .mh-note-chev { margin-left: auto; }
/* 내부 스크롤 없음(2026-08-04) — 기록이 많으면 패널이 늘어나고 페이지가 스크롤된다 */
.mh-note-list { padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(217, 130, 11, .2); background: transparent; }
.mh-note-empty { font-size: 12.5px; color: var(--text-faint); padding: 10px 2px; }
.mh-note-row { display: flex; align-items: flex-start; gap: 9px; padding-top: 6px; }
.mh-note-row--status { align-items: center; gap: 8px; padding: 2px 2px 0; }
.mh-note-stdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex: none; }
.mh-note-stdot--reply { background: var(--primary); } /* 회신 이벤트 — 상태 로그와 색으로 구분 */
.mh-note-stbody { font-size: 12.5px; color: var(--text-muted); }
.mh-note-main { flex: 1 1 auto; min-width: 0; }
.mh-note-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-strong); }
/* 코멘트 → 업무 전환 버튼 — 평소 흐리게, 행 호버 시 선명(터치에서도 항상 표시) */
.mh-note-task-btn { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: 600 11.5px/1 inherit; font-family: inherit; border-radius: var(--r-pill); padding: 3px 9px; cursor: pointer; opacity: .55; }
.mh-note-row:hover .mh-note-task-btn, .mh-note-task-btn:hover { opacity: 1; color: var(--primary); border-color: var(--primary); }
.mh-note-task-btn .ic { width: 11px; height: 11px; }
.mh-note-tasklink { font-weight: 700; color: var(--primary); text-decoration: none; }
.mh-note-tasklink:hover { text-decoration: underline; }
.mh-note-task-btn--first { margin-left: auto; }
.mh-note-task-btn + .mh-note-task-btn { margin-left: 0; }
/* 인라인 수정 박스 — textarea + 저장/취소 */
.mh-note-editbox { display: flex; align-items: flex-end; gap: 6px; margin-top: 3px; }
.mh-note-editbox textarea { flex: 1 1 auto; resize: none; font: 13px/1.5 inherit; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--primary); border-radius: var(--r-sm); padding: 6px 9px; }
.mh-note-time { font-size: 11.5px; color: var(--text-faint); }
.mh-note-row--status .mh-note-time { margin-left: auto; }
.mh-note-body { font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-top: 1px; }
.mh-note-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid rgba(217, 130, 11, .25); background: transparent; }
.mh-note-ta-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.mh-note-input textarea { width: 100%; resize: none; min-height: 34px; max-height: 120px; font: 13px/1.5 inherit; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 7px 10px; }
.mh-note-input textarea:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.mh-note-send { flex: none; }

/* ── 진행 기록 다크 테마 — 타임라인 카드(fly-tip--card)와 같은 색으로 통일(부장님 2026-08-05) ── */
.mh-note { background: #323338; border-color: #45464E; box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .5); }
#mh-note-zone > .mh-note-bar { background: #323338; border-color: #45464E; }
.mh-note-bar { color: #fff; }
.mh-note-bar .ic { color: #F5C26B; }
.mh-note-n { color: #F5C26B; background: rgba(245, 194, 107, .16); }
.mh-note-hint { color: #F5C26B; background: rgba(255, 255, 255, .06); border-color: rgba(245, 194, 107, .4); }
.mh-note-preview { color: #9AA3B5; }
.mh-note-preview--empty { color: #7A8194; }
.mh-note-chev { color: #9AA3B5; }
.mh-note-list { border-top-color: rgba(255, 255, 255, .09); }
.mh-note-row + .mh-note-row { border-top: 1px solid rgba(255, 255, 255, .07); }
.mh-note-empty { color: #9AA3B5; }
.mh-note-head { color: #fff; }
.mh-note-time { color: #9AA3B5; }
.mh-note-body { color: #E6E9F2; }
.mh-note-stdot { background: #F5C26B; }
.mh-note-stdot--due { background: #9AA3B5; } /* AI 기한 감지(189) — 다크 구간 뒤라 상태 점(노랑)과 구분된다 */
.mh-note-stbody { color: #C9CFDB; }
.mh-note-stbody a, .mh-note-body a { color: #9CC1FF; }
.mh-note-tasklink { color: #9CC1FF; }
.mh-note-task-btn { background: transparent; border-color: rgba(255, 255, 255, .28); color: #C9CFDB; }
.mh-note-row:hover .mh-note-task-btn, .mh-note-task-btn:hover { color: #fff; border-color: #9CC1FF; }
.mh-note-input { border-top-color: rgba(255, 255, 255, .09); }
.mh-note-input textarea { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.mh-note-input textarea::placeholder { color: #9AA3B5; }
.mh-note-input textarea:focus { background: rgba(255, 255, 255, .12); border-color: #9CC1FF; }

/* 리스트 진행 컬럼 — 최신 이벤트 한 줄 + 건수, 호버=타임라인 말풍선 */
/* 좌측 정렬 — .ops-tbl .ot-cell 의 가운데 정렬을 같은 특정도로 눌러야 먹는다(제목·거래처 셀과 동일 규약).
   가운데 정렬이면 칸을 넘칠 때 양쪽이 잘려 앞의 미회신 칩이 먼저 사라진다. */
.ops-tbl .ot-cell.mh-ot-notecell { overflow: hidden; justify-content: flex-start; text-align: left; }
.mh-ot-note { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; font-size: 12px; cursor: help; }
.mh-ot-note .mh-note-n { flex: none; }
/* 회신 필요 칩 — 진행 칸 맨 앞. 거래처 메일이 마지막이라 아직 답 안 한 스레드.
   강조는 배경 미세 톤 + 라벨까지만(굵은 컬러 테두리 금지 규칙). */
.mh-ot-await { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 800; color: var(--danger); background: var(--danger-soft); border-radius: var(--r-pill); padding: 2px 8px; cursor: help; }
.mh-ot-await .ic { width: 11px; height: 11px; }
/* 약속·기한 D-day 칩(189) — 제목 셀. 평시 저채도, 이틀 안=경고 톤, 경과=위험 톤(배경 톤까지만) */
.mh-ot-due { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 800; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 8px; cursor: help; }
.mh-ot-due .ic { width: 11px; height: 11px; }
.mh-ot-due--soon { color: var(--warning, #D9820B); background: var(--warning-soft, #FCEFD7); }
.mh-ot-due--over { color: var(--danger); background: var(--danger-soft); }
.mh-ot-due-x { border: 0; background: none; font: 800 12px/1 inherit; font-family: inherit; color: inherit; opacity: .65; padding: 0 0 0 3px; cursor: pointer; }
.mh-ot-due-x:hover { opacity: 1; }
/* 스누즈 칩(189) — 스누즈 탭 행에서 복귀일 표시. 저채도 */
.mh-ot-snooze { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 8px; cursor: help; }
.mh-ot-snooze .ic { width: 11px; height: 11px; }
/* 회신 필요 칩과 같은 칸에 놓일 때 — 이력은 건수 배지로만(칸이 좁아 칩이 밀리지 않게) */
.mh-ot-note--compact { margin-left: 6px; }
/* 행 배경 미세 톤 — 훑을 때 덩어리로 보이게. 상태 셀 색과 겹치지 않을 만큼만 옅게 */
.ops-tbl tbody tr.mh-trw.is-await { background: rgba(229, 72, 77, .045); }
.ops-tbl tbody tr.mh-trw.is-await:hover { background: rgba(229, 72, 77, .085); }

/* 회신 필요 배너 — 리스트 위 한 줄. 0건이면 뜨지 않는다. 새 알림을 만들지 않는 대신 보는 자리에 얹는다 */
.mh-awaitbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; padding: 9px 14px; font-size: 13px; color: var(--danger); background: var(--danger-soft); border-radius: var(--r-sm); }
.mh-awaitbar .ic { width: 15px; height: 15px; flex: none; }
.mh-awaitbar b { font-weight: 800; }
.mh-awaitbar--on { color: var(--text-muted); background: var(--surface-alt); }
.mh-awaitbar-btn { margin-left: auto; border: 0; font: 700 12.5px/1 inherit; font-family: inherit; color: #fff; background: var(--danger); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; }
.mh-awaitbar-btn:hover { filter: brightness(1.06); }
.mh-awaitbar--on .mh-awaitbar-btn { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgba(17,24,39,.12); }
/* 좁은 화면 — 부연은 접고 건수·경과만 남긴다(세 줄로 늘어져 버튼이 붕 뜨는 것 방지) */
/* 내 메일 칩 — 그룹칩 줄 맨 앞. 그룹함(색 도트)과 성격이 달라 아이콘 + 세로선으로 가른다 */
.mh-gfilter--mine { gap: 5px; margin-right: 8px; }
.mh-gfilter--mine .ic { width: 13px; height: 13px; }
.mh-awaitbar-narrow { display: none; }
@media (max-width: 640px) { .mh-awaitbar-more { display: none; } .mh-awaitbar-narrow { display: inline; } }
/* 코멘트·회신 모두 파란색 통일(2026-08-04 부장님 요청) */
.mh-ot-note-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--primary); font-weight: 600; }

/* 메시지 스택 — 카드형 */
.mh-msgs { flex: 1 1 auto; min-height: 0; padding: 12px 22px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.mg { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.mg--closed { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; min-width: 0; border-color: var(--border); box-shadow: none; }
.mg--closed:hover { background: var(--surface-2); }
.mg--closed .mg-from { flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-snippet { flex: 1 1 auto; font-size: 13px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-attdot { color: var(--text-faint); display: inline-flex; flex: none; }
.mg-attdot .ic { width: 14px; height: 14px; }
.mg-from { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.mg-from--out { color: var(--primary); }
.mg-addr { font-size: 12.5px; color: var(--text-faint); }
.mg-time { margin-left: auto; font-size: 12px; color: var(--text-faint); flex: none; }
/* 접힘 줄 맨 앞 시각 — 고정폭 우측정렬로 세로 타임라인처럼 정렬 */
.mg-time--lead { margin-left: 0; width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.mg--open { padding-bottom: 14px; }
.mg--open.mg--out { border-color: #CFDCFF; background: var(--primary-softer); }
.mg-head { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px 10px; cursor: pointer; }
.mg-head-main { flex: 1 1 auto; min-width: 0; }
.mg-to { font-size: 12.5px; color: var(--text-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-body { margin: 0 16px 0 54px; }
.mg-frame { width: 100%; height: 120px; border: 0; background: #fff; display: block; }
.mg-text { font: 14px/1.65 inherit; font-family: inherit; color: var(--text-strong); white-space: pre-wrap; word-break: break-word; margin: 0; }
.mh-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mh-att { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; font-family: inherit; }
.mh-att:hover { background: var(--surface-3); }
.mh-att .ic { width: 14px; height: 14px; color: var(--danger); }
.mh-att--ready { border-color: #BFE3CC; background: var(--success-soft); color: var(--success); }
.mh-att-size { color: var(--text-faint); font-size: 11px; font-weight: 400; }
.mh-att-state { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.mh-att-state--ok { color: var(--success); display: inline-flex; }
.mh-att-state--ok .ic { width: 12px; height: 12px; color: var(--success); }
.mh-att-state--fail { color: var(--danger); }

/* 발신 큐 진행 */
.mh-outbox { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text); background: var(--primary-soft); border-radius: var(--r-sm); padding: 9px 14px; }
.mh-outbox .ic { width: 15px; height: 15px; color: var(--primary); flex: none; }
.mh-outbox--failed { background: var(--danger-soft); }
.mh-outbox--failed .ic { color: var(--danger); }
.mh-outbox-text { flex: 1 1 auto; min-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-outbox-err { color: var(--danger); font-weight: 700; cursor: help; flex: none; }
/* 실패 회신 액션(다시 보내기·지우기) — 좁은 폭·모바일에서도 글자가 세로로 깨지지 않게 줄바꿈 금지·축소 금지 */
.mh-outbox .btn { flex: none; white-space: nowrap; padding: 5px 10px; font-size: 12px; }

/* 답장 알약 + 인라인 컴포즈 */
.mh-replybar { display: flex; gap: 10px; padding: 12px 22px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.mh-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 10px 20px; cursor: pointer; font-family: inherit; }
.mh-pill:hover { background: var(--surface-2); }
.mh-pill .ic { width: 15px; height: 15px; }
.mh-pill--primary { color: #fff; background: var(--primary); border-color: var(--primary); font-weight: 700; }
.mh-pill--primary:hover { background: var(--primary-strong); }
.mh-compose { margin: 6px 22px 16px; border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-sm); background: var(--surface); padding: 12px 16px 14px; }
.mh-compose-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-bottom: 8px; }
.mh-compose-head > .ic { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.mh-compose-from { border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--primary); max-width: 250px; cursor: pointer; font-family: inherit; }
.mh-compose-me { font-size: 13px; font-weight: 700; color: var(--text-strong); background: var(--primary-soft); border-radius: var(--r-pill); padding: 4px 12px; flex: none; white-space: nowrap; }
.mh-compose-summary { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font-size: 13px; color: var(--text-muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-align: left; font-family: inherit; }
.mh-compose-summary:hover { color: var(--text-strong); }
.mh-compose-summary .ic { width: 14px; height: 14px; flex: none; }
.mh-compose-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; padding: 5px; border-radius: 50%; flex: none; }
.mh-compose-x:hover { background: var(--surface-3); color: var(--text-strong); }
.mh-compose-x .ic { width: 16px; height: 16px; }
.mh-compose-fields { border-bottom: 1px solid var(--border); margin-bottom: 8px; padding-bottom: 4px; }
.mh-compose-fields.is-hidden { display: none; }
.mh-comp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mh-comp-row label { flex: none; width: 60px; font-size: 13px; color: var(--text-muted); }
.mh-comp-row input { flex: 1 1 auto; height: 30px; font-size: 14px; border: 0; border-bottom: 1px solid var(--border); color: var(--text-strong); background: none; min-width: 0; outline: 0; font-family: inherit; }
.mh-comp-row input:focus { border-bottom-color: var(--primary); }
/* 팀 사본 그룹 자동 선택 근거 — 왜 이 팀인지 한 줄. 라벨 폭(60px+gap 8px)만큼 들여 셀렉트에 맞춘다. */
.mh-nc-auto { margin: -2px 0 8px 68px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.mh-nc-auto b { font-weight: 700; color: var(--text-strong); white-space: nowrap; } /* 좁은 화면에서 팀명이 쪼개지지 않게 */
.mh-nc-auto-sub { color: var(--text-muted); opacity: .8; }
.mh-compose textarea { width: 100%; border: 0; outline: 0; font: 14px/1.65 inherit; font-family: inherit; color: var(--text-strong); padding: 6px 0 10px; resize: vertical; background: none; min-height: 120px; }
/* 컴포저 하단 서명 인라인(지메일식) — 발신 시 자동 첨부되는 서명을 그대로 표시(읽기 전용) */
.mh-compose-sig { border-top: 1px dashed var(--border-2); margin-top: 4px; padding: 8px 0 2px; }
.mh-compose-sig:empty { display: none; }
.mh-compose-sig table { pointer-events: none; }
/* 발신 첨부(120) — 컴포저 첨부칩 + 추가 버튼. 드래그오버 시 지메일식 하이라이트 */
.mh-compose.is-dragover, .mh-newcompose.is-dragover { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-soft); border-radius: var(--r-lg); }

.mh-oatts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0 8px; }
.mh-oatt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 8px 4px 10px; max-width: 320px; }
.mh-oatt .ic { width: 12px; height: 12px; flex-shrink: 0; }
.mh-oatt.is-up { opacity: .65; }
.mh-oatt em { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.mh-oatt-size { font-size: 11.5px; color: var(--text-faint); }
.mh-oatt button { display: inline-flex; border: 0; background: none; cursor: pointer; color: var(--text-faint); padding: 2px; border-radius: 50%; }
.mh-oatt button:hover { color: var(--danger); background: var(--surface-2); }
.mh-oatt button .ic { width: 11px; height: 11px; }
.mh-oatt-add { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: none; border: 1px dashed var(--border-2); border-radius: var(--r-pill); padding: 4px 12px; cursor: pointer; font-family: inherit; }
.mh-oatt-add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.mh-oatt-add .ic { width: 12px; height: 12px; }

/* 자주 쓰는 파일(145) — 첨부 줄 아래 칩. 한 번 눌러 붙인다. */
.mh-fav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 8px; }
.mh-fav-lb { font-size: 11.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .01em; margin-right: 2px; }
.mh-fav-chip { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.mh-fav-chip:hover { border-color: var(--primary); background: var(--primary-soft); }
.mh-fav-chip.is-on { border-color: var(--success); background: var(--success-soft); }
.mh-fav-go { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 inherit; font-family: inherit; color: var(--text-strong); background: none; border: 0; padding: 5px 4px 5px 6px; cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-fav-ic { font: 800 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .02em; color: #fff; background: var(--text-faint); border-radius: 3px; padding: 3px 4px; flex: none; }
.mh-fav-ic--pdf { background: #D93025; }
.mh-fav-ic--img { background: #8B36E0; }
.mh-fav-ic--xls { background: #16A34A; }
.mh-fav-ic--doc { background: #2D5BFF; }
.mh-fav-ic--zip { background: #E37400; }
.mh-fav-x { display: inline-flex; border: 0; background: none; cursor: pointer; color: var(--text-faint); padding: 5px 7px 5px 3px; }
.mh-fav-x:hover { color: var(--danger); }
.mh-fav-x .ic { width: 11px; height: 11px; }
.mh-fav-add { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 inherit; font-family: inherit; color: var(--text-muted); background: none; border: 1px dashed var(--border-2); border-radius: var(--r-pill); padding: 5px 11px; cursor: pointer; }
.mh-fav-add:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.mh-fav-add .ic { width: 12px; height: 12px; }
.mh-fav-add--ic { padding: 5px 7px; }
.mh-fav-msg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); }
.mh-fav-msg--err { color: var(--danger); }
.mh-fav-sk { display: inline-block; width: 92px; height: 24px; border-radius: var(--r-pill); background: var(--surface-3); }
.mh-fav-sk + .mh-fav-sk { width: 74px; }

/* 받는사람 자동완성(2026-08-13) — 주소록에서 이름·메일 몇 글자로 찾아 넣는다 */
.mh-ab { position: fixed; z-index: 1200; max-height: 292px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; }
.mh-ab-it { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; font-family: inherit; }
.mh-ab-it:hover, .mh-ab-it.is-on { background: var(--primary-soft); }
.mh-ab-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-softer); color: var(--primary-strong); font: 700 12px/1 inherit; flex: none; }
.mh-ab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mh-ab-nm { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ab-ad { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ab-it b { color: var(--primary-strong); font-weight: 800; }
.mh-ab-tag { font-size: 11px; color: var(--text-muted); background: var(--surface-3); border-radius: var(--r-pill); padding: 2px 8px; flex: none; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-ab-tag--in { color: var(--primary-strong); background: var(--primary-softer); }
.mh-ab-msg { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); padding: 10px 10px; }
.mh-ab-err { color: var(--danger); }

/* 좁은 폭(모바일 412)에서 줄바꿈 — wrap 이 없으면 버튼들이 찌그러져 글자가 세로로 꺾이고
   템플릿 셀렉트가 들어온 뒤로는 카드 밖으로 넘쳐 잘렸다(2026-09-03 렌더 실측).
   가로 스크롤 대신 줄바꿈인 이유 — 스크롤이면 '보내기'가 화면 밖으로 숨을 수 있다. */
.mh-compose-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; row-gap: 8px; padding-top: 6px; }
.mh-compose-actions > * { flex: none; }
/* 회신 템플릿 셀렉트(1-3) — 새 스킨을 만들지 않고 .btn 과 같은 형상(높이·테두리·반경)을
   토큰으로 따라가 액션 줄에 나란히 선다. 굵은 컬러 테두리 금지 규칙대로 1px var(--border-2). */
.mh-tplsel { padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 700; background: var(--surface); color: var(--text); border: 1px solid var(--border-2); font-family: inherit; cursor: pointer; }
.mh-tplsel:hover { background: var(--surface-2); }
.mh-sendbtn { background: var(--primary); color: #fff; border: 0; border-radius: var(--r-pill); font-size: 14px; font-weight: 700; padding: 10px 28px; cursor: pointer; font-family: inherit; }
.mh-sendbtn:hover { background: var(--primary-strong); box-shadow: var(--shadow-xs); }
.mh-sendbtn:disabled { background: var(--border-2); color: var(--text-faint); cursor: default; }
.mh-compose-note { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--success); font-weight: 600; border: 0; background: none; cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: var(--r-sm); }
.mh-compose-note:hover { background: var(--success-soft); }
.mh-compose-note .ic { width: 13px; height: 13px; }
.mh-compose-actions .btn .ic { width: 13px; height: 13px; }

/* ── 모바일 폴백 ── */
@media (max-width: 900px) {
  .mailhub { grid-template-columns: 1fr; height: auto; }
  .mh-main { min-height: 70vh; }
  .mh-list-bar { flex-wrap: wrap; }
  /* 세그 줄 — 탭이 7개(스누즈 포함)라 좁은 화면을 넘친다. 잘라내지 말고 가로 스크롤(표와 동일 처리) */
  .mh-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mh-search { order: 9; max-width: none; flex-basis: 100%; }
  .mh-syncline { display: none; }
  .mh-row-sender { width: 130px; }
  .mh-row-chips { display: none; }
  /* 스레드 표 — 좁은 화면은 표 모양 유지 + 가로 스크롤(업무 표와 동일 처리) */
  .mh-tbl-wrap { overflow-x: auto; }
  .mh-tbl { min-width: 940px; }
  .mh-replybar, .mh-compose { padding-left: 12px; margin-left: 12px; margin-right: 12px; }
  .mh-msgs { padding: 10px 12px 8px; }
  .mh-detail-head { padding: 12px 12px 0; }
  #mh-note-zone { padding: 8px 12px 0; }
}

/* ============================================================
   회의록 (.mtg-*) — 목록은 업무목록(.ops-tbl) 컴포넌트를 그대로 사용하고,
   회의록 고유 요소(KPI·툴바 보조·상세 문서)만 여기서 정의한다.
   ============================================================ */

/* ── 목록 루트 — 업무목록 페이지와 동일한 여백·타이포 ── */
.mtg-root { padding: 24px 28px; }
.mtg-header-row { display: flex; align-items: flex-start; gap: 12px; }
.mtg-root .edw-stk-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.mtg-root .edw-stk-desc { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.mtg-header-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.mtg-header { margin-bottom: 16px; }

/* 플라우드 봇 하트비트 줄 — 헤더 설명문 뒤에 붙는 상태 표시(메일 mh-syncline 룩 준용) */
.mtg-syncline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: 10px; font-size: 11.5px; color: var(--text-faint); }
.mtg-syncline .ic { width: 13px; height: 13px; }
.mtg-sync-err { color: var(--danger); display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }
/* 동기화가 끊겼을 때만 뜨는 복구 버튼 — 경고 옆에 붙는 인라인 링크 톤(굵은 컬러 테두리 금지 규칙) */
.mtg-sync-fix {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 1px 9px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; margin-left: 2px; white-space: nowrap;
}
.mtg-sync-fix:hover { background: var(--surface-2); }
/* 정상일 때의 로그인 버튼 — 있는 줄 모르게 조용히, 누르면 같은 모달. */
.mtg-sync-fix--quiet { border-color: transparent; color: var(--text-faint); font-weight: 500; }
.mtg-sync-fix--quiet:hover { border-color: var(--border); color: var(--text-muted); }

/* 플라우드 로그인 모달 — chat-modal 룩을 그대로 쓰고 폼 줄만 더한다 */
.plaud-login { width: 380px; }
.plaud-login .pl-body { padding: 14px 20px 4px; }
.plaud-login .pl-tabs { display: flex; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.plaud-login .pl-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.plaud-login .pl-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.plaud-login .pl-note { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted); white-space: pre-line; }
.plaud-login .pl-label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.plaud-login .pl-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-size: 13px;
}
textarea.pl-input { font-family: inherit; line-height: 1.4; resize: vertical; min-height: 76px; }
.plaud-login .pl-input:focus { outline: none; border-color: var(--primary); }
.plaud-login .pl-status { margin: 4px 0 0; font-size: 11.5px; color: var(--text-faint); min-height: 16px; }
/* 실패·안내 — 모달 안에서 보이게(토스트는 모달 뒤에 깔린다). */
.plaud-login .pl-status--err { color: var(--danger); font-weight: 600; }
.plaud-login .pl-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px 16px; border-top: 1px solid var(--border); margin-top: 8px;
}
@media (max-width: 520px) {
  /* 이 버튼이 흐름의 진입점이다 — 폰에서 눌러야 하므로 타겟을 키운다(19px → 30px).
     경고 문구와 함께 flex-wrap 으로 줄이 넘어가되, 각 항목은 통째로 넘어간다(nowrap). */
  .mtg-sync-fix { padding: 6px 13px; font-size: 12px; }
  .plaud-login { width: calc(100vw - 32px); }
  /* 폰에서 넣으라고 만든 화면이다 — 터치 타겟을 키우고, iOS 가 포커스 때 확대하지 않게 16px 로 둔다 */
  .plaud-login .pl-input { padding: 12px 12px; font-size: 16px; }
  .plaud-login .pl-tab { padding: 4px 2px 10px; font-size: 14px; }
  .plaud-login .pl-foot .btn { padding: 10px 18px; font-size: 14px; }
}

/* 분류 칩 줄 — 업무목록 상태칩과 동일 간격 */
.mtg-cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
.mtg-count { margin-left: 8px; font-size: 12px; color: var(--text-faint); white-space: nowrap; align-self: center; }

/* 표 감싸개 — 카드 톤(업무목록과 동일한 라운드·경계) */
.mtg-table-wrap {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow-x: auto;
}
.mtg-table-wrap .ops-tbl { min-width: 980px; }

/* 셀 변형 — .ot-cell 규약(높이 46px·패딩 12px) 위에 성격만 부여 */
.ops-tbl .ot-date-cell   { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ops-tbl .ot-dur-cell    { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ops-tbl .ot-people-cell { justify-content: flex-start; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.ops-tbl .ot-people-cell .ot-people-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-tbl .ot-memo-cell   { justify-content: flex-start; font-size: 12.5px; color: var(--text-muted); }
.ops-tbl .ot-memo-cell, .ops-tbl .ot-title-cell { overflow: hidden; }
.mtg-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.mtg-title-text:hover { color: var(--primary); text-decoration: underline; }
.mtg-slide-mark { flex-shrink: 0; cursor: default; }
.mtg-row--selected { background: var(--primary-softer, #EEF2FF); }

/* 행 작업 버튼 — 평소 숨김, hover/선택 시 노출(업무목록 핀 관행과 동일) */
.mtg-act-cell { gap: 4px; }
.mtg-act-btn { opacity: 0; transition: opacity .12s; padding: 3px 8px; font-size: 12px; }
.mon-row:hover .mtg-act-btn, .mtg-row--selected .mtg-act-btn { opacity: 1; }
.mtg-act-btn:focus-visible { opacity: 1; }

/* 로딩 스켈레톤 */
.mtg-skel {
  display: block; width: 100%; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3, #f7f8fa) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: mtg-skel-shimmer 1.2s ease-in-out infinite;
}
@keyframes mtg-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mtg-skel { animation: none; } }

/* 선택 작업바 — 선택 없으면 확실히 숨김 */
#meeting-bulkbar[hidden] { display: none !important; }

/* 툴바 드롭다운(필터·보기) */
.mtg-menu {
  position: absolute; z-index: 2400; min-width: 160px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 5px; display: flex; flex-direction: column;
}
.mtg-menu__item {
  padding: 9px 12px; font-size: 13px; text-align: left;
  background: none; border: 0; border-radius: 7px; cursor: pointer; color: var(--text);
}
.mtg-menu__item:hover { background: var(--surface-2); }
.mtg-menu__item.is-active { color: var(--primary); font-weight: 700; }
.mtg-menu__item.is-active::after { content: ' ✓'; }

/* ============================================================
   상세 — 문서 레이아웃
   ============================================================ */
.mtg-detail-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; min-height: 36px;
}
.mtg-back-btn {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  height: 34px; padding: 0 12px 0 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.mtg-back-btn:hover { background: var(--surface-2); color: var(--text); }
.mtg-back-btn svg { width: 16px; height: 16px; }
.mtg-detail-headline { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mtg-detail-title {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtg-detail-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mtg-detail-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mtg-detail-actions .btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* 수정 폼 */
.mtg-edit-form {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 16px;
  border: 1px solid var(--primary-soft, #C7D7FD); border-radius: 10px;
  background: var(--primary-softer, #EEF2FF);
}
.mtg-edit-form[hidden] { display: none; }
.mtg-edit-form__field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.mtg-edit-form__field--cat { flex: 0 0 130px; min-width: 130px; }
.mtg-edit-form__field > span { font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
.mtg-edit-form input, .mtg-edit-form select {
  height: 36px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.mtg-edit-form input:focus, .mtg-edit-form select:focus { outline: none; border-color: var(--primary); }
.mtg-edit-form .btn { height: 36px; }

/* 섹션 카드 */
.mtg-sec {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.mtg-sec-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; min-height: 52px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mtg-sec-title {
  margin: 0; flex: 1;
  font-size: 13px; font-weight: 700; color: var(--text-strong);
  letter-spacing: .01em; text-transform: none;
}
.mtg-sec-head > div[style] { margin-bottom: 0 !important; }
.mtg-sec-head .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }
.mtg-sec-body { padding: 18px 22px; }
.mtg-empty-inline { color: var(--text-muted); font-size: 13px; }

/* 요약 마크다운 — 플라우드 앱 문서 톤(큰 제목·넉넉한 행간·시원한 여백) */
.mtg-summary-md { font-size: 15.5px; line-height: 1.85; color: var(--text); letter-spacing: -.003em; }
.mtg-summary-md > :first-child { margin-top: 0 !important; }
.mtg-summary-md h1 {
  font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em;
  margin: 34px 0 16px; color: var(--text-strong);
}
.mtg-summary-md h2 {
  font-size: 21px; font-weight: 800; line-height: 1.4; letter-spacing: -.015em;
  margin: 32px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); color: var(--text-strong);
}
.mtg-summary-md h3 {
  font-size: 16.5px; font-weight: 700; line-height: 1.45;
  margin: 26px 0 10px; color: var(--text-strong);
}
.mtg-summary-md h4 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--primary); }
.mtg-summary-md p { margin: 0 0 14px; }
.mtg-summary-md ul, .mtg-summary-md ol { margin: 0 0 16px; padding-left: 22px; }
.mtg-summary-md li { margin-bottom: 10px; line-height: 1.8; }
.mtg-summary-md li::marker { color: var(--text-faint); }
.mtg-summary-md li > strong:first-child { color: var(--text-strong); }
.mtg-summary-md strong { font-weight: 700; color: var(--text-strong); }
.mtg-summary-md em { font-style: normal; color: var(--text-muted); }
.mtg-summary-md blockquote {
  margin: 0 0 16px; padding: 14px 18px;
  border-left: 3px solid var(--primary-soft, #C7D7FD); background: var(--surface-2);
  border-radius: 0 10px 10px 0; color: var(--text-muted);
}
.mtg-summary-md blockquote p:last-child { margin-bottom: 0; }
.mtg-summary-md a { color: var(--primary); word-break: break-all; }
.mtg-summary-md code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
  font-size: 13.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.mtg-summary-md hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
/* 본문 폭 — ch 단위는 한글에서 실제 폭이 과하게 계산돼 가로 넘침을 만든다.
   컨테이너를 꽉 채우되 절대 넘치지 않게 100%로 고정하고, 줄바꿈만 한글에 맞춘다. */
.mtg-sec-body > .mtg-summary-md { max-width: 100%; }
.mtg-summary-md { word-break: keep-all; overflow-wrap: anywhere; }
/* 상세 화면 전체 — 어떤 자식도 가로로 넘치지 않게 */
#meeting-detail-wrap { max-width: 100%; overflow-x: hidden; }
#meeting-detail-wrap .mtg-sec, #meeting-detail-wrap .mtg-sec-body { max-width: 100%; min-width: 0; }
.mtg-summary-md pre, .mtg-summary-md table { max-width: 100%; overflow-x: auto; }

/* 슬라이드 교안 카드 */
.mtg-slide-card {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; padding: 14px 18px;
  border: 1px solid var(--primary-soft, #C7D7FD); border-radius: 10px;
  background: var(--primary-softer, #EEF2FF);
}
.mtg-slide-card__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.mtg-slide-card__body { flex: 1; min-width: 0; }
.mtg-slide-card__title { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.mtg-slide-card__desc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mtg-slide-card .btn { height: 34px; padding: 0 16px; flex-shrink: 0; }

/* 발화 타임라인 — 대본처럼 읽히게. 시각은 왼쪽 기둥, 본문은 넓게, 도구는 hover에만. */
.mtg-timeline { display: flex; flex-direction: column; position: relative; }
/* 시각 열 왼쪽의 얇은 세로줄 — 흐름이 한 줄기로 보이게 */
.mtg-timeline:not(.mtg-timeline--nots)::before {
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 61px;
  width: 1px; background: color-mix(in srgb, currentColor 14%, transparent);
}
.mtg-seg {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 10px 10px 8px; margin: 0 -10px 0 -8px;
  border-radius: 8px; position: relative;
}
.mtg-seg + .mtg-seg { margin-top: 2px; }
.mtg-seg:hover { background: var(--surface-2, rgba(127, 127, 127, .06)); }

.mtg-seg-tscol { flex: 0 0 56px; padding-top: 2px; text-align: right; }
.mtg-timeline--nots .mtg-seg-tscol { display: none; }
.mtg-seg-ts {
  font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums;
  background: none; border: 0; padding: 2px 4px; cursor: pointer; border-radius: 5px;
}
.mtg-seg-ts:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

.mtg-seg-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.mtg-seg-speaker {
  display: inline-flex; align-items: center; margin-right: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  vertical-align: 2px;
}
.mtg-seg-head {
  display: block; margin: 14px 0 4px; font-size: 15px; font-weight: 700;
  color: var(--text-strong); letter-spacing: -.2px;
}
.mtg-seg:first-child .mtg-seg-head { margin-top: 0; }

/* 줄 도구 — 평소엔 숨고 hover·포커스에만. 읽을 땐 방해하지 않는다. */
.mtg-seg-tools {
  flex: 0 0 auto; display: flex; gap: 2px; opacity: 0;
  transition: opacity .12s ease; padding-top: 1px;
}
.mtg-seg:hover .mtg-seg-tools,
.mtg-seg:focus-within .mtg-seg-tools { opacity: 1; }
.mtg-seg-tool {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 6px; background: var(--surface, #fff);
  color: var(--text-muted); cursor: pointer; padding: 0;
}
.mtg-seg-tool svg { width: 14px; height: 14px; }
.mtg-seg-tool:hover { color: var(--text-strong); border-color: var(--border); }
.mtg-seg-tool--danger:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }

/* 한 줄 수정 */
.mtg-seg-edit { margin-top: 6px; }
.mtg-seg-input {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.7; padding: 8px 10px;
  border: 1px solid var(--primary); border-radius: 8px; background: var(--surface, #fff);
  color: var(--text-strong); resize: vertical;
}
.mtg-seg-edit-actions { display: flex; gap: 6px; margin-top: 6px; }

/* 여러 줄 정리 모드 */
/* 민감정보 표시 — 지우진 않고 눈에 띄게만. 판단은 사람이 한다. */
.mtg-seg--sensitive { box-shadow: inset 2px 0 0 var(--warning, #d97706); }
.mtg-seg-warn {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
}

/* 전사 본문에서만 걸린 검색 결과 — 왜 나왔는지 보여준다 */
.mtg-hit-hint {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  font-size: 11.5px; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

/* 등록된 업무로 가는 배지 링크 */
.mtg-ai-link { text-decoration: none; cursor: pointer; }
.mtg-ai-link:hover { filter: brightness(.94); }

/* AI 스캔 — [AI 요약 생성]·[할 일 추출] 중 전사를 훑고 있다는 걸 눈으로 보여준다 */
.mtg-scanning { position: relative; }
.mtg-scanning .mtg-seg { transition: background .25s ease, opacity .25s ease; opacity: .45; }
.mtg-scanning .mtg-seg--scan {
  opacity: 1;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--primary);
}
/* 할 일 추출 — 골라낸 줄은 잠시 초록으로 집어낸 표시 */
.mtg-scanning--pick .mtg-seg--hit {
  opacity: 1;
  background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--success, #16a34a);
}

/* 훑고 지나가는 빛줄기 — 전용 레이어 안에 가둔다(섹션 헤더로 새는 것 방지) */
.mtg-scan-wrap {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; border-radius: 8px;
}
.mtg-scan-beam {
  position: absolute; left: 0; right: 0; height: 84px; top: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--primary) 13%, transparent) 45%,
    color-mix(in srgb, var(--primary) 26%, transparent) 52%,
    transparent 100%);
  animation: mtg-scan-sweep 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.mtg-scanning--pick .mtg-scan-beam {
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--success, #16a34a) 13%, transparent) 45%,
    color-mix(in srgb, var(--success, #16a34a) 26%, transparent) 52%,
    transparent 100%);
}
@keyframes mtg-scan-sweep {
  0%   { top: -84px; }
  100% { top: 100%; }
}

/* 지금 뭘 하는 중인지 알려주는 떠 있는 라벨 */
.mtg-scan-badge {
  position: sticky; bottom: 8px; float: right; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: color-mix(in srgb, var(--primary) 88%, #000);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.mtg-scanning--pick .mtg-scan-badge { background: color-mix(in srgb, var(--success, #16a34a) 88%, #000); }
.mtg-scan-badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: mtg-prog-pulse 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mtg-scan-beam { animation: none; opacity: .5; }
  .mtg-scanning .mtg-seg { opacity: 1; }
}

/* 선택 모드에선 체크박스가 들어와 열이 밀리므로 세로 기둥을 감춘다 */
.seg-select-mode .mtg-timeline::before { display: none; }
.mtg-seg-chk { display: none; margin-top: 4px; flex: 0 0 auto; }
.seg-select-mode .mtg-seg-chk { display: block; }
.seg-select-mode .mtg-seg-tools { display: none; }
.mtg-seg-bulkbar[hidden] { display: none; }
.mtg-seg-bulkbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--danger, #dc2626) 7%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 28%, transparent);
}
.mtg-seg-bulkbar > span { flex: 1; font-variant-numeric: tabular-nums; }
.mtg-sec-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mtg-seg-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .mtg-root { padding: 14px 14px; }
  .mtg-detail-actions { margin-left: auto; }
  .mtg-detail-headline { flex-wrap: wrap; }
  .mtg-detail-title { white-space: normal; font-size: 17px; }
}
/* 작업 열 버튼 — 좁은 열에서 글자가 세로로 깨지지 않도록 */
.mtg-act-cell { flex-wrap: nowrap; }
.mtg-act-btn { white-space: nowrap; flex-shrink: 0; }
/* 요약·참석자 셀 — 넘치면 말줄임 */
.ops-tbl .ot-memo-cell, .ops-tbl .ot-people-cell .ot-people-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.ops-tbl .ot-memo-cell { line-height: 46px; }
/* 상태 셀 — 업무목록 색상 블록 규약에 회의록 '검토'(파랑) 추가 */
.ops-tbl .ot-status-cell.st-review { background: var(--primary); }

/* 정렬 가능 헤더 — 업무목록과 동일한 표시(평소 '-', 정렬 시 ▲▼) */
.mtg-table thead th[data-sortable] { cursor: pointer; user-select: none; }
.mtg-table thead th[data-sortable]:hover { background: var(--surface-3, var(--surface-2)); }
.mtg-sort-ind { margin-left: 4px; font-size: 10px; opacity: .45; }
.mtg-table thead th.is-sorted { color: var(--primary); }
.mtg-table thead th.is-sorted .mtg-sort-ind { opacity: 1; }
/* 섹션 안내문 — 기능 설명(무엇을 왜 하는지) */
.mtg-help { font-size: 12.5px; line-height: 1.7; color: var(--text-muted); margin-bottom: 12px; }
.mtg-help b { color: var(--text); font-weight: 700; }
.mtg-help-note { display: block; margin-top: 3px; font-size: 12px; color: var(--text-faint); }
/* 녹음 재생 카드 — 타임라인 시각 클릭으로 구간 점프 */
.mtg-audio-card {
  margin-bottom: 18px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.mtg-audio-card__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mtg-audio-card__title { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.mtg-audio-card__hint { font-size: 12px; color: var(--text-muted); }
.mtg-audio { width: 100%; max-width: 560px; height: 36px; }
.mtg-audio-loading { font-size: 12.5px; color: var(--text-muted); }
/* 처리중 행 — 왜 비어 있는지 안내(빈칸 위장 금지) */
/* 진행 표시 — 플라우드 봇의 단계(prog:*)를 사람이 읽는 문장으로 */
.mtg-processing {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--warning, #d97706); font-size: 12.5px; white-space: nowrap;
}
.mtg-processing--sm { font-size: 12px; }
.mtg-prog-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--warning, #d97706); animation: mtg-prog-pulse 1.2s ease-in-out infinite;
}
@keyframes mtg-prog-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .mtg-prog-dot { animation: none; } }
.mtg-prog-step {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); padding-left: 2px;
}

/* 상세화면 상단 진행 배너 */
.mtg-prog-banner {
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 35%, transparent);
  background: color-mix(in srgb, var(--warning, #d97706) 8%, var(--surface, #fff));
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.mtg-prog-banner__head { display: flex; align-items: center; gap: 8px; }
.mtg-prog-banner__label { font-size: 13.5px; font-weight: 600; color: var(--warning, #d97706); }
.mtg-prog-banner__note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.mtg-prog-bar {
  height: 5px; border-radius: 3px; margin-top: 9px; overflow: hidden;
  background: color-mix(in srgb, var(--warning, #d97706) 18%, transparent);
}
.mtg-prog-bar__fill {
  height: 100%; border-radius: 3px; background: var(--warning, #d97706);
  transition: width .4s ease;
}

/* ============================================================
   메일 서명 설정(135) — #mail-sig
   지메일 설정과 같은 좌(발신주소)·우(편집) 구성. 플랫 표 기조 + 1px 테두리 한 겹.
   ============================================================ */
.mhs-page { padding: 4px 0 40px; }
.mhs-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .mhs-grid { grid-template-columns: 1fr; } }

.mhs-side { border: 1px solid var(--border); border-radius: var(--r-lg, 10px); padding: 12px; background: var(--surface); }
.mhs-side-h { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 0 0 6px 2px; }
.mhs-note { font-size: 11.5px; color: var(--text-faint, var(--text-muted)); line-height: 1.6; margin: 0 2px 8px; }

.mhs-addr {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  padding: 8px 10px; margin-bottom: 2px; font-family: inherit; color: var(--text);
}
.mhs-addr:hover { background: var(--surface-2); }
.mhs-addr.is-sel { background: var(--primary-soft); border-color: var(--border); }
.mhs-addr-t { display: block; font-size: 13px; font-weight: 600; }
.mhs-addr-s { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.mhs-lgs { display: flex; gap: 4px; margin-top: 5px; }
.mhs-lgpill {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-faint, var(--text-muted));
}
.mhs-lgpill.is-on { background: var(--primary); color: #fff; }
.mhs-lgpill.is-auto { background: color-mix(in srgb, var(--primary) 45%, var(--surface-3)); }

.mhs-main { border: 1px solid var(--border); border-radius: var(--r-lg, 10px); padding: 14px 16px 16px; background: var(--surface); }
.mhs-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.mhs-tab {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--text-muted); padding: 7px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mhs-tab:hover { color: var(--text); }
.mhs-tab.is-on { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.mhs-tab b { font-size: 10.5px; font-weight: 700; color: var(--primary); }
.mhs-tab em { font-size: 10.5px; font-style: normal; color: var(--text-faint, var(--text-muted)); }
.mhs-htmltoggle { margin-left: auto; font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

.mhs-sync { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; line-height: 1.5; }
.mhs-sync svg, .mhs-sync .ic { width: 13px; height: 13px; flex-shrink: 0; }
.mhs-sync.is-ok { color: var(--success, #16a34a); }
.mhs-sync.is-wait { color: var(--warning, #d97706); }
.mhs-sync.is-bad { color: var(--danger, #d93025); }

.mhs-edit { min-height: 150px; max-height: 420px; }
.mhs-code {
  width: 100%; min-height: 200px; max-height: 420px; resize: vertical;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-input, var(--surface));
  color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6;
}
.mhs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mhs-dirty { font-size: 11.5px; color: var(--warning, #d97706); }

.mhs-prev-h { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px; }
.mhs-prev { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; background: var(--surface-2); overflow-x: auto; }
.mhs-prev table { border-collapse: collapse; }

.mhs-prefs { border: 1px solid var(--border); border-radius: var(--r-lg, 10px); padding: 12px 16px 14px; background: var(--surface); margin-top: 16px; }
.mhs-prefs-h { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
.mhs-prefs-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mhs-cb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.mhs-cb select { font-family: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }

/* 컴포저 서명 언어 칩(135) — 자동/고정 선택. 붙을 서명이 그 자리에서 바뀐다. */
.mh-siglangs { display: flex; align-items: center; gap: 4px; margin: 6px 0 2px; flex-wrap: wrap; }
.mh-siglangs-l { font-size: 11px; color: var(--text-faint, var(--text-muted)); margin-right: 2px; }
.mh-siglang {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-family: inherit; cursor: pointer;
}
.mh-siglang:hover { background: var(--surface-2); color: var(--text); }
.mh-siglang.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 서명 언어 대체 안내(135) — 고른 언어 서명이 없어 다른 것이 붙을 때. 조용히 넘어가지 않는다. */
.mh-siglang-warn {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--warning, #d97706); margin-left: 4px;
}
.mh-siglang-warn svg, .mh-siglang-warn .ic { width: 12px; height: 12px; flex-shrink: 0; }
.mh-siglang-warn button, .mh-siglang-warn a {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.mh-siglang-warn button:hover, .mh-siglang-warn a:hover { background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent); }
.mh-siglang-warn button[disabled] { opacity: .6; cursor: default; }

/* ══ 창고 단면도 (wms-section) — 랙을 정면에서 본 그림. 세로=단, 가로=열, 한 칸=자리 하나 ══
   🔴 격자는 **하나의 grid** 다. 단마다 grid 를 따로 두면 열 트랙이 줄마다 따로 계산돼
      위아래 열이 어긋난다(부장님 2026-09-16 "여전히 각 칸 크기가 안맞아").
   🔴 칸 옆 색깔 띠를 쓰지 않는다 — 좌측 색 액센트 바 금지(부장님 2026-09-16).
      단 색은 축의 작은 점으로만 남긴다. 색은 전부 토큰. */
.wsec-wrap { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 64px; }
.wsec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.wsec-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); margin: 0 0 4px; }
.wsec-desc { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 62ch; line-height: 1.5; }

.wsec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wsec-zones { display: flex; gap: 6px; flex-wrap: wrap; }
.wsec-allbtn { margin-left: auto; }
.wsec-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.wsec-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.wsec-seg button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

.wsec-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); padding: 18px 20px 16px; min-width: 0; }

/* 단면 격자 — 하나의 grid. 열 트랙과 줄 높이를 모든 단이 공유한다. */
.wsec-stage { --wsec-cellh: 84px; display: grid; grid-template-columns: 58px repeat(var(--wsec-cols, 6), minmax(112px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; align-items: stretch; }
@media (max-width: 720px) { .wsec-stage { grid-template-columns: 46px repeat(var(--wsec-cols, 6), minmax(100px, 1fr)); gap: 6px; } }

/* 단 축 — 숫자·화살표 + 작은 색 점(인쇄 라벨과 같은 색). 띠가 아니다. */
.wsec-axis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); position: sticky; left: 0; z-index: 2; }
.wsec-axis-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.wsec-axis b { font-size: 13px; font-weight: 800; color: var(--text-strong); line-height: 1; }
.wsec-axis span { font-size: 11px; font-weight: 700; color: var(--text-faint); line-height: 1; }
.wsec-axis--foot { background: transparent; border: 0; font-size: 11px; font-weight: 700; color: var(--text-faint); }

/* 칸 — 줄 높이를 꽉 채우고 내용이 넘쳐도 칸을 밀지 않는다 */
.wsec-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; min-height: 0; overflow: hidden; padding: 9px 11px; border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface-2); text-align: left; }
.wsec-cell[data-code] { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
.wsec-cell[data-code]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wsec-cell[data-code]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.wsec-cell-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.wsec-cell-top b { font-size: 14px; font-weight: 800; color: var(--text-strong); letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsec-cell-n { font-size: 22px; font-weight: 800; color: var(--text-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.wsec-cell-n small { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.wsec-cell-sub { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.2; min-height: 14px; white-space: nowrap; overflow: hidden; }
.wsec-cell-role, .wsec-cell-slots { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 1px 6px; }
.wsec-cell-slots { color: var(--text-muted); }

.wsec-cell--has { border-color: var(--heat-bd); background: var(--heat-bg); }
.wsec-cell--none { border-style: dashed; background: transparent; }
.wsec-cell--none .wsec-cell-top b, .wsec-cell--none .wsec-cell-sub { color: var(--text-faint); }
.wsec-cell--orphan { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.wsec-cell--orphan .wsec-cell-sub { color: var(--warning); font-weight: 700; }
.wsec-cell--void { border: 0; background: transparent; }

.wsec-colcap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 2px; }
.wsec-colcap b { font-size: 13px; font-weight: 800; color: var(--text); }
.wsec-colbtn { font: inherit; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.wsec-colbtn:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-softer); }
.wsec-colbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.wsec-ground { margin-top: 2px; border-top: 2px solid var(--border-2); text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); padding-top: 5px; }

/* 스켈레톤 — 로딩을 '0건'으로 위장하지 않는다 */
.wsec-stage--skel { grid-template-columns: repeat(7, 1fr); }
.wsec-scell { height: 84px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: wsec-shimmer 1.3s ease-in-out infinite; }
@keyframes wsec-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wsec-scell { animation: none; } .wsec-cell[data-code] { transition: none; } .wsec-cell[data-code]:hover { transform: none; } }

/* 안내문 — 로딩·빈·에러를 각각 다르게 */
.wsec-msg { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.wsec-msg-t { font-size: 15px; font-weight: 800; color: var(--text-strong); }
.wsec-msg-b { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.wsec-msg-sub { font-size: 12px; color: var(--text-faint); }
.wsec-msg-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.wsec-msg code { font-size: 12px; background: var(--surface-3); border-radius: 5px; padding: 1px 5px; }

/* 범례 */
.wsec-legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 14px; }
.wsec-legend-cap { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wsec-scale { display: flex; align-items: center; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.wsec-scale .seg { display: flex; align-items: center; padding: 6px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.wsec-key-empty { background: var(--surface-2); color: var(--text-muted); }
.wsec-key-none { background: transparent; color: var(--text-faint); border-left: 1px dashed var(--border-2); }
.wsec-legend-note { font-size: 11px; color: var(--text-faint); margin-left: auto; }
@media (max-width: 720px) {
  .wsec-legend { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wsec-legend-note { margin-left: 0; }
  .wsec-scale { max-width: 100%; overflow-x: auto; }
  .wsec-allbtn { margin-left: 0; }
}

/* 바닥 자리 */
.wsec-floors { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.wsec-sub { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--text-strong); }
.wsec-sub-desc { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); }
.wsec-floor-list { display: flex; gap: 8px; flex-wrap: wrap; }
.wsec-floor-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 128px; }
.wsec-floor-item b { font-size: 13px; font-weight: 800; color: var(--text-strong); }
.wsec-floor-item span { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wsec-floor-item small { font-size: 11px; color: var(--text-faint); }
/* 랙 밖 구역(입고대기·출하대기·반품·포장실) — 누르면 자리 상세. 부장님 2026-09-17 */
.wsec-floor-item[data-code] { cursor: pointer; }
.wsec-floor-item[data-code]:hover { border-color: var(--primary); }
.wsec-floor-item--role b { color: var(--primary); }
.wsec-floor-code { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; color: var(--text-strong) !important; }

/* ── 칸 상세 모달 — 우측 고정 패널을 없애고 크게 띄운다(부장님 2026-09-16) ── */
html.wsec-modal-open, body.wsec-modal-open { overflow: hidden; }
#wsec-modal-host { position: relative; z-index: 1200; }
.wsec-mo-back { position: fixed; inset: 0; z-index: 1200; background: rgba(17,24,39,.42); }
.wsec-mo { position: fixed; z-index: 1201; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px)); max-height: min(84vh, 860px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.wsec-mo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.wsec-mo-code { display: block; font-size: 26px; font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; line-height: 1.1; }
.wsec-mo-sub { font-size: 12.5px; color: var(--text-muted); }
.wsec-mo-x { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-sm); color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.wsec-mo-x:hover { background: var(--surface-2); color: var(--text); }
.wsec-mo-body { padding: 16px 20px 20px; overflow-y: auto; }
.wsec-mo-stat { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px; }
.wsec-mo-stat b { font-size: 24px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.wsec-mo-stat span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wsec-mo-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
.wsec-mo-note code { background: var(--surface-2); border-radius: 4px; padding: 1px 4px; }
.wsec-mo-list { list-style: none; margin: 10px 0 0; padding: 0; }
.wsec-mo-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; }
.wsec-mo-list li:last-child { border-bottom: 0; }
/* 품번 칩 — 자르지 않는다. 길면 줄바꿈해서라도 전부 보인다(부장님 2026-09-16 "품번 안 잘리게") */
.wsec-pi-code { grid-column: 1; min-width: 0; }
.wsec-pi-chip { display: inline-block; max-width: 100%; font-size: 14px; font-weight: 800; letter-spacing: .01em; color: var(--chip-item-fg); background: var(--chip-item-bg); border: 1px solid var(--chip-item-bd); border-radius: var(--r-sm); padding: 3px 9px; font-variant-numeric: tabular-nums; word-break: break-all; white-space: normal; }
.wsec-pi-name { grid-column: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-strong); line-height: 1.35; word-break: break-word; }
.wsec-pi-spec { grid-column: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); word-break: break-word; }
.wsec-pi-qty { grid-column: 2; grid-row: 1 / -1; align-self: center; font-size: 18px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wsec-pi-qty small { display: block; font-size: 10px; font-weight: 700; color: var(--text-faint); }

/* ── 칸 나누기 — 엑셀에서 셀 합치고 나누듯 끌어서 고른다(부장님 2026-09-16) ── */
.wsec-slots { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.wsec-slots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wsec-slots-head b { font-size: 13px; font-weight: 800; color: var(--text-strong); }
.wsec-slots-head span { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wsec-segwrap { display: flex; flex-direction: column; gap: 6px; }
.wsec-segrow { display: flex; align-items: stretch; gap: 8px; }
.wsec-segrow-lb { flex: 0 0 62px; display: flex; flex-direction: column; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.wsec-segrow-lb small { font-size: 10.5px; font-weight: 600; color: var(--text-faint); }
.wsec-segrow-x { flex: 0 0 auto; width: 28px; border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--r-sm); color: var(--text-faint); font-size: 12px; cursor: pointer; }
.wsec-segrow-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger-soft); }
.wsec-segrow-x:disabled { opacity: .4; cursor: not-allowed; }
.wsec-segs { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; padding: 5px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface-2); user-select: none; touch-action: none; }
.wsec-seg-cell { flex: 1 1 0; min-width: 0; height: 52px; border: 1px dashed var(--border-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.wsec-seg-cell:hover { border-color: var(--primary-soft); }
.wsec-seg-cell.sel { border-style: solid; border-color: var(--primary); background: var(--primary-softer); box-shadow: inset 0 0 0 1px var(--primary); }
.wsec-seg-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.wsec-slots-ctl { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wsec-slots-tip { font-size: 11.5px; color: var(--text-faint); }
.wsec-slots-warn { margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: var(--warning); line-height: 1.5; }
.wsec-slots-note { margin: 8px 0 0; font-size: 11px; color: var(--text-faint); line-height: 1.55; }
@media (max-width: 720px) { .wsec-seg-cell { height: var(--touch-min); } }

/* ══ 코그 필드링크 단면도 (kog-field, .kfs-*) — 랙 정면 그림. PC 단면도(.wsec-*)와 모델은 같고 껍데기는 현장 것 ══
   PC 와 같은 규칙 — 하나의 grid(열 정렬) · 칸 옆 색깔 띠 없음 · 대표 숫자는 품목 수. */
.kfs-stage { --kfs-cols: 6; --kfs-cellh: 62px; display: grid; grid-template-columns: 40px repeat(var(--kfs-cols), minmax(112px, 1fr)); gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 6px; margin-top: 10px; align-items: stretch; }

.kfs-axis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); position: sticky; left: 0; z-index: 2; }
.kfs-dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.kfs-axis b { font-size: 15px; font-weight: 800; color: var(--text-strong); line-height: 1; }
.kfs-axis span { font-size: 10px; font-weight: 700; color: var(--text-faint); line-height: 1; }
.kfs-axis--foot { background: transparent; border: 0; font-size: 11px; font-weight: 700; color: var(--text-faint); }

.kfs-cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: 100%; min-height: var(--touch-min); overflow: hidden; padding: 8px 9px; text-align: left; font: inherit; border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); }
button.kfs-cell { cursor: pointer; }
button.kfs-cell:active { transform: scale(.985); }
/* 두 줄 고정 — 윗줄 코드+역할, 아랫줄 품목 수·칸. 어느 줄도 접히지 않게 잘라낸다 */
.kfs-top { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.kfs-cell b { font-size: 14px; font-weight: 800; color: var(--text-strong); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfs-sub { display: block; width: 100%; min-width: 0; font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfs-sub em { font-style: normal; font-size: 15px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kfs-cell i { flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 6px; border: 1px solid var(--border-2); background: var(--surface); }
.kfs-role { color: var(--text); }

.kfs-cell--has { border-color: var(--heat-bd); background: var(--heat-bg); }
.kfs-cell--unknown { background: var(--surface); }
.kfs-cell--none { border-style: dashed; background: transparent; }
.kfs-cell--none b, .kfs-cell--none .kfs-sub { color: var(--text-faint); }
.kfs-cell--orphan { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }
.kfs-cell--orphan .kfs-sub { color: var(--warning); font-weight: 700; }
.kfs-cell--void { border: 0; background: transparent; padding: 0; min-height: 0; }

.kfs-colcap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 2px; }
.kfs-colcap b { font-size: 13px; font-weight: 800; color: var(--text); }
.kfs-prt { font: inherit; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 4px 10px; min-height: 30px; cursor: pointer; white-space: nowrap; }
.kfs-prt:active { background: var(--primary-softer); color: var(--primary); }
.kfs-ground { margin-top: 2px; border-top: 2px solid var(--border-2); text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-faint); padding-top: 5px; }

/* 랙 밖 구역 — 입고대기·포장·반품. 격자 밖이라 흐름으로 깔고, 칸 모양은 격자와 같게 쓴다(.kfs-cell 재사용) */
.kfs-off { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-2); }
.kfs-off-h { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--text-strong); }
.kfs-off-d { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.kfs-off-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

/* 라벨 발행 표의 코드 미리보기 — QR 만 / QR+바코드 (부장님 2026-09-18 "QR도 같이, 기본값은 QR") */
.wmsl-qr { display: inline-block; width: 44px; vertical-align: middle; }
.wmsl-qr svg { display: block; width: 100%; height: auto; }
.wmsl-prevpair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wmsl-prevpair > svg, .wmsl-prevpair > span:last-child { min-width: 0; }

.kfs-skel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.kfs-skel span { height: 52px; border-radius: var(--r-md); background: var(--surface-2); }

/* 단면도는 위자드가 아니다 — 넓은 화면에서 위자드 폭(540px)에 가두지 않는다.
   한눈에 보는 것이 이 화면의 요점이라 키오스크·태블릿 가로에서는 폭을 연다.
   `.edw-fstk-root` 자체는 건드리지 않는다 — 입고·출고·이동 위자드는 좁은 폭이 맞다. */
@media (min-width: 900px) {
  #kfs-root { max-width: min(1600px, 96vw); }
  .kfs-prt { min-height: 34px; font-size: 12px; }
}

/* 키오스크 — 24" 가로. 칸을 더 크게 잡아 통로에서 읽힌다 */
@media (min-width: 1200px) {
  .kfs-stage { --kfs-cellh: 74px; grid-template-columns: 54px repeat(var(--kfs-cols), minmax(140px, 1fr)); gap: 8px; }
  .kfs-cell { padding: 10px 12px; }
  .kfs-cell b { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────
   코그 메일 — 브라우저 '메뉴' 인쇄 폴백 (@media print)
   본 통로는 [인쇄] 버튼·Ctrl+P 가 여는 인쇄 문서 창이다(app/mail-print.js).
   메뉴 인쇄는 가로챌 수 없어, 스레드가 열려 있을 때만 앱 껍데기와 화면 장치를
   종이에서 내린다 — 이게 없으면 사이드바·탭·버튼째로 여덟 장이 나간다
   (2026-09-17 부장님). 목록 화면·다른 화면은 건드리지 않는다.
   ────────────────────────────────────────────────────────────── */
@media print {
  body.mh-thread-open #sidebar,
  body.mh-thread-open #sidebarToggle,
  body.mh-thread-open #topbar,
  body.mh-thread-open #m-topbar,
  body.mh-thread-open #ops-tabs,
  body.mh-thread-open #bottomnav,
  body.mh-thread-open #sticky-cta,
  body.mh-thread-open #ai-fab,
  body.mh-thread-open #ai-nudge,
  body.mh-thread-open .toasts,
  /* 메일 화면 자체의 조작 장치 — 종이에 나올 이유가 없다 */
  body.mh-thread-open .mh-proc,
  body.mh-thread-open .mh-backbtn,
  body.mh-thread-open .mh-ai-box,
  body.mh-thread-open .mh-arch-bar,
  body.mh-thread-open #mh-ctx-zone,
  body.mh-thread-open #mh-note-zone,
  body.mh-thread-open #mh-compose-zone,
  body.mh-thread-open #mh-newzone,
  body.mh-thread-open .mg-gmail,
  body.mh-thread-open .mg-ko-btn,
  body.mh-thread-open .mg-imgs-bar,
  body.mh-thread-open .mg-acts { display: none !important; }

  /* 스크롤 컨테이너를 풀어 준다 — 잠긴 높이는 첫 장에서 본문을 자른다 */
  body.mh-thread-open,
  body.mh-thread-open .app,
  body.mh-thread-open .app > .main,
  body.mh-thread-open #main-content,
  body.mh-thread-open .mailhub,
  body.mh-thread-open .mh-main,
  body.mh-thread-open .mh-msgs {
    display: block !important; height: auto !important; max-height: none !important;
    min-height: 0 !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #fff !important;
  }
  body.mh-thread-open .mh-detail-title { font-size: 15pt; font-weight: 700; margin-bottom: 10px; }
  body.mh-thread-open .mg { break-inside: auto; border: 0 !important; box-shadow: none !important; }
}

/* 자리 안 찍힌 용기 목록(현장앱 단면도) — 부장님 2026-09-18 "어떤걸 하고 어떤걸 안했는지, 너무 헷갈려".
   남은 일을 격자보다 먼저 보여 준다. 다 찍으면 목록이 비고 그것이 곧 완료 표시다(따로 저장하지 않는다). */
.kfs-todo { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.kfs-todo--done { background: var(--bg-2, #f6f7f9); }
.kfs-todo .kfs-off-h b { color: var(--primary, #3556E8); }
.kfs-todo-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kfs-todo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm n" "sub n";
  gap: 0 10px; align-items: center; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--border, #e5e7eb); border-radius: 9px; background: var(--surface, #fff); color: var(--text-strong, #111827); }
.kfs-todo-nm { grid-area: nm; font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfs-todo-sub { grid-area: sub; font-size: 12px; color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfs-todo-n { grid-area: n; font-size: 12px; color: var(--text-muted, #6b7280); text-align: right; }
.kfs-todo-n b { font-size: 19px; font-weight: 800; color: var(--text-strong, #111827); }
/* ── 라벨 스튜디오 (v5) — 부장님 2026-09-18 시안 승인 ──────────────────────────────
   4차가 "너무 난잡하고 조잡하다"로 반려된 뒤 **화면 구조부터** 다시 짠 것이다.
   시안: `_experiments/label-studio-v5-시안.html` · `_plans/2026-09-18_라벨에디터/시안_v5.md`
   색·반경·그림자는 전부 tokens.css 변수만 쓴다.
   반려 사유 다섯을 구조로 없앤다 —
   ① 도구줄 3층 → **얇은 한 줄** ② 같은 알약 20개 → 주/보조/아이콘 3위계
   ③ 문자 아이콘 → **SVG** ④ 오른쪽 카드 6장 → 지금 고른 것만 보는 Inspector
   ⑤ 도움말 문단 → 상태줄 한 줄 + flytip
   ───────────────────────────────────────────────────────────────────────── */
.ls5, .ls5 * { box-sizing: border-box; }
.ls5 { --z: 2.9; position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--surface); }

/* ── 앱바 — 한 줄. 상태(저장됨)와 주 행동이 여기 산다 ── */
.ls5-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.ls5-brand { font-size: 13px; color: var(--text-muted); white-space: nowrap; letter-spacing: -.01em; }
.ls5-brand b { font-weight: 800; color: var(--text-strong); }
.ls5-sp { flex: 1 1 auto; }

/* 종류 — 칩 세 개를 따로 두지 않고 한 덩어리 세그먼트로. 자리를 3분의 1로 줄인다 */
.ls5-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ls5-seg button { padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 0; border-radius: 6px; background: none; color: var(--text-muted); }
.ls5-seg button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs, 0 1px 2px rgba(17,24,39,.08)); }

.ls5-tpl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.ls5-tpl select { padding: 4px 8px; font: inherit; font-size: 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text-strong); max-width: 190px; }
/* 저장 상태 — 색만으로 말하지 않는다(색+글자 이중 표기) */
.ls5-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; color: var(--text-muted); }
.ls5-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ls5-state.dirty .ls5-dot { background: var(--warning); }

/* ── 단추 3위계 — 주 행동 · 보조 · 아이콘 전용. 전부 같은 알약이면 위계가 없다 ── */
.ls5-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-strong); }
.ls5-btn:hover { border-color: var(--primary); color: var(--primary); }
.ls5-btn--pri { border-color: var(--primary); background: var(--primary); color: #fff; }
.ls5-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  cursor: pointer; border: 0; border-radius: 7px; background: none; color: var(--text-muted); }
.ls5-ico:hover { background: var(--surface-2); color: var(--text-strong); }
.ls5-ico.on { background: var(--primary-soft); color: var(--primary); }
.ls5-ico svg { width: 16px; height: 16px; display: block; }

/* ── 3패널 ── */
.ls5-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr) 330px; }
.ls5-left { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.ls5-right { border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.ls5-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-2); }

/* 왼쪽 탭 — 요소·시안·레이어. 카드를 세로로 쌓지 않고 탭으로 나눈다 */
.ls5-tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--border); }
.ls5-tabs button { flex: 1; height: 34px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); }
.ls5-tabs button.on { color: var(--primary); border-bottom-color: var(--primary); }
.ls5-pane { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; }
.ls5-h { margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); text-transform: none; }
.ls5-h + .ls5-h { margin-top: 14px; }

/* 요소 팔레트 — 아이콘 + 이름. 끌어다 놓는 것이라 손잡이처럼 보이게 */
.ls5-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ls5-palbtn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px;
  font: inherit; font-size: 11px; font-weight: 600; cursor: grab;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-strong); }
.ls5-palbtn:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ls5-palbtn svg { width: 18px; height: 18px; color: var(--text-muted); }
.ls5-palbtn:hover svg { color: var(--primary); }

/* 레이어 — 위에 그려지는 것이 위로. 눈·자물쇠는 아이콘 전용 단추 */
.ls5-lay { display: flex; flex-direction: column; gap: 3px; }
.ls5-layrow { display: grid; grid-template-columns: 18px minmax(0,1fr) 24px 24px; align-items: center; gap: 6px;
  padding: 5px 6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: 12px; }
.ls5-layrow:hover { background: var(--surface-2); }
.ls5-layrow.on { border-color: var(--primary); background: var(--primary-soft); }
.ls5-layrow > svg { width: 14px; height: 14px; color: var(--text-muted); }
.ls5-layname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls5-layrow.off .ls5-layname { opacity: .45; text-decoration: line-through; }
.ls5-lico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 0; border-radius: 5px; background: none; color: var(--text-muted); cursor: pointer; }
.ls5-lico:hover { background: var(--surface-3); color: var(--text-strong); }
.ls5-lico svg { width: 13px; height: 13px; }

/* ── 도구줄 — 딱 한 줄. 여기 더 얹고 싶으면 다른 것을 빼야 한다 ── */
.ls5-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 38px; padding: 0 10px;
  border-bottom: 1px solid var(--border); background: var(--surface); }
.ls5-div { width: 1px; height: 18px; margin: 0 7px; background: var(--border); }
.ls5-zoom { display: inline-flex; align-items: center; gap: 2px; }
.ls5-zval { min-width: 44px; text-align: center; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* 캔버스 */
.ls5-stagewrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 22px; overflow: auto; }
.ls5-canvas { display: grid; grid-template-columns: 16px auto; grid-template-rows: 16px auto; }
.ls5-rul { position: relative; overflow: hidden; font-size: 7.5px; color: var(--text-muted); }
.ls5-rul-x { grid-column: 2; grid-row: 1; height: 16px; }
.ls5-rul-y { grid-column: 1; grid-row: 2; width: 16px; }
.ls5-tick { position: absolute; }
.ls5-rul-x .ls5-tick { top: 9px; width: 1px; height: 4px; background: var(--border-2, #d8dce3); }
.ls5-rul-x .ls5-tick.big { top: 3px; height: 9px; background: var(--text-muted); padding-left: 3px; line-height: 9px; }
.ls5-rul-y .ls5-tick { left: 9px; height: 1px; width: 4px; background: var(--border-2, #d8dce3); }
.ls5-rul-y .ls5-tick.big { left: 1px; width: 15px; height: 0; background: none; color: var(--text-muted); line-height: 8px; }
.ls5-rul-y .ls5-tick.big::before { content: ''; position: absolute; right: 0; top: 0; width: 9px; height: 1px; background: var(--text-muted); }
.ls5-stagebox { grid-column: 2; grid-row: 2; position: relative; }
.ls5-stage { position: relative; overflow: hidden; background: #fff; transform-origin: top left;
  box-shadow: 0 2px 14px rgba(17,24,39,.14); }
.ls5-safe { position: absolute; inset: 2mm; border: .1mm dashed rgba(45,91,255,.32); pointer-events: none; }
.ls5-selbox { position: absolute; outline: 1px dashed var(--primary); outline-offset: 1px; pointer-events: none; }
.ls5-hd { position: absolute; width: 9px; height: 9px; background: var(--primary); border: 1.5px solid #fff;
  border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.28); }
.ls5-guide { position: absolute; background: var(--danger); pointer-events: none; }

/* 상태줄 — 도움말 문단을 없앤 자리. 지금 상태만 짧게 */
.ls5-status { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 12px;
  border-top: 1px solid var(--border); background: var(--surface); font-size: 11.5px; color: var(--text-muted); }
.ls5-status b { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ls5-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); }
.ls5-ok svg { width: 12px; height: 12px; }

/* ── 오른쪽 — 위는 인쇄 대상(늘 보임), 아래는 Inspector(고른 것만) ── */
.ls5-sec { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.ls5-sec--grow { flex: 1 1 auto; min-height: 0; overflow: auto; border-bottom: 0; }
.ls5-search { position: relative; }
.ls5-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-muted); }
.ls5-in { width: 100%; height: 30px; padding: 0 9px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-strong); }
.ls5-search .ls5-in { padding-left: 29px; }
.ls5-hit { display: grid; grid-template-columns: minmax(0,1fr) 26px; gap: 6px; align-items: center;
  margin-top: 5px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; cursor: pointer; }
.ls5-hit.on { border-color: var(--primary); background: var(--primary-soft); }
.ls5-hit b { font-weight: 700; }
.ls5-hit span { display: block; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls5-bag { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 9px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-muted); }
.ls5-bag b { color: var(--text-strong); }
.ls5-bag .ls5-sp { flex: 1; }
.ls5-step { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ls5-step button { width: 24px; height: 26px; border: 0; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 14px; }
.ls5-step input { width: 34px; height: 26px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; font: inherit; font-size: 12px; background: var(--surface); color: var(--text-strong); }

/* Inspector — 고른 것만. 카드를 쌓지 않는다 */
.ls5-insphd { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.ls5-insphd svg { width: 14px; height: 14px; color: var(--text-muted); }
.ls5-insphd b { font-size: 12.5px; }
.ls5-insphd span { font-size: 11px; color: var(--text-muted); }
.ls5-f { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 8px; margin-bottom: 7px; }
.ls5-f > label { font-size: 11.5px; color: var(--text-muted); }
.ls5-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 9px; }
.ls5-nm { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: center; gap: 5px; }
.ls5-nm span { font-size: 11px; color: var(--text-muted); text-align: center; }
.ls5-nm .ls5-in { height: 28px; font-variant-numeric: tabular-nums; }
.ls5-row { display: flex; gap: 5px; margin-bottom: 9px; }
.ls5-grp { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ls5-grp button { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.ls5-grp button:first-child { border-left: 0; }
.ls5-grp button.on { background: var(--primary-soft); color: var(--primary); }
.ls5-grp button svg { width: 14px; height: 14px; }
.ls5-grp button b, .ls5-grp button i, .ls5-grp button u { font-size: 12px; }
.ls5-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.ls5-empty { padding: 18px 4px; font-size: 12px; line-height: 1.6; color: var(--text-muted); text-align: center; }

/* 🔴 아이콘 기본 크기 — 크기를 안 준 자리에서 svg 가 거대해진다(시안 1차에서 스캔 아이콘이 그랬다).
   아이콘은 어디에 놓이든 크기가 정해져 있어야 한다. */
.ls5 svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ls5-palbtn svg { width: 18px; height: 18px; }
.ls5-layrow > svg, .ls5-lico svg { width: 13px; height: 13px; }
.ls5-ok svg { width: 12px; height: 12px; }
/* 레이어 눈·자물쇠는 회색이 너무 옅어 안 보였다 — 한 단 진하게 */
.ls5-lico { color: var(--text-muted); opacity: .85; }
.ls5-layrow:hover .ls5-lico, .ls5-layrow.on .ls5-lico { opacity: 1; }

/* ── 좁은 화면 — 3패널을 줄이지 않는다. **다른 화면**을 준다 ────────────────────────
   계획서 §14 "412×915: 고급 편집보다 빠른 인쇄를 우선". 폰으로 요소를 끌어 배치할 일은 없다.
   폰에서 하는 일은 하나다 — 맞는 라벨인지 보고, 대상을 고르고, 찍는다.
   (데스크톱 레이아웃을 그대로 줄이면 칩이 세로로 쪼개지고 캔버스가 넘친다 — 1차 시안에서 그랬다.) */
.ls5-m { display: none; }
@media (max-width: 900px) {
  .ls5-m { --mz: 1.35; }
  .ls5-body, .ls5-tools { display: none; }
  .ls5-brand, .ls5-tpl, .ls5-state span { display: none; }
  .ls5-bar .ls5-btn span { display: none; }            /* 아이콘만 남긴다 */
  .ls5-bar .ls5-btn { padding: 0 9px; }
  .ls5-seg { flex: 0 0 auto; }
  .ls5-seg button { white-space: nowrap; padding: 5px 13px; font-size: 13px; }

  .ls5-m { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--surface-2); }
  .ls5-mprev { flex: 0 0 auto; display: grid; place-items: center; padding: 16px 12px; }
  .ls5-mprev .ls5-stage { box-shadow: 0 2px 14px rgba(17,24,39,.14); }
  .ls5-mtpl { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12.5px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
  .ls5-mtpl b { font-weight: 700; }
  .ls5-mtpl .ls5-sp { flex: 1; }
  .ls5-mlist { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px; background: var(--surface); }
  .ls5-mlist .ls5-hit { padding: 11px 12px; font-size: 13.5px; }        /* 터치 — 44px 이상 */
  .ls5-mlist .ls5-hit span { font-size: 12px; }
  .ls5-mlist .ls5-lico { width: 34px; height: 34px; }
  .ls5-mlist .ls5-in { height: 40px; font-size: 13.5px; }
  .ls5-mlist .ls5-search .ls5-in { padding-left: 34px; }
  .ls5-mbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px;
    border-top: 1px solid var(--border); background: var(--surface); }
  .ls5-mbar .ls5-step button { width: 36px; height: 40px; font-size: 17px; }
  .ls5-mbar .ls5-step input { width: 44px; height: 40px; font-size: 14px; }
  .ls5-mgo { flex: 1; height: 46px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    border: 0; border-radius: 10px; background: var(--primary); color: #fff; }
  .ls5-mnote { padding: 0 14px 10px; font-size: 11.5px; color: var(--text-muted); background: var(--surface); }
}

/* ── 라벨 스튜디오 — 렌더 검증에서 잡힌 것 (2026-09-18) ──────────────────────────────
   ① 8방향 손잡이 위치가 CSS 에 없어 전부 왼쪽 위에 겹쳐 하나로 보였다.
   ② '반전'은 두 글자라 30px 칸에서 세로로 쪼개졌다 — 글자 단추는 폭을 늘린다.
   ③ 안전 여백 점선과 선택 상자가 같은 파랑이라 구분이 안 됐다 — 여백은 더 옅고 가늘게. */
.ls5-hd-nw { left: -4.5px; top: -4.5px; cursor: nwse-resize; }
.ls5-hd-n  { left: 50%; top: -4.5px; margin-left: -4.5px; cursor: ns-resize; }
.ls5-hd-ne { right: -4.5px; top: -4.5px; cursor: nesw-resize; }
.ls5-hd-w  { left: -4.5px; top: 50%; margin-top: -4.5px; cursor: ew-resize; }
.ls5-hd-e  { right: -4.5px; top: 50%; margin-top: -4.5px; cursor: ew-resize; }
.ls5-hd-sw { left: -4.5px; bottom: -4.5px; cursor: nesw-resize; }
.ls5-hd-s  { left: 50%; bottom: -4.5px; margin-left: -4.5px; cursor: ns-resize; }
.ls5-hd-se { right: -4.5px; bottom: -4.5px; cursor: nwse-resize; }
.ls5-hd { pointer-events: auto; }
.ls5-selbox { pointer-events: none; }
.ls5-grp button.ls5-grp-w { width: auto; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.ls5-safe { border-color: rgba(45, 91, 255, .18); }
.ls5-selbox { outline-color: var(--primary); }
/* 잠긴 요소 — 끌리지 않는다는 것이 눈에 보여야 한다 */
.ls5-stage .lel[data-locked] { cursor: not-allowed; }
.ls5-stage .lel { cursor: move; }
.ls5-stage .lel.is-sel { outline: 1px dashed var(--primary); outline-offset: 1px; }

/* ── 라벨 스튜디오 — 시안에 없던 부분 (격자·시안 갤러리·로고·표·상태) ─────────────────
   시안 HTML 은 한 화면만 보여 주므로 탭을 바꾼 화면·빈 화면의 CSS 가 없었다.
   여기서 채운다. 색·반경은 토큰만 쓴다. */

/* 무대에 얹는 겹 — 전부 클릭을 통과시킨다. 격자·안전여백은 요소 밑, 안내선·올가미는 요소 위 */
.ls5-ov { position: absolute; inset: 0; pointer-events: none; }
.ls5-ov-under { z-index: 0; }
.ls5-ov-over { z-index: 5; }
.ls5-grid { position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(45, 91, 255, .13) .1mm, transparent .1mm),
    linear-gradient(to bottom, rgba(45, 91, 255, .13) .1mm, transparent .1mm); }
/* 올가미 — 걸치기만 해도 고른다 */
.ls5-marq { position: absolute; border: .1mm solid var(--primary); background: rgba(45, 91, 255, .10); }
.ls5-stage.has-border { outline: .3mm solid #000; outline-offset: -.3mm; }

/* 네 상태 — 로딩·표없음·에러. "조회 실패"와 "0건"을 구분한다 */
.ls5-msg { display: grid; place-content: center; gap: 12px; padding: 40px; text-align: center; }
.ls5-msg p { max-width: 460px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.ls5-msg b { color: var(--text-strong); }
.ls5-msg .ls5-btn { justify-self: center; }

/* 시안 갤러리 — 썸네일은 **진짜 라벨을 축소**해 그린다(따로 그림을 만들지 않는다) */
.ls5-gal { display: flex; flex-direction: column; gap: 6px; }
.ls5-gcard { display: flex; align-items: center; gap: 10px; padding: 7px 8px; text-align: left; cursor: pointer;
  font: inherit; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-strong); }
.ls5-gcard:hover { border-color: var(--primary); }
.ls5-gthumb { flex: 0 0 64px; height: 46px; overflow: hidden; border: 1px solid var(--border-2, #eceef2); background: #fff; }
.ls5-gti { position: relative; display: block; transform: scale(0.242); transform-origin: top left; }
.ls5-gname { font-size: 12px; font-weight: 600; }

/* 체크 줄 · 로고 고르기 · 표 칸 */
.ls5-chk { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; font-size: 12px; color: var(--text-muted); }
.ls5-loggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; }
.ls5-logbtn { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px;
  cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ls5-logbtn.on { border-color: var(--primary); background: var(--primary-soft); }
.ls5-logbtn svg { width: auto; height: auto; max-width: 100%; max-height: 28px; }
.ls5-cellgrid { display: grid; gap: 4px; margin: 4px 0 8px; }
.ls5-cell { height: 26px; font-size: 12px; padding: 0 6px; }

/* 상태줄 점검 — 통과는 조용히, 경고는 눌러서 그 요소로 간다 */
.ls5-bad { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer; border: 1px solid var(--warning); border-radius: var(--r-pill, 999px);
  background: var(--warning-soft, #FCEFD7); color: var(--warning); }
.ls5-bad:hover { filter: brightness(.97); }

/* Inspector 머리 — 겹침 순서 단추가 오른쪽 끝에 붙는다 */
.ls5-insphd .ls5-sp { flex: 1; }
.ls5-row { flex-wrap: wrap; align-items: center; }

/* 🔴 시안에는 없던 겹 — 제품은 `#ls5-main` 안에 화면을 갈아 끼운다(상태가 바뀌어도 앱바를 안 건드리게).
   그 겹이 flex 를 전달하지 않아 캔버스 아래가 뜨고 폰에서 라벨이 작아졌다(2026-09-18 렌더에서 잡혔다). */
#ls5-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ls5-body { flex: 1 1 auto; min-height: 0; }
/* 🔴 확대는 인라인 style 로 `.ls5` 에 박힌다 — 미디어쿼리로는 못 이긴다.
   그래서 폰 미리보기는 자기 변수(--mz)를 쓰고, 그 값을 `.ls5-m` 이 정한다. */
.ls5-m .ls5-stagebox, .ls5-m .ls5-stage { --z: var(--mz, 1.35); }