/* 10代の情報室 試作v0
   夜の自室のような、静かで暗めの中立デザイン(裁定⑦: 一見して支援アプリに見えない)。
   そよぎ緑は使わない。アクセントは あたたかい灯り色(#e8b04a)。 */

:root{
  --bg:#1e2230;        /* 背景(濃紺) */
  --fg:#e9e9f2;        /* 文字 */
  --sub:#9aa0b5;       /* サブ文字 */
  --card:#282d40;      /* カード */
  --accent:#e8b04a;    /* アクセント(あたたかい灯り色) */
  --accent-ink:#221a08;/* アクセントの上に載せる文字色 */
  --line:#3a4059;      /* ライン */
  --toast-bg:#12151f;  /* トースト背景 */
  /* 下タブの実際の高さ。JSが実測値で上書きする。ここはJSが動く前のフォールバック
     (targetSdk36=エッジtoエッジ強制で、下タブは自分の余白にsafe-areaを足すぶん背が高くなる) */
  --tabbar-h:calc(76px + env(safe-area-inset-bottom));
}

/* ---- がめんの いろ(アクセシビリティ・2026-08-05ヒロ要望) ----
   既定=よる(現行のまま)。明るい画面が見やすい人向けに しろ/クリーム、
   コントラストがはっきりした方が読める人向けに くろ を用意する。
   明るいテーマではアクセントを濃い琥珀に落とす(白地に#e8b04aは文字として薄すぎるため)。 */
body[data-theme="light"]{
  --bg:#f6f7fa; --fg:#262b3d; --sub:#5c6377; --card:#ffffff;
  --accent:#8a5a12; --accent-ink:#ffffff; --line:#d8dce8; --toast-bg:#ffffff;
}
body[data-theme="cream"]{
  --bg:#f7f1e3; --fg:#3b3427; --sub:#756c58; --card:#fffaf0;
  --accent:#8a5a12; --accent-ink:#ffffff; --line:#e2d8c4; --toast-bg:#fffaf0;
}
body[data-theme="black"]{
  --bg:#000000; --fg:#ffffff; --sub:#c8c8cf; --card:#15151b;
  --accent:#ffcf6e; --accent-ink:#221a08; --line:#50505c; --toast-bg:#15151b;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:18px;
  line-height:1.7;
  -webkit-user-select:none; user-select:none;
  /* 下タブぶん。「CSSだけで安全な下限」と「実測+10px」の大きい方=JSの計測が遅れても下限を割らない */
  padding-bottom:max(calc(76px + env(safe-area-inset-bottom)), calc(var(--tabbar-h) + 10px));
}
/* ---- もじの 大きさ(アクセシビリティ) ----
   読み物の文字はすべて body 基準の em にしてあるので、ここを変えると全体が追従する。
   ヘッダー/下タブは固定(大きくすると崩れる場所は据え置き) */
body.fs1{ font-size:20px; }
body.fs2{ font-size:23px; }

