/* Mobile Theme CSS (scoped)
   - #mobile-scope 내부만 적용
   - 회원가입/기본폼을 '미래 카드형(soft tech)'으로: 과한 오버레이 없이 가독성 유지
*/

#mobile-scope{
  background:
    linear-gradient(195deg, transparent 36%, rgba(255,255,255,0.06) 49.6%, rgba(140,148,160,0.18) 50%, rgba(255,255,255,0.04) 50.4%, transparent 60%),
    radial-gradient(ellipse 95% 70% at 50% 40%, rgba(248,250,252,0.55) 0%, rgba(200,206,216,0.75) 45%, rgba(90,96,108,0.92) 100%),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 38%, rgba(45,48,56,0.75) 100%),
    linear-gradient(168deg, #b8bdc8 0%, #dce0e8 38%, #8e95a3 72%, #4a4f5a 100%);
  color: rgba(255,255,255,0.94);
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
}

/* 공통 카드 — 관리자 테마와 동일한 메탈 플라크 톤 */
#mobile-scope .bg-white,
#mobile-scope .bg-slate-900,
#mobile-scope .bg-slate-900\/50,
#mobile-scope .bg-slate-800\/40{
  background: linear-gradient(165deg, rgba(42,44,54,0.9) 0%, rgba(18,20,28,0.93) 100%) !important;
  border-color: rgba(175,182,195,0.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.05),
    0 14px 40px rgba(0,0,0,0.35);
}

#mobile-scope input,
#mobile-scope select,
#mobile-scope textarea{
  background-color: rgba(12,14,20,0.55) !important;
  border-color: rgba(160,170,186,0.35) !important;
  color: rgba(255,255,255,0.94) !important;
}
#mobile-scope input::placeholder,
#mobile-scope textarea::placeholder{ color: rgba(255,255,255,0.38); }

#mobile-scope input:focus,
#mobile-scope select:focus,
#mobile-scope textarea:focus{
  outline: none;
  border-color: rgba(230,235,245,0.55) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

/* -------------------------------------------------------------
   Readability Tuning Pack (Mobile only)
   - 대상: 회원가입(SignUpView) / 지도(JobLocationMap, 주소 모달) / 매칭(SubPageView: 매칭내역)
   - 원칙: 레이아웃/기능/로직 무변형 (색/대비/블러/텍스트 선명도만 조정)
-------------------------------------------------------------- */

/* 0) 전체 텍스트 선명도(모바일만) */
#mobile-scope{
  text-rendering: geometricPrecision;
}

/* 1) 너무 낮은 투명도의 텍스트를 조금 올려서 '또렷하게' */
#mobile-scope .text-white\/10{ color: rgba(255,255,255,0.24) !important; }
#mobile-scope .text-white\/20{ color: rgba(255,255,255,0.40) !important; }
#mobile-scope .text-white\/30{ color: rgba(255,255,255,0.58) !important; }
#mobile-scope .text-white\/40{ color: rgba(255,255,255,0.68) !important; }
#mobile-scope .text-white\/50{ color: rgba(255,255,255,0.78) !important; }
#mobile-scope .text-white\/60{ color: rgba(255,255,255,0.86) !important; }

/* slate 계열도 모바일에선 살짝 밝게(가독성 중심) */
#mobile-scope .text-slate-300{ color: rgba(226,232,240,0.92) !important; }
#mobile-scope .text-slate-400{ color: rgba(203,213,225,0.86) !important; }
#mobile-scope .text-slate-500{ color: rgba(148,163,184,0.86) !important; }

/* 2) 글자 번짐 주원인: 과한 글로우/필터/블렌드 → 모바일에서만 최소화 */
#mobile-scope .drop-shadow,
#mobile-scope .drop-shadow-md,
#mobile-scope .drop-shadow-lg{
  filter: none !important;
}

/* 3) 회원가입(폼) 입력/라벨/패널 대비 강화 (레이아웃 무변형) */
#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;
}
#mobile-scope input::placeholder,
#mobile-scope textarea::placeholder{
  color: rgba(255,255,255,0.48) !important;
}

/* 회원가입 화면에서 사용되는 반투명 패널들을 살짝 더 불투명하게 */
#mobile-scope .bg-black\/20{ background-color: rgba(0,0,0,0.28) !important; }
#mobile-scope .bg-black\/30{ background-color: rgba(0,0,0,0.40) !important; }
#mobile-scope .bg-black\/40{ background-color: rgba(0,0,0,0.52) !important; }
#mobile-scope .bg-black\/50{ background-color: rgba(0,0,0,0.62) !important; }

/* 회원가입 카드에서 자주 쓰는 border-white/10, /5 대비 약간 강화 */
#mobile-scope .border-white\/5{ border-color: rgba(255,255,255,0.10) !important; }
#mobile-scope .border-white\/10{ border-color: rgba(255,255,255,0.16) !important; }

/* 4) 지도(JobLocationMap) 오버레이/배지의 선명도(번짐 방지) */
#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;
}

/* 5) 매칭(매칭내역) 카드의 본문 대비 강화 (작은 글자 잘 보이게) */
#mobile-scope .bg-slate-900\/50,
#mobile-scope .bg-slate-900\/40,
#mobile-scope .bg-slate-800\/40{
  background: linear-gradient(165deg, rgba(42,44,54,0.92) 0%, rgba(18,20,28,0.94) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 36px rgba(0,0,0,0.32) !important;
}

/* 6) '강한 글로우 버튼'은 모바일에서만 살짝 절제하여 글자 번짐 방지 */
#mobile-scope button{
  text-shadow: none !important;
}