/* ============================================
   國語考卷產生器樣式
   A4 橫式、文字從左到右閱讀、直書（由上到下）
   ============================================ */

/* ===== 編輯器容器 ===== */
.exam-builder-container {
    max-width: 1600px;
    margin: 0 auto;
}

/* ===== 題型分類標籤 ===== */
.question-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.question-type-tabs .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
}

.question-type-tabs .btn.active {
    background-color: var(--primary-color, #ffcc00);
    border-color: var(--primary-color, #ffcc00);
    color: #333;
}

/* ===== 題型按鈕 ===== */
.question-type-buttons .btn {
    text-align: left;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
}

.question-type-buttons .btn:hover {
    background-color: var(--primary-color, #ffcc00);
    border-color: var(--primary-color, #ffcc00);
    color: #333;
    transform: translateX(5px);
}

.question-type-buttons .btn i {
    width: 20px;
    margin-right: 0.5rem;
}

/* ===== 題目列表 ===== */
.section-list {
    max-height: 400px;
    overflow-y: auto;
}

.section-list-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    cursor: move;
    transition: background-color 0.2s;
}

.section-list-item:hover {
    background-color: #f8f9fa;
}

.section-list-item.dragging {
    opacity: 0.5;
    background-color: #e9ecef;
}

.section-list-item .section-drag-handle {
    color: #ccc;
    margin-right: 0.75rem;
    cursor: grab;
}

.section-list-item .section-info {
    flex: 1;
}

.section-list-item .section-title {
    font-weight: 500;
    font-size: 0.9rem;
}

.section-list-item .section-type {
    font-size: 0.75rem;
    color: #888;
}

.section-list-item .section-actions {
    display: flex;
    gap: 0.5rem;
}

.section-list-item .section-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* ===== 預覽區容器 ===== */
.exam-preview-wrapper {
    background-color: #e0e0e0;
    padding: 20px;
    overflow-x: auto;
}

/* ===== 考卷預覽容器（支援多頁） ===== */
.exam-preview {
    /* 容器不限制高度，讓多頁可以垂直排列 */
    min-width: 297mm;
    background: transparent;
    margin: 0 auto;
}

/* ===== 單頁考卷（A4 橫式、直書由右到左） ===== */
/* A4 橫式尺寸：297mm x 210mm，內容區域：277mm x 190mm */
.exam-preview .exam-layout {
    /* 固定 A4 橫式尺寸 - 不可變動 */
    width: 297mm;
    min-width: 297mm;
    max-width: 297mm;
    height: 210mm;
    min-height: 210mm;
    max-height: 210mm;
    background: white;
    margin: 0 auto;
    padding: 10mm;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 16pt;
    box-sizing: border-box;
    overflow: hidden;
    /* 直書：由上到下、由右到左 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    direction: ltr;
}

/* 多頁標記（第 2 頁以後使用） */
.exam-layout.exam-page {
    margin-top: 20px;
}

.exam-layout.exam-page:first-child {
    margin-top: 0;
}

.exam-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 190mm;
    color: #999;
    text-align: center;
}

.exam-empty-state i {
    color: #ccc;
}

.exam-empty-state h4 {
    margin-bottom: 0.5rem;
    color: #888;
}

.exam-empty-state p {
    color: #aaa;
}

/* 空題目提示（在考卷預覽內） */
.exam-empty-hint {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 11pt;
}

.exam-empty-hint p {
    margin: 0;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 4px;
}

/* ===== 考卷整體佈局 ===== */
/* 在 vertical-rl 模式下，flex-direction: column 會使項目水平排列（從右到左） */
.exam-layout {
    /* 內容區 = A4 橫式 - padding (10mm * 2) = 277mm x 190mm */
    width: 277mm;
    height: 190mm;
    border: 2px solid #333;
    box-sizing: border-box;
    position: relative;
    padding: 10px;
    background: white;
}

/* 垂直中線（上下對分，50% 位置） */
.exam-center-line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #000;
    pointer-events: none;
    z-index: 5;
}

/* 題目內容區（已不使用，由 exam-layout 取代） */

/* ===== 區域容器（上半/下半） ===== */
/* 每個區域高度約 95mm（190mm / 2） */
.exam-zone {
    position: absolute;
    left: 10px;
    right: 130px;  /* 避開右側頁首區域（約120px + 10px margin） */
    box-sizing: border-box;
    overflow: hidden;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 上半部區域 */
.exam-zone-top {
    top: 10px;
    bottom: 50%;
    padding-bottom: 5px;
}

/* 下半部區域 */
.exam-zone-bottom {
    top: 50%;
    bottom: 10px;
    padding-top: 5px;
}

/* 第二頁及以後，無頁首 */
.exam-page .exam-zone {
    right: 10px;
}

.exam-zone-empty {
    height: 100%;
}

/* 續前題標題 */
.exam-continue-header {
    border-left-color: #999;
}

.exam-continue-header .section-title {
    color: #666;
    font-weight: normal;
}

/* ===== 簡化頁首（第 2 頁以後） ===== */
.exam-header-simple {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 50px;
    z-index: 10;
    background: white;
    border: 2px solid #333;
}

.exam-header-simple .header-page-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px 6px;
    font-size: 10pt;
    color: #666;
}

.exam-header-simple .header-page-info span {
    writing-mode: horizontal-tb;
    white-space: nowrap;
}

/* ===== 考卷頭部（右側資訊欄） ===== */
/* 在 vertical-rl 模式下，flex-direction: row 會使項目從右到左排列 */
.exam-header {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    border: 2px solid #333;
    z-index: 10;
    background: white;
}

/* 每個直行區塊 */
.exam-header .header-col {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
    text-align: center;
    justify-content: center;
}

.exam-header .header-col:first-child {
    border-left: none;
}

/* 標題區塊（固定 3 列：學年度+學校、年級+學期、考卷名稱） */
.exam-header .header-title-col {
    width: 120px;
    padding: 8px 6px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.6;
    background: white;
}

.exam-header .header-title-col span {
    display: block;
    white-space: nowrap;
}

/* 姓名+班級合併欄位（左右並排，固定高度） */
.exam-header .header-name-class-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: bold;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.exam-header .header-name-class-col .name-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
}

.exam-header .header-name-class-col .class-row {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.exam-header .header-name-class-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
}

.exam-header .header-name-class-col .field-value {
    flex: 1;
    min-width: 60px;
}
.exam-header .header-ename-eclass-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid #000;
    height: 150px;
}
.exam-header .header-ename-eclass-col .ename-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
}

