/* ============================================================
   HAKCA Cafe — Apple Liquid Glass Design System
   iOS 26 / macOS Tahoe inspired translucent glass UI
   ============================================================ */

/* ── 1. CSS Variables ──────────────────────────────────────── */
:root {
  color-scheme: light only;
  --glass-white-subtle: rgba(255, 255, 255, 0.18);
  --glass-white-mid: rgba(255, 255, 255, 0.28);
  --glass-white-strong: rgba(255, 255, 255, 0.48);
  --glass-white-heavy: rgba(255, 255, 255, 0.72);

  --glass-border-subtle: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.50);
  --glass-border-strong: rgba(255, 255, 255, 0.68);

  --glass-blur: blur(40px) saturate(180%) brightness(1.06);
  --glass-blur-nav: blur(52px) saturate(200%) brightness(1.08);
  --glass-blur-heavy: blur(64px) saturate(220%) brightness(1.06);

  --glass-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 8px 32px rgba(0, 0, 0, 0.09),
    0 2px 8px rgba(0, 0, 0, 0.05);

  --glass-shadow-elevated:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.13),
    0 8px 20px rgba(0, 0, 0, 0.09);

  --glass-shadow-modal:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03),
    0 32px 96px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.10);
}

/* ── 2. Animated Gradient Background ──────────────────────── */
html {
  min-height: 100%;
  color-scheme: light only;
  background: #f8f9fc;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
body * {
  color-scheme: light only;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select,
button {
  color-scheme: light only;
}

body :not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img,
svg,
canvas {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ── Fix: iOS/Samsung viewport height bug ─────────────────────
   Tailwind의 h-screen(100vh)은 iOS 주소창 높이를 포함해 실제 보이는
   영역보다 크게 계산되어 하단 콘텐츠가 잘림. dvh로 교체.
   - 100dvh: 주소창 유무에 따라 동적으로 변하는 정확한 높이
   - -webkit-fill-available: 구형 iOS Safari 전용 폴백
   ───────────────────────────────────────────────────────────── */
.h-screen {
  height: 100vh;
  /* 최하위 폴백 */
  height: -webkit-fill-available;
  /* iOS Safari 14 이하 */
  height: 100dvh;
  /* Chrome 108+, Safari 15.4+, Samsung 20+ */
}

body {
  background:
    radial-gradient(ellipse 70% 50% at 15% 8%, rgba(255, 230, 195, 0.75) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(255, 218, 175, 0.55) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(250, 230, 210, 0.50) 0%, transparent 58%),
    radial-gradient(ellipse 40% 40% at 90% 85%, rgba(255, 210, 170, 0.40) 0%, transparent 50%),
    radial-gradient(ellipse 35% 35% at 35% 55%, rgba(255, 240, 225, 0.35) 0%, transparent 48%),
    #FDFCFB !important;
  background-attachment: fixed !important;
  background-size: 100% 100% !important;
}

/* Remove any opaque bg override from flex wrapper */
body>* {
  position: relative;
}

/* ── 3. Navigation Header ──────────────────────────────────── */
header {
  background: rgba(253, 251, 248, 0.75) !important;
  backdrop-filter: var(--glass-blur-nav) !important;
  -webkit-backdrop-filter: var(--glass-blur-nav) !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* ── 4. Bottom Navigation Bar ──────────────────────────────── */
/* Shared header popovers */
#notice-menu,
#user-menu {
  top: calc(100% + 14px) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(250, 248, 245, 0.72)) !important;
  backdrop-filter: blur(52px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(52px) saturate(190%) brightness(1.05) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.86) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(0, 0, 0, 0.035),
    0 28px 72px rgba(30, 22, 14, 0.16),
    0 8px 20px rgba(30, 22, 14, 0.08) !important;
  color: #1d1d1f !important;
  overflow: hidden !important;
}

#notice-menu {
  width: min(360px, calc(100vw - 24px)) !important;
  padding: 14px !important;
}

#user-menu {
  width: min(240px, calc(100vw - 24px)) !important;
  padding: 12px !important;
}

#notice-menu::before,
#user-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  right: 18px !important;
  width: 12px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-left: 0.5px solid rgba(255, 255, 255, 0.9) !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 4px 0 0 0 !important;
  transform: rotate(45deg) !important;
  backdrop-filter: blur(42px) !important;
  -webkit-backdrop-filter: blur(42px) !important;
}

