/* 共通スタイル - フォントとカラー定義 */

/* ========================================
   Google Fonts
   HTML側の<link>タグで読み込み（@importはレンダーブロッキングのため非推奨）
   ======================================== */

/* ========================================
   CSS Variables - Design Tokens
   ======================================== */
:root {
    /* ========================================
       Palette Tokens - Color Scales
       ======================================== */
    
    /* Green Scale */
    --green-1: #f6ffed;
    --green-2: #d9f7be;
    --green-3: #b7eb8f;
    --green-4: #95de64;
    --green-5: #73d13d;
    --green-6: #52c41a;
    --green-7: #389e0d;
    --green-8: #237804;
    --green-9: #135200;
    --green-10: #092b00;
    
    /* Red Scale */
    --red-1: #fff1f0;
    --red-2: #ffccc7;
    --red-3: #ffa39e;
    --red-4: #ff7875;
    --red-5: #ff4d4f;
    --red-6: #f5222d;
    --red-7: #cf1322;
    --red-8: #a8071a;
    --red-9: #820014;
    --red-10: #5c0011;
    
    /* Orange Scale */
    --orange-1: #fff7e6;
    --orange-2: #ffe7ba;
    --orange-3: #ffd591;
    --orange-4: #ffc069;
    --orange-5: #ffa940;
    --orange-6: #fa8c16;
    --orange-7: #d46b08;
    --orange-8: #ad4e00;
    --orange-9: #873800;
    --orange-10: #612500;
    
    /* Yellow Scale */
    --yellow-1: #feffe6;
    --yellow-2: #ffffb8;
    --yellow-3: #fffb8f;
    --yellow-4: #fff566;
    --yellow-5: #ffec3d;
    --yellow-6: #fadb14;
    --yellow-7: #d4b106;
    --yellow-8: #ad8b00;
    --yellow-9: #876800;
    --yellow-10: #614700;
    
    /* Blue Scale */
    --blue-1: #e6f7ff;
    --blue-2: #bae7ff;
    --blue-3: #91d5ff;
    --blue-4: #69c0ff;
    --blue-5: #40a9ff;
    --blue-6: #1890ff;
    --blue-7: #096dd9;
    --blue-8: #0050b3;
    --blue-9: #003a8c;
    --blue-10: #002766;
    
    /* Gray Scale */
    --gray-1: #ffffff;
    --gray-2: #fafafa;
    --gray-3: #f5f5f5;
    --gray-4: #f0f0f0;
    --gray-5: #d9d9d9;
    --gray-6: #bfbfbf;
    --gray-7: #8c8c8c;
    --gray-8: #595959;
    --gray-9: #434343;
    --gray-10: #262626;
    
    /* Gold Scale */
    --gold-1: #fffbe6;
    --gold-2: #fff1b8;
    --gold-3: #ffe58f;
    --gold-4: #ffd666;
    --gold-5: #ffc53d;
    --gold-6: #faad14;
    --gold-7: #d48806;
    --gold-8: #ad6800;
    --gold-9: #874d00;
    --gold-10: #613400;
    
    /* Dust Red Scale */
    --dustred-1: #fff1f0;
    --dustred-2: #ffccc7;
    --dustred-3: #ffa39e;
    --dustred-4: #ff7875;
    --dustred-5: #ff4d4f;
    --dustred-6: #f5222d;
    --dustred-7: #cf1322;
    --dustred-8: #a8071a;
    --dustred-9: #820014;
    --dustred-10: #5c0011;
    
    /* Volcano Scale */
    --volcano-1: #fff2e8;
    --volcano-2: #ffd8bf;
    --volcano-3: #ffbb96;
    --volcano-4: #ff9c6e;
    --volcano-5: #ff7a45;
    --volcano-6: #fa541c;
    --volcano-7: #d4380d;
    --volcano-8: #ad2102;
    --volcano-9: #871400;
    --volcano-10: #610b00;
    
    /* Lime Scale */
    --lime-1: #fcffe6;
    --lime-2: #f4ffb8;
    --lime-3: #eaff8f;
    --lime-4: #d3f261;
    --lime-5: #bae637;
    --lime-6: #a0d911;
    --lime-7: #7cb305;
    --lime-8: #5b8c00;
    --lime-9: #3f6600;
    --lime-10: #254000;
    
    /* Cyan Scale */
    --cyan-1: #e6fffb;
    --cyan-2: #b5f5ec;
    --cyan-3: #87e8de;
    --cyan-4: #5cdbd3;
    --cyan-5: #36cfc9;
    --cyan-6: #13c2c2;
    --cyan-7: #08979c;
    --cyan-8: #006d75;
    --cyan-9: #00474f;
    --cyan-10: #002329;
    
    /* Geek Blue Scale */
    --geekblue-1: #f0f5ff;
    --geekblue-2: #d6e4ff;
    --geekblue-3: #adc6ff;
    --geekblue-4: #85a5ff;
    --geekblue-5: #597ef7;
    --geekblue-6: #2f54eb;
    --geekblue-7: #1d39c4;
    --geekblue-8: #10239e;
    --geekblue-9: #061178;
    --geekblue-10: #030852;
    
    /* Purple Scale */
    --purple-1: #f9f0ff;
    --purple-2: #efdbff;
    --purple-3: #d3adf7;
    --purple-4: #b37feb;
    --purple-5: #9254de;
    --purple-6: #722ed1;
    --purple-7: #531dab;
    --purple-8: #391085;
    --purple-9: #22075e;
    --purple-10: #120338;
    
    /* Magenta Scale */
    --magenta-1: #fff0f6;
    --magenta-2: #ffd6e7;
    --magenta-3: #ffadd2;
    --magenta-4: #ff85c0;
    --magenta-5: #f759ab;
    --magenta-6: #eb2f96;
    --magenta-7: #c41d7f;
    --magenta-8: #9e1068;
    --magenta-9: #780650;
    --magenta-10: #520339;
    
    /* ========================================
       Semantic Tokens - Text
       ======================================== */
    --text-primary: var(--gray-10);         /* メインテキスト */
    --text-secondary: var(--gray-8);        /* 補足テキスト */
    --text-tertiary: var(--gray-7);         /* 無効状態のテキスト */
    --text-link: var(--blue-6);             /* リンクテキスト */
    --text-link-secondary: var(--gray-8);   /* 控えめなテキストリンク(パンくずリスト・戻るリンク等) */
    --text-success: var(--green-7);         /* 成功テキスト */
    --text-warning: var(--orange-7);        /* 警告テキスト */
    --text-error: var(--red-6);             /* エラーテキスト */
    
    /* ========================================
       Semantic Tokens - Background
       ======================================== */
    --bg-primary: var(--gray-1);            /* メイン背景(白) */
    --bg-secondary: var(--gray-2);          /* ページ背景 */
    --bg-tertiary: var(--gray-3);           /* 薄い背景、無効状態 */
    --bg-success: var(--green-1);           /* 成功メッセージ背景 */
    --bg-warning: var(--orange-1);          /* 警告メッセージ背景 */
    --bg-error: var(--red-1);               /* エラーメッセージ背景 */
    --bg-info: var(--blue-1);               /* お知らせ背景 */
    
    /* ========================================
       Semantic Tokens - Border
       ======================================== */
    --border-default: var(--gray-5);        /* 通常のボーダー */
    --border-strong: var(--gray-6);         /* 強めのボーダー */
    --border-light: var(--gray-4);          /* 薄いボーダー */
    --border-success: var(--green-5);       /* 成功ボーダー */
    --border-warning: var(--orange-5);      /* 警告ボーダー */
    --border-error: var(--red-5);           /* エラーボーダー */
    --border-info: var(--blue-5);           /* お知らせボーダー */
    
    /* ========================================
       Semantic Tokens - Button Primary
       ======================================== */
    --button-primary-bg: var(--green-6);        /* プライマリボタン背景 */
    --button-primary-text: var(--gray-1);       /* プライマリボタンテキスト */
    --button-primary-hover: var(--green-7);     /* プライマリボタンホバー */
    --button-primary-active: var(--green-8);    /* プライマリボタンアクティブ */
    
    /* ========================================
       Semantic Tokens - Button Secondary
       ======================================== */
    --button-secondary-bg: var(--gray-1);       /* セカンダリボタン背景 */
    --button-secondary-text: var(--green-6);    /* セカンダリボタンテキスト */
    --button-secondary-border: var(--green-6);  /* セカンダリボタンボーダー */
    --button-secondary-hover: var(--green-1);   /* セカンダリボタンホバー背景 */
    
    /* ========================================
       Semantic Tokens - Button Danger
       ======================================== */
    --button-danger-bg: var(--red-6);           /* 危険ボタン背景 */
    --button-danger-text: var(--gray-1);        /* 危険ボタンテキスト */
    --button-danger-hover: var(--red-7);        /* 危険ボタンホバー */
    
    /* ========================================
       Semantic Tokens - Button Info
       ======================================== */
    --button-info-bg: var(--blue-6);            /* 情報ボタン背景(承認済など) */
    --button-info-text: var(--gray-1);          /* 情報ボタンテキスト */
    --button-info-hover: var(--blue-7);         /* 情報ボタンホバー */
    
    /* ========================================
       Semantic Tokens - Button Disabled
       ======================================== */
    --button-disabled-bg: var(--gray-5);        /* 無効ボタン背景(承認待ちなど) */
    --button-disabled-text: var(--gray-7);      /* 無効ボタンテキスト */
    --button-disabled-border: var(--gray-5);    /* 無効ボタンボーダー */
    
    /* ========================================
       Semantic Tokens - Status
       ======================================== */
    --status-success: var(--green-6);           /* 成功状態 */
    --status-warning: var(--orange-6);          /* 警告状態 */
    --status-error: var(--red-6);               /* エラー状態 */
    --status-info: var(--blue-6);               /* お知らせ状態 */
    
    /* ========================================
       Semantic Tokens - Shadow
       ======================================== */
    --shadow-none: rgba(0, 0, 0, 0);            /* 影なし | x:0 y:0 blur:0 spread:0 */
    --shadow-xs: rgba(0, 0, 0, 0.05);           /* 極小の影 | x:0 y:1 blur:2 spread:0 */
    --shadow-sm: rgba(0, 0, 0, 0.10);           /* 小さい影(カード) | x:0 y:1 blur:3 spread:0 */
    --shadow-base: rgba(0, 0, 0, 0.10);         /* 基本の影 | x:0 y:4 blur:6 spread:-1 */
    --shadow-md: rgba(0, 0, 0, 0.10);           /* 中くらいの影 | x:0 y:10 blur:15 spread:-3 */
    --shadow-lg: rgba(0, 0, 0, 0.10);           /* 大きい影 | x:0 y:20 blur:25 spread:-5 */
    --shadow-xl: rgba(0, 0, 0, 0.25);           /* 特大の影 | x:0 y:25 blur:50 spread:-12 */
    --shadow-tag: rgba(0, 0, 0, 0.08);          /* タグ用の影 | x:0 y:2 blur:4 spread:0 */
    --shadow-badge: rgba(0, 0, 0, 0.12);        /* バッジ用の影 | x:0 y:2 blur:6 spread:0 */
    --shadow-focus: rgba(82, 196, 26, 0.20);    /* フォーカス時のアウトライン(green-6の20%) | x:0 y:0 blur:0 spread:3 */
    
    /* ========================================
       Component Tokens - Sidebar
       ======================================== */
    --sidebar-bg: var(--green-6);               /* 左サイドナビゲーション背景色 */
    --sidebar-text: var(--gray-1);              /* 左サイドナビゲーションテキスト色 */
    --sidebar-active: var(--green-8);           /* 左サイドナビゲーション選択中の背景色 */
    --sidebar-hover: var(--green-7);            /* 左サイドナビゲーションホバー背景色 */
    
    /* ========================================
       Component Tokens - Badge
       ======================================== */
    --badge-new: var(--yellow-6);               /* 新着バッジ背景色 */
    --badge-important: var(--orange-6);         /* 重要バッジ背景色 */
    --badge-overdue: var(--red-6);              /* 期限切れバッジ背景色 */
    --badge-complete: var(--green-6);           /* 完了バッジ背景色 */
    
    /* ========================================
       Component Tokens - Progress Bar
       ======================================== */
    --progress-bg: var(--gray-3);               /* 進捗バー背景色 */
    --progress-bar: var(--green-6);             /* 進捗バーの色 */
    
    /* ========================================
       Component Tokens - Constellation
       ======================================== */
    --constellation-bg-blue: #2C3E50;           /* コンステレーションカード背景(青系) */
    --constellation-bg-purple: #4A2C4B;         /* コンステレーションカード背景(紫系) */
    --constellation-bg-brown: #3D3226;          /* コンステレーションカード背景(茶系) */
    --constellation-bg-dark: #1F2937;           /* コンステレーションカード背景(ダーク系) */
    --constellation-star: var(--gray-1);        /* 星アイコン色 */
    --constellation-text: var(--gray-1);        /* カード内テキスト色 */
    
    /* ========================================
       Component Tokens - Panel
       ======================================== */
    --panel-header-gradient-start: #2C5282;     /* 詳細パネルヘッダーグラデーション開始色 */
    --panel-header-gradient-end: #2D9A6C;       /* 詳細パネルヘッダーグラデーション終了色 */
    --panel-bg: var(--gray-1);                  /* 詳細パネル背景色 */
    --panel-close-icon: var(--gray-1);          /* 詳細パネル閉じるアイコン色 */
    
    /* ========================================
       Component Tokens - Skill Tag
       ======================================== */
    --skill-tag-frontend: var(--green-6);       /* フロントエンドスキルタグ */
    --skill-tag-ui: var(--blue-6);              /* UI/UXスキルタグ */
    
    /* ========================================
       Component Tokens - Tag Variations
       ======================================== */
    --tag-orange: var(--orange-5);              /* オレンジタグ */
    --tag-volcano: var(--volcano-5);            /* 火山タグ */
    --tag-lime: var(--lime-6);                  /* ライムタグ */
    --tag-red: var(--red-6);                    /* レッドタグ */
    --tag-green: var(--green-6);                /* グリーンタグ */
    --tag-cyan: var(--cyan-6);                  /* シアンタグ */
    --tag-magenta: var(--magenta-6);            /* マゼンタタグ */
    --tag-blue: var(--blue-6);                  /* ブルータグ */
    --tag-geekblue: var(--geekblue-6);          /* ギークブルータグ */
    --tag-purple: var(--purple-6);              /* パープルタグ */
    
    /* ========================================
       Component Tokens - Activity Icon
       ======================================== */
    --activity-icon-success: var(--green-6);    /* 成功アクティビティアイコン(承認完了など) */
    --activity-icon-info: var(--blue-6);        /* 情報アクティビティアイコン(ファイルアップロードなど) */
    --activity-icon-bg-success: var(--green-1); /* 成功アイコン背景(薄い緑) */
    --activity-icon-bg-info: var(--blue-1);     /* 情報アイコン背景(薄い青) */
}

/* ========================================
   Font Families
   ======================================== */
body {
    font-family: 'Roboto', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* 日本語テキスト用 */
.text-ja,
body:lang(ja) {
    font-family: 'Zen Kaku Gothic New', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* 英数字テキスト用 */
.text-en,
body:lang(en) {
    font-family: 'Roboto', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ========================================
   Font Weights
   ======================================== */
.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

/* ========================================
   Word Break - レイアウト崩れ防止
   連続した文字列による横はみ出しを防ぐ
   ======================================== */
.text-break-all {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* カード・詳細ページのテキスト表示エリア */
.card-body,
.detail-content,
.news-detail-content,
.survey-detail-content,
.evaluation-detail-content {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* テーブルセル内のテキスト */
td {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* バリデーションエラーメッセージ（Bootstrap invalid-feedbackに依存しない独自クラス） */
.field-error-text {
    display: block !important;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* チェックボックスグループのバリデーションエラー表示 */
.checkbox-group.is-invalid-group {
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.5rem;
}