/* =========================================
   1. 変数定義エリア（設定）
   ========================================= */

/* ① デフォルト（基本設定：Cyber Dark） */
    :root {
      --bg-color: #1a1a1a;
      /* selectの背景 */
      --sel-color:#333631;
      /* カード背景：暗いグラデーション */
      --card-bg: linear-gradient(to bottom, #1f2029, #121444);
      --text-color: #e0e0e0;
      
      --accent-cyan: #00d2ff;
      --accent-red: #ff3b3b;
      --accent-green: #00ff88;
      
      --border-color: #404040;
    }

    .Default {
      --bg-color: #1a1a1a;
      --sel-color:#333631;
      /* カード背景：暗いグラデーション */
      --card-bg: linear-gradient(to bottom, #1f2029, #231112);
      --text-color: #e0e0e0;
      
      --accent-cyan: #00d2ff;
      --accent-red: #ff3b3b;
      --accent-green: #00ff88;
      
      --border-color: #404040;
    }

    /* 桜テーマ */
    .sakura-theme {
      --bg-color: #fffafc;
      --sel-color:#fdeff2;
      --card-bg: linear-gradient(to bottom, #ffffff, #ffe6ee);
      --text-color: #5d4c50;
      
      --accent-cyan: #5fa8d3;
      --accent-red: #e07a82;
      --accent-green: #8abf86;
      
      --border-color: #eacbd4;
      /* 桜テーマの時だけ、見出し(h3)と強調(strong/b)の色を強制変更 */
      body .sakura-theme h3,
      body .sakura-theme strong,
      body .sakura-theme #rem_time,
      body .sakura-theme b {
        /* 黄色などを無視して、濃い「えんじ色（深紅）」にする */
        color: #c2185b !important;
        
        /* もし文字の影（発光エフェクト）がある場合も、読みづらいので消す */
        text-shadow: none !important;
    }
    
    /* ついでにラベル（休止時間など）も少し濃くして見やすくする */
    body.sakura-theme label,
    body.sakura-theme span {
        color: var(--text-color);
        opacity: 1 !important; /* 薄くする設定を解除 */
    }
    }

    /* ライトテーマ */
    .light-theme {
      --bg-color: #f4f6f8;
      --sel-color:#e7e7eb;
      --card-bg: linear-gradient(to bottom, #ffffff, #e8ecf1);
      --text-color: #333333;
      
      --accent-cyan: #008cb3;
      --accent-red: #d93025;
      --accent-green: #00a85a;
      
      --border-color: #d1d5db;
    }

    /* ミッドナイトブルー（修正: bmidnight -> .midnight） */
    .midnight-theme {
      --bg-color: #0f172a;
      --sel-color:#333631;
      --card-bg: linear-gradient(to bottom, #1e293b, #0f172a);
      --text-color: #cbd5e1;
      
      --accent-cyan: #38bdf8;
      --accent-red: #f43f5e;
      --accent-green: #34d399;
      
      --border-color: #334155;
    }
    /* === 1. Terminal Hacker Theme (マトリックス風) === */
    /* 真っ黒な背景に蛍光グリーン。男心をくすぐるクラシックスタイル */
    .terminal-theme {
        --bg-color: #000000;
      --sel-color:#333631;
        --card-bg: linear-gradient(to bottom, #0d110d, #000000);
        --text-color: #00ff41; /* ターミナルグリーン */
        
        --accent-cyan: #00ff41; /* 全部緑にするのが通 */
        --accent-red: #ff3b3b;
        --accent-green: #39ff14;
        
        --border-color: #003b00;
    }

    /* === 2. Dracula Theme (ドラキュラ) === */
    /* 開発者に世界で一番人気のある、紫とピンクを基調とした高コントラストなテーマ */
    .dracula-theme {
        --bg-color: #282a36;
        --sel-color:#333631;
        --card-bg: linear-gradient(to bottom, #44475a, #282a36);
        --text-color: #f8f8f2; /* クリームホワイト */
        
        --accent-cyan: #8be9fd; /* シアン */
        --accent-red: #ff5555;  /* レッド */
        --accent-green: #50fa7b;/* グリーン */
        
        --border-color: #6272a4; /* 藤色 */
    }

    /* === 3. Deep Forest Theme (森林) === */
    /* 目に一番優しい、深い緑とアースカラー。長時間作業向け */
    .forest-theme {
        --bg-color: #1b261b; /* 暗い苔色 */
        --sel-color:#333631;
        --card-bg: linear-gradient(to bottom, #2d3b2d, #1b261b);
        --text-color: #d8e6d8; /* 薄いミントグレー */
        
        --accent-cyan: #4db6ac; /* 湖のような青緑 */
        --accent-red: #e57373;  /* 柔らかい赤 */
        --accent-green: #a5d6a7;/* 若草色 */
        
        --border-color: #3e523e;
    }

    /* === 4. Coffee Latte Theme (カフェ・夕暮れ) === */
    /* ブルーライトをカットしたような、暖色系のブラウン・オレンジテーマ */
    .coffee-theme {
        --bg-color: #2b211e; /* エスプレッソ */
        --sel-color:#583822;
        --card-bg: linear-gradient(to bottom, #3e2f2b, #2b211e);
        --text-color: #e6ceac; /* ラテアート色 */
        
        --accent-cyan: #ffcc80; /* オレンジ */
        --accent-red: #ffab91;  /* サーモンピンク */
        --accent-green: #c5e1a5;/* 抹茶 */
        
        --border-color: #5d4037;
    }

				/* ② お寺（修正：黒なし・濃い木目と漆の赤） */
				.Temple-theme {
				  --bg-color: #302833; /* 黒の代わりに、深い焦げ茶色（古木のイメージ） */
				  --sel-color: #2b2b2b;
				  /* カード背景：黒を除去し、濃い茶色から深い赤色へ */
				  --card-bg: linear-gradient(to bottom, #e2041b, #000b00);
				  --text-color: #f2e6d8;

				  --accent-cyan: #bfa46f; /* 控えめな金 */
				  --accent-red: #ff2a00;  /* 赤みが強く、鮮やかな朱色 */
				  --accent-green: #596c53; /* 苔色 */

				  --border-color: #d4af37; /* 金色 */
				}
					
				/* ③ 海の中（深海・泡） */
				.Ocean-theme {
				  --bg-color: #00151f;
				  --sel-color: #0d2b3b;
				  /* カード背景：深海のような濃紺グラデーション */
				  --card-bg: linear-gradient(to bottom, #023e8a, #001233);
				  --text-color: #e0f7fa;

				  --accent-cyan: #00b4d8;
				  --accent-red: #ff7e67; /* サンゴ色 */
				  --accent-green: #00ff9d;

				  --border-color: #1e4d6b;
				}

				/* ④ 宇宙（漆黒・星雲） */
				.Space-theme {
				  --bg-color: #050505;
				  --sel-color: #1a1a2e;
				  /* カード背景：虚空から紫の星雲 */
				  --card-bg: linear-gradient(to bottom, #000000, #240b36);
				  --text-color: #ffffff;

				  --accent-cyan: #00f2ff;
				  --accent-red: #ff0055;
				  --accent-green: #bc13fe; /* 紫系のアクセント */

				  --border-color: #3f3f5f;
				}

				/* ⑤ 砂漠（明るめ：昼間の砂丘） */
				.Desert-theme {
				  --bg-color: #fcf8f2; /* オフホワイトに近い明るい砂色 */
				  --sel-color: #ebe0d6;
				  /* カード背景：白っぽい砂色から、温かみのあるサンドベージュへ */
				  --card-bg: linear-gradient(to bottom, #ffffff, #e6cea0);
				  /* 背景が明るいため、文字色は濃い茶色に変更 */
				  --text-color: #4e342e;

				  --accent-cyan: #00acc1; /* オアシスの碧 */
				  --accent-red: #ff8a65;  /* 照りつける太陽 */
				  --accent-green: #8d6e63;

				  --border-color: #d7ccc8;
				}

				/* ⑥ 明るめの森林（木漏れ日・新緑） */
				.Forest-theme {
				  --bg-color: #f1f8e9;
				  --sel-color: #c5e1a5;
				  /* カード背景：明るい緑から白へのグラデーション */
				  --card-bg: linear-gradient(to bottom, #dcedc8, #ffffff);
				  /* 背景が明るいため文字色を濃く変更 */
				  --text-color: #1b5e20;

				  --accent-cyan: #29b6f6; /* 空の色 */
				  --accent-red: #ef5350;  /* 木の実 */
				  --accent-green: #66bb6a;

				  --border-color: #aed581;
				}

				/* ⑦ 武家屋敷（シック：黒鉄・燻し銀・古畳の陰影） */
				.Samurai-theme {
				  --bg-color: #121212; /* 漆黒に近い墨色 */
				  --sel-color: #2a2a2a;
				  /* カード背景：黒鉄（くろがね）色から、深い常盤色（暗い緑味）へのグラデーション */
				  --card-bg: linear-gradient(to bottom, #2b2b2b, #1c211e);
				  /* 背景を暗くしたため、文字色は和紙のような生成り色へ */
				  --text-color: #dcdcd6;

				  --accent-cyan: #7db4b4; /* 錆浅葱（さびあさぎ）：くすんだ青緑 */
				  --accent-red: #a84646;  /* 弁柄（べんがら）色：落ち着いた赤 */
				  --accent-green: #6f7d63; /* 海松（みる）色：茶色みのある渋い緑 */

				  --border-color: #ebf6f7;
				}

				/* ⑧ 澄んだ青空（修正：白文字が映える青空） */
				.Sky-theme {
				  --bg-color: #039be5; /* 白文字が読める、濃いめのスカイブルー */
				  --sel-color: #0277bd;
				  /* カード背景：鮮やかな水色から少し深い青へ */
				  --card-bg: linear-gradient(to bottom, #29b6f6, #0288d1);
				  /* 文字色：雲の白 */
				  --text-color: #ffffff;

				  --accent-cyan: #e1f5fe; /* 非常に薄い水色 */
				  --accent-red: #ffd600;  /* 太陽の黄色 */
				  --accent-green: #69f0ae;

				  --border-color: #81d4fa;
				}

    /* === Base Styles === */
    body {
      background: var(--bg-color);
      color: var(--text-color);
      font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
      margin: 0;
      padding: 20px;
      line-height: 1.6;
    }

    .container, section {
      max-width: 1000px;
      margin: 0 auto;
      
      /* ★変更：変数化 */
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      padding: 10px;
    }

    /* === Tab Navigation System === */
    .tab-navigation {
        display: flex;
        /* ★変更：変数化 */
        border-bottom: 2px solid var(--border-color);
        margin-bottom: 0px;
    }
    .tab-btn {
        flex: 1;
        padding: 12px 10px;
        
        /* ★変更：変数化（背景と枠線） */
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-bottom: none; /* 下線は消す */
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        
        /* ★変更：未選択時の文字色も少し透過させた変数へ */
        color: var(--text-color);
        opacity: 0.7;

        font-size: 1rem;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s;
        border-radius: 8px 8px 0 0;
        margin: 0 2px; 
    }
    .tab-btn:hover {
        opacity: 1;
        filter: brightness(1.2); /* 明るくする */
    }
    .tab-btn.active {
        opacity: 1;
        color: var(--accent-cyan);
        border-bottom-color: var(--accent-cyan);
        /* 背景色にアクセントを薄く乗せる */
        background-color: rgba(0, 210, 255, 0.1); 
        /* グラデーションを維持したい場合は background: var(--card-bg) のままでもOK */
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.4s;
    }
    .tab-content.active {
        display: block;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .pro_box{
     background-color:orange;
     font-size:10px;
     width:36px;
     height:14px;
     color:white;
     position: relative;
     top: -2px;
     left: -2px;
    }
    .offline_box{
     background-color:yellow;
     font-size:10px;
     color:black;
     position: relative;
     top: -2px;
     left: -2px;
    }
    .online_box{
     background-color:lime;
     font-size:10px;
     color:black;
     position: relative;
     top: -2px;
     left: -2px;
    }
    /* Video Area */
    .video-wrapper {
      width: 100%;
      max-width: 430px;
      height: 220px;
      background-color: #000; /* 動画背景は黒固定でOK */
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      
      /* ★変更：変数化 */
      border: 2px solid var(--border-color);
      
      transition: 0.3s;
      position: relative;
    }
    video,#vvv {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* 録画中の赤枠 */
    body.recording-active .video-wrapper {
        border-color: var(--accent-red);
        box-shadow: 0 0 30px rgba(255, 59, 59, 0.5);
        animation: pulse-border 2s infinite;
    }
    @keyframes pulse-border {
        0% { box-shadow: 0 0 10px rgba(255, 59, 59, 0.3); }
        50% { box-shadow: 0 0 30px rgba(255, 59, 59, 0.8); }
        100% { box-shadow: 0 0 10px rgba(255, 59, 59, 0.3); }
    }

    /* Status Bar */
    .status-bar {
      font-family: 'Consolas', monospace;
      
      /* ★変更：変数化 */
      background: var(--card-bg); 
      border-bottom: 2px solid var(--border-color);
      
      padding: 4px 7px;
      border-radius: 4px;
      margin-bottom: 15px;
      font-size: 12px;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      align-items: center;
    }
    .status-badge,#not_time {
        padding: 2px 2px;
        border-radius: 3px;
        font-size:12px;
        /* ★変更：変数化（背景色を少し暗くするか、ボーダー色を使う） */
        background: var(--bg-color);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        nowrap;
    }
    .status-bar #memo {
        padding: 2px 2px;
        border-radius: 3px;
        font-size:12px;
        /* ★変更：変数化（背景色を少し暗くするか、ボーダー色を使う） */
        background: yellow;
        color: black;
        border: 1px solid var(--border-color);
        nowrap;
    }
/*------------------------------------------------*/
.btn-group {
      display: flex;
      gap: 5px; /* 隙間を少し詰める */
      flex-wrap: nowrap; /* ★重要：絶対に折り返さない */
      justify-content: center;
      margin: 15px 0;
      width: 100%;
      margin-top: -5px;
      
      /* ▼▼▼ 画面が狭い時に全体を縮小する魔法 ▼▼▼ */
      /* 画面幅が600px以下になったら、このエリアだけ0.75倍(75%)に縮小表示 */
      @media (max-width: 600px) {
        zoom: 0.95; 
      }
      /* さらに狭い時用（必要なら） */
      @media (max-width: 400px) {
        zoom: 0.6; 
      }
    }

    .btn-group button {
      border: none;
      padding: 2px 6px; /* 左右の余白を少しダイエット */
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
      color: black;
      display: flex;
      align-items: center;
      gap: 3px; /* アイコンと文字の隙間も少し詰める */
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      
      min-height: 42px;
      justify-content: center;
      
      /* ▼▼▼ これも追加（ボタン自体も潰れるのを許可） ▼▼▼ */
      flex-shrink: 1; 
      white-space: nowrap; /* ボタン内の文字が勝手に改行されるのを防ぐ */
    }
    
    /* 「画面共有」ボタンだけは<br>が入っているので例外対応 */
    .btn-group #btn_setup {
       white-space: normal !important; 
       line-height: 1.1;
       text-align: center;
       color: var(--text-color);
    }
 
    .btn-group #btn_license {
       white-space: normal !important; 
       line-height: 1.1;
       background-color: var(--sel-color);
       color:white;
       text-align: center;
       color: var(--text-color);
    }
 
    button:disabled {
      background-color: var(--border-color) !important;
      color: #777 !important;
      cursor: not-allowed;
      box-shadow: none;
    }
    .btn-group button:hover:not(:disabled) {
      transform: translateY(-2px);
      filter: brightness(1.1);
    }

    /* 個別ボタン色はそのまま（アクセントカラーとして機能するため） */
    .btn-group #btn_setup { 
     background: linear-gradient(135deg, #005f73, #0a9396);
    }
    /* 無効化（disabled）時のスタイル */
    .btn-group #btn_setup:disabled {
        background: #cccccc; /* グレーに変更 */
        color: #666666;      /* 文字色も薄く */
        cursor: not-allowed; /* 禁止マークのカーソル */
        box-shadow: none;    /* 影を消す */
        transform: none;     /* 動きを止める */
    }
    /* ----- 質問のコード（開始ボタン） ----- */
    .btn-group #start { 
        background: linear-gradient(135deg, #9b2226, #ae2012);
        color: white;
    }

    /* ----- 修正版：激しい点滅アニメーション ----- */
    @keyframes flash {
        0% { 
            opacity: 1; 
            box-shadow: 0 0 10px 5px rgba(255, 108, 3, 0.8); /* 強く光る */
            transform: scale(1.02); /* ほんの少し大きく */
        }
        50% { 
            opacity: 0.4; /* 透明度をかなり下げる */
            box-shadow: 0 0 0 0 rgba(255, 108, 3, 0); /* 光を消す */
            transform: scale(1);
        }
        100% { 
            opacity: 1; 
            box-shadow: 0 0 10px 5px rgba(255, 108, 3, 0.8);
            transform: scale(1.02);
        }
    }

    .btn-group .Recording {
        background-color: #ff6c03 !important; /* !importantで背景グラデを上書き */
        color: white;
        /* 1.5s -> 0.6s に短縮（速くする）
           infinite で無限繰り返し
        */
        animation: flash 1.5s infinite ease-in-out;
        border: 2px solid #fff; /* 白枠をつけてより目立たせる */
    }
   
    /* ★変更：変数化 */
    .btn-group #stop {
     background-color: light-gray;
     border: 1px solid var(--border-color);
     color: black;
    }
    .btn-group #reload {
     /*background: #2f855a;*/
    }
    /* ★変更：変数化 */
    .btn-group #camera_btn { 
     background-color: #d97706;
     color: var(--text-color);
     border: 1px solid var(--border-color);
    }
    
	/* チェックボックス自体は消す */
	.btn-group #chk_use_mic {
	  display: none;
	}

	/* ボタンの共通スタイル */
	.btn-group .mic-toggle-btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  height: 46px; /* 周りのボタンの高さ */
	  padding: 0 10px; /* 横幅調整 */
	  margin-left: 8px;
	  
	  /* ▼ OFFの状態（浮き上がっている） */
	  background: linear-gradient(to bottom, #ffffff, #f1f1f1); /* 上から下へ少し暗くして立体感 */
	  border: 1px solid #c5c5c5;
	  border-bottom-color: #b0b0b0; /* 下の枠線を少し濃くして影っぽく */
	  border-radius: 3px;
	  color: #454545;
	  font-weight: bold;
	  font-size: 11px; /* 2行になるので少し小さく */
	  line-height: 1.2;
	  text-align: center;
	  
	  cursor: pointer;
	  user-select: none;
	  box-sizing: border-box;
	  vertical-align: middle;
	  
	  /* 浮き上がり用の影 */
	  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	  transition: all 0.1s;
	}

	/* ▼ 文字の切り替えロジック (\A が改行コードです) */
	/* OFFの時の文字 */
	.btn-group .mic-toggle-btn::before {
	  content: "マイク\A OFF"; 
	  white-space: pre; /* これがないと改行されない */
	  color: #666;
	}

	/* ▼ 英語の時 (:lang(en)) の上書き設定 */
	:lang(en) .btn-group .mic-toggle-btn::before {
	  content: "MIC\A OFF"; /* 英語表記に変更 */
	}

	/* ONの時の文字 */
	.btn-group .btn-group #chk_use_mic:checked + .mic-toggle-btn::before {
	  content: "マイク\A ON";
	  white-space: pre;
	  color: #c00; /* ONの時は文字を赤っぽくして目立たせる（お好みで黒 #000 に） */
	}

	/* 英語 ON */
	:lang(en) .btn-group #chk_use_mic:checked + .mic-toggle-btn::before {
	  content: "MIC\A ON";
	}

	/* ▼ ONの状態（ガッツリ凹ませる） */
	.btn-group #chk_use_mic:checked + .mic-toggle-btn {
	  background: #e6e6e6; /* 暗めのグレー */
	  border-color: #adb5bd;
	  
	  /* ★重要：内側に濃い影を落として「穴」っぽく見せる */
	  box-shadow: inset 2px 3px 6px rgba(0,0,0,0.25);
	  
	  /* 押された物理的な動きを表現（少し下にズレる） */
	  transform: translateY(1px); 
	  border-bottom-color: #adb5bd; /* 下枠線の濃さを戻す */
	}

	/* マウスホバー時 */
	.btn-group .mic-toggle-btn:hover {
	  background: #f8f9fa;
	}
	.btn-group #chk_use_mic:checked + .mic-toggle-btn:hover {
	  background: #dcdcdc; /* ONの時のホバーは少し暗く維持 */
	}/* チェックボックス自体は消す */
	.btn-group #chk_use_mic {
	  display: none;
	}

	/* ボタンの共通スタイル */
	.btn-group .mic-toggle-btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  height: 46px; /* 周りのボタンの高さ */
	  padding: 0 10px; /* 横幅調整 */
	  margin-left: 8px;
	  
	  /* ▼ OFFの状態（浮き上がっている） */
	  background: linear-gradient(to bottom, #ffffff, #f1f1f1); /* 上から下へ少し暗くして立体感 */
	  border: 1px solid #c5c5c5;
	  border-bottom-color: #b0b0b0; /* 下の枠線を少し濃くして影っぽく */
	  border-radius: 3px;
	  color: #454545;
	  font-weight: bold;
	  font-size: 11px; /* 2行になるので少し小さく */
	  line-height: 1.2;
	  text-align: center;
	  
	  cursor: pointer;
	  user-select: none;
	  box-sizing: border-box;
	  vertical-align: middle;
	  
	  /* 浮き上がり用の影 */
	  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	  transition: all 0.1s;
	}

	/* ▼ 文字の切り替えロジック (\A が改行コードです) */
	/* OFFの時の文字 */
	.btn-group .mic-toggle-btn::before {
	  content: "マイク\A OFF"; 
	  white-space: pre; /* これがないと改行されない */
	  color: #666;
	}

	/* ONの時の文字 */
	.btn-group #chk_use_mic:checked + .mic-toggle-btn::before {
	  content: "マイク\A ON";
	  white-space: pre;
	  color: #c00; /* ONの時は文字を赤っぽくして目立たせる（お好みで黒 #000 に） */
	}


	/* ▼ ONの状態（ガッツリ凹ませる） */
	.btn-group #chk_use_mic:checked + .mic-toggle-btn {
	  background: #e6e6e6; /* 暗めのグレー */
	  border-color: #adb5bd;
	  
	  /* ★重要：内側に濃い影を落として「穴」っぽく見せる */
	  box-shadow: inset 2px 3px 6px rgba(0,0,0,0.25);
	  
	  /* 押された物理的な動きを表現（少し下にズレる） */
	  transform: translateY(1px); 
	  border-bottom-color: #adb5bd; /* 下枠線の濃さを戻す */
	}

	/* マウスホバー時 */
	.btn-group .mic-toggle-btn:hover {
	  background: #f8f9fa;
	}
	.btn-group #chk_use_mic:checked + .mic-toggle-btn:hover {
	  background: #dcdcdc; /* ONの時のホバーは少し暗く維持 */
	}
