/* =============================================
   Logans Taxi Ledger — Stylesheet (Skeleton)
   Inspired by Reference "Soft Neutral UI"
   ============================================= */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--bg);color:var(--t1);min-height:100vh;font-size:14px;
}
button{cursor:pointer;border:none;background:none;font-family:inherit}
a{color:inherit;text-decoration:none}

/* ── Design Tokens ── */
:root, [data-theme="light"] {
  --bg:#FAF9F7;
  --surface:#FFFFFF;
  --surface-alt:#F4F2EE;
  --surface-sunken:#F0EEE9;
  --t1:#1A1A1A;
  --t2:#4A4A4A;
  --t3:#7A7A7A;
  --t4:#A8A8A8;
  --bd:#EFEEEA;
  --primary:#7C6FF0;
  --primary-hover:#6A5AE0;
  --primary-soft:#F1EFFE;
  --primary-glow:rgba(124,111,240,0.22);
  --success:#6BBF8A;
  --success-soft:#EAF6EE;
  --danger:#E8788A;
  --danger-soft:#FBEEF0;
  --shadow-sm:0 2px 6px rgba(26,22,40,0.05);
  --shadow-md:0 4px 16px rgba(26,22,40,0.06);
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-full:9999px;
  --t-base:.2s cubic-bezier(.4,0,.2,1);
}

/* ── Utility ── */
.hidden{display:none !important}
.positive{color:var(--success)}
.negative{color:var(--danger)}

/* ── Splash Screen ── */
.splash {
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:opacity 0.4s ease;
}
.splash-content{text-align:center}
.splash-icon{font-size:48px;margin-bottom:16px}
.splash-text{font-size:20px;font-weight:700;color:var(--primary)}

/* ── Menu Backdrop ── */
.menu-backdrop {
  position:fixed;inset:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(2px);
  display:none;z-index:200;opacity:0;transition:opacity 0.3s ease;
}
.menu-backdrop.active{display:block;opacity:1}

/* ── Sidebar (Drawer) ── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:280px;
  background:var(--surface);border-right:1px solid var(--bd);
  z-index:201;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:var(--shadow-lg);
}
.sidebar.active{transform:translateX(0)}

.sidebar-header{padding:32px 24px 24px;border-bottom:1px solid var(--bd)}
.profile-card{display:flex;align-items:center;gap:12px;cursor:pointer}
.profile-img{width:48px;height:48px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:24px}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:16px;font-weight:700;color:var(--t1)}
.profile-sub{font-size:12px;color:var(--t3);margin-top:2px}

.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
.nav-group-title{font-size:11px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:1px;margin:20px 12px 10px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;transition:all var(--t-base);
}
.nav-item:hover{background:var(--surface-alt);color:var(--t1)}
.nav-item.active{background:var(--primary-soft);color:var(--primary)}
.nav-icon{font-size:18px;width:24px;text-align:center}

.sidebar-footer{padding:16px 12px;border-top:1px solid var(--bd)}

/* ── App Layout ── */
.app-layout{
  min-height:100vh;
}

.page-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--bd);
  padding:16px 20px;display:flex;align-items:center;gap:16px;
}
.menu-trigger{
  width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:pointer;border-radius:var(--radius-md);transition:background 0.2s;
}
.menu-trigger:hover{background:var(--surface-alt)}
.menu-trigger span{width:20px;height:2px;background:var(--t1);border-radius:1px}

.page-title{font-size:18px;font-weight:700;color:var(--t1);flex:1}

.main-content{padding:20px;max-width:1200px;margin:0 auto}

.page {
    animation: fadeIn 0.3s ease-out;
}

/* Hidden UI */
.hide-nav .menu-trigger {
  display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Bottom Nav ── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;justify-content:space-around;
  background:var(--surface);border-top:1px solid var(--bd);
  padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:100;box-shadow:0 -4px 12px rgba(0,0,0,0.03);
}
.nav-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--t4);transition:all var(--t-base);font-size:10px;font-weight:600;
}
.nav-btn.active{color:var(--primary)}
.nav-icon{font-size:20px}

