/* Mobile Theme CSS (scoped) — 다크 테마 기본 */

#mobile-scope{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(34,211,238,0.12), transparent 55%),
    radial-gradient(800px 480px at 85% 25%, rgba(59,130,246,0.08), transparent 50%),
    linear-gradient(180deg, #020617 0%, #0b1220 50%, #020617 100%);
  color: rgba(248,250,252,0.95);
}

/* 로그인: 우측 방사형 제거 — :has() 대신 data 속성(브라우저 호환·확실) */
#mobile-scope[data-active-view='MOBILE_LOGIN']{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(34,211,238,0.1), transparent 58%),
    linear-gradient(180deg, #020617 0%, #0b1220 50%, #020617 100%) !important;
}

#mobile-scope input,
#mobile-scope select,
#mobile-scope textarea{
  background-color: rgba(0,0,0,0.42) !important;
  border-color: rgba(148,163,184,0.28) !important;
  color: rgba(248,250,252,0.95) !important;
}
#mobile-scope input::placeholder,
#mobile-scope textarea::placeholder{
  color: rgba(255,255,255,0.48) !important;
}

#mobile-scope input:focus,
#mobile-scope select:focus,
#mobile-scope textarea:focus{
  outline: none;
  border-color: rgba(34,211,238,0.55) !important;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.18);
}

/* -------------------------------------------------------------
   Readability (Mobile)
-------------------------------------------------------------- */

#mobile-scope{
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#mobile-scope *,
#mobile-scope *::before,
#mobile-scope *::after{
  font-family: inherit !important;
}
#mobile-scope .font-mono{
  font-family: 'Pretendard Variable', Pretendard, ui-monospace, monospace !important;
}

#mobile-scope .text-\[8px\],
#mobile-scope .text-\[9px\],
#mobile-scope .text-\[10px\]{ font-size: 12px !important; }
#mobile-scope .text-\[11px\],
#mobile-scope .text-\[12px\],
#mobile-scope .text-\[13px\],
#mobile-scope .text-xs{ font-size: 14px !important; }
#mobile-scope .text-\[14px\],
#mobile-scope .text-\[15px\],
#mobile-scope .text-\[16px\],
#mobile-scope .text-sm,
#mobile-scope .text-base{ font-size: 16px !important; }
#mobile-scope .text-lg{ font-size: 18px !important; }
#mobile-scope .text-xl,
#mobile-scope .text-2xl{ font-size: 20px !important; }
#mobile-scope .text-3xl{ font-size: 22px !important; }

/* 다크 배경 위 흰 텍스트 투명도 */
#mobile-scope .text-white\/10{ color: rgba(255,255,255,0.10) !important; }
#mobile-scope .text-white\/20{ color: rgba(255,255,255,0.20) !important; }
#mobile-scope .text-white\/30{ color: rgba(255,255,255,0.30) !important; }
#mobile-scope .text-white\/40{ color: rgba(255,255,255,0.40) !important; }
#mobile-scope .text-white\/50{ color: rgba(255,255,255,0.50) !important; }
#mobile-scope .text-white\/60{ color: rgba(255,255,255,0.60) !important; }

#mobile-scope .text-slate-300{ color: rgba(203,213,225,0.88) !important; }
#mobile-scope .text-slate-400{ color: rgba(148,163,184,0.88) !important; }
#mobile-scope .text-slate-500{ color: rgba(148,163,184,0.72) !important; }

#mobile-scope .drop-shadow,
#mobile-scope .drop-shadow-md,
#mobile-scope .drop-shadow-lg{
  filter: none !important;
}

#mobile-scope .bg-black\/20{ background-color: rgba(0,0,0,0.20) !important; }
#mobile-scope .bg-black\/30{ background-color: rgba(0,0,0,0.30) !important; }
#mobile-scope .bg-black\/40{ background-color: rgba(0,0,0,0.40) !important; }
#mobile-scope .bg-black\/50{ background-color: rgba(0,0,0,0.50) !important; }
#mobile-scope .bg-black\/60{ background-color: rgba(0,0,0,0.60) !important; }

#mobile-scope .border-white\/5{ border-color: rgba(255,255,255,0.05) !important; }
#mobile-scope .border-white\/10{ border-color: rgba(255,255,255,0.10) !important; }

#mobile-scope .backdrop-blur-sm{
  backdrop-filter: blur(4px) !important;
}
#mobile-scope .backdrop-blur-md{
  backdrop-filter: blur(6px) !important;
}
#mobile-scope .backdrop-blur-xl{
  backdrop-filter: blur(8px) !important;
}

#mobile-scope .bg-slate-900\/50,
#mobile-scope .bg-slate-900\/40,
#mobile-scope .bg-slate-800\/40{
  background: rgba(7,14,26,0.78) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 0 16px rgba(59,130,246,0.045) !important;
}

#mobile-scope button{
  text-shadow: none !important;
}

/* 로그인 제출 — 회색(grayscale)·다른 규칙에 덮이지 않도록 고정 */
#mobile-scope button.mil-login-submit:not(:disabled) {
  background-image: linear-gradient(180deg, #22d3ee 0%, #0ea5e9 48%, #0369a1 100%) !important;
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-color: rgba(103, 232, 249, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 18px -4px rgba(14, 165, 233, 0.55) !important;
  filter: none !important;
}
#mobile-scope button.mil-login-submit:disabled {
  opacity: 0.52 !important;
  filter: none !important;
}

/* 로그인 카드 뒤 배경: 시안·빨강 번짐 불빛(박스 뒤에서 비춤) */
#mobile-scope .mil-login-card-stack {
  position: relative;
  z-index: 1;
}
#mobile-scope .mil-login-card-stack::before {
  content: '';
  position: absolute;
  inset: -32px -28px -36px -28px;
  z-index: 0;
  border-radius: 2rem;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 70% at 48% 40%, rgba(251, 191, 36, 0.22), transparent 58%),
    radial-gradient(ellipse 65% 60% at 58% 62%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(251, 191, 36, 0.06), transparent 65%);
  filter: blur(24px);
  opacity: 0.92;
}
#mobile-scope .mil-login-card-stack > .mil-login-card-ring {
  position: relative;
  z-index: 1;
}

/* 안쪽 작은 패널: 살짝 떠 있는 3D */
#mobile-scope .mil-login-card-raised {
  transform: translateY(-1px);
}

/* 회전 네온: 바깥 박스와 안쪽 패널 사이(margin 고리)에서만 보이도록 — ::before는 전체에 깔리고 .mil-login-card-raised가 가운데를 가림 */
#mobile-scope .mil-login-card-ring {
  isolation: isolate;
  /* 고리 바깥쪽만 살짝 어두운 틀(회전선은 그 안쪽 고리에서만 보임) */
  background-color: rgba(5, 8, 13, 0.92);
}
#mobile-scope .mil-login-card-ring::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  /* 각 모서리에 짧은 띠 — 좌상·우하=흰색, 우상·좌하=황금색 */
  background: conic-gradient(
    from 0deg,
    transparent 0deg 34deg,
    #fbbf24 34deg 56deg,
    transparent 56deg 124deg,
    rgba(255, 255, 255, 0.95) 124deg 146deg,
    transparent 146deg 214deg,
    #fbbf24 214deg 236deg,
    transparent 236deg 304deg,
    rgba(255, 255, 255, 0.95) 304deg 326deg,
    transparent 326deg 360deg
  );
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.55)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
  animation: mil-login-ring-rotate 7s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes mil-login-ring-rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #mobile-scope .mil-login-card-ring::before {
    animation: none !important;
  }
}