/* mobile-fixes.css - 모바일 최적화 강화 */

/* 모바일 기본 설정 */
@media (max-width: 768px) {
  /* 컨테이너 패딩 조정 */
  .container {
    padding: 12px;
    max-width: 100%;
  }
  
  /* 카드 여백 조정 */
  .card {
    padding: 14px;
    margin: 10px 0;
    border-radius: 12px;
  }
  
  /* 헤더 최적화 */
  .appbar .wrap {
    padding: 10px 12px;
  }
  
  .brand {
    font-size: 16px;
  }
  
  .nav {
    gap: 6px;
  }
  
  .navlink {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  /* 폼 그리드 - 모바일에서 1열로 */
  .grid-form {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  
  /* 필드 스타일 */
  .field input[type="text"],
  .field input[type="number"],
  .field select {
    width: 100%;
    min-height: 44px; /* iOS 권장 터치 타겟 */
    font-size: 16px; /* iOS 자동 줌 방지 */
  }
  
  /* 체크박스 크기 증가 */
  .ck {
    width: 20px;
    height: 20px;
  }
  
  /* 세그먼트 버튼 그룹 */
  .seg-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .seg-item span {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  /* 빠른 이름 선택 pills */
  .pills {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  
  .pill {
    flex-shrink: 0;
    min-width: 60px;
    padding: 8px 14px;
    font-size: 14px;
  }
  
  /* 버튼 스타일 */
  .btn {
    min-height: 44px;
    font-size: 14px;
    padding: 12px 16px;
  }
  
  .btn.primary.wide {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
  }
  
  /* 리스트 아이템 */
  .list-item {
    padding: 12px;
    gap: 8px;
  }
  
  .item-main {
    flex-wrap: wrap;
  }
  
  .item-main .who {
    font-size: 15px;
    min-width: 60px;
  }
  
  .item-main .temp {
    font-size: 18px;
    font-weight: 600;
    min-width: 70px;
  }
  
  .item-main .flags {
    width: 100%;
    margin-top: 6px;
    margin-left: 0;
  }
  
  .item-sub {
    font-size: 14px;         /* 11px → 14px */
    line-height: 1.4;        /* 행간 보강 */
    letter-spacing: 0.2px;   /* 자간 소폭 보강 */
  }
  
  .item-actions {
    gap: 6px;
    margin-top: 8px;
  }
  
  .item-actions .btn {
    flex: 1;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
  
  /* 칩 스타일 */
  .chip {
    padding: 3px 8px;
    font-size: 11px;
  }
  
  /* 모달 최적화 */
  .modal {
    width: calc(100% - 24px);
    max-width: 100%;
    padding: 16px;
  }
  
  .modal h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  /* CSV 버튼 */
  .export-btn {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 10px;
    order: 3;
  }
  
  /* 제목과 버튼 레이아웃 */
  section.card > div:first-child {
    flex-direction: column;
    align-items: stretch !important;
  }
  
  /* 토스트 위치 조정 */
  .toast-wrap {
    right: 12px;
    bottom: 70px; /* 테마 토글 버튼 위 */
    left: 12px;
  }
  
  .toast {
    width: 100%;
    text-align: center;
  }
  
  /* 테마 토글 버튼 */
  .theme-toggle {
    width: 44px;
    height: 44px;
    bottom: 16px;
    right: 16px;
    font-size: 20px;
  }
  
  /* Empty state */
  .empty {
    padding: 20px;
    font-size: 14px;
  }
  
  /* 스크롤바 숨기기 */
  .pills::-webkit-scrollbar {
    display: none;
  }
}

/* 아주 작은 화면 (SE, Mini) */
@media (max-width: 375px) {
  .container {
    padding: 10px;
  }
  
  .card {
    padding: 12px;
  }
  
  .brand {
    font-size: 14px;
  }
  
  .navlink {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .btn {
    font-size: 13px;
    padding: 10px 14px;
  }
    /* 작은 화면에서 날짜/시간 더 크게 */
  .item-sub {
    font-size: 15px !important;
  }
}

/* iOS 안전 영역 대응 */
@supports (padding: env(safe-area-inset-bottom)) {
  .container {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .theme-toggle {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  
  .toast-wrap {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* 가로 모드 대응 */
@media (max-width: 768px) and (orientation: landscape) {
  .appbar .wrap {
    padding: 8px 12px;
  }
  
  .card {
    padding: 12px;
    margin: 8px 0;
  }
  
  .grid-form {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 터치 친화적 요소 */
@media (hover: none) and (pointer: coarse) {
  /* 터치 디바이스에서 호버 효과 제거 */
  .btn:hover,
  .pill:hover {
    background: inherit;
  }
  
  /* 탭 하이라이트 제거 */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 선택 방지 */
  .btn,
  .pill,
  .navlink {
    -webkit-user-select: none;
    user-select: none;
  }
}

/* 다크모드 모바일 최적화 */
@media (max-width: 768px) {
  body.light-mode .card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  
  body.light-mode .modal {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
}