/* ========================================
   반응형 웹 디자인 전용 CSS
   - PC에서는 기존 스타일 그대로 유지
   - 모바일에서만 아래 스타일 적용
   ======================================== */

/* ========================================
   브레이크포인트 정의
   - 1024px: 태블릿
   - 768px: 작은 태블릿 / 큰 모바일
   - 640px: 모바일
   - 480px: 작은 모바일
   ======================================== */

/* ========================================
   Phase 1: 공통 컴포넌트
   ======================================== */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  /* 전체 콘텐츠 여백 축소 */
  .content {
    padding: 1rem;
  }

  /* 카드 최대 너비 조정 */
  .cards-search, .cards-table-wrap {
    max-width: 100%;
  }
}

/* 작은 태블릿 / 큰 모바일 (768px 이하) */
@media (max-width: 768px) {

  /* === Header (topbar) === */
  .topbar {
    flex-direction: row; /* 세로에서 가로로 변경 */
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem; /* 패딩 증가 */
    gap: 0.8rem;
    min-height: 56px; /* 최소 높이 보장 */
  }

  .brand {
    font-size: 1.1rem; /* 1rem에서 증가 */
    font-weight: 700;
  }

  .logo {
    font-size: 1.3rem; /* 로고 크기 유지 */
  }

  .user-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .user-email {
    font-size: 0.9rem; /* 0.85rem에서 증가 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* 이메일 최대 너비 */
  }

  /* 로그아웃 버튼 크기 */
  .user-actions .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* === Navigation (tabs) === */
  .tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 0.5rem 0.8rem;
    gap: 0.3rem;
  }

  .tabs::-webkit-scrollbar {
    height: 4px;
  }

  .tabs::-webkit-scrollbar-thumb {
    background: #d2d2e6;
    border-radius: 2px;
  }

  .tab {
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  /* sticky 위치 조정 */
  .tabs {
    top: auto;
  }

  /* === 테이블 공통 - 가로 스크롤 === */
  .cards-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table {
    min-width: 600px; /* 최소 너비 보장 */
    font-size: 0.9rem;
  }

  .table th,
  .table td {
    padding: 0.5rem 0.6rem;
  }

  /* 검색 폼 - 4열 그리드를 2열로 */
  .cards-search .row {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .cards-search .actions {
    grid-column: 1 / -1; /* 버튼 영역은 전체 너비 사용 */
    justify-content: flex-start;
  }

  /* === 모달 === */
  .modal-backdrop .modal,
  .modal-content {
    width: 95vw;
    max-width: 95vw;
    max-height: 95vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }

  /* === 2열 레이아웃 (상세 페이지) → 1열로 === */
  .shell {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .leftcol,
  .rightcol {
    grid-column: 1;
  }

  /* animal_detail, medical_wallpaper, training_detail 등 */
  .detail-shell {
    padding: 0.8rem;
  }

  /* 기본정보 폼: 좌측 폼 + 우측 사진 → 세로 배치 */
  .basic-wrap {
    grid-template-columns: 1fr !important;
  }

  .basic-form .row,
  .basic-form .row-2col,
  .basic-form .row-4col {
    grid-template-columns: 100px 1fr;
    gap: 0.5rem;
  }

  .basic-form input,
  .basic-form select {
    max-width: 100%;
  }

  /* === Settings 레이아웃 === */
  /* styles.css에 이미 있지만 보강 */
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .side-menu {
    position: static;
    width: 100%;
  }
}

/* 모바일 (640px 이하) */
@media (max-width: 640px) {

  /* === 전체 여백 더 축소 === */
  .content {
    padding: 0.6rem;
  }

  /* === Header === */
  .topbar {
    padding: 0.9rem 0.8rem;
    min-height: 52px;
  }

  .brand {
    font-size: 1rem; /* 0.95rem에서 증가 */
  }

  .logo {
    font-size: 1.2rem;
  }

  .user-email {
    font-size: 0.85rem;
    max-width: 100px;
  }

  .user-actions .btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
  }

  /* === Navigation === */
  .tabs {
    padding: 0.4rem 0.6rem;
  }

  .tab {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }

  /* === 검색 폼 - 1열로 === */
  .cards-search .row {
    grid-template-columns: 1fr;
  }

  .cards-search input,
  .cards-search select {
    width: 100%;
  }

  /* === 버튼 크기 조정 (터치 친화적) === */
  .btn {
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    min-height: 44px; /* 터치 최소 크기 */
  }

  .btn.small {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    min-height: 36px;
  }

  /* === 테이블 === */
  .table {
    font-size: 0.85rem;
  }

  .table th,
  .table td {
    padding: 0.4rem 0.5rem;
  }

  /* === 모달 === */
  .modal-header h2,
  .modal-header h3 {
    font-size: 1.1rem;
  }

  .modal-body {
    padding: 0.8rem;
  }

  /* 모달 내 그리드 폼 - 1열로 */
  .modal .row,
  .modal .grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* === 캘린더 (schedule.html) === */
  .calendar-view {
    height: 65vh;
  }

  .calendar-header,
  .calendar-grid {
    gap: 0.3rem;
  }

  .day-cell {
    min-height: 80px;
    padding: 0.4rem;
  }

  .day-num {
    font-size: 0.9rem;
  }

  .item-line {
    font-size: 0.8rem;
  }

  /* 스케줄 헤더 버튼 */
  .schedule-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .schedule-left {
    width: 100%;
    justify-content: space-between;
  }

  /* === 먹이 (feeding.html) === */
  .feed-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-controls .left,
  .feed-controls .mid,
  .feed-controls .right {
    width: 100%;
    justify-content: space-between;
  }

  /* === 점검일지 (daily.html) === */
  .daily-container {
    padding: 0.8rem;
  }

  .daily-table {
    font-size: 9px;
  }

  .daily-table th,
  .daily-table td {
    padding: 4px;
  }

  /* 서식 툴바 위치 조정 */
  .format-toolbar {
    left: 10px;
    top: auto;
    bottom: 10px;
    transform: none;
  }

  /* === 카드 레이아웃 === */
  .card {
    padding: 0.8rem;
  }

  .card h2,
  .card h3,
  .card h4 {
    font-size: 1rem;
  }

  /* === 폼 === */
  .field {
    gap: 0.3rem;
  }

  label {
    font-size: 0.9rem;
  }

  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px; /* iOS 자동 줌 방지 */
    padding: 0.6rem;
  }

  /* === 페이저 === */
  .pager {
    gap: 0.3rem;
  }

  .pager .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    min-height: auto;
  }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {

  /* === 더 작은 여백 === */
  .content {
    padding: 0.5rem;
  }

  .topbar {
    padding: 0.8rem 0.6rem;
    min-height: 50px;
  }

  .brand {
    font-size: 0.95rem;
  }

  .logo {
    font-size: 1.1rem;
  }

  .user-email {
    display: none; /* 아주 작은 화면에서는 이메일 숨김 */
  }

  .user-actions .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  /* === 폰트 크기 조정 === */
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  h3 {
    font-size: 1rem;
  }

  /* === 캘린더 === */
  .calendar-view {
    height: 60vh;
  }

  .day-cell {
    min-height: 60px;
    padding: 0.3rem;
  }

  .day-num {
    font-size: 0.8rem;
  }

  .item-line {
    font-size: 0.75rem;
  }

  /* === 테이블 === */
  .table {
    font-size: 0.8rem;
  }

  /* === 버튼 === */
  .btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
  }

  /* === 검색 필터 비활성 개체 토글 버튼 === */
  #toggleInactiveBtn,
  #medToggleInactiveBtn,
  #trainingToggleInactiveBtn {
    font-size: 16px !important;
    padding: 5px 10px !important;
  }
}

