:root {
  --bg-image: none;
  --bg-overlay: rgba(3, 12, 18, 0.6);
  --panel-bg: rgba(9, 29, 39, 0.72);
  --panel-strong: rgba(13, 36, 48, 0.9);
  --line-color: rgba(130, 202, 228, 0.45);
  --blue: #00b4d8;
  --blue-strong: #0077b6;
  --white: #edf8ff;
  --text-soft: #c8eaf5;
  --success: #2a9d8f;
  --danger: #e63946;
  --warning: #f4a261;
  --shadow: rgba(0, 180, 216, 0.22);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(0, 17, 27, 0.82), rgba(8, 38, 52, 0.68)),
    var(--bg-image),
    radial-gradient(circle at top left, rgba(0, 180, 216, 0.18), transparent 35%),
    linear-gradient(120deg, #071a23 0%, #0c2836 40%, #06131a 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 24px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  pointer-events: none;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(circle at 50% 48%, rgba(0, 160, 255, .2), transparent 30%), linear-gradient(180deg, #01040a, #000916);
  transition: opacity .8s ease;
}

.intro-screen[hidden] { display: none; }

.intro-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-particles,
.intro-particles::before,
.intro-particles::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: radial-gradient(circle, rgba(70, 210, 255, .9) 0 1px, transparent 2px), radial-gradient(circle, rgba(0, 120, 255, .7) 0 1px, transparent 2px);
  background-size: 90px 90px, 140px 140px;
  animation: intro-drift 8s linear infinite;
  opacity: .45;
}

.intro-particles::before { transform: rotate(35deg); animation-duration: 12s; }
.intro-particles::after { transform: rotate(-25deg); animation-duration: 16s; opacity: .3; }

.intro-core {
  position: absolute;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 210, 255, .7), rgba(0, 85, 255, .18) 35%, transparent 68%);
  filter: blur(24px);
  animation: intro-pulse 1.2s ease-out forwards;
}

.intro-logo-wrap {
  position: relative;
  z-index: 2;
  width: min(78vw, 900px);
  transform: scale(1.5);
  opacity: .2;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 28px #00cfff) drop-shadow(0 0 70px #008cff);
  animation: intro-logo-in .9s cubic-bezier(.16, .8, .26, 1) forwards;
}

.intro-logo { display: block; width: 100%; height: auto; }

.intro-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%);
  mix-blend-mode: screen;
  transform: translateX(-130%);
  animation: intro-shine 1.1s 1s ease-out forwards;
}

.intro-tagline {
  position: absolute;
  z-index: 2;
  bottom: 13%;
  margin: 0;
  color: #d9f8ff;
  font-size: clamp(17px, 2.7vw, 32px);
  letter-spacing: 4px;
  text-shadow: 0 0 12px #00bfff;
  opacity: 0;
  animation: intro-text-in .7s 1s ease-out forwards;
}

.intro-skip {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 4;
  padding: 10px 20px;
  border: 1px solid #00cfff;
  border-radius: 6px;
  background: rgba(0, 40, 80, .45);
  color: #bcefff;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 170, 255, .5);
}

.intro-hint { position: absolute; bottom: 35px; z-index: 2; color: #a9dfe5; opacity: .5; font-size: 12px; letter-spacing: 2px; }

.intro-sound-picker {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 9%;
  width: min(780px, 86vw);
  transform: translateX(-50%);
  color: #c9f4ff;
  animation: intro-text-in .7s 1.25s ease-out both;
}

.intro-sound-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .4px;
  opacity: .78;
}

.intro-sound-kicker {
  color: #48d9ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.intro-sound-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.intro-sound-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(89, 209, 240, .27);
  border-radius: 7px;
  background: rgba(3, 35, 54, .6);
  color: #d9f8ff;
  text-align: left;
  cursor: pointer;
}

.settings-menu-card[hidden] { display: none; }

.intro-sound-option:hover,
.intro-sound-option.is-selected {
  border-color: #35d9ff;
  background: rgba(0, 111, 157, .42);
  box-shadow: 0 0 18px rgba(0, 190, 255, .24), inset 0 0 14px rgba(0, 190, 255, .1);
}

.sound-play-icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(127, 232, 255, .6);
  border-radius: 50%;
  color: #65e5ff;
  font-size: 9px;
}

.intro-sound-option span:last-child { min-width: 0; }
.intro-sound-option strong,
.intro-sound-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intro-sound-option strong { font-size: 12px; }
.intro-sound-option small { margin-top: 3px; color: #9bcbd8; font-size: 10px; }

@keyframes intro-logo-in { to { transform: scale(1); opacity: 1; } }
@keyframes intro-pulse { 0% { transform: scale(.45); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: .6; } }
@keyframes intro-text-in { to { opacity: 1; transform: translateY(-8px); } }
@keyframes intro-shine { to { transform: translateX(130%); } }
@keyframes intro-drift { to { transform: translate(120px, 80px) rotate(5deg); } }

@media (max-width: 600px) {
  .intro-logo-wrap { width: 92vw; }
  .intro-tagline { width: 90%; text-align: center; letter-spacing: 1px; }
  .intro-skip { top: 14px; right: 14px; }
  .intro-sound-picker { bottom: 11%; width: 92vw; }
  .intro-sound-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .intro-sound-options { grid-template-columns: repeat(2, 1fr); }
  .intro-sound-option { padding: 9px; }
  .intro-hint { bottom: 18px; }
}

#app-container {
  width: 100%;
  max-width: 1024px;
  height: 768px;
  background: linear-gradient(180deg, rgba(8, 25, 33, 0.88), rgba(3, 15, 22, 0.9));
  border: 1px solid var(--line-color);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 50px var(--shadow);
  backdrop-filter: blur(7px);
  z-index: 1;
}

#app-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.08), transparent 35%, rgba(255, 255, 255, 0.03));
  pointer-events: none;
}

.page {
  display: none;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.page.active {
  display: flex;
  flex-direction: column;
}

/* 반짝이는 효과 (Glow Effect) */
.glow-effect {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

button,
[role="button"] {
  transition: all 0.15s ease-in-out;
}

button:active,
[role="button"]:active,
.glow-effect:active {
  transform: none;
  box-shadow: 0 0 25px #48cae4, inset 0 0 15px #48cae4;
  filter: brightness(1.3);
}

/* 로그인 화면 */
#page-login {
  position: relative;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(5, 29, 38, 0.25), rgba(4, 24, 34, 0.6)),
    radial-gradient(circle at 50% 18%, rgba(53, 173, 210, 0.28), transparent 24%),
    linear-gradient(120deg, #021b26 0%, #072a39 38%, #021821 100%);
  overflow: hidden;
}

#page-login::before,
#page-login::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#page-login::before {
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(89, 209, 240, 0.24) 6% 6.6%, transparent 6.6% 23%, rgba(89, 209, 240, 0.24) 23% 23.7%, transparent 23.7% 35%, rgba(89, 209, 240, 0.24) 35% 35.7%, transparent 35.7% 62%, rgba(89, 209, 240, 0.24) 62% 62.6%, transparent 62.6% 80%, rgba(89, 209, 240, 0.24) 80% 80.7%, transparent 80.7%),
    linear-gradient(180deg, transparent 0 12%, rgba(89, 209, 240, 0.22) 12% 12.8%, transparent 12.8% 30%, rgba(89, 209, 240, 0.22) 30% 30.8%, transparent 30.8% 52%, rgba(89, 209, 240, 0.2) 52% 52.8%, transparent 52.8% 72%, rgba(89, 209, 240, 0.2) 72% 72.8%, transparent 72.8%);
  opacity: 0.8;
  transform: scale(1.08);
}

#page-login::after {
  background:
    radial-gradient(circle at 20% 25%, rgba(140, 212, 229, 0.25), transparent 18%),
    radial-gradient(circle at 78% 20%, rgba(140, 212, 229, 0.22), transparent 16%),
    linear-gradient(120deg, transparent 0 32%, rgba(110, 220, 255, 0.15) 48%, transparent 62%);
  filter: blur(10px);
}

.login-box {
  width: min(620px, 78%);
  background: transparent;
  padding: 20px 10px;
  border: none;
  text-align: center;
  position: relative;
  z-index: 1;
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.brand-mark {
  display: block;
  width: min(70vw, 560px);
  height: auto;
  max-height: 360px;
  filter: drop-shadow(0 12px 18px rgba(64, 178, 222, 0.12));
}

.title {
  font-size: clamp(42px, 4vw, 72px);
  margin-bottom: 30px;
  letter-spacing: 2px;
  font-weight: 700;
  color: rgba(240, 248, 255, 0.95);
  text-shadow: 0 0 18px rgba(72, 210, 255, 0.2);
}

.input-group {
  margin-bottom: 18px;
}

.input-group input {
  width: 100%;
  height: 84px;
  padding: 14px 26px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.78);
  font-size: 30px;
  color: rgba(18, 28, 38, 0.9);
  box-shadow: inset 0 0 0 1px rgba(113, 202, 236, 0.2);
}

.input-group input::placeholder {
  color: rgba(50, 74, 91, 0.55);
}

.checkbox-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 6px 18px;
}

.checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  color: rgba(222, 245, 255, 0.9);
  cursor: pointer;
}

.checkbox-wrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkmark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(122, 198, 244, 0.2);
  border: 2px solid rgba(137, 215, 251, 0.9);
  display: inline-block;
  position: relative;
}

.checkbox-wrap input:checked + .checkmark {
  background: linear-gradient(180deg, rgba(103, 209, 255, 0.95), rgba(60, 154, 219, 0.95));
  border-color: rgba(163, 229, 255, 1);
}

.checkbox-wrap input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.btn-primary {
  width: 100%;
  height: 86px;
  border: none;
  background: linear-gradient(180deg, rgba(113, 170, 220, 0.9), rgba(81, 130, 190, 0.9));
  color: white;
  font-size: 30px;
  font-weight: 700;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(79, 150, 213, 0.35);
}