/* ── Cards & UI Components ── */
.card{
  background:var(--surface);border:1px solid var(--bd);
  border-radius:var(--radius-xl);padding:20px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.card-title{font-size:15px;font-weight:700;margin-bottom:16px;color:var(--t1)}

.dash-hero{
  background:linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
  border:1px solid var(--bd);border-radius:var(--radius-2xl);
  padding:32px 24px;text-align:center;margin-bottom:20px;
}
.dash-hero-label{font-size:12px;color:var(--t3);font-weight:700;margin-bottom:8px}
.dash-hero-value{font-size:36px;font-weight:800;color:var(--t1)}
.dash-hero-change{font-size:13px;font-weight:600;margin-top:8px}

.bento-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 768px) {
  .bento-grid{grid-template-columns:repeat(3, 1fr)}
  .bento-span-2{grid-column:span 2}
}

.stat-card{
  background:var(--surface-alt);padding:16px;border-radius:var(--radius-md);
}
.stat-label{font-size:12px;color:var(--t3);margin-bottom:4px}
.stat-value{font-size:18px;font-weight:700;color:var(--t1)}

/* ── FAB ── */
.fab-container{position:fixed;bottom:90px;right:20px;z-index:150}
@media (min-width: 1024px) { .fab-container{bottom:24px} }

.fab-btn{
  width:56px;height:56px;border-radius:50%;background:var(--primary);
  color:#fff;font-size:28px;box-shadow:0 4px 12px var(--primary-glow);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-btn.open{transform:rotate(45deg);background:var(--t3)}

.fab-menu{
  position:absolute;bottom:70px;right:0;display:flex;flex-direction:column;gap:10px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:all 0.3s ease;
}
.fab-container.open .fab-menu{opacity:1;pointer-events:auto;transform:translateY(0)}

.fab-menu-item{
  background:var(--surface);border:1px solid var(--bd);padding:12px 18px;
  border-radius:var(--radius-full);box-shadow:var(--shadow-md);
  white-space:nowrap;font-weight:600;display:flex;align-items:center;gap:8px;
}

.fab-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.1);backdrop-filter:blur(2px);
  display:none;z-index:149;
}

/* ── Toast ── */
.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:10000}
.toast{
  background:var(--t1);color:#fff;padding:12px 24px;border-radius:var(--radius-full);
  margin-bottom:8px;font-size:13px;font-weight:600;box-shadow:var(--shadow-md);
  animation:toastIn 0.3s ease-out;
}
@keyframes toastIn { from { opacity:0;transform:translateY(-20px); } to { opacity:1;transform:translateY(0); } }
.toast.fade-out{opacity:0;transform:translateY(-10px);transition:all 0.5s ease}

/* ── Settings Page ── */
.settings-section{margin-bottom:32px;animation:fadeIn 0.4s ease forwards}
.settings-title{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;padding-left:4px}
.settings-item{background:var(--surface);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.settings-label{display:block;font-size:12px;color:var(--t3);margin-bottom:8px;font-weight:600}
.settings-input{width:100%;background:var(--surface-sunken);border:1px solid var(--bd);border-radius:var(--radius-md);padding:12px;font-size:14px;color:var(--t1);outline:none;transition:all 0.2s}
.settings-input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-soft)}
.settings-note{display:block;font-size:11px;color:var(--t4);margin-top:8px}
.settings-display{font-size:15px;font-weight:600;color:var(--t1)}
.settings-action-btn{width:100%;padding:14px;background:var(--primary-soft);color:var(--primary);border-radius:var(--radius-md);font-size:14px;font-weight:700;text-align:center;margin-top:4px;transition:all 0.2s}
.settings-action-btn:hover{background:var(--primary);color:#fff}
.settings-secondary-btn{padding:8px 16px;background:var(--surface-alt);color:var(--t2);border-radius:9px;font-size:12px;font-weight:600;margin-right:8px;margin-top:8px}
.settings-sub-actions {display: flex; flex-wrap: wrap;}

/* Toggle Switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.toggle-switch{display:flex;align-items:center;gap:10px;background:var(--surface-sunken);padding:4px;border-radius:var(--radius-full);border:1px solid var(--bd)}
.toggle-text-left, .toggle-text-right{font-size:11px;font-weight:700;padding:0 8px;color:var(--t4)}
.toggle-thumb{width:40px;height:24px;background:var(--primary);border-radius:var(--radius-full);position:relative;transition:all 0.3s}

/* Slider */
.settings-slider{width:100%;accent-color:var(--primary);margin-top:8px}
.slider-value{display:block;text-align:right;font-size:12px;font-weight:700;color:var(--primary);margin-top:4px}

/* Radio Group (Modal) */
.radio-group{display:flex;flex-direction:column;gap:12px}
.radio-option{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface-alt);border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;transition:all 0.2s}
.radio-option:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.radio-option input{accent-color:var(--primary);width:18px;height:18px}
.radio-option span{font-size:14px;font-weight:600;color:var(--t2)}
.radio-option:has(input:checked) span{color:var(--primary)}