/*------------------------------------------------*/
#settings_summary{
       text-align: center;
       font-size: 0.85rem;
       color: var(--text-color);
       margin: 10px auto;
       font-family: 'Consolas', monospace;
       background-color: var(--bg-color);
       padding: 6px 6px;
       border-radius: 4px;
       border: 1px solid #333;
       width: fit-content;
       min-width: 300px;
       margin-top: 10px;
}

/*------------------------------------------------*/
#reset_rec_time {
     background-color: var(--sel-color);
     font-size: 0.8rem; 
     border:none;
     color: var(--text-color);
     cursor:pointer;
    }
	#reset_rec_time:disabled {
	  cursor: not-allowed;       /* カーソルを駐車禁止マークに */
	  opacity: 0.6;              /* 薄くして押せない感を出す */
	  background-color: #ccc;    /* 必要なら色もグレーに変更 */
	  color: #666;               /* 文字色も変更する場合 */
	}
/*------------------------------------------------*/
#delete_btn {
     background-color: var(--bg-color);
     font-size: 0.8rem; 
     border:none; 
     color: var(--text-color);
     cursor:pointer;
    }
	#delete_btn:disabled {
	  cursor: not-allowed;       /* カーソルを駐車禁止マークに */
	  opacity: 0.6;              /* 薄くして押せない感を出す */
	  background-color: #ccc;    /* 必要なら色もグレーに変更 */
	  color: #666;               /* 文字色も変更する場合 */
	}
	/* labelタグをボタンと同じ見た目に整形 */

    /* Inputs & Selects */
    select, input[type="text"], textarea {
      /* ★変更：変数化（これが一番重要） */
      background-color: var(--sel-color);
      color: var(--text-color);
      /*border: 1px solid var(--border-color);*/
      
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 0.95rem;
      width: 100%;
      box-sizing: border-box;
    }
    .time-select-wrapper select {
        width: auto !important;
        display: inline-block;
        min-width: 50px;
        margin: 0 5px;
    }

    #moto_/* === Accordion (Settings) Styling === */
    #moto_details {
        /* ★変更：変数化 */
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        
        border-radius: 6px;
        margin-top: 5px;
        overflow: hidden;
        transition: all 0.3s;
    }
    #moto_details summary {
        padding: 12px 15px;
        
        /* ★変更：変数化（テーマごとのカード背景グラデーションを適用） */
        background: var(--card-bg);
        
        /* ★変更：変数化 */
        border: 1px solid var(--border-color);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        
        cursor: pointer;
        font-weight: bold;
        color: var(--text-color);
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.95rem;
    }
    #moto_details summary:hover {
        /* 変数に透明度を重ねるか、フィルタで明るくする */
        filter: brightness(1.2);
        color: var(--accent-cyan);
    }
    #moto_details summary::after {
        font-size: 0.8rem;
        transition: transform 0.3s;
    }
    #moto_details .details-content {
        padding: 20px;
        
        /* ★変更：変数化（中身は背景色に） */
        background-color: var(--bg-color);
        border-top: 1px solid var(--border-color);
    }

    /* Controls Layout */
    .control-group {
        margin-bottom: 15px;
    }
    .control-group select,.sel_time{
      border: 1px solid var(--border-color);
    }
    .control-group1 label {
      font-size: 0.85rem;
      /* ★変更：変数化（少し薄く） */
      color: var(--text-color);
      opacity: 0.7;
      
      margin-bottom: 5px;
      display: block;
    }
    
    .setting-row {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Guide & History */
				/* --- 既存のスタイル --- */
				.guide-section {
				  margin-top: 20px;
				  padding: 25px;
				  background: var(--card-bg);
				  color: var(--text-color);
				  border-radius: 8px;
				  text-align: left;
				  margin-bottom: 30px;
				}

				.guide-section h2, .guide-section h3 {
				  color: var(--accent-cyan);
				  border-bottom: 1px solid var(--border-color);
				  padding-bottom: 10px;
				  margin-top: 30px;
				  margin-bottom: 20px; /* 見出しの下にも余白を追加 */
				}

				/* --- ★ここから追加・変更 --- */

				/* 質問と回答のセットごとの余白 */
				.guide-section .faq-item {
				  margin-bottom: 24px; /* 次の質問までの間隔を広げる */
				  border-bottom: 1px solid var(--border-color); /* 薄い線で区切る（お好みで削除可） */
				  padding-bottom: 24px;
				}
				.faq-item:last-child {
				  border-bottom: none;
				  margin-bottom: 0;
				}

				/* 質問 (Q) */
				.guide-section .faq-q {
				  font-weight: bold;
				  color: var(--accent-cyan); /* 色をつけて目立たせる */
				  margin-bottom: 8px; /* 回答との隙間 */
				  font-size: 1.1em; /* 少し大きく */
				}

				/* 回答 (A) */
				.guide-section .faq-a {
				  margin-left: 0; /* 無理なインデントをやめる */
				  padding-left: 20px; /* 全体を綺麗に右にずらす */
				  border-left: 3px solid var(--border-color); /* 左に線を入れて読みやすくする */
				  line-height: 1.6; /* 行間を広げて読みやすく */
				  opacity: 0.9; /* 文字色を少し落ち着かせる */
				}

				/* キーボードショートカットの見た目（あれば） */
				.guide-section kbd {
				  background-color: #333;
				  color: #fff;
				  padding: 2px 6px;
				  border-radius: 4px;
				  font-family: monospace;
				  margin: 0 2px;
				  border: 1px solid #555;
				}




    /* 注：About/Disclaimer/Historyは特定の色味が重要なので、あえて変数は使わずそのままにします */
    .about-section {
        margin-top: 40px; 
        padding: 20px; 
        background-color: #e0e7ff; 
        color:var(--text-color:);
        border-radius: 8px; 
        border-left: 5px solid #3b82f6;
    }
    .disclaimer-section {
        margin-top: 40px; 
        padding: 20px; 
        color:var(--text-color:);
        background-color: #e0e7ff; 
        border-radius: 8px; 
        border-left: 5px solid #3b82f6;
    }
    .history-section {
        margin-top: 40px; 
        padding: 20px; 
        background-color: #e0e7ff; 
        color:var(--text-color:);
        border-radius: 8px; 
        border-left: 5px solid #3b82f6;
    }    
    .hidden { display: none; }

    /* Switch Design */
    .switch-container {
      display: flex;
      flex-direction: row; 
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
    }
    .toggle-switch {
      position: relative;
      width: 52px;
      height: 30px;
      flex-shrink: 0;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      
      /* ★変更：変数化（OFFのときの色） */
      background-color: var(--border-color);
      
      transition: .4s;
      border-radius: 34px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 4px;
      top: 0; bottom: 0; margin: auto 0;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    input:checked + .toggle-slider {
      background-color: var(--accent-cyan);
    }
    input:checked + .toggle-slider:before {
      transform: translateX(22px);
    }
    .toggle-label {
      font-size: 0.95rem;
      color: var(--text-color);
      font-weight: bold;
      white-space: nowrap; 
    }

    /* 720P Switch Style */
    .switch-720P-wrap {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        font-weight: bold;
        font-size: 14px;
        color: var(--text-color); /* ★変更 */
        user-select: none;
    }
    .switch-720P-wrap input { display: none; }
    .slider-720P {
        position: relative;
        width: 40px;
        height: 22px;
        background-color: var(--border-color); /* ★変更 */
        border-radius: 22px;
        transition: .4s;
        margin-right: 8px;
        flex-shrink: 0;
        border: 1px solid var(--border-color);
    }
    .slider-720P:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: .4s;
    }
    .switch-720P-wrap input:checked + .slider-720P { background-color: #2196F3; border-color: #2196F3; }
    .switch-720P-wrap input:checked + .slider-720P:before { transform: translateX(18px); }
    .text-720P {
      font-size: 1.0rem; 
      color: var(--text-color); /* ★変更 */
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    .input-group { margin-bottom: 15px; }
    .input-group label { display: inline-block; width: 100px; }
    .input-group input[type="text"] { padding: 5px; width: 200px; }

    /* === License Modal (Variable Applied) === */
    .license-modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.85); /* 背景は常に暗く */
      backdrop-filter: blur(4px);
      z-index: 10000;
      align-items: center;
      justify-content: center;
    }
    
    .license-modal-window {
      /* ★変更：変数化 */
      background: var(--card-bg);
      color: var(--text-color);
      border: 1px solid var(--accent-green); /* ライセンス認証らしい緑枠は維持 */
      
      width: 400px;
      padding: 30px;
      box-shadow: 0 0 25px rgba(76, 175, 80, 0.15);
      font-family: 'Consolas', 'Monaco', monospace;
      border-radius: 4px;
      text-align: left;
      box-sizing: border-box;
    }
    
    .license-modal-header {
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--accent-green); /* ★変更：変数使用 */
      border-bottom: 1px solid var(--border-color); /* ★変更 */
      padding-bottom: 10px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .license-modal-icon {
      animation: license-modal-blink 1s infinite;
      margin-right: 10px;
    }
    @keyframes license-modal-blink { 50% { opacity: 0; } }
    
    .license-modal-desc {
      font-size: 0.9rem;
      color: var(--text-color);
      opacity: 0.7;
      margin-bottom: 15px;
    }
    
    .license-modal-input-group {
      margin-bottom: 20px;
    }
    
    #license-modal-input {
      width: 100%;
      
      /* ★変更：変数化 */
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      color: var(--accent-green);
      
      padding: 15px;
      font-family: inherit;
      font-size: 1.1rem;
      outline: none;
      box-sizing: border-box;
      transition: 0.3s;
    }
    
    #license-modal-input:focus {
      border-color: var(--accent-green);
      box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
    }
    
    .license-modal-activate-btn {
      width: 100%;
      
      /* ★変更：変数化 */
      background: var(--accent-green);
      color: #000; /* ボタン文字は黒で固定（緑背景のため） */
      
      border: none;
      padding: 12px;
      font-weight: bold;
      font-family: inherit;
      font-size: 1rem;
      cursor: pointer;
      transition: 0.2s;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .license-modal-activate-btn:hover {
      filter: brightness(1.1);
      transform: translateY(-2px);
      box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
    }
    
    .license-modal-activate-btn:active {
      transform: translateY(0);
    }
    
    .license-modal-close-btn {
      background: none; border: none; 
      color: var(--text-color); /* ★変更 */
      font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;
    }
    .license-modal-close-btn:hover { 
      color: var(--accent-red); 
    }
    
    .license-modal-shake-anim {
      animation: license-modal-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    }
    
    @keyframes license-modal-shake {
      10%, 90% { transform: translate3d(-1px, 0, 0); }
      20%, 80% { transform: translate3d(2px, 0, 0); }
      30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
      40%, 60% { transform: translate3d(4px, 0, 0); }
    }
@keyframes hologram {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.pro-badge-holo {
    align-items: center;
    justify-content: center; 
    line-height: 1;
    margin-right: 8px;
    padding: 4px 4px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
    
    /* ホログラムグラデーション */
    background: linear-gradient(135deg, #800080, #00d2ff);
    
    /* 外側を少し発光させる */
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
    border: 1px solid rgba(255,255,255,0.3);
    
    /* 色相を回転させるアニメーション */
    animation: hologram 4s linear infinite;
}
.free-badge-holo {
    padding: 4px 4px;
    border-radius: 4px;
    font-weight: bold;
    /* 真っ白だとコントラストが強すぎるので、少しグレー寄りの白に */
    color: #e0e0e0;
    
    /* 深いモスグリーン → 暗いオリーブ色 のグラデーション */
    background: linear-gradient(135deg, #1b4d1e, #5c5c0a);
    
    /* 枠線もかなり控えめに */
    border: 1px solid rgba(255,255,255,0.1);
    
    /* 発光・アニメーションは無し */
    box-shadow: none;
}
.select_time_editable-select,
.select_time_editable-input {
    /* 横幅の調整（親要素に合わせて伸縮） */
    flex: 1; 
    min-width: 120px; /* 最低限の幅 */
    
    background-color: var(--sel-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 1rem;
    height: 38px; /* 高さ固定 */
    box-sizing: border-box;
    vertical-align: middle;
}

/* 編集モード時の入力欄 */
.select_time_editable-input {
    background-color: #000; /* 入力中は黒背景で目立たせる */
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    font-weight: bold;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 210, 255, 0.3);
}

/* ボタン群のレイアウト */
.select_time_edit-btn-group {
	margin-top: 5px; /* ★ここを調整（5px〜15pxくらいで好きな位置に） */
	  
	  /* ↓以下は見た目を整えるためのおすすめ設定 */
	  display: flex;
	  gap: 5px;         /* ボタン同士の間隔 */
	  justify-content: flex-start; /* 左寄せ（中央なら center） */
	}

.select_time_edit-btn-group button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.select_time_edit-btn-group button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-cyan);
}

/* 削除ボタンのみホバー時に赤くする */
#select_time_btn_del_opt:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}
/*🌸 桜吹雪の実装コード*/
/* 親玉（ここより外には影響しない） */
#sakura-stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 下のボタンを押せるようにする */
    z-index: 99999;
    overflow: hidden;
}

/* #sakura-stage の中にある .petal にしか適用されない */
#sakura-stage .petal {
    position: absolute;
    background-color: #ffc0cb;
    border-radius: 150% 0 150% 0;
    animation: sakura-fall linear infinite;
}

