/**
 * moshi/theme.css - 模試スタイル（Web専用）
 *
 * 特性:
 * - 1段組レイアウト（本番試験に近い形式）
 * - 硬めのフォント、フォーマルなデザイン
 * - しっかりした余白
 * - 難易度に応じた解答欄サイズ
 *
 * @media print ルールは一切含まない
 */

/* ========================================
   テーマ固有のCSS変数
   ======================================== */
:root {
    /* moshi固有の変数 */
    --moshi-question-spacing: 2em;
    --moshi-answer-small: 2cm;
    --moshi-answer-medium: 3cm;
    --moshi-answer-large: 4.5cm;
    --moshi-border-weight: 2px;

    /* 共通変数の上書き */
    --font-family: "Noto Serif JP", "Yu Mincho", "游明朝", "MS Mincho", serif;
    --font-size-base: 11pt;
    --font-size-title: 18pt;
    --font-size-section: 14pt;
    --font-size-question-number: 14pt;
    --line-height: 1.8;

    /* カラー（モノクロ） */
    --color-text: #000;
    --color-text-secondary: #333;
    --color-border: #000;
    --color-border-light: #333;
    --color-border-dashed: #666;
    --color-background: #fff;

    /* レイアウト（1段組） */
    --column-count: 1;

    /* 解答欄（難易度に応じて変更） */
    --answer-space-height: var(--moshi-answer-medium);
    --answer-space-height-small: var(--moshi-answer-small);
    --answer-space-height-medium: var(--moshi-answer-medium);
    --answer-space-height-large: var(--moshi-answer-large);
}

/* ========================================
   基本レイアウト
   ======================================== */
body {
    font-family: var(--font-family);
    max-width: 18cm;
    margin: 0 auto;
}

/* ========================================
   問題セクション（1段組強制）
   ======================================== */
.questions-section {
    column-count: 1 !important;
}

.questions-section.single-column {
    column-count: 1;
}

/* ========================================
   ヘッダー（フォーマル）
   ======================================== */
.exam-header {
    margin-bottom: 2em;
    text-align: center;
    border-bottom: var(--moshi-border-weight) solid var(--color-border);
    padding-bottom: 1em;
}

h1 {
    font-size: var(--font-size-title);
    font-weight: bold;
    letter-spacing: 0.2em;
    margin-bottom: 0.5em;
    border-bottom: none;
}

.metadata {
    font-size: 10pt;
    margin: 1em 0;
}

.metadata p {
    margin: 0.3em 0;
}

.name-field {
    margin: 1.5em 0;
    text-align: right;
    font-size: 12pt;
}

.name-field-label {
    margin-right: 0.5em;
}

.name-line {
    display: inline-block;
    border-bottom: var(--moshi-border-weight) solid var(--color-border);
    min-width: 10cm;
    height: 1.5em;
}

/* 受験番号欄 */
.examinee-number {
    margin: 0.5em 0;
    text-align: right;
}

.examinee-number .field-label {
    margin-right: 0.5em;
}

.examinee-number .field-boxes {
    display: inline-block;
}

.examinee-number .digit-box {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid var(--color-border);
    margin: 0 0.1em;
    text-align: center;
    vertical-align: middle;
}

/* ========================================
   注意事項（フォーマル）
   ======================================== */
.instructions {
    margin: 1.5em 0;
    padding: 1em;
    border: var(--moshi-border-weight) solid var(--color-border);
    font-size: 10pt;
}

.instructions h2 {
    font-size: 12pt;
    font-weight: bold;
    margin-bottom: 0.5em;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.3em;
}

.instructions ol {
    margin: 0.5em 0;
    padding-left: 2em;
}

.instructions li {
    margin: 0.3em 0;
    line-height: 1.6;
}

/* ========================================
   大問スタイル
   ======================================== */
.major-question {
    margin: var(--moshi-question-spacing) 0 1em 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5em;
}

.major-question-number {
    display: inline-block;
    border: var(--moshi-border-weight) solid var(--color-border);
    padding: 0.2em 0.6em;
    font-size: var(--font-size-question-number);
    font-weight: bold;
    margin-right: 0.5em;
    min-width: 1.5em;
    text-align: center;
}

.major-question-title {
    font-size: 13pt;
    font-weight: bold;
}

/* ========================================
   小問スタイル
   ======================================== */
.question {
    margin: 1.5em 0;
    padding: 0;
    background: transparent;
}

.question.sub-question {
    margin-left: 1em;
}

.sub-question-number {
    font-weight: bold;
    font-size: 12pt;
    margin-right: 0.5em;
}

