/**
 * kakekko-common.css
 * 忍者ナイン 全画面共通テーマスタイルシート
 *
 * @see .github/instructions/uiux-policy.instructions.md
 * @version 1.1.0
 * @created 2026-06-25
 * @updated 2026-07-11 Section 24 モダンテーマ層を追加（@importは仕様上ファイル先頭に置く）
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ==========================================================================
   1. CSS Custom Properties（テーマカラー）
   ========================================================================== */
:root {
    /* ブランドカラー */
    --kakekko-primary: #667eea;
    --kakekko-primary-end: #764ba2;
    --kakekko-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* セマンティックカラー */
    --kakekko-success: #27ae60;
    --kakekko-danger: #e74c3c;
    --kakekko-warning: #f39c12;
    --kakekko-info: #3498db;

    /* テキスト */
    --kakekko-text: #333;
    --kakekko-text-muted: #6c757d;

    /* 背景 */
    --kakekko-bg-light: #f8f9fa;
    --kakekko-border: #e9ecef;

    /* シャドウ */
    --kakekko-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --kakekko-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    --kakekko-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    --kakekko-shadow-popup: 0 10px 40px rgba(0, 0, 0, 0.3);

    /* ボーダー半径 */
    --kakekko-radius: 15px;
    --kakekko-radius-sm: 8px;
    --kakekko-radius-pill: 25px;
}

/* ==========================================================================
   2. ベーススタイル
   ========================================================================== */
body {
    font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
    font-size: 15px;
    color: var(--kakekko-text);
    line-height: 1.6;
}

/* ==========================================================================
   3. ヘッダー・ナビゲーション
   ========================================================================== */

/* ロール識別バッジ */
.kakekko-role-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3em 0.8em;
    border-radius: var(--kakekko-radius-pill);
    color: white;
}

.kakekko-role-badge-instructor {
    background: #17a2b8;
}

.kakekko-role-badge-admin {
    background: #28a745;
}

/* ナビバー内のボタン群 */
.kakekko-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ==========================================================================
   4. カード（.kakekko-card）
   ========================================================================== */
.kakekko-card {
    border: none;
    border-radius: var(--kakekko-radius);
    box-shadow: var(--kakekko-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: white;
}

.kakekko-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kakekko-shadow-lg);
}

.kakekko-card-header {
    background: var(--kakekko-gradient);
    color: white;
    padding: 1.2rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.kakekko-card-body {
    padding: 1.5rem;
}

/* ==========================================================================
   5. 統計カード（.kakekko-stat-card）
   ========================================================================== */
.kakekko-stat-card {
    text-align: center;
    padding: 1.2rem;
    border-radius: 12px;
    background: white;
    border: 1px solid var(--kakekko-border);
    box-shadow: var(--kakekko-shadow-sm);
    transition: transform 0.2s ease;
}

.kakekko-stat-card:hover {
    transform: translateY(-2px);
}

.kakekko-stat-number {
    font-size: 2rem;
    font-weight: 700;
    background: var(--kakekko-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kakekko-stat-label {
    font-size: 0.85rem;
    color: var(--kakekko-text-muted);
    margin-top: 0.25rem;
}

/* ==========================================================================
   6. テーブル
   ========================================================================== */
.kakekko-thead {
    background: var(--kakekko-gradient);
    color: white;
}

.kakekko-thead th {
    border: none;
    font-weight: 600;
    padding: 0.8rem 1rem;
}

/* テーブルセルの余白を広げて視認性向上 */
.table td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* ==========================================================================
   7. ボタン
   ========================================================================== */
.kakekko-btn-primary {
    background: var(--kakekko-gradient);
    color: white;
    border: none;
    border-radius: var(--kakekko-radius-pill);
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kakekko-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    color: white;
}

/* ==========================================================================
   8. フッター
   ========================================================================== */
.kakekko-footer {
    padding: 1rem 0 2rem;
    color: var(--kakekko-text-muted);
    font-size: 0.9rem;
}

.kakekko-footer hr {
    margin: 1.5rem 0;
}

.kakekko-footer a {
    color: var(--kakekko-primary);
    text-decoration: none;
}

.kakekko-footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   9. フラッシュポップアップ（flash-popup.js と連動）
   ========================================================================== */
.flash-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.flash-popup {
    background: white;
    border-radius: var(--kakekko-radius);
    box-shadow: var(--kakekko-shadow-popup);
    max-width: 400px;
    width: 90%;
    padding: 25px;
    text-align: center;
    animation: flashPopupIn 0.3s ease-out;
}

@keyframes flashPopupIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.flash-popup-header {
    margin-bottom: 15px;
}

.flash-popup-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
}

.flash-popup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kakekko-text);
}

.flash-popup-body {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    white-space: pre-line;
}

.flash-popup-close {
    background: var(--kakekko-gradient);
    color: white;
    border: none;
    border-radius: var(--kakekko-radius-pill);
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flash-popup-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.flash-popup-error .flash-popup-title { color: var(--kakekko-danger); }
.flash-popup-success .flash-popup-title { color: var(--kakekko-success); }
.flash-popup-info .flash-popup-title { color: var(--kakekko-info); }

/* ==========================================================================
   10. インストラクター テーマ
   ========================================================================== */
.instructor-card {
    border: 1px solid #bee5eb;
    border-radius: var(--kakekko-radius-sm);
    padding: 20px;
    margin-bottom: 15px;
    background: #f0f9ff;
}

.instructor-card h5 {
    color: #17a2b8;
    margin-bottom: 15px;
}

.stat-card {
    text-align: center;
    padding: 15px;
    border-radius: var(--kakekko-radius-sm);
    background: white;
    border: 1px solid var(--kakekko-border);
    margin-bottom: 10px;
}

.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    background: var(--kakekko-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--kakekko-text-muted);
}

/* ==========================================================================
   11. メニューカード（Member/menu 等）
   ========================================================================== */
.kakekko-menu-card {
    border: none;
    border-radius: var(--kakekko-radius);
    box-shadow: var(--kakekko-shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: white;
    display: block;
    height: 100%;
}

.kakekko-menu-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--kakekko-shadow-lg);
    text-decoration: none;
    color: white;
}

.kakekko-menu-card-body {
    padding: 2rem 1.5rem;
    text-align: center;
}

.kakekko-menu-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    display: block;
}