/* アニメーション名も被らないように固有の名前にしておく */
/* アニメーション定義 */
@keyframes sakura-fall {
    /* 0% : スタート地点（画面の少し上） */
    0% {
        opacity: 0;
        transform: translateY(-10px) rotate(0deg) translateX(0px);
    }
    
    /* ▼▼▼ 追加 ▼▼▼ */
    /* 5% : 少し落ちてきた地点（だいたい10px〜20pxくらい）までは透明のまま */
    5% {
        opacity: 0;
        /* 少し回転と落下を進めておく */
        transform: translateY(10px) rotate(10deg) translateX(5px);
    }
    /* ▲▲▲ 追加 ▲▲▲ */

    /* 20% : ここで完全に姿が見えるようになる */
    20% {
        opacity: 1;
    }

    /* 100% : 画面一番下 */
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(360deg) translateX(50px);
    }
}
/*--------------------------------*/
/* 共通の文字スタイル（SYS/MIC兼用） */
.meter-label {
    position: absolute;
    top: 4;
    left: 2px;
    width: 100%;
    height: 100%;
    font-size: 10px;
    line-height: 12px;
    font-family: sans-serif;
    font-weight: 900;
    color: silver;
    z-index: 20;
    pointer-events: none;
    opacity: 0.8;
}