/* ========================================
   Phase 2: 추가 세부 조정 (가독성 개선)
   ======================================== */

/* === animal_detail.html 전용 개선 === */
@media (max-width: 768px) {
  /* 기본정보 섹션 잘림 방지 */
  .detail-shell .basic-wrap {
    overflow: visible !important;
  }

  .detail-shell .basic-form {
    overflow: visible !important;
  }

  /* 기본정보 행들이 잘리지 않도록 */
  .detail-shell .basic-form .row {
    min-height: auto;
    overflow: visible;
  }

  /* 표가 카드 밖으로 나가지 않도록 */
  .detail-shell .card {
    overflow-x: auto;
    overflow-y: visible; /* 세로는 잘리지 않도록 */
    -webkit-overflow-scrolling: touch;
  }

  /* 기본정보 섹션만 overflow visible */
  .detail-shell #sectBasic {
    overflow: visible !important;
  }

  /* 테이블 wrapper 추가 */
  .detail-shell .table {
    min-width: 100%;
    width: 100%;
    display: block;
    overflow-x: auto;
  }

  /* 테이블 헤더/셀 가로 쓰기 강제 */
  .detail-shell .table th,
  .detail-shell .table td {
    white-space: nowrap;
    writing-mode: horizontal-tb !important;
  }

  /* 섹션 헤더의 버튼 그룹 */
  .card h2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .card h2 .btn-group {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* 모달 내 그리드 행 */
  .modal .row {
    grid-template-columns: 1fr !important;
  }

  /* 페이저 정보 줄바꿈 */
  .pager {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pager .info {
    width: 100%;
    text-align: center;
    margin-bottom: 0.3rem;
  }
}

@media (max-width: 640px) {
  /* 더 작은 화면에서 테이블 폰트 축소 */
  .detail-shell .table {
    font-size: 0.8rem;
  }

  .detail-shell .table th,
  .detail-shell .table td {
    padding: 0.4rem 0.3rem;
  }

  /* 버튼 크기 조정 */
  .detail-shell .btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
  }
}