.kakekko-menu-card-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.kakekko-menu-card-desc {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* メニューカード グラデーションバリエーション（Member/menu.php 対応） */
.kakekko-menu-gradient-lessons     { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.kakekko-menu-gradient-calendar    { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.kakekko-menu-gradient-bookings    { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.kakekko-menu-gradient-profile     { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.kakekko-menu-gradient-growth      { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.kakekko-menu-gradient-makeup      { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.kakekko-menu-gradient-referral    { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
.kakekko-menu-gradient-exchange    { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }

/* ==========================================================================
   11b. グラデーション汎用ユーティリティ
   ========================================================================== */

/* ヒーローバナーカード（管理画面ページヘッダー等） */
.kakekko-hero-banner {
    background: var(--kakekko-gradient);
    color: white;
    border-radius: var(--kakekko-radius);
    padding: 2rem;
}

.kakekko-hero-banner h2,
.kakekko-hero-banner h3,
.kakekko-hero-banner h4 {
    color: white;
    margin: 0;
    font-weight: 700;
}

/* グラデーション CTA ボタン（大） */
.kakekko-btn-cta {
    background: var(--kakekko-gradient);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.kakekko-btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
    text-decoration: none;
}

/* グラデーション ナビボタン（小） */
.kakekko-btn-nav {
    background: var(--kakekko-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
}

.kakekko-btn-nav:hover {
    color: white;
    opacity: 0.9;
}

/* 認証ページ フォームカードラッパー */
.kakekko-auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.kakekko-auth-card {
    background: white;
    border-radius: var(--kakekko-radius);
    box-shadow: var(--kakekko-shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 500px;
}

/* ==========================================================================
   12. 管理画面固有
   ========================================================================== */

/* PC/スマホ切り替え（Admin/index 等） */
.force-show { display: block !important; }
.force-hide { display: none !important; }

/* スティッキーヘッダー */
.admin-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    padding: 0.75rem 0;
}

/* --- スティッキーヘッダー内の共通サブコンポーネント --- */

/* フィルターピル（members, Member/index 等） */
.admin-sticky-header .filter-pills .btn {
    margin-right: .25rem;
    margin-bottom: .25rem;
    border-radius: 20px;
    font-size: .8rem;
}

/* 統計バッジ（members, Inquiry/index 等） */
.admin-sticky-header .stat-badges .badge {
    font-size: .85rem;
    padding: .35em .6em;
    margin-right: .25rem;
    margin-bottom: .25rem;
}

/* フィルター行（BookingHistory 等） */
.admin-sticky-header .filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.admin-sticky-header .filter-row > * {
    margin-right: .5rem;
    margin-bottom: .25rem;
}

.admin-sticky-header .filter-row .form-control {
    font-size: .85rem;
    height: calc(1.8rem + 2px);
}

.admin-sticky-header .filter-row label {
    font-size: .75rem;
    margin-bottom: 0;
}

/* テーブル vertical-align（member-table, inquiry-table 等） */
.member-table th,
.member-table td,
.inquiry-table th,
.inquiry-table td,
.correlation-table th,
.correlation-table td {
    vertical-align: middle;
}

/* --- ソートリンク（テーブルヘッダ内） --- */
.sort-link {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link:hover {
    color: #ffc107;
    text-decoration: none;
}

.sort-arrow {
    font-size: .7rem;
    margin-left: .2rem;
    opacity: .5;
}

.sort-arrow.active {
    opacity: 1;
}

/* --- 問い合わせカード（モバイル表示用） --- */
.inquiry-card {
    border-left: 4px solid #6c757d;
    margin-bottom: .5rem;
}

.inquiry-card.status-0 { border-left-color: #dc3545; }
.inquiry-card.status-1 { border-left-color: #ffc107; }
.inquiry-card.status-2 { border-left-color: #17a2b8; }
.inquiry-card.status-3 { border-left-color: #28a745; }
.inquiry-card.status-4 { border-left-color: #6c757d; }
.inquiry-card.status-9 { border-left-color: #28a745; }
.inquiry-card.status-X { border-left-color: #343a40; }

/* --- ご意見箱カード（モバイル表示用） --- */
.opinion-card {
    border-left: 4px solid #6c757d;
}

.opinion-card.status-new        { border-left-color: #007bff; }
.opinion-card.status-in_progress { border-left-color: #ffc107; }
.opinion-card.status-resolved   { border-left-color: #28a745; }
.opinion-card.status-closed     { border-left-color: #6c757d; }

/* --- フィードバックカード --- */
.feedback-card {
    border-left: 4px solid #6c757d;
}

.feedback-card.published   { border-left-color: #28a745; }
.feedback-card.unpublished { border-left-color: #ffc107; }

.score-stars {
    color: #f0ad4e;
}

/* --- KPIカード（dashboard, analytics） --- */
.kpi-card {
    border-left: 4px solid #007bff;
}

.kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.kpi-card .kpi-label {
    font-size: .85rem;
    color: #6c757d;
}

/* --- チャートコンテナ --- */
.chart-container {
    position: relative;
    height: 300px;
}

.chart-container-lg {
    position: relative;
    height: 400px;
}

/* --- セクションタイトル（analytics） --- */
.section-title {
    border-bottom: 2px solid #007bff;
    padding-bottom: .3rem;
    margin-bottom: 1rem;
}

/* --- レート進捗バー（analytics） --- */
.rate-bar {
    height: 20px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
}

.rate-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .5s ease;
}

/* --- 辞退詳細リスト（analytics） --- */
.decline-detail {
    max-height: 200px;
    overflow-y: auto;
    font-size: .85rem;
}

.decline-detail li {
    padding: 2px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* --- 管理画面レスポンシブ上書き --- */
@media (max-width: 767.98px) {
    .admin-sticky-header h5 {
        font-size: 1rem;
    }

    .admin-sticky-header .stat-badges .badge {
        font-size: .75rem;
    }

    .kpi-card .kpi-value {
        font-size: 1.5rem;
    }

    .chart-container {
        height: 250px;
    }

    .chart-container-lg {
        height: 300px;
    }
}

/* 問い合わせアラートバナー */
.inquiry-alert-banner { animation: pulse-border 2s infinite; }
@keyframes pulse-border {
    0%, 100% { border-color: #dc3545; }
    50%      { border-color: #ffc107; }
}

/* 会場カードヘッダー（紫グラデーション） */
.admin-place-header {
    background: var(--kakekko-gradient);
    color: white;
    padding: 1.5rem;
}

.admin-place-header h4 {
    margin: 0;
    font-weight: bold;
}

/* 一括コピーモーダル：曜日ラベル */
.dow-label {
    padding: 4px 10px;
    background: #e9ecef;
    border-radius: 15px;
    font-size: 0.85rem;
    cursor: pointer;
}

.dow-label:has(input:checked) {
    background: #007bff;
    color: white;
}

/* 一括コピーモーダル：日付アイテム */
.bulk-date-item {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.bulk-date-item:last-child { border-bottom: none; }

/* ページヘッダー（スティッキー） */
.kakekko-page-header {
    background: var(--kakekko-gradient);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--kakekko-radius);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kakekko-page-header h4,
.kakekko-page-header h3 {
    margin: 0;
    font-weight: 700;
    color: white;
}

/* ==========================================================================
   13. レスポンシブ（全レイアウト共通）
   ========================================================================== */
@media (max-width: 768px) {
    /* ヘッダー */
    header h1 {
        font-size: 1.2rem;
        text-align: center;
    }

    header .alert {
        padding: 0.5rem;
        font-size: 0.85rem;
    }

    header .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
        margin: 2px !important;
    }

    header .float-right {
        float: none !important;
        display: block;
        margin-top: 5px;
        text-align: center;
    }

    /* テーブル */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
    }

    table th,
    table td {
        font-size: 0.85rem;
        padding: 0.5rem;
        word-break: break-word;
        white-space: normal;
    }

    /* フォーム */
    .form-inline {
        flex-wrap: wrap;
    }

    .form-inline > * {
        margin-bottom: 0.5rem;
    }

    /* ボタン */
    .btn-group-responsive {
        flex-wrap: wrap;
    }

    .btn-group-responsive .btn {
        margin: 2px;
    }

    /* カード */
    .card-header h4 {
        font-size: 1.1rem;
    }

    /* 統計カード */
    .stat-card .stat-number,
    .kakekko-stat-number {
        font-size: 1.5rem;
    }

    /* メニューカード */
    .kakekko-menu-card-body {
        padding: 1.5rem 1rem;
    }

    .kakekko-menu-card-icon {
        font-size: 2rem;
    }

    /* ナビボタン群 */
    .kakekko-nav-buttons {
        justify-content: center;
    }
}

/* ===== Section 14: Auth共通スタイル (.auth-*) ===== */
/* トレーサビリティ: Auth/login.php, Auth/forgot_password.php, Auth/reset_password.php,
   Auth/verify_email.php, Auth/forgot_password_sent.php で共有
   デフォルトアクセント: Red (#ff6b6b → #ee5a24) */

/* --- 14-1: カスタムプロパティとコンテナ --- */
.auth-container {
    --auth-accent: #ff6b6b;
    --auth-accent-end: #ee5a24;
    --auth-accent-gradient: linear-gradient(135deg, var(--auth-accent) 0%, var(--auth-accent-end) 100%);
    --auth-btn-gradient: var(--auth-accent-gradient);

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--kakekko-gradient);
    padding: 20px;
}

/* --- 14-2: カード --- */
.auth-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}

.auth-card--wide {
    max-width: 500px;
}

/* --- 14-3: ヘッダー --- */
.auth-header {
    background: var(--auth-accent-gradient);
    color: white;
    padding: 30px 20px;
    text-align: center;
}

.auth-title {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.auth-subtitle {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* --- 14-4: ボディ --- */
.auth-body {
    padding: 30px 20px;
}

.auth-body--spacious {
    padding: 40px 30px;
}

/* --- 14-5: フォーム --- */
.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.auth-form .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e5e9;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.auth-form .form-control:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.auth-container .form-actions {
    margin-top: 25px;
}

/* --- 14-6: ボタン --- */
.auth-container .btn-primary,
.auth-container .btn-auth {
    background: var(--auth-btn-gradient);
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    color: white;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.auth-container .btn-primary:hover,
.auth-container .btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: white;
    text-decoration: none;
}

.auth-container .btn-pill {
    border-radius: 25px;
    width: auto;
}

/* --- 14-7: フッター --- */
.auth-footer {
    background: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #e1e5e9;
}

.auth-links a {
    color: var(--auth-accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-note {
    margin-top: 15px;
    font-size: 0.8125rem;
    color: #666;
}

.auth-note a {
    color: var(--auth-accent);
    text-decoration: none;
}

.auth-note a:hover {
    text-decoration: underline;
}

/* --- 14-8: 認証成功エリア --- */
.auth-container .verification-success {
    margin-bottom: 20px;
    text-align: center;
}

.auth-container .success-icon {
    font-size: 3rem;
    color: var(--auth-accent);
    margin-bottom: 20px;
}

.auth-container .verification-success h2 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.auth-container .verification-success p {
    color: #666;
    margin-bottom: 10px;
    line-height: 1.6;
}

.auth-container .success-icon--animated {
    animation: authPulse 2s infinite;
}

@keyframes authPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- 14-9: アクセントカラーテーマ --- */
/* デフォルト: Red (login) — .auth-container のカスタムプロパティで定義済み */

/* Orange (forgot_password, reset_password) */
.auth-theme-orange {
    --auth-accent: #ff6b6b;
    --auth-accent-end: #ffa726;
}

/* Green (verify_email) */
.auth-theme-green {
    --auth-accent: #4CAF50;
    --auth-accent-end: #45a049;
}

/* Teal header + brand button (forgot_password_sent) */
.auth-theme-teal {
    --auth-accent: #27ae60;
    --auth-accent-end: #2ecc71;
    --auth-btn-gradient: var(--kakekko-gradient);
}

/* Brand (register 等) */
.auth-theme-brand {
    --auth-accent: var(--kakekko-primary);
    --auth-accent-end: var(--kakekko-primary-end);
}

/* --- 14-10: 新規登録ページ固有 (.register-section) --- */
.register-section {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 40px 0;
}

.register-section .register-wrapper {
    background-color: white;
    padding: 30px;
    border-radius: var(--kakekko-radius, 15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.register-section .register-title {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-section .form-label-required {
    font-weight: 600;
    color: #34495e;
}

.register-section .form-label-required .required-mark {
    color: #e74c3c;
}

.register-section .child-card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    margin-bottom: 10px;
}

.register-section .child-card h6 {
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
}

.register-section .form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

.register-section .form-control:focus {
    border-color: var(--kakekko-primary, #667eea);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.register-section .gender-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 8px;
}

.register-section .gender-radio-group .form-check-input {
    transform: scale(1.2);
}

.register-section .gender-radio-group .form-check-label {
    font-weight: 500;
}

.register-section .card {
    margin-bottom: 20px;
    border-radius: var(--kakekko-radius, 15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.register-section .card-header {
    background: var(--kakekko-gradient);
    color: white;
    border-radius: var(--kakekko-radius, 15px) var(--kakekko-radius, 15px) 0 0 !important;
    border: none;
}

.register-section .btn-primary {
    background: var(--kakekko-gradient);
    border: none;
    border-radius: var(--kakekko-radius-pill, 25px);
    padding: 12px 30px;
    font-weight: 600;
}

.register-section .btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border: none;
    border-radius: var(--kakekko-radius-pill, 25px);
    padding: 8px 20px;
}

.register-section .btn-outline-danger {
    border-radius: var(--kakekko-radius, 15px);
}

.register-section .referral-code-input {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* ==================================================================== *
 * 14-11: プロフィール編集ページ固有
 *        (edit_profile.php — .register-section 共有 + 固有クラス)
 * ==================================================================== */

/* セクション見出し（色付きアンダーライン付き h4） */
.register-section .section-heading {
    color: #2c3e50;
    border-bottom: 3px solid;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.section-heading--blue  { border-color: #3498db; }
.section-heading--green { border-color: #27ae60; }
.section-heading--orange { border-color: #f39c12; }

/* 読み取り専用フォームコントロール表示 */
.register-section .form-control-readonly {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 500;
}

/* 性別バッジ */
.badge-gender-male   { background-color: #3498db; color: white; }
.badge-gender-female  { background-color: #e91e63; color: white; }

/* ランクバッジ */
.badge-rank-chunin { background-color: #e74c3c; color: white; }
.badge-rank-jonin  { background-color: #27ae60; color: white; }

/* お子様カード（既存一覧表示 — .card コンポーネントのオーバーライド） */
.register-section .child-info-card {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: none;
    margin-bottom: 1rem;
}
.register-section .child-info-card h6 {
    color: #2c3e50;
    font-weight: 600;
}
.register-section .child-info-card .child-name {
    font-size: 1.1rem;
}

/* アクションボタン（編集・削除） */
.register-section .btn-action {
    border-radius: 6px;
}

/* 空状態アラート（お子様情報なし） */
.register-section .alert-empty {
    border-radius: 8px;
    border: none;
    background-color: #d4edda;
    color: #155724;
}

/* お子様追加ボタン（アウトライン pill） */
.btn-add-child {
    border-radius: 25px;
    padding: 8px 20px;
    font-weight: 600;
    border-color: #3498db;
    color: #3498db;
}
.btn-add-child:hover {
    background-color: #3498db;
    color: white;
}

/* 新しいお子様コンテナ（青ボーダー） */
.new-children-area {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #3498db;
}
.new-children-area h5 {
    color: #2c3e50;
    margin-bottom: 20px;
}

/* 送信ボタン（青グラデーション） */
.register-section .btn-submit {
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    color: white;
}
.register-section .btn-submit:hover {
    background: linear-gradient(135deg, #2980b9 0%, #2471a3 100%);
    color: white;
}

/* キャンセルボタン（グレーグラデーション） */
.register-section .btn-cancel {
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    border: none;
    color: white;
}
.register-section .btn-cancel:hover {
    background: linear-gradient(135deg, #7f8c8d 0%, #6c7a7d 100%);
    color: white;
}

/* 子供編集モーダル — フォーム要素スタイル */
#editChildModal .form-label-required {
    font-weight: 600;
    color: #34495e;
}
#editChildModal .required-mark {
    color: #e74c3c;
}
#editChildModal .form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
}
#editChildModal .gender-radio-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding-top: 8px;
}
#editChildModal .gender-radio-group .form-check-input {
    transform: scale(1.2);
}
#editChildModal .gender-radio-group .form-check-label {
    font-weight: 500;
}

/* ==========================================================================
   15. ページ共通コンポーネント
   トレーサビリティ: UIUX_POLICY → Section 15
   ========================================================================== */

/* --- 15-1: ステータスページ（エラー・締切・定員等） --- */
.kk-status-container {
    max-width: 600px;
    margin-top: 3rem;
}

.kk-status-card {
    border-radius: var(--kakekko-radius);
}

.kk-status-icon {
    font-size: 4rem;
    line-height: 1;
}

.kk-status-icon--danger {
    color: var(--kakekko-danger);
}

.kk-status-title {
    font-weight: bold;
}

.kk-status-title--danger {
    color: var(--kakekko-danger);
}

.kk-status-title--muted {
    color: var(--kakekko-text-muted);
}

.kk-status-title--info {
    color: #17a2b8;
}

/* --- 15-2: CTA ボタン（グラデーション） --- */
.kk-btn-cta-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
    transition: all 0.3s ease;
}

.kk-btn-cta-green:hover,
.kk-btn-cta-green:focus {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(17, 153, 142, 0.4);
}

.kk-btn-cta-green--lg {
    font-size: 1.2rem;
}

.kk-btn-cta-brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.kk-btn-cta-brand:hover,
.kk-btn-cta-brand:focus {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* --- 15-3: カード（角丸＋シャドウ） --- */
.kk-card-rounded {
    border-radius: var(--kakekko-radius);
    overflow: hidden;
}

.kk-card-rounded-sm {
    border-radius: 10px;
    overflow: hidden;
}

/* --- 15-4: カードヘッダー（グラデーション） --- */
.kk-card-header-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 1.5rem;
}

.kk-card-header-green-sm {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 1.2rem;
}

.kk-card-header-brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem;
}

/* --- 15-5: アラート・バッジ --- */
.kk-alert-info-banner {
    background: linear-gradient(to right, #f0f9ff, #e0f2fe);
    border-left: 4px solid #11998e;
    padding: 1rem;
}

.kk-alert-info-banner strong {
    color: #11998e;
}

.kk-badge-capacity {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
}

.kk-alert-compact {
    padding: 0.75rem;
    font-size: 0.9rem;
}

/* --- 15-6: テキストユーティリティ --- */
.kk-text-preline {
    white-space: pre-line;
    font-size: 0.9rem;
}

.kk-text-prewrap {
    white-space: pre-wrap;
}

/* --- 15-7: フォームバリデーション --- */
label.error {
    color: red;
    font-size: small;
}

/* CakePHP FormHelper のバリデーションエラー表示（Bootstrap 4 互換） */
.form-group .error-message,
.form-control + .error-message,
div.error-message {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}
.input.error .form-control,
.form-group.error .form-control {
    border-color: #dc3545;
}
.input.error label,
.form-group.error > label:first-child {
    color: #dc3545;
}

/* --- 15-8: 予約一覧ページ --- */
.kk-bookings-container {
    max-width: 880px;
    margin-top: 1.5rem;
}

.kk-bookings-heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.kk-booking-card-header-upcoming {
    background: #e8faf5;
    border-bottom: 2px solid #b2e8d4;
    border-radius: 10px 10px 0 0;
}

.kk-booking-card-header-upcoming h2 {
    color: #1a7a6a;
}

.kk-booking-card-header-past {
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0;
}

.kk-booking-card-header-past h2 {
    color: #6b7280;
}

/* 月別ナビゲーションボタン */
.kk-month-nav-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    line-height: 1.4;
    white-space: nowrap;
}

.kk-booking-empty-icon {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.kk-booking-filter-bar {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.kk-booking-filter-label {
    font-size: 0.82rem;
}

.kk-booking-item-past {
    border-left: 4px solid #d1d5db;
    opacity: 0.75;
}

.kk-booking-past-date {
    font-size: 0.9rem;
    color: #666;
}

/* 曜日バッジ（日=赤, 土=青, 平日=グレー）*/
.bk-dow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-left: 3px;
    vertical-align: baseline;
}

.bk-dow-0 { background: #fde8e8; color: #dc2626; }
.bk-dow-6 { background: #dbeafe; color: #2563eb; }
.bk-dow-1, .bk-dow-2, .bk-dow-3, .bk-dow-4, .bk-dow-5 {
    background: #f3f4f6;
    color: #6b7280;
}

/* 予約リストアイテム hover */
.list-group-item.booking-item {
    transition: background-color 0.15s;
}

.list-group-item.booking-item:hover {
    background-color: #f8f9fa;
}

/* フィルターボタン active 状態 */
.filter-btn.active {
    pointer-events: none;
}

@media (max-width: 640px) {
    .kk-bookings-heading { font-size: 1.15rem; }
    .list-group-item.booking-item { padding: 0.5rem 0.6rem; }
}

/* ==========================================================================
   16. Admin ページコンポーネント
   ========================================================================== */

/* ---------- 16-1 テキスト・インタラクションユーティリティ ---------- */

.kk-text-nowrap     { white-space: nowrap; }
.kk-text-break-word { word-break: break-word; }
.kk-text-break-all  { word-break: break-all; }
.kk-cursor-pointer  { cursor: pointer; }
.kk-no-underline,
.kk-no-underline:hover { text-decoration: none; }

/* ---------- 16-2 Admin グラデーションアクションボタン ---------- */

.kk-admin-action-btn {
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    padding: 6px 16px;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s;
}
.kk-admin-action-btn:hover {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}
.kk-admin-action-btn--brand  { background: var(--kakekko-gradient); }
.kk-admin-action-btn--pink   { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.kk-admin-action-btn--sunset { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.kk-admin-action-btn--danger { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); }

/* ---------- 16-3 モーダルコンポーネント ---------- */

.kk-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow-y: auto;
}
.kk-modal-box {
    background: #fff;
    margin: 5% auto;
    padding: 25px;
    border-radius: var(--kakekko-radius);
    max-width: 500px;
    box-shadow: var(--kakekko-shadow-popup);
}
.kk-modal-title {
    margin: 0 0 15px 0;
}
.kk-modal-section {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--kakekko-bg-light);
    border-radius: 10px;
}
.kk-modal-section-label {
    font-weight: bold;
    font-size: 0.9rem;
}
.kk-modal-flex-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    align-items: center;
}
.kk-modal-flex-wrap {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.kk-modal-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.kk-modal-date-list {
    margin-bottom: 15px;
    max-height: 250px;
    overflow-y: auto;
}
.kk-modal-actions {
    display: flex;
    gap: 10px;
}
.kk-modal-btn {
    border-radius: var(--kakekko-radius-sm);
}

/* ---------- 16-4 カレンダーラッパー ---------- */

.kk-calendar-wrap {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

/* ---------- 16-5 サマリーカード ---------- */

.kk-summary-card {
    border-radius: var(--kakekko-radius);
    overflow: hidden;
}
.kk-summary-card-overlay {
    opacity: 0.9;
}

/* ---------- 16-6 ボーダーアクセント ---------- */

.kk-border-left-success { border-left: 4px solid #28a745; }
.kk-border-left-primary { border-left: 4px solid #007bff; }
.kk-border-left-danger  { border-left: 4px solid #dc3545; }
.kk-border-left-info    { border-left: 4px solid #17a2b8; }
.kk-border-left-accent  { border-left: 5px solid; }

/* ---------- 16-7 ステッパー（問い合わせ対応状況等） ---------- */

.kk-stepper-wrap {
    padding: 0 10%;
    position: relative;
}
.kk-stepper-track {
    position: absolute;
    top: 50%; left: 12%; right: 12%;
    height: 3px;
    background: #dee2e6;
    z-index: 0;
}
.kk-stepper-progress {
    position: absolute;
    top: 50%; left: 12%;
    height: 3px;
    background: #0d6efd;
    z-index: 1;
    max-width: 76%;
}
.kk-stepper-item {
    z-index: 2;
    flex: 0 0 auto;
}
.kk-stepper-circle {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

/* ---------- 16-8 フォントサイズユーティリティ ---------- */
/* 視認性・アクセシビリティ改善: 全スケールを底上げ（WCAG AA準拠 ≥ 14px） */

.kk-fs-xxs { font-size: 0.75rem; }
.kk-fs-xs  { font-size: 0.8rem; }
.kk-fs-sm  { font-size: 0.85rem; }
.kk-fs-base { font-size: 0.9rem; }
.kk-fs-md  { font-size: 0.95rem; }
.kk-fs-lg  { font-size: 1rem; }
.kk-fs-xl  { font-size: 1.05rem; }
.kk-fs-2xl { font-size: 1.15rem; }
.kk-fs-3xl { font-size: 1.35rem; }
.kk-fs-4xl { font-size: 1.5rem; }
.kk-fs-5xl { font-size: 1.8rem; }
.kk-fs-6xl { font-size: 2rem; }
.kk-fs-display { font-size: 2.5rem; }
.kk-fs-hero { font-size: 5rem; }
.kk-fs-icon-lg { font-size: 4rem; }

/* ---------- 16-9 ギャップ・フレックスユーティリティ ---------- */

.kk-gap-xs  { gap: 0.25rem; }
.kk-gap-sm  { gap: 0.5rem; }
.kk-gap-md  { gap: 5px; }
.kk-gap-lg  { gap: 10px; }
.kk-flex-1  { flex: 1; }

/* ---------- 16-10 テーブルセル幅ユーティリティ ---------- */

.kk-w-30  { width: 30px; }
.kk-w-40  { width: 40px; }
.kk-w-50  { width: 50px; }
.kk-w-55  { width: 55px; }
.kk-w-60  { width: 60px; }
.kk-w-70  { width: 70px; }
.kk-w-80  { width: 80px; }
.kk-w-90  { width: 90px; }
.kk-w-100 { width: 100px; }
.kk-w-120 { width: 120px; }
.kk-w-130 { width: 130px; }
.kk-w-140 { width: 140px; }
.kk-w-150 { width: 150px; }
.kk-w-160 { width: 160px; }
.kk-w-auto-min130 { width: auto; min-width: 130px; }
.kk-w-auto-min200 { width: auto; min-width: 200px; max-width: 300px; }

/* ---------- 16-11 ヘッダーグラデーション ---------- */

.kk-hero-gradient {
    background: var(--kakekko-gradient);
    color: #fff;
    border-radius: var(--kakekko-radius);
    padding: 2rem;
}
.kk-hero-gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border-radius: var(--kakekko-radius);
    padding: 2rem;
}

/* ---------- 16-12 追加ユーティリティ ---------- */

.kk-whitespace-prewrap { white-space: pre-wrap; }
.kk-border-left-brand  { border-left: 4px solid var(--kakekko-primary); }
.kk-gap-075            { gap: 0.75rem; }
.kk-display-inline     { display: inline; }

/* ==========================================================================
   17. コンテンツラッパー
   背景画像 (bg.jpg) の上にコンテンツを配置するための不透明ラッパー。
   admin.php / instructor.php レイアウトの <article> 内で使用。
   ========================================================================== */

.kk-content-wrapper {
    background: rgba(255, 255, 255, 0.97);
    min-height: calc(100vh - 200px);
    border-radius: var(--kakekko-radius);
    box-shadow: var(--kakekko-shadow);
    padding: 1.5rem;
    margin: 1rem auto;
    max-width: 1400px;
}

@media (max-width: 768px) {
    .kk-content-wrapper {
        border-radius: 0;
        margin: 0;
        padding: 1rem 0.75rem;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.98);
    }
}

/* ==========================================================================
   18. テンプレート外部化CSS
   各テンプレートの <style> ブロックから外部化したスタイル。
   トレーサビリティ: UIUX_POLICY §8（テンプレート内CSS禁止）
   ========================================================================== */

/* --- 18-1: カレンダー共通 --- */
/* Calendar/index.php, Calendar/instructor.php, element/shift_calendar.php 共通 */
.calendar-day {
    padding: 5px;
    min-height: 100px;
}
.calendar-day.sunday { background-color: #fff5f5; }
.calendar-day.saturday { background-color: #f5f5ff; }
.day-number { font-size: 1.1em; }
.event-item,
.shift-item {
    cursor: pointer;
    word-break: keep-all;
    overflow-wrap: normal;
}
.past-event { opacity: 0.6; }
.shift-calendar .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.shift-calendar .table {
    table-layout: fixed;
}

/* カレンダーレスポンシブ */
@media (max-width: 768px) {
    .calendar-day { min-height: 180px; padding: 8px; }
    .event-item { font-size: 0.85em; margin-bottom: 8px; }
    .day-number { font-size: 1.2em; margin-bottom: 8px; }
    .shift-calendar .calendar-grid .table {
        min-width: 720px;
    }
    .shift-calendar .calendar-day {
        min-width: 96px;
        overflow: visible !important;
    }
    .shift-calendar .day-number {
        white-space: nowrap;
    }
    .shift-calendar .shift-item {
        display: block;
        min-width: 5.5rem;
        max-width: 100%;
        padding: 0.25rem 0.35rem !important;
        line-height: 1.35 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow-wrap: normal;
    }
}

/* --- 18-2: 管理カレンダー固有 (Admin/calendar.php) --- */
.admin-calendar { overflow-x: auto; }
.admin-calendar .calendar-day {
    height: 120px;
    vertical-align: top;
}
.admin-calendar .event-item { font-size: 0.9em; }

/* 凡例 */
.legend-mobile-item {
    display: inline-flex;
    align-items: center;
    background: #f9f9f9;
    padding: 3px 8px;
    border-radius: 4px;
}
.legend-color-swatch {
    display: inline-block;
    border-radius: 2px;
    margin-right: 4px;
}
.legend-color-swatch--mobile { width: 12px; height: 12px; }
.legend-color-swatch--desktop {
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    margin-right: 5px;
}
.desktop-legend {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
    display: inline-block;
}
.desktop-legend-item {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    font-size: 0.9em;
}

/* イベント表示 */
.event-time-detail {
    color: black;
    font-size: 0.9em;
    font-weight: bold;
}
.event-row {
    cursor: pointer;
    background: #fff;
}
.event-row-place { min-width: 160px; }
.event-row-time { font-size: 0.95em; }
.time-chunin { color: green; font-weight: bold; }
.time-jonin { color: #c00; font-weight: bold; }

/* デスクトップ/モバイル切替 */
.mobile-calendar-list { display: none; }
.desktop-calendar { display: block; }

/* 管理カレンダーレスポンシブ */
@media (max-width: 768px) {
    .admin-calendar { padding: 10px; margin: 10px 0; }
    .desktop-calendar { display: none; }
    .mobile-calendar-list { display: block; }
    .mobile-event-card {
        border-left: 4px solid #4e79a7;
        background: #fff;
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .mobile-event-card .event-date {
        font-weight: bold;
        font-size: 1.1em;
        margin-bottom: 8px;
        color: #333;
    }
    .mobile-event-card .event-time { font-size: 0.9em; color: #666; }
    .mobile-event-card .event-place { font-weight: bold; color: #4e79a7; }
    .legend-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 15px;
    }
    .legend-mobile span { font-size: 0.8em; }
    .calendar-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .calendar-header-mobile h2 { font-size: 1.2em; margin: 0; }
}

/* --- 18-3: 会場詳細コンポーネント (element/venue_details.php) --- */
.venue-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
.venue-btn {
    display: inline-block;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
    padding: 0.4rem 1.5rem;
    white-space: nowrap;
}
.venue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--btn-shadow, rgba(0,0,0,0.2));
}
.venue-banner-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: visible;
    min-width: 0;
}
.venue-banner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12) !important;
}
.venue-banner-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(5px);
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.2s ease;
    color: white;
    box-sizing: border-box;
}
.venue-banner-badge > *,
.venue-banner-location {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.venue-banner-badge:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
@media (max-width: 576px) {
    .venue-btn-group { flex-direction: column; }
    .venue-btn {
        width: 100%;
        white-space: normal;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}
.status-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    border: 2px solid;
    margin-right: 0.3rem;
    vertical-align: middle;
    line-height: 1.3;
}
.status-label-open {
    color: #28a745;
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.08);
}
.status-label-few {
    color: #e67e22;
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.08);
}
.status-label-closed {
    color: #6c757d;
    border-color: #6c757d;
    background: rgba(108, 117, 125, 0.08);
}
/* .rank-note — 削除済み（Phase 19: 冗長な注釈行を撤去、HTMLの使用箇所なし） */
    margin-top: 0.1rem;
}

/* --- 18-4: 問合せ詳細ステッパー (Admin/Inquiry/view.php) --- */
@media (max-width: 767.98px) {
    .stepper-circle { width: 32px !important; height: 32px !important; font-size: 1rem !important; }
    .stepper-wrapper { padding: 0 2% !important; }
    .stepper-label { font-size: .8rem; }
}

/* --- 18-5: カナ候補コンポーネント (Admin/Inquiry/_kana_suggest.php) --- */
.kana-suggest-wrapper { position: relative; }
.kana-suggest-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.kana-suggest-dropdown.show { display: block; }
.kana-suggest-item {
    padding: .5rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}
.kana-suggest-item:hover,
.kana-suggest-item.active { background: #e9ecef; }
.kana-suggest-item:last-child { border-bottom: none; }
.kana-suggest-item .suggest-name { font-weight: bold; font-size: .95rem; }
.kana-suggest-item .suggest-kana { color: #6c757d; font-size: .8rem; margin-left: .5rem; }
.kana-suggest-item .suggest-meta { font-size: .8rem; color: #999; margin-top: 2px; }
.kana-suggest-item .suggest-source { font-size: .8rem; padding: .1em .4em; border-radius: 3px; }
.kana-suggest-item .source-member { background: #d4edda; color: #155724; }
.kana-suggest-item .source-inquiry { background: #d1ecf1; color: #0c5460; }
.email-suggest-banner {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 1050;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: .25rem;
    padding: .5rem .75rem;
    font-size: .85rem;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}
.email-suggest-header {
    padding: .4rem .75rem;
    font-size: .8rem;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* --- 18-6: フィードバック一括入力 (Instructor/Feedback/bulk.php) --- */
.bulk-student-card { border-left: 4px solid #17a2b8; transition: border-color 0.2s; }
.bulk-student-card.has-feedback { border-left-color: #28a745; }
.score-btn-group .btn { min-width: 42px; }
.score-btn-group .btn.active { font-weight: bold; }
.progress-ring { height: 8px; }

/* --- 18-7: 出欠管理ページ (Calendar/instructor_attendance.php) --- */
/* スコープ付き: .attendance-page でラップして汎用クラスの影響を限定 */
.attendance-page .card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
    border-radius: 10px;
}
.attendance-page .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}
.attendance-page .table th {
    border-top: none;
    background-color: #f8f9fa;
    font-weight: 600;
}
.attendance-page .badge { font-size: 0.9em; }

/* --- 18-8: メンテナンスページ (Pages/maintenance.php) --- */
@keyframes kk-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.maintenance-page .btn-primary:hover {
    background-color: #FF5733 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* ===== Section 19: テーブルユーティリティ ===== */

/* --- 19-1: スティッキーカラム (Admin/TransportCost等) --- */
.sticky-left {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* --- 19-2: 交通費設定カードテーブル --- */
.transport-cost-edit-table .auto-calc-display {
    white-space: nowrap;
}
.transport-cost-edit-table .fixed-cost-input.is-disabled-by-distance {
    background-color: #f1f3f5;
    color: #6c757d;
}

@media (max-width: 768px) {
    .transport-cost-edit-table tbody td {
        text-align: left !important;
    }
    .transport-cost-edit-table .input-group,
    .transport-cost-edit-table input,
    .transport-cost-edit-table select {
        width: 100%;
        max-width: 100%;
    }
    .transport-cost-edit-table .auto-calc-display {
        display: inline-block;
        font-size: 1.05rem;
    }
}

/* ===== Section 20: UI エンリッチメント（Dashboard / Profile / Payroll） ===== */

/* --- 20-1: stat-card アクセント（§11 ガイドライン準拠） --- */
.stat-card--primary { border-left: 4px solid var(--kakekko-primary, #667eea); }
.stat-card--success { border-left: 4px solid #28a745; }
.stat-card--info    { border-left: 4px solid #17a2b8; }
.stat-card--warning { border-left: 4px solid #ffc107; }

.stat-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* --- 20-2: プログレスバー（シフト消化率 等） --- */
.kk-progress {
    background-color: #e9ecef;
    border-radius: 0.5rem;
    height: 0.75rem;
    overflow: hidden;
}
.kk-progress-bar {
    height: 100%;
    border-radius: 0.5rem;
    background: var(--kakekko-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    transition: width 0.6s ease;
}

/* --- 20-3: 空状態パターン（§10 準拠） --- */
.kk-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #868e96;
}
.kk-empty-state__icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}
.kk-empty-state__heading {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #495057;
}
.kk-empty-state__desc {
    font-size: 0.875rem;
}

/* --- 20-4: プロフィールページ --- */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: var(--kakekko-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-message {
    background: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: #495057;
}
.profile-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.9rem;
}
.profile-dl dt {
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}
.profile-dl dd {
    margin-bottom: 0;
}

/* --- 20-5: 給与構成バー（Payroll/view） --- */
.payroll-composition-bar {
    display: flex;
    height: 0.625rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #e9ecef;
}
.payroll-composition-bar__segment {
    height: 100%;
    min-width: 2px;
    transition: width 0.4s ease;
}
.payroll-composition-bar__segment--base      { background: var(--kakekko-primary, #667eea); }
.payroll-composition-bar__segment--transport  { background: #17a2b8; }
.payroll-composition-bar__segment--incentive  { background: #ffc107; }
.payroll-composition-bar__segment--bonus      { background: #28a745; }

.payroll-composition-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #6c757d;
}
.payroll-composition-legend__item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.payroll-composition-legend__color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.payroll-composition-legend__color--base      { background: var(--kakekko-primary, #667eea); }
.payroll-composition-legend__color--transport  { background: #17a2b8; }
.payroll-composition-legend__color--incentive  { background: #ffc107; }
.payroll-composition-legend__color--bonus      { background: #28a745; }

/* --- 20-6: Dashboard スコーピング --- */
.dashboard-page .stat-card {
    text-align: left;
}

/* ==========================================================================
   21. ポイント年間推移チャート
   ========================================================================== */

/* --- 21-1: チャートコンテナ --- */
.point-chart {
    max-height: 200px;
    overflow: hidden;
}

.point-chart__bar-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 180px;
    padding-top: 10px;
}

/* --- 21-2: 各月カラム --- */
.point-chart__column {
    flex: 1;
    max-width: 60px;
    text-align: center;
}

/* --- 21-3: バー本体 --- */
.point-chart__bar {
    margin: 0 2px;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.point-chart__bar--positive {
    background: #28a745;
}

.point-chart__bar--negative {
    background: #dc3545;
}

.point-chart__bar--current {
    opacity: 1;
}

.point-chart__bar--faded {
    opacity: 0.6;
}

/* ===== Section 22: モバイル追加修正（2026-07） ===== */
/* トレーサビリティ: fix/mobile-responsive ブランチで追加
   kk-w-* 固定幅の解除、btn-lg.px-5 のパディング抑制、
   テーブルの横スクロール補助 */

@media (max-width: 768px) {
    /* kk-w-* 固定幅ユーティリティをモバイルで解除 */
    .kk-w-30,
    .kk-w-40,
    .kk-w-50,
    .kk-w-60,
    .kk-w-70,
    .kk-w-80,
    .kk-w-90,
    .kk-w-100,
    .kk-w-110,
    .kk-w-120,
    .kk-w-130,
    .kk-w-140,
    .kk-w-150,
    .kk-w-160 {
        width: auto !important;
        min-width: 0 !important;
    }

    /* btn-lg + px-5 の過剰パディングを抑制 */
    .btn-lg.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Bootstrap table-responsive 内のテーブルにスクロールヒント */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   18. テンプレート外部化 CSS（inline <style> から抽出）
   ═══════════════════════════════════════════════════════════════ */

/* --- Admin Menu Card (templates/Admin/Menu/index.php) --- */
.admin-menu-card {
    border-radius: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.admin-menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
@media (max-width: 767px) {
    .admin-menu-card .card-body {
        padding: 1.2rem !important;
    }
    .admin-menu-card .card-title {
        font-size: 1rem;
    }
    .admin-menu-card .card-text {
        font-size: 0.8rem !important;
    }
}

/* --- Instructor Menu Card (templates/Instructor/Menu/index.php) --- */
.instructor-menu-card {
    border-radius: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.instructor-menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
@media (max-width: 767px) {
    .instructor-menu-card .card-body {
        padding: 1.5rem !important;
    }
    .instructor-menu-card .card-title {
        font-size: 1.2rem;
    }
}

/* --- Instructor Attendance Card (templates/Calendar/instructor_attendance.php) --- */
.instructor-attendance-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 10px;
}
.instructor-attendance-card .card-header {
    background: var(--kakekko-gradient);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}
.instructor-attendance-card .table th {
    border-top: none;
    background-color: #f8f9fa;
    font-weight: 600;
}
.instructor-attendance-card .badge {
    font-size: 0.9em;
}

/* --- Shift Management (templates/Admin/Shift/index.php) --- */
#lesson-list {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.lesson-item {
    position: relative;
    transition: background 0.1s;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}
.lesson-item:hover {
    background: #f8f9fa;
}
.lesson-item.hidden {
    display: none !important;
}
.lesson-item-body {
    min-width: 0;
    overflow: hidden;
}
.lesson-checkbox {
    position: static !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    cursor: pointer;
}
.lab-filter.active {
    background-color: #6c757d !important;
    color: #fff !important;
    border-color: #6c757d !important;
}
.shift-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #f8fafc;
}
.shift-mode-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: 0.8rem;
    color: #4a5568;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.shift-mode-tab:hover {
    color: #2d3748;
    text-decoration: none;
    background: #edf2f7;
}
.shift-mode-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 6px 14px rgba(40, 167, 69, 0.22);
}
.shift-filter-bar {
    gap: 0.5rem;
}
.shift-filter-bar select {
    width: auto;
    min-width: 140px;
}
.shift-group-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.shift-date-group {
    border: 1px solid #d7e4f2;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 45, 61, 0.06);
}
.shift-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.10) 100%);
    border-bottom: 1px solid #d7e4f2;
}
.shift-date-label {
    font-size: 1.15rem;
    font-weight: 800;
    color: #233044;
}
.shift-date-sub {
    margin-left: 0.5rem;
    color: #6c757d;
    font-size: 0.85rem;
    font-weight: 700;
}
.shift-lesson-group {
    margin: 0.85rem;
    border: 1px solid #e6edf5;
    border-radius: 0.9rem;
    background: #fbfdff;
    overflow: hidden;
}
.shift-lesson-group__header {
    padding: 0.75rem 0.9rem;
    background: #f8fafc;
    border-bottom: 1px solid #e6edf5;
}
.shift-lesson-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #233044;
}
.shift-lesson-heading strong {
    font-size: 1rem;
}
.shift-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6c757d;
}
.shift-manage-list {
    display: flex;
    flex-direction: column;
}
.shift-manage-item {
    display: grid;
    grid-template-columns: 2.2rem minmax(190px, 1.3fr) minmax(110px, 0.8fr) minmax(170px, 1fr) minmax(120px, 0.7fr) 5.5rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    border-top: 1px solid #edf2f7;
    background: #fff;
}
.shift-manage-item:first-child {
    border-top: none;
}
.shift-manage-item:hover {
    background: #fdfefe;
}
.shift-manage-check,
.shift-manage-actions {
    text-align: center;
}
.shift-manage-instructor .badge {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.shift-manage-notes {
    min-width: 0;
    color: #4a5568;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.shift-group-empty {
    padding: 1.2rem;
    border: 1px dashed #cbd5e0;
    border-radius: 0.8rem;
    background: #f8fafc;
    text-align: center;
}
.shift-table td,
.shift-table th {
    vertical-align: middle;
}
.shift-work-time-card {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(52, 152, 219, 0.22);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12) 0%, rgba(102, 126, 234, 0.12) 100%);
}
.shift-work-time-card--missing {
    border-color: rgba(231, 76, 60, 0.35);
    background: rgba(231, 76, 60, 0.08);
}
.shift-work-time-label,
.shift-approval-target__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #286090;
    white-space: nowrap;
}
.shift-work-time-range {
    font-size: 1.08rem;
    font-weight: 800;
    color: #1f2d3d;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.shift-duration-badge {
    display: inline-block;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #fff;
    color: #286090;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.shift-lesson-slots {
    margin-top: 0.35rem;
    line-height: 1.35;
}
.shift-lesson-slots__label {
    display: block;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 700;
}
.shift-approval-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.65rem;
    background: #fff8e1;
    border: 1px solid rgba(243, 156, 18, 0.35);
}
.shift-approval-target--missing {
    background: #fdecea;
    border-color: rgba(231, 76, 60, 0.35);
}
.shift-approval-target__label {
    color: #9a6700;
}
.shift-approval-target__time {
    font-size: 1rem;
    font-weight: 800;
    color: #2c3e50;
    white-space: nowrap;
}
@media (max-width: 768px) {
    #lesson-list {
        max-height: 50vh;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .lesson-item {
        gap: 0.35rem !important;
        padding: 0.5rem 0.5rem !important;
        align-items: center !important;
    }
    .lesson-item-body .d-flex {
        gap: 0.25rem !important;
    }
    .lesson-item-body .badge {
        font-size: 0.8rem;
        padding: 0.2em 0.45em;
    }
    .lesson-item-body .fw-semibold {
        font-size: 0.85rem;
    }
    .lesson-item-body .text-muted.small {
        font-size: 0.8rem;
    }
    .lesson-checkbox {
        position: static !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px;
    }
    .lab-filter {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }
    #panel-lesson {
        padding: 0;
    }
    .shift-mode-switch {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
    .shift-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .shift-filter-bar select,
    .shift-filter-bar button,
    .shift-filter-bar .badge {
        width: 100%;
    }
    .shift-date-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .shift-lesson-group {
        margin: 0.65rem;
    }
    .shift-manage-item {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        padding: 0.85rem;
    }
    .shift-manage-check {
        text-align: left;
    }
    .shift-manage-actions {
        text-align: left;
        padding-top: 0.45rem;
        border-top: 1px solid #edf2f7;
    }
    .shift-manage-status .shift-approval-target {
        margin-bottom: 0.45rem;
    }
    .shift-table {
        font-size: 0.85rem;
    }
    .shift-table td,
    .shift-table th {
        padding: 0.45rem 0.4rem;
        white-space: nowrap;
    }
    .shift-table .col-memo {
        white-space: normal;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shift-table .col-lesson {
        white-space: normal;
        max-width: 100px;
    }
    .kk-card-table.shift-table tbody td.col-lesson {
        max-width: none;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .shift-lesson-badge,
    .shift-lesson-place {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }
    .kk-card-table.shift-table tbody td.col-time,
    .kk-card-table.shift-table tbody td.col-status {
        display: block;
    }
    .kk-card-table.shift-table tbody td.col-time::before,
    .kk-card-table.shift-table tbody td.col-status::before {
        display: block;
        margin-bottom: 0.25rem;
    }
    .shift-work-time-card {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0.6rem 0.7rem;
    }
    .shift-work-time-range {
        font-size: 1.18rem;
    }
    .shift-approval-target {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .shift-approval-target__time {
        font-size: 1.08rem;
    }
}
@media (max-width: 480px) {
    #lesson-list {
        max-height: 45vh;
    }
    .lesson-item-body .d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.15rem !important;
    }
    .lesson-item-body .fw-semibold,
    .lesson-item-body .text-muted.small {
        display: inline;
    }
    .shift-table {
        font-size: 0.8rem;
    }
    .shift-table td,
    .shift-table th {
        padding: 0.4rem 0.35rem;
    }
    .shift-table .col-memo {
        max-width: 60px;
    }
    .shift-work-time-card {
        gap: 0.25rem;
    }
    .shift-work-time-range {
        font-size: 1.12rem;
    }
    .shift-duration-badge {
        font-size: 0.72rem;
        padding: 0.16rem 0.4rem;
    }
}

/* ============================================================
   Section 19: グラデーションボタン
   ============================================================ */

/* 共通ベース: pill型 + ホバーエフェクト */
.btn-gradient {
    border: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.btn-gradient:hover {
    transform: translateY(-3px);
}

/* ブランド紫（戻るボタン等） */
.btn-gradient-brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-gradient-brand:hover {
    color: white;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* ソフトティール（詳細表示等） */
.btn-gradient-soft {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #333;
    box-shadow: 0 4px 15px rgba(168, 237, 234, 0.3);
}
.btn-gradient-soft:hover {
    color: #333;
    box-shadow: 0 6px 20px rgba(168, 237, 234, 0.4);
}

/* ピンク（編集ボタン等） */
.btn-gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}
.btn-gradient-pink:hover {
    color: white;
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
}

/* レッド（削除ボタン等） */
.btn-gradient-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.btn-gradient-danger:hover {
    color: white;
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

/* ブランドグラデーション背景ユーティリティ（カードヘッダー・モーダル等） */
.bg-gradient-brand {
    background: var(--kakekko-gradient);
    color: white;
}

/* チュートリアルモーダル */
.tutorial-modal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}
.tutorial-modal .modal-header {
    background: var(--kakekko-gradient);
    color: white;
    border: none;
}
.tutorial-modal .modal-footer {
    border: none;
}
.tutorial-modal .tutorial-icon {
    font-size: 2rem;
}

/* 出欠確認ヘッダー */
.attendance-header {
    background: var(--kakekko-gradient);
    color: white;
    border-radius: 8px;
}

/* 会場カードヘッダー */
.venue-card-header {
    background: var(--kakekko-gradient);
    color: white;
    padding: 1.5rem;
}

/* CTA カード: 紹介ショップ（グリーン系） */
.cta-card-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-radius: 12px;
}

/* CTA カード: フィードバック（ブルーグリーン系） */
.cta-card-ocean {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    border-radius: 12px;
}

/* CTA カード アイコン */
.cta-card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* メンテナンスページ */
.maintenance-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* メディアセクション背景 */
.media-section-body {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
}

/* =====================================================
 * 20. メニューカードグラデーション
 * Admin/Menu, Instructor/Menu のカードカラー
 * ===================================================== */

/* 共通メニューカードボディ */
.menu-card-body {
    border-radius: 15px;
    text-align: center;
    padding: 1.5rem;
}
.menu-card-body .menu-card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.menu-card-body .card-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* ブランド紫（レッスン管理, ダッシュボード） */
.menu-gradient-brand {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ティールグリーン（出席・カレンダー） */
.menu-gradient-teal {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

/* ピンク（会員管理, 出席確認） */
.menu-gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* スカイブルー（問合せ, マイシフト） */
.menu-gradient-sky {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* サンセット（スタッフ管理, プロフィール） */
.menu-gradient-sunset {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* ラベンダー（給与・経費） */
.menu-gradient-lavender {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

/* ゴールド（ポイント・成長記録） */
.menu-gradient-gold {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}

/* ミント（会場設定, フィードバック） */
.menu-gradient-mint {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* インディゴ（システム設定） */
.menu-gradient-indigo {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

/* アラートグラデーション（今日の予定） */
.alert-gradient-light {
    background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
    border: none;
}

/* ===================================================================
   Section 21: KPI カード border-left カラーバリエーション (Round 6)
   =================================================================== */
.kpi-card-primary   { border-left-color: #007bff !important; }
.kpi-card-success   { border-left-color: #28a745 !important; }
.kpi-card-danger    { border-left-color: #dc3545 !important; }
.kpi-card-info      { border-left-color: #17a2b8 !important; }
.kpi-card-purple    { border-left-color: #6f42c1 !important; }

/* ===================================================================
   Section 22: アイコンサイズ・テキストサイズ ユーティリティ (Round 6)
   =================================================================== */
.icon-xs  { font-size: 0.9em; }
.icon-sm  { font-size: 2rem; }
.icon-md  { font-size: 3rem; }
.icon-lg  { font-size: 4rem; }
.kk-fs-badge { font-size: 0.9rem; }

/* コンテナ・カード幅ユーティリティ */
.kk-container-narrow { max-width: 600px; margin-top: 3rem; }
.kk-card-narrow { max-width: 400px; }
.kk-white-box { background-color: white; padding: 20px; border-radius: 10px; margin: 20px 0; }

/* チャートコンテナ */
.chart-container-sm { height: 250px; }

/* メニューコンテナ（会員・インストラクター共通） */
.kk-menu-container { max-width: 800px; margin-top: 2rem; }

/* 丸角カード（15px） */
.kk-rounded-card { border-radius: 15px; overflow: hidden; }

/* 丸角10px */
.kk-rounded-sm { border-radius: 10px; }

/* 文字間隔広め（紹介コード等） */
.kk-letter-spaced { letter-spacing: 0.3rem; }

/* カレンダー凡例ボックス */
.kk-legend-box { border: 1px solid #ddd; border-radius: 5px; padding: 10px; background-color: #f9f9f9; display: inline-block; }
.kk-legend-item { display: inline-block; margin-right: 10px; vertical-align: middle; }

/* メニューページ見出し */
.kk-menu-heading { color: #333; font-weight: bold; }

/* セクション見出し（グレー） */
.kk-section-heading { color: #6c757d; font-weight: bold; }

/* カレンダー補足テキスト */
.kk-calendar-sub { font-size: 0.85em; color: #666; margin-top: 4px; }

/* venue_details サブ情報インデント */
.kk-indent-sub { margin-left: 2rem; margin-top: 0.3rem; }

/* Flex gap ユーティリティ */
.kk-gap-sm { gap: 5px; }
.kk-gap-md { gap: 8px; }

/* カレンダー内ステータスバッジ */
.kk-event-badge { position: absolute; top: 2px; right: 2px; font-size: 0.7em; }

/* ==========================================================================
   22. Calendar inline-style extraction
   ========================================================================== */

/* 休業日カード（モバイルリスト・デスクトップ共通） */
.kk-closure-card {
    border-left: 5px solid #dc3545;
    border-radius: 8px;
    background: linear-gradient(to right, #fff5f5, white);
}
.kk-closure-title { font-size: 1.1em; }
.kk-closure-date { font-size: 0.9em; color: #666; margin-top: 4px; }

/* カレンダーイベントカード（モバイルリスト） */
.kk-event-card {
    border-radius: 8px;
    cursor: pointer;
}
.kk-event-title { font-size: 1.1em; }

/* ラボカラーインジケーター（凡例） */
.kk-lab-color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    margin-right: 5px;
}
.kk-lab-name { font-size: 0.9em; }

/* カレンダー内ラボインジケーター（小サイズ） */
.kk-lab-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
}
.kk-lab-label { font-size: 0.95em; font-weight: 500; }

/* カレンダーイベント詳細インデント */
.kk-event-detail-indent { padding-left: 10px; }

/* カレンダーセル（デスクトップ） */
.kk-calendar-cell { height: 120px; vertical-align: top; }
.kk-calendar-cell.closed-day-bg { background-color: #fff0f0 !important; }

/* カレンダーセル内の休業日バッジ */
.kk-closure-badge { font-size: 0.8em; background: #dc3545; }

/* カレンダーセル内のイベントアイテム */
.kk-event-item { font-size: 0.9em; cursor: pointer; position: relative; }
.kk-event-item.is-past { opacity: 0.6; }

/* --- Final Polish: 会員カレンダーのモバイル横クリップ防止 --- */
.calendar-member {
    max-width: 100%;
    overflow-x: hidden;
}
.calendar-member .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.calendar-member .member-calendar-grid .table {
    table-layout: fixed;
}
.calendar-member .kk-flex-1,
.calendar-member .lesson-item .d-flex > div:first-child {
    min-width: 0;
}
.calendar-member .kk-lab-label,
.calendar-member .kk-calendar-sub,
.calendar-member .kk-event-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    .calendar-member.kk-white-box {
        padding: 12px;
        margin-left: 0;
        margin-right: 0;
    }
    .calendar-member h2 {
        font-size: 1.25rem;
        line-height: 1.4;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .calendar-member .kk-legend-box,
    .calendar-member .kk-legend-item {
        max-width: 100%;
    }
    .calendar-member .lesson-item {
        max-width: 100%;
        overflow: hidden;
    }
    .calendar-member .lesson-item > .d-flex {
        min-width: 0;
        gap: 6px;
    }
    .calendar-member .kk-lab-label,
    .calendar-member .kk-calendar-sub {
        font-size: 0.86rem;
        line-height: 1.45;
    }
    .calendar-member .kk-room-badge {
        white-space: normal;
        max-width: 100%;
    }
    .calendar-member .member-calendar-grid .table {
        min-width: 560px !important;
    }
}

/* カレンダーセル内のお休みバッジ */
.kk-absence-badge { position: absolute; right: 2px; font-size: 0.7em; }

/* カレンダー時間表示 */
.kk-event-time { font-size: 0.9em; font-weight: bold; }

/* 子ども選択モーダル（JS生成） */
.kk-child-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kk-child-modal-body {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
}
.kk-child-modal-title { margin-bottom: 15px; }

/* ================================================================
   問合せ詳細 — モバイル対応
   ================================================================ */
@media (max-width: 767.98px) {
    /* 基本情報・連絡先テーブルのthを縮小 */
    .table-borderless th.w-35 {
        width: 30% !important;
        font-size: 0.8rem;
    }
    .table-borderless td {
        font-size: 0.85rem;
        word-break: break-word;
    }
}

/* ===== Section 21: ローディングオーバーレイ ===== */
.kk-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.kk-loading-overlay.kk-loading-visible {
    opacity: 1;
    visibility: visible;
}
.kk-loading-content {
    text-align: center;
    color: #fff;
    padding: 2rem;
}
.kk-loading-spinner {
    width: 56px;
    height: 56px;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto 1.2rem;
    animation: kk-spin 0.8s linear infinite;
}
@keyframes kk-spin {
    to { transform: rotate(360deg); }
}
.kk-loading-message {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.kk-loading-sub {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* ===== Section 22: やり取り経過サマリーカード ===== */
.kk-summary-card {
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.kk-summary-card .card-body {
    padding: 1rem 1.25rem;
}
.kk-summary-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.kk-summary-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}
.kk-summary-meta {
    font-size: 0.8rem;
    color: #6c757d;
}

/* ==========================================================================
   Room Detail Badge（会場詳細の目立つ表示）
   トレーサビリティ: REQ-UI-ROOM-003 — 全コンテキストで折り返しを許可（水平展開修正）
   ========================================================================== */
.kk-room-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1ecf1 100%);
    color: #0c5460;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1.5px solid #bee5eb;
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
    max-width: 100%;
}
td .kk-room-badge {
    margin-top: 2px;
}
.kk-room-badge::before {
    content: '📍 ';
}

/* ==========================================================================
   Temporary Venue Alert（臨時会場の一瞥警告）
   ========================================================================== */
.temporary-venue-alert {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    color: #5f3700;
    border: 2px solid #ff9800;
    border-left: 7px solid #dc3545;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin: 0.5rem 0;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.16);
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.temporary-venue-alert > * {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.temporary-venue-alert__label {
    color: #b02a37;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}
.temporary-venue-badge {
    display: inline-flex;
    flex-wrap: wrap;
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1.35;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.24);
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.temporary-guidance-badge {
    display: inline-flex;
    flex-wrap: wrap;
    background: #ffc107;
    color: #493400;
    border-radius: 999px;
    padding: 1px 7px;
    margin: 2px 4px 2px 0;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1.3;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.kk-event-item.has-temporary-venue,
.booking-item.has-temporary-venue {
    background: #fff8e1;
    border-left-color: #dc3545 !important;
}
.temporary-guidance {
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #ffca2c;
    background: #fff8e1;
    color: #493400;
    max-width: 100%;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
.temporary-guidance strong {
    color: #b02a37;
}

.member-next-lesson-main,
.member-next-lesson-location {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.member-next-lesson-location {
    text-align: right;
}

@media (max-width: 576px) {
    .member-next-lesson-location {
        width: 100%;
        margin-top: 0.5rem;
        text-align: left;
    }
}

/* ==========================================================================
   Breadcrumbs（パンくずリスト）
   ========================================================================== */
.kk-breadcrumbs {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0.4rem 0;
    font-size: 0.82rem;
}
.kk-breadcrumbs .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}
.kk-breadcrumbs .breadcrumb-item a {
    color: var(--kakekko-primary, #667eea);
    text-decoration: none;
}
.kk-breadcrumbs .breadcrumb-item a:hover {
    text-decoration: underline;
}
.kk-breadcrumbs .breadcrumb-item.active {
    color: #6c757d;
}

/* ==========================================================================
   Password Toggle（パスワード表示切替）
   ========================================================================== */
.kk-password-wrapper {
    position: relative;
}
.kk-password-wrapper input {
    padding-right: 2.8rem;
}
.kk-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 6px;
    line-height: 1;
    opacity: 0.65;
    transition: opacity 0.15s;
    z-index: 5;
}
.kk-password-toggle:hover {
    opacity: 1;
}

/* ==========================================================================
   Progressive Disclosure（お子様追加ボタン）
   ========================================================================== */
.kk-child-add-btn {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 2px dashed #c8d6e5;
    border-radius: 10px;
    background: #f8f9fa;
    color: var(--kakekko-primary, #667eea);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.kk-child-add-btn:hover {
    background: #eef2ff;
    border-color: var(--kakekko-primary, #667eea);
    transform: translateY(-1px);
}
.kk-child-header {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8ecff 100%);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kk-child-header .badge {
    font-size: 0.7rem;
}
.kk-child-remove-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.7;
}
.kk-child-remove-btn:hover {
    opacity: 1;
}

/* ==========================================================================
   Booking Action Buttons（予約一覧のアクションボタン）
   ========================================================================== */
.kk-booking-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.kk-booking-actions .btn {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ==========================================================================
   Filter Collapse（フィルター折りたたみ）
   ========================================================================== */
.kk-filter-toggle {
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.15rem 0.5rem;
}
.kk-filter-toggle:hover {
    color: #333;
}
.kk-filter-chip {
    display: inline-block;
    background: #e2e6ea;
    color: #495057;
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
    border-radius: 12px;
    margin: 0 0.15rem 0.15rem 0;
}

/* ==========================================================================
   Google Maps Responsive（地図レスポンシブ）
   ========================================================================== */
.kk-map-responsive {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding-bottom: 75%; /* 4:3 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin: 0.5rem 0;
}
.kk-map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   Unified Empty States（統一された空状態）
   ========================================================================== */
.kk-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #6c757d;
}
.kk-empty-state__icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}
.kk-empty-state__heading {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.3rem;
}
.kk-empty-state__desc {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   Card Table: data-label based responsive card layout for mobile
   Usage: Add .kk-card-table to <table>, add data-label="列名" to each <td>
   ========================================================================== */
@media (max-width: 768px) {
    .kk-card-table {
        border: 0;
    }
    .kk-card-table thead {
        display: none;
    }
    .kk-card-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        margin-bottom: 0.75rem;
        padding: 0.75rem 1rem;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .kk-card-table tbody tr:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .kk-card-table tbody td {
        display: block;
        min-width: 0;
        max-width: 100%;
        padding: 0.42rem 0;
        border: none;
        font-size: 0.9rem;
        line-height: 1.45;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .kk-card-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        color: #495057;
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 0.18rem;
    }
    .kk-card-table tbody td > * {
        min-width: 0;
        max-width: 100%;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .kk-card-table tbody td:empty {
        display: none;
    }
    /* Actions column — full width centered */
    .kk-card-table tbody td.kk-card-actions {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #eee;
    }
    .kk-card-table tbody td.kk-card-actions::before {
        display: none;
    }
    /* empty state row stays full width */
    .kk-card-table tbody td[colspan] {
        display: block;
    }
    .kk-card-table tbody td[colspan]::before {
        display: none;
    }

    .table-responsive > table.table:not(.kk-card-table) {
        min-width: 640px;
        table-layout: auto;
    }
    .table-responsive > table.table:not(.kk-card-table) th,
    .table-responsive > table.table:not(.kk-card-table) td {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .table-responsive > table.table:not(.kk-card-table) a,
    .table-responsive > table.table:not(.kk-card-table) small,
    .table-responsive > table.table:not(.kk-card-table) strong,
    .table-responsive > table.table:not(.kk-card-table) code,
    .table-responsive > table.table:not(.kk-card-table) span:not(.badge) {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .kakekko-stat-card small.text-muted,
    .card.text-center small.text-muted {
        display: inline-block;
        min-width: 5.5em;
        max-width: 100%;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

/* =============================================
   Section 19: Mobile overflow prevention & trial badge layout
   ============================================= */

/* Trial schedule badge — desktop: single row, mobile: stacked mini-card */
.kk-trial-badge {
    font-size: 0.8rem;
    line-height: 1.5;
    vertical-align: middle;
}
.kk-trial-date {
    margin-right: 0.4em;
}
.kk-trial-counts {
    margin-right: 0.3em;
    opacity: 0.92;
}
.kk-trial-alert {
    margin-left: 0.25em;
}
.kk-trial-toggle {
    margin-left: 0.3em;
    font-size: 0.7em;
}

/* ── Sprint 16: Shift summary / filter / overlap ── */
#shift-summary-section {
    margin-bottom: 1rem;
}
#shift-summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.shift-summary-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 140px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.shift-summary-name {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 4px;
}
.shift-summary-stats {
    display: flex;
    gap: 12px;
    font-size: .82rem;
    color: #555;
}
#shift-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
#shift-filter-bar select {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 4px 8px;
    font-size: .85rem;
}
.shift-overlap-badge {
    font-size: .85rem;
    margin-left: 4px;
    animation: shiftPulse 1.8s ease-in-out infinite;
    cursor: help;
}
@keyframes shiftPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

@media (max-width: 768px) {
    /* Trial badge becomes stacked mini-card on mobile */
    .kk-trial-badge {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 1px 6px;
        white-space: normal;
        word-break: normal;
        font-size: 0.78rem;
        padding: 6px 10px !important;
        border-radius: 8px;
        max-width: 100%;
    }
    .kk-trial-date {
        flex: 1 0 100%;
        font-weight: 600;
        margin-right: 0;
        margin-bottom: 1px;
    }
    .kk-trial-counts {
        font-size: 0.75rem;
    }
    .kk-trial-alert {
        margin-left: 0;
    }
    .kk-trial-toggle {
        margin-left: auto;
    }

    /* Card-body overflow containment (without ugly word-break) */
    .card-body {
        overflow-wrap: break-word;
    }

    /* Global container containment */
    .table-responsive,
    .container,
    .container-fluid {
        max-width: 100vw;
        overflow-x: auto;
    }
    /* Sprint 16: Shift summary/filter mobile */
    #shift-summary-cards {
        gap: 6px;
    }
    .shift-summary-card {
        min-width: calc(50% - 6px);
        flex: 1 1 calc(50% - 6px);
    }
    #shift-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    #shift-filter-bar select {
        width: 100%;
    }
}

/* ==========================================================================
   Section 24: モダンテーマ層（2026-07 全画面リフレッシュ）
   - 目的: 全ロール画面（公開/会員/インストラクター/管理）の見た目を今風に統一
   - 方針: uiux-policy 準拠（紫グラデ基調・ロール別アクセント・bg.jpg維持）。
           Bootstrap 4 コンポーネントを後勝ちで上書きする追加専用レイヤー。
   - 日本語の泣き別れ対策: 見出し・ボタン・ラベルに word-break を適用
   ========================================================================== */

/* ---- 24-1. ベース ---- */
body {
    font-family: 'Noto Sans JP', system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #2f3542;
    /* bg.jpg（青海波）は維持しつつ淡青のオーバーレイで彩度を落とし、カードを主役にする
       （白すぎて眩しいとのフィードバックで 247,248,252/0.88 → 233,239,249/0.66 に調整） */
    background-image: linear-gradient(rgba(233, 239, 249, 0.66), rgba(233, 239, 249, 0.66)), url("../img/bg.jpg") !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .btn, label, .badge, .nav-link, th {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
@supports (word-break: auto-phrase) {
    h1, h2, h3, h4, h5, h6, .btn, label, .badge, .nav-link, th, p, dt, dd, li {
        word-break: auto-phrase; /* Chrome119+: 日本語を文節単位で折り返す */
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #23283d;
}

a {
    color: #5a6fd6;
}
a:hover {
    color: #4557b8;
}

/* ---- 24-2. カード ---- */
.card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(31, 41, 90, 0.08);
}
.card .card-header {
    border-bottom: 1px solid #eef0f7;
    background-color: #fbfcfe;
    border-radius: 16px 16px 0 0;
}
.card .card-header:first-child {
    border-radius: 16px 16px 0 0;
}

/* ---- 24-3. ボタン ---- */
.btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.15rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}
.btn-sm, .btn-group-sm > .btn {
    padding: 0.28rem 0.8rem;
    font-size: 0.82rem;
}
.btn-lg {
    padding: 0.65rem 1.7rem;
}
.btn-primary {
    background: var(--kakekko-gradient);
    border: 0;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active {
    background: linear-gradient(135deg, #5a70e0 0%, #6a4396 100%);
    border: 0;
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.45);
}
.btn-success {
    background: linear-gradient(135deg, #2bb673 0%, #1e9e5f 100%);
    border: 0;
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.3);
}
.btn-success:hover {
    background: linear-gradient(135deg, #26a367 0%, #1a8b54 100%);
    border: 0;
}
.btn-danger {
    background: linear-gradient(135deg, #ef5f6f 0%, #dc3d52 100%);
    border: 0;
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.3);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #e04c5d 0%, #c92f44 100%);
    border: 0;
}
.btn-info {
    background: linear-gradient(135deg, #38b6d8 0%, #1f9ec4 100%);
    border: 0;
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.3);
}
.btn-info:hover {
    background: linear-gradient(135deg, #2ba7c9 0%, #188cb0 100%);
    border: 0;
}
.btn-warning {
    background: linear-gradient(135deg, #FF8008 0%, #FFC837 100%);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 128, 8, 0.3);
}
.btn-warning:hover {
    background: linear-gradient(135deg, #f07400 0%, #f5ba1f 100%);
    border: 0;
    color: #fff;
}
.btn-secondary {
    background: #6b7280;
    border: 0;
}
.btn-outline-primary {
    color: #5a6fd6;
    border: 1.5px solid rgba(102, 126, 234, 0.55);
    background: rgba(102, 126, 234, 0.03);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff;
    background: var(--kakekko-gradient);
    border-color: transparent;
}
.btn-outline-secondary {
    border-radius: 999px;
}
.btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-danger:hover {
    transform: translateY(-1px);
}

/* ---- 24-4. フォーム ---- */
.form-control, .custom-select {
    border-radius: 10px;
    border: 1.5px solid #dfe3f0;
    padding: 0.5rem 0.9rem;
    color: #2f3542;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--kakekko-primary);
    box-shadow: 0 0 0 0.18rem rgba(102, 126, 234, 0.18);
}
label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #3c4257;
}
/* iOS Safari: 16px未満の入力はフォーカス時に自動ズームされるため16pxを確保 */
@media (max-width: 640px) {
    .form-control, .custom-select, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
        font-size: 16px;
    }
}

/* ---- 24-5. テーブル ---- */
.table {
    color: #2f3542;
}
.table thead th {
    background-color: #f4f6fb;
    border-top: 0;
    border-bottom: 1px solid #e3e7f3;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #5a6580;
    white-space: nowrap;
    padding: 0.65rem 0.75rem;
}
.table td {
    border-top: 1px solid #eef0f7;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}
.table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.045);
}
.table-bordered, .table-bordered td, .table-bordered th {
    border-color: #e8ebf5;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfe;
}

/* ---- 24-6. アラート・バッジ ---- */
.alert {
    border: 0;
    border-radius: 12px;
}
.alert-info {
    background-color: #e9f4fd;
    color: #22617e;
}
.alert-success {
    background-color: #e7f7ee;
    color: #1b7a4b;
}
.alert-warning {
    background-color: #fdf3e2;
    color: #8a5a12;
}
.alert-danger {
    background-color: #fdeaea;
    color: #a03040;
}
.alert-secondary {
    background-color: #f1f3f9;
    color: #565f77;
}
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.75em;
    letter-spacing: 0.02em;
}

/* ---- 24-7. モーダル・ページネーション・タブ ---- */
.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(23, 28, 60, 0.25);
}
.page-link {
    border: 0;
    border-radius: 999px !important;
    margin: 0 3px;
    color: #5a6fd6;
}
.page-item.active .page-link {
    background: var(--kakekko-gradient);
}
.nav-tabs {
    border-bottom: 1px solid #e3e7f3;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    color: #5a6580;
    font-weight: 600;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--kakekko-primary);
    color: #23283d;
    background: transparent;
}

/* ---- 24-8. 公開ページ: スケジュールエリアの新デザイン ---- */
.venue-times-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.92rem;
    align-items: center;
}
.venue-times-summary .course-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
}
.course-dot--chunin { background: #2bb673; }
.course-dot--jonin  { background: #ef5f6f; }

.date-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.date-chip {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 3px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.6;
}
.date-chip--warn {
    background: rgba(255, 193, 7, 0.25);
    border-color: rgba(255, 224, 130, 0.9);
}
.date-chip .date-chip-note {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.95;
}

.event-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 0.8rem 0.9rem;
    border: 1px solid #eef0f7;
    border-radius: 12px;
    margin-bottom: 0.6rem;
    background: #fff;
    scroll-margin-top: 20px;
}
.event-row--past {
    background: #f5f6fa;
    opacity: 0.62;
}
.event-row__date {
    font-weight: 700;
    font-size: 1.02rem;
    min-width: 7.2em;
    color: #23283d;
}
.event-row--past .event-row__date {
    color: #8a90a5;
}
.event-row__statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.event-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.event-row__extras {
    flex-basis: 100%;
    display: grid;
    gap: 6px;
}
.course-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.course-chip--open   { background: #e7f7ee; color: #1b7a4b; }
.course-chip--few    { background: #fdf3e2; color: #8a5a12; }
.course-chip--closed { background: #f1f3f9; color: #7a8098; }
.course-chip .course-chip-time {
    font-weight: 500;
    opacity: 0.85;
}
.venue-btn.venue-btn--compact {
    padding: 0.42rem 1.2rem;
    font-size: 0.88rem;
    border-radius: 999px;
}
@media (max-width: 575.98px) {
    .event-row__actions {
        margin-left: 0;
        flex-basis: 100%;
    }
    .event-row__actions .venue-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---- 24-9. 管理/インストラクターのブランドヘッダーと共通部品 ---- */
.kk-header-logo {
    max-height: 84px;
    width: auto;
}

/* .kk-empty-state__icon（BEM・定義済み）への追従エイリアス。
   25以上のテンプレートがハイフン形 .kk-empty-state-icon を参照しており、
   未定義のまま素のテキスト表示になっていた（2026-07監査 Top10 #2） */
.kk-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.85;
}

/* ブランドグラデ背景の共通クラス（テンプレート内インライン直書きの置換用） */
.kk-brand-gradient {
    background: var(--kakekko-gradient) !important;
    color: #fff;
}

/* ---- 24-10. 細部 ---- */
iframe {
    border-radius: 12px;
}
hr {
    border-top-color: #e8ebf5;
}
.text-muted {
    color: #7a8098 !important;
}