#video-wrapper1{
            bottom: 0px;
            right: 10px;
            width: 50px;
            height: 12px;
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.7);
            border:1px solid white;
            border-radius: 2px;
            z-index: 10;
            //display: none;
            pointer-events: none;
}
#micMeterBar{
                width: 0%;
                height: 100%;
                background-color: Lime;
                transition: width 0.05s ease-out;

}
#video-wrapper2{
            bottom: 12px;
            right: 10px;
            width: 50px;
            height: 12px;
            background: rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.7);
            border:1px solid white;
            border-radius: 2px;
            z-index: 10;
            //display: none;
            pointer-events: none;
}
#systemMeterBar{
            width: 0%;
            height: 100%;
            background-color: Yellow;
            transition: width 0.05s ease-out;

}

/*--------------------------------*/
#language-selector1,#language-selector2{
        width: 60px; 
        height: 30px; 
        font-size: 10px; 
        background: var(--sel-color); 
        color: var(--text-color); 
        border: 1px solid #555; 
        border-radius: 4px; 
        z-index: 100;
        cursor: pointer;
}

/*--------------------------------*/
.tiger-btn {
  /* == 指定サイズ (縦25 横80) == */
  width: 240px;
  height: 50px;
  /* 重要: paddingやborderを含めてこのサイズに固定する設定 */
  box-sizing: border-box;

  /* == トラスタイル == */
  /* 虎らしいオレンジのグラデーション背景 */
  background: linear-gradient(to bottom, #ffc107, #ff9800);
  /* 力強い黒の文字と枠線 */
  color: #222;
  border: 2px solid #222;
  /* 丸みを帯びたピル型形状 */
  border-radius: 12.5px;
  /* 若干の立体感 */
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);

  /* == レイアウトとフォント調整 == */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* サイズ内に収めるためフォントは極小(9px)になります */
  font-size: 14px;
  font-weight: 800; /* 太字で見やすく */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: nowrap; /* テキストの折り返し防止 */
  padding: 0 2px; /* 内部の余白を最小限に */
  cursor: pointer;
  transition: all 0.1s ease-in-out; /* 滑らかな動き */
  text-shadow: 0 1px 0 rgba(255,255,255,0.4); /* 文字の視認性向上 */
}