/* ---- ヘッダー ---- */
#hd{
  display:flex; align-items:center; justify-content:space-between;
  /* 縦paddingを約2倍(14→28)=指で押しやすい厚み。上はステータスバー(時計・電池)ぶんを足す */
  padding:calc(28px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          28px max(16px, env(safe-area-inset-left));
  min-height:calc(130px + env(safe-area-inset-top));   /* ヘッダー縦幅を約2倍に(旧≈65px→130px)。align-items:centerで中身は縦中央のまま */
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.hd-title{
  font-size:17px; color:var(--sub); letter-spacing:.04em;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  /* ロゴ連打の対象。押しても痕跡を残さない(見た目の変化なし) */
}
.hd-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-lang{
  background:transparent; color:var(--sub);
  border:1px solid var(--line); border-radius:14px;
  padding:8px 12px; font-size:16px; cursor:pointer; line-height:1;
  min-height:44px;                   /* 指で押しやすい最小タップ高さ */
}
.btn-exit{
  background:transparent; color:var(--sub);
  border:1px solid var(--line); border-radius:14px;
  padding:8px 14px; font-size:15px; cursor:pointer; white-space:nowrap;
  min-height:44px;                   /* 指で押しやすい最小タップ高さ */
}

/* ---- 画面 ---- */
#main{
  max-width:640px; margin:0 auto;
  padding:20px max(18px, env(safe-area-inset-right)) 20px max(18px, env(safe-area-inset-left));   /* 横向き時のノッチ避け */
}
.screen{ animation:fade .25s ease; }
.hidden{ display:none !important; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

/* ---- ① ひといき: 呼吸の円 ---- */
.breath-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:44vh; margin:10px 0 6px;
}
.breath-circle{
  width:180px; height:180px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(232,176,74,.28), rgba(232,176,74,.06) 70%);
  border:1px solid rgba(232,176,74,.35);
  animation:breathe 10s ease-in-out infinite;   /* 4秒吸って6秒はく = 10秒周期 */
}
@keyframes breathe{
  0%   { transform:scale(.72); }   /* いちばん小さい */
  40%  { transform:scale(1); }     /* 4秒かけて ふくらむ(すって…) */
  100% { transform:scale(.72); }   /* 6秒かけて ちぢむ(はいて…) */
}
.breath-phase{ color:var(--fg); font-size:1.111em; letter-spacing:.08em; }

.oneline{
  margin:8px auto 0; max-width:520px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:20px 22px; text-align:center; font-size:1em; line-height:1.9;
  cursor:pointer;
}
.memo-foot{ text-align:center; margin-top:14px; }
.link-set{
  color:var(--sub); font-size:.778em; text-decoration:underline;
  text-underline-offset:4px; cursor:pointer; padding:8px 12px;
}
/* 初回一度きり案内の本文(改行を活かすため pre-line。textContentのみでレイアウト) */
.intro-text{
  color:var(--fg); font-size:.889em; line-height:2; margin:0 0 18px;
  white-space:pre-line; text-align:start;   /* start=LTRで左・RTL(ar)で右 */
}

/* ---- カード(おなじひと / しっておく / まどぐち) ---- */
.cardlist{ display:flex; flex-direction:column; gap:16px; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:18px 20px;
}
.card-title{
  color:var(--accent); font-size:.944em; font-weight:700; margin-bottom:10px;
}
.card-body{ font-size:.944em; line-height:1.9; }
.card-note{ color:var(--sub); font-size:.778em; margin-top:4px; padding:2px 4px; }

.intro{
  color:var(--sub); font-size:.889em; line-height:1.9;
  margin:0 0 16px; padding:0 2px;
}

/* まどぐちカードの連絡先リンク */
.contact{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.contact a{
  color:var(--accent); text-decoration:none; font-size:.889em;
  border:1px solid var(--line); border-radius:14px; padding:10px 14px;
  display:inline-block;
}

/* ---- ⑤ メモ ---- */
.memo-input{
  width:100%; background:var(--card); color:var(--fg);
  border:1px solid var(--line); border-radius:16px;
  padding:16px; font-size:1em; line-height:1.8; resize:vertical;
  font-family:inherit; -webkit-user-select:text; user-select:text;
}
.btn-primary{
  margin-top:16px; width:100%;
  background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:16px; padding:16px; font-size:1em; font-weight:700;
  cursor:pointer;
}

/* ---- 下タブ ---- */
#tabbar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; background:var(--bg); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  /* 横は既存の4pxを下限に据えたまま、ノッチ側だけ広げる */
  padding-left:max(4px, env(safe-area-inset-left)); padding-right:max(4px, env(safe-area-inset-right));
  z-index:6;
}
.tab{
  flex:1; background:transparent; border:none; color:var(--sub);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; font-size:12px; cursor:pointer; border-radius:12px;
}
.tab-ico{ font-size:16px; opacity:.85; }
.tab.active{ color:var(--fg); }
.tab.active .tab-ico{ opacity:1; }