.question-number {
    font-size: var(--font-size-question-number);
    font-weight: bold;
}

.question-meta {
    font-size: 8pt;
    color: var(--color-text-secondary);
    margin-left: 0.5em;
}

.question-text {
    margin: 0.5em 0;
    line-height: var(--line-height);
    text-indent: 1em;
}

/* ========================================
   解答欄（難易度別サイズ）
   ======================================== */
.answer-space {
    margin-top: 1em;
    border: var(--moshi-border-weight) solid var(--color-border);
    background: transparent;
}

.answer-space.small {
    height: var(--moshi-answer-small);
}

.answer-space,
.answer-space.medium {
    height: var(--moshi-answer-medium);
}

.answer-space.large {
    height: var(--moshi-answer-large);
}

.answer-label {
    font-size: 9pt;
    color: var(--color-text-secondary);
    margin-bottom: 0.2em;
}

.answer-fields {
    margin-top: 1em;
}

.answer-fields .field-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
    margin: 0.8em 0;
}

.answer-fields .field-label {
    font-size: 11pt;
    font-weight: bold;
    white-space: nowrap;
}

.answer-fields .field-line {
    border-bottom: 1px solid var(--color-border);
    flex: 1;
    min-width: 6cm;
    height: 1.5em;
}

.answer-fields .field-line.narrow {
    min-width: 3cm;
    flex: 0 0 auto;
}

.answer-fields .unit {
    font-size: 11pt;
}

/* ========================================
   選択肢（フォーマル）
   ======================================== */
.choices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em 2em;
    margin: 1em 0 1em 1em;
}

.choices-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin: 1em 0 1em 1em;
}

.choices-vertical {
    margin: 1em 0 1em 1em;
}

.choices-vertical .choice-item {
    margin: 0.5em 0;
}

.choice-item {
    line-height: 1.6;
}

.choice-marker {
    font-weight: bold;
    margin-right: 0.3em;
}

.choice-answer-field {
    margin-top: 1em;
    padding-top: 0.5em;
    border-top: 1px dotted var(--color-border-dashed);
}

.choice-answer-field .field-label {
    font-size: 10pt;
    margin-right: 0.5em;
}

.choice-answer-field .answer-box {
    border: 1px solid var(--color-border);
    width: 3cm;
    height: 1.5em;
    display: inline-block;
}

/* ========================================
   穴埋め形式
   ======================================== */
.inline-answer-box {
    display: inline-block;
    border: 1px solid var(--color-border);
    min-width: 3cm;
    height: 1.3em;
    vertical-align: middle;
    margin: 0 0.2em;
    background: transparent;
}

.blank-number {
    font-size: 8pt;
    vertical-align: super;
    margin-left: -0.5em;
}

/* ========================================
   図形問題
   ======================================== */
.geometry-figure {
    margin: 1em 0;
    text-align: center;
}

.geometry-figure svg {
    max-width: 100%;
    max-height: 6cm;
}

.figure-caption {
    font-size: 9pt;
    margin-top: 0.3em;
    color: var(--color-text-secondary);
}

/* ========================================
   表形式
   ======================================== */
.data-table {
    border-collapse: collapse;
    margin: 1em auto;
    font-size: 10pt;
}

.data-table th,
.data-table td {
    border: 1px solid var(--color-border);
    padding: 0.5em 1em;
    text-align: center;
}

.data-table th {
    font-weight: bold;
    background: transparent;
}

/* ========================================
   採点欄
   ======================================== */
.scoring-section {
    margin-top: 3em;
}

.scoring-section h2 {
    font-size: 14pt;
    border-bottom: var(--moshi-border-weight) solid var(--color-border);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

.scoring-table {
    width: 100%;
    border-collapse: collapse;
}

.scoring-table th,
.scoring-table td {
    border: 1px solid var(--color-border);
    padding: 0.5em;
    text-align: center;
    min-width: 2cm;
}

.scoring-table th {
    font-weight: bold;
}

.scoring-table .total-cell {
    font-weight: bold;
    font-size: 12pt;
}

/* ========================================
   フッター
   ======================================== */
.footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid var(--color-border-dashed);
    text-align: center;
    font-size: 9pt;
    color: var(--color-text-secondary);
}

/* ========================================
   スクリーン表示
   ======================================== */
@media screen {
    body {
        background: #f5f5f5;
        padding: 40px;
    }

    .exam-container {
        background: #fff;
        padding: 3cm;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        max-width: 21cm;
        margin: 0 auto;
    }

    .question {
        padding: 1em;
        margin: 1em 0;
        border-left: 3px solid #ddd;
    }

    .question:hover {
        border-left-color: #999;
    }
}