/* mobile.css */
/* Media query for smartphones and smaller devices */
@media only screen and (max-width: 768px) {
  /*************************************************************
   * 1) ヘッダーをスマホ専用レイアウトに
   *    - ヘッダーは高さ60px程度
   *    - 左側にロゴ + (デザイン読み込み / デザイン一覧 / 保存 / 次へ進む)
   *    - 右側のボタンは隠す
   *************************************************************/
   html, body {
    margin: 0; padding: 0;
    /* 下記で "アドレスバーや下部ツールバーの高さ" を無視して全画面化 */
    height: 100%; 
    overflow: hidden; 
    
  }
   #mobile-bottom-menu{
     display: flex !important; /* 強制表示 */
     pointer-events: auto;     /* クリック/タップを受け取れる */
     z-index: 9999;           /* プレビュー領域より上 */
   }
 
   #mobile-tools {
    display: none !important;
  }

  .header-right {
    background-color: #fff;
    margin-left: -10px;
  }
  #app-header {
    position: relative;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px;
  }
  #loadDesignBtn,#designListBtn,#saveDesignBtn,#nextStepBtn{
    background-color: #ff9f00;
    /* 他のスタイル */
  }
  .menu-group button {
    padding: 6px 20px;
  }



  #finalConfirmedKey2 {
    font-size: 1.5em;
    background-color: #eee;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 100%;
    min-width: 0;             /* Flex アイテムが縮小できるように */
    overflow-wrap: break-word; /* 長い単語がはみ出さないように */
    word-break: break-all;     /* 必要に応じて改行 */
  }




    /* header-rightを表示 */
    #app-header .header-right {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      width: 100% !important;
      background-color: inherit !important;
      padding: 10px !important;
    }
  #app-header .header-left,
  #app-header .header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index:100;
  }

  .logo {
    font-size: 1rem;
    margin-right: 8px;
  }
  .header-btn {
    margin-left: 8px;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    border: none;
    box-shadow: none;
    outline: none;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
  .header-btn:hover {
    background-color: #555;
  }
  .header-btn:active {
    transform: scale(1.0);
  }
  

  /********************************
   * メインコンテナを縦並び
   ********************************/
  #main-container {
    flex-direction: column;
    height: auto;
  }
  /* PC用のサイドバーとメニューパネルを隠す */
  #app-sidebar {
    display: none !important;
  }
  #app-header .header-left,
  #app-header .header-right {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* プレビューエリアを全幅に */
  #preview-area {
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 60px; /* ヘッダーの高さに合わせる */
  }

  #canvas-container {
    /* いわゆる「VHハック」: JS で計算した --vh を使う、あるいは下記のように safe-area 分も加味 */
    width: 100vw;
    height: calc(100vh); /* + 何か余白を足すならここで */
    /* or 
       height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  /********************************
   * 下部メニュー (スマホ用)
   ********************************/
  #mobile-bottom-menu {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #333;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
  }
  #mobile-bottom-menu button {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
  }
  #mobile-bottom-menu button:hover {
    background-color: #444;
  }

  /********************************
   * 右下ツール (戻る/進む/ズーム/全体表示/プレビュー)
   ********************************/
  #mobile-tools {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 8px;
    bottom: 80px; /* 下メニュー(#mobile-bottom-menu)より少し上 */
    gap: 8px;
    z-index: 1100;
  }
  #mobile-tools button {
    background: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  #mobile-tools button:hover {
    background: #666;
  }


  /*************************************************************
   * 4) 全体レイアウトやプレビューエリアの微調整
   *************************************************************/
  #main-container {
    flex-direction: column;
    height: auto;
  }
  /* PC用パネル非表示 */
  #menu-panel {
    display: none;        /* 基本は隠す */
    position: fixed;      /* 画面全体に覆いかぶさる */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    overflow-y: auto;     /* 中身が大きいときスクロール */
    padding-top: 100px;
    margin-top: -90px;
  }
  #closePanelBtn {
    display: block !important;
    height: 40px;
    margin: 16px 16px 16px auto;  /* top:16px, right:16px, bottom:16px, left:auto で右寄せ */
    padding: 0 16px;             /* 左右の内側余白 */
    background-color: #343434;   /* 目立つ背景色 */
    border: 2px solid #333;
    border-radius: 10px;
    font-size: 1.3rem;
    color: #fff;
    text-align: center;
    line-height: 40px;           /* 高さと同じにして縦中央揃え */
    cursor: pointer;
  }

  #menu-panel.show {
    display: block;       /* これで表示状態に */
  }
  #preview-area {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  #canvas-container {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* モーダルの調整（全体的に幅を狭く、縦にスクロール可能に） */
  .modal-content {
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 12px;
    overflow-x: hidden; /* 横方向のオーバーフローを隠す */
  }
  .modal-actions {
    flex-direction: column;
    align-items: center;
  }
  .modal-actions button {
    width: 100%;
    margin: 8px 0;
  }

  /* 最終デザインモーダルの画像エリアを縦並びに */
  #final-design-images {
    flex-direction: column;
  }
  .final-preview-front,
  .final-preview-back {
    width: 100%;
    margin: 8px 0;
  }

  /* 注意事項テキストやチェックボックスのセクションはそのまま適用 */
  /* ※必要に応じてフォントサイズやマージンの調整も可能 */

  /* 追加: スマホ用下部ナビゲーション（必要なら追加） */
  #mobile-sidebar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
  }
  #mobile-sidebar button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
  }
  /* デザイン一覧モーダルでのカード表示を縦に並べやすく */
  .design-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .design-card {
    width: 100%;
  }
  .edit-btn, .delete-btn {
    width: 100%;
    margin: 4px 0;
  }
  #confirm-result-modal .modal-content {
    width: 90%;
    max-width: 400px;
    padding: 16px;
    box-sizing: border-box;
  }

  /* ヘッダー部分 */
  #confirm-result-modal .final-result-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #confirm-result-modal .final-result-title {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 8px;
  }
  #confirm-result-modal .final-result-close-btn {
    align-self: flex-end;
    font-size: 1.5rem;
  }

  /* デザインキー部分のグレー背景ラッパ */
  .key-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #eee;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
  }
  .key-box .key-text {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 4px;
  }
  .copy-btn {
    margin-top: 8px;
    align-self: flex-end;
    padding: 6px 12px;
    font-size: 1rem;
  }

  /* メール送信用部分 */
  .final-result-sendemail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
  }
  .final-result-sendemail input[type="email"],
  .final-result-sendemail button {
    width: 100%;
  }

  /* フッター（モーダルアクション） */
  #confirm-result-modal .modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
  }
  #confirm-result-modal .modal-actions button {
    width: 100%;
    margin-top: 8px;
  }
  #design-key-modal .design-key-modal-content {
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  /* ヘッダー部分 */
  #design-key-modal .design-key-modal-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
  }
  
  #design-key-modal .design-key-modal-title {
    font-size: 1.2rem;
    margin: 0;
    text-align: center;
  }

  #design-key-modal .design-key-modal-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
  }

  /* 本文部分 */
  #design-key-modal .design-key-modal-body {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #design-key-modal .design-key-modal-label {
    font-size: 1rem;
    text-align: left;
  }

  #design-key-modal .design-key-modal-input {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  #design-key-modal .design-key-modal-loadbtn {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    background-color: #303030;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  #design-key-modal .design-key-modal-loadbtn:hover {
    background-color: rgb(2, 10, 19);
  }


