/**
 * akapen/theme.css - 赤ペンスタイル（ヒントWeb版）
 *
 * 特性:
 * - カラフル、フレンドリー、子供向け
 * - 丸角、影エフェクト
 * - 変更可能なカラーセット
 */

/* ========================================
   カラーセット（変更可能）
   ======================================== */
:root {
    --akapen-primary: #e74c3c;
    --akapen-secondary: #f39c12;
    --akapen-accent: #3498db;
    --akapen-success: #27ae60;

    --akapen-bg-light: #fff9f0;
    --akapen-bg-hint: #fffaf5;
    --akapen-border-soft: #ffd9cc;

    /* 共通変数の上書き */
    --font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", sans-serif;
    --font-size-base: 12pt;
    --font-size-title: 18pt;
    --font-size-section: 13pt;
    --line-height: 1.6;

    --color-text: #333;
    --color-text-secondary: #666;
    --color-border: var(--akapen-primary);
    --color-border-light: var(--akapen-border-soft);
    --color-background: var(--akapen-bg-light);
}

/* ========================================
   基本レイアウト
   ======================================== */
body {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background: var(--akapen-bg-light);
}

/* ========================================
   ヘッダー
   ======================================== */
h1 {
    color: var(--akapen-primary);
    border-bottom: 3px solid var(--akapen-secondary);
    text-align: center;
}

/* ========================================
   ヒントボックス（カラフルカード）
   ======================================== */
.hint-box,
.hint-card {
    background: #fff;
    border: 2px solid var(--akapen-border-soft);
    border-left: 5px solid var(--akapen-primary);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(231, 76, 60, 0.1);
}

.hint-box:hover,
.hint-card:hover {
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.18);
    transform: translateY(-2px);
}

.hint-box h3 {
    color: var(--akapen-primary);
}

/* ========================================
   段階的ヒント
   ======================================== */
.hint-step {
    border-left-color: var(--akapen-secondary);
    background: var(--akapen-bg-hint);
    border-radius: 0 8px 8px 0;
}

.hint-step-number {
    color: var(--akapen-primary);
}

/* ========================================
   使い方セクション
   ======================================== */
.usage {
    border: 2px solid var(--akapen-border-soft);
    border-radius: 12px;
    background: #fff;
}

.usage h3 {
    color: var(--akapen-accent);
}

/* ========================================
   励ましメッセージ
   ======================================== */
.encouragement {
    border: 3px double var(--akapen-secondary);
    border-radius: 12px;
    background: var(--akapen-bg-hint);
}

.encouragement p {
    color: var(--akapen-primary);
    font-weight: bold;
}

/* ========================================
   一般アドバイス
   ======================================== */
.general-advice {
    border-color: var(--akapen-accent);
    border-radius: 10px;
    background: #f0f8ff;
}

.general-advice h3 {
    color: var(--akapen-accent);
}

/* ========================================
   科目別セクション
   ======================================== */
.subject-section h2 {
    color: var(--akapen-primary);
    border-bottom-color: var(--akapen-secondary);
}