/* =============================================================
   LivePocket Ticket – ローカル再現用 追加 / 上書きスタイル
   -------------------------------------------------------------
   ▸ 目的
     1. 失われた jQuery‑Mobile 1.3.0 の必須クラスを最小実装で補完
     2. モバイル幅で “印刷する” セクション等 PC 向け UI を非表示
     3. 想定パスに置いた静的ファイルだけで見た目を極力一致させる
   -------------------------------------------------------------
   使い方
     <link rel="stylesheet" href="css/livepocket_local_overrides.css">
   ============================================================= */

/* -------------------------------------------------------------
 * 0. CSS Reset（必要最低限）
 *    ※ 元ページの default.css に reset があるのでここでは調整のみ
 * ----------------------------------------------------------- */
 html,
 body {
   margin: 0;
   padding: 0;
 }
 img {
   max-width: 100%;
   height: auto;
   border: 0;
 }
 
 /* -------------------------------------------------------------
   * 1. jQuery‑Mobile 代替（ページコンテナ & ボタン）
   * ----------------------------------------------------------- */
 .ui-page {
   position: relative;
   min-height: 100%;
 }
 .ui-content {
   padding: 16px;
 }
 .ui-btn,
 .ui-link {
   display: inline-block;
   padding: 0.55em 1em;
   border-radius: 4px;
   text-decoration: none;
   cursor: pointer;
   font-size: 14px;
   line-height: 1.4;
   color: #fff;
 }
 .ui-btn:hover {
   opacity: 0.85;
 }
 /* テーマカラーの簡易置換（a=淡グレー, d=濃グレー, e=赤, g=緑, h=青, i=オレンジ）*/
 .ui-btn.ui-btn-a,
 .ui-link[data-theme="a"],
 .btn-gray {
   background: #f5f5f5;
   color: #333;
   border: 1px solid #ccc;
 }
 .ui-btn.ui-btn-d,
 .ui-link[data-theme="d"] {
   background: #666;
   color: #fff;
   border: 1px solid #555;
 }
 .ui-btn.ui-btn-e,
 .ui-link[data-theme="e"] {
   background: #c0392b;
   color: #fff;
   border: 1px solid #b52b1d;
 }
 .ui-btn.ui-btn-g,
 .ui-link[data-theme="g"] {
   background: #27ae60;
   color: #fff;
   border: 1px solid #1e8449;
 }
 .ui-btn.ui-btn-h,
 .ui-link[data-theme="h"] {
   background: #2980b9;
   color: #fff;
   border: 1px solid #21618c;
 }
 .ui-btn.ui-btn-i,
 .ui-link[data-theme="i"] {
   background: #e67e22;
   color: #fff;
   border: 1px solid #cf7119;
 }
 
 /* -------------------------------------------------------------
   * 2. レイアウト調整
   * ----------------------------------------------------------- */
 /* テーブルをページ幅いっぱいに */
 section.data table {
   width: 100%;
   border-collapse: collapse;
 }
 section.data th,
 section.data td {
   border: 1px solid #ddd;
   padding: 6px 8px;
 }
 
 /* .ticket 本体のセンタリング（PC）*/
 @media (min-width: 960px) {
   body.ticket {
     background: #fafafa;
     font-size: 16px;
   }
   #responsiveBaseFrame {
     max-width: 960px;
     margin: 0 auto;
     background: #fff;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
   }
 }
 
 /* -------------------------------------------------------------
   * 3. モバイル専用調整
   * ----------------------------------------------------------- */
 @media (max-width: 640px) {
   /* 印刷ボタン・利用上の注意の余白を詰める */
   .print {
     display: none !important;
   }
   .attention .inner {
     padding: 12px;
   }
   /* ボタンを縦並び＆幅フル */
   .bottom-btn-flat-area li {
     width: 100%;
     margin-bottom: 8px;
   }
   .bottom-btn-flat-area .btn-flat {
     display: block;
     width: 100%;
   }
 }
 
 /* -------------------------------------------------------------
   * 4. 便利ユーティリティ
   * ----------------------------------------------------------- */
 .text-break {
   word-break: break-all;
 }
 .center-block {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 .hide-sp {
   @media (max-width: 640px) {
     display: none !important;
   }
 }
 
 /* -------------------------------------------------------------
   * 5. 印刷用（@media print）
   * ----------------------------------------------------------- */
 @media print {
   body {
     background: #fff;
     font-size: 12pt;
     color: #000;
   }
   /* 画面操作系は印刷しない */
   .modal,
   .modal_container,
   .btn,
   .button,
   .bottom-btn-flat-area,
   #gfooter {
     display: none !important;
   }
   a[href]:after {
     content: "";
   } /* URL 表示抑制 */
 }