#notice-menu>div:first-child,
#user-menu>.pb-md,
#user-menu>.pb-sm {
  margin: -2px -2px 10px !important;
  padding: 4px 4px 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#notice-menu>div:first-child p,
#user-menu-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #1d1d1f !important;
}

#user-menu-role {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 5px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.045) !important;
  color: #6e6e73 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#notice-menu-list {
  gap: 8px !important;
  padding-right: 2px !important;
}

#notice-menu-list>div {
  padding: 12px 13px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

#notice-menu-list>div:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 16px rgba(0, 0, 0, 0.055) !important;
}

#notice-menu-list h3 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#notice-menu-list p {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#notice-menu button,
#user-menu a,
#user-menu button {
  min-height: 38px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease !important;
}

#notice-menu button {
  margin-top: 12px !important;
  background: rgba(29, 29, 31, 0.06) !important;
  color: #1d1d1f !important;
}

#notice-menu button:hover,
#user-menu a:hover,
#user-menu button:hover {
  transform: translateY(-1px) !important;
  background: rgba(29, 29, 31, 0.08) !important;
}

#user-menu button {
  color: #C0392B !important;
}

#user-menu button:hover {
  background: rgba(192, 57, 43, 0.08) !important;
}

@media (max-width: 520px) {

  #notice-menu,
  #user-menu {
    position: fixed !important;
    top: 76px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  #notice-menu::before,
  #user-menu::before {
    right: 26px !important;
  }
}

nav.fixed {
  background: rgba(253, 251, 248, 0.78) !important;
  backdrop-filter: var(--glass-blur-nav) !important;
  -webkit-backdrop-filter: var(--glass-blur-nav) !important;
  border-top: 0.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 -4px 24px rgba(0, 0, 0, 0.07) !important;
}

#bottom-nav {
  --nav-position: 0;
  --bottom-nav-count: 4;
  --bottom-nav-gap: 2px;
  --bottom-nav-pad-x: 5px;
  left: max(36px, env(safe-area-inset-left, 0px) + 36px) !important;
  right: max(36px, env(safe-area-inset-right, 0px) + 36px) !important;
  bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  height: 56px !important;
  padding: 5px var(--bottom-nav-pad-x) !important;
  gap: var(--bottom-nav-gap) !important;
  border-radius: 999px !important;
  overflow: visible !important;
  /* 비눗방울: 거의 투명한 표면 + 위쪽 스페큘러 하이라이트 */
  background:
    radial-gradient(75% 130% at 22% -18%, rgba(255, 255, 255, 0.40), transparent 42%),
    radial-gradient(60% 120% at 85% 120%, rgba(180, 220, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.012) !important;
  backdrop-filter: blur(16px) saturate(180%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06) !important;
  border: none !important;
  background-clip: padding-box !important;
  transform: translateZ(0) !important;
  touch-action: pan-y !important;
  user-select: none !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -8px 16px rgba(255, 255, 255, 0.05),
    0 10px 34px rgba(90, 130, 210, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

#bottom-nav.dragging .bottom-nav-cursor,
#bottom-nav.dragging>a {
  transition-duration: 0ms !important;
}

/* 비눗방울 테두리 — 투명한 유리질 흰색 림 (간섭색은 아주 희미한 힌트만) */
#bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, 0.85),
      rgba(220, 235, 255, 0.30) 40%,
      rgba(255, 255, 255, 0.20) 60%,
      rgba(255, 255, 255, 0.70));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.9;
}

/* 표면 광택 — 상단 구형 하이라이트 (투명 유리 느낌) */
#bottom-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(55% 130% at 22% -24%, rgba(255, 255, 255, 0.62), transparent 42%),
    radial-gradient(40% 90% at 88% 120%, rgba(190, 220, 255, 0.10), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

#bottom-nav>a {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 2px 4px 2px !important;
  border-radius: 999px !important;
  color: rgba(29, 29, 31, 0.54) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    color 0.22s ease,
    background 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.18s ease !important;
}

