// ==========================================================================
// SPIRAL Form Core Engine (Theme / Auto Form Component / Dark Mode)
// フォーム用統合コアエンジン（テーマ自動適用・アコーディオン・スクロール・ダークモード制御）
// ==========================================================================
(() => {
    'use strict';

    // ==========================================================================
    // 1. マスターデータ・設定定義
    // ==========================================================================
    
    /**
     * 期・種別ごとのカラーパレット定義テーブル
     * CSSカスタム変数 (--rgb, --color-accent 等) の動的書き換えに使用
     */
    const THEME_PALETTES = {
        'default': { bgOuter: '#f0f4f8', bgOuterDark: '#cbd5e1', accent: '#788896', rgb: '89, 102, 116' },

        's1':  { bgOuter: '#e6f2ff', bgOuterDark: '#cce5ff', accent: '#90caf9', rgb: '0, 64, 128' },
        's2':  { bgOuter: '#e9f9f0', bgOuterDark: '#cbebd5', accent: '#81c784', rgb: '0, 102, 51' },
        's3':  { bgOuter: '#fff4e6', bgOuterDark: '#ffdcb3', accent: '#ffb74d', rgb: '153, 77, 0' },
        's4':  { bgOuter: '#f0f0ff', bgOuterDark: '#dadaff', accent: '#9fa8da', rgb: '51, 51, 102' },
        's5':  { bgOuter: '#ffe6ea', bgOuterDark: '#ffccbe', accent: '#ff8093', rgb: '180, 50, 70' },
        's6':  { bgOuter: '#fffae6', bgOuterDark: '#fff0be', accent: '#ffd54f', rgb: '150, 110, 20' },
        's7':  { bgOuter: '#ffe6f0', bgOuterDark: '#ffccd5', accent: '#f48fb1', rgb: '153, 51, 102' },
        's8':  { bgOuter: '#f9f0e9', bgOuterDark: '#edd3bf', accent: '#ffcca3', rgb: '128, 64, 0' },
        's9':  { bgOuter: '#f0ffe6', bgOuterDark: '#d3f5cc', accent: '#a5d6a7', rgb: '51, 102, 0' },
        's10': { bgOuter: '#f3e6ff', bgOuterDark: '#e3ccff', accent: '#b39ddb', rgb: '75, 0, 130' },
        's11': { bgOuter: '#fef6e4', bgOuterDark: '#fbe3af', accent: '#ffcc80', rgb: '166, 94, 0' },
        's12': { bgOuter: '#e6fff5', bgOuterDark: '#ccffd9', accent: '#80cbc4', rgb: '0, 102, 128' },
        's13': { bgOuter: '#e6fff2', bgOuterDark: '#bdfcd9', accent: '#80e2b3', rgb: '30, 140, 90' }
    };

    /**
     * タイトル・H1文字列からテーマを自動判定するためのキーワードマッピング
     */
    const THEME_KEYWORDS = [
        { keys: ["第1期", "s1"], id: "s1" },
        { keys: ["第2期", "s2"], id: "s2" },
        { keys: ["第3期", "s3"], id: "s3" },
        { keys: ["第4期", "s4"], id: "s4" },
        { keys: ["第5期", "s5"], id: "s5" },
        { keys: ["第6期", "s6"], id: "s6" },
        { keys: ["第7期", "s7"], id: "s7" },
        { keys: ["第8期", "s8"], id: "s8" },
        { keys: ["第9期", "s9"], id: "s9" },
        { keys: ["第10期", "s10"], id: "s10" },
        { keys: ["追加書類", "s11"], id: "s11" },
        { keys: ["審査履歴", "s12"], id: "s12" },
        { keys: ["交付決定通知書", "s13"], id: "s13" }
    ];

    // ==========================================================================
    // 2. 汎用ユーティリティ関数
    // ==========================================================================

    /**
     * サブウィンドウ（ポップアップ）を指定サイズで開く
     * ※ HTML側の onclick 属性から呼び出せるよう window オブジェクトへ公開
     */
    window.openNewWindow = function(url) {
        window.open(url, '_blank', 'width=768,height=768');
    };

    /**
     * 全角英数字を半角英数字へ正規化
     */
    function convertToHalfWidth(text) {
        if (!text) return "";
        return text.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0));
    }

    /**
     * 入力文字列を検証し、該当するテーマID（s1〜s13）を取得（未一致時は 'default'）
     */
    function detectThemeId(text) {
        const safeText = text || "";
        const normalizedText = convertToHalfWidth(safeText.toLowerCase());
        
        const matched = THEME_KEYWORDS.find(item => 
            item.keys.some(key => normalizedText.includes(key.toLowerCase()))
        );
        
        return matched ? matched.id : 'default';
    }

    /**
     * ルートのCSSカスタム変数（--rgb, --color-accent 等）をピンポイント更新
     */
    function updateThemeVars(theme) {
        const rootEl = document.documentElement;
        if (!rootEl || !theme) return;

        rootEl.style.setProperty('--rgb', theme.rgb);
        rootEl.style.setProperty('--color-accent', theme.accent);
        rootEl.style.setProperty('--bg-outer', theme.bgOuter);
        rootEl.style.setProperty('--bg-outer-dark', theme.bgOuterDark);
    }

    /**
     * モジュール共通CSSを<head>内へ一発注入（二重読み込み防止機能付き）
     */
    function injectBaseStyles() {
        if (document.getElementById('spiral-core-theme-style')) return;
        const style = document.createElement('style');
        style.id = 'spiral-core-theme-style';
        style.textContent = getStyleContent();
        document.head.appendChild(style);
    }

    // ==========================================================================
    // 3. UIコンポーネント制御（アコーディオン・イージング・サイドナビ・ショートカット）
    // ==========================================================================

    /**
     * アコーディオン要素へ期別カラー用クラス（s1〜s10）を自動付与
     */
    function initAccordionClasses() {
        document.querySelectorAll('.accordion-item').forEach((item, index) => {
            const hasStyleClass = Array.from(item.classList).some(className => /^s\d+$/.test(className));
            if (!hasStyleClass) {
                item.classList.add(`s${(index % 13) + 1}`);
            }
        });
    }

    /**
     * アコーディオン開閉イベントをdocument全体へバインド（イベント委譲・二重バインド防止付き）
     */
    function initAccordionEvents() {
        if (window._accordionEventBound) return;
        window._accordionEventBound = true;

        document.addEventListener('click', (e) => {
            const title = e.target.closest('.accordion-title');
            if (!title) return;

            const content = title.nextElementSibling;
            if (!content || !content.classList.contains('accordion-content')) return;

            const isActive = title.classList.contains('active');
            title.classList.toggle('active');
            content.classList.toggle('active');
            title.setAttribute('aria-expanded', !isActive);
        });
    }

    /**
     * イージングアニメーション（easeOutCubic / 100ms）による神速スクロールエンジン
     */
    function smoothScrollTo(to, duration) {
        const start = window.pageYOffset;
        const change = to - start;
        const startTime = performance.now();

        const easeOutCubic = (t, b, c, d) => {
            t /= d;
            t--;
            return c * (t * t * t + 1) + b;
        };

        function animate(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed, duration);
            const val = easeOutCubic(progress, start, change, duration);
            window.scrollTo(0, val);

            if (progress < duration) {
                requestAnimationFrame(animate);
            }
        }
        requestAnimationFrame(animate);
    }

    /**
     * サイドナビクリック時：スクロール位置の判定および閉じたアコーディオンの自動展開プロセッサー
     */
    function executeMenuClick(linkElement) {
        if (!linkElement) return;

        const HEADER_OFFSET = 80;
        const DURATION = 100;
        const linkText = linkElement.cloneNode(true).textContent.replace(/[0-9]/g, '').trim().toLowerCase();
        let targetElement = null;

        const allDts = document.querySelectorAll('.smp_tmpl dt.title, .smp_tmpl dt');
        const allDtsArray = Array.from(allDts);

        if (linkText === 'info') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('管理番号') || dt.textContent.includes('登録日時'));
            if (!targetElement) targetElement = document.querySelector('.smp_tmpl dl');
        } 
        else if (linkText === 'contact') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('電話番号'));
        }
        else if (linkText === 'bank') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('振込先金融機関'));
        } 
        else if (linkText === 'docs') {
            const matchedDts = allDtsArray.filter(dt => 
                dt.textContent.includes('履歴事項') || dt.textContent.includes('書類')
            );
            targetElement = matchedDts.find(dt => {
                return dt.offsetWidth > 0 || dt.offsetHeight > 0 || dt.getClientRects().length > 0;
            });
        } 
        else if (linkText === 'office') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('備考欄'));
        }
        else if (linkText === 'notice') {
            targetElement = allDtsArray.find(dt => dt.textContent.includes('通知書'));
        }

        if (!targetElement) return;

        // 目的の要素が閉じているアコーディオン内にある場合、自動で開く
        const parentContent = targetElement.closest('.accordion-content');
        if (parentContent && !parentContent.classList.contains('active')) {
            const parentTitle = parentContent.previousElementSibling;
            if (parentTitle) {
                parentTitle.classList.add('active');
                parentContent.classList.add('active');
                parentTitle.setAttribute('aria-expanded', 'true');
            }
        }

        const targetY = targetElement.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
        smoothScrollTo(targetY, DURATION);
    }

    /**
     * サイドナビのクリックイベントを登録（重複防止処理付き）
     */
    function initSideNavigation() {
        const menuLinks = document.querySelectorAll('.side-menu a');
        
        menuLinks.forEach((link) => {
            if (link.dataset.navBound) return;
            link.dataset.navBound = "true";

            const text = link.textContent.trim();
            if (!text.includes('Sheet') && !link.hasAttribute('onclick')) {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    executeMenuClick(link);
                });
            }
        });
    }

    /**
     * キーボード「1〜9」の数字キーによるサイドナビの神速移動ショートカット（フォーム入力時は除外）
     */
    function initKeyShortcut() {
        if (window._keyShortcutBound) return;
        window._keyShortcutBound = true;

        const DURATION = 100;

        window.addEventListener('keydown', (e) => {
            const activeEl = document.activeElement ? document.activeElement.tagName : "";
            if (activeEl === 'INPUT' || activeEl === 'TEXTAREA' || activeEl === 'SELECT') {
                return;
            }

            const keyIndex = parseInt(e.key, 10);
            const menuLinks = Array.from(document.querySelectorAll('.side-menu a'));
            
            if (keyIndex >= 1 && keyIndex <= menuLinks.length) {
                const targetLink = menuLinks[keyIndex - 1];
                if (targetLink) {
                    e.preventDefault();
                    targetLink.classList.add('is-active');
                    targetLink.click();

                    setTimeout(() => {
                        targetLink.classList.remove('is-active');
                        targetLink.blur();
                    }, DURATION);
                }
            }
        });
    }

    // ==========================================================================
    // 4. 画面判定 & テーマ最速適用
    // ==========================================================================

    /**
     * ページタイトルから画面種別（事務局・ログイン）を特定およびクラス付与と一次テーマカラー適用
     */
    function initScreenAndTheme() {
        const pageTitle = document.title || "";
        const rootEl = document.documentElement;

        if (/list|officeuse/i.test(pageTitle) || pageTitle.includes("事務局")) {
            rootEl.classList.add("is-office-screen"); 
            if (localStorage.getItem('office-mode') === 'dark') {
                rootEl.classList.add('office-dark-active');
            }
        } else if (pageTitle.startsWith("ログインページ") || pageTitle.includes("ERROR")) {
            rootEl.classList.add("is-login-screen");
            if (!document.getElementById('fa-cdn-link')) {
                const faLink = document.createElement('link');
                faLink.id = 'fa-cdn-link';
                faLink.rel = 'stylesheet';
                faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
                document.head.appendChild(faLink);
            }
        }

        const initialThemeId = detectThemeId(pageTitle);
        updateThemeVars(THEME_PALETTES[initialThemeId]);
    }

    // ==========================================================================
    // 5. 実行エントリポイント (DOM最速キャッチ & イベント登録)
    // ==========================================================================

    // 最速処理 1: テーマ反映、クラス設定、CSS注入、アコーディオン・ショートカットの初期化
    initScreenAndTheme();   // 画面種別の判定（事務局/ログイン）およびタイトル文字からテーマカラーを一次適用
    injectBaseStyles();     // モジュール共通のCSS（デザインCSS）を<head>内へ一発注入
    initAccordionClasses(); // アコーディオン要素へ期別カラー用のスタイルクラス（s1〜s10）を補完
    initAccordionEvents();  // アコーディオンの開閉クリックイベントを画面全体へバインド（0秒開通）
    initKeyShortcut();      // キーボードの「1〜9」キーによるサイドナビ操作ショートカットを最速バインド

    // 最速処理 2: DOM生成監視（H1検知による最終テーマ確定およびテキスト整形・UI補完）
    if (document.readyState === 'loading') {
        let fallbackTimer;
        const observer = new MutationObserver((mutations, obs) => {
            const h1 = document.querySelector('h1');
            if (h1 && h1.textContent.trim() !== '') {
                if (fallbackTimer) clearTimeout(fallbackTimer);
                
                // DOM構造確定後に一括処理
                initSideNavigation();
                formatH1Structure(h1);

                const themeId = detectThemeId(`${document.title} ${h1.textContent}`);
                updateThemeVars(THEME_PALETTES[themeId]);

                document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
                injectModeSwitcher();

                // レンダリングコスト削減のため、検知後は即時Observerを解体
                obs.disconnect();
            }
        });

        observer.observe(document.documentElement, { childList: true, subtree: true });

        // 3秒タイムアウト時の安全弁処理
        fallbackTimer = setTimeout(() => observer.disconnect(), 3000);
    } else {
        // DOM構築完了済みの場合の即時反映処理
        initSideNavigation();
        const h1 = document.querySelector('h1');
        if (h1) formatH1Structure(h1);
        document.querySelectorAll('dt.title, dt').forEach(removeUnderlineText);
        injectModeSwitcher();
    }

    // ==========================================================================
    // 6. DOM加工ユーティリティ関数
    // ==========================================================================

    /**
     * dt要素の不要なアンダースコア（_）以降の文字列を除去・整形
     */
    function removeUnderlineText(element) {
        for (let node of element.childNodes) {
            if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('_')) {
                node.textContent = node.textContent.split('_')[0].trim();
            }
        }
    }

    /**
     * 特定条件下のH1タイトルテキストを2段組構造へ整形・クラス付与
     */
    function formatH1Structure(h1Element) {
        if (!h1Element || h1Element.querySelector('.sub-title-accent')) return;

        const rawText = h1Element.innerHTML;
        if (rawText.includes('広島県') && rawText.includes('特別高圧')) {
            const cleanText = rawText.replace(/<br\s*\/?>/gi, ' ').replace(/\s+/g, ' ').trim();
            const startIdx = cleanText.indexOf('広島県');
            if (startIdx !== -1) {
                const upperText = cleanText.substring(0, startIdx).trim() || '申請者情報等の申請';
                const lowerText = cleanText.substring(startIdx).trim();
                h1Element.innerHTML = `${upperText}<br><span class="sub-title-accent">${lowerText}</span>`;
            }
        }
    }

    /**
     * 事務局画面用：ダークモード切替スイッチの動的生成およびイベント付与
     */
    function injectModeSwitcher() {
        if (!document.documentElement.classList.contains('is-office-screen') || document.getElementById('office-toggle-container')) return;

        const isDark = localStorage.getItem('office-mode') === 'dark';
        const container = document.createElement('div');
        container.id = 'office-toggle-container';
        container.className = 'office-mode-switcher';
        container.innerHTML = `
            <span>ダークモード</span>
            <label class="mode-switch-toggle">
                <input type="checkbox" id="office-mode-checkbox" ${isDark ? 'checked' : ''}>
                <span class="mode-switch-slider"></span>
            </label>
        `;
        document.body.appendChild(container);

        document.getElementById('office-mode-checkbox').addEventListener('change', function(e) {
            const rootEl = document.documentElement;
            if (e.target.checked) {
                rootEl.classList.add('office-dark-active');
                localStorage.setItem('office-mode', 'dark');
            } else {
                rootEl.classList.remove('office-dark-active');
                localStorage.setItem('office-mode', 'light');
            }
        });
    }

    // ==========================================================================
    // 7. スタイルシートの定義 (静的CSS注入用)
    // ==========================================================================
    function getStyleContent() {
        return `
/* ==========================================================================
   7-1. CSS変数定義 (Design Tokens)
   ========================================================================== */
:root {
    /* JS(updateThemeVars)から動的に書き換えられるコアカラー変数 */
    --rgb: 89, 102, 116;
    --color-brand: rgb(var(--rgb));
    --glow: rgba(var(--rgb), 0.25);
    --color-accent: #788896;
    --bg-outer: #f0f4f8;
    --bg-outer-dark: #cbd5e1;

    /* テキスト・背景基本カラー */
    --color-text-main: #2d3748;
    --color-text-sub: #8290a1;              

    /* --- カラーパレット：エラー・バリデーション --- */
    --color-error-main: #d9534f;            
    --color-error-bg: #fff5f5;            
    --color-error-border: #ffb3b3;            

    --bg-card: rgba(255, 255, 255, 0.94);

    --border-subtle: rgba(255, 255, 255, 0.1);

    /* フォントファミリー定義 */
    --main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --code-font: "Consolas", "Monaco", monospace;

    /* 文字サイズ階層 */
    --fz-small: 0.675rem;          /* 10.8px */
    --fz-normal: 0.75rem;          /* 12px */
    --fz-semi-medium: 0.8125rem;   /* 13px */
    --fz-medium: 0.875rem;         /* 14px */
    --fz-body: 1rem;               /* 16px */

    /* 文字の太さ定義 */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;

    /* パーツ別角丸定義 */
    --radius-small: 8px;
    --radius-item: 16px;
    --radius-panel: 24px;

    --shadow-panel: 0 20px 40px rgba(100, 140, 180, 0.12);
    --shadow-input: 0 2px 4px rgba(100, 130, 160, 0.05);
    --nav-width: 64px;

    /* --- アニメーション・トランジション --- */
    --dur-fast: 0.1s;        /* ボタンのホバーやクリックの即時反応用 */
    --dur-normal: 0.2s;
    --dur-smooth: 0.3s;
    --ease-snappy: ease-out;
    --tr-form: all var(--dur-fast) var(--ease-snappy);
}

/* --- キーフレームアニメーション定義 --- */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   7-2. ベースリセット & 全体レイアウト
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 50px 20px;
    background-color: var(--bg-outer); 
    font-family: var(--main-font);
    color: var(--color-text-main);
    font-size: var(--fz-body);
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    word-break: break-all;
}

body::before {
    content: "";
    position: fixed; 
    inset: 0;        
    z-index: -1;     
    background-color: var(--bg-outer);
    background-image: radial-gradient(at 50% 0%, #ffffff 0px, transparent 70%);
    pointer-events: none; 
}

/* --- リンク --- */
a {
    color: var(--card-color, rgba(var(--rgb), 0.8));
    font-weight: var(--fw-bold);
    text-decoration: none;
    word-break: break-word;
    transition: var(--tr-form);
}

a:hover,
a:focus-visible {
    outline: none;
    color: var(--card-color, rgba(var(--rgb), 1));
}

a:active {
    color: rgba(var(--rgb), 0.7);
}

/* ==========================================================================
   7-3. 全体レイアウト構造 & ヘッダー
   ========================================================================== */
.body_tbl {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px 40px;
    background: var(--bg-card);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    text-align: center;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn var(--dur-smooth) ease-out forwards;
    contain: content;
}
/* ==========================================================================
   7-4. 見出し・メッセージボックス演出
   ========================================================================== */
h1 {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 22px;
    font-weight: var(--fw-extra-bold);
    color: var(--color-text-main);
    text-align: center;
    line-height: 1.4;
}

h1:not(:has(.sub-title-accent)) br {
    display: none;
}

h1 .sub-title-accent {
    display: block;
    margin-top: 10px;
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-medium);
    color: #475569;
    line-height: 1.4;
    letter-spacing: normal;
}

h2.title {
    display: block;
    width: 100%;
    margin: 40px 0 24px 0;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%); 
    border: none;
    border-radius: 100px; 
    box-shadow: 0 4px 12px rgba(44, 58, 78, 0.06), inset 0 2px 3px rgba(255, 255, 255, 0.4);
    font-size: 15px;
    font-weight: var(--fw-extra-bold);
    color: #FFFFFF;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.header_text, 
.header_rmesg {
    padding: 0;
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-medium);
    line-height: 1.6;
    color: var(--color-text-sub);
    text-align: center;
}

.header_rmesg {
    margin: 40px 0 20px 0;
    font-weight: var(--fw-bold);
    color: var(--color-brand);
}
/* ==========================================================================
   7-5. フォーム要素・入力フィールド装飾
   ========================================================================== */
.smp_tmpl {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.smp_tmpl dl {
    margin: 0 0 24px 0;
    padding: 0;
}

dt.title {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding-left: 4px;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: currentColor;
}

dd.data {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

dd.data:not(:has(input)):not(:has(textarea)):not(:has(select)):not(.file) {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f1f5f9;
    border-radius: var(--radius-item);
    font-family: var(--code-font);
    font-weight: var(--fw-bold);
    color: var(--color-text-sub);
}

.data.real {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.input, 
textarea, 
select {
    width: 100%;
    max-width: 100%;
    padding: 10px 16px;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-item);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    font-size: var(--fz-body);
    font-family: var(--main-font);
    letter-spacing: 0.04em;
    color: var(--color-text-main);
    outline: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
}

.data.real .input, 
.data.integer .input, 
.data.num .input,
.data.price input {
    max-width: 200px;
    font-family: var(--code-font);
}

.input:focus, 
textarea:focus, 
select:focus {
    background-color: #FFFFFF;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(155, 186, 219, 0.2);
}

textarea {
    width: 100% !important;
    min-width: clamp(180px, 30%, 100%);
    min-height: clamp(100px, 30%, 100%);
    font-size: var(--fz-medium);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

textarea::-webkit-scrollbar {
    display: none;
}
textarea:active {
    transition: none;
}

.smp_tmpl input[name="f014134805"],
.smp_tmpl input[name="f014134752"] {
    font-family: var(--code-font);
}

.smp_tmpl input[readonly],
.smp_tmpl input[readonly]:focus {
    width: 100%;
    max-width: 200px;
    padding: 10px 16px;
    background-color: #f1f5f9; 
    border: none;
    border-radius: var(--radius-item);
    box-shadow: inset 0 2px 4px rgba(100, 130, 160, 0.06); 
    font-family: var(--code-font);
    font-size: var(--fz-body);
    font-weight: var(--fw-extra-bold);
    color: var(--color-brand);
    cursor: default;
    outline: none;
}

.data.price input[readonly], 
.data.price input[readonly]:focus {
    max-width: 200px;
    padding: 12px 16px;
    font-size: var(--fz-body);
}

/* 単位自動付与設定 */
.data.real::after {
    display: inline-block;
    white-space: nowrap;
    order: 1;
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}
.data.real:has(input[name*="014137795"])::after { content: " 円"; }

.data.real:has(input[name*="013737007"])::after,
.data.real:has(input[name*="013737008"])::after,
.data.real:has(input[name*="013737009"])::after,
.data.real:has(input[name*="013737010"])::after,
.data.real:has(input[name*="013737011"])::after,
.data.real:has(input[name*="013737012"])::after,
.data.real:has(input[name*="013737013"])::after,
.data.real:has(input[name*="013739927"])::after,
.data.real:has(input[name*="013739928"])::after,
.data.real:has(input[name*="013739929"])::after,
.data.real:has(input[name*="013739930"])::after,
.data.real:has(input[name*="013739931"])::after,
.data.real:has(input[name*="013739932"])::after,
.data.real:has(input[name*="013739933"])::after,
.data.real:has(input[name*="013860639"])::after,
.data.real:has(input[name*="013834850"])::after,
.data.real:has(input[name*="013990218"])::after,
.data.real:has(input[name*="013990219"])::after,
.data.real:has(input[name*="013856055"])::after,
.data.real:has(input[name*="013856056"])::after,
.data.real:has(input[name*="013856068"])::after,
.data.real:has(input[name*="013856074"])::after { content: " kWh"; }

.data.real br { display: none; }
.data.real .msg { width: 100%; order: 2; }

/* 複合入力グループ（郵便番号・日時・金額・電話番号） */
.data.zipcode:has(input) ul.cf,
.data.time:has(input) ul.cf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.zipcode:has(input) ul.cf li, 
.data.time:has(input) ul.cf li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

.data.zipcode:has(input) li.code01 .input {
    width: 70px;
    text-align: center;
    font-family: var(--code-font);
}

.data.zipcode:has(input) li.code02 .input {
    width: 85px;
    text-align: center;
    font-family: var(--code-font);
}

.data.zipcode:has(input) li.code01 {
    gap: 8px;
}

.data.time:has(input) ul.cf li {
    gap: 6px;
    font-size: var(--fz-medium);
}

.data.time:has(input) li input.input {
    padding: 11px 8px;
    text-align: center;
    font-family: var(--code-font);
}

.data.time:has(input) li:has(.year) input.input {
    width: 80px;
}

.data.time:has(input) li:not(:has(.year)) input.input {
    width: 55px;
}

.data.price ul.cf {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.price ul.cf li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-extra-bold);
    color: var(--color-text-main);
}

.data.price ul.cf li::after {
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

.data.phone ul.cf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.data.phone ul.cf li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    float: none;
    font-size: var(--fz-body);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
}

.data.phone li.num01 .input, 
.data.phone li.num02 .input, 
.data.phone li.num03 .input {
    width: 75px;
    text-align: center;
    font-family: var(--code-font);
}

.data.phone li.num01, 
.data.phone li.num02 {
    gap: 8px;
}

.smp_tmpl dd.data:has(input[name*="cf"]) {
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-bold);
    line-height: 2;
    color: var(--color-text-sub);
}

.smp_tmpl dd.data input[name*="cf"] {
    margin-top: 4px;
}

span.sample {
    display: inline-block;
    margin-top: 4px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-medium);
    color: var(--color-text-sub);
}

.need {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    background-color: var(--color-error-main);
    border-radius: 100px;
    line-height: 1.2;
    font-size: var(--fz-small);
    font-weight: var(--fw-bold);
    color: #FFFFFF;
}
span.caution { 
    display: block;
    margin-top: 4px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--color-text-sub);
}

input::placeholder, textarea::placeholder { opacity: 0; }

/* ファイル添付エリア */
.data.file input[type="file"] { 
    display: block;
    position: relative;
    width: 100%;
    min-height: 5.5rem;
    margin-bottom: 0.8rem;
    padding: 3.2rem 1rem 0;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-item);
    box-shadow: var(--shadow-input);
    color: var(--color-brand);
    font-family: inherit;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    overflow: hidden; 
}

.data.file input[type="file"]::file-selector-button, 
.data.file input[type="file"]::-webkit-file-upload-button {
    display: none;
}

.data.file input[type="file"]::before {
    content: "+";
    position: absolute;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    pointer-events: none;
}

.data.file input[type="file"]:hover {
    background-color: #ffffff;
    border-color: var(--color-accent);
}

.data.file input[type="file"]:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(155, 186, 219, 0.25);
    outline: none;
}

dd.file img {
    vertical-align: sub;
    width: 16px;
    height: auto;
}

dd.file input.clear {
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
    padding: 6px 16px;
    width: auto;
    height: auto;
    background-color: #e2e8f0;
    color: #475569;
    border: none;
    border-radius: 100px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    box-shadow: 0 2px 4px rgba(148, 163, 184, 0.3);
    cursor: pointer;
}

dd.file input.clear:active {
    transform: scale(0.98);
    box-shadow: none;
}

dd.file label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 8px 0;
    padding: 5px 14px;
    background-color: #fff1f2;
    color: #e11d48;
    border: 1px solid #ffe4e6;
    border-radius: 100px;
    font-size: var(--fz-normal);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

dd.file label input[type="checkbox"] {
    margin: 0 6px 0 0;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

dd.file label:has(input:checked) {
    background-color: #ff3344;
    color: #FFFFFF;
    border-color: #ff3344;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

dd.file {
    font-size: var(--fz-semi-medium);
    color: var(--color-text-sub);
    padding-left: 4px;
    line-height: 1.6;
}

/* ==========================================================================
   7-6. カスタム・ラジオ / チェックボタン UI
   ========================================================================== */
ul.radio.cf, .data.multi2 ul.cf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    width: 100%;
    margin: 6px 0 8px 0;
    padding: 0;
    list-style: none;
}

ul.radio.cf:has(input[name="f014134812"]), 
ul.radio.cf:has(input[name="f013738245"]) {
    grid-template-columns: 1fr;
    max-width: 100%;
}

/* チェックボタン（要素自体）を非表示 */
ul.radio.cf label input[type="radio"], 
.data.multi2 ul.cf label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* 基本状態（未選択） */
ul.radio.cf label, 
.data.multi2 ul.cf label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    background-color: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 100px;
    box-shadow: var(--shadow-input);
    cursor: pointer;
    transition: var(--tr-form);
}

ul.radio.cf label span, 
.data.multi2 ul.cf label span {
    font-size: var(--fz-medium);
    font-weight: var(--fw-bold);
    color: var(--color-text-main);
    line-height: 1.3;
    text-align: center;
}

/* 未選択のホバー時（選択中ではない時だけ反応） */
ul.radio.cf label:not(:has(input:checked)):hover, 
.data.multi2 ul.cf label:not(:has(input:checked)):hover {
    background-color: #e2e8f0;            /* 薄いグレーにして「押しやすさ」を表現 */
    border-color: var(--color-accent);    /* 枠線だけテーマカラーに */
}

/* 選択済み（checked）状態 */
ul.radio.cf label:has(input:checked), 
.data.multi2 label:has(input:checked) {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

ul.radio.cf label:has(input:checked) span, 
.data.multi2 label:has(input:checked) span {
    color: #FFFFFF !important;            /* 文字色を白で固定 */
}

/* 選択済みのままホバーした時（上書きを防ぎつつ押し込まれた感を出す） */
ul.radio.cf label:has(input:checked):hover, 
.data.multi2 label:has(input:checked):hover {
    filter: brightness(0.92);              /* 背景を少しだけ濃くしてリアクションを返す */
}

/* ==========================================================================
   7-7. バリデーションエラー表示 & 非表示項目設定
   ========================================================================== */
.header_emesg {
    display: block;
    width: 100%;
    margin: 0 0 40px 0;
    padding: 16px 20px;
    background-color: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: var(--radius-item);
    box-shadow: 0 4px 12px rgba(226, 62, 87, 0.08);
    font-size: var(--fz-medium);
    font-weight: var(--fw-extra-bold);
    line-height: 1.5;
    color: var(--color-error-main);
    text-align: center;
}

.msg {
    display: block;
    margin-top: 8px;
    padding-left: 4px;
    color: var(--color-error-main);
    font-size: var(--fz-semi-medium);
    font-weight: var(--fw-bold);
}

.msg:empty {
    display: none;
}

.error, 
.input.error, 
textarea.error, 
.data.file input[type="file"].error {
    background-color: var(--color-error-bg);
    border-color: var(--color-error-border);
}

.smp_tmpl dl:has(.msg:not(:empty)) {
    background-color: var(--color-error-bg);
    padding: 16px;
    border: 2px solid var(--color-error-border);
}

/* 不要フィールドの非表示 */
.smp_tmpl dl:has(input[name^="f014134805"]), 
.smp_tmpl dl:has(input[name="f014137795"]),
.smp_tmpl dl:has(input[name^="f013735748"]), 
.smp_tmpl dl:has(input[name^="f013735770"]), 
.smp_tmpl dl:has(input[name^="f013735772"]), 
.smp_tmpl dl:has(input[name^="f013735773"]) {
    display: none;
}

/* ==========================================================================
   7-8. ボタン・テーブル・共通パーツ
   ========================================================================== */
input.submit, 
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    min-height: 48px;
    margin: 40px auto;
    background-color: var(--color-brand);
    border: none;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(155, 186, 219, 0.4);
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: var(--tr-form);
}

input.submit:hover, 
.button:hover {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

input.submit:active, 
.button:active {
    transform: scale(0.98);
    box-shadow: none;
}

.smp-card-list {
    width: 100%;
    margin: 16px 0;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #FFFFFF;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-item);
    box-shadow: 0 4px 12px rgba(44, 58, 78, 0.03);
    overflow: hidden;
}

.smp-card-list th, 
.smp-card-list td {
    padding: 12px 16px;
    font-size: var(--fz-semi-medium);
    line-height: 1.4;
    color: var(--color-text-main);
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.smp-card-list th {
    background: #f8fafc;
    font-weight: var(--fw-bold);
}

.smp-card-list tr th:first-child {
    background: #f8fafc;
    font-weight: var(--fw-bold);
    text-align: left;
}

.smp-card-list th:last-child, 
.smp-card-list td:last-child {
    border-right: none;
}

.spiralSeal { width: 100%; margin: auto; border-collapse: collapse; border-top: 1px solid #f1f5f9; text-align: left; }
.spiralSeal td { padding-top: 24px; color: var(--color-text-sub); }
.spiralSeal a { font-size: var(--fz-small); }

/* ==========================================================================
   7-9. アコーディオン & サイドバー構造
   ========================================================================== */
.accordion-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 0 16px;
}

.accordion-item { 
    margin-bottom: 16px; 
    border-radius: var(--radius-panel); 
    color: rgb(var(--rgb));
}
.accordion-item.s1  { --bg-outer: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%); --rgb: 0, 64, 128; }
.accordion-item.s2  { --bg-outer: linear-gradient(135deg, #e9f9f0 0%, #cbebd5 100%); --rgb: 0, 102, 51; }
.accordion-item.s3  { --bg-outer: linear-gradient(135deg, #fff4e6 0%, #ffdcb3 100%); --rgb: 153, 77, 0; }
.accordion-item.s4  { --bg-outer: linear-gradient(135deg, #f0f0ff 0%, #dadaff 100%); --rgb: 51, 51, 102; }
.accordion-item.s5  { --bg-outer: linear-gradient(135deg, #ffe6ea 0%, #ffccbe 100%); --rgb: 180, 50, 70; }
.accordion-item.s6  { --bg-outer: linear-gradient(135deg, #fffae6 0%, #fff0be 100%); --rgb: 150, 110, 20; }
.accordion-item.s7  { --bg-outer: linear-gradient(135deg, #ffe6f0 0%, #ffccd5 100%); --rgb: 153, 51, 102; }
.accordion-item.s8  { --bg-outer: linear-gradient(135deg, #f9f0e9 0%, #edd3bf 100%); --rgb: 128, 64, 0; }
.accordion-item.s9  { --bg-outer: linear-gradient(135deg, #f0ffe6 0%, #d3f5cc 100%); --rgb: 51, 102, 0; }
.accordion-item.s10 { --bg-outer: linear-gradient(135deg, #f3e6ff 0%, #e3ccff 100%); --rgb: 75, 0, 130; }
.accordion-item.s11 { --bg-outer: linear-gradient(135deg, #fef6e4 0%, #fbe3af 100%); --rgb: 166, 94, 0; }
.accordion-item.s12 { --bg-outer: linear-gradient(135deg, #e6fff5 0%, #ccffd9 100%); --rgb: 0, 102, 128; }
.accordion-item.s13 { --bg-outer: linear-gradient(135deg, #e6fff2 0%, #bdfcd9 100%); --rgb: 30, 140, 90; }

.accordion-title {
    position: relative;
    margin: 0;
    padding: 18px 24px;
    background: var(--bg-outer);
    border-radius: var(--radius-panel);
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: rgb(var(--rgb));
    text-align: left;
    cursor: pointer;
    transition: var(--tr-form);
    box-shadow: 
        2px 2px 5px rgba(var(--rgb), 0.2), 
        -2px -2px 5px rgba(255, 255, 255, 1);
}

.accordion-title.active {
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: none;
}

.accordion-title:hover {
    filter: brightness(0.98);
    box-shadow: 
        4px 4px 10px rgba(var(--rgb), 0.2), 
        -2px -2px 5px rgba(255, 255, 255, 1);
}

.accordion-content {
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    max-height: 0;
    padding: 0 24px;
    font-size: var(--fz-medium);
    line-height: 1.6;
    color: rgb(var(--rgb));
    background: transparent;
    border-radius: 0;
    transition: 
        max-height var(--dur-normal) ease-out, 
        padding var(--dur-normal) ease-out, 
        opacity var(--dur-normal) ease-out, 
        visibility var(--dur-normal);
}

.accordion-content.active {
    opacity: 1;
    visibility: visible;
    max-height: none;
    padding: 24px;
    border-top: 1px dashed rgba(var(--rgb), 0.15);
    background: var(--bg-outer);
    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}

.side-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    width: var(--nav-width);
    height: 100vh;
    --rgb: 155, 186, 219;
    box-shadow: 2px 0 12px rgba(44, 58, 78, 0.08);
}
.side-header.master { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%); }
.side-header.benefits { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-brand) 100%); }

.side-menu {
    counter-reset: menu-number;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
}

.side-menu a {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 56px;
    height: 56px;
    padding: 6px 2px;
    border-radius: var(--radius-item);
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: var(--tr-form);
    cursor: pointer;
}

.side-menu a::before {
    counter-increment: menu-number;
    content: counter(menu-number);
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: var(--fw-extra-bold);
    font-family: var(--main-font);
    line-height: 1;
    transition: var(--tr-form);
}

.side-menu a:hover, 
.side-menu a.is-active {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    color: var(--color-text-main);
}

.side-menu a:hover::before, 
.side-menu a.is-active::before {
    background: var(--color-brand);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   7-10. 画面固有スタイル（ログイン画面 & 事務局画面スイッチ）
   ========================================================================== */
.is-login-screen body { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    min-height: 100vh; 
}
.is-login-screen .body_tbl { 
    max-width: 450px; 
    border-radius: 1.5rem; 
}
.is-login-screen dl { 
    position: relative; 
}
.is-login-screen dl:nth-of-type(1)::before, 
.is-login-screen dl:nth-of-type(2)::before { 
    position: absolute; 
    left: 20px; 
    top: 45px; 
    z-index: 10; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 800; 
    color: #004080; 
    opacity: 0.4; 
}
.is-login-screen dl:nth-of-type(1)::before { content: "\\f007"; }
.is-login-screen dl:nth-of-type(2)::before { content: "\\f023"; }
.is-login-screen .input { padding: 0.8rem 1rem 0.8rem 3rem; }
.is-login-screen p.header_emesg { 
    font-size: var(--fz-semi-medium); 
    color: var(--color-error-main); 
}
.is-login-screen .button {
    background-color: #004080 !important;
    box-shadow: 0 4px 12px rgba(0, 64, 128, 0.3) !important;
}
.is-login-screen .button:hover {
    opacity: 0.8;
    background-color: #004080 !important;
}
.is-office-screen body {
    margin-left: var(--nav-width);
}
.is-office-screen .accordion-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 4px;
    padding: 0;
}

/* ==========================================================================
   7-11. ダークモードスタイル (.office-dark-active)
   ========================================================================== */
.office-mode-switcher {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #2d3748;
    user-select: none;
    transition: 
        background-color var(--dur-smooth), 
        border-color var(--dur-smooth), 
        color var(--dur-smooth);
}
.office-dark-active .office-mode-switcher {
    background: #161b22;
    border-color: var(--border-subtle);
    color: #c9d1d9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mode-switch-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}
.mode-switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.mode-switch-slider {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 34px;
    transition: var(--dur-smooth);
}
.mode-switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: var(--dur-smooth);
}
.office-dark-active .mode-switch-slider {
    background-color: var(--color-accent);
}

.office-dark-active .mode-switch-slider:before {
    transform: translateX(16px);
    background-color: #0d1117;
}
.office-dark-active body {
    background-color: #0d1117 !important;
}
.office-dark-active body::before {
    background-color: #0d1117 !important;
    background-image: none !important;
}
.office-dark-active a {
    color: var(--color-accent);
}
.office-dark-active .body_tbl { 
    background-color: rgba(255, 255, 255, 0.08) !important; 
    border: 1px solid var(--border-subtle) !important; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; 
}
.office-dark-active h1, 
.office-dark-active dt.title, 
.office-dark-active .data.real::after, 
.office-dark-active table.smp-card-list td { 
    color: #f0f6fc !important; 
}
.office-dark-active h1 .sub-title-accent, 
.office-dark-active .header_text, 
.office-dark-active .header_rmesg, 
.office-dark-active span.caution, 
.office-dark-active span.sample { 
    color: #9fa6ad !important;
}
.office-dark-active .cf li { 
    color: #ffffff !important; 
}
.office-dark-active input.submit,
.office-dark-active .button { 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}
.office-dark-active .input, 
.office-dark-active textarea, 
.office-dark-active select { 
    background-color: rgba(255, 255, 255, 0.04) !important; 
    border-color: var(--border-subtle) !important; 
    color: #c9d1d9 !important; 
}
.office-dark-active .input:not([readonly]):focus, 
.office-dark-active textarea:focus,
.office-dark-active select:focus { 
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--color-accent) !important;
}
.office-dark-active select:focus { 
    background-color: #21262d !important;
}
.office-dark-active .smp_tmpl input[readonly] { 
    background-color: rgba(255, 255, 255, 0.06) !important; 
    border: none !important;
    color: var(--color-accent) !important;
}
.office-dark-active .smp-card-list { 
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important; 
}
.office-dark-active .smp-card-list th { 
    background: rgba(255, 255, 255, 0.06) !important; 
    border-color: rgba(255, 255, 255, 0.08) !important; 
    color: #f0f6fc !important;  
}
.office-dark-active .smp-card-list td { 
    border-color: rgba(255, 255, 255, 0.08) !important; 
}
.office-dark-active .data.file input[type="file"] { 
    background-color: rgba(255, 255, 255, 0.02) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    color: #8b949e !important;
}
.office-dark-active .accordion-item, 
.office-dark-active .accordion-title { 
    box-shadow: none !important; 
}
.office-dark-active .accordion-content.active { 
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border-subtle) !important;
}
.office-dark-active .accordion-content.active span.caution, 
.office-dark-active .accordion-content.active span.sample { 
    color: #9ca3af !important; 
}

/* ==========================================================================
   7-12. レスポンシブスタイル (@media screen and (max-width: 768px))
   ========================================================================== */
@media screen and (max-width: 768px) {
    ul.radio.cf, 
    .data.multi2 ul.cf { 
        grid-template-columns: 1fr; 
    }
    
    .is-office-screen body {
        margin: auto;
        margin-bottom: var(--nav-width);
    }

    .side-header { 
        position: fixed; 
        top: auto; 
        bottom: 0; 
        left: 0; 
        z-index: 100; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        flex-direction: row; 
        width: 100% !important; 
        height: 60px; 
        background: #2d3748 !important; 
        box-shadow: 0 -4px 16px rgba(44, 58, 78, 0.12); 
        padding: 0 8px; 
    }

    .side-menu { 
        flex-direction: row; 
        justify-content: space-around; 
        align-items: center; 
        height: 100%; 
        gap: 0; 
    }

    .side-menu a { 
        flex: 1; 
        height: 48px !important; 
        justify-content: center; 
    }

    .side-menu a::before { 
        display: none; 
    }

    .accordion-container { 
        padding: 0 12px; 
        margin: 12px auto; 
    }

    .accordion-item { 
        margin-bottom: 12px; 
    }

    .accordion-title { 
        padding: 14px 18px; 
        font-size: var(--fz-medium); 
        border-radius: var(--radius-item); 
    }

    .accordion-title.active { 
        border-radius: var(--radius-item) var(--radius-item) 0 0; 
    }

    .accordion-content { 
        border-radius: 0; 
        padding: 0 18px; 
    }

    .accordion-content.active { 
        border-radius: 0 0 var(--radius-item) var(--radius-item); 
        padding: 18px; 
    }

    body { 
        padding: 16px 12px; 
    }

    .body_tbl { 
        padding: 30px 20px; 
    }

    h1 { 
        font-size: 20px; 
    }

    input.submit, 
    .button { 
        max-width: 100%; 
    }

    /* テーブルのカードUI化 */
    .smp-card-list thead { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden; 
        clip: rect(0, 0, 0, 0); 
        border: 0; 
    }

    .smp-card-list, 
    .smp-card-list tbody, 
    .smp-card-list tr, 
    .smp-card-list th, 
    .smp-card-list td { 
        display: block; 
        width: 100%; 
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    table.smp-card-list tr { 
        background-color: #f8fafc; 
        border: 2px solid #e2e8f0; 
        border-radius: var(--radius-item); 
        margin-bottom: 16px; 
        padding: 14px; 
        box-shadow: var(--shadow-input); 
    }

    table.smp-card-list tr th { 
        font-size: var(--fz-medium); 
        font-weight: var(--fw-extra-bold); 
        color: var(--color-text-main); 
        background-color: transparent; 
        padding: 0 0 8px 0; 
        border-bottom: 2px dashed #cbd5e1; 
        margin-bottom: 10px; 
        text-align: left; 
    }

    table.smp-card-list tr td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 6px 0; 
        background-color: transparent; 
        font-size: var(--fz-semi-medium); 
        font-weight: var(--fw-bold); 
        color: var(--color-text-main); 
    }

    table.smp-card-list tr td:nth-of-type(1)::before { 
        content: "・資本金の額（又は出資の総額）: "; 
        font-weight: var(--fw-medium); 
        color: var(--color-text-sub); 
    }

    table.smp-card-list tr td:nth-of-type(2)::before { 
        content: "・常時使用する従業員の数: "; 
        font-weight: var(--fw-medium); 
        color: var(--color-text-sub); 
    }
    
    .office-mode-switcher { 
        top: 12px; 
        right: 12px; 
        padding: 4px 10px; 
    }
}
`;
    }
})();