/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  AIVCA · automation.css — 화이트 테마 · 에디토리얼 구조 (v3)        ║
   ║                                                                     ║
   ║  cctvFUTURE/aivca-logistics/dashboard/automation.css 덮어쓰기.      ║
   ║  automation.js · automation_fragment.html · 백엔드 무수정.          ║
   ║  모든 .aw-* / data-aw-* 셀렉터 100% 보존 — 기능 그대로.            ║
   ║                                                                     ║
   ║  v3 구조 변화 (v2 대비):                                            ║
   ║   • 청록(teal) 단일 액센트 · 순백 캔버스 · 헤어라인 구분선          ║
   ║   • KPI = 큰 카드 → 얇은 인라인 통계 바                             ║
   ║   • 룰 목록 = 박스 카드 → 좌측 인덱스 레일 + 행 구분선 (리스트뷰)   ║
   ║   • 위저드 = 우측 패널 → 풀폭 스텝(가로 진행 막대) 중심             ║
   ║   • 라운드/그림자 절제, 타이포 위계로 구분                          ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ─── 1. Tokens ─────────────────────────────────────────────────── */
.automation-page {
  --aw-accent: #ff385c;            /* 메인 컬러 — 기존 레드 */
  --aw-accent-dark: #e31c5f;
  --aw-accent-soft: #fff0f4;
  --aw-accent-line: #f5c3d2;

  --aw-hot: #d8443f;               /* 발화/긴급만 따뜻한 색 */
  --aw-hot-soft: #fdecea;

  --aw-ink: #16191f;
  --aw-ink-2: #3b414d;
  --aw-muted: #767d8a;
  --aw-soft: #a3a9b5;

  --aw-line: #e7e9ee;              /* 헤어라인 */
  --aw-line-2: #f0f2f5;
  --aw-bg: #ffffff;
  --aw-panel: #ffffff;
  --aw-wash: #fafbfc;              /* 아주 옅은 영역 구분 */

  --aw-ok: #0e7c6b;     --aw-ok-bg: #e6f5f2;
  --aw-warn: #9a6400;   --aw-warn-bg: #fbf2e0;
  --aw-danger: #c0392b; --aw-danger-bg: #fbeae8;
  --aw-info: #2f5fd0;   --aw-info-bg: #eaf0fd;

  /* 동작 종류 — 좌측 인덱스 점 색만 다르게, 배경은 흰색 유지 */
  --aw-k-control:   #c0392b;
  --aw-k-zigbee:    #7b48c4;
  --aw-k-notify:    #2f5fd0;
  --aw-k-broadcast: #9a6400;
  --aw-k-set_state: #0e7c6b;

  --aw-r: 12px;
  --aw-r-sm: 8px;
  --aw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aw-t: 150ms;
  --aw-shadow: 0 1px 2px rgba(22, 25, 31, 0.04);
  --aw-shadow-pop: 0 16px 40px rgba(22, 25, 31, 0.14);
  --aw-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ─── 2. Reset ──────────────────────────────────────────────────── */
.automation-page, .automation-page * { box-sizing: border-box; }
/* :where() 로 명시도 0 \u2014 .aw-card / .aw-btn-primary 등 클래스 배경을 덮지 않도록 */
.automation-page :where(button) { font: inherit; color: inherit; cursor: pointer; background: transparent; border: 0; }
.automation-page a { color: var(--aw-accent); text-decoration: none; }
.automation-page [hidden] { display: none !important; }

/* ─── 3. Shell ──────────────────────────────────────────────────── */
.automation-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 60px;
  background: var(--aw-bg);
  min-height: 100%;
  color: var(--aw-ink);
  font-family: var(--font, Pretendard, "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.automation-page > * {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px)  { .automation-page > * { padding-left: 28px; padding-right: 28px; } }
@media (min-width: 1200px) { .automation-page > * { padding-left: 40px; padding-right: 40px; } }

/* ─── 4. Role strip ─────────────────────────────────────────────── */
.aw-role-strip {
  padding: 10px 16px;
  margin: 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--aw-muted);
  border-bottom: 1px solid var(--aw-line-2);
  background: var(--aw-wash);
}
@media (min-width: 768px)  { .aw-role-strip { padding-left: 28px; padding-right: 28px; } }
@media (min-width: 1200px) { .aw-role-strip { padding-left: 40px; padding-right: 40px; } }
.aw-role-strip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aw-accent);
}
.aw-role-badge { font-weight: 700; color: var(--aw-ink-2); }
.aw-role-badge.aw-role-readonly { color: var(--aw-warn); }

/* ─── 5. Page head — 얇은 헤더 + 인라인 통계 바 ─────────────────── */
.aw-page-head {
  display: grid;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--aw-line);
}
@media (min-width: 768px) { .aw-page-head { padding-top: 32px; padding-bottom: 26px; } }

.aw-title { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .aw-title { grid-template-columns: 1fr auto; align-items: center; gap: 28px; }
}
.aw-title-text { min-width: 0; }
.aw-eyebrow {
  font-size: 11px;
  color: var(--aw-accent);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.aw-h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  color: var(--aw-ink);
}
@media (min-width: 768px)  { .aw-h1 { font-size: 32px; } }
@media (min-width: 1200px) { .aw-h1 { font-size: 38px; } }
.aw-sub {
  margin: 12px 0 0;
  color: var(--aw-muted);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 680px;
}
.aw-title-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
@media (max-width: 767px) {
  .aw-title-actions { width: 100%; }
  .aw-title-actions > .aw-btn { flex: 1 1 220px; min-width: 0; white-space: normal; }
}

/* KPI = 인라인 통계 바 (얇은 행, 세로 구분선) */
.aw-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r);
  overflow: hidden;
  background: var(--aw-panel);
}
@media (min-width: 720px) {
  .aw-kpis { grid-template-columns: repeat(4, 1fr); }
}
.aw-kpi {
  position: relative;
  padding: 16px 18px;
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--aw-line-2);
  border-bottom: 1px solid var(--aw-line-2);
}
@media (min-width: 720px) { .aw-kpi { border-bottom: 0; } }
.aw-kpi:nth-child(2n) { border-right: 0; }
@media (min-width: 720px) {
  .aw-kpi { border-right: 1px solid var(--aw-line-2); }
  .aw-kpi:nth-child(2n) { border-right: 1px solid var(--aw-line-2); }
  .aw-kpi:last-child { border-right: 0; }
}
.aw-kpi-lbl {
  font-size: 11px;
  color: var(--aw-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  order: 2;
}
.aw-kpi-val {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--aw-ink);
  order: 1;
}
.aw-kpi-val-sm { font-size: 17px; line-height: 1.25; letter-spacing: -0.02em; }
.aw-kpi-fraction { font-size: 14px; color: var(--aw-soft); margin-left: 3px; font-weight: 600; }
.aw-kpi-note { font-size: 11.5px; color: var(--aw-soft); font-weight: 500; order: 3; margin-top: 2px; }
.aw-kpi-hot  .aw-kpi-val { color: var(--aw-hot); }
.aw-kpi-warn .aw-kpi-val { color: var(--aw-warn); }
.aw-kpi-ok   .aw-kpi-val { color: var(--aw-accent); }