#bottom-nav .bottom-nav-cursor {
  position: absolute !important;
  z-index: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  left: var(--bottom-nav-pad-x) !important;
  width: calc((100% - (var(--bottom-nav-pad-x) * 2) - (var(--bottom-nav-gap) * (var(--bottom-nav-count) - 1))) / var(--bottom-nav-count)) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  transform: translate3d(calc(var(--nav-position) * (100% + var(--bottom-nav-gap))), 0, 0) !important;
  /* 투명한 비눗방울 구 — 위쪽 밝은 하이라이트 + 아래 옅은 굴절 */
  background:
    radial-gradient(68% 58% at 30% 20%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.05) 56%, transparent 76%),
    radial-gradient(120% 120% at 50% 128%, rgba(150, 205, 255, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(7px) saturate(190%) brightness(1.07) !important;
  -webkit-backdrop-filter: blur(7px) saturate(190%) brightness(1.07) !important;
  border: none !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.70),
    inset 0 -5px 11px rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(120, 165, 235, 0.16) !important;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.24s ease,
    box-shadow 0.24s ease !important;
}

/* 활성 비눗방울 테두리 — 투명한 흰색 림 */
#bottom-nav .bottom-nav-cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, 0.90),
      rgba(230, 240, 255, 0.30) 45%,
      rgba(255, 255, 255, 0.75));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  pointer-events: none;
}

/* 비눗방울 광점 (작은 밝은 반사) */
#bottom-nav .bottom-nav-cursor::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 20%;
  width: 26%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.10) 60%, transparent 75%);
  filter: blur(0.4px);
  opacity: 0.70;
  pointer-events: none;
}

#bottom-nav>a:hover {
  color: rgba(29, 29, 31, 0.86) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 45%),
    rgba(255, 255, 255, 0.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

#bottom-nav>a.active {
  color: #1d1d1f !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bottom-nav>a.active .material-symbols-outlined {
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.82),
    0 0 18px rgba(120, 190, 255, 0.20) !important;
}

#bottom-nav>a:active {
  transform: scale(0.97) !important;
}

#bottom-nav .bottom-nav-icon,
#bottom-nav .material-symbols-outlined {
  font-size: 24px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

#bottom-nav .bottom-nav-label,
#bottom-nav>a span:last-child {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  color: currentColor !important;
  letter-spacing: 0 !important;
}

#mobile-nav.admin-bottom-nav {
  --admin-nav-index: 0;
  --admin-nav-count: 9;
  --admin-nav-gap: 1px;
  --admin-nav-pad-x: 5px;
  left: max(8px, env(safe-area-inset-left, 0px) + 8px) !important;
  right: max(8px, env(safe-area-inset-right, 0px) + 8px) !important;
  bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  height: 62px !important;
  padding: 5px var(--admin-nav-pad-x) !important;
  gap: var(--admin-nav-gap) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.44), transparent 24%),
    radial-gradient(circle at 84% 112%, rgba(255, 242, 222, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.050)),
    rgba(255, 255, 255, 0.035) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.10) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.10) contrast(1.03) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.50) !important;
  transform: translateZ(0) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 14px 30px rgba(70, 45, 25, 0.075),
    0 2px 7px rgba(0, 0, 0, 0.028) !important;
}

#mobile-nav.admin-bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.38), transparent 31%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 246, 232, 0.060), rgba(255, 255, 255, 0.040));
  opacity: 0.68;
}

#mobile-nav.admin-bottom-nav .admin-nav-cursor {
  position: absolute !important;
  z-index: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  left: var(--admin-nav-pad-x) !important;
  width: calc((100% - (var(--admin-nav-pad-x) * 2) - (var(--admin-nav-gap) * (var(--admin-nav-count) - 1))) / var(--admin-nav-count)) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  transform: translate3d(calc(var(--admin-nav-index) * (100% + var(--admin-nav-gap))), 0, 0) !important;
  background:
    radial-gradient(circle at 26% 10%, rgba(255, 255, 255, 0.58), transparent 32%),
    radial-gradient(circle at 72% 108%, rgba(255, 239, 216, 0.085), transparent 42%),
    rgba(255, 255, 255, 0.105) !important;
  backdrop-filter: blur(20px) saturate(210%) brightness(1.10) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(20px) saturate(210%) brightness(1.10) contrast(1.03) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 2px 9px rgba(0, 0, 0, 0.035) !important;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#mobile-nav.admin-bottom-nav>a {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 1px 3px !important;
  border-radius: 999px !important;
  color: rgba(29, 29, 31, 0.54) !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.22s ease, transform 0.18s ease !important;
}

#mobile-nav.admin-bottom-nav>a.active {
  color: #1d1d1f !important;
}

