/* 테스트 화면 공통 스타일 (단어 퀵체크·짝꿍 단어·빈칸 문장·소리 내어 읽기·반응속도 측정·음성 반응속도 측정·마이크 점검)
 * - 각 화면 <style>에 반복되던 배치 규칙과 공통 테마의 테스트 화면 색 규칙을 한 곳에서 관리
 * - 화면에만 있는 규칙(문장 크기·음량 막대 여백 등)은 각 화면 <style>에 남김
 * - common.css 다음에 로드(화면 본문에서 link), 표시 여부(display)·크기 맞춤(wordTestFit)·측정 로직은 그대로
 * - 앱 영역(최대 480px)은 항상 576px 미만이라 창 폭 구분 없이 모바일 기준 값 사용
 */

/* ==========================================================================
 * 1. 배치 (안내·카운트다운 영역, 제시 영역, 응답 버튼, 남은 시간 막대, 결과 카드)
 * ========================================================================== */
/* 시작 전 안내·카운트다운 영역: 화면 높이 85% 가운데 정렬
 * - 고정 높이가 아닌 최소 높이: 안내가 많아 넘치면 가운데 정렬로 위쪽이 제목·이동 경로와 겹치므로 아래로 늘어나게 함 */
.count_down_area {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 85vh;
    width: 100%;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
}

/* 안내 문구: 한국어 단어 중간 끊김 방지, 의미 단위 묶음(.guide_chunk)은 통째로 줄바꿈 */
.count_down_area h5 {
    max-width: 100%;
    font-size: 1.05rem;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.guide_chunk {
    display: inline-block;
}

/* 카운트다운 숫자 (예전 h1 공통 크기 40px·인라인 위 여백 10%) */
#countdown {
    margin-top: 10%;
    font-size: 40px;
    text-align: center;
}

/* 제시 영역: 카운트다운 후 flex로 표시 (처음에는 숨김) */
.word_area {
    align-items: center;
    display: none;
    flex-direction: column;
    height: 85vh;
    width: 100%;
    justify-content: center;
}

/* 제시 단어: 좌우 여백 안에서 한 줄 표시, 넘치면 wordTestFit으로 글자 크기 축소 (마이크 점검 단어는 .mic_stage 안이라 제외) */
.word_area #wordView {
    font-size: 70px;
    margin-bottom: 40px;
    width: 100%;
    padding: 0 16px;
    text-align: center;
    white-space: nowrap;
}

/* 최소 글자 크기에서도 넘칠 때만 하이픈·글자 단위 줄바꿈 */
.word_area #wordView.fit_wrap {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/*
 * 하단 탭 바가 보이는 폭(991.98px 이하, common.css 6장): 안내·제시 영역을 화면 제목 아래부터 탭 바 위까지로 맞춤
 * - 85vh 영역은 제목 아래에서 시작해 화면 아래로 넘쳐, 긴 문장일 때 응답 버튼이 탭 바에 가려지는 문제 방지
 * - 빈칸 문장 세로 맞춤(wordTestFit container)도 보이는 높이 기준으로 글자 축소
 * - 높이 기준은 주소 표시줄이 보이는 상태의 작은 화면 높이(svh, 미지원 브라우저는 vh), 짧은 가로 화면은 최소 260px(넘는 부분은 스크롤)
 */
@media (max-width: 991.98px) {
    :root {
        /* 안내·제시 영역 시작 위치 (상단 바 57px + 화면 제목·이동 경로 93px, 테스트 7개 화면 공통 측정값) */
        --test-area-top: 150px;
        /* 영역 아래 끝에서 뺄 높이 (탭 바 + 위 테두리 1px + 홈 표시줄) */
        --test-area-bottom: calc(var(--app-tab-bar-height) + 1px + var(--app-safe-bottom));
    }

    /* 안내 영역은 최소 높이 (넘치면 아래로 늘어남, 위 1장 참고) */
    .count_down_area {
        min-height: max(260px, calc(100vh - var(--test-area-top) - var(--test-area-bottom)));
        min-height: max(260px, calc(100svh - var(--test-area-top) - var(--test-area-bottom)));
    }

    .word_area {
        height: max(260px, calc(100vh - var(--test-area-top) - var(--test-area-bottom)));
        height: max(260px, calc(100svh - var(--test-area-top) - var(--test-area-bottom)));
    }
}

