/* reset-ish */
.sim-root { padding:24px; }
.sim-columns { display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:20px; }
.sim-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.sim-card h2 { margin:0 0 12px; font-size:20px; }
.building_box { list-style:none; padding:0; margin:0; }
.building_box li { display:flex; align-items:center; gap:12px; padding:12px; border-bottom:1px solid #f1f5f9; cursor:pointer; }
.building_box li:hover { background:#f8fafc; }
.building_box b { width:38px; display:inline-block; }
.building_box .ico { height:28px }
.building_box .badge { height:24px; margin-left:auto }
.receiver_wrap .fire_box{ display:flex; align-items:center; justify-content:space-between; background:#16a34a; color:#fff; border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.receiver_wrap .fire_box.red { background:#ef4444; }
.app_left_top, .app_left_bot, .circuit_box, .app_right { list-style:none; padding:0; margin:10px 0; display:grid; gap:8px; }
.app_left_top { grid-template-columns: repeat(2, 14px); }
.app_left_bot { grid-template-columns: repeat(7, 14px); }
.app_left_top li, .app_left_bot li { width:14px;height:14px;border-radius:9999px;background:#e5e7eb; }
.circuit_box { grid-template-columns: repeat(2, 1fr); }
.circuit_box li { background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:flex; align-items:center; justify-content:space-between; }
@keyframes blink { 50% { opacity:.35 } } 
.blink { animation: blink 1s step-end infinite; }
.tile-on    { outline:2px solid #16a34a; background:#ecfdf5; }
.tile-alert { outline:2px solid #ef4444; background:#fee2e2; }
/* === sample 레이아웃 === */
.sim-sample {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr; /* sample 비율 */
  gap: 20px;
}

/* 카드 컨테이너 */
.sample-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  padding: 10px;
}

/* 이미지 보드: 비율 고정 + 오버레이 */
.img-board {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 1/1); /* 이미지 원본 비율 유지 */
  overflow: hidden;
}
.img-board > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; /* 원본을 왜곡없이 꽉 차게 */
  pointer-events: none; /* 아래 핫스팟을 클릭 가능 */
}

/* 층별 행 핫스팟: 이미지 세로를 일정 비율로 7등분 */
.hs-row {
  position: absolute; left: 0; width: 100%;
  height: 11.5%; /* 대략 행 높이 */
  top: var(--top, 0);
  background: transparent;
  border: 0; cursor: pointer;
}

/* 둥근 버튼 핫스팟(지구/주경종) */
.hs-round {
  position: absolute;
  width: 18%; height: 18%;
  left: var(--left, 50%); top: var(--top, 80%);
  transform: translate(-50%, -50%);
  background: transparent;
  border-radius: 50%;
  border: 0; cursor: pointer;
}

/* 접근성: 키보드 포커스 시만 얇게 표시 */
.hs-row:focus-visible, .hs-round:focus-visible {
  outline: 2px dashed #22c55e; outline-offset: 2px;
}
/* 공통 보드/이미지 안전장치(이미지 클릭 방지) */
.img-board { position:relative; width:100%; }
.img-board > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* 공통 하이라이트 */
.hl { position:absolute; pointer-events:none; border-radius:10px;
      outline:3px solid transparent; transition:outline-color .15s, box-shadow .15s, background .15s; }

/* 건물: 가로 전체 행 하이라이트 */
.hl.bld { left:0; width:100%; height:var(--row,11.5%); top:var(--top,0); }
.hl.bld.on { outline-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25) inset; background:rgba(239,68,68,.08); }

/* 수신기: 작은 원형 LED/사각 영역 */
.hl.rx-led { width:var(--size,3.6%); height:var(--size,3.6%);
             left:var(--x); top:var(--y); transform:translate(-50%,-50%); border-radius:50%; }
.hl.rx-led.on { background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,.8); }
.hl.rx-floor { left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:translate(-50%,-50%); }
.hl.rx-floor.on { outline-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.25) inset; background:rgba(239,68,68,.08); }

/* App: 타일/전압 */
.hl.app-tile { left:var(--x); top:var(--y); width:var(--w); height:var(--h); transform:translate(-50%,-50%); border-radius:12px; }
.hl.app-tile.on { outline-color:#22c55e; background:rgba(34,197,94,.07); }          /* 일반 상태 */
.hl.app-tile.fire { outline-color:#ef4444; background:rgba(239,68,68,.10); }       /* 화재 상태 */

.app-volt { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
            color:#111; font-weight:600; font-size:14px; pointer-events:none; }
.app-volt.fire { color:#ef4444; }