#mobile-nav.admin-bottom-nav>a:active {
  transform: scale(0.97) !important;
}

#mobile-nav.admin-bottom-nav .material-symbols-outlined {
  font-size: 20px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

#mobile-nav.admin-bottom-nav .admin-nav-label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: currentColor !important;
  letter-spacing: 0 !important;
}

/* 태블릿(768px+)에서 관리자 바텀 탭 크기 개선 */
@media (min-width: 768px) {
  #mobile-nav.admin-bottom-nav {
    --admin-nav-gap: 2px;
    height: 68px !important;
    left: max(20px, env(safe-area-inset-left, 0px) + 20px) !important;
    right: max(20px, env(safe-area-inset-right, 0px) + 20px) !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    gap: 2px !important;
  }

  #mobile-nav.admin-bottom-nav .admin-nav-cursor {
    width: calc((100% - (var(--admin-nav-pad-x) * 2) - (var(--admin-nav-gap) * (var(--admin-nav-count) - 1))) / var(--admin-nav-count)) !important;
    transform: translate3d(calc(var(--admin-nav-index) * (100% + var(--admin-nav-gap))), 0, 0) !important;
  }

  #mobile-nav.admin-bottom-nav .material-symbols-outlined {
    font-size: 24px !important;
  }

  #mobile-nav.admin-bottom-nav .admin-nav-label {
    font-size: 10px !important;
  }

  #mobile-nav.admin-bottom-nav>a {
    gap: 3px !important;
    padding: 5px 2px 4px !important;
  }
}

/* ── 5. Main Content Areas (transparent so bg shows through) ─ */
body[class*="bg-"] {
  background-color: transparent !important;
}

main.bg-surface-container-lowest,
main.flex-grow,
div.bg-\[\#FDFCFB\],
body.bg-\[\#FDFCFB\] {
  background: transparent !important;
}

/* Selectseat body inline style override */
body[style*="background"] {
  background: transparent !important;
}

/* ── 6. Floor Cards (main.html — JS rendered) ──────────────── */
#floor-cards>div {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

#floor-cards>div:hover {
  background: rgba(255, 255, 255, 0.34) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
  transform: translateY(-4px) !important;
}

/* Border divider inside floor card */
#floor-cards .border-\[\#F2EFEA\] {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Tag chip inside floor card */
#floor-cards .bg-\[\#FAF7F2\].rounded-full {
  background: rgba(255, 255, 255, 0.48) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) !important;
}

/* Arrow circle button in floor card */
#floor-cards .w-11.h-11.rounded-full {
  background: rgba(255, 255, 255, 0.40) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── 7. Stats Chips (main.html top row) ────────────────────── */
#top-stats-row>div {
  background: rgba(255, 255, 255, 0.40) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ── 8. Ticket Option Cards (Select.html) ──────────────────── */
.ticket-option {
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.62),
    0 6px 24px rgba(0, 0, 0, 0.07) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ticket-option:hover {
  background: rgba(255, 255, 255, 0.36) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.70),
    0 12px 36px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-2px) !important;
}

.ticket-option.selected {
  background: rgba(255, 255, 255, 0.44) !important;
  border-color: rgba(0, 0, 0, 0.72) !important;
  border-width: 2px !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.72),
    0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* ── 9. Calendar Container (Select.html) ──────────────────── */
.bg-surface.rounded-xl {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.62),
    0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Calendar day states */
.calendar-day.today {
  border: 1.5px solid rgba(0, 0, 0, 0.72) !important;
}

.calendar-day.selected {
  background: rgba(12, 12, 12, 0.84) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22) !important;
}

.calendar-day.in-range {
  background: rgba(20, 20, 20, 0.11) !important;
  color: #1a1a1a !important;
}

.calendar-day:hover:not(.disabled):not(.selected):not(.in-range) {
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* ── 10. Summary Box (Select.html) ─────────────────────────── */
.bg-surface-container-low.rounded-xl {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid var(--glass-border-subtle) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

/* ── 11. Login Card ────────────────────────────────────────── */
#auth-card {
  background: rgba(253, 252, 250, 0.72) !important;
  backdrop-filter: blur(52px) saturate(180%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(52px) saturate(180%) brightness(1.04) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-modal) !important;
}

#auth-card .bg-surface-container-low {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* ── 12. Input Fields ──────────────────────────────────────── */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
textarea {
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    inset 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.22s ease !important;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.70) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 0 3px rgba(0, 0, 0, 0.07) !important;
  outline: none !important;
}