/* ─── 6. Layout — 단일 컬럼 흐름 (위저드는 오버레이로 분리) ───────── */
.aw-2col-layout {
  display: block;
  padding-top: 24px;
}

/* ─── 7. Rules panel — 박스 제거, 리스트 뷰 ─────────────────────── */
.aw-rules-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.aw-panel-head {
  padding: 0 0 16px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid var(--aw-line);
}
.aw-panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--aw-ink);
}
.aw-panel-sub { margin: 5px 0 0; font-size: 13px; color: var(--aw-muted); font-weight: 500; }
.aw-panel-body { padding: 0; }
/* 룰 목록이 길어지면 패널 내부 스크롤 — 페이지 높이 억제(위저드 위치·페이지 전환 안정). */
.aw-rules-panel [data-aw-rule-list-body] { max-height: 62vh; overflow-y: auto; overflow-x: hidden; }
.aw-panel-foot {
  padding: 16px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--aw-line);
  display: flex;
  gap: 12px;
  justify-content: space-between; /* 왼쪽 버튼(이전/취소) ↔ 오른쪽 [다음단계] */
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Search — 밑줄 스타일 (박스 제거) */
.aw-search {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 0;
  border-bottom: 1.5px solid var(--aw-line);
  border-radius: 0;
  margin: 18px 0 8px;
  font-size: 14.5px;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767d8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") 2px 50% / 18px no-repeat;
  color: var(--aw-ink);
  transition: border-color var(--aw-t);
  font: inherit;
  min-height: 46px;
}
.aw-search::placeholder { color: var(--aw-soft); }
.aw-search:focus { outline: none; border-bottom-color: var(--aw-accent); }

.aw-empty {
  color: var(--aw-muted);
  padding: 48px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.aw-empty a { font-weight: 700; color: var(--aw-accent); }

/* Segmented — 밑줄 탭 스타일 */
.aw-seg {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.aw-seg-btn {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aw-muted);
  border-radius: 999px;
  letter-spacing: -0.01em;
  transition: background var(--aw-t), color var(--aw-t);
  min-height: 34px;
  white-space: nowrap;
}
.aw-seg-btn:hover { color: var(--aw-ink); background: var(--aw-line-2); }
.aw-seg-on {
  background: var(--aw-ink);
  color: #fff;
}
.aw-seg-on:hover { background: var(--aw-ink); color: #fff; }
.aw-seg-hot.aw-seg-on { background: var(--aw-hot); }
@media (max-width: 540px) {
  .aw-seg { width: 100%; }
  .aw-seg-btn { flex: 1; padding: 9px 4px; }
}

.aw-rules-foot { font-size: 12px; color: var(--aw-muted); font-weight: 600; }
.aw-rules-foot-count { font-variant-numeric: tabular-nums; }
.aw-rules-foot-dist { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── 8. Rule row — 리스트뷰 (좌측 상태 레일 + 헤어라인 구분) ─────── */
.aw-rule-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 18px 16px 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  border-radius: 0;
  margin: 0;
  background: var(--aw-panel);
  position: relative;
  transition: background var(--aw-t);
}
.aw-rule-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--aw-t);
}
.aw-rule-row:hover { background: var(--aw-wash); }
.aw-rule-row:hover::before { background: var(--aw-line); }
@media (min-width: 640px) {
  .aw-rule-row { grid-template-columns: 1fr auto; align-items: center; }
}

.aw-rule-row-main { display: grid; gap: 9px; min-width: 0; cursor: pointer; user-select: none; }
.aw-rule-row-caret {
  display: inline-block;
  font-size: 10px;
  color: var(--aw-soft);
  transition: transform var(--aw-t) var(--aw-ease);
  margin-right: 4px;
}
.aw-rule-row-open .aw-rule-row-caret { transform: rotate(90deg); }
.aw-rule-row-open { background: var(--aw-wash); }
.aw-rule-row-open::before { background: var(--aw-accent); }

/* Hot — 좌측 레일 빨강 + 점 */
.aw-rule-row.aw-rule-row-hot::before { background: var(--aw-hot); }
.aw-rule-row.aw-rule-row-hot .aw-rule-row-name::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aw-hot);
  margin-left: 8px;
  vertical-align: middle;
  animation: aw-hot-blink 1.6s ease-in-out infinite;
}
@keyframes aw-hot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .aw-rule-row.aw-rule-row-hot .aw-rule-row-name::after { animation: none; }
}

.aw-rule-row-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--aw-ink); line-height: 1.3;
}
.aw-rule-row-name { font-weight: 700; font-size: 16px; letter-spacing: -0.025em; color: var(--aw-ink); }
.aw-rule-row-id {
  font-family: var(--aw-mono);
  font-size: 11px;
  color: var(--aw-soft);
  font-weight: 500;
}
.aw-rule-state-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
.aw-rule-state-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.aw-rule-state-on  { background: var(--aw-accent-soft); color: var(--aw-accent-dark); }
.aw-rule-state-off { background: var(--aw-line-2); color: var(--aw-muted); }
.aw-rule-state-off::before { background: var(--aw-soft); }

.aw-rule-row-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.aw-rule-row-stats {
  font-size: 12.5px; color: var(--aw-muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex; gap: 16px; flex-wrap: wrap;
}
.aw-rule-row-stats strong { color: var(--aw-ink); font-weight: 700; }

.aw-rule-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
@media (max-width: 639px) {
  .aw-rule-row-actions { padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--aw-line-2); justify-content: flex-end; }
}

/* Toggle */
.aw-rule-toggle { display: inline-flex; align-items: center; cursor: pointer; position: relative; width: 42px; height: 24px; }
.aw-rule-toggle input[type="checkbox"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.aw-rule-toggle::before { content: ""; position: absolute; inset: 0; background: var(--aw-line); border-radius: 999px; transition: background var(--aw-t) var(--aw-ease); }
.aw-rule-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.22); transition: transform var(--aw-t) var(--aw-ease); }
.aw-rule-toggle:has(input:checked)::before { background: var(--aw-accent); }
.aw-rule-toggle:has(input:checked)::after { transform: translateX(18px); }
@supports not selector(:has(*)) {
  .aw-rule-toggle input[type="checkbox"] { opacity: 1; width: 18px; height: 18px; position: static; accent-color: var(--aw-accent); }
  .aw-rule-toggle::before, .aw-rule-toggle::after { display: none; }
  .aw-rule-toggle { width: auto; height: auto; }
}

