/* 드론에듀 휴대폰 화면 — 화면 너비 640px 이하에서만 씀
   각 화면 머리(<head>) 맨 끝에서 media="(max-width: 640px)" 로 불러오므로 PC·태블릿 화면에는 아무 영향이 없음
   (문제 창 quiz.html·전자책 book.html 은 이 파일을 쓰지 않음 — 휴대폰 문제 창의 위치줄·계산기 단추는 app.css·learn.css 에서) */

/* ── 바탕: 화면 맨 위 빈칸은 줄임 (좌우 여백·머리줄·단추·카드 등 공통 휴대폰 규칙은 app.css 끝으로 옮김) */
main.sec { padding-top: 16px !important; }

/* ── 글자 크기 */
.page-title { font-size: 21px; }
.md { font-size: 16px; line-height: 1.75; }
.md h3 { font-size: 18px; margin: 22px 0 8px; }
.md h4 { font-size: 16px; }
.md pre { font-size: 13.5px; }
.md table { font-size: 14px; }
.md th, .md td { padding: 7px 8px; }
.md blockquote { padding: 10px 14px; }
.cpart .md { font-size: 15.5px; }
.cpart.trap .md, .cpart.law .md { font-size: 15px; }

/* ═══ 로그인·가입 */
.auth { margin-top: 16px; }

/* ═══ 학습장(과목 지도·절 화면): 본문과 카드는 테두리 없는 넓은 면(화면 끝까지), 글줄·단추줄은 좌우 16px */
.lrn-main { padding: 10px 0 128px; }   /* 아래: 둥근 단추 자리 */
.lrn-col { gap: 12px; }
.lrn-col > * { margin-left: 16px; margin-right: 16px; }
.lrn-col > .card, .lrn-col > .goalbox, .lrn-col > .map, .lrn-col > .clist { margin-left: 0; margin-right: 0; }
.lrn-col > .card { border-radius: 0; border-left: 0; border-right: 0; padding: 18px 16px; }
.lrn-col > .goalbox { border-radius: 0; padding: 12px 16px; }
.lrn-col > .fin { border-left: 0; border-right: 0; }
.clist > .ccard, .mch { border-radius: 0; border-left: 0; border-right: 0; }   /* 개념 카드 서랍 안의 카드는 그대로 */

/* 절 화면 */
.cards-hd h2 { font-size: 19px; }
.clist { gap: 8px; }
.ccard > header { padding: 14px 16px; gap: 10px; }
.ccard > header .k { width: 32px; height: 32px; border-radius: 9px; }
.ccard > header h3 { font-size: 17.5px; }
.ccard .cbody { padding: 0 16px 18px; }
.fin h2 { font-size: 19px; }
.fin li { padding: 10px 12px; }
.pager a { padding: 12px 14px; }

/* 과목 지도 */
.map-hd { padding: 0 16px; }
.map-hd h2 { font-size: 19px; }
.mtree { gap: 8px; }
.mch.next { border-color: var(--line); box-shadow: inset 3px 0 0 var(--navy); }
.mch-t b { font-size: 17px; }

/* ═══ 내 학습 */
#wrap { gap: 14px !important; }
#wrap > .page-hd { margin-bottom: 4px; }
.trio { gap: 8px; }
.trio div { padding: 10px 14px; }
.trio b { font-size: 16.5px; }
.col, .col > .main, .col > .side { gap: 14px; }
.ps-bd { padding-left: 16px; }
/* 실전모의고사 응시 기록: 한 줄(이름 · 점수 · 판정 · 결과) */
.res li { flex-wrap: nowrap; gap: 8px; }
.res li > span:first-child { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.res li > span:first-child small { display: none; }
.res li b { white-space: nowrap; }
.res li .badge { flex: 0 0 auto; }
/* 홈 화면에 추가 안내 */
.install-tip { display: flex; flex-direction: column; gap: 10px; border-color: #c9d6ec; background: #f6f9ff; }
.it-hd { display: flex; gap: 12px; align-items: center; }
.it-hd img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.it-hd b { display: block; color: var(--navy-d); font-size: 15.5px; }
.it-hd small { display: block; color: var(--sub); font-size: 13.5px; line-height: 1.5; }
.it-how { margin: 0; font-size: 14px; color: var(--sub); background: #fff; border-radius: 10px; padding: 8px 12px; line-height: 1.6; }
.it-acts { display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ 실전모의고사 */
.mk { gap: 20px; }
.mk > .page-hd { margin-bottom: 0; }
.mk h2.sh { font-size: 20px; }
.mk .sub { font-size: 14px; margin-bottom: 10px; }
.mrow { padding: 12px; gap: 8px 10px; }
.mr-t b { font-size: 17px; }
/* 시험 화면: 위 띠를 낮게(제목·남은 시간 / 문항 번호판·글꼴·제출), 문항 번호판은 눌러서 펼침 */
.exam-main { padding: 10px 12px 96px; }
.exam-col { gap: 10px; }
.xbar { top: var(--hd-vis, 0px); padding: 10px 12px; gap: 8px; border-radius: 14px; transition: top .22s ease; }
.xbar .area { display: none; }
.xbar .r1 { gap: 8px; }
.xbar .ttl { order: 1; flex: 1 1 calc(100% - 110px); min-width: 0; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xbar .xtime { order: 2; font-size: 18px; padding: 2px 10px; }
.xbar .xnav-tg { order: 3; display: inline-flex; }
.xbar .seg { order: 4; margin-left: auto; }
.xbar #submitBtn { order: 5; }
.xbar .seg button { padding: 6px 10px; font-size: 13.5px; }
.xtabs button { padding: 6px 12px; font-size: 13.5px; }
.xnav:not(.open) { display: none; }
.xnav { gap: 5px; }
.xnav button { width: 38px; height: 34px; }
@media (max-width: 350px) {   /* 아주 좁은 화면(320px 등): 시험 위 띠가 두 줄에 들어가게 */
  .xnav-tg { padding: 0 8px; }
  .xnav-tg small { display: none; }
  .xbar .seg button { padding: 6px 8px; }
}

/* ═══ 약관·개인정보·환불 문서: 휴대폰 본문 16px */
.doc p, .doc li { font-size: 16px; line-height: 1.75; }