/*リモコン------------------------------------------------------------------------*/

/*ctrl+5　でキャッシュクリア*/

/* 共通基本レイアウト (リモコンのラッパー要素) */
.remote-body {
    background-color: #f8f9fa; /* 薄い背景色 */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto; /* 中央寄せ */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 軽い影 */
    font-family: Arial, sans-serif; /* 基本フォント */
    color: #333; /* 基本テキスト色 */
    overflow: hidden; /* 内容がはみ出さないように */
   
    font-size: 16px; /* rem単位の基準となるfont-sizeを設定します */
    max-width: 250px; /* 最大幅を設定して、画面サイズに応じて縮小 */
    width: 100%; /* 画面幅に応じて自動調整  */

}

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


/* ボタンの共通スタイル */
.remote-button {
    width: 100%;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #a8a8a8ea;
    
    /* ☆☆☆ 修正点1: height: 0; と position: relative; を追加 ☆☆☆ */
    height: 0;
    position: relative;
    overflow: hidden; /* 子要素がはみ出さないように隠す */
    padding: 0; /* paddingで高さを確保するので、デフォルトのpaddingは0にする */
}

/* 縦幅が横幅の20%になるクラス */
.remote-button-h20 {
    padding-top: 20%;
}
/* 縦幅が横幅の50%になるクラス */
.remote-button-h50 {
    padding-top: 50%;
}
.remote-button-text {
    
    font-weight: bold;
    text-align: center;
    width: 100%;
    white-space: nowrap;      /* 改行を強制的に無効にする */
    overflow: hidden;         /* はみ出した部分を隠す */
    text-overflow: ellipsis;  /* はみ出したテキストを ... で表示 */
}
.remote-button-text {
    
    font-weight: bold;
    text-align: center;
    width: 100%;
    white-space: nowrap;      /* 改行を強制的に無効にする */
    overflow: hidden;         /* はみ出した部分を隠す */
    text-overflow: ellipsis;  /* はみ出したテキストを ... で表示 */
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.remote-label-text {
    font-weight: bold;
    text-align: center;
    width: 100%;
    white-space: nowrap;      /* 改行を強制的に無効にする */
    overflow: hidden;         /* はみ出した部分を隠す */
    text-overflow: ellipsis;  /* はみ出したテキストを ... で表示 */
}

.remote-dial-text {
    font-weight: bold;
    text-align: center;
}

.remote-button-str1 {
    /* 最小10px、理想は画面幅の4.8%（250pxで12pxになる）、最大12px */
    font-size: clamp(10px, 4.8vw, 12px);
}
.remote-button-str2 {
    /* 最小12px、理想は画面幅の6.0%（250pxで15pxになる）、最大15px */
    font-size: clamp(10px, 6.0vw, 15px);
}
.remote-button-str3 {
    /* 最小15px、理想は画面幅の8.0%（250pxで20pxになる）、最大20px */
    font-size: clamp(12px, 8.0vw, 20px);
}

/* ホバー時のスタイル */
.remote-button:hover {
    filter: brightness(1.1); /* 明るくする */
}

/* クリック時のスタイル (擬似クラス active) */
.remote-button:active {
    transform: scale(0.98); /* 少し縮むアニメーション */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); /* 押し込まれたような影 */
}