/* === medical_wallpaper.html 전용 개선 === */
@media (max-width: 768px) {
  /* 왼쪽 섹션 (사진+기본정보) 크기 축소 */
  .leftcol {
    max-width: 100%;
  }

  /* 사진 카드 높이 제한 */
  .leftcol .photo-card {
    max-height: 250px;
  }

  .leftcol .photo-box {
    max-height: 180px;
    aspect-ratio: 4/3; /* 1:1에서 4:3으로 변경 */
  }

  .leftcol .photo-box img {
    object-fit: cover; /* contain에서 cover로 변경 */
  }

  /* 기본정보 섹션 축소 */
  .leftcol .kv {
    grid-template-columns: 70px 1fr;
    row-gap: 0.5rem;
    font-size: 0.9rem;
  }

  .leftcol .kv dt {
    font-size: 0.85rem;
  }

  .leftcol .kv dd {
    font-size: 0.9rem;
  }

  /* 왼쪽 섹션 버튼들 */
  .leftcol .btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.7rem;
  }

  /* 오른쪽 섹션 강조 */
  .rightcol {
    flex: 1;
  }

  /* 오른쪽 섹션 카드 여백 축소 */
  .rightcol .card {
    padding: 0.8rem;
  }

  .rightcol .card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }

  /* 목록 항목 */
  .rightcol .list .item {
    padding: 0.7rem;
  }

  /* 테이블 가독성 */
  .rightcol .tbl {
    font-size: 0.85rem;
  }

  .rightcol .tbl th,
  .rightcol .tbl td {
    padding: 0.5rem 0.4rem;
  }
}

@media (max-width: 640px) {
  /* 더 작은 화면: 왼쪽 섹션 더 축소 */
  .leftcol .photo-card {
    max-height: 200px;
  }

  .leftcol .photo-box {
    max-height: 140px;
  }

  .leftcol .kv {
    grid-template-columns: 60px 1fr;
    font-size: 0.85rem;
  }

  .leftcol .panel {
    padding: 0.8rem;
  }

  /* 오른쪽 섹션 더 강조 */
  .rightcol .card {
    padding: 0.7rem;
  }

  .rightcol .tbl {
    font-size: 0.8rem;
  }
}

/* === training_detail.html도 동일하게 적용 (더 강화) === */
@media (max-width: 768px) {
  /* 왼쪽 섹션 더욱 컴팩트하게 */
  .shell .leftcol .photo-card {
    max-height: 200px; /* 250px에서 축소 */
  }

  .shell .leftcol .photo-box {
    max-height: 140px; /* 180px에서 축소 */
    aspect-ratio: 4/3;
  }

  .shell .leftcol .photo-box img {
    object-fit: cover;
  }

  /* 기본정보 섹션 더 축소 */
  .shell .leftcol .panel {
    padding: 0.7rem;
  }

  .shell .leftcol .kv {
    grid-template-columns: 60px 1fr; /* 70px에서 축소 */
    row-gap: 0.4rem;
    font-size: 0.85rem;
  }

  .shell .leftcol .kv dt {
    font-size: 0.8rem;
  }

  .shell .leftcol .kv dd {
    font-size: 0.85rem;
  }

  /* 왼쪽 섹션 버튼들 */
  .shell .leftcol .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  /* 오른쪽 섹션 강조 */
  .shell .rightcol {
    flex: 1;
  }

  .shell .rightcol .panel {
    padding: 1rem;
  }

  .shell .rightcol h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  /* 더 작은 화면: 왼쪽 섹션 최소화 */
  .shell .leftcol .photo-card {
    max-height: 160px; /* 200px에서 더 축소 */
  }

  .shell .leftcol .photo-box {
    max-height: 110px; /* 140px에서 더 축소 */
  }

  .shell .leftcol .panel {
    padding: 0.6rem;
  }

  .shell .leftcol .kv {
    grid-template-columns: 50px 1fr; /* 60px에서 축소 */
    font-size: 0.8rem;
  }

  .shell .leftcol .kv dt {
    font-size: 0.75rem;
  }

  .shell .leftcol .btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  /* 오른쪽 섹션 더 강조 */
  .shell .rightcol .panel {
    padding: 0.8rem;
  }
}

/* ========================================
   Phase 3: 전체 페이지 가독성 개선
   ======================================== */