/* Detail */
.aw-rule-row-detail {
  grid-column: 1 / -1;
  margin: 6px -16px -18px -20px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--aw-line-2);
  font-size: 13.5px;
  display: grid;
  gap: 12px;
  background: var(--aw-wash);
}
.aw-detail-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; }
.aw-detail-row-block { align-items: start; }
.aw-detail-lbl { font-size: 10.5px; font-weight: 700; color: var(--aw-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.aw-detail-val { color: var(--aw-ink); font-weight: 500; line-height: 1.6; }
.aw-detail-mono { font-family: var(--aw-mono); font-size: 11.5px; background: var(--aw-line-2); padding: 2px 8px; border-radius: 5px; color: var(--aw-ink-2); font-weight: 600; display: inline-block; }
.aw-detail-acts { margin: 2px 0 0; padding-left: 18px; color: var(--aw-ink); font-weight: 500; line-height: 1.85; }
.aw-detail-acts li { margin: 1px 0; }
.aw-detail-acts li::marker { color: var(--aw-accent); }
.aw-detail-empty { color: var(--aw-soft); font-style: italic; font-size: 12px; }
@media (max-width: 539px) {
  .aw-detail-row, .aw-detail-row-block { grid-template-columns: 1fr; gap: 4px; }
}

.aw-mark { background: var(--aw-accent-soft); color: var(--aw-accent-dark); padding: 0 3px; border-radius: 3px; font-weight: 700; }

/* ─── 9. Kind badges — 흰 배경 + 색 점 (테두리 없는 텍스트 칩) ────── */
.aw-kind-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 0;
  border-radius: 0;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  border: 0; background: transparent;
  color: var(--aw-ink-2);
  letter-spacing: -0.01em; white-space: nowrap;
}
.aw-kind-badge::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex-shrink: 0; }
.aw-kind-badge + .aw-kind-badge { margin-left: 14px; position: relative; }
.aw-kind-badge + .aw-kind-badge::after {
  content: "";
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--aw-line);
}
.aw-kind-control   { color: var(--aw-k-control); }
.aw-kind-zigbee    { color: var(--aw-k-zigbee); }
.aw-kind-notify    { color: var(--aw-k-notify); }
.aw-kind-broadcast { color: var(--aw-k-broadcast); }
.aw-kind-set_state { color: var(--aw-k-set_state); }
.aw-kind-meta { color: var(--aw-soft); }
.aw-kind-meta::before { background: var(--aw-soft); border-radius: 50%; }

/* footer dist 는 약간 박스형 유지 (가독) */
.aw-rules-foot-dist .aw-kind-badge { padding: 3px 0; }

/* ─── 10. Wizard — 풀 오버레이 (좌우 패널 → 중앙 시트) ───────────── */
.aw-wizard-panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

.aw-wizard-panel:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--aw-panel);
  /* 백드롭: box-shadow 로 패널 바깥을 어둡게 — z-index 트릭 없이 안정적 */
  box-shadow: 0 0 0 100vmax rgba(22, 25, 31, 0.48);
  animation: aw-slide-up var(--aw-t) var(--aw-ease);
}
@media (min-width: 880px) {
  .aw-wizard-panel:not([hidden]) {
    inset: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(840px, calc(100vw - 48px));
    height: min(88vh, 860px);
    border-radius: 18px;
    overflow: hidden;
    animation: aw-pop var(--aw-t) var(--aw-ease);
  }
}
@keyframes aw-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes aw-pop { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .aw-wizard-panel:not([hidden]) { animation: none; }
}

.aw-wizard-panel:not([hidden]) .aw-panel-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--aw-line);
  background: linear-gradient(180deg, #f3fbf9 0%, var(--aw-panel) 100%);
  flex-shrink: 0;
  align-items: center;
}
.aw-wizard-panel:not([hidden]) .aw-panel-head h2 { color: var(--aw-accent-dark); }
.aw-wizard-panel:not([hidden]) .aw-panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  background: var(--aw-wash);
}
.aw-wizard-panel:not([hidden]) .aw-panel-foot {
  flex-shrink: 0;
  padding: 14px 22px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--aw-line);
  margin-top: 0;
  background: var(--aw-panel);
}
.aw-panel-close {
  width: 38px; height: 38px;
  border-radius: var(--aw-r-sm);
  font-size: 20px; color: var(--aw-muted);
  display: grid; place-items: center;
  transition: background var(--aw-t), color var(--aw-t);
  flex-shrink: 0;
}
.aw-panel-close:hover { background: var(--aw-line-2); color: var(--aw-ink); }

/* ─── 11. Step indicator — 가로 진행 막대 (번호 + 라벨 일체형) ────── */
.aw-steps {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 6px;
  list-style: none;
  align-items: stretch;
}
.aw-step-chip {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--aw-line);
  color: transparent;
  font-size: 0;
  display: block;
  transition: background var(--aw-t) var(--aw-ease);
  position: relative;
}
.aw-step-num { font-size: 0; }
.aw-step-chip-on   { background: var(--aw-accent); }
.aw-step-chip-done { background: var(--aw-accent); }

.aw-step-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 11.5px;
  color: var(--aw-soft);
  margin: 10px 0 18px;
  font-weight: 600;
}
.aw-step-labels span { text-align: left; padding-right: 8px; }

.aw-step-summary {
  font-size: 13px;
  color: var(--aw-ink-2);
  min-height: 16px;
  margin-bottom: 24px;
  font-weight: 500;
  padding: 12px 16px;
  background: var(--aw-accent-soft);
  border-radius: var(--aw-r);
  line-height: 1.55;
}
.aw-step-summary:empty { display: none; }

.aw-step-body { min-height: 240px; animation: aw-step-in var(--aw-t) var(--aw-ease); }
@keyframes aw-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .aw-step-body { animation: none; } }

.aw-step-intro {
  font-size: 18px;
  color: var(--aw-ink);
  margin: 0 0 20px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-left: 12px;
  border-left: 4px solid var(--aw-accent);
}
.aw-step-intro em { font-style: normal; color: var(--aw-muted); font-weight: 500; font-size: 14px; }

/* ─── 12. Card groups (위저드 섹션) ─────────────────────────────── */
.aw-card-group { margin-bottom: 28px; }
.aw-card-group:last-child { margin-bottom: 0; }
.aw-card-group-title {
  font-size: 12.5px;
  font-weight: 800;
  margin: 0 0 14px;
  padding: 7px 12px;
  border-bottom: 0;
  border-radius: 999px;
  background: var(--aw-accent-soft);
  color: var(--aw-accent-dark);
  letter-spacing: 0.02em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ─── 13. Pick cards (카메라) — 좌측 정렬 라인 카드 ─────────────── */
.aw-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
@media (min-width: 768px) { .aw-card-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } }

.aw-card {
  position: relative;
  padding: 14px 14px 14px 16px;
  border: 1.5px solid var(--aw-line);
  border-radius: var(--aw-r);
  background: var(--aw-panel);
  cursor: pointer;
  transition: border-color var(--aw-t), background var(--aw-t), box-shadow var(--aw-t), transform var(--aw-t);
  text-align: left;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  font: inherit;
  color: inherit;
  box-shadow: var(--aw-shadow);
}
.aw-card:hover:not([disabled]) { border-color: var(--aw-accent); background: var(--aw-accent-soft); transform: translateY(-2px); }
.aw-card:active:not([disabled]) { transform: translateY(0); }
.aw-card[disabled] { opacity: 0.5; cursor: not-allowed; background: var(--aw-wash); }
.aw-card-selected,
.aw-card-selected:hover:not([disabled]) {
  border-color: var(--aw-accent);
  background: linear-gradient(135deg, var(--aw-accent) 0%, var(--aw-accent-dark) 100%);
  transform: none;
  color: #fff; /* 직속 텍스트 트리거 버튼(카메라/센서 사건·AI 시나리오) 선택 시 가독성 — .aw-card-title 미사용 케이스 */
}
.aw-card-selected .aw-card-title { color: #fff; }
.aw-card-selected .aw-card-sub { color: rgba(255,255,255,0.82); }
.aw-card-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--aw-ink); line-height: 1.3; }
.aw-card-sub { font-size: 11px; color: var(--aw-muted); font-weight: 500; line-height: 1.4; }
.aw-card-status { position: absolute; top: 10px; right: 10px; font-size: 11px; line-height: 1; }
.aw-card-check {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px;
  background: #fff; color: var(--aw-accent-dark);
  font-weight: 800; font-size: 13px;
  border-radius: 50%;
  display: grid; place-items: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--aw-accent);
}

/* ─── 14. Asset cards (Zigbee/Zone) — 라인 칩 ───────────────────── */
.aw-asset-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 14px;
  margin: 0 8px 8px 0;
  border: 1.5px solid var(--aw-line);
  border-radius: var(--aw-r);
  background: var(--aw-panel);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--aw-ink);
  min-height: 48px;
  box-shadow: var(--aw-shadow);
  transition: border-color var(--aw-t), background var(--aw-t), box-shadow var(--aw-t), transform var(--aw-t);
}
.aw-asset-card:hover { border-color: var(--aw-accent); background: var(--aw-accent-soft); transform: translateY(-1px); }
.aw-asset-selected,
.aw-asset-selected:hover {
  border-color: var(--aw-accent);
  background: linear-gradient(135deg, var(--aw-accent) 0%, var(--aw-accent-dark) 100%);
  color: #fff;
}
.aw-asset-meta { font-size: 11px; color: var(--aw-muted); font-weight: 500; }
.aw-asset-selected .aw-asset-meta { color: rgba(255,255,255,0.8); opacity: 1; }

.aw-alias-edit { display: inline-block; margin-left: 4px; padding: 0 2px; cursor: pointer; font-size: 11px; opacity: 0.4; transition: opacity var(--aw-t); }
.aw-alias-edit:hover { opacity: 1; }

.aw-divider { margin: 26px 0; border: 0; border-top: 1px solid var(--aw-line); }
.aw-toggle {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0;
  font-size: 14px; font-weight: 500;
  padding: 12px 14px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r);
  cursor: pointer;
  transition: border-color var(--aw-t), background var(--aw-t);
}
.aw-toggle:hover { border-color: var(--aw-accent-line); background: var(--aw-wash); }
.aw-toggle:has(input:checked) { border-color: var(--aw-accent); background: var(--aw-accent-soft); }
.aw-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--aw-accent); cursor: pointer; flex-shrink: 0; }
.aw-toggle input[type="range"] { flex: 1; min-width: 100px; accent-color: var(--aw-accent); }
.aw-toggle [data-aw-confidence-display] { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--aw-accent-dark); min-width: 44px; text-align: right; }

.aw-note { font-size: 12.5px; color: var(--aw-warn); padding: 12px 14px; background: var(--aw-warn-bg); border-radius: var(--aw-r); font-weight: 500; line-height: 1.55; }

/* Advanced metadata conditions — reuse wizard form/button tokens */
.aw-adv-cond-card { margin: 20px 0; }
.aw-adv-cond { display: grid; gap: 10px; }
.aw-adv-cond-list { display: grid; gap: 10px; }
.aw-adv-cond-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(110px, 0.8fr) minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r);
  background: var(--aw-panel);
}
.aw-adv-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-sm);
  font-size: 13.5px;
  background: var(--aw-panel);
  color: var(--aw-ink);
  transition: border-color var(--aw-t), box-shadow var(--aw-t);
  font: inherit;
  min-height: 42px;
}
select.aw-adv-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767d8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 36px;
}
.aw-adv-control:focus { outline: none; border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
.aw-adv-del { color: var(--aw-danger); min-width: 34px; }
.aw-adv-del:hover:not(:disabled) { border-color: var(--aw-danger); background: var(--aw-danger-bg); color: var(--aw-danger); }
@media (max-width: 720px) {
  .aw-adv-cond-row { grid-template-columns: 1fr; }
  .aw-adv-del { justify-self: end; }
}

/* ─── 15. Action rows (step 3) — 번호 레일 + 헤어라인 ───────────── */
.aw-action-add { margin-bottom: 22px; }
.aw-action-list { margin-top: 16px; display: grid; gap: 0; border-top: 1px solid var(--aw-line); }
.aw-action-row {
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  border-radius: 0;
  padding: 16px 14px 16px 0;
  background: transparent;
  position: relative;
  transition: background var(--aw-t);
}
.aw-action-row-head { display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.aw-action-num {
  font-weight: 700;
  width: 26px; height: 26px;
  background: var(--aw-accent);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.aw-action-label { font-weight: 700; color: var(--aw-ink); letter-spacing: -0.015em; font-size: 14.5px; }
.aw-action-summary { flex: 1; min-width: 0; color: var(--aw-muted); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
@media (max-width: 540px) {
  .aw-action-summary { width: 100%; order: 99; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--aw-line-2); }
}
.aw-action-row-form { margin-top: 14px; padding-top: 14px; padding-left: 36px; border-top: 1px dashed var(--aw-line-2); }
@media (max-width: 540px) { .aw-action-row-form { padding-left: 0; } }

/* Form rows */
.aw-form-row { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 6px; margin: 12px 0; font-size: 13px; }
@media (min-width: 600px) { .aw-form-row { grid-template-columns: 96px 1fr; align-items: center; gap: 14px; } }
.aw-form-label { color: var(--aw-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.aw-form-row input[type="text"],
.aw-form-row input[type="number"],
.aw-form-row input[type="search"],
.aw-form-row select,
.aw-form-row textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-sm);
  font-size: 13.5px;
  background: var(--aw-panel);
  color: var(--aw-ink);
  transition: border-color var(--aw-t), box-shadow var(--aw-t);
  font: inherit;
  min-height: 42px;
}
.aw-form-row select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767d8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-position: right 12px center; background-repeat: no-repeat; background-size: 16px;
  padding-right: 36px;
}
.aw-form-row input:focus, .aw-form-row select:focus, .aw-form-row textarea:focus {
  outline: none; border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft);
}
.aw-form-row textarea { min-height: 66px; resize: vertical; line-height: 1.5; }

.aw-cooldown-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--aw-soft); margin: 6px 2px; font-variant-numeric: tabular-nums; font-weight: 600; }
.aw-cooldown-num { width: 110px; padding: 10px 14px; border: 1px solid var(--aw-line); border-radius: var(--aw-r-sm); font-size: 13.5px; font-variant-numeric: tabular-nums; font: inherit; margin-top: 8px; min-height: 42px; background: var(--aw-panel); }
.aw-cooldown-num:focus { outline: none; border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
[data-aw-cooldown][type="range"] { width: 100%; accent-color: var(--aw-accent); margin: 4px 0 0; height: 6px; }

/* ─── 16. Step 4 — summary / test / save ────────────────────────── */
.aw-summary {
  background: var(--aw-wash);
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r);
  padding: 18px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
}
/* 접힘=한 줄(말줄임), 펼침=전체. 그라데이션 페이드 효과 제거(운영자 요청 2026-06-24). */
.aw-summary-body { overflow: hidden; line-height: 1.7; }
.aw-summary-body:not(.aw-summary-expanded) { white-space: nowrap; text-overflow: ellipsis; }
.aw-summary-body.aw-summary-expanded { white-space: normal; }