/* ── 13. Primary Buttons ───────────────────────────────────── */
button.bg-primary,
a.bg-primary,
#confirm-btn:not(:disabled),
#login-btn,
#signup-btn {
  background: rgba(14, 14, 14, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.16) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button.bg-primary:hover,
a.bg-primary:hover,
#login-btn:hover,
#signup-btn:hover {
  background: rgba(0, 0, 0, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 32px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.20) !important;
  transform: translateY(-1px) !important;
}

/* ── 14. Dropdown Menus ────────────────────────────────────── */
#user-menu,
#notice-menu {
  background: rgba(253, 251, 248, 0.92) !important;
  backdrop-filter: blur(52px) saturate(200%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(52px) saturate(200%) brightness(1.06) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 48px rgba(0, 0, 0, 0.11),
    0 4px 16px rgba(0, 0, 0, 0.07) !important;
}

/* ── 15. Notice Modal Overlay & Content ────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* The rounded box inside the modal */
.modal-content .rounded-\[32px\],
.modal-overlay .rounded-\[32px\] {
  background: rgba(253, 251, 248, 0.94) !important;
  backdrop-filter: var(--glass-blur-heavy) !important;
  -webkit-backdrop-filter: var(--glass-blur-heavy) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-modal) !important;
}

/* Write notice modal inner box */
.modal-overlay .rounded-\[32px\].m-4.p-6 {
  background: rgba(253, 251, 248, 0.96) !important;
}

/* Notice items inside modals */
.notice-item {
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* ── 16. My Reservations Cards ─────────────────────────────── */
#my-reservations-grid>div {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── 17. Phone Number Modal (login.html) ───────────────────── */
#phone-modal>div {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(52px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(180%) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-modal) !important;
}

/* ── 18. MF Booking Page ───────────────────────────────────── */
/* MF today/date buttons */
.today-btn {
  background: rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.today-btn.selected {
  background: rgba(255, 255, 255, 0.50) !important;
  border-color: rgba(0, 0, 0, 0.80) !important;
}

/* MF time slots */
.time-slot {
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.time-slot:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.40) !important;
  border-color: rgba(0, 0, 0, 0.60) !important;
}

.time-slot.selected {
  background: rgba(14, 14, 14, 0.88) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24) !important;
}

/* MF payment cards */
.pay-card {
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.60),
    0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.pay-card:hover {
  background: rgba(255, 255, 255, 0.36) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
    0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

.pay-card.selected {
  background: rgba(255, 255, 255, 0.44) !important;
  border-color: rgba(0, 0, 0, 0.70) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.70),
    0 4px 20px rgba(0, 0, 0, 0.14) !important;
}

/* MF success overlay */
.suc-box {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(52px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(52px) saturate(180%) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-modal) !important;
}

/* ── 19. Admin Page Cards ──────────────────────────────────── */
/* Generic card pattern: bg-white or bg-surface-container-lowest rounded-xl/2xl */
.rounded-xl.bg-surface-container-lowest,
.rounded-2xl.bg-surface-container-lowest,
.rounded-xl.bg-white,
.rounded-2xl.bg-white {
  background: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── 20. Seat Map Main Desk Area (Selectseat.html) ─────────── */
.main-desk-area {
  background: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
    0 6px 24px rgba(0, 0, 0, 0.07) !important;
}

/* ── 21. Reservation Details Page ──────────────────────────── */
/* Generic content card */
.max-w-2xl>.rounded-xl,
.max-w-xl>.rounded-xl,
.max-w-2xl>.rounded-2xl,
.max-w-xl>.rounded-2xl {
  background: rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── 22. Generic Surface Overrides ─────────────────────────── */
/* Prevent opaque white from blocking background */
.bg-surface-container-lowest {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Notice/info chips in bg-surface-container */
.bg-surface-container.rounded-full,
.bg-surface-container.rounded-lg {
  background: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── 23. Lang Toggle Button ────────────────────────────────── */
#lang-toggle,
.lang-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  gap: 1px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.07) !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  transition: box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#lang-toggle:hover,
.lang-toggle:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.82),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.10) !important;
}

#lang-toggle:active,
.lang-toggle:active {
  transform: scale(0.93) !important;
}

