/* mobile-official-exam.css — official-exam.html(공식 모의) 모바일(≤640px) 전용 화면. */
@media (max-width: 640px) {
body { padding: 14px 12px !important; }
.container { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.nav-back { font-size: 14px; padding: 6px 0; margin-bottom: 8px; }
/* 제목 줄: 제목 한 줄, 연도 선택 + 자물쇠는 그 아래 한 줄 */
.header-top { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.title-area { flex: 1 1 100%; }
.title-area h1 { font-size: 21px !important; line-height: 1.3; }
.title-area p { font-size: 12px !important; line-height: 1.5; }
.right-controls { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
.main-year-select { flex: 1; font-size: 16px !important; padding: 10px 12px !important; min-height: 44px; }
.lock-icon { font-size: 26px; margin-left: 0; padding: 6px; }
/* 교육청 포함 / 평가원만 */
.toggle-wrapper { margin-bottom: 14px; }
.toggle-box { display: flex; width: 100%; padding: 4px; }
.t-btn { flex: 1; font-size: 14px; padding: 11px 8px; }
/* 시험 카드 */
.memo-grid { gap: 12px; }
.card { padding: 16px 14px 14px; min-height: 0; border-radius: 16px; background-image: none; }
.card > span { font-size: 20px !important; }
.edit-label { top: 12px; right: 14px; font-size: 13px; color: var(--main); padding: 6px; }
.subject-container { gap: 6px; margin-top: 14px; }
.subj-tag { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; }
.subj-tag > span { font-size: 11px !important; opacity: 0.7 !important; }
.grade-num { font-size: 24px; }
.hashtag-area { font-size: 13px; margin-top: 14px; padding-top: 10px; min-height: 22px; }
/* 아래 고정 메뉴 */
.floating-footer { height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.nav-btn { font-size: 12px; line-height: 1.2; }
.nav-btn span { font-size: 20px; }
/* ── 팝업(React): 화면보다 긴 창은 위에서부터 스크롤 ── */
/* 가운데 띄우는 팝업만(별자리 결과처럼 화면을 다 쓰는 세로 배치 창은 제외) */
#react-popup-root > div.fixed:not(.flex-col) { align-items: flex-start !important; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px !important; }
#react-popup-root > div.fixed:not(.flex-col) > div { max-height: calc(100vh - 24px) !important; }
/* 별자리 결과 화면: 위 줄은 양끝 정렬, 아래 통계·버튼은 가운데 */
/* 위 줄: 왼쪽 버튼·가운데 제목·오른쪽 닫기를 3칸 격자로 — 제목이 정확히 가운데 */
#react-popup-root > div.fixed.flex-col > div:first-child { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 16px 6px !important; }
#react-popup-root > div.fixed.flex-col > div:first-child > :first-child { justify-self: start; }
#react-popup-root > div.fixed.flex-col > div:first-child > :last-child { justify-self: end; }
#react-popup-root > div.fixed.flex-col > div:first-child > div.text-center > * { line-height: 1.15; }
/* 별자리 그림(가로 800×560 viewBox)이 세로 폰에서는 작게 그려지므로 1.6배 키운다 */
#react-popup-root > div.fixed.flex-col > div:nth-child(2) > svg { transform: translateY(40px) scale(1.6); transform-origin: 50% 50%; }
#react-popup-root > div.fixed.flex-col > div:last-child { padding: 10px 16px calc(16px + env(safe-area-inset-bottom)) !important; }
#react-popup-root > div.fixed.flex-col > div:last-child > .flex.gap-3 > div { min-width: 92px; }
#react-popup-root > div.fixed.flex-col > div:last-child > button { font-size: 15px !important; padding: 14px 0 !important; }
/* 예측 점수(과녁) 창: 큰 여백 줄이고, 과목 목록은 세로 줄 대신 칩으로 */
#react-popup-root .min-h-\[600px\] { min-height: 0 !important; padding: 60px 16px 20px !important; border-radius: 28px !important; }
#react-popup-root .min-h-\[600px\] > .absolute.top-10 { top: 18px !important; left: 18px !important; }
#react-popup-root .min-h-\[600px\] > .absolute.top-8 { top: 16px !important; right: 16px !important; }
#react-popup-root .min-h-\[600px\] > .flex.justify-end { justify-content: center !important; margin-bottom: 14px !important; }
#react-popup-root .max-h-\[350px\] { flex-direction: row !important; flex-wrap: wrap; max-height: none !important; overflow: visible !important; padding-right: 0 !important; gap: 6px !important; justify-content: center; }
#react-popup-root .max-h-\[350px\] > div { width: auto !important; }
#react-popup-root .gap-8.mb-10 { gap: 14px !important; margin-bottom: 14px !important; }
/* 문항 분석 창: 45문항을 2열로, 창 안에서 스크롤 */
#react-popup-root .max-h-\[85vh\] { padding: 52px 14px 14px !important; border-radius: 24px !important; }
/* 문항마다 한 칸: 위에 번호, 아래 O·X. 3열 */
#react-popup-root .max-h-\[85vh\] > .overflow-y-auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; padding: 2px 2px 8px !important; }
#react-popup-root .max-h-\[85vh\] > .overflow-y-auto > div {
flex-direction: column !important; justify-content: center !important; gap: 6px;
padding: 8px 4px 7px !important; border: 1.5px solid #f3d6dd !important; border-radius: 12px; background: #fff;
}
#react-popup-root .max-h-\[85vh\] > .overflow-y-auto > div > span { font-size: 15px !important; line-height: 1; }
#react-popup-root .max-h-\[85vh\] > .overflow-y-auto > div > div { gap: 6px !important; }
#react-popup-root .max-h-\[85vh\] > .overflow-y-auto > div > div > button { width: 40px !important; height: 38px !important; }
#react-popup-root .max-h-\[85vh\] > .absolute.top-6 { top: 16px !important; left: 14px !important; }
#react-popup-root .max-h-\[85vh\] > h2 { font-size: 17px !important; }
#react-popup-root .max-h-\[85vh\] > button.mt-4 { padding: 13px 0 !important; font-size: 15px !important; }
/* 기록 남기기 창: 모서리·여백 */
#react-popup-root .rounded-\[40px\] { border-radius: 24px !important; padding: 18px 14px !important; }
/* 떠 있는 버튼은 아래 메뉴 위로 */
html body #userFab { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
html body #magFab { bottom: calc(128px + env(safe-area-inset-bottom)) !important; }
html body #helpFab { bottom: calc(176px + env(safe-area-inset-bottom)) !important; }
html body #scrapFab { bottom: calc(224px + env(safe-area-inset-bottom)) !important; }
}