/* ⭐ 스마트폰 최적화 기본 설정 ⭐ */
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 16px; /* 모바일에서 여백 축소 */
}
h1 { margin-bottom: 12px; }
section { border: 1px solid #ddd; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
button { padding: 8px 12px; margin-right: 8px; cursor: pointer; border-radius: 10px; border: 1px solid #ccc; }
.chip { min-height: 40px; }

#log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 280px; overflow: auto; background: #fafafa; padding: 8px; border-radius: 10px; border: 1px solid #eee; }
pre { background: #fafafa; padding: 8px; border-radius: 10px; border: 1px solid #eee; }

/* 로그인 오버레이 */
.auth { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; place-items:center; z-index:20; }
.auth.show { display:grid; }
.auth .card { width:320px; padding:16px; border-radius:12px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.15); display:flex; flex-direction:column; gap:8px; }

/* ⭐ 설정 모달용 카드 스타일 (모바일 우선 적용) ⭐ */
.auth .setting-card {
  width: 95%;          /* 모바일에서 화면 너비의 95% 사용 */
  max-width: 960px;    /* 데스크톱/태블릿을 위한 최대 너비 지정 */
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth input { height:34px; border:1px solid #ccc; border-radius:8px; padding:6px 10px; }
.auth .msg { color:#e74c3c; min-height:20px; }

/* ⭐ 이미지 맵 컨테이너 스타일 (PC 중앙 정렬 강화) ⭐ */
#map-container {
    position: relative;
    margin: 0 auto; /* 컨테이너 자체를 중앙 정렬 */
    max-width: 1000px;
    display: block;
    text-align: center; /* 내부 인라인/인라인-블록 요소를 중앙 정렬 (선택 사항) */
}

/* ⭐ 이미지 자체 스타일 (PC 중앙 정렬 강화) ⭐ */
#control-map-image {
    max-width: 100%;
    height: auto;
    display: block; /* 블록 요소로 설정 */
    margin: 0 auto; /* ⭐ 중요: 이미지 자체를 컨테이너 내에서 중앙 정렬 ⭐ */
    border-radius: 8px;
}

/* ⭐ 이미지 위의 버튼 공통 스타일 ⭐ */
.map-btn {
    position: absolute;
    padding: 6px 10px;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #333;
    z-index: 10;
    white-space: nowrap;
    text-shadow: 0 0 4px #fff;
}
.map-chip {
    border-radius: 8px;
}

/* ⭐ 개별 버튼 위치 지정 (퍼센트(%)로 지정 - 조정 필수!) ⭐ */
/* 이 값들은 'main.png'의 크기에 따라 위치가 결정되므로,
   이미지를 보면서 top과 left 값을 조정해야 합니다. */
#pump-on-btn { top: 30%; left: 60%; }
#pump-off-btn { top: 35%; left: 60%; }
#sp-toggle-btn { top: 20%; left: 50%; }
#air-toggle-btn { top: 25%; left: 40%; }
#vent-toggle-btn { top: 30%; left: 40%; }
#filter-toggle-btn { top: 35%; left: 40%; }
#btnShowSetting { top: 80%; left: 10%; }

/* 데스크톱 환경을 위한 미디어 쿼리 */
@media (min-width: 768px) {
    body {
        margin: 24px;
    }
}