/* アイコン(絵文字)の個別調整 */
.tiger-btn .tiger-icon {
    font-size: 11px; /* 絵文字は少しだけ大きく */
    margin-right: 2px; /* テキストとの隙間を微調整 */
}

/* == マウスオーバー時の動き (ホバー) == */
.tiger-btn:hover {
  background: linear-gradient(to bottom, #ffd54f, #ffb300); /* 少し明るく */
  transform: translateY(-1px); /* 少し浮き上がる */
  box-shadow: 0 3px 2px rgba(0,0,0,0.15);
}

/* == クリック時の動き (アクティブ) == */
.tiger-btn:active {
  background: #e68a00; /* 暗いオレンジ */
  transform: translateY(1px); /* 沈み込む */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* 内側の影で押した感を出す */
}
/*--------------------------------*/
#mic_list_area{
 right: 65px;
 top: 155px;
}
#mic_list_area .mic-menu {
  list-style: none;     /* ・を消す */
  padding: 0;
  margin: 0;
  background: #333;     /* 背景色 */
  border: 1px solid #555;
  border-radius: 4px;
  max-width: 300px;
}

#mic_list_area .mic-menu li {
  padding: 10px 15px;
  border-bottom: 1px solid #444;
  cursor: pointer;      /* マウスカーソルを指に */
  color: #fff;
  font-size:12px;
  transition: background 0.2s;
}

