* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
html, body { 
  margin: 0; 
  padding: 0; 
  min-height: 100%; 
  min-height: 100dvh;
  overscroll-behavior: none;
  /* iOS Safari 전체 화면 배경 확장 */
  -webkit-touch-callout: none;
}
#app {
  min-height: 100%;
  min-height: 100dvh;
}

/* iOS Safari 배경 확장을 위한 추가 스타일 */
@supports (padding: env(safe-area-inset-top)) {
  html, body, #app {
    /* 배경이 safe area 바깥까지 확장되도록 */
    min-height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
  }
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
input::placeholder { color: #c4c4c4; }

/* Safe Area for iOS */
.safe-area-top { padding-top: env(safe-area-inset-top, 0); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Mobile card background fix */
@media (max-width: 849px) {
  .mobile-card {
    background: transparent !important;
  }
}

/* Button base styles */
button { 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
button:active { 
  transform: scale(0.97);
}

/* Primary buttons (dark) */
.btn-primary {
  background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #3f3f46 0%, #27272a 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Secondary buttons (light) */
.btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
  border: 1px solid #e4e4e7;
}
.btn-secondary:hover {
  background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  border-color: #d4d4d8;
}

/* Clickable items */
.clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.clickable:hover {
  transform: translateY(-1px);
}
.clickable:active {
  transform: translateY(0);
}

.animate-slide-in { animation: slideIn 0.2s ease; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Custom 850px breakpoint for dashboard */
@media (max-width: 849px) {
  .dashboard-pc { display: none !important; }
  .dashboard-mobile { display: flex !important; }
}
@media (min-width: 850px) {
  .dashboard-pc { display: flex !important; }
  .dashboard-mobile { display: none !important; }
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  button:active, a:active {
    transform: scale(0.97) !important;
  }
  .hover\:scale-110:hover,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-0\.5:hover {
    transform: none !important;
  }
  /* Reset hover states immediately after touch */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Touch-friendly active state */
@media (pointer: coarse) {
  button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}