/* ============================================================ */
/* V3 Premium Onboarding & Auth Styles                          */
/* ============================================================ */

.auth-page-v3 {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.8s ease;
}

/* 배경 블러 처리 (데스크톱용 와이드 효과) */
.auth-bg-blur {
  position: absolute;
  inset: -50px;
  background: url('../assets/img/login_hero.png') center/cover no-repeat;
  filter: blur(40px) brightness(0.85);
  opacity: 0.4;
  z-index: 1;
}

.onboarding-container-v3 {
  width: 100%;
  max-width: 440px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.auth-illustration {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  object-fit: cover;
}

.auth-content-box {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  padding: 40px 32px;
  width: 100%;
  text-align: center;
  margin-top: -40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.3);
}

.onboarding-title-v3 {
  font-size: 28px;
  font-weight: 900;
  color: var(--t1);
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.onboarding-subtitle-v3 {
  font-size: 15px;
  color: var(--t3);
  line-height: 1.5;
  margin-bottom: 0;
}

.google-login-btn {
  appearance: none;
  border: 1px solid rgba(40, 44, 52, 0.12);
  background: #fff;
  color: #202124;
  min-height: 44px;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(32, 33, 36, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.google-login-btn::before {
  content: "G";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
  font-weight: 900;
  font-family: Arial, sans-serif;
  background: #fff;
  border: 1px solid rgba(66, 133, 244, 0.24);
}

.google-login-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 133, 244, 0.45);
  box-shadow: 0 12px 28px rgba(32, 33, 36, 0.12);
}

.google-login-btn:active {
  transform: translateY(0);
}

.google-login-btn-full {
  width: min(280px, 100%);
  margin-top: 32px;
}

.google-login-btn-compact {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  box-shadow: none;
}

/* ── 모바일 반응형: 사진 꽉 채우기 혁명 ── */
@media (max-width: 768px) {
  .auth-page-v3 {
    padding: 0;
  }
  .onboarding-container-v3 {
    max-width: 100%;
    height: 100vh;
    justify-content: flex-end;
  }
  .auth-illustration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    z-index: 1;
    box-shadow: none;
  }
  .auth-content-box {
    position: relative;
    z-index: 3;
    margin-top: 0;
    padding: 48px 32px 64px;
    border-radius: 40px 40px 0 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 85%, rgba(255,255,255,0.85));
  }
  .auth-bg-blur {
    display: none;
  }
}

/* Step Indicator */
.v3-step-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  margin-top: 12px;
}

.v3-step-dot {
  flex: 1;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: 3px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.v3-step-dot.active {
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* Option Cards (Selection) */
.v3-option-card {
  background: var(--surface);
  border: 1.5px solid var(--bd);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v3-option-card:hover {
  background: var(--surface-alt);
  transform: translateY(-2px);
}

.v3-option-card.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.v3-option-label {
  font-weight: 700;
  font-size: 17px;
  color: var(--t1);
}

.v3-option-desc {
  font-size: 13px;
  color: var(--t3);
}

/* Selection Grid */
.v3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v3-grid-item {
  background: var(--surface);
  border: 1.5px solid var(--bd);
  border-radius: 16px;
  padding: 24px 12px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--t2);
}

.v3-grid-item.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* Forms */
.v3-form-group {
  margin-bottom: 24px;
  animation: slideUp 0.4s ease forwards;
}

.v3-form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--t3);
  margin-bottom: 10px;
  margin-left: 4px;
}

.v3-input {
  width: 100%;
  background: var(--surface-sunken);
  border: 1.5px solid var(--bd);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--t1);
  font-size: 16px;
  transition: all 0.3s ease;
}

