* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #ffffff;
  font-family: Arial, sans-serif;
}

/* =========================
   LOGIN PAGE
========================= */

.login-page {
  display: flex;
  justify-content: center;
  padding-top: 80px;
}

.login-image-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
}

.login-bg {
  width: 100%;
  display: block;
}

.login-input {
  position: absolute;
  border: 1px solid #bfbfbf;
  background: #ffffff;
  padding: 0 4px;
  font-size: 12px;
  outline: none;
}

.id-input {
  top: 43.5%;
  left: 57.5%;
  width: 8.6%;
  height: 2.7%;
}

.pw-input {
  top: 47.0%;
  left:57.5%;
  width: 8.6%;
  height: 2.7%;
}

.login-click-area {
  position: absolute;
  top: 41.2%;
  left: 70%;
  width: 8.5%;
  height: 8%;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* =========================
   MAIN PAGE
========================= */

.menu-wrap {
  position: relative;
  width: 100%;
}

.menu-img {
  width: 100%;
  display: block;
}

/* 🔥 버튼 기본 스타일 제거 (핵심) */
.menu-btn,
.home-btn,
.logout-btn {
  position: absolute;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 메뉴 공통 영역 */
.menu-btn {
  top: 55%;
  height: 42%;
}

/* 메뉴 12개 위치 */
.m1  { left: 16%; width: 5.5%; }
.m2  { left: 22.8%; width: 5.5%; }
.m3  { left: 29.4%; width: 6%; }
.m4  { left: 36%; width: 5.6%; }
.m5  { left: 42.4%; width: 5.8%; }
.m6  { left: 49%; width: 5.8%; }
.m7  { left: 55.4%; width: 5.6%; }
.m8  { left: 61.7%; width: 5.4%; }
.m9  { left: 67.8%; width: 5.6%; }
.m10 { left: 74.2%; width: 5.8%; }
.m11 { left: 81%; width: 5.5%; }
.m12 { left: 87.6%; width: 5.4%; }

/* HOME / LOGOUT */
.home-btn {
  top: 18%;
  left: 84.3%;
  width: 3.4%;
  height: 17%;
}

.logout-btn {
  top: 18%;
  left: 88.5%;
  width: 4.2%;
  height: 17%;
}

/* 콘텐츠 */
.content {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.content img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .login-image-wrap {
    max-width: 100%;
  }

  .login-page {
    padding-top: 20px;
  }

  .login-input {
    font-size: 11px;
    padding: 0 3px;
  }

  .content {
    padding: 10px;
  }
}