/* =============================================
   도파민 모바일 최적화 CSS
   - 터치 타겟 최소 44px
   - 스크롤 최적화
   - 세이프에리어 대응
   - 다크모드 입력 필드 최적화
   - 부드러운 트랜지션
   ============================================= */

/* ===== 기본 터치 최적화 ===== */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* 터치 타겟 최소 크기 보장 */
button, a, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"],
.era-chip, .tab-item, .option-card, .quiz-option {
  min-height: 44px;
  min-width: 44px;
}

/* 작은 인라인 요소 예외 */
.s-more, .ft-links a, .goods-era-chip, .push-cat-item, .dpp-cat {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ===== 입력 필드 모바일 최적화 ===== */
input, textarea, select {
  font-size: 16px !important; /* iOS 줌 방지 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
}

input:focus, textarea:focus {
  outline: 2px solid var(--primary-light, #A78BFA);
  outline-offset: 2px;
}

/* 다크모드 입력 필드 */
input, textarea {
  background: rgba(255,255,255,0.06);
  color: #F1F1F6;
  border: 1px solid rgba(255,255,255,0.1);
}

input::placeholder, textarea::placeholder {
  color: rgba(160,164,184,0.6);
}

/* ===== 스크롤 컨테이너 최적화 ===== */
.era-bar, .goods-grid, .trend-grid, .goods-era-bar,
.tab-bar, .comm-feed-preview, .challenge-grid {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.era-bar::-webkit-scrollbar, .goods-grid::-webkit-scrollbar,
.trend-grid::-webkit-scrollbar, .goods-era-bar::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar, .comm-feed-preview::-webkit-scrollbar,
.challenge-grid::-webkit-scrollbar {
  display: none;
}

/* 스크롤 스냅 */
.goods-grid, .trend-grid {
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
}

.goods-card, .trend-card {
  scroll-snap-align: start;
}

/* ===== 세이프에리어 대응 ===== */
header {
  padding-top: env(safe-area-inset-top, 0);
}

footer {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav, .fixed-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 모달/바텀시트 세이프에리어 */
.modal-content, .dpp-sheet, .drawer-content {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ===== 반응형 간격 조정 ===== */
@media (max-width: 380px) {
  .section { padding: 0 12px; }
  .hero-content h1 { font-size: 26px; }
  .hero-sub { font-size: 13px; }
  .hero-metrics { gap: 12px; }
  .metric-val { font-size: 18px; }
  .grid { gap: 10px; }
  .s-title { font-size: 16px; }
  .goods-card { flex: 0 0 130px; }
  .goods-thumb { height: 100px; font-size: 40px; }
  .goods-name { font-size: 11px; }
}

@media (min-width: 381px) and (max-width: 480px) {
  .section { padding: 0 16px; }
  .goods-card { flex: 0 0 145px; }
}

/* 태블릿 최적화 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .section { max-width: 720px; margin-left: auto; margin-right: auto; }
  .hero-content { max-width: 600px; margin: 0 auto; }
  .goods-grid { flex-wrap: wrap; }
  .goods-card { flex: 0 0 calc(25% - 12px); }
}

/* ===== 터치 피드백 ===== */
.card, .goods-card, .comm-post, .option-card, .quiz-option,
.era-chip, .tab-item, .debate-card, .challenge-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}

.card:active, .goods-card:active, .comm-post:active,
.option-card:active, .quiz-option:active {
  transform: scale(0.97);
}

.era-chip:active, .tab-item:active, .goods-era-chip:active {
  transform: scale(0.95);
}

/* 버튼 터치 피드백 */
button:active, .hero-cta:active, .cta-btn:active, .dpp-allow:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ===== 스켈레톤 로딩 ===== */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== 풀스크린 이미지 뷰어용 ===== */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.fullscreen-overlay img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== 성능 최적화 ===== */
img, video {
  content-visibility: auto;
}

.section.reveal {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* GPU 가속 대상 */
.hero-orbs .orb, .modal, .drawer, .dpp-sheet {
  will-change: transform;
  transform: translateZ(0);
}

/* ===== 접근성 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 고대비 모드 */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(255,255,255,0.3);
  }
  .card, .goods-card, .comm-post {
    border-width: 2px;
  }
}

/* ===== 랜드스케이프 모드 ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding: 80px 16px 40px; }
  .hero-metrics { margin-top: 12px; }
  .onboarding-modal .ob-content { max-height: 90vh; overflow-y: auto; }
}

/* ===== Pull-to-refresh 제어 ===== */
body.no-pull-refresh {
  overscroll-behavior-y: contain;
}

/* ===== 노치 대응 (아이폰) ===== */
@supports (padding: max(0px)) {
  header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ===== 토스트 메시지 위치 ===== */
.toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}