/* ---- オーバーレイ(メモ閲覧 / せってい) ---- */
.overlay{
  position:fixed; inset:0; background:rgba(10,12,20,.72);
  display:flex; align-items:center; justify-content:center;
  /* inset:0 は端末の端まで=ステータスバー/ナビバーの下も含む。余白でその内側に寄せる */
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
          max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  z-index:20;
}
.sheet-box{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px; width:100%; max-width:520px; overflow-y:auto;
  max-height:calc(86vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));   /* 上下バーぶんを引く */
}
.sheet-title{ font-size:1em; font-weight:700; margin-bottom:14px; }

.memo-view-list{ display:flex; flex-direction:column; gap:12px; margin:16px 0 14px; }
.memo-item{
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px;
}
.memo-item-date{ color:var(--sub); font-size:.722em; margin-bottom:6px; }
.memo-item-body{ font-size:.889em; line-height:1.8; white-space:pre-wrap; -webkit-user-select:text; user-select:text; }
.memo-item-foot{ margin-top:8px; text-align:end; }   /* end=LTRで右・RTL(ar)で左 */
.memo-empty{ color:var(--sub); font-size:.833em; text-align:center; padding:14px; }

.btn-line{
  background:transparent; color:var(--fg);
  border:1px solid var(--line); border-radius:14px;
  padding:10px 16px; font-size:.833em; cursor:pointer;
}
.btn-del{
  background:transparent; color:var(--sub);
  border:1px solid var(--line); border-radius:12px;
  padding:6px 12px; font-size:.778em; cursor:pointer;
}

/* せってい */
.set-block{ margin-bottom:20px; }
.set-label{ font-size:.889em; margin-bottom:8px; }
.set-note{ color:var(--sub); font-size:.722em; line-height:1.7; margin-top:8px; }
.text-in{
  width:100%; background:var(--bg); color:var(--fg);
  border:1px solid var(--line); border-radius:12px;
  padding:12px; font-size:.889em; font-family:inherit;
  -webkit-user-select:text; user-select:text;
}
#set-exit-save{ margin-top:10px; }
.tap-choices{ display:flex; gap:8px; flex-wrap:wrap; }
.tap-choices .tap-opt{
  flex:1; background:transparent; color:var(--sub);
  border:1px solid var(--line); border-radius:12px;
  padding:10px 0; font-size:.889em; cursor:pointer;
}
/* 🌐言語シートは12言語=折り返して内容幅で並べる(等分割にしない) */
#lang-choices .tap-opt{ flex:0 1 auto; padding:10px 14px; }
.tap-choices .tap-opt.sel{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); font-weight:700; }

.credit{ margin:8px 0 0; }
.credit-link{ color:var(--sub); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.credit-ver{ color:var(--sub); font-size:12px; margin:6px 0 0; }
#settings-close{ display:block; width:100%; margin-top:6px; }

/* ---- 押下の手応え(.pressing) ---- ヘッダー名(ロゴ)には効かせない(痕跡を出さない) */
.btn-exit.pressing,.btn-lang.pressing,.btn-primary.pressing,.btn-line.pressing,.btn-del.pressing,
.tab.pressing,.oneline.pressing,.link-set.pressing,.tap-opt.pressing,.contact a.pressing{
  filter:brightness(1.15); transform:scale(.98);
}

/* ---- トースト ---- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:max(calc(96px + env(safe-area-inset-bottom)), calc(var(--tabbar-h) + 12px));   /* 下タブの実寸の上に出す */
  background:var(--toast-bg); color:var(--fg);
  border:1px solid var(--line); border-radius:14px;
  padding:12px 18px; font-size:.833em; max-width:88%; text-align:center;
  z-index:30; box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.toast .toast-sub{ display:block; color:var(--sub); font-size:.722em; margin-top:6px; line-height:1.6; }