/**
 * サイト共通デザイントークン
 * 作成日: 2026-01-15
 * 更新日: 2026-01-17（カード/ボックス、スペーシング、フォーム要素追加）
 *
 * 全ページで共通利用するカラーパレット・タイポグラフィを定義
 * 使用方法: <link rel="stylesheet" href="/css/variables.css">
 *
 * デザインガイドライン: 計画・技術選定/Week27a_デザインガイドライン.md
 */

:root {
    /* ===========================================
       タイポグラフィ
       =========================================== */
    /* フォントファミリー */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;

    /* フォントサイズ */
    --font-size-base: 14px;
    --font-size-h1: 28px;
    --font-size-h2: 1.25rem;   /* 20px */
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 14px;
    --font-size-h6: 13px;
    --font-size-small: 12px;
    --font-size-xs: 11px;

    /* フォントウェイト */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* 行間 */
    --line-height-base: 1.6;
    --line-height-heading: 1.4;
    --line-height-tight: 1.3;

    /* セクションタイトル（H2/H3） */
    --section-title-size: 1.1rem;
    --section-title-weight: 600;
    --section-title-color: var(--color-primary-800);
    --section-title-border: 2px solid var(--color-primary-800);
    --section-title-padding-bottom: 0.5rem;
    --section-title-margin-bottom: 1rem;

    /* ===========================================
       ベースカラー（ダークネイビー MAX 800）
       =========================================== */
    --color-primary-800: #243b53;  /* ヘッダー背景（MAX） */
    --color-primary-700: #334e68;  /* ボタンプライマリ */
    --color-primary-600: #486581;  /* ボタンホバー */
    --color-primary-500: #627d98;  /* サブ要素 */
    --color-primary-400: #829ab1;  /* 薄いアクセント */
    --color-primary-300: #9fb3c8;
    --color-primary-200: #bcccdc;
    --color-primary-100: #d9e2ec;

    /* ===========================================
       ニュートラル（テキスト・背景）
       =========================================== */
    --color-neutral-900: #1e293b;
    --color-neutral-800: #334155;
    --color-neutral-700: #475569;
    --color-neutral-600: #64748b;
    --color-neutral-500: #94a3b8;
    --color-neutral-400: #cbd5e1;
    --color-neutral-300: #e2e8f0;
    --color-neutral-200: #f1f5f9;
    --color-neutral-100: #f8fafc;

    /* ===========================================
       ボタン
       =========================================== */
    --btn-primary-bg: #334e68;
    --btn-primary-hover: #243b53;
    --btn-secondary-bg: #627d98;
    --btn-secondary-hover: #486581;
    --btn-login-bg: #dc2626;
    --btn-login-hover: #b91c1c;
    --btn-evaluate-bg: linear-gradient(135deg, #f97316, #fb923c);
    --btn-evaluate-hover: linear-gradient(135deg, #ea580c, #f97316);

    /* ===========================================
       ランク別カラー（ゲームレアリティ風・金属感グラデーション）
       決定: S=暖色、特A/A/A-=金、B系=紫、C系=青、D=シルバー、E=黒
       全て水平グラデーション(90deg)、中央が明るい金属感
       =========================================== */
    /* S: 暖色（落ち着いた赤→オレンジ→アンバー→オレンジ→赤） */
    --rank-s-gradient: linear-gradient(90deg, #b91c1c 0%, #c2410c 20%, #d97706 40%, #e5a00d 50%, #d97706 60%, #c2410c 80%, #b91c1c 100%);
    --rank-s-bg: linear-gradient(90deg, #b91c1c 0%, #c2410c 20%, #d97706 40%, #e5a00d 50%, #d97706 60%, #c2410c 80%, #b91c1c 100%);
    --rank-s-color: #b91c1c;
    --rank-s-solid: #c2410c;
    --rank-s-glow: 0 0 20px rgba(194, 65, 12, 0.4);

    /* 特A: 金（中央は25%色より少し明るい程度） */
    --rank-tokua-gradient: linear-gradient(90deg, #8b6914 0%, #c9a227 25%, #d4b035 50%, #c9a227 75%, #8b6914 100%);
    --rank-tokua-bg: linear-gradient(90deg, #8b6914 0%, #c9a227 25%, #d4b035 50%, #c9a227 75%, #8b6914 100%);
    --rank-tokua-color: #92400e;
    --rank-tokua-solid: #c9a227;
    --rank-tokua-glow: 0 0 15px rgba(255, 215, 0, 0.5);

    /* A: 金系統 */
    --rank-a-gradient: linear-gradient(90deg, #7a5c10 0%, #b8860b 25%, #cca020 50%, #b8860b 75%, #7a5c10 100%);
    --rank-a-bg: linear-gradient(90deg, #7a5c10 0%, #b8860b 25%, #cca020 50%, #b8860b 75%, #7a5c10 100%);
    --rank-a-color: #92400e;
    --rank-a-solid: #daa520;
    --rank-a-glow: 0 0 10px rgba(218, 165, 32, 0.4);

    /* A-: さらに落ち着いた金 */
    --rank-a-minus-gradient: linear-gradient(90deg, #5c4510 0%, #9a7520 25%, #b08a28 50%, #9a7520 75%, #5c4510 100%);

    /* B+: マゼンタ系紫 */
    --rank-b-plus-gradient: linear-gradient(90deg, #965780 0%, #b86a9c 25%, #c680a8 50%, #b86a9c 75%, #965780 100%);

    /* B: 紫系統 */
    --rank-b-gradient: linear-gradient(90deg, #7d3363 0%, #a65a8a 25%, #b56d98 50%, #a65a8a 75%, #7d3363 100%);
    --rank-b-bg: linear-gradient(90deg, #7d3363 0%, #a65a8a 25%, #b56d98 50%, #a65a8a 75%, #7d3363 100%);
    --rank-b-color: #7d3363;
    --rank-b-solid: #933d75;

    /* B-: やや暗めの紫 */
    --rank-b-minus-gradient: linear-gradient(90deg, #682952 0%, #944a78 25%, #a55a85 50%, #944a78 75%, #682952 100%);

    /* C+: 青系統 */
    --rank-c-plus-gradient: linear-gradient(90deg, #1a5276 0%, #3498db 25%, #4aa8e5 50%, #3498db 75%, #1a5276 100%);

    /* C: 青系統 */
    --rank-c-gradient: linear-gradient(90deg, #1a4d6e 0%, #2980b9 25%, #3a90c8 50%, #2980b9 75%, #1a4d6e 100%);
    --rank-c-bg: linear-gradient(90deg, #1a4d6e 0%, #2980b9 25%, #3a90c8 50%, #2980b9 75%, #1a4d6e 100%);
    --rank-c-color: #1a5276;
    --rank-c-solid: #2980b9;

    /* C-: やや暗めの青 */
    --rank-c-minus-gradient: linear-gradient(90deg, #154360 0%, #2471a3 25%, #3580b0 50%, #2471a3 75%, #154360 100%);

    /* D: シルバー（データ不足） */
    --rank-d-gradient: linear-gradient(90deg, #5a5a5a 0%, #888888 25%, #9a9a9a 50%, #888888 75%, #5a5a5a 100%);
    --rank-d-bg: linear-gradient(90deg, #5a5a5a 0%, #888888 25%, #9a9a9a 50%, #888888 75%, #5a5a5a 100%);
    --rank-d-color: #5a5a5a;
    --rank-d-solid: #888888;

    /* E: 黒（エラー/真偽不明） */
    --rank-e-gradient: linear-gradient(90deg, #1a1a1a 0%, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%, #1a1a1a 100%);
    --rank-e-bg: linear-gradient(90deg, #1a1a1a 0%, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%, #1a1a1a 100%);
    --rank-e-color: #1a1a1a;
    --rank-e-solid: #3a3a3a;

    /* ランクなし */
    --rank-null-gradient: linear-gradient(90deg, #6b7280 0%, #9ca3af 50%, #6b7280 100%);
    --rank-null-bg: linear-gradient(90deg, #6b7280 0%, #9ca3af 50%, #6b7280 100%);
    --rank-null-color: #4b5563;
    --rank-null-solid: #9ca3af;

    /* ===========================================
       能力値バー（3段階: 赤→黄→青）
       閾値: 70% / 40%
       =========================================== */
    --ability-bar-high: #ef4444;           /* 赤 - 70%以上 */
    --ability-bar-high-gradient: linear-gradient(90deg, #ef4444, #dc2626);
    --ability-bar-mid: #fbbf24;            /* 黄 - 40-69% */
    --ability-bar-mid-gradient: linear-gradient(90deg, #fbbf24, #f59e0b);
    --ability-bar-low: #3b82f6;            /* 青 - 40%未満 */
    --ability-bar-low-gradient: linear-gradient(90deg, #3b82f6, #2563eb);

    /* ===========================================
       みんなの評価（5段階: 赤→橙→緑→青→灰）
       閾値: 90 / 80 / 60 / 40
       =========================================== */
    --eval-score-s: #ef4444;   /* 赤 - 90以上 */
    --eval-score-a: #f97316;   /* オレンジ - 80-89 */
    --eval-score-b: #22c55e;   /* 緑 - 60-79 */
    --eval-score-c: #3b82f6;   /* 青 - 40-59 */
    --eval-score-d: #6b7280;   /* グレー - 0-39 */

    /* ===========================================
       固定タグランク（5段階: 金→赤→青→灰→薄灰）
       =========================================== */
    --tag-rank-s: #fbbf24;
    --tag-rank-s-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --tag-rank-a: #ef4444;
    --tag-rank-a-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --tag-rank-b: #3b82f6;
    --tag-rank-b-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --tag-rank-c: #6b7280;
    --tag-rank-d: #9ca3af;

    /* ===========================================
       セマンティックカラー
       =========================================== */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #dc2626;
    --color-info: #3b82f6;
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;

    /* ===========================================
       スペーシング（8pxグリッド）
       =========================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;

    /* ===========================================
       角丸（border-radius）
       =========================================== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===========================================
       シャドウ（box-shadow）
       =========================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);

    /* ===========================================
       フォーム要素
       =========================================== */
    --form-border-color: #94a3b8;
    --form-border-focus: var(--color-primary-500);
    --form-focus-ring: 0 0 0 3px rgba(98, 125, 152, 0.1);
    --form-disabled-bg: #f1f5f9;
    --form-disabled-text: #94a3b8;
    --form-padding-x: 14px;
    --form-padding-y: 10px;

    /* ===========================================
       ブレークポイント（Tailwind CSS標準）
       sm: 640px, md: 768px, lg: 1024px, xl: 1280px
       =========================================== */
}

/* ===========================================
   グローバルベーススタイル
   =========================================== */

/* セクションタイトル（H2）統一スタイル */
.section-title {
    font-family: var(--font-family-base);
    font-size: var(--section-title-size, 1.25rem);
    font-weight: var(--section-title-weight, 700);
    color: var(--section-title-color, var(--color-primary-800, #243b53));
    margin: 0 0 var(--section-title-margin-bottom, 1rem) 0;
    padding-bottom: var(--section-title-padding-bottom, 0.5rem);
    border-bottom: var(--section-title-border, 3px solid var(--color-primary-800, #243b53));
    display: block; /* 横幅いっぱいの下線 */
}

/* ===========================================
   Sランク用スタイル（暖色グラデーション）
   =========================================== */
.rank-s-warm {
    background: var(--rank-s-gradient);
    box-shadow: var(--rank-s-glow);
}

/* ===========================================
   フォーム要素 共通スタイル
   =========================================== */

/* テキスト入力 */
.form-input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-neutral-900);
    background: white;
    border: 1px solid var(--color-neutral-400, #cbd5e1);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary-600, #486581);
    box-shadow: 0 0 0 3px rgba(72, 101, 129, 0.15);
}

.form-input:disabled {
    background: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

.form-input.error {
    border-color: var(--color-error);
}

.form-input::placeholder {
    color: var(--color-neutral-500);
}

/* セレクトボックス */
.form-select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-neutral-900);
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 16px;
    border: 1px solid var(--color-neutral-400, #cbd5e1);
    border-radius: 6px;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary-600, #486581);
    box-shadow: 0 0 0 3px rgba(72, 101, 129, 0.15);
}

.form-select:disabled {
    background-color: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

/* テキストエリア */
.form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-neutral-900);
    background: white;
    border: 1px solid var(--color-neutral-400, #cbd5e1);
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary-600, #486581);
    box-shadow: 0 0 0 3px rgba(72, 101, 129, 0.15);
}

/* ラベル */
.form-label {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    margin-bottom: 6px;
}

.form-label.required::after {
    content: " *";
    color: var(--color-error);
}

/* エラーメッセージ */
.form-error-message {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    margin-top: 4px;
}

/* 登録者情報 */
.form-registrant-info {
    font-size: 13px;
    color: var(--color-neutral-600);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--color-neutral-100);
    border-radius: 6px;
}

/* ヘルプテキスト */
.form-help-text {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-600);
    margin-top: 4px;
}

/* フォームグループ */
.form-group {
    margin-bottom: var(--spacing-md);
}

/* フォームセクション */
.form-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-800);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary-800);
}

.form-section-title .required {
    color: var(--color-error);
    font-size: var(--font-size-small);
    margin-left: 4px;
}

/* フォームグリッド（レスポンシブ） */
.form-grid {
    display: grid;
    gap: var(--spacing-md);
}

.form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.form-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
    .form-grid-2,
    .form-grid-3,
    .form-grid-4,
    .form-grid-5 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .form-grid-4,
    .form-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* フォームフィールド（ラベル+入力のセット） */
.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.form-field-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.form-field-inline .form-input,
.form-field-inline .form-select {
    width: auto;
    flex: 0 0 auto;
}

.form-field-inline .form-unit {
    color: var(--color-neutral-600);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

/* 入力サイズユーティリティ（数値入力用） */
.form-input-xs {
    width: 60px !important;
    flex: 0 0 60px !important;
}

.form-input-sm {
    width: 80px !important;
    flex: 0 0 80px !important;
}

.form-input-md {
    width: 100px !important;
    flex: 0 0 100px !important;
}

.form-input-lg {
    width: 150px !important;
    flex: 0 0 150px !important;
}

/* number入力のデフォルトサイズ */
input[type="number"].form-input {
    width: 100px;
    flex: 0 0 100px;
}

/* チェックボックスグループ */
.form-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.form-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
}

.form-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary-600);
}

/* フォームアクション */
.form-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding-top: 16px;
    border-top: 1px solid var(--color-neutral-200, #f1f5f9);
    margin-top: 24px;
}

/* ===========================================
   ボタン 共通スタイル
   =========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px 20px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* サイズ */
.btn-sm {
    padding: 4px 12px;
    font-size: var(--font-size-small);
}

.btn-lg {
    padding: 12px 32px;
    font-size: 0.95rem;
}

/* バリアント: プライマリ */
.btn-primary {
    background: var(--btn-primary-bg);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--btn-primary-hover);
}

/* バリアント: サクセス */
.btn-success {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #047857, #059669);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

/* バリアント: デンジャー */
.btn-danger {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

/* バリアント: アウトライン */
.btn-outline {
    background: transparent;
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-600);
}

.btn-outline:hover:not(:disabled) {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

/* バリアント: 評価 */
.btn-evaluate {
    background: var(--btn-evaluate-bg);
    color: white;
    border-radius: var(--radius-lg);
}

.btn-evaluate:hover:not(:disabled) {
    background: var(--btn-evaluate-hover);
}

/* バリアント: セカンダリ（アウトライン） */
.btn-secondary {
    background: #fff;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-primary-700);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-neutral-100);
}

/* バリアント: ゴースト（透明背景用） */
.btn-ghost {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}

/* ===========================================
   カード 共通スタイル
   =========================================== */

.card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.card-sm {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-neutral-300);
}

.card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-neutral-300);
    background: var(--color-neutral-100);
}

/* ===========================================
   セクション 共通スタイル
   =========================================== */

.section {
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
}

.section-title-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
    margin-bottom: var(--spacing-md);
}

.section-title-icon .pi {
    color: var(--color-primary-700);
}