/* ============================================================
   YSC ロビーサイネージ ／ スタイルシート

   編集の目安
     色・文字サイズ・余白を変えたいとき   → 「01. 設定値」だけを編集
     特定の部品の見た目を変えたいとき     → 該当セクションを編集
     文言・掲載内容を変えたいとき         → style.css ではなく config.json

   単位について
     cqw は「画面の横幅に対する割合」です。1cqw = 画面幅の1%。
     iPad縦置き（820pt幅）では 1cqw ≒ 8.2px。
     px ではなく cqw を使うことで、機種が変わっても比率が保たれます。

   目次
     01. 設定値（色・書体）
     02. 画面全体・ビュー切替
     03. トップ画面
     04. 詳細画面（ヘッダー・拡大ボタン）
     05. コンテンツエリア
     06. 待機画面
   ============================================================ */

/* ------------------------------------------------------------
   01. 設定値
   ここを変えると画面全体に反映されます。
   色はブランドガイド（Pantone）に準拠しています。変更は要確認。
   ------------------------------------------------------------ */
:root{
  --brand:#9DAF88;      /* Pantone 7494 C ／ 採用色。上部の帯・罫線・英字表記 */
  --leaf:#74AA50;       /* Pantone 7489 C ／ 本日の枠の強調にのみ使用 */
  --line:rgba(157,175,136,.38);   /* ボタンや区切りの罫線 */

  --ink:#1B2119;        /* 画面の地色（濃い緑） */
  --ivory:#F2F1EA;      /* コンテンツエリアの地色・本文の白 */
  --ivory-70:rgba(242,241,234,.70);  /* 補助テキスト */
  --ivory-45:rgba(242,241,234,.45);  /* さらに薄い補助テキスト */
  --ivory-22:rgba(242,241,234,.22);  /* 未設定項目の点線 */

  /* 書体。和文は明朝（--serif）＝見出し、ゴシック（--sans）＝本文・UI */
  --serif:"Didot","Bodoni 72","Hiragino Mincho ProN","Yu Mincho",Baskerville,Georgia,serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
}
  