/* [더 보기] 펼침 — 룰 전체 상세 (어디서/무엇이/조건/동작/재발화) */
.aw-summary-detail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--aw-line); display: flex; flex-direction: column; gap: 7px; }
.aw-summary-detail[hidden] { display: none; }
.aw-sd-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; }
.aw-sd-k { flex: 0 0 76px; color: var(--aw-muted); font-weight: 700; }
.aw-sd-v { flex: 1; min-width: 0; color: var(--aw-ink); word-break: break-word; }

.aw-rule-meta { display: grid; gap: 16px; margin-bottom: 22px; }
.aw-rule-meta label { display: block; font-size: 13px; color: var(--aw-muted); font-weight: 600; }
.aw-rule-meta input, .aw-rule-meta textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-r-sm);
  font-size: 14px; margin-top: 8px;
  background: var(--aw-panel); color: var(--aw-ink);
  transition: border-color var(--aw-t), box-shadow var(--aw-t);
  font: inherit; min-height: 46px;
}
.aw-rule-meta input:focus, .aw-rule-meta textarea:focus { outline: none; border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
.aw-rule-meta textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.aw-test-block { margin: 24px 0; padding: 20px; border: 1px solid var(--aw-line); border-radius: var(--aw-r); background: var(--aw-wash); }
.aw-test-block .aw-card-group-title { margin-bottom: 14px; }
.aw-test-result { margin-top: 14px; padding: 12px 16px; border-radius: var(--aw-r-sm); font-size: 13px; font-weight: 600; line-height: 1.55; }
.aw-test-result-ok { background: var(--aw-accent-soft); color: var(--aw-accent-dark); }
.aw-test-result-fail { background: var(--aw-danger-bg); color: var(--aw-danger); }

.aw-save-row { display: grid; gap: 10px; margin-top: 22px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .aw-save-row { grid-template-columns: 1fr 1fr; } }

/* ─── 17. Buttons ───────────────────────────────────────────────── */
.aw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--aw-line);
  background: var(--aw-panel);
  border-radius: var(--aw-r-sm);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--aw-ink);
  transition: border-color var(--aw-t), background var(--aw-t), color var(--aw-t), box-shadow var(--aw-t), transform var(--aw-t);
  min-height: 42px; font: inherit; white-space: nowrap;
}
.aw-btn[hidden] { display: none !important; }
.aw-btn:hover:not(:disabled) { border-color: var(--aw-ink-2); background: var(--aw-wash); }
.aw-btn:active:not(:disabled) { transform: scale(0.97); }
.aw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.aw-btn-sm { padding: 7px 12px; font-size: 12.5px; min-height: 32px; border-radius: var(--aw-r-sm); gap: 4px; }
.aw-btn-primary {
  background: var(--aw-accent); color: #fff; border-color: var(--aw-accent);
  font-weight: 700;
}
.aw-btn-primary:hover:not(:disabled) { background: var(--aw-accent-dark); border-color: var(--aw-accent-dark); color: #fff; }
.aw-btn-selected { background: var(--aw-accent-soft); border-color: var(--aw-accent); color: var(--aw-accent-dark); }
.aw-btn-test-broadcast { color: var(--aw-accent); border-color: var(--aw-accent-line); font-weight: 700; }
.aw-btn-test-broadcast:hover:not(:disabled) { background: var(--aw-accent-soft); }
.aw-btn-test-force {
  background: var(--aw-hot); color: #fff; border-color: var(--aw-hot);
  font-weight: 700; padding: 12px 24px;
}
.aw-btn-test-force:hover:not(:disabled) { background: #b8362f; border-color: #b8362f; }
.aw-btn-test-force:disabled { background: var(--aw-soft); border-color: var(--aw-soft); color: #fff; }

/* ─── 18. PIN modal ─────────────────────────────────────────────── */
/* 모달은 document.body 에 mount 되어 .automation-page 스코프 밖 →
   필요한 토큰을 backdrop 에 직접 선언해 하위 요소(모달·버튼)가 상속하도록 함
   (디자인 핸드오프 참조 — var(--aw-panel) 미상속으로 모달 배경이 투명해지던 버그 수정) */
.aw-pin-modal-backdrop {
  --aw-accent: #ff385c; --aw-accent-dark: #e31c5f; --aw-accent-soft: #fff0f4; --aw-accent-line: #f5c3d2;
  --aw-hot: #d8443f;
  --aw-ink: #16191f; --aw-ink-2: #3b414d; --aw-muted: #767d8a; --aw-soft: #a3a9b5;
  --aw-line: #e7e9ee; --aw-wash: #fafbfc; --aw-panel: #ffffff;
  --aw-danger: #c0392b;
  --aw-r-sm: 8px; --aw-t: 150ms; --aw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aw-shadow-pop: 0 16px 40px rgba(22, 25, 31, 0.14);
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(22,25,31,0.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
  padding: 16px;
  animation: aw-fade var(--aw-t) var(--aw-ease);
}
.aw-pin-modal {
  background: var(--aw-panel);
  border-radius: 18px;
  padding: 26px;
  max-width: 460px; width: 100%;
  box-shadow: var(--aw-shadow-pop);
  animation: aw-pop-modal var(--aw-t) var(--aw-ease);
}
@keyframes aw-pop-modal { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aw-pin-modal-backdrop, .aw-pin-modal { animation: none; } }
.aw-pin-modal h4 { margin: 0 0 14px; color: var(--aw-hot); font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.aw-pin-modal-warning { font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; color: var(--aw-ink-2); }
.aw-pin-modal-actions { margin-bottom: 16px; padding: 14px 16px; background: var(--aw-wash); border-radius: var(--aw-r-sm); font-size: 12.5px; line-height: 1.7; font-weight: 500; border-left: 3px solid var(--aw-hot); }
.aw-pin-modal input[type="password"] { width: 100%; padding: 14px; border: 1px solid var(--aw-line); border-radius: var(--aw-r-sm); font-size: 22px; letter-spacing: 12px; text-align: center; font-variant-numeric: tabular-nums; background: var(--aw-panel); color: var(--aw-ink); min-height: 58px; }
.aw-pin-modal input[type="password"]:focus { outline: none; border-color: var(--aw-accent); box-shadow: 0 0 0 3px var(--aw-accent-soft); }
.aw-pin-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.aw-pin-error { color: var(--aw-danger); font-size: 13px; margin-top: 10px; font-weight: 600; text-align: center; }

/* ─── 18b. Confirm modal (실제 발화 시도 확인) ────────────────────── */
/* f83751ae(PIN 제거) 이후 confirm 모달 CSS 누락 → 오버레이가 문서 하단 in-flow 로
   렌더되던 회귀 복원. body mount(.automation-page 스코프 밖)라 --aw-* 토큰을
   backdrop 에 직접 선언(pin modal 패턴 동일, pin 의존 제거해 독립 유지). */
.aw-confirm-modal-backdrop {
  --aw-accent: #ff385c; --aw-accent-dark: #e31c5f; --aw-accent-soft: #fff0f4; --aw-accent-line: #f5c3d2;
  --aw-hot: #d8443f;
  --aw-ink: #16191f; --aw-ink-2: #3b414d; --aw-muted: #767d8a; --aw-soft: #a3a9b5;
  --aw-line: #e7e9ee; --aw-wash: #fafbfc; --aw-panel: #ffffff;
  --aw-danger: #c0392b;
  --aw-r-sm: 8px; --aw-t: 150ms; --aw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --aw-shadow-pop: 0 16px 40px rgba(22, 25, 31, 0.14);
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(22,25,31,0.55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
  padding: 16px;
}
.aw-confirm-modal {
  background: var(--aw-panel);
  border-radius: 18px;
  padding: 26px;
  max-width: 460px; width: 100%;
  box-shadow: var(--aw-shadow-pop);
  animation: aw-pop-modal var(--aw-t) var(--aw-ease);
}
@media (prefers-reduced-motion: reduce) { .aw-confirm-modal { animation: none; } }
.aw-confirm-modal h4 { margin: 0 0 14px; color: var(--aw-hot); font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.aw-confirm-modal-warning { font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; color: var(--aw-ink-2); }
.aw-confirm-modal-actions { margin: 0 0 16px; padding: 14px 16px; background: var(--aw-wash); border-radius: var(--aw-r-sm); font-size: 12.5px; line-height: 1.7; font-weight: 500; border-left: 3px solid var(--aw-hot); list-style-position: inside; }
.aw-confirm-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.aw-confirm-error { color: var(--aw-danger); font-size: 13px; margin-top: 10px; font-weight: 600; text-align: center; }

/* ─── 19. Status banner ─────────────────────────────────────────── */
.aw-status {
  padding: 12px 16px; margin: 8px 22px 0;
  border-radius: var(--aw-r-sm);
  font-size: 13px; font-weight: 600;
  background: var(--aw-accent-soft); color: var(--aw-accent-dark);
  animation: aw-step-in var(--aw-t) var(--aw-ease);
}
.aw-status[data-aw-status-kind="error"], .aw-status.aw-status-error {
  background: var(--aw-danger-bg); color: var(--aw-danger);
}

/* ─── 안전 규칙: button 리셋이 카드/버튼 배경을 덮지 못하도록 명시도 보강 ─── */
.automation-page button.aw-card { background: var(--aw-panel); }
.automation-page button.aw-card.aw-card-selected { background: linear-gradient(135deg, var(--aw-accent) 0%, var(--aw-accent-dark) 100%); }
.automation-page button.aw-asset-card { background: var(--aw-panel); }
.automation-page button.aw-asset-card.aw-asset-selected { background: linear-gradient(135deg, var(--aw-accent) 0%, var(--aw-accent-dark) 100%); }
.automation-page button.aw-btn-primary { background: var(--aw-accent); }
.automation-page button.aw-btn-test-force { background: var(--aw-hot); }

/* ─── 20. Focus / print ─────────────────────────────────────────── */
.automation-page :focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; border-radius: var(--aw-r-sm); }
@media print {
  .aw-wizard-panel, .aw-panel-foot, .aw-rule-row-actions, .aw-panel-close { display: none !important; }
  .aw-rule-row-detail { display: block !important; }
}

/* ─── 21. 저장소 호환 보강 (v3 drop-in 누락분 복원 — 기능/관리자 UI 무손실) ─────
   아래 3종은 automation_fragment.html · automation.js 가 실제 사용하나 v3 본문에
   정의가 없어, 기존 automation.css 의도를 v3 토큰으로 복원한다. 마크업/JS 무수정. */

/* 페이지 헤더: 액션 전용 타이틀 행 우측 정렬 (fragment .aw-title.aw-title-action-only) */
.aw-title-action-only { display: flex; justify-content: flex-end; }

/* 일괄 삭제 버튼 (admin 전용 · 기본 hidden) — 위험 액션 강조 */
.aw-btn-danger {
  background: var(--aw-danger); color: #fff; border-color: var(--aw-danger);
  font-weight: 700;
}
.aw-btn-danger:hover:not(:disabled) { background: #a5301f; border-color: #a5301f; color: #fff; }
.aw-btn-danger:disabled { background: var(--aw-soft); border-color: var(--aw-soft); color: #fff; }

/* 일괄 선택 체크박스 래퍼 (admin 멀티 선택) */
.aw-rule-bulk-select { display: inline-flex; align-items: center; cursor: pointer; padding: 0 4px 0 0; }
.aw-rule-bulk-select input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--aw-danger); }

/* 룰 동작 한 줄 요약 (룰명 밑) — '새 자동화' 4단계 요약 인라인 노출. 2줄 클램프. */
.aw-rule-row-summary {
  font-size: 13px;
  color: var(--aw-ink-2);
  font-weight: 500;
  line-height: 1.5;
  margin: 1px 0 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 위급 트리거 표시 — 일반 카드 구조는 유지하고 위험 신호만 가볍게 강조 */
.automation-page button.aw-card.aw-card-urgent {
  border-left: 4px solid var(--aw-danger);
  background: var(--aw-danger-bg);
}
.automation-page button.aw-card.aw-card-urgent:hover:not([disabled]) {
  border-color: var(--aw-danger);
  background: #fff3f1;
}
.automation-page button.aw-card.aw-card-urgent.aw-card-selected,
.automation-page button.aw-card.aw-card-urgent.aw-card-selected:hover:not([disabled]) {
  border-color: var(--aw-accent);
  border-left-color: var(--aw-danger);
  background: linear-gradient(135deg, var(--aw-accent) 0%, var(--aw-accent-dark) 100%);
  color: #fff;
}
.aw-preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin: -8px 0 18px;
  padding: 9px 14px;
  border: 1px solid var(--aw-accent-line);
  border-radius: 999px;
  background: var(--aw-accent-soft);
  color: var(--aw-accent-dark);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--aw-shadow);
  transition: border-color var(--aw-t), background var(--aw-t), transform var(--aw-t), box-shadow var(--aw-t);
}
.aw-preset-btn:hover:not(:disabled) {
  background: var(--aw-accent);
  border-color: var(--aw-accent);
  color: #fff;
  transform: translateY(-1px);
}
.aw-preset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--aw-wash);
  color: var(--aw-muted);
}
/* safety-hub: align card grid to same left/right edge as role-strip/KPI/header (cross-page consistency) */
.safety-hub-page > .aw-card-group { padding-left: 0; padding-right: 0; }

/* ── V5 node canvas ─────────────────────────────────────────────── */
.aw-canvas-entry { border-color: #7c3aed; color: #6d28d9; }
.aw-v5-shell { width:calc(100vw - 16px)!important; height:calc(100vh - 16px)!important; }
.aw-v5-panel { box-sizing:border-box; min-height:0; overflow:hidden!important; padding:12px!important; }
.ag-host { height:100%; min-height:0; }
.ag-app { height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:0!important; color:var(--aw-text); font-size:13px; }
.ag-app .aw-btn { min-height:36px; font-size:13px; }
.ag-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; flex:0 0 auto; padding:0 0 8px; }
.ag-toolbar-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; padding-right:10px; border-right:1px solid var(--aw-line); }
.ag-toolbar-group:last-child { padding-right:0; border-right:0; }
.ag-toolbar-label { align-self:stretch; display:flex; align-items:center; padding:0 7px; border-radius:6px; background:var(--aw-wash); color:var(--aw-muted); font-size:13px; font-weight:850; letter-spacing:.06em; }
.ag-toolbar label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.ag-toolbar-field-lbl { flex:0 0 auto; white-space:nowrap; }
.ag-toolbar select { min-width:180px; }
.ag-icon-btn { min-width:36px; padding-inline:9px; font-size:17px; }
.ag-step-rail { position:sticky; left:0; top:0; z-index:3; box-sizing:border-box; width:210px; height:100%; border-right:1px solid #ddd6fe; background:rgba(250,248,255,.96); box-shadow:5px 0 12px rgba(76,29,149,.06); }
.ag-step-list { position:relative; height:100%; }
.ag-condition-bracket { position:absolute; right:-1px; box-sizing:border-box; width:14px; border:2px solid #86efac; border-right:0; border-radius:8px 0 0 8px; pointer-events:none; }
.ag-step { position:absolute; left:10px; width:188px; min-height:72px; display:flex; align-items:flex-start; gap:9px; padding:10px; border:1px solid var(--ag-step-border,transparent); border-radius:10px; background:#fff; color:var(--ag-step-ink,var(--aw-muted)); text-align:left; cursor:pointer; }
.ag-step[data-ag-step="1"] { --ag-step-border:#60a5fa; --ag-step-bg:#eff6ff; --ag-step-ink:#1d4ed8; --ag-step-focus:rgba(96,165,250,.25); }
.ag-step[data-ag-step="2"] { --ag-step-border:#86efac; --ag-step-bg:#f0fdf4; --ag-step-ink:#15803d; --ag-step-focus:rgba(134,239,172,.3); }
.ag-step[data-ag-step="3"] { --ag-step-border:#a78bfa; --ag-step-bg:#f5f3ff; --ag-step-ink:#6d28d9; --ag-step-focus:rgba(167,139,250,.25); }
.ag-step[data-ag-step="4"] { --ag-step-border:#94a3b8; --ag-step-bg:#f8fafc; --ag-step-ink:#475569; --ag-step-focus:rgba(148,163,184,.25); }
.ag-step::after { content:""; position:absolute; left:19px; top:100%; width:2px; height:48px; background:var(--ag-step-border,#ddd6fe); pointer-events:none; }
.ag-step:last-child::after { display:none; }
.ag-step:hover,.ag-step:focus-visible { background:var(--ag-step-bg,#ede9fe); outline:2px solid var(--ag-step-focus,rgba(124,58,237,.25)); }
.ag-step-symbol { flex:0 0 auto; font-size:15px; line-height:20px; font-weight:900; }
.ag-step-copy { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 7px; }
.ag-step-copy strong { color:inherit; font-size:13px; }
.ag-step-copy small { font-size:13px; }
.ag-step-current,.ag-step-complete { background:var(--ag-step-bg,#fff); }
.ag-step-guide { flex:1 0 100%; color:var(--ag-step-ink,#4c1d95); font-size:13px; line-height:1.35; }
.ag-step-guide b { margin-right:4px; }
.ag-summary { flex:0 0 auto; margin:0 0 7px; padding:8px 12px; border:1px solid #ddd6fe; border-radius:10px; background:#f5f3ff; color:#4c1d95; font-size:13px; font-weight:700; }
.ag-panel-toggles { display:none; flex:0 0 auto; gap:6px; padding:0 0 7px; }
.ag-workspace { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:230px minmax(0,1fr) 330px; border:1px solid var(--aw-line); border-radius:12px; overflow:hidden; background:var(--aw-surface); }
[data-ag-palette],[data-ag-inspector] { min-width:0; min-height:0; overflow:hidden; }
.ag-palette,.ag-inspector { box-sizing:border-box; height:100%; min-height:0; overflow:auto; padding:10px; background:var(--aw-wash); }
.ag-palette { border-right:1px solid var(--aw-line); }
.ag-inspector { border-left:1px solid var(--aw-line); }
.ag-palette h3,.ag-inspector h3,.ag-problems h3,.ag-list-view h3 { margin:0 0 7px; font-size:15px; }
.ag-palette > p { display:none; }
.ag-palette-section { margin-bottom:7px; }
.ag-palette-trigger-section { --ag-palette-border:#60a5fa; --ag-palette-bg:#eff6ff; --ag-palette-ink:#1d4ed8; --ag-palette-focus:rgba(96,165,250,.25); margin-top:20px; min-height:133px; }
.ag-palette-condition-section { --ag-palette-border:#86efac; --ag-palette-bg:#f0fdf4; --ag-palette-ink:#15803d; --ag-palette-focus:rgba(134,239,172,.3); }
.ag-palette-field-section { min-height:68px; }
.ag-palette-action-section { --ag-palette-border:#a78bfa; --ag-palette-bg:#f5f3ff; --ag-palette-ink:#6d28d9; --ag-palette-focus:rgba(167,139,250,.25); }
.ag-palette-section h4 { margin:0 0 4px; font-size:13px; letter-spacing:.03em; color:var(--ag-palette-ink,var(--aw-muted)); }
.ag-palette-items { display:grid; gap:6px; }
.ag-palette-groups { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.ag-palette-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.ag-palette-field-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.ag-palette-field-row select { min-width:0; border-color:var(--ag-palette-border,var(--aw-line)); background:var(--ag-palette-bg,var(--aw-surface)); color:var(--ag-palette-ink,inherit); }
.ag-palette-item { width:100%; min-height:36px; display:flex; align-items:center; justify-content:center; gap:4px; padding:5px 6px; border:1px solid var(--ag-palette-border,var(--aw-line)); border-radius:7px; background:var(--ag-palette-bg,var(--aw-surface)); color:var(--ag-palette-ink,inherit); font-size:13px; line-height:1.15; text-align:center; cursor:pointer; }
.ag-palette-groups .ag-palette-item { flex-direction:column; gap:1px; padding:3px 1px; white-space:nowrap; word-break:keep-all; }
.ag-palette-item:hover:not(:disabled),.ag-palette-item:focus-visible { border-color:var(--ag-palette-ink,#7c3aed); outline:2px solid var(--ag-palette-focus,rgba(124,58,237,.18)); }
.ag-palette-item:disabled { opacity:.45; cursor:not-allowed; }
.ag-boundary-note,.ag-readonly-note,.ag-dryrun-note { padding:7px 9px; border-radius:8px; background:#fff7ed; color:#9a3412; font-size:13px; line-height:1.35; }
.ag-boundary-note summary { cursor:pointer; font-weight:700; }.ag-boundary-note p { margin:6px 0 0; }
.ag-canvas-column { min-width:0; min-height:0; display:flex; flex-direction:column; }
.ag-canvas { position:relative; flex:1 1 auto; min-height:0; overflow:auto; background-color:#fafafa; background-image:radial-gradient(#d4d4d8 1px,transparent 1px); background-size:20px 20px; outline:none; }
.ag-canvas-surface { position:relative; min-width:100%; min-height:100%; }
.ag-graph-plane { position:absolute; top:0; }
.ag-edges { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.ag-edge { fill:none; stroke:#a1a1aa; stroke-width:2; }
.ag-edge-action { stroke:#7c3aed; stroke-dasharray:5 4; }
.ag-node { position:absolute; box-sizing:border-box; width:220px; height:84px; padding:11px 12px; border:2px solid #d4d4d8; border-radius:12px; background:#fff; color:#27272a; box-shadow:0 3px 10px rgba(0,0,0,.06); text-align:left; cursor:pointer; user-select:none; }
.ag-node:hover,.ag-node:focus-visible { border-color:#8b5cf6; outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.ag-node.ag-selected { border-color:#6d28d9; box-shadow:0 0 0 3px rgba(109,40,217,.2); }
.ag-node.ag-picked { border-style:dashed; border-color:#ea580c; }
.ag-node[data-kind="TRIGGER"] { background:#eff6ff; border-color:#60a5fa; }
.ag-node[data-kind="ACTION"] { background:#f5f3ff; border-color:#a78bfa; }
.ag-node[data-kind="CONDITION-ROOT"],.ag-node[data-kind="GROUP"],.ag-node[data-kind="LEAF"] { background:#f0fdf4; border-color:#86efac; }
.ag-node.ag-node-error { border-color:#dc2626; }
.ag-node.ag-node-pass::after,.ag-node.ag-node-fail::after,.ag-node.ag-node-blocked::after { display:block; margin-top:5px; font-size:13px; font-weight:800; }
.ag-node.ag-node-pass::after { content:"✓ 시험 통과"; color:#15803d; }
.ag-node.ag-node-fail::after { content:"✕ 시험 실패"; color:#b91c1c; }
.ag-node.ag-node-blocked::after { content:"안전 정책 차단"; color:#b45309; }
.ag-node-title { display:block; margin-bottom:5px; font-size:14px; line-height:1.25; font-weight:850; }
.ag-node-detail { display:block; font-size:13px; color:#52525b; overflow-wrap:anywhere; }
.ag-node-port { position:absolute; width:14px; height:14px; border:2px solid #fff; border-radius:50%; background:#7c3aed; }
.ag-node-port-in { left:calc(50% - 7px); top:-8px; }.ag-node-port-out { left:calc(50% - 7px); bottom:-8px; }
.ag-list-controls { flex:0 0 36px; display:flex; align-items:center; border-top:1px solid var(--aw-line); background:var(--aw-surface); }
.ag-list-toggle { min-height:36px; padding:5px 10px; border:0; background:transparent; color:inherit; font-size:13px; font-weight:750; text-align:left; cursor:pointer; }
.ag-list-toggle:hover,.ag-list-toggle:focus-visible { color:#6d28d9; outline:2px solid rgba(124,58,237,.2); outline-offset:-2px; }
.ag-list-view { flex:0 1 120px; border-top:1px solid var(--aw-line); padding:8px 10px; max-height:120px; overflow:auto; }
.ag-list-view ol { margin:0; padding-left:24px; }.ag-list-view button { min-height:36px; border:0; background:transparent; color:inherit; font-size:13px; text-align:left; cursor:pointer; }
.ag-problems { flex:0 1 auto; max-height:90px; overflow:auto; padding:7px 0 0; }
.ag-problems [role="alert"] { padding:7px 10px; border-left:4px solid #dc2626; background:#fef2f2; margin:4px 0; font-size:13px; }
.ag-problems .ag-warning { border-color:#d97706; background:#fffbeb; }.ag-problems .ag-info { border-color:#2563eb; background:#eff6ff; }
.ag-field { display:grid; gap:5px; margin:0 0 11px; font-size:13px; font-weight:700; }
.ag-field input,.ag-field select,.ag-field textarea,.ag-toolbar select { width:100%; min-height:32px; box-sizing:border-box; border:1px solid var(--aw-line); border-radius:7px; padding:7px 8px; background:var(--aw-surface); color:inherit; font-size:13px; }
.ag-field input[type="checkbox"] { width:18px; min-height:18px; }
.ag-field textarea { min-height:72px; resize:vertical; }
.ag-inspector-actions { display:flex; flex-wrap:wrap; gap:6px; }
.ag-status { flex:0 0 auto; min-height:1.35em; margin:0; font-size:13px; color:var(--aw-muted); }
.ag-status[data-tone="error"] { color:#b91c1c; }.ag-status[data-tone="ok"] { color:#15803d; }
.ag-dialog-backdrop { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(24,24,27,.45); }
.ag-dialog { width:min(480px,100%); padding:18px; border-radius:12px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.ag-dialog h3 { margin:0 0 8px; }.ag-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; }
.ag-original-json { max-height:260px; overflow:auto; white-space:pre-wrap; font-size:11px; }
.ag-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:1099px) {
  .ag-panel-toggles { display:flex; }
  .ag-workspace { grid-template-columns:1fr; overflow:auto; }
  .ag-palette,.ag-inspector { height:auto; border:0; border-bottom:1px solid var(--aw-line); max-height:250px; }
  .ag-host.ag-palette-collapsed [data-ag-palette],.ag-host.ag-inspector-collapsed [data-ag-inspector] { display:none; }
  .ag-canvas { min-height:420px; }
}
@media (max-width:767px) {
  .aw-v5-shell { width:100vw!important; height:100vh!important; border-radius:0; }
  .aw-v5-panel { padding:8px!important; }
  .ag-app { min-height:0; }.ag-toolbar { align-items:stretch; }.ag-toolbar-group { width:100%; padding:0 0 6px; border:0; border-bottom:1px solid var(--aw-line); }.ag-toolbar label { flex:1 1 100%; }.ag-toolbar .aw-btn { flex:1; }
  .ag-canvas { display:none; }.ag-list-controls { display:none; }.ag-list-view,.ag-list-view[hidden] { display:block!important; max-height:none; min-height:360px; }
  .ag-workspace { display:flex; flex-direction:column; }.ag-canvas-column { order:-1; }
}
@supports (height:100dvh) {
  .aw-v5-shell { height:calc(100dvh - 16px)!important; }
  @media (max-width:767px) { .aw-v5-shell { height:100dvh!important; } }
}
@media (prefers-reduced-motion:reduce) { .ag-app * { scroll-behavior:auto!important; transition:none!important; } }