/* 영재원 모의고사 (giftedMock*.html) 공통 스타일 */
:root { --gm-blue:#1668C7; --gm-ink:#1F7AE0; --gm-deep:#0A3E7A; --gm-soft:#e8f1fc; --gm-line:#e2e8f0;
        --gm-sub:#475569; --gm-mute:#94a3b8; --gm-green:#15803d; --gm-green-soft:#e9f7ee;
        --gm-amber:#b45309; --gm-amber-soft:#fff4e0; --gm-red:#b91c1c; --gm-red-soft:#fdecec; }
body { background:#f4f7fb; }
.page-wrap { max-width:760px; margin:0 auto; padding:22px 16px 90px; }
.gm-head { display:flex; align-items:center; gap:16px; background:linear-gradient(150deg,var(--gm-deep),var(--gm-blue)); color:#fff;
           border-radius:22px; padding:22px 24px; box-shadow:0 8px 24px rgba(22,104,199,.22); }
.gm-head .ic { width:54px; height:54px; flex-shrink:0; background:rgba(255,255,255,.16); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.gm-head h2 { font-weight:800; font-size:1.3rem; margin:0; }
.gm-head p { margin:4px 0 0; font-size:.88rem; opacity:.92; }
.gm-card { background:#fff; border:1px solid var(--gm-line); border-radius:18px; padding:22px; box-shadow:0 4px 14px rgba(0,0,0,.03); }
.gm-card > * + * { margin-top:14px; }
.gm-card h3 { font-size:1.05rem; font-weight:800; margin:0; color:#0f172a; }
.gm-card p { margin:0; color:var(--gm-sub); font-size:.92rem; line-height:1.7; }
.gm-card ul { margin:0; padding-left:18px; color:var(--gm-sub); font-size:.92rem; line-height:1.85; }
.gm-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .gm-grid2 { grid-template-columns:1fr; } }
.gm-box { border:1px solid var(--gm-line); border-radius:14px; padding:14px; }
.gm-box .k { font-size:.8rem; color:var(--gm-sub); }
.gm-box .v { font-size:1.35rem; font-weight:800; color:#0f172a; }
.gm-box .v small { font-size:.8rem; color:var(--gm-mute); font-weight:600; }
.gm-box .p { font-size:.88rem; font-weight:700; color:var(--gm-ink); }
.gm-bar { height:8px; background:var(--gm-line); border-radius:6px; overflow:hidden; margin-top:8px; }
.gm-bar i { display:block; height:100%; background:var(--gm-blue); border-radius:6px; }
.gm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; padding:14px 20px;
          font-weight:800; font-size:1rem; background:var(--gm-blue); color:#fff; text-decoration:none; cursor:pointer; }
.gm-btn:hover { color:#fff; filter:brightness(1.05); }
.gm-btn[disabled] { background:#cbd5e1; cursor:not-allowed; }
.gm-btn.ghost { background:#fff; color:var(--gm-blue); border:1.5px solid var(--gm-blue); }
.gm-btn.block { display:flex; width:100%; }
.gm-note { background:var(--gm-soft); border-radius:14px; padding:12px 14px; font-size:.9rem; color:#1e3a5f; line-height:1.65; }
.gm-warn { background:var(--gm-amber-soft); border-radius:14px; padding:12px 14px; font-size:.9rem; color:#7c3a06; line-height:1.65; }
.gm-steps { counter-reset:s; list-style:none; padding:0 !important; }
.gm-steps li { position:relative; padding-left:34px; margin:10px 0; }
.gm-steps li::before { counter-increment:s; content:counter(s); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
                       background:var(--gm-blue); color:#fff; font-size:.8rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.gm-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.gm-table th, .gm-table td { border-bottom:1px solid var(--gm-line); padding:9px 6px; text-align:center; }
.gm-table th { color:var(--gm-sub); font-weight:700; background:#f8fafc; }
.gm-table td.l { text-align:left; min-width:7.2em; }
.gm-chip { display:inline-block; white-space:nowrap; padding:2px 9px; border-radius:10px; font-size:.78rem; font-weight:800; }
.gm-chip.g { background:var(--gm-green-soft); color:var(--gm-green); }
.gm-chip.a { background:var(--gm-amber-soft); color:var(--gm-amber); }
.gm-chip.r { background:var(--gm-red-soft); color:var(--gm-red); }
.gm-chip.b { background:var(--gm-soft); color:var(--gm-blue); }
.gm-chip:not(.g):not(.a):not(.r):not(.b):not(.n) { background:#f1f5f9; color:var(--gm-sub); }
.gm-grow .gm-btn { width:auto; padding:8px 14px; font-size:.86rem; white-space:nowrap; }
.gm-sticky { position:sticky; bottom:0; z-index:20; background:rgba(244,247,251,.96); backdrop-filter:blur(6px);
             padding:12px 0 calc(12px + env(safe-area-inset-bottom)); margin-top:24px; }

/* 타이머 */
.gm-timer { position:sticky; top:calc(75px + env(safe-area-inset-top)); z-index:30; display:flex; align-items:center; justify-content:space-between;
            background:#0f172a; color:#fff; border-radius:14px; padding:10px 16px; font-weight:800; box-shadow:0 6px 18px rgba(15,23,42,.18); }
.gm-timer .t { font-variant-numeric:tabular-nums; font-size:1.25rem; letter-spacing:1px; }
.gm-timer.low { background:#b91c1c; }

/* 문항 (시험지 HTML 을 그대로 쓴다) */
.gm-paper { background:#fff; border:1px solid var(--gm-line); border-radius:18px; padding:22px 18px; font-size:1rem; line-height:1.7; color:#111; }
.gm-paper .q { margin:0 0 30px; }
.gm-paper .q:last-child { margin-bottom:0; }
.gm-paper .q .h { font-weight:700; }
.gm-paper .q .h b.no { display:inline-block; min-width:26px; }
.gm-paper .q .pt { font-weight:400; font-size:.8rem; color:#64748b; }
.gm-paper .body, .gm-paper .fig, .gm-paper .conds, .gm-paper .sub-q, .gm-paper table.clue { margin-left:26px; }
.gm-paper .body { margin-top:4px; }
.gm-paper .sub-q { margin-top:10px; }
.gm-paper .sub-q .t { font-weight:700; }
.gm-paper .conds { margin-top:8px; padding:8px 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fafcff; }
.gm-paper .fig { margin-top:8px; overflow-x:auto; }
.gm-paper .fig svg { max-width:100%; height:auto; }
.gm-paper .small { font-size:.82rem; color:#64748b; }
.gm-paper table.clue { border-collapse:collapse; margin-top:8px; font-size:.92rem; }
.gm-paper table.clue td { border:1px solid #cbd5e1; padding:5px 10px; }
.gm-paper table.clue td.n { font-weight:800; letter-spacing:4px; text-align:center; font-size:1.05rem; white-space:nowrap; }
.gm-paper .ans { display:none; }             /* 종이 답칸 → 앱은 아래 입력칸을 쓴다 */
.gm-paper .write { display:none; }           /* 종이 풀이칸 → 인쇄 때만 */
.gm-input { margin:10px 0 0 26px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gm-input input, .gm-input select { border:1.5px solid #cbd5e1; border-radius:10px; padding:9px 12px; font-size:1rem; font-weight:700; min-width:120px; }
.gm-input input:focus, .gm-input select:focus { outline:none; border-color:var(--gm-blue); }
.gm-input .u { color:var(--gm-sub); font-weight:700; }
/* 여러 개 고르기(multi) — 2026-10-03 과학 모의고사. 손가락으로 누르기 쉽게 44px 이상 */
.gm-input .gm-multi { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:46px; min-height:44px; padding:0 12px; border:1.5px solid #cbd5e1; border-radius:10px; font-size:1.05rem; font-weight:800; color:#0f172a; background:#fff; cursor:pointer; user-select:none; }
.gm-input .gm-multi input { position:absolute; opacity:0; width:1px; height:1px; min-width:0; padding:0; }
.gm-input .gm-multi.on { background:var(--gm-blue); border-color:var(--gm-blue); color:#fff; }
.gm-input .gm-multi:focus-within { outline:2px solid var(--gm-blue); outline-offset:2px; }
.gm-input .gm-slot { display:inline-flex; align-items:center; gap:6px; }
.gm-input .gm-slot select { min-width:80px; }
.gm-paperonly { margin:10px 0 0 26px; font-size:.86rem; font-weight:700; color:var(--gm-amber); }

/* 채점 체크 질문 */
.gm-check { border:1px solid var(--gm-line); border-radius:14px; padding:14px; margin-top:12px; }
.gm-check .cq { font-weight:700; color:#0f172a; line-height:1.6; }
.gm-check .ch { font-size:.84rem; color:var(--gm-sub); background:#f8fafc; border-radius:10px; padding:8px 10px; margin-top:8px; line-height:1.6; }
.gm-opts { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.gm-opts label { display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--gm-line); border-radius:10px; padding:9px 12px; cursor:pointer; font-size:.92rem; }
.gm-opts input { margin-top:4px; }
.gm-opts label.on { border-color:var(--gm-blue); background:var(--gm-soft); }
.gm-check.skip { opacity:.45; }

/* 워터마크 */
.gm-wm { font-size:.75rem; color:var(--gm-mute); text-align:right; margin-top:6px; }

/* 인쇄: 시험지만 */
@media print {
    @page { size:A4; margin:14mm; }
    body { background:#fff !important; padding:0 !important; }
    body > *:not(#printRoot) { display:none !important; }
    #printRoot { display:block !important; }
    #printRoot .q { break-inside:avoid; margin-bottom:18px; }
    #printRoot .write { display:block !important; border:1px solid #999; border-radius:4px; margin:6px 0 0 26px; }
    #printRoot .ans { display:block !important; margin:8px 0 0 26px; }
    #printRoot .ans span { display:inline-block; border:1px solid #111; min-width:110px; height:24px; vertical-align:middle; margin:0 6px; }
    #printRoot .body, #printRoot .fig, #printRoot .conds, #printRoot .sub-q, #printRoot table.clue { margin-left:26px; }
    #printRoot .conds { padding:6px 10px; border:1px solid #999; border-radius:4px; margin-top:6px; }
    #printRoot table.clue { border-collapse:collapse; } #printRoot table.clue td { border:1px solid #999; padding:4px 8px; }
    #printRoot .pbreak { break-before:page; }
}
#printRoot { display:none; font-family:"Pretendard","Apple SD Gothic Neo",sans-serif; color:#111; font-size:10.5pt; line-height:1.6; }

/* 좁은 휴대폰(≤420px)에서 문항별 표가 옆으로 잘리지 않게 — 여백·글자를 줄이고, 맞음/틀림 표시는 점수 아래로 (2026-09-30) */
@media (max-width:420px){
    .gm-table { font-size:.8rem; }
    .gm-table th, .gm-table td { padding:8px 3px !important; }
    .gm-table td.l { min-width:6.2em; }
    .gm-table td .gm-chip { display:table; margin:3px auto 0; padding:1px 6px; font-size:.7rem; }
    .gm-exbtn { padding:4px 7px !important; font-size:.74rem !important; }
}