#mic_list_area .mic-menu li:last-child {
  border-bottom: none;
}

#mic_list_area .mic-menu li:hover {
  background: #555;     /* ホバー時の色 */
}

/* 選択中のマイクを目立たせる */
#mic_list_area .mic-menu li.selected {
  background: #d97706;  /* オレンジ色など */
  font-weight: bold;
}
#mic_list_area .mic-menu li.selected::before {
  content: "✔ ";
}

/*--------------------------------*/

/* --- フローティングパネル (マイク操作盤) --- */
/* --- フローティングパネル (マイク操作盤) --- */
/* --- フローティングパネル (白太枠・ドラッグ対応版) --- */
#mic_float_panel {
    /*position: fixed;*/
    top: -50px;          /* 初期位置(上) */
    left: 15px;         /* 初期位置(左) - ドラッグのためrightではなくleft推奨 */
    right:0px;
    width: 220px;       /* 枠の分少し広げました */
    max-height: 80vh;
    overflow-y: auto;
    
    /* デザイン設定 */
    background: rgba(0, 0, 0, 0.5); /* 半透明 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 3px solid #fff;         /* ★白太枠 */
    border-radius: 12px;
    color: #fff;
    padding: 10px;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    
    /* ドラッグ用設定 */
    cursor: move;      /* カーソルを移動アイコンに */
    user-select: none; /* テキスト選択防止 */
    touch-action: none; /* タッチデバイスでのスクロール干渉防止 */
}

