/* mobile-achievement.css — achievement.html 모바일(≤640px) 전용 화면. */
@media (max-width: 640px) {
  body { padding: 14px 12px !important; }
  .back { font-size: 14px; padding: 8px 0; margin-bottom: 4px; }
  h1 { font-size: 22px; margin: 0 0 10px; }

  /* 위쪽 두 버튼: 반반 */
  .topbar { justify-content: stretch; gap: 8px; margin: 0 0 12px; }
  .topbar .btn { flex: 1; padding: 11px 8px; font-size: 14px; }

  /* 요약 두 칸 */
  .summary { gap: 10px; margin: 0 0 12px; }
  .card { padding: 16px 10px; border-radius: 14px; }
  .card .label { font-size: 12px; margin-bottom: 6px; }
  .card .value { font-size: 30px; }
  .card .small { font-size: 11px; margin-top: 4px; }

  /* 학습 관찰 */
  #obsCard { margin-bottom: 12px !important; }
  #obsCard > div:first-child > div:first-child { font-size: 15px !important; }
  #obsText { font-size: 13px !important; }
  #obsChips > * { font-size: 12px !important; }

  /* 「오늘 할 일」 제목 줄: 제목 한 줄, 버튼 두 개는 그 아래 반반 */
  .section-title { flex-wrap: wrap; font-size: 18px; margin: 18px 0 10px; }
  .section-title > span:first-child { flex: 1 1 100%; }
  .section-title > span:last-child { flex: 1 1 100%; display: flex; gap: 8px; }
  .section-title > span:last-child .btn { flex: 1; font-size: 14px !important; padding: 10px 8px !important; }

  /* ── 할 일 표 → 카드 줄: 첫 줄 [체크] 할 일 [삭제], 둘째 줄 과목·마감·상태·퍼센트 ── */
  .table-card > table { display: block; }
  .table-card > table > thead { display: none; }
  #todoBody { display: block; }
  #todoBody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 8px;
    padding: 12px 12px 12px 10px;
    border-bottom: 1px solid var(--border, #edece9);
  }
  #todoBody tr:last-child { border-bottom: none; }
  #todoBody td { display: block; padding: 0 !important; border: none !important; }
  #todoBody tr:hover td { background: transparent; }
  #todoBody td:nth-child(1) { order: 1; width: 26px; flex: 0 0 26px; }
  #todoBody td:nth-child(1) .cb { width: 22px; height: 22px; margin: 0; }
  #todoBody td:nth-child(3) { order: 2; flex: 1 1 0; min-width: 0; }
  #todoBody td:nth-child(7) { order: 3; flex: 0 0 34px; text-align: right; }
  /* 첫 줄과 둘째 줄을 강제로 나눈다 */
  #todoBody tr::after { content: ""; order: 4; flex-basis: 100%; height: 0; margin: -4px 0 0; }
  #todoBody td:nth-child(2) { order: 5; margin-left: 34px; }
  #todoBody td:nth-child(4) { order: 6; }
  #todoBody td:nth-child(5) { order: 7; }
  #todoBody td:nth-child(6) { order: 8; }
  #todoBody .todo { gap: 6px; }
  #todoBody .todo-text { font-size: 15px; line-height: 1.35; white-space: normal; }
  #todoBody .subject { font-size: 13px !important; padding: 6px 22px 6px 8px !important; min-height: 32px; max-width: 92px; }
  #todoBody .status { font-size: 12px; padding: 5px 10px; }
  #todoBody .progress { font-size: 13px; }
  #todoBody .arrow { padding: 6px; font-size: 14px; }

  /* ── 해빗 트래커: 이름 한 줄, 요일 7칸 + 삭제 한 줄 ── */
  .habit-card { padding: 12px !important; }
  .habit-head { flex-wrap: wrap; }
  .habit-title { font-size: 17px; }
  .habit-head .btn { font-size: 13px; padding: 9px 12px; }
  .habit-table thead { display: none; }
  .habit-table, .habit-table tbody { display: block; }
  .habit-table tbody tr {
    display: grid;
    grid-template-columns: repeat(7, 1fr) 40px;
    gap: 6px 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #edece9);
  }
  .habit-table tbody tr:last-child { border-bottom: none; }
  .habit-table td { padding: 0 !important; border: none !important; }
  .habit-table .habit-name { grid-column: 1 / -1; font-size: 15px; padding: 4px 6px !important; text-align: left !important; }
  .habit-cell {
    width: auto !important; height: 46px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 2px; background: #faf9f7; border: 1px solid #e6e2dc; border-radius: 10px; font-size: 16px; padding-bottom: 5px !important;
  }
  .habit-cell:not(.disabled) { background: #fff; border-color: #ffb8c8; }
  .habit-cell::before { font-size: 11px; color: #999; font-weight: 800; }
  .habit-cell:nth-child(2)::before { content: "월"; }
  .habit-cell:nth-child(3)::before { content: "화"; }
  .habit-cell:nth-child(4)::before { content: "수"; }
  .habit-cell:nth-child(5)::before { content: "목"; }
  .habit-cell:nth-child(6)::before { content: "금"; }
  .habit-cell:nth-child(7)::before { content: "토"; }
  .habit-cell:nth-child(8)::before { content: "일"; }
  .habit-cell.checked { border-color: #ffd0da; }
  .habit-cell.checked::after { font-size: 18px; }
  .habit-cell.disabled { opacity: .55; }
  .habit-table td:last-child { display: flex; align-items: center; justify-content: center; }
  .habit-del { padding: 0 !important; width: 36px; height: 46px; font-size: 14px; }
  .habit-hint { font-size: 12px; line-height: 1.5; }
}