/* 응답 버튼 줄: 가운데 정렬 (2개가 들어가면 나란히, 아니면 같은 너비로 쌓기) */
.answer_button_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
}

.answer_button {
    flex: 0 0 140px;
    min-width: 0;
    margin: 0;
    font-size: 20px;
}

/*
 * 키 입력 답 버튼 (answerInput.js, layout/component :: testAnswerButtons)
 * - 제시 영역 = 문항 영역(남는 높이 가운데) + 화면 아래 좌우 버튼 줄
 * - 몰라요·알아요 버튼은 같은 모양·크기·색(원문), 왼쪽 몰라요·오른쪽 알아요, 키 표시 포함
 */
.test_question {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    width: 100%;
}

.test_answer_buttons {
    display: flex;
    gap: 12px;
    padding: 0 16px 16px;
    width: 100%;
}

/* 답 버튼이 있는 제시 영역 : 탭 바가 없는 넓은 폭에서도 버튼이 첫 화면 안에 보이게 (제목 아래 150px부터 아래 여백 16px까지) */
@media (min-width: 992px) {
    .word_area.has_answer_buttons {
        height: max(320px, calc(100vh - 150px - 16px));
        height: max(320px, calc(100svh - 150px - 16px));
    }
}

/* 답 버튼 : 줄을 반씩 나눔, 터치 대상 64px 이상, 두 번 눌러 확대·글자 선택 방지 */
.test_answer_button {
    align-items: center;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 72px;
    min-width: 0;
    padding: 8px;
    font-size: 20px;
    font-weight: 700;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 키 표시 (자판 모양 작은 상자) */
.test_answer_key {
    min-width: 32px;
    padding: 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    line-height: 26px;
}

/* 시작 전 안내의 키 글자 강조 */
.test_key_guide {
    font-weight: 800;
    white-space: nowrap;
}

/* 남은 시간 막대 (응답 버튼 아래, 시간이 지날수록 줄어듦, wordTestTimeOver가 표시) */
.time_over_bar {
    width: 360px;
    max-width: 90%;
    height: 6px;
    margin-top: 30px;
    border-radius: 3px;
    overflow: hidden;
    visibility: hidden;
}

.time_over_bar_fill {
    width: 100%;
    height: 100%;
}

/* 결과 카드: 테스트가 끝나면 표시 */
#resultArea {
    display: none;
}

/* 결과 저장 실패 시 '다시 저장' 작은 버튼: 보이는 크기는 그대로 두고 누르는 영역만 위아래 44px 이상으로 확장 */
#retrySaveButton {
    position: relative;
}

#retrySaveButton::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -6px;
    bottom: -11px;
    left: -6px;
}

/* ==========================================================================
 * 2. 음성 화면 공통 (소리 내어 읽기·음성 반응속도 측정·마이크 점검)
 * ========================================================================== */
/* "말해 주세요" 표시 (응답 버튼 자리) */
.word_area #speakHint {
    font-size: 24px;
    min-height: 36px;
}

/* 제시 영역 안 입력 음량 막대 (위아래 여백은 화면별, 마이크 점검 막대는 카드 안이라 제외) */
.word_area #levelBarWrap {
    width: 240px;
    max-width: 100%;
    height: 12px;
}

/* 음량 막대: 프레임마다 갱신하므로 전환 효과 없음 */
#levelBar {
    transition: none;
}