/* ボタンの種類に応じた基本色 */
.button-blue { background-color: #007bff;} /* 主要なアクション（標準の青） */
.button-indigo { background-color: #6610f2;} /* 藍色系 */
.button-purple { background-color: #6f42c1;} /* 紫系 */
.button-pink { background-color: #e83e8c;} /* ピンク系 */
.button-red { background-color: #dc3545;} /* 危険/警告（赤） */
.button-orange { background-color: #fd7e14;} /* 暖色系（オレンジ） */
.button-yellow { background-color: #ffc107;} /* 警告/注意（黄、文字色は濃いめに） */
.button-green { background-color: #28a745;} /* 成功/肯定（緑） */
.button-teal { background-color: #20c997;} /* 青緑系 */
.button-cyan { background-color: #17a2b8;} /* 情報/中立（水色） */
.button-white { background-color: #fff; border: 1px solid #dee2e6; } /* 白系（明るい背景色に合うようにボーダーと文字色を設定） */
.button-gray { background-color: #6c757d;} /* 二次的なアクション（グレー） */
.button-dark-gray { background-color: #343a40;} /* 濃いグレー系 */
.button-light-gray { background-color: #f8f9fa;border: 1px solid #dee2e6; } /* 薄いグレー系（明るい背景色に合うようにボーダーと文字色を設定） */
.button-black { background-color: #000;} /* 強調/暗い背景（黒） */

/* ◎型ボタンのデザイン ------------------------------------------------------------------------------ */

/* 全体のコンテナ */
.remote-dial-container {
    position: relative;
    /* 修正点: 固定ピクセル値から相対単位に変更 */
    /* width: 50vw; /* 例: 画面幅の30% */
    /* height: 50vw; /* 正方形を維持するためにwidthと同じ値を設定 */

    /* 最小幅を100px、理想を画面幅の30vw、最大幅を200pxに設定 */
    width: clamp(50px, 50vw, 150px);
    /* 正方形を維持するためにheightも同じ値に設定 */
    height: clamp(50px, 50vw, 150px);

    /* または最大幅を設定して、小さくなりすぎないようにする
    max-width: 200px;
    max-height: 200px;
 */
    /*min-width: 100px; /* 小さくなりすぎるのを防ぐ */
    /*min-height: 100px; /* 小さくなりすぎるのを防ぐ */

    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #a8a8a8ea;
    margin: 0 auto; /* 中央寄せ */
}

/* 周囲の各方向ボタンの共通スタイル */
.remote-dial-button {
    position: absolute; /* コンテナに対して絶対配置 */
    background-color: #ffffff; /* 白い背景 */
    color: #333; /* 文字色 */
    border: none;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    /*flex-direction: column; /* アイコンとテキストを縦に */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0; /* パディングは個別調整 */
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-size: clamp(5px, 4vw, 12px);
}

.remote-dial-button:hover {
    filter: brightness(1.05); /* 少し明るく */
}

.remote-dial-button:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.remote-dial-button i {
    margin-bottom: 2px;
    color: #333;
}
.remote-dial-button span {
    line-height: 1.2;
}

/* 中央のボタン */
.remote-dial-button-center {
    position: relative;
    /* 修正点: 固定ピクセル値から相対単位に変更（親の幅に依存） */
    width: 55%; /* remote-dial-containerの幅の45% */
    height: 55%; /* remote-dial-containerの高さの45% */
    border-radius: 50%;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}


/* 上下左右のボタンの位置と形状 */
.remote-dial-button-top {
    top: 0px;
    left: 50%;
    width: 70%; /* remote-dial-containerの幅の40% */
    height: 30%; /* remote-dial-containerの高さの30% */
    transform: translateX(-50%); /* 水平中央 */
    border-radius: 0 0 50% 50% / 0 0 100% 100%; /* 下側を大きく丸める */
    /* padding-top: 5px; /* テキストを下に寄せる */
    /*: column-reverse; /* アイコンが下、テキストが上 */
    flex-direction: column;
}

.remote-dial-button-bottom {
    bottom: 0px;
    left: 50%;
    width: 70%; /* remote-dial-containerの幅の40% */
    height: 30%; /* remote-dial-containerの高さの30% */
    transform: translateX(-50%); /* 水平中央 */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* 上側を大きく丸める */
    /* padding-bottom: 5px; /* テキストを上に寄せる */
    flex-direction: column;
    padding-top: 5px; /* テキストを下に寄せる */
}

.remote-dial-button-left {
    left: 0px;
    top: 50%;
    width: 30%; /* remote-dial-containerの幅の40% */
    height: 70%; /* remote-dial-containerの高さの30% */
    transform: translateY(-50%); /* 垂直中央 */
    border-radius: 0 50% 50% 0 / 0 100% 100% 0; /* 右側を大きく丸める */
    /* padding-left: 5px; /* テキストを右に寄せる */
    flex-direction: row;
}

.remote-dial-button-right {
    right: 0px;
    top: 50%;
    width: 30%; /* remote-dial-containerの幅の40% */
    height: 70%; /* remote-dial-containerの高さの30% */
    transform: translateY(-50%); /* 垂直中央 */
    border-radius: 50% 0 0 50% / 100% 0 0 100%; /* 左側を大きく丸める */
    /* padding-right: 5px; /* テキストを左に寄せる */
    flex-direction: row;
}


/* 編集モードのデザイン ------------------------------------------------------------------------------ */
.remote-edit-mode button.remote-button,
.remote-edit-mode button.remote-dial-button,
.remote-edit-mode div.remote-dial-container
{
    /* 編集モード時のボタンの見た目 */
    border-color: #007bff; /* 青い枠線に変更 */
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* 青い光る影 */
    /*opacity: 0.8; /* 少し透明にして編集モード感 */
    /*cursor: not-allowed; /* 操作できないカーソル */
    /*pointer-events: none; /* クリックイベントを無効にする */
}
/* 未割り当てボタンのスタイル */
.noset-signal {
    opacity: 0.3;
    
    /* box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25); /* 未設定を示す赤い枠線など、他のスタイルも追加可能 */
}