/* 閉じるボタンなどを押しやすく */
#mic_float_panel .mic-panel-title {
    margin-bottom: 10px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- 以下、トグルスイッチ等は変更なし --- */
#mic_float_panel .mic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 2px 0;
}
#mic_float_panel .mic-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
    font-size: 12px;
    cursor: default; /* ラベルは矢印カーソル */
}
#mic_float_panel .toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 10px;
    flex-shrink: 0;
    cursor: pointer; /* スイッチは指カーソル */
}
#mic_float_panel .toggle-switch input { opacity: 0; width: 0; height: 0; }
#mic_float_panel .slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #666; transition: .4s; border-radius: 34px;
}
#mic_float_panel .slider:before {
    position: absolute; content: "";
    height: 14px; width: 14px; left: 3px; bottom: -2px;
    background-color: white; transition: .4s; border-radius: 50%;
}
#mic_float_panel input:checked + .slider { background-color: #28a745; }
#mic_float_panel input:checked + .slider:before { transform: translateX(14px); }
}

/*--------------------------------*/
.info-icon-box {
				display: flex;
				align-items: center;
				border: 1px solid #ddd;
				padding: 10px;
				margin-bottom: 10px;
}
/*--------------------------------*/
/* =========================================
   OPFS Explorer (内部ストレージ管理) スタイル
   ========================================= */

