/**
 * kumon/theme.css - 公文スタイル（Web専用）
 *
 * 特性:
 * - 2段組レイアウト
 * - リズミカルな配置（問題→回答スペースの繰り返し）
 * - シンプルなデザイン
 * - 反復学習向けのバランス配置
 *
 * @media print ルールは一切含まない
 */

/* ========================================
   テーマ固有のCSS変数
   ======================================== */
:root {
    /* kumon固有の変数 */
    --kumon-question-spacing: 1.2em;
    --kumon-answer-margin-top: 0.5em;
    --kumon-rhythm-separator: 1px dashed #ddd;

    /* 共通変数の上書き */
    --font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", sans-serif;
    --font-size-base: 11pt;
    --font-size-title: 16pt;
    --font-size-question-number: 12pt;
    --line-height: 1.5;

    /* カラー（シンプルなモノトーン） */
    --color-text: #000;
    --color-text-secondary: #666;
    --color-border: #333;
    --color-border-light: #888;
    --color-border-dashed: #ddd;
    --color-background: #fff;

    /* レイアウト */
    --column-count: 2;
    --column-gap: 1.2em;

    /* 解答欄 */
    --answer-space-height: 1.8cm;
    --answer-space-height-medium: 2.5cm;
    --answer-space-height-large: 3.5cm;
}

/* ========================================
   問題セクション
   ======================================== */
.questions-section {
    column-count: 2;
    column-gap: var(--column-gap);
    column-rule: none;
}

/* ========================================
   問題スタイル（リズミカルな配置）
   ======================================== */
.question {
    margin: var(--kumon-question-spacing) 0;
    padding: 0.4em 0;
    border-bottom: var(--kumon-rhythm-separator);
    background: transparent;
}

.question:last-child {
    border-bottom: none;
}

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

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

.question-text {
    margin: 0.4em 0;
    line-height: 1.6;
}

/* ========================================
   解答欄（リズム感を保つ）
   ======================================== */
.answer-space {
    height: var(--answer-space-height);
    margin-top: var(--kumon-answer-margin-top);
    border: 1px solid var(--color-border-light);
    background: transparent;
}

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

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

.answer-fields .answer-space {
    width: 100%;
    flex: 0 0 100%;
    margin: 0.5em 0;
}

.answer-fields {
    margin-top: var(--kumon-answer-margin-top);
    display: flex;
    gap: 1em;
    align-items: center;
    flex-wrap: wrap;
}

.answer-fields .field-row {
    display: flex;
    align-items: center;
    gap: 0.3em;
    margin: 0.3em 0;
}

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

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

.answer-fields .field-line.narrow {
    min-width: 2cm;
}

.answer-fields .unit {
    font-size: 10pt;
    margin-left: 0.2em;
}

/* ========================================
   選択肢（コンパクトに）
   ======================================== */
.choices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3em 1em;
    margin: 0.4em 0;
}

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

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

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

.choice-answer-field {
    margin-top: 0.4em;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.choice-answer-field .field-label {
    font-size: 10pt;
}

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

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

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

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

/* ========================================
   ヘッダー（シンプル）
   ======================================== */
.exam-header {
    column-span: all;
    margin-bottom: 0.8em;
}

h1 {
    font-size: var(--font-size-title);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.3em;
    margin-bottom: 0.5em;
}

.metadata {
    font-size: 9pt;
    margin-bottom: 0.5em;
}

.name-field {
    margin: 0.5em 0;
}

.name-line {
    border-bottom: 1px solid var(--color-border);
    min-width: 6cm;
}

/* ========================================
   注意事項（コンパクト）
   ======================================== */
.instructions {
    column-span: all;
    font-size: 9pt;
    padding: 0.3em 0;
    margin-bottom: 0.5em;
    border-bottom: 1px solid var(--color-border-dashed);
}

.instructions ol {
    margin: 0.2em 0;
    padding-left: 1.5em;
}

.instructions li {
    margin: 0.1em 0;
}

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

    .question {
        background: #fff;
        padding: 0.8em;
        margin: 0.8em 0;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border-bottom: none;
    }
}