.exam-header .header-ename-eclass-col .eclass-row {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.exam-header .header-ename-eclass-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
}

.exam-header .header-ename-eclass-col .field-value {
    flex: 1;
    min-width: 60px;
}

/* 座號欄位（標籤） */
.exam-header .header-seat-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: bold;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.exam-header .header-seat-col .seat-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
    align-items: center;
    justify-content: center;
}

.exam-header .header-seat-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

/* 座號填寫區 */
.exam-header .header-eseat-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid #000;
    height: 50px;
}

.exam-header .header-eseat-col .eseat-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
}

.exam-header .header-eseat-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
}

/* 分數欄位（標籤） */
.exam-header .header-score-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: bold;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.exam-header .header-score-col .score-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
    align-items: center;
    justify-content: center;
}

.exam-header .header-score-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

/* 分數填寫區 */
.exam-header .header-escore-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid #000;
    height: 50px;
}

.exam-header .header-escore-col .escore-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
}

.exam-header .header-escore-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
}

/* 家長簽章欄位（標籤） */
.exam-header .header-sign-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: bold;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.exam-header .header-sign-col .sign-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
    align-items: center;
    justify-content: center;
}

.exam-header .header-sign-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

/* 家長簽章填寫區 */
.exam-header .header-esign-col {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid #000;
    height: 50px;
}

.exam-header .header-esign-col .esign-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    border-left: 1px solid #000;
}

.exam-header .header-esign-col .field-label {
    padding: 6px 8px;
    white-space: nowrap;
}

/* ===== 大題區塊 ===== */
.exam-section {
    margin-bottom: 8px;
    margin-right: 10px;
}

.exam-section:last-child {
    margin-bottom: 0;
}

/* 大題標題 */
.exam-section-header {
    padding: 8px;
    margin-bottom: 4px;
    display: block;
}

.section-header {
    padding: 8px;
    margin-left: 10px;
    margin-bottom: 4px;
    display: block;
}

.exam-section-header .section-title,
.section-header .section-title {
    font-size: 14pt;
    font-weight: bold;
    display: inline;
}

.exam-section-header .section-score {
    font-size: 9pt;
    color: #666;
    margin-left: 8px;
    display: inline;
}

/* 大題說明 */
.exam-section-instruction,
.section-instruction {
    font-size: 11pt;
    color: #666;
    padding: 5px 8px;
    margin-left: 10px;
    line-height: 1.4;
    margin-bottom: 10px;
    display: block;
}

/* ===== 題目項目 ===== */
.exam-question-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3px;
}

.exam-question-item .item-number {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 3px;
}

