:root {
  font-family: "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: #253044;
  background: #f7f8fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #253044;
  --line: #e7eaf0;
  --blue: #416ea8;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 18px; line-height: 1.6; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
button, input, select, a { outline-offset: 4px; }
:focus-visible { outline: 3px solid #719bd4; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; left: 16px; top: 12px; transform: translateY(-150%); padding: 10px 16px; border-radius: 6px; background: white; box-shadow: 0 3px 20px #25304420; }
.skip-link:focus { transform: translateY(0); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 29px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 43px; border-radius: 11px; color: #fff; background: #416ea8; box-shadow: 0 3px 8px #416ea814; }
.brand-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.brand-caption { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 2.3px; color: #67707e; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; min-height: 44px; padding: 9px 16px; font-size: 15px; font-weight: 600; line-height: 1.6; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.button .icon { width: 18px; height: 18px; }
.button-secondary { background: #fff; border-color: #dce1e9; color: #455267; box-shadow: 0 1px 2px #25304404; }
.button-secondary:hover { background: #f5f7fa; border-color: #bcc8d8; }
.button-quiet { background: transparent; color: #66707f; }
.button-quiet:hover { color: #354b6b; background: #edf1f6; }
.button-icon { padding: 10px; min-width: 39px; background: #f5f7fa; color: #66707f; }
.button-icon:hover { background: #e9eef5; }

/* Device inventory */
.dashboard { display: block; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 13px 39px; background: #1c2b4b; }
.topbar .brand { font-size: 24px; color: #fff; }
.topbar .brand-mark { box-shadow: none; }
.topbar .brand-caption { color: #a9b8d3; }
.topbar .button { background: #26395f; border-color: #3d5482; color: #e8eef8; box-shadow: none; }
.topbar .button:hover { background: #2f4470; border-color: #4d6699; color: #fff; }
.account { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border: 1px solid #3d5482; border-radius: 50%; display: grid; place-items: center; color: #e8eef8; background: #2f4470; font-size: 16px; font-weight: 600; }
.account-name { line-height: 1.5; font-size: 16px; color: #e8eef8; }
.account .button { margin-left: 11px; min-height: 38px; padding: 6px 9px; font-size: 15px; }
.main-content { padding: 34px 39px 22px; max-width: 1600px; margin: 0 auto; outline: none; scroll-margin-top: 80px; }
.page-heading h1 { margin-top: 7px; font-size: 36px; letter-spacing: -.9px; line-height: 1.4; }
.page-heading p { color: #656f7e; font-size: 15px; margin-top: 7px; }
.page-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar .connection-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #3d5482; border-radius: 6px; background: #26395f; color: #c9d4e8; font-size: 15px; white-space: nowrap; }
.topbar .connection-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8fa3c4; }
.topbar .connection-status[data-state="connected"] { color: #9fdcb8; border-color: #3c6a55; background: #1f3a35; }
.topbar .connection-status[data-state="connected"]::before { background: #6fbf90; }
.topbar .connection-status[data-state="error"] { color: #f0a8a8; border-color: #6d3b3f; background: #3a2226; }
.topbar .connection-status[data-state="error"]::before { background: #d98a8a; }
.summary-strip { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #5f6c80; font-size: 15px; }
.summary-strip strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.inventory-panel { margin-top: 22px; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 3px #27395102; }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 22px 16px; }
.inventory-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.inventory-heading p { margin-top: 5px; color: #647082; font-size: 15px; }
.result-count { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 5px; color: #547198; background: #eef3fa; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.source-label { display: flex; align-items: center; gap: 6px; color: #627084; font-size: 15px; white-space: nowrap; }
.source-label .icon { width: 13px; height: 13px; }
.filter-bar { display: flex; gap: 9px; padding: 0 22px 19px; align-items: center; }
.search-field { position: relative; flex: 1; min-width: 170px; }
.search-field > .icon { position: absolute; top: 11px; left: 12px; width: 15px; height: 15px; color: #627084; pointer-events: none; }
.search-field input { width: 100%; height: 44px; padding: 8px 12px 8px 36px; border: 1px solid #e0e5ec; border-radius: 6px; background: #fbfcfd; font-size: 16px; color: #536177; }
.filter-select select { height: 44px; min-width: 133px; max-width: 100%; border: 1px solid #e0e5ec; border-radius: 6px; padding: 7px 28px 7px 11px; background-color: #fff; color: #637084; font-size: 16px; }
input::placeholder { color: #647081; opacity: 1; }
.checkbox-label { display: inline-flex; align-items: center; gap: 7px; color: #667081; font-size: 15px; white-space: nowrap; cursor: pointer; }
.checkbox-label input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.reset-button { padding-left: 7px; padding-right: 7px; font-size: 16px; }
.status-message { margin: 14px 1px 0; font-size: 16px; color: #627085; }
.status-message:empty { display: none; }
.table-region { position: relative; overflow-x: auto; width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 850px; text-align: left; }
th { padding: 11px 16px; background: #f7f9fb; border-top: 1px solid #edf0f5; border-bottom: 1px solid #e8edf2; color: #617084; font-weight: 500; font-size: 15px; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 22px; }
th:last-child, td:last-child { padding-right: 22px; text-align: right; }
td { padding: 14px 16px; font-size: 16px; color: #617084; border-bottom: 1px solid #eef1f5; vertical-align: middle; overflow-wrap: anywhere; max-width: 250px; }
td:first-child { color: #485b76; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfe; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: .1px; }
.badge { display: inline-block; padding: 3px 7px; border: 1px solid #e4e8ee; border-radius: 5px; background: #f7f9fb; color: #627082; font-size: 15px; line-height: 1.5; white-space: nowrap; }
.badge + .badge { margin-left: 5px; }
.badge.ok { border-color: #deeadf; color: #5a7563; background: #f4f9f5; }
.badge.warn { border-color: #eee5d7; color: #7b6d52; background: #fbf8f3; }
.muted { color: #637082; font-style: italic; }
.message-panel { min-height: 235px; padding: 34px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-top: 1px solid #edf0f5; }
.message-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f0f4f9; color: #597190; margin-bottom: 13px; }
.message-panel h3 { font-size: 16px; font-weight: 600; color: #5e6e84; }
.message-panel p { font-size: 16px; color: #617185; margin-top: 6px; max-width: 520px; overflow-wrap: anywhere; }
.message-panel .button { margin-top: 17px; }
.error-panel .message-icon { color: #926360; background: #fbf2f0; }
.inventory-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; padding: 12px 22px; border-top: 1px solid #eaeef3; color: #627084; font-size: 15px; background: #fefefe; }
.inventory-footer > span:last-child { display: flex; align-items: center; gap: 5px; }
.inventory-footer .icon { width: 11px; height: 11px; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; color: #627083; font-size: 15px; }
.page-footer strong { font-weight: 500; color: #617086; margin-left: 5px; }
.page-footer span > span { padding: 0 5px; }

/* Native detail dialog */
.device-dialog { width: 570px; max-width: 94vw; max-height: 88vh; padding: 0; border: 1px solid #dfe6ef; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 18px 80px #182d5030; overflow-y: auto; }
.device-dialog::backdrop { background: #24324765; backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin-top: 6px; font-size: 26px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.detail-fields { margin: 0; padding: 7px 27px; display: grid; grid-template-columns: 135px minmax(0, 1fr); font-size: 15px; }
.detail-fields dt, .detail-fields dd { padding: 12px 0; margin: 0; border-bottom: 1px solid #edf0f4; overflow-wrap: anywhere; }
.detail-fields dt { color: #627083; }
.detail-fields dd { color: #4d607b; }

@media (min-width: 1600px) {
  .main-content { padding-top: 44px; }
}
@media (max-width: 1150px) {
  .topbar { padding: 13px 26px; }
  .main-content { padding: 29px 26px 22px; }
  .page-actions { gap: 7px; }
  .filter-bar { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .filter-select { flex: 1; }
  .filter-select select { width: 100%; }
}
@media (max-width: 600px) {
  .topbar { padding: 11px 17px; gap: 9px 12px; }
  .topbar .brand { font-size: 21px; gap: 9px; }
  .topbar .brand-mark { width: 30px; height: 34px; border-radius: 9px; }
  .topbar .brand-mark svg { width: 20px; }
  .avatar, .account-name { display: none; }
  .account .button { margin: 0; padding: 6px 0 6px 6px; }
  .account .button .icon { width: 14px; height: 14px; }
  .main-content { padding: 25px 17px 20px; }
  .page-heading h1 { font-size: 34px; }
  .page-heading p { font-size: 16px; line-height: 1.8; }
  .page-actions .button { min-height: 35px; font-size: 16px; }
  .summary-strip { padding: 12px 14px; line-height: 1.9; }
  .inventory-heading { padding: 17px 15px 15px; gap: 8px; }
  .inventory-heading h2 { font-size: 18px; }
  .inventory-heading p { font-size: 15px; }
  .source-label { font-size: 14px; gap: 4px; }
  .source-label .icon { width: 11px; height: 11px; }
  .filter-bar { padding: 0 15px 15px; gap: 8px; }
  .filter-bar .checkbox-label { flex-basis: 100%; }   /* 줄을 넘겨야 '사용 여부' select가 안 찌그러진다 */
  .filter-select { min-width: 0; }
  .filter-select select { min-width: 0; padding-right: 17px; padding-left: 7px; font-size: 15px; }
  .reset-button { font-size: 15px; padding-left: 3px; padding-right: 3px; }
  .status-message { font-size: 15px; }
  .message-panel { padding: 27px 20px; min-height: 220px; }
  .message-panel h3 { font-size: 15px; }
  .message-panel p { font-size: 15px; }
  .unattached-panel { padding: 13px 15px; }
  .inventory-footer { padding: 11px 15px; font-size: 14px; gap: 8px; }
  .page-footer { margin-top: 19px; font-size: 14px; gap: 4px; flex-direction: column; }
  .dialog-header { padding: 22px 20px 17px; }
  .dialog-header h2 { font-size: 23px; }
  .detail-fields { padding-left: 20px; padding-right: 20px; grid-template-columns: 105px minmax(0, 1fr); font-size: 16px; }
  .motor-map { flex-direction: column; padding-left: 20px; padding-right: 20px; }
  .module-tree, .trail { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* S/N 클릭 → 팝업: 배치도 · 모듈 이력 트리 ↔ 센서 단계 */
.sn-button { background: none; border: 0; padding: 0; color: #315886; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.sensor-link, .crumb-link { background: none; border: 0; padding: 0; color: #315886; text-decoration: underline; text-underline-offset: 3px; }
.sn-button:hover, .sensor-link:hover, .crumb-link:hover { color: #1f3f66; }
#modules-table th:last-child, #modules-table td:last-child { text-align: left; }
#modules-rows tr { cursor: pointer; }
#modules-rows tr:focus-visible { outline: 3px solid #719bd4; outline-offset: -3px; }
.unattached-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line); background: #fbfcfd; font-size: 15px; }
.unattached-list { display: flex; gap: 8px; flex-wrap: wrap; }
.motor-map { display: flex; align-items: stretch; gap: 14px; padding: 20px 27px 6px; }
.bus-box { flex: 1.3; display: grid; place-items: center; align-content: center; gap: 9px; min-height: 104px; padding: 16px 12px; border-radius: 16px; background: var(--blue); color: #fff; font-size: 20px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.bus-box .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.motor-box { flex: 1; padding: 15px 10px; border: 1px solid #dce1e9; border-radius: 12px; background: #fff; color: #455267; font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.motor-box .icon { width: 28px; height: 28px; margin: 0 auto 9px; color: #5677a3; stroke-width: 1.5; }
.motor-box strong { display: block; font-size: 16px; font-weight: 600; color: #36445c; white-space: nowrap; }
.motor-side { display: block; margin-top: 2px; font-size: 14px; color: #5f6c80; white-space: nowrap; }
.motor-id { display: block; margin-top: 8px; font-size: 15px; color: #4d607b; }
.motor-box.empty { background: #f7f9fb; border-style: dashed; }
.motor-box.empty .icon { color: #637691; }
.motor-box.empty .motor-id { color: #5f6c80; }
button.motor-box:hover { background: #f0f5fb; border-color: #cbd8e9; }
.detail-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #5f6c80; flex-wrap: wrap; }
.module-tree, .trail { padding: 6px 27px 20px; }
#module-tree details { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; background: #fff; }
#module-tree summary { padding: 12px 15px; font-size: 15px; font-weight: 600; color: #36445c; cursor: pointer; }
.tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 15px 11px 30px; border-top: 1px solid #eef1f5; font-size: 15px; color: #4d607b; }
/* 모듈 트리의 들여쓰기는 <details> 밑이라 붙은 것 — <details>가 없는 센서 이력에는 필요 없다. */
#sensor-trail .tree-row, #sensor-trail .tree-empty { padding-left: 15px; }
.tree-moved { color: #8a6d3b; font-size: 14px; }
.tree-empty { padding: 11px 15px 11px 30px; border-top: 1px solid #eef1f5; color: #5f6c80; font-size: 15px; }