/* Inactive span */
#lang-toggle .lang-ko,
#lang-toggle .lang-en,
.lang-toggle .lang-ko,
.lang-toggle .lang-en {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: rgba(100, 75, 50, 0.48) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.18s ease !important;
  user-select: none !important;
}

/* Active span — i18n.js adds bg-primary class on the active language */
#lang-toggle .lang-ko.bg-primary,
#lang-toggle .lang-en.bg-primary,
.lang-toggle .lang-ko.bg-primary,
.lang-toggle .lang-en.bg-primary {
  color: rgba(40, 25, 10, 0.90) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1.5px 5px rgba(0, 0, 0, 0.13),
    0 0.5px 1px rgba(0, 0, 0, 0.06) !important;
}

/* user-menu 안 lang-toggle — 흰 배경용 고대비 스타일 */
.user-menu .lang-toggle {
  background: rgba(0, 0, 0, 0.055) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: none !important;
}

.user-menu .lang-toggle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.user-menu .lang-toggle .lang-ko,
.user-menu .lang-toggle .lang-en {
  color: rgba(0, 0, 0, 0.32) !important;
}

.user-menu .lang-toggle .lang-ko.bg-primary,
.user-menu .lang-toggle .lang-en.bg-primary {
  background: rgba(0, 0, 0, 0.84) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* admin 헤더·사이드바 lang-toggle — 밝은 배경용 고대비 스타일 */
.admin-header .lang-toggle,
.admin-sidebar .lang-toggle {
  background: rgba(0, 0, 0, 0.055) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: none !important;
}

.admin-header .lang-toggle:hover,
.admin-sidebar .lang-toggle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.admin-header .lang-toggle .lang-ko,
.admin-header .lang-toggle .lang-en,
.admin-sidebar .lang-toggle .lang-ko,
.admin-sidebar .lang-toggle .lang-en {
  color: rgba(0, 0, 0, 0.32) !important;
}

.admin-header .lang-toggle .lang-ko.bg-primary,
.admin-header .lang-toggle .lang-en.bg-primary,
.admin-sidebar .lang-toggle .lang-ko.bg-primary,
.admin-sidebar .lang-toggle .lang-en.bg-primary {
  background: rgba(0, 0, 0, 0.84) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* ── 24. Cancel / Outline Buttons ──────────────────────────── */
.bg-surface-container.hover\:bg-surface-variant.rounded-full,
button.rounded-full.bg-surface-container {
  background: rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(16px) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.55) !important;
}

/* ── 25. Seat selection info panel ─────────────────────────── */
#seat-info-panel,
#booking-panel {
  background: rgba(253, 251, 248, 0.92) !important;
  backdrop-filter: var(--glass-blur-heavy) !important;
  -webkit-backdrop-filter: var(--glass-blur-heavy) !important;
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: var(--glass-shadow-modal) !important;
}

/* ── 26. Scrollbar styling ─────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

/* ── 27. Admin Sidebar ─────────────────────────────────────── */
#sidebar {
  background: rgba(253, 251, 248, 0.72) !important;
  backdrop-filter: var(--glass-blur-nav) !important;
  -webkit-backdrop-filter: var(--glass-blur-nav) !important;
  border-right: 0.5px solid rgba(255, 255, 255, 0.60) !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    4px 0 24px rgba(0, 0, 0, 0.06) !important;
}

/* ── 28. Focus ring override ───────────────────────────────── */
*:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.40) !important;
  outline-offset: 2px !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║            MOBILE OPTIMIZATIONS                          ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── M1. Global mobile base ────────────────────────────────── */
* {
  /* Remove blue tap highlight on mobile */
  -webkit-tap-highlight-color: transparent;
}

/* ── M1b. Touch-action: remove 300ms iOS tap delay ─────────── */
/* Only apply to native interactive elements — NOT to divs with onclick/cursor-pointer.
   Applying touch-action to large div wrappers can interfere with parent scroll containers. */
button,
a,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
select,
label[for] {
  touch-action: manipulation;
}

/* ── M1c. Drag / selection prevention ──────────────────────── */
/* WARNING: user-select:none on ANY ancestor breaks click events on
   Android Chrome (Chromium bug #895944). Do NOT apply to header/nav/body.
   Only apply to leaf nodes that display non-interactive text. */

