/* mobile-essay.css — essay.html(논술 DB) 모바일(≤640px) 전용 화면.
   이 페이지는 Tailwind 유틸리티를 쓰므로 !important 로 덮어쓴다. */
@media (max-width: 640px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .system-card { border-radius: 20px !important; }

  /* 머리: 뒤로가기 / 제목 / 백업 버튼 / 에세이 봇 띠 — 전부 한 줄씩 */
  header { flex-wrap: wrap !important; padding: 14px 12px 0 !important; gap: 10px !important; }
  header .back-button { flex: 1 1 100%; font-size: 14px; margin-bottom: 0 !important; text-align: left; padding: 6px 0; }
  header > .flex.items-center.gap-5 { flex-wrap: wrap !important; gap: 10px !important; flex: 1 1 100%; }
  header > .flex.items-center.gap-5 > .w-12 { width: 40px !important; height: 40px !important; }
  header h1 { font-size: 22px !important; }
  header > .flex.items-center.gap-5 > .flex.items-center.gap-3 { flex: 1 1 100%; flex-wrap: wrap !important; gap: 8px !important; }
  /* 「ACADEMIC ARCHIVE」 한 줄, 그 아래 EXPORT·RECOVER 두 버튼이 반반 한 줄 */
  header > .flex.items-center.gap-5 > .flex.items-center.gap-3 > h2 { font-size: 15px !important; flex: 1 1 70%; }
  header > .flex.items-center.gap-5 > .flex.items-center.gap-3 > button { flex: 1 1 calc(50% - 4px); font-size: 11px !important; padding: 9px 8px !important; text-align: center; }
  header > .flex.items-center.gap-4 { flex: 1 1 100%; padding: 10px 14px !important; justify-content: space-between; }
  header > .flex.items-center.gap-4 .text-right { text-align: left !important; }
  header > .flex.items-center.gap-4 .text-right p:first-child { font-size: 11px !important; }
  header > .flex.items-center.gap-4 .text-right p:last-child { font-size: 13px !important; }
  #routeBotBtn { width: 44px !important; height: 44px !important; }

  main { padding: 0 12px !important; margin-top: 12px !important; }

  /* 맨 위 입력 카드: 과목 토글 한 줄, 텍스트/파일 한 줄, 학교·주제 한 줄, 저장 한 줄 */
  #essayForm > .system-card { padding: 14px !important; gap: 10px !important; }
  #essayForm > .system-card > .flex.p-1 { flex: 1 1 100%; min-width: 0 !important; }
  #essayForm > .system-card > .flex.p-1 > button { font-size: 13px !important; padding: 10px 6px !important; }
  #essayForm > .system-card > .flex-1.flex { flex: 1 1 100%; gap: 8px !important; }
  #essayForm > .system-card > button[type="submit"] { flex: 1 1 100%; padding: 13px 0 !important; font-size: 14px !important; }
  .premium-input { font-size: 16px !important; padding: 10px 12px !important; min-height: 44px; }

  /* 원문 / 첨삭: 위아래로 */
  #essayForm > .grid.grid-cols-2 { grid-template-columns: 1fr !important; gap: 12px !important; }
  /* 쓰는 상자는 크게(460px), 첨삭 상자는 내용만큼 */
  .comparison-box { height: 460px !important; padding: 16px !important; }
  #essayForm > .grid > .comparison-box:last-child { height: auto !important; min-height: 220px; }
  #botFeedback { max-height: 420px; }
  #essayContent { font-size: 16px !important; line-height: 1.6 !important; min-height: 0; }
  .comparison-box h2 { font-size: 12px !important; }
  #botFeedback { font-size: 14px !important; }

  /* 대학별 기준 첨삭 */
  #engineStudio { padding: 16px !important; }
  #engineStudio h2 { font-size: 17px !important; }
  #engineStudio > .flex > .flex.gap-2 { flex: 1 1 100%; }
  #engineStudio > .flex > .flex.gap-2 > button { flex: 1; font-size: 12px !important; padding: 10px 6px !important; }
  #engineStudio .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #engMathBar button { font-size: 12px !important; padding: 9px 10px !important; }
  #engMathMsg { flex: 1 1 100%; font-size: 12px !important; }
  #engResult { font-size: 14px !important; }

  /* Rubric Studio */
  #rubricStudio { padding: 16px !important; }
  #rubricStudio h2 { font-size: 18px !important; }
  #rubricStudio > .flex > .flex.items-center.gap-3 { flex-wrap: wrap !important; }
  #rbPurposeBar { flex: 1 1 100%; }
  #rbPurposeBar > button { font-size: 13px !important; padding: 10px 6px !important; }
  #rbAchievement { font-size: 13px !important; }
  /* 채점 카드 8장: 한 줄에 이름 + 5·4·3·2·1, 점수를 고르기 전에는 안내문·통계를 접는다 */
  #rubricGrid { gap: 8px !important; }
  #rubricGrid > div { display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "name chips" "eval eval" "stat stat"; align-items: center; gap: 4px 8px; padding: 10px 12px !important; }
  #rubricGrid > div > .flex.items-baseline { grid-area: name; margin: 0 !important; }
  #rubricGrid > div > .flex.items-baseline > div:first-child { font-size: 14px !important; }
  #rubricGrid > div > .flex.items-baseline > div:last-child { display: none; }
  #rubricGrid > div > .flex.items-center { grid-area: chips; margin: 0 !important; gap: 4px !important; }
  #rubricGrid .rb-chip { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  #rubricGrid > div > .min-h-\[36px\] { grid-area: eval; min-height: 0 !important; font-size: 13px !important; }
  #rubricGrid > div > .min-h-\[36px\]:has(> .italic) { display: none; }
  #rubricGrid > div > .text-\[10px\] { grid-area: stat; margin: 0 !important; font-size: 11px !important; }
  #rubricSummary { padding: 14px !important; }
  #rbSelfTotal { font-size: 28px !important; }

  /* 공식 모의논술 실전팩 */
  .practice-shell { padding: 16px !important; border-radius: 20px !important; margin-top: 14px !important; }
  .practice-title { font-size: 17px !important; line-height: 1.35; }
  .practice-muted { font-size: 13px !important; }
  .practice-input { font-size: 16px !important; min-height: 44px; }
  #practiceWorkspace > .flex > .practice-card { min-width: 0 !important; width: 100%; }
  #practiceWorkspace .flex.gap-2.mt-3 { flex-wrap: wrap; }
  #practiceWorkspace .flex.gap-2.mt-3 > input { flex: 1 1 100%; }
  #practiceWorkspace .flex.gap-2.mt-3 > button { flex: 1; }
  /* 실전팩 목록(45개)이 5,000px로 늘어지지 않게: 상자 안에서 스크롤 */
  #practicePackList { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; border-bottom: 1px dashed rgba(255,133,162,.35); gap: 6px !important; margin-top: 8px !important; }
  #practicePackList > .practice-card { padding: 10px 12px !important; border-radius: 12px !important; }
  #practicePackList > .practice-card .text-sm { font-size: 13px !important; line-height: 1.3; }
  #practicePackList > .practice-card .practice-muted { font-size: 11px !important; margin-top: 2px !important; }
  #practicePackList > .practice-card > .text-\[11px\] { display: none; }   /* 문제 배점·자료 종류 줄은 열면 보인다 */
  /* 소개 글은 짧게 */
  #practicePackStudio > .flex:first-child { gap: 8px !important; }
  #practicePackStudio > .flex:first-child .practice-title { font-size: 15px !important; }
  #practicePackStudio > .flex:first-child .practice-muted { display: none; }
  #practiceFilterCount { display: none; }
  #practicePackStudio > .grid { gap: 6px !important; margin-top: 8px !important; }
  /* 작업 공간: 자료 카드 2열, 타이머 한 줄 */
  #practiceAssetList { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #practiceAssetList .practice-card { padding: 10px !important; }
  #practiceWorkspace > .flex > .practice-card { padding: 12px !important; }
  .practice-timer { font-size: 28px !important; }
  #practiceQuestionList textarea { min-height: 120px !important; height: 140px !important; }
  #practicePackList .practice-chip, #practicePackList [class*="chip"] { white-space: nowrap; font-size: 10px !important; padding: 4px 8px !important; }
  #practicePackList .practice-card > .flex { gap: 8px; align-items: flex-start; }
  .practice-btn { min-height: 42px; font-size: 13px !important; }
  #practiceSaveBtn, #practiceSubmitBtn { flex: 1 1 100%; }
  #practiceStatus { flex: 1 1 100%; margin-left: 0 !important; font-size: 12px; }
  .practice-timer { font-size: 32px !important; }

  /* 기록(아카이브) */
  main > section.mt-12 { margin-top: 20px !important; }
  main > section.mt-12 > .flex { padding: 0 4px !important; flex-wrap: wrap; gap: 8px; }
  main > section.mt-12 h2 { font-size: 20px !important; }
  #logCounter { font-size: 11px !important; }
  #logicArchive { gap: 12px !important; padding-bottom: 40px !important; }
}