/* 헤더 공통 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #2a5268;
  margin-bottom: 20px;
}

.logo-small {
  font-weight: bold;
  font-size: 20px;
  color: #00b4d8;
}

.logo-home-button {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 85px;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.logo-home-button img,
.logo-home-button.hub-logo img {
  display: block;
  width: 84px;
  height: 85px;
  object-fit: contain;
}

.btn-logout, .btn-back {
  background: #1d3557;
  border: 1px solid #457b9d;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-back {
  width: 100px;
  height: 80px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 42, 53, .72);
  border-color: rgba(94, 188, 197, .65);
}

.btn-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

/* 내부 페이지 공통 헤더: 참조 화면의 전체 폭 헤더와 큰 뒤로가기 버튼 */
.page:not(#page-login):not(#page-main) {
  padding: 0 20px 20px;
}

.page:not(#page-login):not(#page-main) .app-header {
  position: relative;
  height: 103px;
  flex: 0 0 103px;
  margin: 0 -20px 20px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(118, 204, 208, .22);
  background: rgba(3, 28, 38, .76);
}

.page:not(#page-login):not(#page-main) .logo-small {
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 85px;
  transform: translateX(-50%);
  z-index: 1;
}

.page:not(#page-login):not(#page-main) .logo-small img {
  display: block;
  width: 84px;
  height: 85px;
  object-fit: contain;
}

.page:not(#page-login):not(#page-main) .hub-header-logo {
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 85px;
  object-fit: contain;
  transform: translateX(-50%);
  z-index: 1;
}

.page:not(#page-login):not(#page-main) .logo-home-button,
#page-hub .logo-home-button {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 85px;
  transform: translateX(-50%);
}

.page:not(#page-login):not(#page-main) .logo-home-button .hub-header-logo {
  position: static;
  transform: none;
}

.page:not(#page-login):not(#page-main) .user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #edf8ff;
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
}

.page:not(#page-login):not(#page-main) .btn-logout {
  padding: 7px 18px;
  border-radius: 7px;
  border-color: rgba(94, 188, 197, .55);
  background: rgba(3, 42, 53, .8);
  color: #a9dfe5;
  font-size: 18px;
}

/* 메인 메뉴 카드 */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}

.menu-card {
  background: linear-gradient(180deg, rgba(19, 45, 58, 0.85), rgba(10, 25, 35, 0.82));
  border: 1px solid var(--line-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 180px;
}

.menu-card .icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.menu-card .menu-title {
  font-size: 22px;
  font-weight: bold;
}

.badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.badge-success { background: #2a9d8f; }
.badge-danger { background: #e63946; }
.badge-warning { background: #f4a261; color: #000; }

/* 공장동 선택 */
.page-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 25px;
}

.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: min(1120px, calc(100% - 40px));
  flex: 1;
  min-height: 0;
  margin: 0 auto;
}

.hub-card {
  background: linear-gradient(180deg, rgba(19, 45, 58, 0.85), rgba(10, 25, 35, 0.82));
  border: 1px solid var(--line-color);
  border-radius: 8px;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

#page-hub.page .app-header {
  position: relative;
}

#page-hub .hub-header-logo {
  display: block;
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 85px;
  object-fit: contain;
  transform: translateX(-50%);
  z-index: 1;
}

#page-hub.page .logo-small {
  display: none;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 84px;
  height: 84px;
}

#page-hub.page .logo-small img {
  display: block;
  width: 84px;
  height: 85px;
  object-fit: contain;
}

#page-hub .page-title {
  margin-bottom: 25px;
  color: #f4ffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(74, 231, 239, .7), 0 3px 4px rgba(0, 0, 0, .8);
}

#page-hub .hub-grid {
  width: min(100%, 1120px);
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
}

#page-hub {
  overflow: auto;
}

#page-hub .hub-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-hub .hub-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0;
}

#page-hub .hub-card:first-child {
  overflow: visible;
}

/* 설비 목록 및 요약 */
.inspection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 18px;
  align-items: stretch;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 20px;
  position: relative;
}

.progress-panel {
  min-width: 0;
  padding: 18px 22px 14px;
  border: 2px solid rgba(57, 184, 212, .8);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(5, 35, 51, .94), rgba(5, 24, 38, .9));
  box-shadow: inset 0 0 18px rgba(34, 167, 201, .16), 0 0 8px rgba(35, 182, 213, .28);
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #edfaff;
  font-size: 25px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .8);
}

.progress-info strong { font-weight: 700; }

.progress-bar {
  height: 22px;
  margin: 14px 0 16px;
  padding: 3px;
  border: 1px solid rgba(173, 224, 239, .7);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(147, 184, 199, .6), rgba(36, 61, 75, .85));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), 0 0 6px rgba(68, 205, 232, .3);
}

.progress-fill {
  height: 100%;
  min-width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #49ed35, #74ff4a 45%, #36e63d);
  box-shadow: 0 0 8px #45f04a, 0 0 18px rgba(69, 240, 74, .8);
  transition: width .3s ease;
}

.status-counts {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  min-height: 42px;
  border-top: 1px solid rgba(141, 210, 225, .45);
  color: #dff7fc;
  font-size: 22px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .8);
}

.status-counts > span + span {
  padding-left: 22px;
  border-left: 1px solid rgba(141, 210, 225, .55);
}

.status-green { color: #5ce299; }
.status-red { color: #ff786c; }
.status-gray { color: #d5e1e6; }

.scan-trigger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 142px;
  padding: 8px;
  border: 2px solid rgba(57, 184, 212, .8);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(5, 35, 51, .94), rgba(5, 24, 38, .9));
  color: #dffaff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 15px rgba(34, 167, 201, .14), 0 0 8px rgba(35, 182, 213, .25);
}

.scan-trigger-btn img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 1px solid rgba(177, 235, 245, .45);
}

.equipment-list-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 2px 10px;
}

.equipment-list-label {
  color: var(--text-soft);
  font-size: 14px;
}

.equipment-list-view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(144, 224, 239, .38);
  border-radius: 8px;
  background: rgba(4, 25, 37, .8);
}

.equipment-view-button {
  min-width: 76px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #c8eaf5;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.equipment-view-button:hover,
.equipment-view-button:focus-visible {
  outline: none;
  color: #f2ffff;
  border-color: rgba(128, 245, 255, .65);
}

.equipment-view-button.active {
  color: #f2ffff;
  border-color: rgba(128, 245, 255, .75);
  background: linear-gradient(180deg, rgba(22, 137, 157, .8), rgba(7, 78, 96, .9));
  box-shadow: 0 0 9px rgba(43, 220, 233, .28);
}

.equipment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 2px 8px 20px 2px;
}

.equipment-floor-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.equipment-floor-heading {
  position: sticky;
  top: -2px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(128, 245, 255, .38);
  border-radius: 7px;
  color: #a9f5fb;
  background: rgba(5, 35, 51, .97);
  font-size: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .24);
}

.eq-item {
  display: flex;
  gap: 0;
  align-items: center;
  flex: 0 0 auto;
  min-height: 58px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
}

.eq-item.eq-menu-open {
  position: relative;
  z-index: 5;
}

.eq-number {
  width: 34px;
  height: 34px;
  margin-right: -17px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(235, 249, 255, .75);
  border-radius: 50%;
  background: #fff;
  color: #102f43;
  font-size: 12px;
  font-weight: 700;
}

.eq-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid rgba(178, 231, 242, .8);
  border-radius: 8px;
  background: rgba(4, 35, 53, .92);
  box-shadow: inset 0 0 15px rgba(67, 175, 207, .1);
}

.eq-main strong {
  color: #f2ffff;
  font-size: 18px;
}

.eq-status {
  min-height: 58px;
  margin-left: 16px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(178, 231, 242, .8);
  border-radius: 8px;
  background: rgba(4, 35, 53, .92);
  font-size: 21px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
}

.eq-status-wrap {
  position: relative;
  flex: 0 0 182px;
  margin-left: 16px;
}

.eq-status-wrap .eq-status {
  width: 100%;
  margin-left: 0;
}

.eq-status-menu {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  width: 100%;
  padding: 5px;
  border: 1px solid rgba(128, 245, 255, .85);
  border-radius: 6px;
  background: #082638;
  box-shadow: 0 0 14px rgba(43, 220, 233, .55);
}

.eq-status-menu.visible { display: grid; gap: 4px; }

