/*****************************************/
/*****************************************/
/************ Style Sheet for ************/
/************ onclick/Static Modal *******/
/************ solutions            *******/
/* Line 148-151: Modified the white border  
   class to only apply to text buttons:
   css/* REMOVED: White border class for image buttons */
/* Only apply white border to text-only buttons    rev date: 2025/06/04          */ 
/*****************************************/

        /* static-modal */
        .static {
          position: absolute; 
          left: 50%; 
          transform: translateX(-50%); 
        }

        /* onclick-modal */
        .onclick {
          position: fixed;
          top: 50%; 
          left: 50%; 
          transform: translate(-50%,-50%);           
        }

        /* bootstrap4では、サイズ指定しているが、ここではそれをキャンセル=エラー回避 */
        .modal{
          width: unset;
          height: unset;
          z-index: 10000;
        }

        .modal-dialog {
          margin: 0 !important;
          width: fit-content;
          max-width: unset;          
        }
        
        .modal-content {
          /* タッチハンドルを使用するため、CSSのresizeを無効化 */
          resize: none;
          overflow: hidden;
        }

        .modal-body,.modal-body div iframe {
          overflow-y: hidden !important;
        }

        .modal-content.onclick-modal{
          width: 70vw;   /* 初期幅を明示する */
          height: 70vh;  /* 任意 */
          max-width: 95vw;
          max-height: 100vh;
        }

        .modal-content.static-modal{
          width: 80vw;   /* 初期幅を明示する */
          height: 70vh;  /* 任意 */
          max-width: 100vw;
          max-height: 100vh;        
        }  

        /* ドラッグヒント表示（全デバイス共通で常時表示） */
        .modal-content::after {
          content: "⇲ Drag & Resize";
          position: absolute;
          right: 30px;
          bottom: 0;
          font-size: 1.0rem;
          font-weight: 700;
          color: white;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 2px 5px;
          border-radius: 3px;
          opacity: 0.6;
          pointer-events: none;
          z-index: 1000;
        }
        
        /* PCでのホバー時により目立たせる */
        @media (hover: hover) and (pointer: fine) {
          .modal-content:hover::after {
            opacity: 1;
          }
        }

        /* タッチデバイスでは位置調整とフォントサイズ縮小 */
        @media (hover: none) and (pointer: coarse) {
          .modal-content::after {
            font-size: 0.7rem; /* 0.9rem から 0.7rem に縮小 */
            right: 25px; /* タッチハンドルと重ならないよう調整 */
            bottom: 0px; /* Reloadボタンと重ならないよう上に移動 */
          }
        }

        /* タッチデバイス用リサイザーハンドルのスタイル */
        .touch-resize-handle {
          transition: background-color 0.2s ease, transform 0.1s ease;
        }

        .touch-resize-handle:active {
          transform: scale(1.1);
        }

        .modal-header {
          display: flex;
          flex-direction: column; /* 縦並びを許可 */
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          padding: 0 0 !important;
          background-color: black;
          color: white;
          height: auto !important;       /* 高さを自動に */
          min-height: auto !important;   /* Bootstrap干渉対策 */
          overflow: visible !important;  /* 内容が見えるように */
        }

        /* フッターは高さ固定で縮まない */        
        .modal-footer {
          flex-shrink: 0;
          padding: 0.5rem;
          border: none;
          background: #000; /* 任意の背景色、不要なら削除 */
          color: white;     /* 任意の文字色、不要なら削除 */
          height: 1.5rem;
          overflow: visible;
        }
        
        /* 中央領域（iframeを入れる領域）は高さを自動拡大 */
        .modal-body {
          flex-grow: 1;
          display: flex;
          overflow: hidden;
          padding: 0;
          margin: 0;
          border: none;
          max-height: unset;
        }
        
        /* iframe に高さと幅を完全に渡す */
        .modal-body iframe {
          flex: 1;
          width: 100%;
          height: 100%;
          border: none;
        }

        /* Modal右下 ドラッグ部分のデザイン・色目（使用しない） */
        ::-webkit-resizer {
          display: none; /* カスタムハンドルを使用するため非表示 */
        }

        #toolbarContainer {
          background-color: black;
        }
        #toolbarContainer .toolbarButton {
          color: white;
        }
        #scaleSelect {
          background-color: #ddd;
        }

        .modal-tab-container {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 0.0rem !important;
          width: 100%;
          margin: 0 auto;
          padding: 0 0;
        }
      
        @media (max-width: 768px) {
          .modal-tab-container {
            flex-direction: column;
            align-items: center;
          }
        }

        .modal-tab-btn {
          transition: transform 0.2s ease, color 0.2s ease;
          z-index: 10000;
          /* 250611 タブ表示改善　追加変更 */
          vertical-align: middle;
          display: inline-flex;
          align-items: center;
        }
      
        .modal-tab-btn:hover {
          transform: scale(1.1) translateY(-0px);
          color: red;
          /* 250611 タブ表示改善　追加変更 */
          /*border: 0.3px solid white; */

        }

        /* REMOVED: White border class for image buttons */
        /* Only apply white border to text-only buttons */
        .btn-dark-white-border:not(:has(img)) {
          border: 1.5px solid white !important;
        }

        .modal-tab-btn-custom{
          font-size: 1rem;
          padding: 1px 5px;
        }

        .btn-rounded {
          border-radius: 10em;
        }

        .btn.btn-sm{
          padding: 0.2rem 0.8rem;
          font-size: 0.50rem;
        }

        .close{
          position: absolute;
          right: 10px; /* To place the x mark at right side */
          line-height: 0;
          color: #fff;
          opacity: 1;
        }

        /* スマホ・タブレットでのmodal縦横サイズのデフォルト値 (onclick/static共通) */
        @media (min-width: 250px) and (max-width: 484px){ 
          .modal-content.static-modal, .modal-content.onclick-modal {
            max-height: 100vh;
            max-width: 100vw;
            width: 95vw;
            height: 60vh;
          }
        }
        @media (min-width: 485px) and (max-width: 767px){ 
          .modal-content.static-modal, .modal-content.onclick-modal {
            max-height: 100vh;
            max-width: 100vw;
            width: 80vw;
            height: 50vh;
          }
        }

        /* タッチデバイスでのタッチ操作向上 */
        @media (hover: none) and (pointer: coarse) {
          .btn {
            min-height: 44px; /* タッチターゲットのサイズを大きく */
          }
          
          .close {
            font-size: 2rem;
            padding: 0.5rem;
            min-width: 44px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }