/* Luno 綸諾｜膠囊按鈕、試卷排版、作答回饋、列印、手機適配。2026-10-21 從 index.html 原樣拆出，檔案順序見 index.html 底部 */
        /* --- 年級／科目膠囊按鈕：這兩欄不給預設值(猜錯就整份考卷報廢)，
               所以改成一排點就好的按鈕，比下拉選單少 2~3 次點擊，手機上差更多 --- */
        .lq-chip-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
        .lq-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
        .lq-chip-group-label {
            font-size: 0.75rem; font-weight: 700; color: #94a3b8;
            min-width: 2.4rem; flex-shrink: 0;
        }
        .lq-chip {
            padding: 0.5rem 0.85rem; border: 1.5px solid #e2e8f0; border-radius: 999px;
            background: #fff; color: #475569; font-size: 0.9rem; font-weight: 600;
            cursor: pointer; transition: all 0.15s ease; line-height: 1.2;
            /* 手機上要好按：44px 是觸控目標的下限 */
            min-height: 2.5rem;
        }
        .lq-chip:hover { border-color: var(--hl-blue, #2563eb); color: var(--hl-blue, #2563eb); }
        .lq-chip.is-active {
            background: var(--hl-blue, #2563eb); border-color: var(--hl-blue, #2563eb);
            color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
        }
        .lq-chip-custom { border-style: dashed; color: #64748b; }
        @media (max-width: 480px) {
            .lq-chip { padding: 0.5rem 0.7rem; font-size: 0.85rem; }
            .lq-chip-group-label { min-width: 100%; margin-bottom: -0.1rem; }
        }

        /* --- 試卷排版核心 (螢幕預覽) --- */
        .a4-page {
            width: 210mm;
            min-height: 297mm;
            background: white;
            /* 預覽邊界：上下 10mm (1cm), 左右 12.5mm (1.25cm) */
            padding: 10mm 12.5mm;
            margin: 40px auto;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            color: black;
            font-family: "Noto Sans TC", "PMingLiU", sans-serif;
            font-size: 11pt;
            line-height: 1.35;
            position: relative;
            outline: none;
        }

        .page-content { width: 100%; }

        /* 題目區塊 */
        .q-item {
            display: flex;
            align-items: baseline;
            position: relative;
            margin-bottom: 12pt;
            page-break-inside: avoid;
            break-inside: avoid;
        }
        /* 重新出這題按鈕預設隱藏,只有滑鼠移到該題範圍才淡入,讓試卷預設看起來像乾淨的真考卷,
           而不是每題上方都常駐一顆黃色標籤 */
        /* 絕對定位塞在題號正下方的空白處：原本它是一般區塊元素，每題都白白吃掉一整行高度
           (列印/PDF時雖然會隱藏，但螢幕上很浪費空間，Steve反映) */
        .q-item .q-regen-toolbar {
            position: absolute; left: 0; top: 1.7em; margin: 0; z-index: 5;
            opacity: 0; transition: opacity 0.15s ease;
        }
        .q-item:hover .q-regen-toolbar { opacity: 1; }
        /* 題號欄在小螢幕只有48-56px寬，塞不下文字，收起來只留圖示(title仍看得到說明) */
        @media screen and (max-width: 820px) { .q-regen-label { display: none; } }

        .q-num-box {
            width: 90px;
            flex-shrink: 0;
            font-weight: bold;
            white-space: nowrap;
            margin-right: 5px;
            text-align: left;
        }

        .q-content-box { flex-grow: 1; }
        .q-text { font-weight: bold; margin-bottom: 3pt; display: block; }
        .q-opts { margin-left: 0; }
        .q-opt { margin-bottom: 2pt; display: block; }

        .writing-space {
            margin-top: 10pt;
            width: 100%;
            height: 45pt;
            border-bottom: 1px dashed #000;
        }

        .paper-header { text-align: center; border-bottom: 2px solid #000; margin-bottom: 15pt; padding-bottom: 8pt; }
        .paper-header h2 { font-size: 20pt; font-weight: bold; margin: 0 0 8pt 0; }
        .paper-info { display: flex; justify-content: space-between; font-size: 11pt; }

        .page-footer {
            position: absolute;
            bottom: 10mm;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 10pt;
            color: #000;
        }

        /* 試卷上的文字都可以直接點下去改，但這件事本來完全沒有視覺提示，老師根本不會發現。
           hover 時給淡黃底＋虛線底線＋文字游標三個訊號，focus 時再給明確外框。
           這些全部只在螢幕生效，列印/PDF 由下面的 @media print 清乾淨 */
        [contenteditable="true"]:hover {
            background-color: #fff9db;
            box-shadow: inset 0 -1px 0 0 #fbbf24;
            cursor: text;
        }
        [contenteditable="true"]:focus {
            background-color: #fff;
            outline: 2px solid var(--hl-blue, #2563eb);
            outline-offset: 2px;
            border-radius: 3px;
        }
        /* 試卷上方的一次性提示，讓「可以直接改」這件事被看見 */
        .lq-edit-hint {
            max-width: 60rem; margin: 0 auto 0.5rem; padding: 0.5rem 0.9rem;
            background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
            color: #92400e; font-size: 0.8rem; font-weight: 600;
            display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
        }
        .lq-edit-hint button { color: #b45309; font-weight: 700; flex-shrink: 0; }

        .progress-bar {
            width: 0%; height: 100%;
            background: linear-gradient(90deg, var(--hl-blue), var(--hl-red), var(--hl-yellow), var(--hl-green));
            transition: width 0.3s ease;
            text-align: center; color: white; font-size: 10px; line-height: 16px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.35);
        }

        /* --- 線上作答：答對/答錯回饋動畫 --- */
        @keyframes lun-pop { 0%{transform:scale(1);} 35%{transform:scale(1.035);} 65%{transform:scale(0.99);} 100%{transform:scale(1);} }
        @keyframes lun-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-6px);} 80%{transform:translateX(6px);} }
        @keyframes lun-flash-green { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.55);} 100%{box-shadow:0 0 0 16px rgba(16,185,129,0);} }
        @keyframes lun-flash-red { 0%{box-shadow:0 0 0 0 rgba(244,63,94,0.55);} 100%{box-shadow:0 0 0 16px rgba(244,63,94,0);} }
        @keyframes lun-badge-pop { 0%{transform:scale(0) rotate(-12deg); opacity:0;} 60%{transform:scale(1.25) rotate(6deg); opacity:1;} 100%{transform:scale(1) rotate(0deg); opacity:1;} }
        .ans-card { transition: border-color 0.2s; border: 2px solid transparent; }
        .ans-card.ans-correct { animation: lun-pop 0.4s ease, lun-flash-green 0.7s ease; border-color: #10b981; }
        .ans-card.ans-wrong { animation: lun-shake 0.4s ease, lun-flash-red 0.7s ease; border-color: #f43f5e; }
        .ans-badge { display: inline-block; animation: lun-badge-pop 0.5s cubic-bezier(.34,1.56,.64,1); }
        .ans-score-pop { animation: lun-pop 0.5s ease; }

        /* --- 列印專用設定 (終極修復) --- */
        @media print {
            /* 邊界改交給 @page，讓每一張「實體紙」都統一套用邊界——
               包含題目過多時瀏覽器自動分頁出的續頁(這種續頁不是獨立的.a4-page元素，
               先前靠.a4-page自己的padding只對每個容器頂部有效，續頁會完全貼齊紙張邊緣) */
            @page {
                /* 上下留白加大到18mm：若使用者列印時沒關瀏覽器內建的「頁首和頁尾」(日期/標題/網址/頁碼)，
                   這些瀏覽器自己加的文字才有地方擺，不會跟題目內容擠在一起、貼齊紙張邊緣 */
                margin: 18mm 12.5mm;
                size: A4;
            }

            body {
                margin: 0;
                padding: 0;
                background: white;
            }

            #inputForm, .no-print, .sticky-header { display: none !important; }
            #resultSection { display: block !important; width: 100%; margin: 0; padding: 0; }

            .a4-page {
                margin: 0 !important;
                box-shadow: none;
                /* 邊界已由 @page 統一提供，這裡不再重複加padding，避免每頁邊界疊加兩次 */
                padding: 0 !important;
                page-break-after: always;
                width: 100% !important;
                min-height: auto;
                height: auto;
                background-color: white !important;
                overflow: visible !important;
            }

            .a4-page:last-child {
                page-break-after: auto;
            }

            .editable-text:hover { background: none; outline: none; }
            /* 編輯提示只是給螢幕上的老師看的，絕對不能印出來 */
            .lq-edit-hint { display: none !important; }
            [contenteditable="true"],
            [contenteditable="true"]:hover,
            [contenteditable="true"]:focus {
                background: transparent !important;
                box-shadow: none !important;
                outline: none !important;
            }
        }

        .hidden { display: none !important; }

        /* --- 手機/小螢幕適配（各種機型寬度，僅影響螢幕預覽，不影響列印） --- */
        @media screen and (max-width: 820px) {
            .a4-page {
                width: 100%;
                min-height: auto;
                padding: 16px;
                margin: 16px auto;
                font-size: 10.5pt;
            }
            .q-num-box { width: 56px; font-size: 0.95em; }
            .paper-header h2 { font-size: 16pt; }
            .paper-info { flex-direction: column; gap: 4px; text-align: center; }
            .source-btn { font-size: 1em; padding: 12px 8px; }
        }

        @media screen and (max-width: 480px) {
            .a4-page { padding: 12px; font-size: 10pt; }
            .q-num-box { width: 48px; }
        }