.eq-status-menu button {
  position: relative;
  z-index: 21;
  border: 1px solid rgba(178, 231, 242, .45);
  border-radius: 4px;
  padding: 8px 6px;
  background: rgba(8, 57, 73, .9);
  color: #e9fbff;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}

.eq-status-menu button:hover,
.eq-status-menu button:focus {
  outline: none;
  border-color: #80f5ff;
  box-shadow: 0 0 8px rgba(43, 220, 233, .6);
}

.eq-status-normal .eq-number { background: #00b65a; color: #fff; }
.eq-status-normal .eq-status { color: #62e3b7; }
.eq-status-abnormal .eq-number { background: #ef3434; color: #fff; }
.eq-status-abnormal .eq-status { color: #ff8b96; }
.eq-status-inactive .eq-number { background: #aab3b9; color: #fff; }
.eq-status-inactive .eq-status { color: #b2c0c5; }
.eq-status-waiting .eq-number { background: #fff; }
.eq-status-waiting .eq-status { color: #f0c878; }
.eq-item.selected {
  border-color: #80f5ff;
  box-shadow: 0 0 12px rgba(43, 220, 233, .7), inset 0 0 18px rgba(43, 220, 233, .2);
}

#page-inspection { overflow: hidden; }
#page-inspection .page-title { margin-bottom: 14px; }
#page-inspection .inspection-summary { flex: 0 0 auto; }

.inspection-complete-btn {
  flex: 0 0 auto;
  width: min(420px, 100%);
  margin: 8px auto 4px;
  padding: 14px 20px;
  border: 2px solid #6eeaf2;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(22, 137, 157, .9), rgba(7, 78, 96, .92));
  color: #f1ffff;
  cursor: pointer;
  font: inherit;
  font-size: 21px;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(43, 220, 233, .42), inset 0 0 14px rgba(43, 220, 233, .2);
}

.log-panel,
.log-detail-panel {
  width: min(940px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 2px solid rgba(57, 184, 212, .8);
  border-radius: 12px;
  background: rgba(5, 30, 45, .88);
  box-shadow: inset 0 0 24px rgba(34, 167, 201, .14), 0 0 12px rgba(35, 182, 213, .25);
}

.log-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(141, 210, 225, .45);
}

.log-filters label {
  display: grid;
  gap: 6px;
  color: #c8eaf5;
  font-size: 13px;
}

.log-filters select {
  height: 38px;
  padding: 5px 8px;
  border: 1px solid rgba(145, 225, 237, .65);
  border-radius: 4px;
  background: rgba(235, 250, 255, .94);
  color: #17303b;
  font: inherit;
}

.log-sync-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: #c8eaf5;
  font-size: 13px;
}

.log-sync-controls .is-error {
  color: #ffaaa1;
}

.inspection-log-list,
.log-detail-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 260px);
  padding-top: 16px;
  overflow-y: auto;
}

.log-detail-panel.capture-mode {
  width: auto;
  max-width: none;
  min-width: 900px;
}

.log-detail-panel.capture-mode .log-detail-list {
  max-height: none !important;
  overflow: visible !important;
}

.log-detail-panel.capture-mode {
  width: auto;
  max-width: none;
  min-width: 920px;
}

.log-detail-panel.capture-mode .log-detail-list {
  max-height: none !important;
  overflow: visible !important;
}

.log-detail-panel.capture-mode .log-detail-actions,
.log-detail-panel.capture-mode .approval-complete-btn { display: none !important; }

.log-document-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(141, 210, 225, .45);
}
.log-document-heading { min-width: 0; }
.log-document-heading h2 { margin: 0 0 14px; color: #f2ffff; font-size: clamp(21px, 3vw, 30px); }
.log-document-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #9eeaf1; font-size: 14px; }
.log-document-top > .inspection-approval-line { grid-column: 2; grid-row: 1; margin: 0; }

.inspection-log-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px) auto;
  align-items: center;
  border: 1px solid rgba(108, 205, 220, .55);
  border-radius: 6px;
  background: rgba(4, 35, 53, .88);
  color: #e9fbff;
}

.inspection-log-status-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  min-width: 0;
  min-height: 30px;
  border-top: 1px solid rgba(141, 210, 225, .3);
  color: #dff7fc;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.inspection-log-status-summary > span {
  padding: 0 10px;
}

.inspection-log-status-summary > span + span {
  border-left: 1px solid rgba(141, 210, 225, .4);
}

.inspection-log-status-summary > span:not(:first-child)::before {
  content: "● ";
}

.log-detail-panel > .inspection-log-status-summary {
  min-height: 34px;
  margin-top: 10px;
  border-top-color: rgba(141, 210, 225, .45);
  font-size: 14px;
}

.inspection-approval-line {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(144, 224, 239, .55);
  border-radius: 5px;
  background: rgba(5, 25, 38, .9);
  box-sizing: border-box;
}
.inspection-approval-label {
  display: grid;
  place-items: center;
  padding: 5px 2px;
  border-right: 1px solid rgba(144, 224, 239, .42);
  color: #c8edf2;
  font-size: 12px;
  writing-mode: vertical-rl;
}
.inspection-approval-stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.approval-signature-cell {
  display: grid;
  grid-template-rows: 20px 50px 14px 12px;
  justify-items: center;
  align-items: center;
  min-width: 0;
  border-right: 1px solid rgba(144, 224, 239, .35);
}
.approval-signature-cell:last-child { border-right: 0; }
.approval-signature-role {
  width: 100%;
  padding: 2px 5px;
  border-bottom: 1px solid rgba(144, 224, 239, .35);
  color: #e1f8fb;
  font-size: 11px;
  text-align: center;
}
.approval-signature-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; min-width: 0; padding: 3px; box-sizing: border-box; background: #fff; }
.approval-signature-image img { display: block; flex: 0 1 auto; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.approval-signature-image.signature-image-missing::after { content: '서명 미등록'; color: #9bb8c0; font-size: 10px; }
.approval-signer { max-width: 100%; padding: 0 4px; overflow: hidden; color: #c6e6eb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.approval-signature-cell.is-pending .approval-signer { color: #9bb8c0; }
.approval-date { padding-bottom: 2px; color: #86cbd4; font-size: 9px; }
.approval-complete-btn {
  align-self: center;
  justify-self: center;
  margin: 0 2px;
  padding: 6px 7px;
  border: 1px solid rgba(109, 226, 190, .65);
  border-radius: 5px;
  color: #dcfff1;
  background: rgba(18, 112, 91, .5);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.approval-complete-btn.is-cancel { border-color: rgba(255, 143, 143, .7); color: #ffe5e5; background: rgba(138, 44, 44, .5); }
.approval-complete-btn.is-cancel:hover, .approval-complete-btn.is-cancel:focus-visible { border-color: #ffaaaa; box-shadow: 0 0 10px rgba(255, 100, 100, .35); }
.approval-complete-btn:hover, .approval-complete-btn:focus-visible { outline: none; border-color: #8effd1; box-shadow: 0 0 10px rgba(67, 231, 175, .35); }
.inspection-log-item:focus-within {
  outline: none;
  border-color: #80f5ff;
  box-shadow: 0 0 12px rgba(43, 220, 233, .6);
}

.inspection-log-open {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.inspection-log-open:hover,
.inspection-log-open:focus {
  outline: none;
  background: rgba(35, 145, 163, .16);
}

.inspection-log-open span { color: #9eeaf1; font-size: 16px; }
.inspection-log-open strong { font-size: 18px; }
.inspection-log-open small { color: #9cced7; }
.inspection-log-delete {
  align-self: center;
  margin: 10px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 140, 131, .75);
  border-radius: 5px;
  background: rgba(118, 44, 49, .72);
  color: #ffe7e4;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.inspection-log-delete:hover,
.inspection-log-delete:focus,
.log-detail-btn.danger:hover,
.log-detail-btn.danger:focus {
  outline: none;
  border-color: #ffaaa1;
  background: rgba(166, 50, 55, .9);
  box-shadow: 0 0 10px rgba(255, 94, 87, .45);
}

@media (max-width: 600px) {
  .log-document-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .log-document-top > .inspection-approval-line { grid-column: 1; grid-row: auto; }
  .log-document-heading h2 { margin-bottom: 8px; }
  .inspection-log-item { grid-template-columns: minmax(0, 1fr) minmax(195px, 60%) auto; }
  .inspection-approval-line { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px; padding: 3px; }
  .inspection-log-status-summary { min-height: 28px; font-size: 11px; }
  .inspection-log-status-summary > span { padding: 0 5px; }
  .approval-complete-btn { margin: 0 1px; padding: 5px 4px; font-size: 9px; }
  .approval-signature-role { padding: 2px; font-size: 10px; }
  .approval-signer { font-size: 9px; }
}
.inspection-log-empty { padding: 32px; color: #c8eaf5; text-align: center; }

.log-detail-heading {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(141, 210, 225, .45);
  color: #f2ffff;
  font-size: 22px;
}

.log-detail-heading span { color: #9eeaf1; }

.log-inspector {
  margin-top: 12px;
  color: #a9cbd2;
  font-size: 14px;
}

.log-inspector strong { color: #e9fbff; }

.log-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 12px;
}

.log-detail-btn {
  border: 1px solid rgba(130, 234, 255, .7);
  border-radius: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(22, 137, 157, .92), rgba(7, 78, 96, .92));
  color: #f1ffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.log-detail-btn.secondary {
  background: rgba(8, 49, 61, .8);
}

.log-detail-btn.danger {
  border-color: rgba(255, 140, 131, .75);
  background: rgba(118, 44, 49, .78);
  color: #ffe7e4;
}

.log-equipment-card {
  border: 1px solid rgba(108, 205, 220, .5);
  border-radius: 6px;
  background: rgba(4, 35, 53, .8);
  overflow: hidden;
}

.log-equipment-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(141, 210, 225, .28);
}

.log-equipment-card header > span { color: #9eeaf1; }
.log-equipment-card header strong { flex: 1; color: #f2ffff; }
.log-status-정상 { color: #5ce299; }
.log-status-이상 { color: #ff786c; }
.log-status-비가동 { color: #d5e1e6; }
.log-status-점검대기 { color: #f0c878; }

.log-check-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) minmax(170px, 1fr) 100px;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(141, 210, 225, .15);
  color: #e9fbff;
}

.log-check-row em { color: #9cced7; font-style: normal; font-size: 13px; }
.log-check-row strong { color: #fff; text-align: right; }
.log-check-inactive strong { color: #ffb09c; }

@media (max-width: 700px) {
  .log-filters { grid-template-columns: repeat(2, 1fr); }
  .log-check-row { grid-template-columns: 1fr; gap: 4px; }
  .log-check-row strong { text-align: left; }
  .log-detail-heading { font-size: 17px; }
}

.detail-panel {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 24px;
  border: 2px solid rgba(57, 184, 212, .8);
  border-radius: 12px;
  background: rgba(5, 30, 45, .88);
  box-shadow: inset 0 0 24px rgba(34, 167, 201, .14), 0 0 12px rgba(35, 182, 213, .25);
}

.detail-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(141, 210, 225, .45);
}

.detail-number {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #00b65a;
  color: #fff;
  font-weight: 700;
}

.detail-heading h3 { color: #f2ffff; font-size: 24px; }
.detail-heading p { margin-top: 5px; color: #9cced7; }

.detail-status {
  margin-left: auto;
  color: #5ce299;
  font-size: 22px;
}

.detail-status-이상 { color: #ff786c; }
.detail-status-비가동 { color: #d5e1e6; }
.detail-status-점검대기 { color: #f0c878; }

.detail-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.detail-form label {
  display: grid;
  gap: 7px;
  color: #c8eaf5;
  font-size: 14px;
}

.detail-form input[type="number"] {
  height: 42px;
  padding: 8px;
  border: 1px solid rgba(145, 225, 237, .65);
  border-radius: 5px;
  background: rgba(235, 250, 255, .92);
  color: #17303b;
  font: inherit;
}

.detail-operating {
  align-self: end;
  display: flex !important;
  align-items: center;
  min-height: 42px;
}

.detail-operating input { width: 20px; height: 20px; accent-color: #38c7d6; }

.detail-save-btn {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  border: 1px solid #66e5ef;
  border-radius: 6px;
  background: rgba(15, 104, 124, .65);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.detail-save-btn:hover,
.detail-save-btn:focus { outline: none; box-shadow: 0 0 14px rgba(43, 220, 233, .7); }

/* 모달 */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-content {
  background: #102532;
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  text-align: center;
}

.modal[hidden] { display: none; }
.password-change-modal { z-index: 3000; }
.password-change-content {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  color: #edf8ff;
  text-align: left;
}
.password-change-content h2 { margin: 0 0 10px; color: #a9e8f0; }
.password-change-content > p { margin: 0 0 18px; color: #c2d8e2; }
.password-change-content form { display: grid; gap: 8px; }
.password-change-content label { margin-top: 6px; font-weight: 700; }
.password-change-content input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(118, 204, 208, .45);
  border-radius: 7px;
  background: #f4fbff;
  color: #17222a;
  font-size: 16px;
}
.password-policy-list { margin: 8px 0; padding-left: 24px; color: #ffd0d3; }
.password-policy-list li { margin: 4px 0; }
.password-policy-list li.is-valid { color: #9ce6bd; }
.password-change-content .login-message { margin: 0; }
.password-change-content .btn-primary { height: 54px; font-size: 18px; }

#reader {
  width: 100%;
  margin: 15px 0;
}

/* Login screen reference layout */
body {
  padding: 0;
  background-color: #072a40;
  background-image:
    linear-gradient(90deg, transparent 0 5.7%, rgba(90, 200, 224, .42) 5.7% 5.9%, transparent 5.9% 12.4%, rgba(90, 200, 224, .34) 12.4% 12.6%, transparent 12.6% 22.4%, rgba(90, 200, 224, .3) 22.4% 22.6%, transparent 22.6% 35.2%, rgba(90, 200, 224, .27) 35.2% 35.4%, transparent 35.4% 48.5%, rgba(90, 200, 224, .25) 48.5% 48.7%, transparent 48.7% 63%, rgba(90, 200, 224, .28) 63% 63.2%, transparent 63.2% 76%, rgba(90, 200, 224, .3) 76% 76.2%, transparent 76.2% 89%, rgba(90, 200, 224, .34) 89% 89.2%, transparent 89.2%),
    linear-gradient(0deg, transparent 0 4.5%, rgba(90, 200, 224, .35) 4.5% 4.7%, transparent 4.7% 18%, rgba(90, 200, 224, .3) 18% 18.2%, transparent 18.2% 34%, rgba(90, 200, 224, .32) 34% 34.2%, transparent 34.2% 52%, rgba(90, 200, 224, .3) 52% 52.2%, transparent 52.2% 68%, rgba(90, 200, 224, .3) 68% 68.2%, transparent 68.2% 84%, rgba(90, 200, 224, .28) 84% 84.2%, transparent 84.2%),
    radial-gradient(ellipse at 50% 49%, rgba(96, 221, 239, .25), transparent 32%),
    linear-gradient(135deg, #071e35 0%, #10465b 48%, #071b33 100%);
  background-size: 100% 100%;
}

body::before {
  background:
    linear-gradient(116deg, transparent 0 36%, rgba(119, 232, 241, .2) 36.2% 36.35%, transparent 36.55% 100%),
    linear-gradient(64deg, transparent 0 54%, rgba(119, 232, 241, .16) 54.2% 54.35%, transparent 54.55% 100%),
    radial-gradient(circle at 49% 48%, rgba(90, 231, 241, .18), transparent 27%);
  opacity: .9;
}

#app-container {
  width: 100vw;
  max-width: none;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#app-container::before { display: none; }
#page-login {
  padding: 0;
  background: url("assets/login-background.png") center center / cover no-repeat;
  overflow-y: auto;
}
#page-login::before,
#page-login::after {
  display: none;
}
.login-box { width: 410px; padding: 0; transform: translateY(-2px); }
.brand-wrap { margin-bottom: 26px; }
.brand-mark { width: 116px; height: 116px; position: relative; display: block; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18)); }
.brand-orb { position: absolute; width: 70px; height: 70px; border-radius: 50%; opacity: .82; }
.brand-orb-one { left: 4px; top: 21px; background: rgba(173, 213, 239, .88); }
.brand-orb-two { left: 42px; top: 10px; background: rgba(104, 163, 222, .84); }
.brand-orb-three { left: 27px; top: 39px; background: rgba(55, 117, 190, .9); }
.brand-word { position: absolute; left: 21px; top: 42px; z-index: 2; color: #fff; font-size: 25px; font-weight: 300; letter-spacing: -1.5px; }
.title { margin-bottom: 27px; font-size: 47px; line-height: 1; letter-spacing: 1px; font-weight: 400; color: #fff; text-shadow: 0 3px 4px rgba(0, 0, 0, .55); white-space: nowrap; }
.input-group { margin-bottom: 17px; }
.input-group input { height: 58px; padding: 8px 27px; border-radius: 10px; background: linear-gradient(180deg, rgba(245, 252, 255, .92), rgba(209, 232, 244, .88)); box-shadow: 0 3px 9px rgba(0, 0, 0, .22), inset 0 1px 2px rgba(255, 255, 255, .85); font-size: 28px; }
.input-group input::placeholder { color: #1a2730; opacity: .95; }
.checkbox-row { padding: 2px 0 19px; }
.checkbox-wrap { gap: 12px; font-size: 24px; color: #f3f8fb; text-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.checkmark { width: 32px; height: 32px; border-radius: 4px; background: rgba(122, 198, 244, .9); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 2px 5px rgba(0, 0, 0, .28); }
.checkbox-wrap input:checked + .checkmark { background: #63a6d7; border-color: #d9efff; }
.checkbox-wrap input:checked + .checkmark::after { left: 9px; top: 5px; width: 8px; height: 15px; border-width: 0 3px 3px 0; }
.btn-primary { height: 73px; border-radius: 40px; background: linear-gradient(180deg, #5796d1 0%, #3e83c5 100%); box-shadow: 0 6px 10px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .2); font-size: 29px; font-weight: 400; text-shadow: 0 2px 2px rgba(0, 0, 0, .25); }

#workbook-picker[hidden] {
  display: none !important;
}
.glow-effect:focus,
.glow-effect:active {
  transform: none;
  outline: none;
  border-color: #80f5ff !important;
  box-shadow: 0 0 12px #2bdce9, 0 0 30px rgba(43, 220, 233, .58), inset 0 0 18px rgba(43, 220, 233, .25);
  filter: brightness(1.16);
}

@media (max-width: 600px) {
  .login-box { width: min(410px, calc(100vw - 48px)); }
  .title { font-size: clamp(32px, 9vw, 47px); }
  .input-group input { font-size: 23px; }
  .checkbox-wrap { font-size: 20px; }
  .security-panel-heading, .security-event { align-items: stretch; flex-direction: column; }
}

.settings-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(960px, 100%);
  margin: 0 auto;
}
.settings-menu-card {
  position: relative;
  display: flex;
  aspect-ratio: 1;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 10px;
  border: 1px solid rgba(130, 202, 228, .45);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 47, 61, .96), rgba(10, 32, 43, .96));
  color: var(--white);
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(0, 180, 216, .65);
}
.settings-menu-card img { display: block; width: 74px; height: 74px; object-fit: contain; }
.settings-menu-card span { max-width: 100%; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.settings-menu-card small { color: var(--text-soft); font-size: 13px; line-height: 1.4; }
.settings-menu-card:hover,
.settings-menu-card:focus-visible {
  border-color: #80f5ff;
  outline: none;
  box-shadow: 0 0 12px #2bdce9, 0 0 30px rgba(43, 220, 233, .58), inset 0 0 18px rgba(43, 220, 233, .25);
  filter: brightness(1.16);
}
.settings-menu-card:focus-visible { outline: 2px solid #edf8ff; outline-offset: 3px; }
.settings-section[hidden],
#settings-menu[hidden] { display: none !important; }
.settings-section { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 12px; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 14px; width: min(1120px, 100%); }
.settings-section-heading h3 { font-size: 20px; }
.settings-section-back { flex: 0 0 auto; border: 1px solid rgba(144, 224, 239, .55); border-radius: 6px; padding: 8px 12px; color: #e5fbff; background: rgba(15, 104, 124, .55); cursor: pointer; }
.settings-section-back:hover,
.settings-section-back:focus-visible { outline: none; box-shadow: 0 0 12px #2bdce9, 0 0 24px rgba(43, 220, 233, .4); }
.settings-section .account-panel,
.settings-section .account-list-panel,
.settings-section .qr-panel { width: min(1120px, 100%); margin-left: auto; margin-right: auto; }
.settings-section .account-panel { margin-top: 0; }
.settings-section .qr-panel { margin-top: 0; }
.spec-change-panel {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: rgba(9, 29, 39, .78);
}
.spec-change-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.spec-change-toolbar h3 { margin-bottom: 5px; font-size: 18px; }
.spec-change-toolbar p { color: var(--text-soft); font-size: 13px; }
.spec-change-actions { display: flex; align-items: center; gap: 14px; }
.spec-change-actions strong { color: #8ce7ef; white-space: nowrap; }
.spec-change-list { min-height: 90px; }
.spec-change-table-wrap { overflow-x: auto; border: 1px solid rgba(130, 202, 228, .28); border-radius: 6px; }
.spec-change-table { width: 100%; border-collapse: collapse; text-align: left; }
.spec-change-table th,
.spec-change-table td { padding: 12px 14px; border-bottom: 1px solid rgba(130, 202, 228, .18); vertical-align: middle; }
.spec-change-table th { color: #91dce5; background: rgba(12, 57, 70, .82); font-size: 13px; font-weight: 700; white-space: nowrap; }
.spec-change-table td { color: var(--white); font-size: 14px; }
.spec-change-table tbody tr:last-child td { border-bottom: 0; }
.spec-change-table td:first-child { min-width: 175px; white-space: nowrap; }
.spec-change-table td:nth-child(2) { white-space: nowrap; }
.spec-change-table td:nth-child(3) { min-width: 190px; }
.spec-change-table td:nth-child(3) small { display: block; margin-top: 4px; color: var(--text-soft); font-size: 11px; }
.spec-change-table td:nth-child(4) { min-width: 170px; }
.spec-change-value { display: inline-block; max-width: 180px; overflow-wrap: anywhere; color: #d3e2e7; }
.spec-change-value.is-current { color: #9cf2ca; font-weight: 700; }
.spec-change-arrow { display: inline-block; margin: 0 9px; color: #ffad67; }
.spec-change-empty { display: grid; min-height: 120px; place-items: center; color: var(--text-soft); text-align: center; }
@media (max-width: 600px) {
  .settings-menu-grid { gap: 10px; }
  .settings-menu-card { gap: 5px; padding: 6px 3px; }
  .settings-menu-card img { width: 44px; height: 44px; }
  .settings-menu-card span { font-size: 14px; line-height: 1.1; }
  .settings-menu-card small { font-size: 10px; line-height: 1.2; }
  .settings-section-heading h3 { font-size: 17px; }
  .spec-change-panel { padding: 12px 9px; }
  .spec-change-toolbar { align-items: flex-start; }
  .spec-change-toolbar h3 { font-size: 16px; }
  .spec-change-actions { gap: 8px; }
  .spec-change-table { min-width: 760px; }
}
.login-message { min-height: 24px; margin-top: 12px; color: #ffd0d3; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.login-message.visible { animation: message-in .2s ease-out; }
.account-panel { background: rgba(9, 29, 39, .74); border: 1px solid var(--line-color); border-radius: 14px; padding: 20px; margin-bottom: 18px; }
#page-accounts { overflow-y: auto; }
.account-panel h3 { margin-bottom: 14px; }
.account-form { display: grid; grid-template-columns: 1fr 1fr 150px 120px; gap: 10px; }
.account-form input, .account-form select { min-width: 0; height: 45px; padding: 8px 12px; border: 1px solid rgba(144, 224, 239, .4); border-radius: 7px; background: rgba(255, 255, 255, .9); color: #17222a; font: inherit; }
.account-form .hub-button {
  min-height: 45px;
  border: 1px solid rgba(128, 245, 255, .65);
  border-radius: 7px;
  color: #f3fdff;
  background: linear-gradient(180deg, #17647a 0%, #0b3e52 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(180, 250, 255, .2);
  cursor: pointer;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
}
.account-form .hub-button:hover { background: linear-gradient(180deg, #23829a 0%, #10546a 100%); border-color: #a5f9ff; }
.account-list-panel { background: rgba(9, 29, 39, .74); border: 1px solid var(--line-color); border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.account-list-panel h3 { margin-bottom: 14px; }
.security-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.security-panel-heading p { margin: 0 0 14px; color: var(--text-soft); }
.account-list-panel h4 { margin: 18px 0 10px; }
.security-event-list { display: flex; flex-direction: column; gap: 8px; color: var(--text-soft); }
.security-event { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(144, 224, 239, .25); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.account-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.account-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border: 1px solid rgba(144, 224, 239, .35); border-radius: 10px; background: rgba(255, 255, 255, .05); }
.account-item > div { display: flex; flex-direction: column; gap: 5px; }
.account-item small { color: var(--text-soft); }
.account-actions { display: flex; align-items: center; gap: 8px; }
.account-fixed { color: #f4c28d; font-size: 14px; }
.account-signature-menu { position: relative; }
.account-signature-menu summary { list-style: none; border: 1px solid rgba(144, 224, 239, .38); border-radius: 6px; padding: 6px 9px; color: #c6e6eb; background: rgba(15, 104, 124, .22); cursor: pointer; font-size: 12px; }
.account-signature-menu summary::-webkit-details-marker { display: none; }
.account-signature-menu summary::after { content: ' ▾'; }
.account-signature-menu[open] summary { border-color: rgba(144, 224, 239, .7); color: #e5fbff; }
.account-signature-menu > div { position: absolute; z-index: 2; top: calc(100% + 5px); right: 0; display: grid; gap: 7px; min-width: 145px; padding: 10px; border: 1px solid rgba(144, 224, 239, .45); border-radius: 8px; background: #102b36; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.account-signature-menu small { color: var(--text-soft); white-space: nowrap; }
.account-signature-menu input[type="file"] { display: none; }
.account-signature-menu button { border: 1px solid rgba(144, 224, 239, .45); border-radius: 5px; padding: 6px 8px; color: #e5fbff; background: rgba(15, 104, 124, .55); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.account-edit, .account-cancel-btn { border: 1px solid rgba(144, 224, 239, .55); border-radius: 6px; padding: 7px 12px; color: #e5fbff; background: rgba(15, 104, 124, .55); cursor: pointer; }
.account-delete { border: 1px solid rgba(255, 140, 150, .55); border-radius: 6px; padding: 7px 12px; color: #ffd5d8; background: rgba(230, 57, 70, .24); cursor: pointer; }
.account-edit:hover, .account-edit:focus, .account-cancel-btn:hover, .account-cancel-btn:focus, .account-delete:hover, .account-delete:focus { outline: none; box-shadow: 0 0 9px rgba(43, 220, 233, .45); }
.account-delete:hover, .account-delete:focus { box-shadow: 0 0 9px rgba(255, 94, 87, .45); }
.account-list-empty { padding: 16px 0; color: var(--text-soft); }

@media (max-width: 600px) {
  .equipment-list-toolbar { justify-content: space-between; }
  .equipment-list-label { font-size: 13px; }
  .equipment-view-button { min-width: 68px; padding: 7px 10px; }
  .security-panel-heading, .security-event { align-items: stretch; flex-direction: column; }
}
.qr-panel { background: rgba(9, 29, 39, .74); border: 1px solid var(--line-color); border-radius: 14px; padding: 20px; margin-top: 18px; }
.qr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.qr-panel-head h3 { margin-bottom: 6px; }
.qr-panel-head p { color: var(--text-soft); font-size: 14px; }
.qr-panel-actions { display: flex; align-items: center; gap: 12px; }
.qr-select-all { display: inline-flex; align-items: center; gap: 6px; color: #eafaff; cursor: pointer; white-space: nowrap; }
.qr-select-all input, .qr-card-check input { accent-color: #00b4d8; }
.qr-print-all-btn, .qr-print-btn, .qr-hub-tab { border: 1px solid rgba(144, 224, 239, .45); border-radius: 7px; padding: 8px 13px; color: #eafaff; background: rgba(15, 67, 83, .82); cursor: pointer; }
.qr-print-notice { margin: -6px 0 14px; color: #a9dfe5; font-size: 13px; }
.qr-print-layout { display: none; }
.qr-hub-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.qr-hub-tab.active { border-color: #8cf8ff; background: rgba(0, 180, 216, .55); box-shadow: 0 0 12px rgba(49, 232, 242, .45); }
.equipment-qr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; max-height: 390px; overflow-y: auto; padding-right: 4px; }
.equipment-qr-card { position: relative; display: grid; grid-template-columns: 24px 128px minmax(150px, 1fr) auto; align-items: center; gap: 14px; padding: 12px; border: 1px solid rgba(144, 224, 239, .3); border-radius: 10px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.equipment-qr-card.selected { border-color: #8cf8ff; background: rgba(0, 180, 216, .18); box-shadow: 0 0 12px rgba(49, 232, 242, .25); }
.qr-card-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.equipment-qr-code { width: 128px; height: 128px; padding: 4px; background: #fff; border-radius: 5px; }
.equipment-qr-code img { display: block; width: 120px; height: 120px; }
.equipment-qr-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.equipment-qr-info strong { color: #f4ffff; font-size: 15px; letter-spacing: .2px; }
.equipment-qr-info span { color: var(--text-soft); font-size: 14px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.equipment-qr-info small { color: #8bdce7; font-size: 12px; line-height: 1.35; word-break: keep-all; }
.qr-print-btn { align-self: end; white-space: nowrap; }
.loading-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(2, 16, 24, .7); backdrop-filter: blur(3px); }
.loading-overlay[hidden] { display: none; }
.loading-panel { min-width: 270px; padding: 34px 42px; display: flex; flex-direction: column; align-items: center; gap: 9px; border: 1px solid rgba(128, 245, 255, .55); border-radius: 16px; background: rgba(3, 28, 38, .94); box-shadow: 0 0 28px rgba(43, 220, 233, .3), inset 0 0 18px rgba(43, 220, 233, .08); color: #edf8ff; text-align: center; }
.loading-panel strong { font-size: 20px; }
.loading-panel span { color: #a9dfe5; font-size: 14px; }
.loading-spinner { width: 54px; height: 54px; margin-bottom: 10px; border: 5px solid rgba(128, 245, 255, .2); border-top-color: #80f5ff; border-right-color: #2bdce9; border-radius: 50%; animation: loading-spin 1s linear infinite; box-shadow: 0 0 16px rgba(43, 220, 233, .7); }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes message-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

@media print {
  @page { size: A4 portrait; margin: 0; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #fff !important; padding: 0; color: #111; }
  .loading-overlay { display: none !important; }
  body::before, #app-container { display: none !important; }
  .qr-print-layout { display: block !important; }
  .qr-print-layout .page { width: 210mm; height: 297mm; padding: 10mm 0 0 7mm; display: grid; grid-template-columns: repeat(3, 63.5mm); grid-template-rows: repeat(6, 45mm); column-gap: 2.5mm; row-gap: 0; page-break-after: always; break-after: page; }
  .qr-print-layout .page:last-child { page-break-after: auto; break-after: auto; }
  .qr-print-layout .qc { width: 63.5mm; height: 45mm; padding: 1.2mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
  .qr-print-layout .qc img { width: 30mm; height: 30mm; display: block; }
  .qr-print-layout .qn { font-size: 8pt; font-weight: 700; line-height: 1.1; }
  .qr-print-layout .qs { font-size: 5.5pt; color: #333; line-height: 1.1; }
  body.inspection-log-printing { display: block !important; min-height: 0; }
  body.inspection-log-printing::before,
  body.inspection-log-printing #app-container::before { display: none !important; }
  body.inspection-log-printing #app-container {
    display: block !important;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
    backdrop-filter: none;
  }
  body.inspection-log-printing .qr-print-layout { display: none !important; }
  body.inspection-log-printing .page:not(#page-log-detail) { display: none !important; }
  body.inspection-log-printing #page-log-detail {
    display: block !important;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    background: #fff !important;
  }
  body.inspection-log-printing #page-log-detail > .app-header,
  body.inspection-log-printing #page-log-detail > .page-title,
  body.inspection-log-printing .log-detail-actions,
  body.inspection-log-printing .approval-complete-btn { display: none !important; }
  body.inspection-log-printing .log-detail-panel {
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 8mm;
    border: 0;
    border-radius: 0;
    background: #fff !important;
    color: #111 !important;
    box-shadow: none;
  }
  body.inspection-log-printing .log-document-top { grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); border-color: #444; }
  body.inspection-log-printing .log-document-heading h2,
  body.inspection-log-printing .log-document-meta { color: #111 !important; }
  body.inspection-log-printing .inspection-approval-line { border-color: #333; background: #fff; }
  body.inspection-log-printing .inspection-approval-label,
  body.inspection-log-printing .approval-signature-role,
  body.inspection-log-printing .approval-signer,
  body.inspection-log-printing .approval-date { border-color: #777; color: #111 !important; }
  body.inspection-log-printing .approval-signature-cell { border-color: #777; }
  body.inspection-log-printing .log-detail-list { max-height: none; overflow: visible; }
  body.inspection-log-printing .log-equipment-card { break-inside: avoid; border-color: #777; background: #fff; }
  body.inspection-log-printing .log-equipment-card header { border-color: #aaa; }
  body.inspection-log-printing .log-equipment-card header strong,
  body.inspection-log-printing .log-check-row,
  body.inspection-log-printing .log-check-row strong { color: #111 !important; }
  body.inspection-log-printing .log-check-row { border-color: #ddd; }
  body.inspection-log-printing .log-detail-panel > .inspection-log-status-summary {
    border-top-color: #999;
    color: #111 !important;
  }
  body.inspection-log-printing .inspection-log-status-summary > span + span { border-left-color: #bbb; }
  body.inspection-log-printing .inspection-log-status-summary .status-green { color: #18864b !important; }
  body.inspection-log-printing .inspection-log-status-summary .status-red { color: #c43e35 !important; }
  body.inspection-log-printing .inspection-log-status-summary .status-gray { color: #59666b !important; }
  body.inspection-log-printing .log-detail-panel > .inspection-log-status-summary { break-inside: avoid; }
}

@media (max-width: 700px) {
  .qr-panel-head { align-items: flex-start; flex-direction: column; }
  .equipment-qr-list { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .inspection-summary {
    grid-template-columns: 1fr;
  }

  .progress-info { font-size: 18px; }
  .status-counts { font-size: 15px; }
  .status-counts > span + span { padding-left: 8px; }
  .scan-trigger-btn { min-height: 100px; flex-direction: row; }
  .scan-trigger-btn img { width: 64px; height: 64px; }

  .page:not(#page-login):not(#page-main) .app-header {
    padding: 0 12px;
  }

  .page:not(#page-login):not(#page-main) .user-info {
    font-size: 15px;
    gap: 7px;
  }

  .page:not(#page-login):not(#page-main) .btn-logout {
    padding: 6px 10px;
    font-size: 13px;
  }

  .hub-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .account-form { grid-template-columns: 1fr 1fr; }
  .account-form select, .account-form .hub-button { width: 100%; }
}

/* 로그인 화면과 동일한 원본 배경을 모든 페이지에서 사용 */
body {
  background: url("assets/login-background.png") center center / cover fixed no-repeat;
}

#app-container {
  background: transparent;
}

.page {
  background: url("assets/login-background.png") center center / cover no-repeat;
}

/* Main menu reference layout */
#page-main {
  padding: 0;
  background: url("assets/login-background.png") center center / cover no-repeat;
}

#page-main .app-header {
  height: 102px;
  flex: 0 0 102px;
  padding: 0 35px;
  margin: 0;
  border-bottom: 1px solid rgba(118, 204, 208, .22);
  background: rgba(3, 28, 38, .76);
  position: relative;
}

#page-main .settings-shortcut {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

#page-main .settings-shortcut img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.65) contrast(.82);
}

#page-main .settings-shortcut:active,
#page-main .settings-shortcut:focus,
.btn-back:active,
.btn-back:focus {
  outline: none;
  border-color: #8cf8ff;
  box-shadow: 0 0 12px #31e8f2, 0 0 30px rgba(49, 232, 242, .65), inset 0 0 14px rgba(49, 232, 242, .35);
}

#page-main .logo-small {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 84px;
  height: 84px;
}

#page-main .logo-small img {
  display: block;
  width: 84px;
  height: 85px;
  object-fit: contain;
}

#page-main .user-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #edf8ff;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7);
}

#page-main .btn-logout {
  padding: 7px 18px;
  border-radius: 7px;
  border-color: rgba(94, 188, 197, .55);
  background: rgba(3, 42, 53, .8);
  color: #a9dfe5;
  font-size: 18px;
}

#page-main .menu-grid {
  width: min(820px, calc(100% - 80px));
  height: calc(100vh - 190px);
  flex: 0 1 auto;
  min-height: 0;
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

#page-main .menu-card {
  min-height: 0;
  border: 2px solid rgba(93, 173, 181, .86);
  border-radius: 4px;
  background: rgba(7, 55, 63, .55);
  box-shadow: inset 0 0 35px rgba(71, 178, 185, .08), 0 2px 7px rgba(0, 0, 0, .25);
}

#page-main .menu-card:focus,
#page-main .menu-card:active {
  outline: none;
  transform: none;
  border-color: #80f5ff;
  box-shadow: 0 0 12px #2bdce9, 0 0 32px rgba(43, 220, 233, .62), inset 0 0 22px rgba(43, 220, 233, .25);
  filter: brightness(1.2);
}

#page-main .menu-card .icon {
  display: block;
  width: 105px;
  height: 105px;
  object-fit: contain;
  margin: 0 0 10px;
  filter: grayscale(1) brightness(1.7) contrast(.85) drop-shadow(0 3px 2px rgba(0, 0, 0, .75));
}

#page-main .menu-card .issue-icon-active {
  filter: saturate(1.5) brightness(1.15) drop-shadow(0 0 14px rgba(255, 39, 39, .95));
}

#page-main .menu-card #issue-menu-icon {
  filter: saturate(1.45) brightness(1.05) drop-shadow(0 0 8px rgba(255, 39, 39, .65));
}

#page-main .menu-card #issue-menu-icon.issue-icon-active {
  filter: saturate(1.6) brightness(1.15) drop-shadow(0 0 16px rgba(255, 39, 39, 1));
}

#page-main .menu-card #issue-menu-icon.issue-icon-active {
  animation: issue-icon-pulse 600ms ease-in-out infinite alternate;
  will-change: opacity, filter;
}

@keyframes issue-icon-pulse {
  from {
    opacity: .35;
    filter: saturate(1.4) brightness(.9) drop-shadow(0 0 6px rgba(255, 39, 39, .55));
  }
  to {
    opacity: 1;
    filter: saturate(1.8) brightness(1.2) drop-shadow(0 0 18px rgba(255, 39, 39, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-main .menu-card #issue-menu-icon.issue-icon-active {
    animation: none;
    opacity: 1;
  }
}

#page-main .menu-card .menu-title {
  color: #f5ffff;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 3px 3px rgba(0, 0, 0, .85);
}

#page-main .badge {
  right: 16px;
  bottom: 10px;
  min-width: 107px;
  padding: 8px 12px;
  border: 1px solid rgba(87, 184, 190, .8);
  border-radius: 2px;
  background: rgba(5, 48, 58, .68);
  color: #9ed9dc;
  font-size: 20px;
  text-align: center;
}

#page-main .badge-danger { color: #a9dfe5; }
#page-main .badge-warning { color: #b8e6e6; }
@media (max-width: 700px) {
  #page-main .app-header { padding: 0 16px; }
  #page-main .user-info { font-size: 15px; gap: 7px; }
  #page-main .btn-logout { padding: 6px 10px; font-size: 13px; }
  #page-main .menu-grid { width: calc(100% - 28px); height: auto; flex: 1; margin-top: 24px; grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: 12px; }
  #page-main .menu-card .icon { width: 62px; height: 62px; }
  #page-main .menu-card .menu-title { font-size: 20px; }
  #page-main .badge { min-width: 72px; padding: 5px 8px; font-size: 13px; }

  #page-hub .page-title {
    font-size: 34px;
  }

  #page-hub .hub-grid {
    width: calc(100% - 8px);
    height: auto;
    min-height: 0;
    flex: 1;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #page-hub .hub-image {
    width: 100%;
    height: auto;
    max-height: 100%;
  }

  .eq-item {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px;
  }

  .eq-main {
    flex-basis: calc(100% - 80px);
    min-width: 0;
  }

  .eq-spec { flex: 1 1 100%; }
  .eq-status { margin-left: auto; }
}

.detail-table-wrap {
  width: 100%;
  max-height: 480px;
  margin-top: 20px;
  overflow: auto;
  border: 1px solid rgba(108, 205, 220, .5);
  border-radius: 6px;
}

.workbook-empty {
  padding: 18px;
  border: 1px solid rgba(108, 205, 220, .5);
  border-radius: 6px 6px 0 0;
  background: rgba(4, 35, 53, .72);
  color: #c8eaf5;
  text-align: center;
}

.workbook-empty button {
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid #66e5ef;
  border-radius: 5px;
  background: rgba(15, 104, 124, .65);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.issue-history-panel {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 2px solid rgba(57, 184, 212, .8);
  border-radius: 12px;
  background: rgba(5, 30, 45, .88);
  box-shadow: inset 0 0 24px rgba(34, 167, 201, .14), 0 0 12px rgba(35, 182, 213, .25);
}

.issue-history-head {
  display: flex;
  justify-content: space-between;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(141, 210, 225, .45);
  color: #e9fbff;
  font-size: 21px;
}

.issue-history-head span { color: #ff786c; }

.issue-history-list {
  display: grid;
  gap: 10px;
  max-height: 560px;
  padding-top: 14px;
  overflow-y: auto;
}

.issue-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 120, 108, .55);
  border-left: 5px solid #ff4c47;
  border-radius: 6px;
  background: rgba(55, 24, 31, .72);
}

.issue-history-item.acknowledged {
  border-color: rgba(108, 205, 220, .42);
  border-left-color: #6d8b96;
  background: rgba(4, 35, 53, .72);
}

.issue-history-item > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.issue-history-item strong { color: #ffaaa1; font-size: 16px; }
.issue-history-item.acknowledged strong { color: #b8d1d7; }
.issue-history-item span { color: #e9fbff; }
.issue-history-item small { color: #f2c7c2; line-height: 1.4; }
.issue-history-item .issue-inspector { color: #c7e8ef; }

.issue-history-item.acknowledged small { color: #9cb8bf; }

.issue-history-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.issue-unread,
.issue-acknowledged {
  margin-left: 8px;
  font-size: 12px;
  font-style: normal;
}

.issue-unread { color: #ff786c; }
.issue-acknowledged { color: #8faab1; }

.issue-history-item button {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid #ff8c83;
  border-radius: 5px;
  background: rgba(137, 39, 45, .72);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.issue-history-item .issue-delete-btn {
  border-color: rgba(177, 199, 205, .7);
  background: rgba(73, 92, 99, .72);
  color: #e5f0f2;
}

.issue-history-item button:hover,
.issue-history-item button:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 75, 69, .75);
}

.issue-history-empty {
  padding: 40px 16px;
  color: #c8eaf5;
  text-align: center;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  color: #e9fbff;
}

.detail-table th,
.detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(141, 210, 225, .25);
  text-align: left;
}

.detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #082c40;
  color: #a8edf5;
  font-size: 14px;
}

.detail-table td { background: rgba(4, 35, 53, .72); }

.di-pump-item-row td {
  padding: 5px 7px;
}

.detail-point-cell {
  white-space: nowrap;
}

.di-pump-item-row .detail-point-cell {
  white-space: nowrap;
}

.di-pump-label {
  display: inline-block;
  max-width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.di-pump-controls {
  display: inline-flex;
  margin-left: 4px;
  vertical-align: middle;
}

.di-pump-toggle {
  min-width: 40px;
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid rgba(145, 225, 237, .5);
  border-radius: 4px;
  color: #dffaff;
  background: rgba(7, 65, 81, .9);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.di-pump-active.selected {
  border-color: #55d69b;
  color: #d9fff0;
  background: #087b58;
}

.di-pump-inactive.selected {
  border-color: #ef9b82;
  color: #fff0ed;
  background: #a44236;
}

.di-pump-item-row.is-di-pump-inactive .detail-item-status {
  color: #ffb09c;
  font-weight: 700;
}

.detail-spec-input,
.detail-value-input {
  width: 100%;
  min-width: 90px;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(145, 225, 237, .55);
  border-radius: 4px;
  background: rgba(235, 250, 255, .94);
  color: #17303b;
  font: inherit;
}

.detail-value-input:disabled {
  background: rgba(160, 180, 188, .55);
  color: #586b72;
  cursor: not-allowed;
  opacity: .72;
}

.numeric-input-wrap {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.numeric-input-wrap .detail-value-input {
  flex: 1;
  min-width: 90px;
}

.numeric-sign-toggle {
  flex: 0 0 38px;
  min-height: 34px;
  border: 1px solid rgba(145, 225, 237, .65);
  border-radius: 4px;
  background: rgba(7, 65, 81, .9);
  color: #e9fbff;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
}

.numeric-sign-toggle:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.pv-pump-point {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pv-pump-point strong {
  color: #a8edf5;
  white-space: nowrap;
}

.pv-pump-controls {
  display: inline-flex;
  gap: 5px;
}

.pv-pump-toggle {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(145, 225, 237, .55);
  border-radius: 4px;
  background: rgba(7, 65, 81, .9);
  color: #e9fbff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.pv-pump-active.selected {
  border-color: #55d69b;
  background: #087b58;
}

.pv-pump-inactive.selected {
  border-color: #ef9b82;
  background: #a44236;
}

.pv-pump-control-row td {
  padding: 8px 12px;
  background: rgba(7, 52, 69, .95);
}

.pv-pump-field-cell {
  font-weight: 600;
}

.pv-pump-item-row[data-pv-pump-number] .detail-value-input:disabled {
  box-shadow: inset 0 0 0 1px rgba(82, 99, 105, .25);
}

.detail-spec-cell {
  white-space: nowrap;
}

.detail-spec-display {
  display: inline-block;
  min-width: 74px;
  margin-right: 6px;
}

.spec-edit-btn,
.spec-save-btn {
  padding: 5px 8px;
  border: 1px solid rgba(145, 225, 237, .65);
  border-radius: 4px;
  background: rgba(7, 65, 81, .9);
  color: #e9fbff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.spec-edit-btn:hover,
.spec-save-btn:hover,
.spec-edit-btn:focus,
.spec-save-btn:focus {
  outline: none;
  border-color: #80f5ff;
  box-shadow: 0 0 8px rgba(43, 220, 233, .65);
}

/* 반응형 레이아웃: 휴대폰과 태블릿 */
@media (max-width: 1100px) {
  body {
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
  }

  #app-container {
    width: 100%;
    min-height: 100dvh;
    height: auto;
    overflow: hidden;
  }

  .page {
    min-height: 100dvh;
    height: auto;
  }

  #page-hub .hub-grid {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  #page-hub .hub-image {
    width: 100%;
    height: auto;
    aspect-ratio: 725 / 833;
    max-height: 52dvh;
    object-fit: cover;
  }

  #page-hub .hub-card:first-child .hub-image {
    height: auto;
    transform: none;
  }

  .equipment-qr-list {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  }
}

@media (max-width: 700px) {
  #page-main {
    overflow-y: auto;
  }

  .page:not(#page-login):not(#page-main) {
    padding: 0 12px 16px;
    overflow-y: auto;
  }

  .page:not(#page-login):not(#page-main) .app-header {
    height: 72px;
    flex-basis: 72px;
    margin: 0 -12px 14px;
    padding: 0 10px;
  }

  .page:not(#page-login):not(#page-main) .logo-home-button,
  #page-hub .logo-home-button {
    top: 6px;
    width: 60px;
    height: 60px;
  }

  .page:not(#page-login):not(#page-main) .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button .hub-header-logo {
    width: 60px;
    height: 60px;
  }

  .page:not(#page-login):not(#page-main) .btn-back {
    width: 56px;
    height: 52px;
  }

  .page:not(#page-login):not(#page-main) .user-info {
    max-width: 46%;
    font-size: 12px;
    gap: 5px;
  }

  .page:not(#page-login):not(#page-main) .btn-logout {
    padding: 5px 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  #page-main .app-header {
    height: 72px;
    flex-basis: 72px;
    padding: 0 10px;
  }

  #page-main .settings-shortcut {
    width: 58px;
    height: 58px;
  }

  #page-main .user-info {
    max-width: 48%;
    font-size: 12px;
    gap: 5px;
  }

  #page-main .btn-logout {
    padding: 5px 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  #page-main .menu-grid {
    width: calc(100% - 24px);
    height: auto;
    min-height: 0;
    margin: 16px auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(132px, auto);
    gap: 12px;
  }

  #page-main .menu-card .icon {
    width: 58px;
    height: 58px;
  }

  #page-main .menu-card .menu-title {
    font-size: clamp(16px, 5vw, 20px);
    text-align: center;
  }

  #page-main .badge {
    right: 8px;
    bottom: 8px;
    min-width: 62px;
    padding: 4px 6px;
    font-size: 12px;
  }

  #page-hub .page-title {
    margin-bottom: 14px;
    font-size: clamp(25px, 8vw, 34px);
  }

  #page-hub .hub-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, auto));
    gap: 12px;
  }

  #page-hub .hub-image {
    aspect-ratio: 725 / 420;
    max-height: 38dvh;
    object-fit: cover;
  }

  .page-title {
    font-size: clamp(21px, 6vw, 28px);
    margin-bottom: 14px;
  }

  .inspection-summary {
    gap: 10px;
    margin-bottom: 12px;
  }

  .progress-panel {
    padding: 12px;
  }

  .progress-info {
    font-size: 15px;
  }

  .status-counts {
    flex-wrap: wrap;
    gap: 5px 10px;
    justify-content: flex-start;
    min-height: 36px;
    font-size: 12px;
  }

  .status-counts > span + span {
    padding-left: 10px;
  }

  .scan-trigger-btn {
    min-height: 74px;
    flex-direction: row;
  }

  .scan-trigger-btn img {
    width: 48px;
    height: 48px;
  }

  .eq-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 8px;
    padding: 4px 0;
  }

  .eq-number {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    margin-right: -7px;
  }

  .eq-main {
    min-height: 50px;
    padding: 8px 12px 8px 16px;
  }

  .eq-main strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .eq-status-wrap {
    grid-column: 2;
    width: 100%;
    flex-basis: auto;
    margin: 4px 0 0;
  }

  .eq-status {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 14px;
  }

  .account-panel,
  .qr-panel,
  .log-panel,
  .log-detail-panel,
  .detail-panel,
  .issue-history-panel {
    padding: 12px;
    border-radius: 8px;
  }

  .account-form {
    grid-template-columns: 1fr;
  }

  .qr-panel-head,
  .qr-panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .qr-print-all-btn,
  .qr-hub-tab {
    min-height: 40px;
  }

  .equipment-qr-card {
    grid-template-columns: 24px 88px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .equipment-qr-code {
    width: 88px;
    height: 88px;
  }

  .equipment-qr-code img {
    width: 80px;
    height: 80px;
  }

  .equipment-qr-info strong {
    font-size: 13px;
  }

  .equipment-qr-info span {
    font-size: 12px;
  }

  .qr-print-btn {
    grid-column: 3;
    justify-self: start;
  }

  .detail-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .detail-heading h3 {
    font-size: 17px;
  }

  .detail-status {
    width: 100%;
    margin-left: 0;
    font-size: 17px;
  }

  .detail-form {
    grid-template-columns: 1fr;
  }

  .log-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-history-item {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .issue-history-actions {
    justify-content: flex-end;
  }

  .modal-content {
    width: min(400px, calc(100vw - 24px));
  }
}

@media (max-width: 420px) {
  .intro-sound-options,
  .log-filters {
    grid-template-columns: 1fr;
  }

  .intro-sound-option {
    padding: 8px 10px;
  }

  .login-box {
    width: calc(100vw - 32px);
    max-width: 410px;
    margin: auto;
    transform: none;
  }

  #page-login {
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }

  .brand-mark {
    width: 92px;
    height: 92px;
  }

  .title {
    font-size: clamp(29px, 9vw, 42px);
    white-space: normal;
  }

  .input-group input {
    height: 50px;
    padding: 8px 16px;
    font-size: 21px;
  }

  .btn-primary {
    height: 58px;
    font-size: 23px;
  }
}

/* 휴대폰 방향 전환 대응 */
@media (max-width: 700px) and (orientation: portrait) {
  #page-main .logo-home-button,
  #page-main .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button .hub-header-logo,
  #page-hub .logo-home-button,
  #page-hub .logo-home-button img {
    width: 64px;
    height: 64px;
  }

  #page-main .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  #page-hub .logo-home-button {
    top: 4px;
  }

  #page-main .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(128px, 1fr);
    align-content: start;
  }

  #page-main .menu-card {
    min-width: 0;
    min-height: 128px;
    padding: 12px 6px 28px;
  }

  #page-main .menu-card .icon {
    width: clamp(42px, 15vw, 62px);
    height: clamp(42px, 15vw, 62px);
    margin-bottom: 7px;
  }

  #page-main .menu-card .menu-title {
    max-width: 100%;
    font-size: clamp(13px, 4vw, 18px);
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
  }

  #page-main .badge {
    right: 5px;
    bottom: 5px;
    min-width: 0;
    padding: 3px 5px;
    font-size: 10px;
  }

  #page-hub .hub-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(0, auto);
  }

  #page-hub .hub-image {
    width: 100%;
    height: min(38dvh, 240px);
    aspect-ratio: 725 / 420;
    object-fit: cover;
  }
}

@media (max-width: 1100px) and (orientation: landscape) {
  #page-main .app-header,
  .page:not(#page-login):not(#page-main) .app-header {
    height: 88px;
    flex-basis: 88px;
  }

  #page-main .logo-home-button,
  #page-main .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button .hub-header-logo,
  #page-hub .logo-home-button,
  #page-hub .logo-home-button img {
    width: 78px;
    height: 79px;
  }

  #page-main .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  #page-hub .logo-home-button {
    top: 4px;
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  #app-container,
  .page {
    min-height: 100dvh;
  }

  #page-main .app-header,
  .page:not(#page-login):not(#page-main) .app-header {
    height: 58px;
    flex-basis: 58px;
    margin-bottom: 8px;
  }

  #page-main .settings-shortcut {
    width: 48px;
    height: 48px;
  }

  #page-main .user-info,
  .page:not(#page-login):not(#page-main) .user-info {
    font-size: 11px;
  }

  #page-main .menu-grid {
    width: calc(100% - 28px);
    height: auto;
    min-height: 0;
    margin: 10px auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(100px, 1fr);
    gap: 10px;
  }

  #page-main .menu-card {
    min-height: 100px;
    padding: 8px 6px 24px;
  }

  #page-main .menu-card .icon {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
  }

  #page-main .menu-card .menu-title {
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
    word-break: keep-all;
  }

  #page-main .badge {
    right: 5px;
    bottom: 4px;
    padding: 2px 5px;
    font-size: 9px;
  }

  #page-hub .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }

  #page-hub .hub-image {
    width: 100%;
    height: min(62dvh, 260px);
    aspect-ratio: 725 / 420;
    object-fit: cover;
  }

  #page-hub .page-title {
    margin-bottom: 8px;
    font-size: 24px;
  }

  .detail-table-wrap {
    max-height: 55dvh;
  }
}

#page-hub .hub-grid {
  transform: scale(.7);
  transform-origin: top center;
}

.detail-spec-cell .detail-spec-input {
  width: 108px;
  min-width: 0;
  margin-right: 4px;
}

.detail-item-status {
  color: #f0c878;
  font-weight: 700;
  white-space: nowrap;
}

.ox-options {
  display: flex;
  gap: 5px;
}

.ox-option {
  min-width: 38px;
  height: 34px;
  border: 1px solid rgba(145, 225, 237, .65);
  border-radius: 4px;
  background: rgba(7, 65, 81, .9);
  color: #e9fbff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.ox-option.selected {
  border-color: #80f5ff;
  background: #079cae;
  box-shadow: 0 0 9px rgba(43, 220, 233, .75);
}

.ox-option:disabled { opacity: .45; cursor: not-allowed; }

.detail-operating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #c8eaf5;
}

.detail-operating input { width: 20px; height: 20px; accent-color: #38c7d6; }

/* 가로형 휴대폰과 작은 태블릿의 메인 메뉴 비율 */
@media (max-width: 1100px) and (orientation: landscape) {
  #page-main .app-header {
    height: 72px;
    flex-basis: 72px;
  }

  #page-main .logo-home-button,
  #page-main .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button img,
  .page:not(#page-login):not(#page-main) .logo-home-button .hub-header-logo,
  #page-hub .logo-home-button,
  #page-hub .logo-home-button img {
    width: 64px;
    height: 64px;
  }

  #page-main .logo-home-button,
  .page:not(#page-login):not(#page-main) .logo-home-button,
  #page-hub .logo-home-button {
    top: 3px;
  }

  #page-main .menu-grid {
    width: calc(100% - 28px);
    height: calc(100dvh - 86px);
    margin: 10px auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #page-main .menu-card {
    min-height: 0;
    padding: 10px 8px 24px;
  }

  #page-main .menu-card .icon {
    width: clamp(48px, 10vh, 68px);
    height: clamp(48px, 10vh, 68px);
    margin-bottom: 5px;
  }

  #page-main .menu-card .menu-title {
    max-width: 100%;
    font-size: clamp(16px, 3.2vh, 22px);
    line-height: 1.15;
    white-space: nowrap;
  }

  #page-main .badge {
    right: 8px;
    bottom: 6px;
    min-width: 62px;
    padding: 4px 7px;
    font-size: 12px;
  }

  #page-hub .hub-grid {
    width: 100%;
    height: calc(100dvh - 128px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: 10px;
    align-items: center;
  }

  #page-hub .hub-card {
    width: 100%;
    height: 100%;
  }

  #page-hub .hub-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  #page-hub .hub-grid {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
  }

  #page-hub .hub-card {
    width: 100%;
    height: auto;
  }

  #page-hub .hub-image {
    width: min(100%, 403px);
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

@media (max-width: 1100px) and (orientation: portrait) {
  #page-equipment-detail .detail-panel {
    width: 100%;
    padding: 12px;
  }

  #page-equipment-detail .detail-table-wrap {
    overflow-x: hidden;
  }

  #page-equipment-detail .detail-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #page-equipment-detail .detail-table th,
  #page-equipment-detail .detail-table td {
    padding: 7px 5px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  #page-equipment-detail .detail-table th:nth-child(1),
  #page-equipment-detail .detail-table td:nth-child(1) { width: 30%; }
  #page-equipment-detail .detail-table th:nth-child(2),
  #page-equipment-detail .detail-table td:nth-child(2) { width: 17%; }
  #page-equipment-detail .detail-table th:nth-child(3),
  #page-equipment-detail .detail-table td:nth-child(3) { width: 11%; }
  #page-equipment-detail .detail-table th:nth-child(4),
  #page-equipment-detail .detail-table td:nth-child(4) { width: 25%; }
  #page-equipment-detail .detail-table th:nth-child(5),
  #page-equipment-detail .detail-table td:nth-child(5) { width: 17%; }

  #page-equipment-detail .detail-point-cell,
  #page-equipment-detail .detail-spec-cell {
    white-space: normal;
  }

  #page-equipment-detail .di-pump-label {
    white-space: nowrap;
  }

  #page-equipment-detail .detail-spec-display {
    min-width: 0;
    margin-right: 2px;
  }

  #page-equipment-detail .spec-edit-btn,
  #page-equipment-detail .spec-save-btn {
    padding: 4px 5px;
    font-size: 11px;
  }

  #page-equipment-detail .detail-value-input {
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
  }

  #page-equipment-detail .numeric-input-wrap {
    gap: 2px;
  }

  #page-equipment-detail .numeric-input-wrap .detail-value-input {
    min-width: 0;
  }

  #page-equipment-detail .numeric-sign-toggle {
    flex-basis: 26px;
  }
}

@media (min-width: 500px) and (max-width: 1100px) and (orientation: portrait) {
  #page-equipment-detail .detail-table th:nth-child(1),
  #page-equipment-detail .detail-table td:nth-child(1) { width: 35%; }
  #page-equipment-detail .detail-table th:nth-child(2),
  #page-equipment-detail .detail-table td:nth-child(2) { width: 22%; }
  #page-equipment-detail .detail-table th:nth-child(3),
  #page-equipment-detail .detail-table td:nth-child(3) { width: 8%; }
  #page-equipment-detail .detail-table th:nth-child(4),
  #page-equipment-detail .detail-table td:nth-child(4) { width: 25%; }
  #page-equipment-detail .detail-table th:nth-child(5),
  #page-equipment-detail .detail-table td:nth-child(5) { width: 10%; }

  #page-equipment-detail .detail-table td:nth-child(4) .detail-value-input {
    font-size: 12px;
  }

  #page-equipment-detail .detail-spec-cell {
    white-space: nowrap;
  }

  #page-equipment-detail .detail-spec-display {
    min-width: 0;
    margin-right: 2px;
    white-space: nowrap;
  }

  #page-equipment-detail .spec-edit-btn {
    padding: 3px 4px;
    white-space: nowrap;
  }

  #page-equipment-detail .di-pump-label {
    max-width: calc(100% - 50px);
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  #page-equipment-detail .di-pump-item-row .detail-point-cell {
    white-space: normal;
  }
}

@media (max-width: 1100px) {
  #page-equipment-detail .detail-spec-cell .detail-spec-input {
    display: inline-block;
    width: calc(100% - 40px);
    min-width: 0;
    margin-right: 2px;
    padding: 4px;
    vertical-align: middle;
  }

  #page-equipment-detail .detail-spec-cell .spec-save-btn {
    padding: 4px 5px;
    vertical-align: middle;
    white-space: nowrap;
  }
}