/* ============================================================
   FILE: base.css
   SCOPE: :root変数, CSSリセット, タイポグラフィ基盤, ブレイクポイント定義
   OWNER: 全ページ共通の土台。全CSSファイルの最上位に読み込む。
   DEPENDS: なし（このファイルが最初に読み込まれる）
   NOTE: コンポーネント固有のスタイルはここに書かない。
         変数・リセット・共通ユーティリティのみ。
   ============================================================ */

/* ────────────────────────────────────────────
   1. デザイントークン（CSS変数）
   サイト全体の色・サイズ・速度を一元管理。
   各コンポーネントCSSはこの変数を参照する。
   ──────────────────────────────────────────── */
:root {
    /* === カラーパレット（ライトテーマ） === */
    --color-bg:           #ffffff;
    --color-bg-elevated:  #fafafa;
    --color-bg-card:      #ffffff;
    --color-bg-hover:     #f5f5f5;

    --color-border:       #e0e0e0;
    --color-border-light: #eeeeee;
    --color-border-dim:   #f0f0f0;

    --color-text:         #333333;
    --color-text-secondary: #666666;
    --color-text-muted:   #555555;
    --color-text-dim:     #666666;

    /* finance-style.css の旧変数をオーバーライド（WCAG AA準拠） */
    --text-dim:           #555555;

    /* ブランドカラー（ライトテーマ: ゴールド系） */
    --color-accent:       #c9a84c;      /* メインアクセント（ゴールド） */
    --color-accent-dim:   rgba(201, 168, 76, 0.12);
    --color-accent-glow:  rgba(201, 168, 76, 0.25);
    --color-accent-alt:   #8b6914;      /* ディープゴールド */

    --color-danger:       #d32f2f;      /* カードローン等の警告アクセント */
    --color-danger-dim:   rgba(211, 47, 47, 0.1);

    --color-gold:         #c9a84c;
    --color-pink:         #e0007a;      /* ヒナコのテーマカラー */

    /* === タイポグラフィ === */
    --font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Inter', sans-serif;
    --font-size-xs:   0.7rem;     /* 11.2px — 注釈・マイクロコピー */
    --font-size-sm:   0.85rem;    /* 13.6px — サブテキスト */
    --font-size-base: 1rem;       /* 16px   — 本文 */
    --font-size-lg:   1.25rem;    /* 20px   — 小見出し */
    --font-size-xl:   1.5rem;     /* 24px   — セクション見出し */
    --font-size-2xl:  2rem;       /* 32px   — ヒーロー見出し */

    /* === スペーシング === */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 60px;

    /* === レイアウト === */
    --max-width-site:    1200px;
    --max-width-content: 660px;
    --sidebar-width:     250px;

    /* === アニメーション === */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;

    /* === 角丸 === */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-full: 9999px;

    /* === Z-index管理 === */
    --z-dropdown:  100;
    --z-sticky:    500;
    --z-nav:       1000;
    --z-overlay:   10000;

    /* === finance-style.css 互換変数 ===
       Phase 3 で参照先を base.css 標準変数に統一後、削除予定 */
    --primary-green: #c9a84c;
    --dark-bg:       #ffffff;
    --glass-bg:      rgba(0, 0, 0, 0.02);
    --glass-border:  rgba(201, 168, 76, 0.2);
    --gold-accent:   #c9a84c;
    --text-white:    #333333;
    --anim-speed:    0.6s;
    --deep-green:    #8b6914;
}

/* ────────────────────────────────────────────
   2. ブレイクポイント定義（参照用コメント）
   サイト全体で統一する。これ以外のブレイクポイントは使用禁止。
   ──────────────────────────────────────────── */
/*
   BREAKPOINTS:
   --bp-sp-small:  380px   — iPhone SE等の極小スマホ
   --bp-sp:        768px   — スマホ（これ以下がモバイルレイアウト）
   --bp-tablet:    1024px  — タブレット（これ以下でサイドバー非表示）
   --bp-pc:        1025px  — PC（これ以上で3カラム表示）

   使用例:
   @media screen and (max-width: 768px)  { ... }  ← スマホ
   @media screen and (max-width: 1024px) { ... }  ← タブレット以下
   @media screen and (min-width: 1025px) { ... }  ← PC
*/

/* ────────────────────────────────────────────
   3. 最小限のリセット
   ブラウザ差異を吸収する。既存レイアウトを壊さない範囲に限定。
   ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ────────────────────────────────────────────
   4. 共通ユーティリティ
   ──────────────────────────────────────────── */

/* PC専用要素（タブレット以下で非表示） */
@media screen and (max-width: 1024px) {
    .pc-only {
        display: none;
    }
}

/* SP専用要素（PC以上で非表示） */
@media screen and (min-width: 1025px) {
    .sp-only {
        display: none;
    }
}

/* ────────────────────────────────────────────
   5. Body & HTML 基盤
   master.css + finance-style.css より移管（2026-03-04）
   ──────────────────────────────────────────── */
html, body {
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    overflow-x: clip;    /* hidden → clip: sticky を無効化しない（Chrome90+/FF81+/Safari16+） */
    width: 100%;
}

body {
    font-family: var(--font-family);
}

/* ────────────────────────────────────────────
   6. テキスト選択 & スクロールバー
   ──────────────────────────────────────────── */
::selection {
    background: var(--color-accent);
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-elevated);
}
::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
    border: 2px solid var(--color-bg-elevated);
}
::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* ────────────────────────────────────────────
   7. リンク基盤
   ──────────────────────────────────────────── */
a {
    transition: var(--transition-base);
}

/* ────────────────────────────────────────────
   8. レイアウト基盤（.container, .main-content）
   ──────────────────────────────────────────── */
.container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: var(--max-width-site);
    margin: 0 auto;
    padding: 0 20px;
}

main.main-content {
    flex: 1;
    width: 100%;
    max-width: 850px;
    padding: 40px 20px;
}

/* ────────────────────────────────────────────
   9. .intro-text（導入テキスト）
   ──────────────────────────────────────────── */
.intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444444;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(201, 168, 76, 0.05);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

/* ────────────────────────────────────────────
   10. レスポンシブ: タブレット以下（1024px以下）
   .container / .main-content のモバイル対応
   !important: 各ページのインライン<style>を確実に上書きするため維持
   ──────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
    .container {
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        max-width: none !important;
        overflow-x: hidden;
    }

    .main-content {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
        max-width: 100% !important;
    }
}

/* ────────────────────────────────────────────
   11. レスポンシブ: スマホ（768px以下）
   ──────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }

    .main-content,
    .main-content * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .main-content p,
    .main-content div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .main-content p {
        margin-bottom: 15px !important;
    }
}