/* コンテナ全体（親スタイルの影響を強制リセット） */
#opfs_explorer {
    all: initial; /* ★ここが重要：親のCSSを遮断 */
    
    display: block;
    width: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    background: transparent;
    box-sizing: border-box;
    margin-top: 0px;
    padding-top: 0px;
    text-align: left;
    line-height: 1.5;
}

/* 内部要素のボックスサイズ統一 */
#opfs_explorer * {
    box-sizing: border-box;
}

/* タイトル */
#opfs_explorer h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    border: none;
    padding: 0;
}

/* ボタンエリア */
#opfs_explorer .control-panel {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
}

/* 共通ボタン設定 */
#opfs_explorer .opfs-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    background: #f0f0f0;
    color: #333;
    transition: background 0.2s;
}
#opfs_explorer .opfs-btn:hover {
    background: #e0e0e0;
}

/* 非表示用クラス */
#opfs_explorer .d-none {
    display: none !important;
}

/* メッセージ（エラーや読み込み中） */
#opfs_explorer .status-msg {
    font-size: 13px;
    color: #666;
    margin: 0 0 10px 0;
}

/* --- カードリストエリア --- */
#opfs_explorer .opfs-list-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* 幅に応じて自動列調整 */
    gap: 15px;
    width: 100%;
}

/* 各ファイルカード */
#opfs_explorer .opfs-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* サムネイル枠 */
#opfs_explorer .thumb-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9の比率を確保 */
    background: #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: #aaa;
    font-size: 11px;
}
#opfs_explorer .thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 情報テキストエリア */
#opfs_explorer .info-area {
    font-size: 12px;
    color: #444;
}
#opfs_explorer .filename {
    font-weight: bold;
    font-size: 13px;
    word-break: break-all; /* 長いファイル名も折り返す */
    margin-bottom: 5px;
    color: #000;
}
#opfs_explorer .meta-row {
    color: #666;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

/* 保存・削除ボタンエリア */
#opfs_explorer .action-area {
    display: flex;
    gap: 8px;
    margin-top: auto; /* 下寄せ */
}
#opfs_explorer .btn-action {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: white;
    font-family: inherit;
    transition: opacity 0.2s;
}
#opfs_explorer .btn-action:hover {
    opacity: 0.85;
}

/* 色分け */
#opfs_explorer .btn-dl { background-color: #007bff; } /* 青 */
#opfs_explorer .btn-del { background-color: #dc3545; } /* 赤 */
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/
/*--------------------------------*/