/**
 * common.css - ヒントWeb閲覧用共通スタイル（全テーマ共通）
 *
 * Web（ブラウザ/レスポンシブ）表示専用
 * @media print ルールは一切含まない（印刷用は convert-hints-to-print が担当）
 */

/* ========================================
   CSS変数（テーマで上書き可能）
   ======================================== */
:root {
    /* フォント */
    --font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", sans-serif;
    --font-size-base: 11pt;
    --font-size-title: 16pt;
    --font-size-section: 12pt;
    --font-size-small: 10pt;
    --line-height: 1.4;

    /* カラー */
    --color-text: #000;
    --color-text-secondary: #666;
    --color-border: #333;
    --color-border-light: #888;
    --color-border-dashed: #ddd;
    --color-background: #fff;

    /* スペーシング */
    --spacing-xs: 0.2em;
    --spacing-sm: 0.3em;
    --spacing-md: 0.5em;
    --spacing-lg: 1em;
    --spacing-xl: 2em;
}

/* ========================================
   基本レイアウト
   ======================================== */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    color: var(--color-text);
    background: #f5f5f5;
}

/* ========================================
   ヘッダー
   ======================================== */
h1 {
    font-size: var(--font-size-title);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: #1e40af;
}

h2 {
    font-size: var(--font-size-section);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-text-secondary);
    padding-bottom: var(--spacing-xs);
    color: var(--color-text);
}

h3 {
    font-size: var(--font-size-section);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   レスポンシブ対応（モバイル）
   ======================================== */
@media screen and (max-width: 768px) {
    body {
        padding: 15px;
        font-size: 14px;
    }

    h1 {
        font-size: 18px;
    }
}

/* ========================================
   レスポンシブ対応（タブレット）
   ======================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        padding: 20px;
    }
}