/* Prevent image drag on WebKit/iOS */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* lang-toggle spans are pure UI — safe to block selection here */
#lang-toggle .lang-ko,
#lang-toggle .lang-en,
.lang-toggle .lang-ko,
.lang-toggle .lang-en {
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent iOS font size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#orientation-lock-overlay {
  display: none;
}

@media (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  #orientation-lock-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(248, 246, 242, 0.96);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
  }

  .orientation-lock-card {
    width: min(360px, 88vw);
    border-radius: 22px;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    padding: 24px 22px;
    text-align: center;
    color: #1d1d1f;
  }

  .orientation-lock-card .material-symbols-outlined {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1d1f;
    color: #fff;
    font-size: 26px;
  }

  .orientation-lock-card strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .orientation-lock-card p {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: #6e6e73;
  }
}

/* ── M2. Inputs: min font-size 16px to prevent iOS auto-zoom ─ */
@media (max-width: 768px) {

  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── M3. Safe-area for notched iPhones ─────────────────────── */
nav.fixed {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
}

#bottom-nav {
  padding-bottom: 3px !important;
  height: 56px !important;
}

/* Prevent content from going under bottom nav on mobile —
   padding-bottom은 각 페이지가 pb-* 클래스로 관리.
   전체 제거하면 하단 콘텐츠 잘림 유발하므로 규칙 삭제. */

/* ╔══════════════════════════════════════════════════════════╗
   ║         저전력 모드 최적화 (Low-Power Mode)               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── LP1. 모든 애니메이션·트랜지션 비활성화 ───────────────── */
[data-low-power="true"] * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── LP2. backdrop-filter 제거 (GPU 부담 최대 원인) ────────── */
[data-low-power="true"] .liquid-glass,
[data-low-power="true"] [class*="backdrop-filter"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* ── LP3. 터치 지연 제거 — 모든 인터랙티브 요소 ────────────── */
button,
a,
[role="button"],
label {
  touch-action: manipulation;
}

/* ── LP4. prefers-reduced-motion 시스템 설정 반영 ─────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 스크롤바 전역 숨기기 ───────────────────────────────────────
   overflow:auto/scroll은 유지하되 시각적 스크롤바만 제거.
   Samsung Internet, iOS Safari, Chrome 모두 해당.
   ───────────────────────────────────────────────────────────── */
* {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE / Edge (legacy) */
}

*::-webkit-scrollbar {
  display: none;
  /* Chrome · Safari · Samsung Internet */
}

/* ── M4. Min touch target size: 44px ──────────────────────── */
@media (max-width: 768px) {
  .seat-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  nav.fixed a,
  nav.fixed button {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Close / icon buttons */
  button[onclick*="close"],
  button[onclick*="Close"],
  button[onclick*="toggle"] {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ── M5. Dropdown menus — prevent overflow on narrow screens ─ */
@media (max-width: 768px) {

  #notice-menu,
  #user-menu {
    position: fixed !important;
    top: calc(4.5rem + env(safe-area-inset-top, 0px)) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 22px !important;
    background: rgba(253, 251, 248, 0.97) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 14px 36px rgba(0, 0, 0, 0.13),
      0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  #notice-menu {
    padding: 14px !important;
  }

  #notice-menu-list {
    max-height: min(42vh, 280px) !important;
  }

  #user-menu {
    padding: 18px !important;
  }

  #user-menu>.pb-md {
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
  }

  #user-menu .font-label-lg {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  #user-menu .font-label-sm {
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

/* ── M6. main.html — tighten vertical spacing on mobile ─────── */
@media (max-width: 768px) {

  #main-scroll {
    scroll-padding-top: 18px !important;
  }

  #main-scroll[data-tab="chat"] {
    padding-top: 14px !important;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #chat-view {
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  #chat-content {
    min-height: 0 !important;
    display: block !important;
  }

  #my-chat-card {
    height: auto !important;
    min-height: min(520px, calc(100dvh - 216px - env(safe-area-inset-bottom, 0px))) !important;
    max-height: none !important;
  }

  #my-chat-body {
    min-height: 260px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Reduce oversized top margin on heading section */
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }

  /* Floor card padding reduction */
  #floor-cards>div {
    padding: 1.5rem !important;
  }

  /* Floor card heading font size */
  #floor-cards h3 {
    font-size: 32px !important;
  }
}

/* ── M7. Selectseat.html — seat map horizontal scroll ──────── */
/* Seat grid wrapper: pinch-to-zoom friendly scroll container */
#seat-grid {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain;
  padding: 16px !important;
}

