/* もしもカード・そよぎ スタイル(SPEC_V1)
   ・そよぎブランド4色(明るい緑/水色/白/黒) = 4テーマ(body data-theme)
   ・みせる画面はテーマに関わらず常に白地+黒でか文字(緊急時の読みやすさ最優先)。
     はんてん(.fx-invert)だけが黒地白文字にする
   ・てんめつ(.fx-blink)は光過敏に配慮して約0.8Hzの枠の明滅のみ(全画面ストロボ禁止)
   ・シニア/要配慮者向け: でか文字・大ボタン・.pressing の沈み込み(tap.js連動) */
:root{
  --brand:#2e9e6b;
  --bg:#f2f7f3;
  --ink:#1a1a1a;
  --card:#ffffff;
  --alert:#d43f3f;
  --line:#d7e5da;
  --sub:#555;
  /* 下タブの高さ。app.js が実測値で上書きする(文字の大きさ・言語・端末の下部インセットで変わるため)。
     ここの値はJSが動く前のフォールバック(84px + ナビゲーションバー/ジェスチャーバーの分) */
  --tabbar-h:calc(84px + env(safe-area-inset-bottom));
}
body[data-theme="aqua"]{
  --brand:#2b8fb5; --bg:#eff7fa; --line:#cfe5ee;
}
body[data-theme="white"]{
  --brand:#3d8a63; --bg:#ffffff; --card:#f7f9f8; --line:#e2e6e4;
}
body[data-theme="dark"]{
  --brand:#43c08a; --bg:#191d1b; --card:#242a27; --ink:#f2f2f2;
  --line:#3a423e; --sub:#b5bdb8;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  font-family:"Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  /* 下タブに隠れないよう「CSSだけで安全な下限」と「実測値+10px」の大きい方を採る。
     JSの計測が遅れても・小さく出ても、下限を割らない */
  padding-bottom:max(calc(84px + env(safe-area-inset-bottom)), calc(var(--tabbar-h) + 10px));
  line-height:1.6;
}
/* 文字サイズ3段階(せっていで切替・body class) */
body.fs0{ font-size:18px; }
body.fs1{ font-size:21px; }
body.fs2{ font-size:25px; }

header#hd{
  background:var(--brand); color:#fff;
  /* 帯が薄すぎて実機で押しにくい対策=縦幅を約2倍に(2026-07-26)。
     上はステータスバー(時計・電池)の分だけ下げる=その高さ分だけ帯も伸ばす */
  min-height:calc(120px + env(safe-area-inset-top));
  padding:calc(24px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          24px max(16px, env(safe-area-inset-left));
  font-weight:700; font-size:1.05em;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#hd-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lang-wrap{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.lang-globe{ font-size:1.15em; }
#hd #set-lang{
  min-height:48px; font-size:.95em; font-family:inherit;   /* 指で押しやすいよう余裕を持たせる */
  border:none; border-radius:8px; padding:2px 6px;
  background:#fff; color:var(--ink);
}
/* 横は画面の丸みやノッチ(横向き時)に食われないよう最低16px確保 */
#main{
  padding:16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  max-width:640px; margin:0 auto;
}

.screen.hidden, .hidden{ display:none; }

.tagline{ font-weight:700; margin:4px 0 14px; }

/* ホームの大ボタン(緊急時に迷わない・画面の約半分を占める=2026-07-23監修。
   空欄をボタンに使い切る。押しやすいに越したことない) */
.show-btn{
  display:block; width:100%;
  min-height:50vh;
  min-height:50dvh;   /* URLバーの伸縮があるモバイルでは実表示高さ基準(対応ブラウザのみ上書き) */
  font-size:1.8em; font-weight:800; font-family:inherit; line-height:1.4;
  background:var(--card); color:var(--ink);
  border:7px solid var(--alert); border-radius:22px;
  padding:14px;
}
.preview{ margin-top:14px; color:var(--sub); }

/* かきこみ */
label{ display:block; font-weight:700; margin:14px 0 4px; }
textarea{
  width:100%; font-size:1em; font-family:inherit;
  padding:10px; border:2px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink); resize:vertical;
}
.save-btn{
  width:100%; min-height:64px; margin-top:16px;
  background:var(--brand); color:#fff; border:none; border-radius:12px;
  font-size:1.2em; font-weight:700; font-family:inherit;
}

/* せってい */
.sec-h{ font-size:1.05em; margin:26px 0 6px; }
.set-row{
  display:flex; justify-content:space-between; align-items:center;
  min-height:56px; gap:12px; border-bottom:1px solid var(--line);
}
.set-btn{
  min-width:120px; min-height:48px; font-size:1em; font-family:inherit;
  border:2px solid var(--brand); background:var(--card); color:var(--ink);
  border-radius:10px;
}
select{ min-height:48px; font-size:1em; font-family:inherit; }
.hint{ color:var(--sub); font-size:.92em; }
.edit-hint{
  background:var(--card); border:1.5px solid var(--brand); border-radius:10px;
  padding:10px 12px; color:var(--ink); font-size:.95em; margin:0 0 6px;
}
/* みせる画面の発信ボタン(テーマに依存せず固定の緑・大きくタップしやすく) */
.call-btn{
  display:block; margin-top:10px; min-height:64px; line-height:64px;
  background:#2e9e6b; color:#fff; text-align:center;
  font-size:1.3em; font-weight:800; border-radius:12px; text-decoration:none;
}
.bk-row{ display:flex; gap:12px; }
.bk-row .set-btn{ flex:1; }
input[type="file"].hidden{ display:none; }
.credit{ color:var(--sub); margin-top:20px; text-align:center; }
.credit a{
  color:var(--brand); text-decoration:underline;
  display:inline-block; padding:8px 4px;   /* タップしやすい余白 */
}

