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

/* ── 바탕: 좌우 여백 16px, 화면 맨 위 빈칸은 줄임 */
.wrap { padding-left: 16px; padding-right: 16px; }
main.sec { padding-top: 16px !important; }

/* ── 머리줄: 낮게(65 → 53px) · 작은 로고 + 가는 칸막이 + '부동산공인중개사' · ☰ 는 테두리 없이 */
.hd { transition: transform .22s ease; }
.hd .wrap { padding-top: 7px; padding-bottom: 7px; gap: 8px; }
.logo { gap: 8px; min-width: 0; }
.logo img { height: 20px; }
.logo-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--navy-d); letter-spacing: -.01em; white-space: nowrap; }
.logo-tag::before { content: ''; width: 1px; height: 14px; background: var(--line2); }
.hd-menu { width: 38px; height: 38px; border-color: transparent; border-radius: 10px; }
.hd-panel { padding: 0 16px 16px; }
.hd-panel nav a { padding: 14px 2px; font-size: 16px; }
.hp-user .btn { min-height: 44px; }
/* 읽어 내려가면 머리줄을 숨기고, 조금이라도 올리면 다시 보임(app.js 가 html 에 hd-hidden 을 붙임) */
html.hd-hidden .hd { transform: translateY(-100%); }

/* ── 카카오톡 등 앱 안의 브라우저: 맨 위 안내 띠 */
.inapp { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; background: var(--navy-d); color: #fff; font-size: 13.5px; line-height: 1.45; }
.inapp .tx { flex: 1 1 auto; min-width: 0; }
.inapp .tx b { color: var(--gold); font-weight: 700; }
.inapp .go { flex: 0 0 auto; border: 0; border-radius: 999px; background: var(--gold); color: var(--navy-d); font: inherit; font-size: 13px; font-weight: 800; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.inapp .x { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.8); font: inherit; font-size: 15px; cursor: pointer; }

/* ── 글자 크기 */
.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; }
.sec h2 { font-size: 22px; }
.sec .lead { font-size: 15.5px; margin-bottom: 22px; }

/* ── 단추: 기본 42px · 작은 단추 34px · 큰 단추(첫 화면 시작·로그인 등) 46px */
.btn { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn-s { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn.btn-study.btn-s { padding: 0 12px; }
form .btn-p, .hero-cta .btn { min-height: 46px; }
.field input, .field select { min-height: 46px; }
.chip { font-size: 12.5px; padding: 4px 10px; }

/* ── 카드(학습장 밖): 여백만 조금 줄임 */
.card { padding: 18px 16px; border-radius: 16px; }
.grid { gap: 12px; }

/* ── 똑순쌤: 작고 동그랗게 */
.teach > .face { width: 32px; height: 32px; border-width: 1.5px; }
.ask .teach > .face { width: 44px; height: 44px; }
.m-face { display: block; flex: 0 0 auto; width: 44px; height: 44px; }
.dlg { padding: 20px 18px; }
/* 화면 머리(내 학습·실전모의고사·합격수기·이용권·관리자·내 계정·문의): 똑순쌤 48px · 제목 22px */
.page-hd { gap: 12px; margin-bottom: 18px; }
.page-hd > .face { width: 48px; height: 48px; border-width: 2px; }
.page-hd-tx { gap: 4px; }
.page-hd h1 { font-size: 22px; }
.page-hd p { font-size: 14.5px; line-height: 1.55; }
.page-hd p.sub { font-size: 12.5px; }
.ask .dlg { gap: 14px; }
.ask .asktxt { font-size: 15px; }

/* ═══ 첫 화면 */
.sec { padding: 36px 0; }
.hero .wrap { padding-top: 30px; gap: 22px; }
.hero h1 { font-size: 26px; }
.hero-sub { margin-top: 16px; font-size: 15.5px; }
.hero-tags { gap: 8px; }
.hero-tag { font-size: 13.5px; }
.hero-tag i { width: 26px; height: 26px; }
.hero-cta { margin-top: 24px; gap: 10px; }
.hero-cta .btn { padding: 0 20px; font-size: 16px; border-radius: 12px; }
.hero-meta { margin-top: 20px; gap: 8px 18px; font-size: 13.5px; }
.hero-face { width: 56px; height: 56px; }
.hero-bubble { padding: 10px 14px; font-size: 14px; }
.steps { gap: 12px; }
.steps li { padding: 18px 16px; }
.steps h3 { font-size: 17px; }
.feat h3 { font-size: 18px; }
.price .amt { font-size: 28px; }

/* ═══ 로그인·가입 */
.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, .lrn-col > .subj-tabs { 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; }   /* 개념 카드 서랍 안의 카드는 그대로 */

/* 절 화면 */
.ttl-row { gap: 10px; }
.ttl-row h1 small { font-size: 14px; }
.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; }

/* 과목 지도 */
.subj-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subj-tabs::-webkit-scrollbar { display: none; }
.subj-tabs::after { content: ''; flex: 0 0 10px; }
.subj-tabs a { flex: 0 0 auto; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; }
.hero2 { gap: 0; }
.hero2 > img { display: none; }   /* 큰 똑순쌤 대신 인사말 옆 동그란 얼굴 */
.hero2 .txt { flex-basis: 100%; gap: 10px; }
.hero-top { gap: 6px; }
.say-row { display: flex; gap: 10px; align-items: center; }
.hero2 .say { font-size: 15px; line-height: 1.6; }
.hero2 .go { flex-direction: column; }
.gonext { width: 100%; min-height: 52px; padding: 8px 16px; }
.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; }
}