/* ===== 答案格 ===== */
.answer-box {
    width: 28px;
    height: 28px;
    border: 1px solid #333;
    position: relative;
    background: white;
}

.answer-box.show-grid::before,
.answer-box.show-grid::after {
    content: '';
    position: absolute;
    background: #ccc;
}

.answer-box.show-grid::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.answer-box.show-grid::after {
    width: 1px;
    height: 100%;
    left: 50%;
}

/* ===== 句子題目（繼承直書） ===== */
.sentence-item {
    writing-mode: horizontal-tb;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 8px;
    min-width: 300px;
}

.sentence-item .item-number {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 5px;
}

.sentence-item .sentence-text {
    font-size: 13pt;
    line-height: 1.5;
}

/* 錯字標記 */
.wrong-char {
    color: #cc0000;
    text-decoration: underline;
}

/* 改正欄 */
.correction-box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.correction-label {
    font-size: 10pt;
    color: #666;
}

/* ===== 詞彙題（繼承直書） ===== */
.word-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
}

.word-item .item-number {
    font-size: 10pt;
    font-weight: bold;
}

.word-item .word-text {
    font-size: 13pt;
}

.word-item .arrow {
    font-size: 10pt;
    color: #666;
}

/* ===== 成語填空（繼承直書） ===== */
.idiom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 8px;
}

.idiom-item .item-number {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 5px;
}

.idiom-item .idiom-text {
    font-size: 14pt;
    line-height: 1.3;
}

.idiom-blank {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #333;
    vertical-align: middle;
    position: relative;
    background: white;
}

.idiom-blank::before,
.idiom-blank::after {
    content: '';
    position: absolute;
    background: #ccc;
}

.idiom-blank::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.idiom-blank::after {
    width: 1px;
    height: 100%;
    left: 50%;
}

/* ===== 答案線（造句用） ===== */
.answer-lines {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-top: 5px;
}

.answer-line {
    border-left: 1px solid #333;
    width: 22px;
    height: 100%;
    min-height: 80px;
}

/* ===== 詞庫區塊（繼承直書） ===== */
/* 詞庫容器 */
.word-bank-container {
    writing-mode: horizontal-tb;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 12px;
    padding: 5px 8px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 8px;
}

/* 詞庫欄：超過高度自動換欄（由右到左） */
.word-bank-column {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap-reverse;
    align-content: flex-end;
    max-height: 380px;
    gap: 0 10px;
}

/* 編號 */
.word-bank-column .word-bank-num {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    line-height: 1.2;
    margin-bottom: 2px;
}

/* 詞間間距 */
.word-bank-gap {
    height: 20px;
}

/* 每個字：國字左、注音右 */
.word-bank-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.word-bank-cell .wb-primary {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    line-height: 1.2;
}

.word-bank-cell .wb-zhuyin {
    font-family: 'BpmfZihiOnly', sans-serif;
    font-size: 14pt;
    line-height: 1;
    color: #444;
    margin-left: 1px;
}

/* ===== Modal 樣式 ===== */
#sectionEditModal .form-label {
    font-weight: 500;
}

#sectionEditModal .items-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 1rem;
    background: #f9f9f9;
}

#sectionEditModal .item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

#sectionEditModal .item-row:last-child {
    margin-bottom: 0;
}

/* ===== 響應式 ===== */
@media screen and (max-width: 992px) {
    .exam-preview-wrapper {
        padding: 10px;
    }

    .exam-preview {
        width: 100%;
        min-height: auto;
        padding: 10mm;
        font-size: 14pt;
    }
}

@media screen and (max-width: 768px) {
    .question-type-tabs {
        flex-direction: column;
    }

    .question-type-tabs .btn {
        width: 100%;
    }
}

/* ===== 列印樣式 (Wrapper Approach) ===== */
@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 隱藏所有非列印內容 */
    body > *:not(#print-container) {
        display: none !important;
    }

    /* 顯示列印容器 */
    #print-container {
        display: block !important;
    }

    /* 1. 分頁容器 (.print-page) */
    /* 這個 wrapper 負責定義實體頁面尺寸和分頁行為 */
    .print-page {
        width: 297mm;
        height: 210mm;
        overflow: hidden; /* 確保內容不會溢出實體頁面 */
        page-break-after: always;
        break-after: page;
    }

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

    /* 2. 內容容器 (.exam-layout) */
    /* 這個元素現在只負責內容的視覺呈現（邊框、內距等） */
    .print-page .exam-layout {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10mm !important;
        border: 2px solid #333 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        background: white !important;
        position: relative !important;
        /* 直書模式 - 與預覽一致 */
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        direction: ltr !important;
        /* 字型 - 與預覽一致 */
        font-family: 'EduKai', '標楷體', 'DFKai-SB', serif !important;
        font-size: 16pt !important;
        overflow: hidden !important;
    }
}