/* タブバー */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; display:flex;
  background:var(--card); border-top:2px solid var(--line);
  /* 下=ナビゲーションバー/ジェスチャーバー、横=横向き時のノッチを避ける */
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.tab{
  flex:1; min-height:64px; border:none; background:none;
  font-size:1em; font-weight:700; font-family:inherit; color:var(--sub);
  border-top:4px solid transparent;
}
.tab.active{ color:var(--brand); border-top-color:var(--brand); }

/* tap.js の押下フィードバック */
.pressing{ transform:scale(.97); filter:brightness(.92); }

/* ======== みせる(全画面・でか文字) ========
   テーマに関わらず白地+黒文字。.fx-invert だけ黒地白文字 */
.show-overlay{
  position:fixed; inset:0; background:#fff; color:#1a1a1a; z-index:50;
  overflow-y:auto;
}
/* 全画面オーバーレイの中身。上はステータスバー、下は「とじる」ボタン+ナビゲーションバーの分を空ける */
#show-rotate{
  min-height:100%;
  padding:calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          calc(120px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

#show-ctrl{ display:flex; gap:10px; margin-bottom:14px; }
.ctrl-btn{
  min-height:48px; padding:0 14px; font-size:.95em; font-family:inherit;
  border:2px solid #bbb; background:#f4f4f4; color:#333; border-radius:10px;
}

.show-head{
  font-size:1.3em; font-weight:800; color:var(--alert);
  border:3px solid var(--alert); border-radius:12px;
  padding:12px; text-align:center;
}
.show-block{ margin-top:18px; }
.show-label{ font-size:.9em; color:#555; font-weight:700; }
.show-value{
  font-size:1.9em; font-weight:800; line-height:1.35;
  background:#f2f7f3; border-radius:10px; padding:10px 12px;
  overflow-wrap:anywhere;
}
.show-empty{ margin-top:24px; font-size:1.2em; text-align:center; color:#555; }
/* 緊急時に必ず押せるボタン。ナビゲーションバーに食い込ませない */
.close-btn{
  position:fixed; min-height:64px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:max(16px, env(safe-area-inset-left));
  right:max(16px, env(safe-area-inset-right));
  background:var(--brand); color:#fff; border:none; border-radius:12px;
  font-size:1.2em; font-weight:700; font-family:inherit; z-index:51;
}

/* はんてん(白黒反転) */
.show-overlay.fx-invert{ background:#000; color:#fff; }
.fx-invert .show-value{ background:#161616; color:#fff; }
.fx-invert .show-label{ color:#ccc; }
.fx-invert .show-empty{ color:#ccc; }
.fx-invert .show-head{ color:#ff5c5c; border-color:#ff5c5c; }
.fx-invert .ctrl-btn{ background:#222; color:#eee; border-color:#555; }

/* てんめつ(約0.8Hzの枠の明滅・全画面ストロボにしない) */
.show-overlay.fx-blink{ animation: blinkframe 1.2s ease-in-out infinite; }
@keyframes blinkframe{
  0%,100%{ box-shadow: inset 0 0 0 6px rgba(212,63,63,.25); }
  50%    { box-shadow: inset 0 0 0 16px rgba(212,63,63,.95); }
}

/* よこむき(90度回転・OSの画面回転に頼らない) */
#scr-show.landscape{ overflow:hidden; }
#scr-show.landscape #show-rotate{
  position:absolute; top:0; left:0;
  width:100vh; height:100vw;
  /* 🔴 min-height:100vw が要る。基底の min-height:100% は親(=画面の高さ)を指すので、
     打ち消さないと箱が812px高のまま回り、見出しと「よこむき解除」が画面外へ飛ぶ */
  min-height:100vw;
  /* 🔴 translateY は -100vh ではなく -100%(=回転後の自分の高さ)。箱の実寸に追従させる */
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  overflow-y:auto;
  /* 90度回すと端末のバーの向きも入れ替わる:
     画面の上(ステータスバー)= この箱の左辺 / 画面の下(ナビゲーションバー)= この箱の右辺 */
  padding:20px calc(16px + env(safe-area-inset-bottom))
          20px calc(16px + env(safe-area-inset-top));
}
#scr-show.landscape .close-btn{
  position:static; display:block; width:100%; margin-top:20px;
}

/* トースト */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:max(calc(96px + env(safe-area-inset-bottom)), calc(var(--tabbar-h) + 12px));
  background:#333; color:#fff; padding:10px 18px; border-radius:999px;
  opacity:0; transition:opacity .25s; pointer-events:none; z-index:60;
  max-width:88%;
}
.toast.show{ opacity:1; }