/* サーバー連携で足す部品の見た目｜フロント（front/e-card_uketori.html）の変数を使う */

/* 送信中の「送信」ボタン */
#next6.is-busy { opacity:.5; pointer-events:none; }

/* LIFF のヘッダー（画面サイズ Full）を模したもの｜ブラウザモードで、本番なら LIFF で開く画面だけに出す（src/front.php）。
   本番の LINE では LIFF ブラウザがこの位置にヘッダーを出し、その下の領域がページになる。高さ・配置は LINE Developers の図（iPhone）から実測。
   高さは src/front.php の LIFF_HEADER_HEIGHT と同じ値にする（window.ECARD.TopInset としてフロントに渡し、フロントが画面をその下に置く）。
   フロントが拡大・縮小するとき（.is-scaled / .is-scaled-pc）は画面が絶対配置になるので、ヘッダーも絶対配置で画面の上に置く */
.is-liff-full {
  --LIFFヘッダーの高さ: 44px;
  flex-direction:column; flex-wrap:nowrap; gap:0;
}
.is-liff-full .l-app { --画面高さ: calc(100dvh - var(--LIFFヘッダーの高さ)); }
/* 拡大・縮小しないとき（フロントの CONFIG.レスポンシブ が false）｜ヘッダーの分だけ画面を下げる */
.is-liff-full .l-app:not(.is-scaled):not(.is-scaled-pc) { margin-top:var(--LIFFヘッダーの高さ); }
.c-liff-header {
  position:absolute; top:0; left:0; right:0; z-index:1;
  height:var(--LIFFヘッダーの高さ);
  background:#FFFFFF; color:#111111;
  font-family:-apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  user-select:none;
}
.c-liff-header__title {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; margin:0; padding:0 84px;   /* 右のボタン 2 つに重ならないよう、左右を同じだけ空けて中央に置く */
  font-size:16px; font-weight:700; line-height:20px;
  white-space:nowrap;
}
.c-liff-header__title, .c-liff-header__domain { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.c-liff-header__domain { font-size:11px; font-weight:400; line-height:14px; color:#B7B7B7; }
/* アクションボタン（⋮）と閉じるボタン（×）。押せない */
.c-liff-header__action, .c-liff-header__close {
  position:absolute; top:50%; width:24px; height:24px; margin-top:-12px;
}
.c-liff-header__action { right:52px; background:radial-gradient(circle, currentColor 1.8px, transparent 2.2px) center / 24px 7.5px repeat-y; }
.c-liff-header__close { right:13px; }
.c-liff-header__close::before, .c-liff-header__close::after {
  content:""; position:absolute; top:50%; left:50%;
  width:21px; height:1.5px; margin:-.75px 0 0 -10.5px;
  background:currentColor; transform:rotate(45deg);
}
.c-liff-header__close::after { transform:rotate(-45deg); }
/* PC 表示（フロントのブレイクポイント 638px）｜ヘッダーと画面を合わせて、フロントの PC 時の枠の大きさにし、枠ごと中央に置く */
@media (min-width: 638px) {
  .c-liff-header {
    top:calc(50% - var(--PC時の画面高さ) / 2); left:50%; right:auto;
    transform:translateX(-50%);
    width:calc(var(--PC時の画面高さ) / var(--画面比率));
    border-radius:var(--PC時の角丸) var(--PC時の角丸) 0 0;
  }
  /* 画面（高さは枠からヘッダーを引いた分）を、ヘッダーの半分だけ下げて中央に置く */
  .is-liff-full .l-app.is-scaled-pc { top:calc(50% + var(--LIFFヘッダーの高さ) / 2); }
  /* 影はヘッダーと画面を合わせた枠に 1 つだけ落とす（別々に落とすと境目に線が出る）。外側の影なので中身には重ならない */
  .c-liff-header::after {
    content:""; position:absolute; top:0; left:0; right:0; z-index:-1;
    height:var(--PC時の画面高さ);
    border-radius:var(--PC時の角丸);
    box-shadow:0 10px 34px rgba(0,0,0,.22);
    pointer-events:none;
  }
  .is-liff-full .l-app {
    --画面高さ: calc(var(--PC時の画面高さ) - var(--LIFFヘッダーの高さ));
    border-radius:0 0 var(--PC時の角丸) var(--PC時の角丸);
    box-shadow:none;
  }
}