/* ===== 國字注音編輯器樣式 ===== */

/* 題目預覽 Modal */
.zhuyin-preview-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zhuyin-preview-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #fafafa;
}

.zhuyin-preview-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.zhuyin-preview-item-header .item-number {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
}

.zhuyin-preview-item-header .item-sentence {
    color: #666;
    font-size: 0.95em;
}

/* 字元格子容器 - 水平排列（預覽時使用橫書） */
.zhuyin-preview-chars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 換行分段標記 */
.zhuyin-preview-break {
    flex-basis: 100%;
    height: 8px;
    border-bottom: 1px dashed #ccc;
    margin: 4px 0;
}

/* 單一字元格 */
.zhuyin-preview-cell {
    display: flex;
    flex-direction: row;
}

.zhuyin-preview-cell.punctuation {
    margin: 0 2px;
}

/* 國字格 */
.zhuyin-preview-char-box {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.zhuyin-preview-char-box:hover {
    background: #e3f2fd;
    box-shadow: inset 0 0 0 2px #2196F3;
}

/* 已隱藏的國字 */
.zhuyin-preview-char-box.hidden-char {
    color: transparent;
    background: #ffebee;
}

.zhuyin-preview-char-box.hidden-char::before,
.zhuyin-preview-char-box.hidden-char::after {
    content: '';
    position: absolute;
    background: #ddd;
}

.zhuyin-preview-char-box.hidden-char::before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.zhuyin-preview-char-box.hidden-char::after {
    width: 1px;
    height: 100%;
    left: 50%;
}

/* 注音格 */
.zhuyin-preview-zhuyin-box {
    width: 20px;
    height: 40px;
    border: 1px solid #333;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: 'BpmfZihiOnly', sans-serif;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s;
}

.zhuyin-preview-zhuyin-box:hover {
    background: #fff3e0;
    box-shadow: inset 0 0 0 2px #FF9800;
}

/* 已隱藏的注音 */
.zhuyin-preview-zhuyin-box.zhuyin-hidden {
    color: transparent;
    background: #ffebee;
}

/* 已修改的注音 */
.zhuyin-preview-zhuyin-box.modified {
    background: #e8f5e9;
}

/* 標點符號格 */
.zhuyin-preview-cell.punctuation .zhuyin-preview-char-box {
    border: 1px dashed #ccc;
    background: transparent;
    cursor: default;
}

.zhuyin-preview-cell.punctuation .zhuyin-preview-char-box:hover {
    background: transparent;
    box-shadow: none;
}

.zhuyin-preview-cell.punctuation .zhuyin-preview-zhuyin-box {
    border: 1px dashed #ccc;
    border-left: none;
    background: transparent;
}

/* 注音編輯小彈窗 */
.zhuyin-edit-popup {
    position: absolute;
    z-index: 10000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    min-width: 180px;
}

.zhuyin-edit-popup-content {
    padding: 12px;
}

.zhuyin-edit-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.zhuyin-edit-char {
    width: 50px;
    height: 50px;
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    background: #fff;
}

.zhuyin-edit-zhuyin {
    width: 22px;
    height: 50px;
    border: 2px solid #333;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: 'BpmfZihiOnly', sans-serif;
    background: #fafafa;
}

.zhuyin-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zhuyin-modify-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.zhuyin-modify-section input {
    text-align: center;
    font-size: 18px;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
}

/* ===== 國字注音題型樣式（直書排版） ===== */

/* 題目容器（一個句子 = 一欄，直書） */
.question-column {
    display: inline-flex;
    flex-direction: column;
    margin-left: 15px;
    vertical-align: top;
    writing-mode: horizontal-tb;
}

/* 改錯字題型專用：相鄰題目留適當間距 */
.question-column.compact {
    margin-left: 8px;
}

/* 題號 */
.question-column .item-number {
    font-size: 10pt;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    writing-mode: horizontal-tb;
}

/* 字元容器（垂直排列） */
.chars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 單一字元 table */
.char-table {
    border-collapse: collapse;
    margin-bottom: 1px;
    writing-mode: horizontal-tb;
}

.char-table td {
    border: 1px solid #333;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

/* 國字格（左側）- 大小由 inline style 動態設定 */
.char-cell {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    background: white;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle;
    transition: background 0.2s;
}

/* 國字格 hover 效果（預覽中點擊設定填空） */
.char-cell:hover {
    background: #e3f2fd;
}

/* 隱藏的國字（顯示米字格） */
.char-cell.hidden {
    color: transparent;
    background: #f9f9f9;
}

.char-cell.hidden::before,
.char-cell.hidden::after {
    content: '';
    position: absolute;
    background: #ddd;
}

.char-cell.hidden::before {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.char-cell.hidden::after {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}

/* 注音格（右側）- 大小由 inline style 動態設定 */
.zhuyin-cell {
    font-family: 'BpmfZihiOnly', sans-serif;
    background: #fafafa;
    vertical-align: middle;
    transition: background 0.2s;
}

/* 注音格 hover 效果（預覽中點擊設定填空） */
.zhuyin-cell:hover {
    background: #fff3e0;
}

/* 隱藏的注音 */
.zhuyin-cell.hidden {
    color: transparent;
    background: #f9f9f9;
}

/* 空白補齊格（無邊框、無背景） */
.char-table.empty-cell .char-cell,
.char-table.empty-cell .zhuyin-cell {
    border-color: transparent;
    background: transparent;
}

/* 無邊框格子（用於改錯字等題型） */
.char-table.no-border td {
    border: none;
}

/* 答案括號（用於改錯字等題型，顯示在題目上方） */
.answer-bracket {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    text-align: center;
    margin-bottom: 3px;
    min-height: 80px;
}

.answer-bracket .bracket-top,
.answer-bracket .bracket-bottom {
    line-height: 1;
}

/* 句子排序題型 */
.so-answer-col {
    min-width: 60px;
}

.so-answer-col .so-answer-label {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    writing-mode: vertical-rl;
    white-space: nowrap;
    color: #999;
}

.so-answer-col .so-answer-space {
    min-height: 200px;
}

/* 造句空白書寫區 */
.dual-char.ms-blank-line {
    min-height: 24px;
}

/* 照樣寫短語題目間分隔 */
.sp-item-gap {
    display: inline-block;
    width: 12px;
}

/* ===== 緊湊雙字結構（不使用表格，用於改錯字等題型）===== */
.dual-char {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    writing-mode: horizontal-tb;  /* 內部橫書 */
    margin-bottom: 0;
}

.dual-char .char-primary {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 18pt;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.dual-char .char-secondary {
    font-family: 'BpmfZihiOnly', sans-serif;
    font-size: 14pt;
    line-height: 1;
    margin-left: -4px;
    padding: 0;
    color: #444;
}

/* 標點符號與一般字元使用相同樣式，不需額外設定 */

/* ===== 圈選正確：選項顯示 ===== */
.dual-char.choice {
    gap: 0;
}

.dual-char.choice .char-option {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    line-height: 1;
}

/* ===== 選詞填空：填空括號組 ===== */
.blank-bracket-group {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    writing-mode: horizontal-tb;
    margin-bottom: 0;
}

.blank-bracket-group .blank-bracket {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 14pt;
    line-height: 1;
}

/* 數字模式：固定高度括號（只需填一個數字） */
.blank-bracket-group.blank-fixed {
    height: 65px;
}

.blank-bracket-group.blank-fixed .blank-bracket {
    height: 65px;
}

.blank-bracket-group.blank-fixed .blank-bracket-chars {
    height: 65px;
}

.blank-bracket-group .blank-bracket-chars {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blank-bracket-group .blank-space {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    margin-bottom: 0;
}

.blank-bracket-group .blank-space .char-primary {
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    font-size: 18pt;
    line-height: 1.4;
    padding: 2px 0;
    margin: 0;
}

/* 選詞填空預覽：可點擊的字元 hover 效果 */
[data-wordsel-edit]:hover {
    background: #e3f2fd;
    border-radius: 3px;
}

/* 選詞填空預覽：括號區域 hover 效果 */
[data-wordsel-blank]:hover {
    background: #ffebee;
    border-radius: 3px;
}

/* 圈選預覽 Modal 中的字元格 */
.circle-preview-char-box {
    min-width: 40px;
    height: 40px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'EduKai', '標楷體', 'DFKai-SB', serif;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 4px;
}

.circle-preview-char-box:hover {
    background: #e3f2fd;
    box-shadow: inset 0 0 0 2px #2196F3;
}

.circle-preview-char-box.choice-active {
    background: #e8f5e9;
    border-color: #4CAF50;
    box-shadow: inset 0 0 0 2px #4CAF50;
}

.circle-preview-char-box .choice-display {
    font-size: 16px;
    white-space: nowrap;
}

/* 圈選 Modal 需要 relative 定位，讓彈窗正確定位 */
#circleCorrectPreviewModal .modal-content {
    position: relative;
}