/* ------------------------------------------------------------
   02. 画面全体・ビュー切替
   .kiosk が画面の器。PCで開いたときだけiPad比率の枠で表示します。
   .view が各画面。.on が付いたものが表示されます。
   ------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;background:var(--ink);}
  .kiosk{position:fixed;inset:0;container-type:size;overflow:hidden;background:var(--ink);color:var(--ivory);
         font-family:var(--sans);user-select:none;-webkit-user-select:none;}
  @media (min-aspect-ratio: 1/1){
    body{display:flex;align-items:center;justify-content:center;background:#181A17;}
    .kiosk{position:relative;inset:auto;width:min(92vw,calc(100dvh * 820 / 1180));aspect-ratio:820/1180;box-shadow:0 24px 70px rgba(0,0,0,.55);}
  }

  .view{position:absolute;inset:0;display:flex;flex-direction:column;
        background:linear-gradient(180deg,#212A1E 0%,var(--ink) 46%);
        opacity:0;pointer-events:none;transition:opacity .5s ease;}
  .view.on{opacity:1;pointer-events:auto;}


/* ------------------------------------------------------------
   03. トップ画面
   .home-top   上部のブランドカラー帯（ロゴ）
   .lead       案内文（文言は config.json の lead）
   .menu/.tile ボタン一覧。2列固定。.unset は未設定項目
   .home-foot  時計と右下の一言
   ------------------------------------------------------------ */
  .home-top{flex:0 0 auto;background:var(--brand);padding:6.4cqw 6.5cqw 5.6cqw;}
  .lockup{display:flex;flex-direction:column;align-items:center;}
  .lockup img{width:44cqw;height:auto;display:block;}
  .lockup .rule{height:1px;background:rgba(255,255,255,.55);width:24%;margin:3.8cqw 0 2.8cqw;}
  .lockup .jp{font-size:1.9cqw;letter-spacing:.36em;color:#fff;text-indent:.36em;opacity:.95;}

  .home-body{flex:1 1 auto;padding:0 6.5cqw;}
  .lead{text-align:center;font-family:var(--serif);font-size:2.7cqw;letter-spacing:.2em;color:var(--ivory-70);margin:5.4cqw 0 4cqw;text-indent:.2em;}
  .menu{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;}
  .tile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4cqw;
        background:rgba(157,175,136,.07);border:1px solid var(--line);padding:3.4cqw 2.2cqw;min-height:15.6cqw;
        font-family:inherit;color:inherit;cursor:pointer;text-align:center;transition:background .3s ease,border-color .3s ease;}
  .tile:active{background:var(--brand);border-color:var(--brand);}
  .tile:active .ja{color:#1B2119;} .tile:active .en{color:rgba(27,33,25,.66);}
  .tile .en{font-size:1.5cqw;letter-spacing:.3em;color:var(--brand);text-indent:.3em;}
  .tile .ja{font-family:var(--serif);font-size:3.4cqw;letter-spacing:.1em;line-height:1.3;text-indent:.1em;}
  .tile.unset{border-style:dashed;border-color:var(--ivory-22);}
  .tile.unset .ja{color:var(--ivory-45);} .tile.unset .en{color:var(--ivory-22);}

  .home-foot{flex:0 0 auto;margin-top:auto;padding:3.4cqw 6.5cqw 4cqw;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid var(--line);}
  .home-foot .t{font-family:var(--serif);font-size:4.2cqw;letter-spacing:.08em;line-height:1;font-variant-numeric:tabular-nums;}
  .home-foot .d{font-size:1.65cqw;letter-spacing:.18em;color:var(--ivory-45);margin-top:1.2cqw;}
  .home-foot .note{text-align:right;font-size:1.7cqw;letter-spacing:.14em;color:var(--ivory-45);}


/* ------------------------------------------------------------
   04. 詳細画面のヘッダー・拡大ボタン
   .dhead    ブランドカラーの帯。文字は視認性のため濃色
   .zoombtns 拡大縮小ボタン。拡大できる内容のときだけ .on が付く
   ------------------------------------------------------------ */
  .dhead{flex:0 0 auto;display:flex;align-items:center;gap:2.4cqw;padding:3.4cqw 4.4cqw;background:var(--brand);color:#1B2119;}
  .back{display:inline-flex;align-items:center;gap:1.5cqw;background:transparent;color:#1B2119;border:1px solid rgba(27,33,25,.45);
        font-family:var(--sans);font-size:2.1cqw;letter-spacing:.2em;padding:2.1cqw 3.2cqw;cursor:pointer;flex:0 0 auto;}
  .back:active{background:rgba(27,33,25,.14);}
  .back svg{width:2.1cqw;height:2.1cqw;fill:none;stroke:#1B2119;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .dtitle{flex:1 1 auto;text-align:right;min-width:0;}
  .dtitle .ja{font-family:var(--serif);font-size:3.1cqw;letter-spacing:.12em;color:#1B2119;text-indent:.12em;}
  .dtitle .en{font-size:1.35cqw;letter-spacing:.3em;color:rgba(27,33,25,.62);margin-top:.9cqw;text-indent:.3em;}

  /* 拡大縮小ボタン */
  .zoombtns{flex:0 0 auto;display:none;gap:1.2cqw;}
  .zoombtns.on{display:flex;}
  .zoombtns button{width:8.4cqw;height:8.4cqw;border:1px solid rgba(27,33,25,.45);background:rgba(255,255,255,.55);
        color:#1B2119;font-size:3.6cqw;font-family:var(--sans);line-height:1;cursor:pointer;
        display:flex;align-items:center;justify-content:center;padding:0;}
  .zoombtns button:active{background:#fff;}
  .zoombtns button[disabled]{opacity:.3;}


/* ------------------------------------------------------------
   05. コンテンツエリア
   .stage    スクロールと拡大の対象。ここだけが拡大されます
   .overlay  未設定表示・通信断時の案内
   .zhint    「二本指で広げると拡大できます」の案内
   ------------------------------------------------------------ */
  .stage{flex:1 1 auto;position:relative;background:var(--ivory);overflow:auto;color:#2A3327;
         -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;}
  .stage iframe{display:block;border:0;width:100%;height:100%;}
  .stage.lock iframe{pointer-events:none;}
  .stage img.content{display:block;width:100%;height:auto;}

  .overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
           background:var(--ivory);text-align:center;padding:8cqw;gap:3cqw;z-index:3;}
  .overlay.on{display:flex;}
  .overlay img{width:26cqw;}
  .overlay .msg{font-family:var(--serif);font-size:3.2cqw;letter-spacing:.1em;line-height:1.9;}
  .overlay .sub{font-size:2.1cqw;letter-spacing:.1em;color:rgba(42,51,39,.6);line-height:1.9;}
  .overlay .box{border:1px dashed rgba(42,51,39,.32);padding:6cqw 5cqw;display:flex;flex-direction:column;gap:1.8cqw;}
  .overlay .big{font-family:var(--serif);font-size:2.8cqw;letter-spacing:.14em;}
  .overlay .small{font-size:1.9cqw;color:rgba(42,51,39,.6);line-height:1.8;}
  .loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.9cqw;letter-spacing:.3em;color:rgba(42,51,39,.4);transition:opacity .4s ease;z-index:2;}
  .loading.off{opacity:0;}

  /* 拡大操作の案内 */
  .zhint{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);z-index:4;
         background:rgba(27,33,25,.86);color:#EFEDE4;font-size:1.9cqw;letter-spacing:.1em;
         padding:1.5cqw 3.4cqw;pointer-events:none;transition:opacity .4s ease;white-space:nowrap;}
  .zhint.hide{opacity:0;}


/* ------------------------------------------------------------
   06. 待機画面
   無操作が続くと表示されます。秒数は config.json の attractIdleSeconds
   ------------------------------------------------------------ */
  .attract{position:absolute;inset:0;z-index:30;background:var(--brand);
           display:flex;flex-direction:column;align-items:center;justify-content:center;
           opacity:0;pointer-events:none;transition:opacity .9s ease;}
  .attract.on{opacity:1;pointer-events:auto;}
  .attract .frame{position:absolute;inset:5cqw;border:1px solid rgba(255,255,255,.42);}
  .attract img{width:66cqw;height:auto;}
  .attract .rule{width:22%;height:1px;background:rgba(255,255,255,.55);margin:6cqw 0 4.6cqw;}
  .attract .jp{font-size:2.2cqw;letter-spacing:.44em;color:#fff;text-indent:.44em;opacity:.92;}
  .attract .tap{position:absolute;bottom:11cqw;font-size:2cqw;letter-spacing:.36em;color:rgba(255,255,255,.8);text-indent:.36em;}

  @media (prefers-reduced-motion:reduce){ .view,.attract,.tile,.back{transition:none!important;} }