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

/*ctrl+5　でキャッシュクリア*/
:root {
    /* カラー変数 */
    --remote-bg-color: #f8f9fa; /* リモコンパネルの背景色 */
    --remote-border-color: #dee2e6; /* ボーダー色 */
    --remote-text-color: #333; /* 基本テキスト色 */
    --remote-shadow-light: 0 4px 8px rgba(0,0,0,0.1); /* 軽い影 */
    --remote-shadow-inset: inset 0 2px 4px rgba(0,0,0,0.2); /* 押し込み時の影 */
    --remote-gap-sm: 5px; /* 小さいギャップ */
    --remote-gap-md: 10px; /* 中間のギャップ */
    --remote-gap-lg: 15px; /* 大きいギャップ */
    --remote-border-radius-sm: 5px; /* 小さな角丸 */
    --remote-border-radius-md: 8px; /* 中間の角丸 */
    --remote-border-radius-lg: 12px; /* 大きな角丸 */
}

/* 共通基本レイアウト (リモコンのラッパー要素) */
.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; /* 内容がはみ出さないように */
}

/* リモコン内の行（ボタンのグループ） */
.remote-row {
    display: flex;
    justify-content: center; /* ボタンのグループを水平中央に配置 */
    gap: 10px; /* ボタン間の水平方向の余白 */
    margin-bottom: 15px; /* 行間の垂直方向の余白 */
    flex-wrap: wrap; /* ボタンが多すぎて行に収まらない場合に折り返す */
}
.remote-dial-row {
    display: flex;
    justify-content: center; /* ボタンのグループを水平中央に配置 */
    gap: 10px; /* ボタン間の水平方向の余白 */
    margin-bottom: 15px; /* 行間の垂直方向の余白 */
    min-width: 100px; /* 最小幅 */
}



/* ボタンの共通スタイル */
.remote-button {
    flex-grow: 1; /* 親のスペースに合わせて伸びる */
    flex-basis: 0; /* flex-growと併用で均等幅 */
    padding: 15px 10px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease; /* ホバー/クリック時のアニメーション */
    
    display: flex;
    flex-direction: column; /* アイコンとテキストを縦に並べる */
    align-items: center; /* アイコンとテキストを水平中央揃え */
    justify-content: center; /* アイコンとテキストを垂直中央揃え */
    text-align: center;
    min-width: 50px; /* ボタンの最小幅 */
    min-height: 20px; /* ボタンの最小高さ */
    user-select: none; /* テキスト選択を無効化 */
    -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時のハイライトを無効化 */
    border: 1px solid #a8a8a8ea;
}

/* ホバー時のスタイル */
.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;} /* 強調/暗い背景（黒） */

.button-transparent {
    background-color: transparent; /* 背景を透明にする */
    border: none;                  /* ボーダーもなしにする */
    pointer-events: none;          /* クリックイベントを無効にする（オプション） */
}

/* --- ボタンの形状 --- */


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

/* 全体のコンテナ */
.remote-dial-container {
    position: relative;
    /* 修正点: 固定ピクセル値から相対単位に変更 */
    width: 50vw; /* 例: 画面幅の30% */
    height: 50vw; /* 正方形を維持するためにwidthと同じ値を設定 */
    /* または最大幅を設定して、小さくなりすぎないようにする */
    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;

    font-size: calc(0.3em + 2vw); /* 画面幅に応じてベースフォントサイズを調整 */
}

/* 周囲の各方向ボタンの共通スタイル */
.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;
}

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

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

/* dial-button i や span の font-size も rem や vw にするとより柔軟になります */
.dial-button i {
    font-size: 1em; /* 親の.remote-dial-container font-size と同じ */
    margin-bottom: 2px;
    color: #333;
}
.dial-button span {
    font-size: 1em; /* 親の.remote-dial-container font-size と同じ */
    line-height: 1.2;
}

/* 中央のボタン */
.dial-button-center {
    position: relative;
    /* 修正点: 固定ピクセル値から相対単位に変更（親の幅に依存） */
    width: 55%; /* remote-dial-containerの幅の45% */
    height: 55%; /* remote-dial-containerの高さの45% */
    border-radius: 50%;
    font-size: 1em; /* 親の.remote-dial-container font-size と同じ */
    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;
}


/* 上下左右のボタンの位置と形状 */
.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; /* テキストを下に寄せる */
    flex-direction: column-reverse; /* アイコンが下、テキストが上 */
}

.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; /* テキストを上に寄せる */
    padding-top: 5px; /* テキストを下に寄せる */
}

.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; /* テキストを右に寄せる */
    padding-top: 10px; /* テキストを下に寄せる */
}

.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; /* テキストを左に寄せる */
    padding-top: 10px; /* テキストを下に寄せる */
}


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



/* アイコンとボタンテキストのスタイル */
.remote-button i {
    font-size: 1.5em; /* アイコンのサイズ */
    margin-bottom: 5px; /* アイコンとテキストの間隔 */
}

.remote-button span {
    font-size: 0.8em; /* ボタンのテキストサイズ */
    line-height: 1.2; /* テキストの行高 */
}










/* プレビューモードの共通調整 (モーダル内の縮小表示用) */

/* .remote-preview-container は親要素で transform: scale() を持つ前提 */
.remote-preview-container .remote-body {
    box-shadow: none; /* 影をなくす */
    padding: 10px; /* パディングを小さく */
    max-width: none; /* 最大幅の制限を解除 */
    border: 1px dashed #ccc; /* プレビューであることを示す点線ボーダー */
}

.remote-preview-container .remote-button {
    font-size: 0.7em; /* プレビュー時はフォントを小さく */
    padding: 5px; /* パディングも小さく */
    min-width: unset; /* 最小幅の制限を解除 */
    min-height: unset; /* 最小高さの制限を解除 */
    border-radius: 3px; /* 角丸も小さく */
}
.remote-preview-container .remote-button i {
    font-size: 1em; /* アイコンも小さく */
    margin-bottom: 2px;
}
.remote-preview-container .remote-button span {
    font-size: 0.5em; /* テキストも小さく */
}