/* === 모든 페이지 공통 가독성 개선 === */
@media (max-width: 768px) {

  /* 폰트 크기 전반적 개선 */
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  /* 제목 가독성 */
  h1 {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  /* 카드 여백 개선 */
  .card {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  /* 라벨 가독성 */
  label {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
  }

  /* 힌트/메타 정보 */
  .hint,
  .muted,
  .meta {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* 테이블 전체 가독성 개선 */
  .table {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .table th {
    font-size: 0.85rem;
    font-weight: 700;
    background: #f8f9fc;
  }

  .table td {
    line-height: 1.5;
  }

  /* 버튼 텍스트 가독성 */
  .btn {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
  }

  /* 입력 필드 가독성 */
  input,
  select,
  textarea {
    font-size: 16px; /* iOS 자동 줌 방지 */
    line-height: 1.5;
  }

  /* 링크 가독성 */
  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  /* 리스트 아이템 여백 */
  .list .item {
    padding: 0.9rem;
    margin-bottom: 0.7rem;
  }

  /* 패널 여백 */
  .panel {
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  /* 더 작은 화면에서 더 나은 가독성 */
  body {
    font-size: 14px;
  }

  .card {
    padding: 0.9rem;
  }

  .table {
    font-size: 0.85rem;
  }

  .btn {
    font-size: 0.9rem;
  }
}

/* === 검색/필터 폼 개선 === */
@media (max-width: 768px) {
  .cards-search {
    padding: 1rem;
  }

  .cards-search input,
  .cards-search select {
    height: 44px; /* 터치 친화적 높이 */
    font-size: 16px;
  }

  .cards-search .btn {
    height: 44px;
    min-width: 80px;
  }
}

/* === 캘린더 가독성 개선 === */
@media (max-width: 768px) {
  .calendar-header {
    font-size: 0.9rem;
    font-weight: 700;
  }

  .day-cell {
    padding: 0.5rem;
  }

  .day-num {
    font-size: 0.95rem;
    font-weight: 700;
  }

  .item-line {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .more-line {
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  .calendar-header {
    font-size: 0.85rem;
  }

  .day-num {
    font-size: 0.9rem;
  }

  .item-line {
    font-size: 0.8rem;
  }
}

/* === 먹이 페이지 개선 === */
@media (max-width: 768px) {
  .feed-month th,
  .feed-month td {
    font-size: 0.85rem;
    padding: 0.5rem 0.3rem;
  }

  .gender-tabs .gender-tab {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }

  .notes-wrap {
    padding: 0.9rem;
  }

  .notes-wrap textarea {
    min-height: 100px;
    font-size: 16px;
  }
}

/* === 점검일지 개선 === */
@media (max-width: 768px) {
  .daily-table {
    font-size: 10px;
  }

  .daily-header {
    font-size: 15px;
    padding: 6px 20px;
  }

  .daily-subtitle {
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .daily-table {
    font-size: 9px;
  }

  .daily-table .editable {
    min-height: 18px;
    padding: 3px;
  }
}

/* === 모달 가독성 개선 === */
@media (max-width: 768px) {
  .modal-header h2,
  .modal-header h3 {
    font-size: 1.2rem;
  }

  .modal-body {
    line-height: 1.6;
  }

  .form-group label {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .form-control {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* === 설정 페이지 개선 === */
@media (max-width: 768px) {
  .side-menu {
    padding: 0.8rem;
  }

  .side-item {
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
  }

  .side-title {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  .settings-content {
    padding: 1rem;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .inline-search {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-search input {
    width: 100%;
  }
}

/* === 페이저 개선 === */
@media (max-width: 768px) {
  .pager {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .pager .btn {
    min-width: 36px;
    height: 36px;
    padding: 0.4rem 0.6rem;
  }

  .pager .info {
    font-size: 0.9rem;
  }
}

/* === 로딩 인디케이터 개선 === */
@media (max-width: 768px) {
  #loadingIndicator,
  .loading-indicator {
    right: 10px;
    top: auto;
    bottom: 10px;
    min-width: 180px;
  }

  .loading-title {
    font-size: 13px;
  }

  .loading-progress {
    font-size: 12px;
  }
}

/* === 뱃지 개선 === */
@media (max-width: 768px) {
  .badge {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
}

/* === 에러 메시지 개선 === */
@media (max-width: 768px) {
  .error {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* ========================================
   Phase 4: 추가 최적화
   ======================================== */

/* landscape 모드 (가로 모드) */
@media (max-width: 768px) and (orientation: landscape) {
  .calendar-view {
    height: 80vh;
  }

  .topbar {
    padding: 0.5rem 1rem;
  }
}

/* ========================================
   터치 최적화
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* 터치 기기 전용 */

  /* 호버 효과 제거 */
  .btn:hover,
  .tab:hover,
  .card:hover {
    transform: none;
  }

  /* 버튼 최소 크기 보장 */
  .btn,
  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* 링크 최소 크기 */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 테이블 행 클릭 영역 확대 */
  .table td {
    padding: 0.6rem 0.5rem;
  }
}