/*
 * デザインシステム.mdで定義されたCSSカスタムプロパティの一元管理。
 * Spring側の画面と同一トークンを使用し、ログイン前後で見た目を揃える。値の直書きは禁止。
 *
 * ヘッダー共通トークン（--header-height, --color-header, --color-header-text,
 * --font-family, --font-title-header）は、Spring側
 * src/main/resources/static/css/common.css の同名トークンと値を必ず一致させること。
 * 一方だけ変更してズレた場合は HeaderDesignTokenConsistencyTest（mvn test）がFailする。
 */
/* origin/TSK-0013系ブランチの完成UIに合わせ、見出し横のアイコン表示にMaterial Iconsを使用する */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    /* カラー */
    --color-primary: #2563eb;
    --color-primary-start: #2563eb;
    --color-primary-end: #4f46e5;
    --color-primary-hover: #1d4ed8;
    --color-header: #0b1f3a;
    --color-header-text: #ffffff;
    /* --color-header-hover-overlay（Spring側にあるハンバーガーhover用トークン）は、
       ログイン画面にハンバーガーメニューボタン自体が存在しないため未使用・未定義 */
    --color-text-main: #1f2a44;
    --color-text-sub: #6b7280;
    --color-border: #d7dde8;
    --color-hover-bg: #f1f5f9;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    --color-bg-gradient: linear-gradient(135deg, #e8eefc 0%, #dfe8fb 100%);
    --color-card-bg: #ffffff;
    --color-error: #dc2626;
    --color-error-bg: #fff8f8;
    --color-error-icon-bg: #fde8e8;
    --color-success: #16a34a;
    --color-warning: #b45309;
    --color-warning-bg: #fef3e2;
    --color-info-bg: #eef2f9;
    --color-focus-ring: #93c5fd;
    --color-primary-bg: #e6efff;
    --color-dialog-overlay: rgba(15, 25, 45, .45);
    --color-segment-bg: #eef2f9;
    --color-disabled-text: #94a3b8;

    /* 角丸・影 */
    --radius-card: 12px;
    --radius-el: 8px;
    --shadow-card: 0 18px 40px rgba(20, 40, 80, .12);

    /* 余白 */
    --gap-unit: 12px;
    --card-padding: 20px 24px;
    --grid-gap: 24px;
    --stage-padding: 32px 40px;
    --stage-padding-mobile: 24px 20px;
    --field-error-gap: 2px;
    --field-error-height: 16px;
    /* 注意事項／お知らせがカード内スクロールで吸収しきれず潰れて見えなくなるのを防ぐ最低保証高さ */
    --scroll-area-min-height: clamp(3rem, 8vh, 4.5rem);

    /* サイズ */
    /* #kc-header（header.css）の min-height と一致させる：
       main領域の高さを calc(100vh - var(--header-height)) で確保するために参照する */
    --header-height: 60px;
    --size-touch-target-min: 40px;
    --size-icon-badge: 32px;
    --accent-border-width: 4px;

    /* タイポグラフィ */
    --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-title-header: 700 16px/1.4 var(--font-family);
    --font-card-title-size: 16px;
    --font-card-title-weight: 700;
    --font-card-title: 700 16px/1.4 var(--font-family);
    --font-label: 700 13px/1.4 var(--font-family);
    --font-body: 400 13px/1.6 var(--font-family);
    --font-button: 700 14px/1.4 var(--font-family);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}