/* iOS Safari固有の見た目を消す */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="search"],
textarea {
  -webkit-appearance: none;   /* iOS Safariのボタン風スタイルを無効化 */
  border-radius: 0;           /* iOS Safariで勝手に付く角丸を外す */
}

/* フォーカス時のハイライト等も消したい場合 */
button:focus,
input:focus,
textarea:focus {
  outline: none;              /* 通常のアウトラインを消す */
  -webkit-appearance: none;
  box-shadow: none;           /* 他のブラウザ用 */
}

/* 選択ハイライトを透明にする(タップ時のグレー背景などを消したい場合) */
* {
  -webkit-tap-highlight-color: transparent;
}



#bg-and-print-group {
  opacity: 0;
  transition: opacity 1s ease; /* 1秒かけてフェードイン */
}

.grecaptcha-badge {
  /* 位置を固定したい場合 */
  position: fixed !important;
  bottom: 80px !important; /* 余裕を持たせる例 */
  right: 20px;
  z-index: 9999;
}
/* textMenu.css や mobile.css の中に追加 */
/* （すでにPC版のスタイルがあるならそれを崩さないように注意） */

/* モバイル版サブメニューコンテナ */
.text-submenu-mobile {
  display: flex;
  gap: 8px;
  overflow-x: auto; /* 横スクロール */
  margin-bottom: 8px;
}
.text-submenu-mobile button {
  white-space: nowrap;
  /* 必要なら幅や背景色など */
}

.text-submenu-content-mobile {
  /* 切り替え表示させる領域 */
}

/* それぞれのセクションはPCでは一つのパネル内に並ぶが
   モバイルでは .style.display = 'none' / 'block' で切り替え */
.text-section-add,
.text-section-color,
.text-section-size,
.text-section-transform,
.text-section-font {
  border: 1px solid #ccc;
  padding: 8px;
  margin-bottom: 8px;
}
/* 例: mobile.css */

/* #mobile-text-submenu-panel */
#mobile-text-submenu-panel {
  font-family: sans-serif; /* 必要に応じて */
}

/* もし「.text-input-area」などのクラスにスタイルを書いているなら */
.text-input-area {
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  font-size: 1rem;
  margin-bottom: 4px;
}

/* カラーパレット等 */
.color-circle {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* ... */
}

/* これまで #menu-panel .text-input-area { ... } などになっていた場合は
   "#mobile-text-submenu-panel .text-input-area" でも同じになるように、
   あるいは ".text-input-area" を単純に全域で適用するように書き換える。
*/

/* テキストサブメニュー (smartphone) */
#mobile-text-submenu-panel {
  /* JSで style指定 */
}

/* 全セクション共通 */
.text-submenu-section {
  margin-bottom: 12px;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* テキスト入力欄 */
.text-input-area {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  margin-bottom: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* カラーパレット */
.color-palette-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
/* カラーボタン */
.color-circle {
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
  /* レイヤー制御パネルなども小さく */
  #layer-control-panel {
    padding: 5px !important;
    font-size: 12px !important;
    top: 60px !important; /* ちょっと下げる */
  }

  /* ボタンサイズの調整例 */
  #layer-control-panel .layer-btn {
    padding: 5px !important;
    font-size: 12px !important;
  }

  #mobile-bottom-menu button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: 5px;
  }
  
  .mobile-menu-icon {
    width: 30px;   /* お好みで調整 */
    height: 30px;
    margin-bottom: 4px;
  }
  #disclaimer-modal .beta-modal-content {
    width: 90%;
    max-height: 80vh; /* ビューポートの80%の高さまで表示 */
    overflow-y: auto; /* 内容が溢れた場合にスクロール */
    margin: 0 auto;  /* 中央に配置 */
    padding: 16px;
  }
  
  /* 本文は左寄せ */
  #disclaimer-modal .beta-modal-content p {
    text-align: left;
  }
  
  /* チェックボックスとラベル、ボタンは中央寄せ */
  #disclaimer-modal .beta-modal-content label,
  #disclaimer-modal .beta-modal-content button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}