/* QR 출퇴근 관리 — 관리자 화면
   값은 「QR출퇴근관리 시안」(spec/mgmt.html) 의 인라인 스타일을 그대로 옮긴 것이다.
   시안은 모든 스타일이 인라인이라 읽기 어려우므로 같은 값을 클래스로만 묶었다. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F4F5F7; }
body {
  font-family: "Pretendard Variable", Pretendard, "맑은 고딕", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1F2430;
}
button { font: inherit; color: inherit; }
input, select { font: inherit; }
a { color: #0F766A; }
a:hover { color: #0B5A51; }

@keyframes omPop { from { opacity: 0; transform: translateY(4px) scale(.985); } to { opacity: 1; transform: none; } }

/* ==================================================================== 셸 */
.shell { display: flex; width: 1440px; min-height: 940px; margin: 0 auto; background: #F4F5F7; }

.side { width: 224px; flex: 0 0 224px; background: #2B3A55; padding: 26px 16px 40px; color: #C3CCDD; }
.side-title { font-size: 19px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em; padding: 0 6px; }
.side-hr { height: 1px; background: #47587A; margin: 18px 4px 20px; }
.side-group { margin-bottom: 6px; }
.side-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px;
  background: transparent; color: #FFFFFF; font-size: 14.5px; font-weight: 700;
}
.side-head.is-open { background: #FFFFFF; color: #2B3A55; }
.side-head .caret { margin-left: auto; font-size: 10px; opacity: .7; }
.side-items { display: flex; flex-direction: column; padding: 8px 0 4px; }
.side-item {
  display: flex; align-items: center; gap: 5px; padding: 7px 14px; border: 0; background: transparent;
  border-radius: 6px; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 500; color: #C3CCDD;
}
.side-item:hover { color: #FFFFFF; }
.side-item.is-here { font-weight: 700; color: #FF6B5E; text-decoration: underline; }
.side-item .dot { color: #E2574C; font-size: 13px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tabs {
  padding: 26px 20px 0; display: flex; align-items: flex-end; flex-wrap: nowrap;
  border-bottom: 1px solid #C9CFDA;
}
.tab {
  position: relative; display: flex; align-items: baseline; gap: 3px; padding: 11px 8px; margin-bottom: -1px;
  border: 1px solid #DCE0E8; border-bottom-color: #C9CFDA; border-radius: 5px 5px 0 0; margin-right: 1px;
  cursor: pointer; font-size: 12.5px; letter-spacing: -0.02em; flex: 0 0 auto; font-weight: 500;
  background: #EDEFF3; color: #5B6373; white-space: nowrap;
}
.tab:hover { filter: brightness(0.98); }
.tab.is-on { border-color: #C9CFDA; border-bottom-color: #F7F7F5; background: #F7F7F5; color: #1F2430; font-weight: 700; }
.tab .beta { font-size: 9.5px; font-weight: 800; color: #E2574C; letter-spacing: 0.02em; }

.body { flex: 1; background: #F7F7F5; padding: 20px 22px 44px; display: flex; flex-direction: column; gap: 14px; }
.page-head { display: flex; align-items: center; gap: 10px; }
.page-title { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.ghost-link {
  margin-left: auto; height: 32px; display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF; font-size: 12.5px; font-weight: 600;
  color: #4B5563; text-decoration: none; white-space: nowrap;
}
.ghost-link:hover { background: #F7F8F9; border-color: #C3C9D1; color: #4B5563; }

.subtabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #E1E4E8; }
.subtab {
  position: relative; padding: 0 2px 10px; border: 0; background: transparent; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: #5B6373; letter-spacing: -0.01em;
}
.subtab:hover { color: #0F766A; }
.subtab.is-on { font-weight: 700; color: #0F766A; }
.subtab .ul { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.subtab.is-on .ul { background: #0F766A; }

.screen { display: flex; flex-direction: column; gap: 14px; }

/* ================================================================= 공용 */
.card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; }
.card-head { padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 700; }
.card-sub { font-size: 12.5px; color: #6B7280; }
.spacer { margin-left: auto; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }
.pretty { text-wrap: pretty; }

.btn-primary {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { background: #0B5A51; }
.btn {
  height: 32px; padding: 0 12px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  font-size: 12.5px; font-weight: 600; color: #4B5563; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #F7F8F9; border-color: #C3C9D1; }
.btn-danger {
  height: 32px; padding: 0 14px; border: 1px solid #E6C7C2; border-radius: 8px; background: #FFFFFF;
  color: #A8443A; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: #FDF3F1; }
.is-off { opacity: .45; cursor: not-allowed; }

.inp {
  height: 32px; padding: 0 10px; border: 1px solid #D7DBE0; border-radius: 8px; font-size: 12.5px;
  background: #FFFFFF; color: #1F2430;
}
.sel {
  height: 32px; padding: 0 8px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  font-size: 12.5px; color: #1F2430;
}
.note { font-size: 12px; color: #6B7280; line-height: 1.55; text-wrap: pretty; }
.note-warn { font-size: 12px; color: #A8443A; line-height: 1.55; text-wrap: pretty; }
.label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #6B7280; }
.label .sub { font-weight: 600; color: #9AA1AB; }

.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.badge.ok { background: #E6F4EA; color: #1E7B34; }
.badge.warn { background: #FBF0DE; color: #8A5A12; }
.badge.bad { background: #FDECEA; color: #A8443A; }
.badge.info { background: #E7EDFA; color: #1B4FA8; }
.badge.mute { background: #EAECEF; color: #4B5563; }
.badge.teal { background: #DDF1ED; color: #0B5A51; }

.cb {
  display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px;
  border: 1px solid #C3C9D1; background: #FFFFFF; align-items: center; justify-content: center;
}
.cb.on { border-color: #0F766A; background: #0F766A; }
.cb.some { border-color: #0F766A; background: #CDEAE3; }
.cb .dash { width: 8px; height: 2px; background: #0F766A; border-radius: 2px; }

.radio {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0;
  cursor: pointer; font-size: 13px; color: #1F2430; white-space: nowrap; flex: 0 0 auto;
}
.radio .ring {
  display: inline-flex; width: 15px; height: 15px; border-radius: 999px; border: 1.5px solid #C3C9D1;
  align-items: center; justify-content: center;
}
.radio.on .ring { border-color: #0F766A; }
.radio .ring i { width: 7px; height: 7px; border-radius: 999px; background: #0F766A; display: none; }
.radio.on .ring i { display: block; }

/* 타일 */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px 16px; }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: #C3C9D1; }
.tile-k { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #6B7280; }
.tile-v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tile-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.tile-row .tile-v { margin-top: 0; }
.tile-side { font-size: 12.5px; font-weight: 600; color: #A8443A; font-variant-numeric: tabular-nums; }

/* 배너 */
.banner-soon {
  display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 1px solid #E5C58C;
  border-radius: 12px; padding: 11px 14px;
}
.banner-soon .pip { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #C88A1E; }
.banner-soon .txt { font-size: 13px; color: #6B4A10; line-height: 1.6; text-wrap: pretty; }
.banner {
  display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 11px 14px;
  font-size: 13px; line-height: 1.6; text-wrap: pretty;
  background: #E7EDFA; border: 1px solid #C6D4F0; color: #1B4FA8;
}
.banner.is-warn { background: #FBF0DE; border-color: #F0DDBC; color: #7A4A0E; }

/* 페이지네이션 */
.pager { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #E5E7EB; }
.pager .total { font-size: 12.5px; color: #6B7280; }
.pager .sel { height: 28px; font-size: 12px; }
.pager .nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pg {
  height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid #D7DBE0; border-radius: 8px;
  background: #FFFFFF; color: #4B5563; font-size: 12px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pg.on { border-color: #1F2430; background: #1F2430; color: #FFFFFF; }
.pg.arrow { width: 28px; padding: 0; font-weight: 400; }
.empty { padding: 22px 16px; font-size: 13px; color: #9AA1AB; text-align: center; }

/* ==================================================== 1. 위치 · QR 관리 */
.setblock { border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.setrow { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; }
.setrow + .setrow { border-top: 0; }
.setblock .setrow:first-child { border-bottom: 1px solid #F0F1F3; }
.setrow > .k {
  align-self: stretch; display: flex; align-items: center; padding: 12px 16px; background: #F7F8F9;
  border-right: 1px solid #F0F1F3; font-size: 13px; font-weight: 700; color: #1F2430;
}
.setrow > .v { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.setfoot { display: flex; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid #F0F1F3; }
.btn-save {
  height: 28px; padding: 0 18px; border: 0; border-radius: 6px; background: #0F766A; color: #FFFFFF;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.btn-save:hover { background: #0B5A51; }

.loc-split { display: grid; grid-template-columns: 1fr 400px; gap: 14px; align-items: start; }

.loc-cols { grid-template-columns: 1fr 0.85fr 50px 104px 148px; }
.loc-thead {
  display: grid; padding: 8px 14px; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #6B7280; background: #FFFFFF;
}
.grp-head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0;
  border-top: 1px solid #F0F1F3; background: #F7F8F9; cursor: pointer; text-align: left;
}
.grp-head:hover { background: #F0F2F4; }
.grp-head .rot { display: inline-block; transition: transform 120ms ease; }
.grp-head.open .rot { transform: rotate(90deg); }
.grp-head .branch { font-size: 13px; font-weight: 700; color: #1F2430; }
.grp-head .n { font-size: 12px; color: #6B7280; font-variant-numeric: tabular-nums; }
.grp-head .soon {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 700; background: #FFFFFF; border: 1px solid #E5C58C; color: #8A5A12;
}
.grp-head .expired {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 700; background: #FBF0DE; color: #8A5A12;
}
.loc-row {
  display: grid; align-items: center; padding: 9px 14px 9px 11px; border-top: 1px solid #F0F1F3;
  border-left: 3px solid transparent; cursor: pointer; font-size: 13px; background: transparent;
}
.loc-row:hover { background: #F7F8F9; }
.loc-row.on { border-left-color: #0F766A; background: #EDF3F2; }
.loc-row .c-name { padding-left: 14px; }
.loc-row .c-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #6B7280; }
.loc-row .c-mid { text-align: center; }
.btn-count {
  height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #0B5A51;
  font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.btn-count:hover { background: #DDF1ED; }
.c-method { text-align: center; font-size: 11.5px; font-weight: 600; color: #6B7280; }
.c-method.print { color: #8A5A12; }
.c-status { display: flex; align-items: center; justify-content: center; gap: 4px; }
.loc-foot { padding: 11px 14px; border-top: 1px solid #F0F1F3; font-size: 12px; color: #6B7280; line-height: 1.6; text-wrap: pretty; }

/* 우측 상세 패널 */
.panel-head { padding: 14px 16px 10px; }
.panel-head .nm { font-size: 15px; font-weight: 700; }
.panel-head .cd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.panel-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.panel-sec.divide { border-top: 1px solid #F0F1F3; padding-top: 12px; }
.mode-tabs { display: flex; gap: 6px; }
.mode-tab {
  flex: 1; height: 32px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  color: #5B6373; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.mode-tab:hover { border-color: #9FC9C2; }
.mode-tab.on { border-color: #9FC9C2; background: #EDF3F2; color: #0B5A51; font-weight: 700; }
.wide { width: 100%; height: 34px; font-size: 13px; }

.st-box {
  border: 1px solid #E5E7EB; background: #F7F8F9; border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.st-box .pip { width: 8px; height: 8px; border-radius: 999px; background: #4B5563; flex: 0 0 auto; }
.st-box .t { font-size: 13px; font-weight: 700; color: #4B5563; }
.st-box.ok { background: #E6F4EA; border-color: #BFE3C8; }
.st-box.ok .pip { background: #1E7B34; }
.st-box.ok .t { color: #1E7B34; }
.st-box.bad { background: #FDECEA; border-color: #F3C9C3; }
.st-box.bad .pip { background: #A8443A; }
.st-box.bad .t { color: #A8443A; }
.st-box.warn { background: #FBF0DE; border-color: #EBD8B4; }
.st-box.warn .pip { background: #8A5A12; }
.st-box.warn .t { color: #8A5A12; }

/* QR 미리보기 — 시안의 표시 단말 화면 게이지를 관리 화면 톤으로 옮겼다 */
.qr-view {
  border: 1px solid #E5E7EB; border-radius: 12px; background: #F7F8F9; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.qr-host { width: 180px; height: 180px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px; }
.qr-host svg { width: 100%; height: 100%; display: block; }
.qr-meter { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.qr-bar { height: 6px; border-radius: 999px; background: #E1E4E8; overflow: hidden; }
.qr-bar > i { display: block; height: 100%; border-radius: 999px; background: #0F766A; transition: width 240ms linear; }
.qr-cap { font-size: 12.5px; color: #4B5563; text-align: center; }
.qr-payload { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: #9AA1AB; font-variant-numeric: tabular-nums; word-break: break-all; text-align: center; }

.pair-row { display: flex; gap: 6px; align-items: center; }
.pair-in {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #D7DBE0; border-radius: 8px;
  font-size: 15px; letter-spacing: 0.14em; text-align: center; font-variant-numeric: tabular-nums;
}
.pair-btn {
  height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF;
  font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
}
.pair-btn:hover { background: #0B5A51; }
.pair-bound {
  flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; padding: 0 12px;
  background: #EDF3F2; border: 1px solid #CFE4E0; border-radius: 8px; font-size: 12.5px; color: #0B5A51;
}
.btn-unpair {
  height: 38px; padding: 0 12px; border: 1px solid #EBC7C1; border-radius: 8px; background: #FFFFFF;
  color: #A8443A; font-size: 12.5px; font-weight: 600; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
}
.btn-unpair:hover { background: #FDECEA; }
.pair-err { font-size: 11.5px; color: #A8443A; margin-top: 5px; line-height: 1.5; text-wrap: pretty; }
.btn-mini {
  height: 24px; padding: 0 9px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-mini:hover { background: #F7F8F9; border-color: #C3C9D1; }
.count-box {
  display: flex; align-items: baseline; gap: 8px; min-height: 38px; padding: 9px 12px;
  background: #F7F8F9; border: 1px solid #E5E7EB; border-radius: 8px;
}
.count-box .n { flex: 0 0 auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.count-box .n.none { color: #A8443A; }
.count-box .d { flex: 1; min-width: 0; font-size: 12px; color: #6B7280; line-height: 1.55; text-wrap: pretty; }
.row-gap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-sm { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-sm:hover { background: #0B5A51; }

/* ====================================================== 2. 사용자 배정 */
.bulk {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #DDF1ED;
  border-top: 1px solid #C6E5DE; font-size: 13px;
}
.bulk .lbl { color: #0B5A51; margin-left: 6px; }
.bulk .sel { height: 30px; border-color: #B9DCD4; }
.bulk .btn-t { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bulk .btn-t:hover { background: #0B5A51; }
.bulk .btn-o { height: 30px; padding: 0 12px; border: 1px solid #B9DCD4; border-radius: 8px; background: #FFFFFF; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bulk .btn-o:hover { background: #F7F8F9; }
.bulk .btn-x { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #0B5A51; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bulk .btn-x:hover { background: #CDEAE3; }

.wk-cols { grid-template-columns: 40px 96px 72px 92px 100px 148px minmax(0, 1fr); }
.wk-thead {
  display: grid; padding: 8px 14px; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #6B7280; align-items: center;
}
.wk-thead > div { text-align: center; }
.wk-thead > .cbcell { text-align: left; cursor: pointer; }
.wk-row {
  display: grid; align-items: center; padding: 8px 14px; border-top: 1px solid #F0F1F3;
  cursor: pointer; font-size: 13px; background: transparent;
}
.wk-row:hover { background: #F7F8F9; }
.wk-row.on { background: #F2FAF8; }
.wk-row > div { text-align: center; }
.wk-row > .cbcell { text-align: left; }
.wk-row .nm { font-weight: 700; }
.wk-row .dim { color: #4B5563; font-size: 12.5px; }
.wk-row .chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; background: #DDF1ED; color: #0B5A51;
}

/* ======================================================== 3. 인증 기록 */
.log-cols { grid-template-columns: 112px 70px 62px 76px 54px 1fr 104px 80px 88px 1fr; }
.log-thead {
  display: grid; padding: 8px 14px; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #6B7280;
}
.log-thead > div { text-align: center; }
.log-row {
  display: grid; align-items: center; padding: 8px 14px 8px 11px; border-top: 1px solid #F0F1F3;
  font-size: 13px; border-left: 3px solid transparent;
}
.log-row > div { text-align: center; }
.log-row .t { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #4B5563; font-variant-numeric: tabular-nums; }
.log-row .nm { font-weight: 600; }
.log-row .dim { color: #4B5563; font-size: 12.5px; }
.log-row .lc { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #9AA1AB; }
.log-row .gps { font-size: 12px; color: #6B7280; }
.log-row .gps.bad { color: #A8443A; }
.log-row .gps.na { color: #9AA1AB; }
.log-row .note { font-size: 12.5px; color: #6B7280; }
.log-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.log-tools .inp, .log-tools .sel { height: 28px; font-size: 12px; }
.log-tools .btn-run { height: 28px; padding: 0 14px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF; font-size: 12px; font-weight: 600; cursor: pointer; }
.log-tools .btn-run:hover { background: #0B5A51; }
.log-tools .hint { font-size: 11.5px; color: #9AA1AB; white-space: nowrap; }
.log-tools .vr { width: 1px; height: 18px; background: #E5E7EB; }
.fchip {
  height: 28px; padding: 0 12px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  color: #4B5563; font-size: 12px; font-weight: 600; cursor: pointer;
}
.fchip.on { border-color: #1F2430; background: #1F2430; color: #FFFFFF; }

/* =============================================================== 모달 */
.mask {
  position: fixed; inset: 0; background: rgba(20,32,30,.28); display: flex; align-items: center;
  justify-content: center; z-index: 50;
}
.mask.top { z-index: 60; }
.modal {
  background: #FFFFFF; border-radius: 18px; box-shadow: 0 14px 40px rgba(20,32,30,.14);
  animation: omPop 120ms ease-out; display: flex; flex-direction: column;
}
.modal.w520 { width: 520px; }
.modal.w480 { width: 480px; }
.modal.w560 { width: 560px; max-height: 640px; }
.modal.w420 { width: 420px; border-radius: 16px; padding: 20px; }
.modal-head { padding: 18px 20px 0; }
.modal-head .t { font-size: 17px; font-weight: 700; }
.modal-head .d { font-size: 12.5px; color: #6B7280; margin-top: 3px; }
.modal-form { padding: 16px 20px 4px; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { padding: 14px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; }
.modal-foot.spread { align-items: center; justify-content: flex-start; border-top: 1px solid #F0F1F3; padding: 12px 20px 18px; }
.f-lbl { font-size: 11.5px; font-weight: 700; color: #6B7280; margin-bottom: 4px; }
.f-lbl .req { color: #A8443A; }
.hr { height: 1px; background: #F0F1F3; }
.f-err { font-size: 11.5px; color: #A8443A; margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.f-note { font-size: 12px; color: #6B7280; margin-top: 5px; line-height: 1.6; text-wrap: pretty; }
.coord { padding: 8px 11px; background: #F7F8F9; border: 1px solid #E5E7EB; border-radius: 8px; font-size: 12.5px; color: #3F4650; font-variant-numeric: tabular-nums; }
.pc-toggle { display: flex; gap: 8px; }
.pc-toggle button {
  flex: 1; height: 32px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF;
  color: #4B5563; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pc-toggle button.on { border-color: #0F766A; background: #0F766A; color: #FFFFFF; }
.modal .del-t { font-size: 15px; font-weight: 700; }
.modal .del-b { font-size: 13px; color: #4B5563; line-height: 1.7; margin-top: 8px; text-wrap: pretty; }
.btn-del { height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: #A8443A; color: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-del:hover { background: #8E382F; }
.btn-modal { height: 32px; padding: 0 14px; border: 1px solid #D7DBE0; border-radius: 8px; background: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-modal:hover { background: #F7F8F9; }
.btn-modal-go { height: 32px; padding: 0 16px; border: 0; border-radius: 8px; background: #0F766A; color: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-modal-go:hover { background: #0B5A51; }

/* 출력 QR 인쇄 모달 */
.prt-sheet {
  border: 1px solid #D7DBE0; border-radius: 8px; padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.prt-sheet .nm { font-size: 15px; font-weight: 700; }
.prt-sheet .cd { font-size: 12px; color: #6B7280; font-family: ui-monospace, Menlo, Consolas, monospace; }
.prt-qr { width: 180px; height: 180px; margin: 4px 0; }
.prt-qr svg { width: 100%; height: 100%; display: block; }
.prt-sheet .lead { font-size: 13px; font-weight: 700; }
.prt-sheet .note { text-align: center; }
.prt-sheet .rev { font-size: 11.5px; color: #9AA1AB; font-variant-numeric: tabular-nums; }

/* 대상자 설정 모달 */
.pick-modes { padding: 12px 20px 0; display: flex; gap: 6px; }
.pick-mode {
  height: 30px; padding: 0 13px; border: 1px solid #D7DBE0; border-radius: 999px; background: #FFFFFF;
  color: #5B6373; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.pick-mode:hover { border-color: #9FC9C2; }
.pick-mode.on { border-color: #9FC9C2; background: #EDF3F2; color: #0B5A51; font-weight: 700; }
.pick-q { padding: 12px 20px 0; }
.pick-q .inp { width: 100%; height: 32px; font-size: 13px; }
.pick-q .n1 { font-size: 12px; color: #6B7280; margin-top: 6px; line-height: 1.55; text-wrap: pretty; }
.pick-q .n2 { font-size: 12px; color: #0B5A51; margin-top: 4px; line-height: 1.55; text-wrap: pretty; }
.pick-cards {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px 4px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
}
.pick-card {
  border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; padding: 12px 13px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.pick-card:hover { border-color: #9FC9C2; }
.pick-card.on { border-color: #9FC9C2; background: #F2FAF8; }
.pick-card .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.pick-card .tm { flex: 0 0 auto; font-size: 12.5px; color: #4B5563; font-variant-numeric: tabular-nums; }
.pick-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 20px 0; }
.tnode { border-top: 1px solid #F0F1F3; }
.tnode-hd { display: flex; align-items: center; gap: 8px; padding: 9px 0; }
.tnode-hd .cb { cursor: pointer; }
.tnode-hd .tw {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  padding: 0; font-size: 13.5px; font-weight: 700;
}
.tnode-hd .tw .caret { color: #9AA1AB; font-size: 10px; }
.tnode-hd .cnt { margin-left: auto; font-size: 12px; color: #9AA1AB; font-variant-numeric: tabular-nums; }
.tdept { padding-left: 22px; }
.tdept-hd { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.tdept-hd .cb { cursor: pointer; }
.tdept-hd .tw {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  padding: 0; font-size: 13px; font-weight: 700; color: #3F4650;
}
.tdept-hd .tw .caret { color: #9AA1AB; font-size: 10px; }
.tdept-hd .cnt { margin-left: auto; font-size: 12px; color: #9AA1AB; font-variant-numeric: tabular-nums; }
.tmembers { display: flex; flex-direction: column; padding-bottom: 6px; }
.tmember {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 24px; border-radius: 8px;
  cursor: pointer; background: transparent;
}
.tmember:hover { background: #F7F8F9; }
.tmember.on { background: #F2FAF8; }
.tmember .nm { font-size: 13px; color: #1F2430; }
.tmember .id { font-size: 12.5px; color: #9AA1AB; }
.tmember .other {
  margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: 6px; background: #FBF0DE; color: #7A4A0E; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pick-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mover-lead { font-size: 13px; line-height: 1.7; color: #3F4650; text-wrap: pretty; }
.mover-list { border: 1px solid #E5E7EB; border-radius: 12px; max-height: 220px; overflow-y: auto; }
.mover-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #F0F1F3; font-size: 13px; }
.mover-row .nm { font-weight: 600; }
.mover-row .fr { margin-left: auto; font-size: 12px; color: #6B7280; }
.mover-tail { font-size: 12.5px; color: #6B7280; line-height: 1.65; text-wrap: pretty; }

/* ============================================================== 토스트 */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #1F2430;
  color: #FFFFFF; border-radius: 999px; padding: 10px 20px; font-size: 13px; z-index: 70;
  animation: omPop 120ms ease-out; white-space: nowrap;
}