/* 마이크·안내 알림 (안내 영역 폭 전체, 단어 단위 줄바꿈) */
.voice_notice {
    max-width: 100%;
    margin: 8px 0 0;
    width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.voice_buttons {
    margin-top: 16px;
}

/* 권한 필요 안내: 허용 방법 줄과 다시 시도 버튼 */
.permission_help {
    margin: 6px 0 12px;
    font-size: .85rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

#permissionRetryButton {
    min-height: 44px;
}

/* 결과표 판정 칸: 판정 문구·일치율 묶음 단위 줄바꿈 */
.judge_chunk {
    display: inline-block;
}

/* ==========================================================================
 * 3. 테마 색 (흰 카드 영역, 인디고 강조, common.css 공통 테마와 같은 톤)
 * ========================================================================== */
/* 안내·단어 영역: 흰 카드 큰 영역 */
.content .count_down_area,
.content .word_area,
.content .mic_stage {
    background: var(--c-card);
    color: var(--c-title);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-card);
}

/* 안내 문구: 본문색 */
.content .count_down_area h5 {
    color: var(--c-text);
}

/* 카운트다운 숫자: 인디고 굵게 */
.content #countdown {
    color: var(--c-primary);
    font-weight: 800;
}

/* 제시 단어·문장: 진한 남색 */
.content #wordView,
.content #sentenceView {
    color: var(--c-title);
    font-weight: 800;
}

.content #sentenceView {
    font-weight: 700;
}

/* 문장 테스트 정답 단어 강조: 인디고 */
.content #sentenceView .answer_word {
    color: var(--c-primary);
}

/* 진행 표시 "3 / 10" */
.content #progressView {
    color: var(--c-muted);
    font-size: .95rem;
    font-weight: 600;
}

/* 진행 막대 (common.js initTestProgressBar가 #progressView 다음에 추가, 퍼센트 글자 없음) */
.test_progress {
    width: 60%;
    max-width: 240px;
    height: 6px;
    margin: 8px 0 28px;
    border-radius: 999px;
    background: var(--c-line);
    overflow: hidden;
    visibility: hidden;
}

.test_progress_fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--c-primary);
    transition: width .2s ease;
}

/* 키 입력 답 버튼: 두 버튼 같은 색(옅은 인디고 바탕 + 인디고 테두리), 누르는 순간 진한 바탕 */
.content .test_answer_button {
    background: var(--c-primary-soft);
    border: 2px solid var(--c-primary);
    border-radius: var(--c-radius);
    color: var(--c-title);
}

.content .test_answer_button:active:not(:disabled) {
    background: var(--c-primary);
    color: #ffffff;
}

/* 문항이 열리기 전·답한 뒤 : 흐리게 */
.content .test_answer_button:disabled {
    opacity: .5;
}

.content .test_answer_key {
    background: var(--c-card);
    border: 1px solid var(--c-input-border);
    border-radius: 6px;
    color: var(--c-title);
}

.content .test_key_guide {
    color: var(--c-primary);
}

/* 남은 시간 막대: 회색 바탕 + 인디고 */
.content .time_over_bar {
    background: var(--c-line);
}

.content .time_over_bar_fill {
    background: var(--c-primary);
}

/* 입력 음량 막대 (음성 테스트·마이크 테스트) */
.content #levelBarWrap {
    background: var(--c-line);
}

.content #levelBar.bg-success {
    background-color: var(--c-primary) !important;
}

/* "말해 주세요" 표시 */
.content #speakHint {
    color: var(--c-primary);
    font-weight: 600;
}

/* 다시 읽기 안내 (흰 바탕 대비 5.0:1 진한 주황) */
.content #retryNotice {
    color: #B45309;
}

/* 인식 결과 참고 표시 */
.content #recognitionList {
    color: var(--c-muted);
}

/* 흰 영역 위 밝은 테두리 버튼(나중에 하기) → 회색 테두리 */
.content .count_down_area .btn-outline-light,
.content .word_area .btn-outline-light {
    background-color: #ffffff;
    border-color: var(--c-input-border);
    color: var(--c-text);
}

.content .count_down_area .btn-outline-light:hover,
.content .word_area .btn-outline-light:hover {
    background-color: var(--c-bg);
    color: var(--c-title);
}