/* 맛보기 화면 전용 스타일 (views/trial.html, wordTest.css 다음에 로드 : 안내 그림·기기별 안내·결과 카드·끝 버튼)
 * - 색·모서리·글꼴은 common.css 디자인 토큰(--c-*) 사용
 */

/* ==========================================================================
 * 1. 시작 전 안내
 * ========================================================================== */
/* 안내 제목 "맛보기" */
.trial .trial_title {
    margin: 0 0 16px;
    color: var(--c-title);
    font-size: 1.6rem;
    font-weight: 800;
}

/* 기기별 안내 : 기본은 키보드 안내, 마우스 없는 터치 기기는 버튼 안내 */
.trial .trial_guide_touch {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .trial .trial_guide_key {
        display: none;
    }

    .trial .trial_guide_touch {
        display: block;
    }
}

/* 답 버튼 그림 (실제 답 버튼과 같은 색·모양을 작게, 화면 폭이 좁아도 한 줄) */
.trial_guide_preview {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 12px 0 4px;
}

.trial_guide_button {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 10px 8px;
    border: 2px solid var(--c-primary);
    border-radius: var(--c-radius);
    background: var(--c-primary-soft);
    color: var(--c-title);
    font-size: 1rem;
    font-weight: 700;
}

/* 안내 아래 작은 글자 (단어 수·기록 안 남음) */
.trial_guide_note {
    margin: 10px 0 0;
    color: var(--c-muted);
    font-size: .88rem;
}

/* 시작하기 버튼 (터치 대상 48px 이상) */
.trial_start_button {
    min-width: 200px;
    min-height: 52px;
    margin-top: 20px;
    font-weight: 700;
}

.trial_start_button[hidden] {
    display: none;
}

/* ==========================================================================
 * 2. 결과
 * ========================================================================== */
.trial_result {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 0 32px;
}

.trial_result[hidden] {
    display: none;
}

.trial_result_title {
    margin: 0 0 14px;
    color: var(--c-title);
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
}

/* 제목은 결과로 바뀔 때 읽기 위치만 옮기는 곳이라 포커스 외곽선 없음 */
.trial_result_title:focus {
    outline: none;
}

.trial_result_card {
    border-radius: var(--c-radius-lg);
    overflow: hidden;
}

/* 단어별 표 (3열, 360px 폭에서도 가로 스크롤 없음) */
.trial_result_table th,
.trial_result_table td {
    padding: 12px 10px;
    vertical-align: middle;
    text-align: center;
    overflow-wrap: anywhere;
}

.trial_result_table th {
    border-top: 0;
    color: var(--c-muted);
    font-size: .85rem;
    font-weight: 700;
}

.trial_result_table td {
    color: var(--c-title);
    font-size: 1rem;
}

/* 단어 칸 : 영어 단어 굵게 */
.trial_result_table td:first-child {
    font-weight: 700;
}

/* 알아요 평균 줄 */
.trial_result_average {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    word-break: keep-all;
}

/* 끝 버튼 : 두 버튼 반씩, 좁은 화면에서도 한 줄 (터치 대상 48px 이상) */
.trial_result_actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.trial_result_actions .btn {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 52px;
    padding: 0 10px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

/* 결과가 막 나온 순간 잠금 (마지막 답 터치의 click 이 결과 버튼에 눌리지 않게, trialPage.js 가 잠깐 붙였다 뗌) */
.trial_result_actions.is_locked {
    pointer-events: none;
}

/* 가입 안내 (비로그인만) */
.trial_join_guide {
    margin: 14px 0 0;
    color: var(--c-text);
    font-size: .9rem;
    text-align: center;
    word-break: keep-all;
}