/* Touch-friendly scroll hint on mobile */
@media (max-width: 768px) {
  #seat-grid::before {
    content: '';
    display: block;
  }

  /* Scale down seat buttons slightly for mobile to fit more */
  .floor-3f-layout,
  .floor-4f-layout {
    min-width: 580px !important;
    padding: 12px !important;
  }

  .seat-btn {
    width: 44px !important;
    height: 42px !important;
  }

  .seat-btn .seat-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  /* Reservation panel — full bottom sheet on mobile */
  #res-panel {
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .panel-header {
    padding: 20px 16px 16px !important;
    background: rgba(253, 251, 248, 0.95) !important;
    backdrop-filter: blur(40px) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.60) !important;
  }
}

/* ── M8. Select.html — calendar mobile ─────────────────────── */
@media (max-width: 480px) {

  /* Calendar day cells — larger touch targets */
  .calendar-day {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* Ticket option cards — reduce padding on small screens */
  .ticket-option {
    padding: 1rem !important;
  }
}

/* ── M9. login.html — auth card full width on small phones ─── */
@media (max-width: 400px) {
  #auth-card {
    border-radius: 20px !important;
    margin: 8px !important;
  }
}

#google-signin-button,
#google-signin-button>div,
#google-signin-button iframe {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── M10. Modal — full screen on very small devices ─────────── */
@media (max-width: 480px) {
  .modal-overlay .rounded-\[32px\] {
    border-radius: 24px !important;
    margin: 12px !important;
    max-height: 88vh !important;
  }
}

/* ── M11. mf_booking.html — step buttons & dial ────────────── */
@media (max-width: 480px) {
  .today-btn {
    padding: 14px !important;
  }

  .time-slot {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  /* Ensure dial is touch-scrollable */
  .dial-wrap {
    touch-action: none;
  }
}

/* ── M12. Reservation details — full width on mobile ────────── */
@media (max-width: 600px) {

  .max-w-2xl>.rounded-xl,
  .max-w-xl>.rounded-xl,
  .max-w-2xl>.rounded-2xl,
  .max-w-xl>.rounded-2xl {
    border-radius: 20px !important;
    margin: 8px !important;
  }
}

/* ── M13. Scroll: overscroll + touch + Samsung fix ───────────
   overscroll-behavior: none 을 html/body 전체에 걸면 Samsung
   Internet과 일부 Chrome에서 스크롤 자체가 막힘.
   수평 방향만 차단하고 수직은 허용.
   ───────────────────────────────────────────────────────────── */
html,
body {
  overscroll-behavior-x: none;
  /* 수평 고무줄 방지 */
  /* overscroll-behavior: none 제거 — 수직 스크롤 차단 원인 */
}

/* 스크롤 컨테이너는 자기 경계 안에서 overscroll 처리 */
.modal-overlay,
#res-panel,
.overflow-y-auto,
main {
  overscroll-behavior: contain;
}

/* ── M13b. 터치 스크롤 부드러움 (iOS/Samsung 필수) ───────────── */
main,
main.flex-grow,
.overflow-y-auto,
#res-panel,
#panel-body,
.suc-box {
  -webkit-overflow-scrolling: touch;
}

/* flex+overflow Samsung 버그: min-height:auto 기본값이
   flex child의 scroll 컨테이너화를 막음 → min-height:0 강제 */
main.flex-grow {
  min-height: 0 !important;
}

#panel-body {
  min-height: 0;
}

/* ── M13c. Samsung Internet: backdrop-filter 미지원 폴백 ──────
   Samsung Internet 12 이하, 일부 Android Webview에서
   backdrop-filter가 없으면 배경이 투명해져 텍스트 판독 불가 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header {
    background: rgba(253, 251, 248, 0.98) !important;
  }

  #bottom-nav,
  #mobile-nav {
    background: rgba(253, 251, 248, 0.97) !important;
  }

  .panel-header {
    background: rgba(248, 249, 252, 0.98) !important;
  }

  .suc-box {
    background: rgba(255, 255, 255, 0.99) !important;
  }

  .suc-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
  }
}

/* ── M14. Header height on very small screens ───────────────── */
@media (max-width: 360px) {
  header {
    height: 56px !important;
  }

  header img.h-16 {
    height: 52px !important;
  }


}