.v3-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Buttons */
.v3-btn-group {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

.v3-btn {
  flex: 1;
  border: none;
  border-radius: 16px;
  padding: 18px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v3-btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 8px 24px var(--primary-glow);
}

.v3-btn-primary:active {
  transform: scale(0.98);
}

.v3-btn-primary:disabled {
  background: var(--t4);
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.v3-btn-secondary {
  background: var(--surface-sunken);
  color: var(--t2);
  max-width: 100px;
}

/* Safe Box */
.v3-safe-box {
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  padding: 20px;
  border-radius: 0 16px 16px 0;
  margin-bottom: 28px;
}

.v3-safe-text {
  font-size: 14px;
  line-height: 1.6;
  color: #10b981;
  font-weight: 700;
}

/* Animations */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.v3-step {
  display: none;
  animation: fadeIn 0.4s ease;
}

.v3-step.active {
  display: block;
}

/* Utils */
.v-hidden { display: none !important; }

/* ── V5.3 Enterprise Dashboard Styles ── */
.dash-wrapper { display: flex; flex-direction: column; gap: 24px; padding-bottom: 40px; }
.dash-header { display: flex; align-items: center; justify-content: space-between; }
.dash-user .greeting { font-size: 16px; color: var(--t1); }
.dash-user .tier-mark { font-size: 10px; font-weight: 800; color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 4px; }

.dash-hero-v2 {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  color: #fff; border-radius: var(--radius-2xl); padding: 32px 24px; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.hero-v2-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 8px; font-weight: 600; }
.hero-v2-value { font-size: 42px; font-weight: 900; letter-spacing: -1px; margin-bottom: 8px; }
.hero-v2-sub { font-size: 13px; color: var(--success); font-weight: 600; }

.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ledger-card { 
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--radius-lg); 
  padding: 16px; box-shadow: var(--shadow-sm); 
}
.l-card-header { font-size: 12px; font-weight: 700; color: var(--t3); margin-bottom: 12px; border-bottom: 1px solid var(--bd); padding-bottom: 8px; }
.l-card-body { display: flex; flex-direction: column; gap: 8px; }
.l-row { display: flex; justify-content: space-between; font-size: 12px; }
.l-row span { color: var(--t3); }
.l-row strong { color: var(--t1); font-weight: 700; }

.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-quick { 
  padding: 16px; border-radius: var(--radius-lg); font-weight: 700; font-size: 14px; 
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s;
}
.btn-quick.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 12px var(--primary-glow); }
.btn-quick.secondary { background: var(--surface-sunken); color: var(--t1); }

.dash-footer { background: var(--surface-alt); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.traffic-news { font-size: 12px; display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; overflow: hidden; }
.news-icon { font-size: 16px; }

.goal-container { display: flex; flex-direction: column; gap: 8px; }
.goal-header { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--t2); }
.progress-bar-bg { width: 100%; height: 8px; background: var(--surface-sunken); border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 1s ease-out; }


/* ============================================================ */
/* V6 Premium Enhanced Login UI (Hybrid System Implementation) */
/* ============================================================ */

.auth-page-v3 {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.auth-bg-blur {
  position: absolute;
  inset: -50px;
  background: url('../assets/img/login_hero.png') center/cover no-repeat;
  filter: blur(40px) brightness(0.85);
  opacity: 0.4;
  z-index: 1;
}

.onboarding-container-v3 {
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: 20px;
}

.auth-content-box {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 32px;
  padding: 40px 32px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 45px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.4);
  animation: slideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.auth-illustration {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.auth-illustration:hover {
  transform: scale(1.02);
}

/* 📱 모바일 특화: 사진 꽉 채우기 & 하단 고정 레이아웃 */
@media (max-width: 768px) {
  .auth-page-v3 {
    padding: 0;
  }
  .onboarding-container-v3 {
    max-width: 100%;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .auth-illustration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    margin-bottom: 0;
    object-fit: cover;
    z-index: 1;
  }
  .auth-content-box {
    position: relative;
    z-index: 3;
    border-radius: 40px 40px 0 0;
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0.9));
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
  }
  .auth-bg-blur {
    display: none;
  }
}