/* ============================================================
멘사 온라인테스트 — 모바일 최적화 패치 (2026-09-18, 두뇌훈련센터 제안)
------------------------------------------------------------
· 대부분 폭 기준 미디어쿼리(768 / 600 / 480 / 359px 이하) 안에 있습니다.
· 예외 두 가지:
- @media (hover: none): 폭이 아니라 "마우스 없는 기기" 기준입니다. PC 는 바뀌지 않습니다.
- 맨 아래 "전 화면 공통": PC 에서도 바뀌는 규칙입니다. 항목마다 이유를 적었습니다.
· 적용 방법: 각 화면의 에서 기존 CSS 뒤에 이 파일 하나를 추가하면 됩니다.
(css/_v2-*.css 보다 뒤에 와야 합니다 — 그 파일들이 미디어쿼리 밖에서
같은 선택자를 다시 선언하고 있어 순서가 앞서면 덮입니다.)
· 화면 확대 허용은 CSS로 못 합니다. includes/head.php:6 의
viewport 값에서 user-scalable=no 만 빼주세요.
============================================================ */
@media (max-width: 768px) {
/* ---------- 1. 문항 화면 : 문제와 보기를 한 화면에 ---------- */
/* 실제 구조 기준: .question-image img / .choices-grid > .choice-item > img / .navigation-buttons > .nav-btn */
/* 문제 칸과 보기 칸을 문항 내용과 상관없이 고정 크기로 둔다(2026-09-18 PM 요청). 문항이 바뀔 때 화면이
들썩이지 않고, 보기 둘째 줄이 하단 버튼에 가려 "보기가 4개뿐"으로 보이는 일도 없다.
- 보기 한 칸 = 높이 var(--q-row)(아래 "같은 배율" 계산값), 폭은 문제 칸 폭 4등분.
보기 수와 상관없이 항상 두 줄 높이를 차지한다.
- 문제 칸 = 화면 높이에서 헤더·진행바·시간줄(위 99px) + 문제·보기 사이 6 + 보기 두 줄(+6)
+ 버튼 위 간격 8 + 버튼 64 를 뺀 나머지 전부(= 183px + 보기 두 줄). 그림은 그 안에서 비율을 지키며 최대한 크게.
- 모든 문항에 안내 문장("물음표(?)로 표시된 곳에 ...", 14px 두 줄)과 그림이 함께 나온다는 전제.
- 문제 칸이 너무 낮아지지 않게 240px 는 보장한다(그보다 작은 화면은 조금 스크롤). */
/* 문제 그림과 보기 그림을 같은 배율로 보여 준다(2026-09-18 PM 지적: 문제 속 큰 동그라미와 보기의 큰
동그라미 크기가 달랐다). PC 는 둘 다 원본 크기(배율 1)라 맞는데, 모바일은 문제 그림은 문제 칸에,
보기 그림은 보기 칸에 각자 맞춰 줄어 배율이 달랐다(375x667 에서 문제 0.73 / 보기 0.62).
업로드 썸네일은 문제 353x348, 보기 102x97 상자 안에 만들어진다(관리자 업로드 코드, 실제 파일 578개 확인).
--q-opt = 보기 그림 높이(원본 97px 기준), 배율 = --q-opt / 97. 문제 그림도 같은 배율로 최대 348px 높이.
--q-row = 보기 한 칸 높이(= 그림 + 여백 16). 문제 칸(그림 높이 = 배율 x 348)과 보기 두 줄이 화면 높이에
함께 들어가도록 푼 값: (화면높이 - 205) / 5.59, 최소 64px, 칸 폭(4등분)을 넘지 않음. */
:root {
--q-row: min(max(64px, calc((100vh - 205px) / 5.59)), calc((min(100vw, 616px) - 34px) / 4));
--q-row: min(max(64px, calc((100dvh - 205px) / 5.59)), calc((min(100vw, 616px) - 34px) / 4));
--q-opt: min(97px, calc(var(--q-row) - 16px));
}
.question-section {
height: max(240px, calc(100vh - 183px - 2 * var(--q-row))) !important;
height: max(240px, calc(100dvh - 183px - 2 * var(--q-row))) !important;
min-height: 0 !important; max-height: none !important;
padding: 10px 10px 18px !important; margin-bottom: 6px !important;
position: relative;
/* 칸 높이를 고정했으니, 지문이 아주 긴 문항이 칸을 넘치면 원본(overflow:hidden)대로는 잘려 안 보인다
(실측 320x568 에서 약 12줄 분량부터). 넘칠 때만 칸 안에서 스크롤되게 한다. */
overflow-y: auto !important;
}
.question-text {
font-size: 14px !important; line-height: 1.45 !important;
padding: 2px 4px 2px 24px !important; margin-bottom: 6px !important;
}
.question-text::before { font-size: 14px !important; left: 4px !important; top: 2px !important; }
/* 문장만 있는 문항(.text-only-centered)은 원본이 문장을 칸 전체로 늘리고(flex:1) 세로 가운데 정렬했다.
칸 높이를 고정하니 문장이 칸 가운데로 내려가 그림이 있는 문항과 위치가 달랐다(PM 지적). 맨 위 Q 옆으로. */
.question-text.text-only-centered { flex: none !important; align-items: flex-start !important; }
.question-image {
flex: 1 1 auto; min-height: 0; margin-bottom: 0 !important;
display: flex; align-items: center; justify-content: center;
}
.question-image img {
width: auto !important; height: auto !important;
max-width: min(100%, calc(var(--q-opt) * 353 / 97)) !important;
max-height: min(100%, calc(var(--q-opt) * 348 / 97)) !important;
object-fit: contain;
}
/* 워터마크(응시번호·사이트 주소) 줄이 그림 아래 28px 를 따로 먹었다. 칸 아래 모서리에 겹쳐 표시한다
- 화면에는 그대로 보이고, 캡처하면 그림과 함께 찍힌다. */
.question-watermark {
position: absolute; left: 0; right: 0; bottom: 2px;
height: auto !important; padding: 0 10px !important; pointer-events: none;
}
/* 보기 그림이 칸 폭(약 168px)의 54%인 90px만 썼다. 칸을 채우되 타일이 길어지지 않게 높이도 함께 제한. */
/* 원본 CSS 가 보기 이미지에 width 를 지정하고 있어, max-height 만 걸면 폭은 칸에 맞춰 늘고
높이만 잘려 그림이 찌그러진다(실측: 원본 비율 1.06 → 화면 1.76). width·height 를 auto 로
돌리고 최대치로만 제한해야 비율이 유지된다. */
.choice-item img {
width: auto !important; height: auto !important; object-fit: contain;
max-width: min(100%, calc(var(--q-opt) * 102 / 97)) !important;
max-height: min(100%, var(--q-opt)) !important;
}
.choice-item { padding: 6px !important; }
.choices-grid { gap: 6px !important; }
/* 이전/다음 버튼이 34px이라 누르기 어렵다. 44px 확보 + 스크롤 중에는 화면 하단에 띄운다.
fixed 가 아니라 sticky 다 - fixed 면 페이지 끝까지 내려가도 계속 떠 있어 푸터를 덮는다.
sticky 는 제 자리(문항 영역 끝)에 닿으면 그 자리에 놓이고, 그 아래 푸터는 그대로 보인다. */
.navigation-buttons {
position: sticky; bottom: 0; z-index: 50;
display: flex; gap: 8px; margin: 0 !important;
padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.navigation-buttons .nav-btn {
flex: 1; min-height: 44px; font-size: 0.95rem !important; padding: 10px 12px !important;
}
/* 버튼 아래가 30px 비어 있었다(버튼 묶음 아래 여백 8 + 문항 영역 아래 여백 12 + 바깥 여백 10, 375px 실측).
여백은 버튼 묶음 안(아래 12px)에만 둔다. 4px 로 줄였더니 답답하다는 PM 의견으로 12px(2026-09-18). */
.test-container { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* 문제가 화면 223px 지점에서야 시작했다(헤더 52 + 단계표시 76 + 진행바 위 여백 24 + 문항정보 26 + 여백).
단계 표시를 헤더 안(로고와 메뉴 버튼 사이)으로 올려 흐름에서 빼고, 남은 여백을 줄인다.
HTML·JS 변경 없이 CSS 만으로 된다. 헤더(z-index 101) 위, 사이드 메뉴(1000) 아래에 놓인다.
right: 56px = 헤더 좌우 여백 16 + 메뉴 버튼 24 + 간격 16. 로고는 왼쪽 16~106px 이라 겹치지 않는다. */
.stage-indicator {
position: fixed; top: 0; right: 56px; z-index: 102;
height: 52px; display: flex; align-items: center;
margin: 0 !important; padding: 0 !important;
background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
.stage-steps { flex-wrap: nowrap !important; gap: 0 !important; margin: 0 !important; }
.stage-step { flex-direction: row !important; gap: 4px !important; }
.stage-number { width: 22px !important; height: 22px !important; font-size: 0.7rem !important; border-width: 1px !important; }
/* 완료 단계는 "✓ 1" 이 22px 원에 안 들어가므로 체크만 보인다. */
.stage-step.completed .stage-number { font-size: 0 !important; }
.stage-step.completed .stage-number::before { content: '✓'; font-size: 0.7rem; margin: 0; }
/* 단계 이름은 지금 단계만 보인다. 이름이 길면 말줄임(단계 이름은 DB 값이라 길이 미확정). */
.stage-label { display: none; }
.stage-step.active .stage-label {
display: block; font-size: 0.75rem !important;
max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important;
}
.stage-connector { width: 10px !important; margin: 0 4px !important; }
.test-container { margin-top: 0 !important; padding-top: 6px !important; }
/* 진행바와 시간·문항수 줄을 헤더 바로 아래에 함께 고정한다(2026-09-18 PM 요청). 문제가 길어 스크롤해도
남은 시간과 몇 번째 문항인지 보인다. 진행바(5px)가 52~57px, 시간·문항수 줄이 57px 부터 붙는다.
배경이 투명하면 아래로 지나가는 문제가 비쳐 보여 흰 배경을 깐다. 진행바는 문항 영역 좌우 여백(8px)
안쪽이라 흰 outline 8px 로 양옆을 덮는다(위쪽으로 나간 outline 은 헤더(z-index 101)가 가린다). */
.progress-bar {
position: sticky; top: 52px; z-index: 41;
margin-top: 0 !important; margin-bottom: 0 !important;
outline: 8px solid #fff;
}
/* 시간줄의 사이트 주소가 화면 가운데보다 왼쪽에 있었다. 양 끝 정렬이라 "1/15"(좁음)와 "⏱ 29:59"(넓음)
사이의 가운데에 놓였기 때문이다(PM 지적). 좌우 칸 폭을 같게 나눈 3칸 격자로 바꿔 화면 정중앙에 둔다. */
.test-header { display: grid !important; grid-template-columns: 1fr auto 1fr; }
.test-header .question-number { justify-self: start; }
.test-header .site-url { flex: none !important; text-align: center; }
.test-header .timer { justify-self: end; }
.test-header {
position: sticky; top: 57px; z-index: 40; background: #fff;
margin: 0 -8px 6px !important; padding: 2px 8px !important;
}
/* 보기가 한 줄에 2개라 보기 8개가 4줄이었다. PC 와 같은 4개씩 2줄로 둔다.
(업로드 기록상 보기 8개 문항이 가장 많다. 4개씩이면 8개가 빈칸 없이 2줄로 떨어진다.) */
.choices-grid {
/* 보기 묶음 폭 = 문제 칸 폭(최대 600px)을 4등분. 처음에는 칸 폭을 화면 폭(vw)으로 계산했는데,
PC 브라우저를 좁혀 볼 때 vw 에 스크롤바(약 15px)가 포함돼 보기가 문제 칸 밖으로 나갔다(PM 지적).
칸이 납작해지지 않게(태블릿에서 184x76 이던 것) 묶음 폭은 칸 높이의 약 1.35배 x 4 를 넘지 않는다. */
grid-template-columns: repeat(4, 1fr) !important;
max-width: min(600px, calc(var(--q-row) * 5.4 + 18px)) !important;
margin-left: auto !important; margin-right: auto !important;
grid-auto-rows: var(--q-row);
min-height: calc(2 * var(--q-row) + 6px);
align-content: start; margin-bottom: 0 !important;
}
.choice-item { height: 100%; min-height: 0; overflow: hidden; }
/* 문항 화면에서는 푸터(사업자정보 8줄, 384px)를 숨긴다(2026-09-18 PM 결정). 타이머가 도는 중에
푸터 링크(SNS·Family Site)를 잘못 눌러 테스트를 벗어나는 경로도 함께 없어진다.
문항 화면에만 붙는 클래스가 없어, 문항 영역(.test-container)을 가진 페이지만 :has 로 고른다
(.test-container 는 test-stage1~3 에서만 생성됨, 소스 전수 확인). #wrap 의 아래 여백 384px 은
푸터 자리라 함께 없앤다(_css/common.css:823·851 의 짝). :has 를 모르는 옛 브라우저는 지금처럼 보인다. */
#wrap:has(.test-container) { padding-bottom: 0 !important; }
#wrap:has(.test-container) .footer { display: none !important; }
/* 푸터가 없어졌으니 이전·다음 버튼을 화면 하단에 항상 고정한다(2026-09-18 PM 요청). sticky 는 문항이 짧으면
버튼이 문항 바로 아래(화면 중간)에 놓였다. fixed 를 처음에 안 쓴 이유는 푸터를 덮어서였다 - 같은 :has 로
묶어, 푸터가 보이는 옛 브라우저에서는 지금처럼 sticky 로 남는다.
버튼 묶음 높이 64px(위 8 + 버튼 44 + 아래 12) 만큼 문항 영역 아래를 비워 마지막 보기가 가려지지 않게 한다(+8 간격). */
#wrap:has(.test-container) .navigation-buttons { position: fixed; left: 0; right: 0; bottom: 0; }
#wrap:has(.test-container) .test-container { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
/* ---------- 2. 결제 화면 : 카드 한 장을 한 화면에 ---------- */
/* 실제 클래스 구조 기준(.payment-card > .card-tag / h3 / .price-wrapper / .benefits-list / .payment-btn) */
.payment-container { padding: 14px 12px !important; margin: 8px auto !important; }
.payment-card { padding: 16px 14px !important; }
.payment-card h3 { font-size: 1.35rem !important; line-height: 1.3 !important; margin: 6px 0 10px !important; }
/* 가격 줄 가로 배치(2026-09-25): base 는 flex-direction:column 이라 할인배지/원가/최종가가
세로 3줄로 쌓였다. 모바일에서만 한 줄로 바꿨 카드 높이·스크롤을 줄인다. PC 무영향. */
.price-wrapper {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: center !important;
column-gap: 8px !important;
row-gap: 4px !important;
margin-bottom: 8px !important;
padding-bottom: 12px !important;
}
.price-wrapper .discount-badge { margin-bottom: 0 !important; }
.price-wrapper .original-price { margin-bottom: 0 !important; font-size: 0.95rem !important; }
.price-wrapper .price { margin: 0 !important; font-size: 1.35rem !important; line-height: 1 !important; }
.benefits-list { margin: 8px 0 !important; }
.benefits-list li { padding: 5px 0 5px 26px !important; font-size: 0.95rem !important; line-height: 1.45 !important; }
.payment-btn { padding: 12px 16px !important; font-size: 1rem !important; min-height: 48px; }
/* 결제 버튼 글자: 모바일에서 좌측정렬되어 보이던 것 가운데정렬로 (2026-09-18).
.payment-btn 이 flex-direction:column 이라 일부 모바일 엔진에서 button 의 text-align:center
상속이 .btn-text 로 이어지지 않아 두 줄 글자가 왼쪽으로 붙었다. 명시적으로 가운데정렬한다. */
.payment-btn { text-align: center !important; align-items: center !important; }
.payment-btn .btn-text { display: block; width: 100%; text-align: center !important; }
/* 결제 진행 안내바가 고정 헤더(52px)를 덮고, 닫기 ×가 60px이었다. */
#pay_processing_notice { top: 52px !important; }
#pay_processing_notice_close { font-size: 28px !important; top: 6px !important; }
/* ---------- 3. 동의·정보입력 화면 ---------- */
/* 첫 화면에 타이틀만 크게 뜨고 폼이 한참 아래에 있었다.
실측(375px): 헤더 아래 여백 90px(main-container margin-top 60 + left-section padding-top 30),
타이틀 30.4px. 여백 90 → 28px, 타이틀 30.4 → 21px 로 줄인다. */
.main-container { margin-top: 16px !important; }
.left-section { padding-top: 12px !important; margin-bottom: 12px !important; }
/* 예제와 "테스트 시작 전 안내" 사이 구분선 위아래 여백이 30 / 42px(12 + 30) 이었다(375px 실측).
선 위아래를 20px 로 맞춘다(2026-09-18 PM 요청). */
.left-section { padding-bottom: 20px !important; }
.right-section { padding-top: 8px !important; }
.intro-content h1 { font-size: 21px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
.intro-content .subtitle { font-size: 14px !important; margin-bottom: 16px !important; }
/* "테스트 시작 전 안내" 제목이 모바일에서도 32px(PC와 같은 값)이라 두 줄을 먹었다. */
.consent-header-compact { margin-bottom: 16px !important; }
.consent-header-compact h2 { font-size: 19px !important; line-height: 1.35 !important; margin-bottom: 6px !important; }
.consent-header-compact p { font-size: 13px !important; line-height: 1.5 !important; }
/* 예제문제·중요안내 박스: 글자를 줄여 줄바꿈을 줄인다(실측 전후 줄 수는 작업요청서 참고).
word-break: keep-all 은 한글을 단어 단위로 끊어 "들어
갈" 같은 어색한 개행을 막는다. */
.sample-box-compact { padding: 18px 16px !important; }
/* "예제 문제" 배지: 6px 18px / 13.6px → 작게. 배지는 라벨이지 읽는 글이 아니다. */
.sample-label { font-size: 11px !important; padding: 4px 12px !important; margin-bottom: 10px !important; }
/* 예제 문장("Q. 물음표(?)로 ...")이 가운데 정렬이라 두 줄이 되면 줄마다 시작 위치가 달라 어색했다(PM 지적).
문항 화면과 같이 왼쪽 정렬, 둘째 줄은 "Q." 뒤에 맞춰 들여쓴다. */
.sample-question {
font-size: 13px !important; line-height: 1.5 !important; word-break: keep-all;
text-align: left !important; padding-left: 1.6em; text-indent: -1.6em;
}
.sample-hint-compact { font-size: 13px !important; line-height: 1.55 !important; }
.info-notice { padding: 14px !important; margin-bottom: 18px !important; }
.info-notice > strong { font-size: 14px !important; } /* "중요 안내" 제목만 */
/* 목록 안의 강조 문구는 본문과 같은 크기로. 14px 이면 "본 테스트는 멘사 공식 입회 테스트가
아닙니다" 가 딱 1px 모자라 두 줄로 떨어진다(실측: 필요 240px / 쓸 수 있는 폭 240px). */
.info-notice li strong { font-size: 13px !important; }
.info-notice li { font-size: 13px !important; line-height: 1.5 !important; padding-top: 3px !important; word-break: keep-all; }
/* 약관 펼치기 버튼이 18px. 보이는 모양은 그대로 두고 터치 영역만 44px로 넓힌다. */
.toggle-icon {
width: 44px !important; height: 44px !important;
display: inline-flex; align-items: center; justify-content: center;
margin: -12px -10px -12px 0;
}
/* 체크박스 옆 글자를 눌러도 체크되도록 라벨 터치 영역 확보 */
.consent-item label { display: block; padding: 10px 0; }
/* 펼친 약관 박스가 체크박스 오른쪽 칸 안에 갇혀 폭 183px, 왼쪽 108px/오른쪽 69px 로 쏠려 있었다(실측 360px 화면).
박스를 체크박스 칸 밖으로 끌어내 입력칸과 같은 폭선(35~325px)에 맞춘다.
-53px = 라벨 margin 2 + padding-left 12 + 체크박스칸 27(20+마진7) + gap 12 (실측값),
-14px = 라벨 오른쪽 padding 12 + margin 2. 폭이 안 늘면 width:auto 가 없어서다 —
원본에서 박스 width 가 고정돼 있어 음수 마진만으로는 왼쪽으로 밀리기만 한다. */
.checkbox-group-compact {
padding-left: 0 !important; padding-right: 0 !important;
/* 이메일 입력칸과 첫 동의 항목 사이가 47px(mt 25 + pt 20 + 구분선 2) 이었다 → 24px */
margin-top: 12px !important; padding-top: 10px !important;
}
/* 처음에는 라벨 바깥 여백 2px 까지 빼서(-53/-14) 입력칸 선(35px)에 맞췄는데, 그러면 펼친 박스가
회색 약관 줄(37px~)보다 좌우로 2px 씩 튀어나온다(2026-09-18 PM 지적, 320~414px 실측 동일).
약관 줄 안쪽 선에 맞춘다: -51 = padding-left 12 + 체크박스칸 27 + gap 12, -12 = padding-right. */
.consent-detail-box {
width: auto !important;
margin-left: -51px !important;
margin-right: -12px !important;
}
/* 펼쳤을 때 안쪽 스크롤(300px 칸)은 그대로 둔다 — 페이지가 한없이 길어지는 것보다 낫다(2026-09-18 PM). */
.consent-detail-box.open { padding: 14px !important; }
/* 좁은 폭에서 목록 들여쓰기가 커 본문이 3줄로 쪼개진다. 들여쓰기를 줄이고 줄간격을 키운다. */
.consent-detail-box ul { margin-left: 14px !important; }
/* 펼친 약관 글자는 약관 제목(.checkbox-label-compact span, 13px)과 같은 크기로(2026-09-18 PM 요청).
전에는 소제목 15px·본문 14px 이라 제목보다 컸다. 소제목은 굵기로만 구분한다. */
.consent-detail-box li { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 6px !important; }
.consent-detail-box h4 { font-size: 13px !important; font-weight: 700 !important; margin: 14px 0 6px !important; }
.consent-detail-box h4:first-child { margin-top: 0 !important; }
/* 순서는 현행 유지 - 어떤 테스트인지(설명·예제문제)를 먼저 보여주는 것이 맞다(2026-09-18 PM).
대신 예제 이미지가 화면을 많이 먹는다(문제 251px + 보기 244px = 495px). 문제 이미지 높이를
제한한다. 원본이 353x348 이라 폭을 키워도 얻는 게 없다. */
.sample-question-image { max-height: 150px !important; width: auto !important; }
/* 예제 보기 4개를 한 줄에 둔다(원본은 1200px 이하에서 2x2). 전에 4열을 시도했다가 그림이 24px 까지
줄어 접었는데, 원인은 보기가 상자 5겹 안에 있어 좌우 여백이 쌓인 것이었다
(바깥 15 + 섹션 20 + 예제 상자 16 + 보기 묶음 테두리·여백 22 + 칸 여백·테두리 12, 한쪽 기준).
보기 묶음의 테두리·여백을 걷고 칸 여백을 줄이면 그림 폭이 375px 에서 약 52px 이 된다.
위 문제 그림(150px 로 제한) 안의 한 칸과 비슷한 크기다. */
.sample-options-image {
grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important;
padding: 0 !important; border: 0 !important; background: none !important; margin-top: 12px !important;
}
.sample-option-image { padding: 4px !important; }
/* 동의 4건이 각각 두 줄이라 그룹이 474px 이다. 글자를 본문 크기로 맞추고 상하 여백을 줄인다. */
.checkbox-label-compact { padding-top: 8px !important; padding-bottom: 8px !important; }
.checkbox-label-compact span { font-size: 13px !important; }
/* [테스트 시작하기] 가 문서 맨 아래(실측 top 2327 / 문서 2834)라 다 내려가야 보인다.
position: sticky 라서 스크롤 중에는 화면 하단에 떠 있고, 실제 버튼 자리까지 내려오면
그 자리에 그대로 놓인다(푸터를 가리지 않는다). JS 없이 CSS 한 줄로 되는 동작이다.
비활성(disabled) 상태는 현행 그대로 — 필수 항목이 다 채워져야 눌린다. */
.start-btn-compact {
position: sticky; bottom: 8px; z-index: 30;
box-shadow: 0 0 0 8px #fff, 0 6px 16px rgba(0,0,0,.18);
}
/* 현행 비활성 버튼은 opacity: .6 이라 하단에 떠 있으면 뒤 글자가 비쳐 보인다.
투명도 대신 회색 배경으로 비활성을 표시한다. */
.start-btn-compact:disabled { opacity: 1 !important; background: linear-gradient(135deg, #c9ced6, #a7aebb) !important; }
/* ---------- 3-2. 완료 모달 ("테스트를 마치셨습니다!") ---------- */
/* 이 모달은 모바일에서도 거의 문제가 없다(모달 342x479 로 화면 안에 들어오고, 입력칸 16px 라
iOS 자동확대도 안 난다). 손볼 곳은 입력칸 높이 32px 하나뿐이다. */
.metacognition-modal .modal-input { min-height: 44px !important; }
.metacognition-modal .modal-info .info-text,
.metacognition-modal .modal-notice { font-size: 13px !important; }
/* ---------- 4. 결과 화면 : 읽을 수 있는 글자 크기 ---------- */
/* A4 인쇄용 높이 고정이 남아 화면이 길어진다(기본 결과지는 이미 해제됨). */
.result-page { min-height: 0 !important; }
/* 7~8px까지 내려가던 고지·푸터 문구 */
.result-page-footer,
.footer-disclaimer,
.footer-notice,
.footer-warning,
.banner-date-label,
.date-label { font-size: 12px !important; line-height: 1.6 !important; }
.banner-subtitle,
.header-subtitle,
.cert-label,
.area-label,
.upgrade-notice { font-size: 13px !important; }
/* 업그레이드 버튼 41px → 44px */
.upgrade-btn { min-height: 44px; font-size: 13px !important; }
.action-btn { min-height: 44px; }
/* 상세 결과 오답 카드의 "응시번호 | 이름 | 응시일자" 줄. 모든 공백이 라 줄을 바꿀 곳이
날짜의 하이픈뿐이어서 "2026-" / "09-18" 로 쪼개지거나 "|" 만 윗줄 끝에 남았다(360·375px 실측).
응시번호를 첫 줄, 이름·응시일자를 둘째 줄로 고정하고 번호·날짜는 중간에서 끊기지 않게 한다.
HTML 변경 필요(작업요청서 6-5). */
.info-meta .im-num,
.info-meta .im-date { white-space: nowrap; }
/* 상세 결과 배너의 "온라인 테스트 결과 / TEST DATE: 2026.09.18" 줄. 한 줄 flex 라 폭이 모자라면
각자 안에서 줄을 바꿔 "TEST" / "DATE:" 로 끊기고 제목도 두 줄이 됐다(320px 실측).
둘 다 끊기지 않게 하고, 모자라면 날짜 묶음 전체가 다음 줄로 내려가게 한다. */
.banner-korean-wrapper { flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
.banner-korean,
.banner-date-inline { white-space: nowrap; }
/* 상세 결과 "단계별 성적" 5개(1·2·3단계, 작업 속도, 메타인지)가 480px 이하에서 한 줄에 하나씩 세로로
늘어서 스크롤이 길었다(원본 ≤480 1열, ≤768 3열이라 3+2 로 둘째 줄에 빈칸). 6칸 격자로 나눠
1·2·3단계는 한 줄에 셋, 작업 속도·메타인지는 한 줄에 둘 - 두 줄에 빈칸 없이 들어간다(PM 요청).
같은 종류(단계 점수)끼리 한 줄에 놓여 비교하기도 쉽다. 카드는 JS 가 만든다(js/result-detail_js.php:449). */
.stages-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 6px !important; }
.stages-grid .stage-item { grid-column: span 2; padding: 8px 4px !important; }
.stages-grid .stage-item:nth-child(n+4) { grid-column: span 3; }
.stage-item h5 { font-size: 12px !important; line-height: 1.3 !important; margin-bottom: 2px !important; word-break: keep-all; }
.stage-item .stage-detail { font-size: 12px !important; line-height: 1.3 !important; word-break: keep-all; }
.stage-item .stage-score { font-size: 20px !important; margin: 2px 0 0 !important; }
/* 같은 줄 카드 중 설명이 두 줄로 넘어간 카드("총 소요시간: 14분 35초")만 점수가 아래로 밀려 줄이 안 맞았다(PM 지적).
한 줄의 카드는 높이가 같으므로 점수를 카드 맨 아래에 붙인다. 줄이 바뀔 때는 "14분 / 35초" 처럼 끝 한
단어만 떨어지지 않게 비슷한 길이로 나눈다(text-wrap: balance, 모르는 브라우저는 지금처럼 줄바꿈). */
.stages-grid .stage-item { display: flex; flex-direction: column; }
.stages-grid .stage-item .stage-score { margin-top: auto !important; padding-top: 2px; }
.stage-item h5,
.stage-item .stage-detail { text-wrap: balance; }
/* ---------- 5. 결과 확인 관문(메일 링크 진입) ---------- */
/* 입력칸이 16px 미만이면 iOS에서 화면이 자동 확대되고 되돌아오지 않는다. */
.field-input { font-size: 16px !important; }
.field-error { font-size: 13px !important; }
.btn-submit { min-height: 44px; }
}
/* 결과 화면의 가격 버튼("9,800원 · 오답 해설 보기" 등 4개, 전부 .upgrade-btn-group 안). 폭이 모자라면 "보기" 한
단어만 떨어지거나 "·" 가 줄 끝에 남았다(PM 지적). 한 줄에 들어가면 그대로 두고, 버튼 안쪽 폭이 문구보다
좁을 때만 금액 / 이름 두 줄로 나눈다. 판정은 화면 폭이 아니라 버튼 자신의 폭(컨테이너 쿼리)으로 한다.
- 문구 한 줄 길이는 글자 크기의 9.6~9.9배(실측: "19,700원 · 오답 해설 보기" 9.93em) -> 기준 10.2em.
em 은 버튼 글자 크기 기준이라 버튼마다 글자 크기가 달라도 맞는다.
- 그룹 안 버튼은 flex:1 이라 폭이 내용이 아니라 그룹으로 정해져 컨테이너로 써도 안전하다.
HTML 에서 금액·구분점·이름을 span 으로 나눠야 한다(작업요청서 6-10). 모든 폭에 적용(PC 는 넓어서 한 줄). */
.upgrade-btn-group .upgrade-btn:has(.bt-price) { container-type: inline-size; }
@container (max-width: 10.2em) {
.btn-text .bt-price,
.btn-text .bt-label { display: block; }
.btn-text .bt-sep { display: none; }
}
@media (hover: none) {
/* 터치 기기에서 스크롤하다 손가락이 스친 보기에도 보라 테두리가 남았다. 원본 .choice-item:hover
(test.css:554)를 휴대폰 브라우저가 터치에도 적용하고, 다른 곳을 누를 때까지 풀지 않기 때문이다.
실제 선택은 onclick 이라 스크롤로 선택되지는 않는다 - 선택된 것처럼 "보이는" 문제다.
마우스가 없는 기기에서만 hover 모양을 원래대로 되돌린다. 선택된 보기(.selected)는 그대로다.
폭 기준이 아니라 입력 방식 기준이라, 마우스를 쓰는 PC 는 좁은 창이어도 hover 가 유지된다. */
.choice-item:not(.selected):hover {
border-color: #e0e0e0; transform: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
/* 동의 화면의 예제 보기도 같은 문제다(consent.css:135). 정답·오답 표시(.correct/.wrong)는 그대로 둔다. */
.sample-option-image:not(.correct):not(.wrong):hover {
background: white; border-color: var(--border-color); transform: none; box-shadow: none;
}
/* 동의 화면 약관 줄도 같다(consent.css:466 hover 회색). 스크롤하다 닿은 줄이 회색으로 남았다(PM 지적).
터치 기기에서는 hover 회색을 끄고, 약관을 펼친 줄만 회색으로 둔다. PC(마우스)는 원래대로. */
.checkbox-label-compact:hover { background: transparent; }
.checkbox-label-compact:has(.consent-detail-box.open) { background: var(--bg-gray); }
/* 누르는 순간 안드로이드·iOS 가 칸 전체에 회색 사각형을 깜빡이는 것도 없앤다. */
.choice-item,
.sample-option-image { -webkit-tap-highlight-color: transparent; }
}
@media (min-width: 769px) and (max-width: 1024px) {
/* 작은 PC·가로 태블릿(769~1024px). 원본 test.css:678 블록이 보기 묶음만 650px 로 두어, 600px 인
문제 칸보다 양쪽 20px 씩 넓었다(현행 운영도 동일, 1100px 이상은 둘 다 600px 로 맞음). 폭을 맞춘다. */
.choices-grid { max-width: 600px !important; }
}
@media (max-width: 600px) {
/* 오답 카드(응시정보 + 총 오답 수 + 해설노트 버튼). 600px 이하에서 원본이 세로 배치로 바꾸면서
가운데 정렬(align-items:center)을 그대로 두어, 좁은 글 묶음이 카드 가운데에 떠 보였다(PM 지적).
글은 왼쪽 정렬, 아래 줄은 오답 수 왼쪽 / 해설노트 버튼 오른쪽 끝으로 둔다. */
.user-info-card { align-items: stretch !important; }
.user-info-card .user-info-right { justify-content: flex-start !important; }
/* 아래 줄은 오답 수·"총 오답 수"·버튼 3개라 양끝 정렬을 쓰면 라벨이 가운데 뜬다. 버튼만 오른쪽 끝으로 민다. */
.user-info-card .user-info-right .notes-cta-btn { margin-left: auto; }
/* 오답확인(상세 결과). 600px 이하에서 원본이 문제 칸과 보기 칸을 위아래로 쌓으면서 둘을 같은 폭으로
만든다. 문제 그림은 칸에 맞춰 348px → 214px 로 줄어드는데 보기 그림은 97px 그대로라, 보기가 문제의
45% 크기로 커 보였다(PC 는 97/348 = 28%). 보기 칸을 한 줄짜리로 낮춘다. 그림 크기는 아래 "같은 배율" 규칙이 정한다. */
.question-answer-row .choice-box {
flex-direction: row; justify-content: space-between; align-items: center;
padding: 10px 14px;
}
.question-answer-row .choice-box .area-label { margin-bottom: 0; }
/* 문제 그림과 "내가 선택한 보기" 그림을 같은 배율로(2026-09-18 PM 지적, 문항 화면과 같은 문제).
처음에는 보기 그림을 칸 폭의 28% 로 두었는데, 정사각 문제 그림에서만 배율이 맞고 세로로 긴 문제 그림
(142x348 등)은 원본 크기로 나와 어긋났다. 카드 안쪽 폭(W)으로 배율 하나를 정한다:
배율 = min(1, W / 353). 썸네일 기준 상자(문제 353x348, 보기 102x97)에 같은 배율을 곱해 상한으로 둔다. */
.question-answer-row { container-type: inline-size; }
/* 원본이 이 줄을 내용 폭만큼만(align-items:flex-start) 두어, 그림이 작아지면 문제 칸도 같이 좁아져
아래 보기 칸(폭 100%)과 폭이 달라졌다. 문제 칸도 카드 폭 전체를 쓴다. */
.question-answer-row .question-img-area { align-self: stretch; }
.question-answer-row .question-real-img {
width: auto !important; height: auto !important;
max-width: min(353px, calc(100cqw - 28px)) !important;
max-height: min(348px, calc((100cqw - 28px) * 348 / 353)) !important;
}
.question-answer-row .choice-real-img {
width: auto; height: auto;
max-width: min(102px, calc((100cqw - 28px) * 102 / 353));
max-height: min(97px, calc((100cqw - 28px) * 97 / 353));
}
}
@media (max-width: 359px) {
/* 헤더로 올린 단계 표시가 로고(왼쪽 106px 까지)와 겹친다. 처음에는 단계 이름을 4글자로 잘랐는데,
PC 에서 좁혀 보면 스크롤바(15px)만큼 화면이 줄어 여전히 겹쳤다(PM 지적, SE 1세대 320px).
좁은 화면에서는 단계 이름을 빼고 번호만 둔다(단계 표시 폭 약 102px, 로고와 40px 이상 간격). */
.stage-step.active .stage-label { display: none !important; }
}
@media (max-width: 480px) {
/* 응시번호를 첫 줄, 이름·응시일자를 둘째 줄로 고정하는 것은 480px 이하만. 처음에 768px 이하 전체에
걸었더니 한 줄에 충분히 들어가는 태블릿 폭에서도 두 줄로 떨어져 어색했다(PM 지적). */
.info-meta .im-num { display: block; }
.info-meta .im-sep { display: none; }
/* 480px 이하에서 더 작아지던 값들을 같은 기준으로 맞춘다. */
.result-page-footer,
.footer-disclaimer,
.footer-notice,
.footer-warning,
.banner-date-label { font-size: 12px !important; }
.banner-subtitle,
.header-subtitle { font-size: 13px !important; }
.choice-item img { max-width: 100% !important; }
.test-navigation .nav-btn { font-size: 0.9rem !important; }
}
/* ============================================================
전 화면 공통 (모바일 전용 아님)
1) 결제 화면 "응시 정보 확인" 블록 중앙 정렬 - PC 에서도 함께 바뀝니다(2026-09-18 PM 요청).
2) 새로 추가하는 "전체 동의" 줄 - HTML·JS 도 함께 바뀝니다. 작업요청서 참고.
3) 동의 화면 예제 "정답 해설" 제목 굵게 + 제목 아래 빈 줄 제거 - PC 에서도 함께 바뀝니다.
4) 완료 모달 헤더 제목색·모서리 - PC 에서도 함께 바뀝니다(PC 도 같은 결함).
5) 두 번 탭 확대 막기 - 마우스 PC 에는 영향 없음.
============================================================ */
.payment-info-body { align-items: center !important; text-align: center !important; }
.payment-info-fields { justify-content: center !important; }
/* 3) 동의 화면 예제의 "💡 정답 해설" 제목 - PC 에서도 함께 바뀝니다(2026-09-18 PM 요청).
제목이 굵지 않았다(reset.css 가 strong 굵기를 400 으로 초기화). 그리고 제목과 본문 사이에 빈 줄이
하나 있었다. 원인은 마크업 제목 에서 strong 이 display:block(consent.css:242)
이라 뒤의 이 빈 줄을 하나 더 만든 것이다(실측: 제목 아래 ~ 본문 위 31px = 한 줄 23 + 여백 5 + 3).
HTML 은 그대로 두고 제목 바로 뒤의 만 숨긴다. 마지막 줄 "따라서 정답은 ..." 은 건드리지 않는다. */
.sample-hint-compact strong:first-child { font-weight: 700; }
.sample-hint-compact strong:first-child + br { display: none; }
/* 4) 완료 모달("테스트를 마치셨습니다!") 헤더 - 2026-09-18 PM 지적.
- 제목이 보라 배경 위에 거의 검정(#202020)으로 나왔다. 헤더는 color:white 인데 reset.css 가
h1~h6 에 색을 직접 지정해 h2 가 그걸 따른다(PC·모바일 모두, 실측 rgb(32,32,32)).
- 모바일에서 모달 본체 모서리는 15px 인데 헤더는 20px 라, 헤더가 더 깎인 틈으로 흰 본체가 보였다.
헤더 모서리를 없애고 본체(overflow:auto 라 둥근 모서리로 잘라냄)에 맡긴다 - 폭과 상관없이 맞는다. */
.metacognition-modal .modal-header h2 { color: #fff; }
.metacognition-modal .modal-header { border-radius: 0; }
/* 5) 두 번 탭 확대 막기(2026-09-18). 화면 확대를 허용한 뒤(includes/head.php 의 user-scalable=no 삭제),
보기·다음 버튼을 빠르게 연달아 누르면 폰이 두 번 탭 확대를 해 버린다. 확대된 채로 고정 요소
(완료 모달, 하단 버튼)가 뜨면 보이는 영역이 아니라 원래 화면 기준으로 놓여 한쪽으로 치우쳐 보인다(PM 실기기 지적).
manipulation 은 두 손가락 확대는 그대로 두고 두 번 탭 확대만 막는다(iOS 13+, 안드로이드 크롬). */
html { touch-action: manipulation; }
.checkbox-label-compact.agree-all {
border-bottom: 1px solid #e3e6ec;
padding-bottom: 12px;
margin-bottom: 10px;
font-weight: 600;
/* 개별 약관(--secondary-color 보라)과 구분되게 키컬러를 쓴다. common.css:5 정의값. */
color: var(--primary-color, #00559D);
}
.checkbox-label-compact.agree-all input[type="checkbox"] {
accent-color: var(--primary-color, #00559D);
}