/* 相談と受診の前に・そよぎ スタイル(そよぎアプリ・キット v1)
   ・そよぎブランド4色(明るい緑/水色/白/黒) = 4テーマ(body data-theme)
   ・シェルは縦フレックス(ヘッダー=上固定 / #main=スクロール / ナビ=下固定)。100dvh・特大文字でも下端まで届く
   ・大人の尊厳を保つ落ち着いたトーン。機能色のみ。でか文字・大ボタン(44px以上)・.pressing の沈み込み(tap.js連動)
   ・targetSdk36(エッジtoエッジ)のため上下左右に env(safe-area-inset-*)。画面の上下端に余白を持つ */
:root{
  --brand:#2e9e6b;
  --bg:#f2f7f3;
  --ink:#1a1a1a;
  --card:#ffffff;
  --line:#d7e5da;
  --sub:#555;
  --alert:#d43f3f;
  --ok:#2e9e6b;
}
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);
  line-height:1.6;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
  -webkit-touch-callout:none;
}
body.fs0{ font-size:18px; }
body.fs1{ font-size:21px; }
body.fs2{ font-size:25px; }

/* ======== ヘッダー(chromeは固定19px=fs2でも肥大させない) ======== */
header#hd{
  background:var(--brand); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-shrink:0; overflow:hidden;
  min-height:calc(72px + env(safe-area-inset-top));
}
/* 題名は2行まで折り返す(× とじる と言語の欄で幅が残らない端末でも名前が読める。3行目以降は app.js の fitTitle が短い名前に替える) */
#hd-title{
  flex:1; min-width:2.5em; overflow:hidden; font-size:17px; line-height:1.2;
  white-space:normal; overflow-wrap:break-word;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
#hd-right{ display:flex; align-items:flex-end; gap:6px; flex-shrink:0; }
#lang-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.lang-label{ font-size:.55em; font-weight:700; color:#fff; line-height:1; letter-spacing:.02em; }
#hd #set-lang{
  min-height:44px; font-size:.95em; font-family:inherit;
  border:none; border-radius:8px; padding:2px 6px;
  background:#fff; color:#1a1a1a;
}
.hd-btn{
  min-height:44px; min-width:44px; padding:0 8px;
  border:none; border-radius:8px; background:rgba(0,0,0,.22); color:#fff;   /* 暗い半透明=白い字がどのテーマでも読める(退出ボタンは見つけやすさが大事) */
  font-size:1em; font-family:inherit; font-weight:700;
}

/* ======== 本文(ここだけスクロール) ======== */
#main{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  width:100%; max-width:680px; margin:0 auto;
  padding:16px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
}
.screen.hidden, .hidden, [hidden]{ display:none !important; }
.scr-title{ font-size:1.3em; margin:0 0 10px; }
.sec-h{ font-size:1.05em; margin:24px 0 8px; }
.hint{ color:var(--sub); font-size:.92em; }
.note{
  background:var(--card); border:1.5px solid var(--brand); border-radius:10px;
  padding:10px 12px; color:var(--ink); font-size:.95em; margin:0 0 10px;
}
.tagline{ font-weight:700; margin:4px 0 14px; }

/* ======== 共通部品 ======== */
.big-btn{
  display:flex; align-items:center; gap:16px; width:100%; font-size:1em;
  min-height:76px; padding:14px 20px; margin:0 0 14px;
  border:2px solid var(--brand); background:var(--card); color:var(--ink);
  border-radius:18px; font-family:inherit; text-align:left;
}
.big-btn .ico{ font-size:1.9em; line-height:1; flex:none; width:1.5em; text-align:center; }
.big-btn .lbl{ font-size:1.2em; font-weight:700; min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.big-btn.primary{ background:var(--brand); color:#fff; }
.big-btn.alert{ border-color:var(--alert); }
.big-btn.huge{ min-height:40vh; min-height:40dvh; justify-content:center; text-align:center; font-size:1.3em; }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.grid2 .big-btn{ flex-direction:column; justify-content:center; text-align:center; margin:0; min-height:120px; }
/* 幅が狭く文字が「とても大きい」ときは1列にして、ほかの大ボタンと同じ横並び(長い単語が細かく折れないように) */
@media (max-width:400px){
  body.fs2 .grid2{ grid-template-columns:minmax(0, 1fr); }
  body.fs2 .grid2 .big-btn{ flex-direction:row; justify-content:flex-start; text-align:left; min-height:76px; }
}
.card{
  background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:12px 14px; margin:0 0 12px; overflow-wrap:anywhere;   /* 空白のない長い英数字(URL など)でも横にはみ出さない */
}
.card.tappable{ border-color:var(--brand); }
.row{ display:flex; align-items:center; gap:10px; }
.row.between{ justify-content:space-between; }
.btn{
  min-height:52px; min-width:52px; padding:0 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:14px; font-family:inherit; font-size:1em; font-weight:700;
  overflow-wrap:normal;   /* .grow / .card の anywhere を受け継いで単語の途中で折れないように */
}
.btn.primary{ border-color:var(--brand); background:var(--brand); color:#fff; }
.btn.danger{ border-color:#cc3b30; color:#cc3b30; }
body[data-theme="dark"] .btn.danger{ border-color:#ef9a9a; color:#ef9a9a; }
.btn.wide{ width:100%; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.btn-row .btn{ flex:1 1 auto; }   /* 入りきらないときは次の行へ回る(文字の大きさ・言語で縮めて字をはみ出させない) */
.field{ margin:12px 0; }
.field label{ display:block; font-weight:700; margin:0 0 4px; }
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field input[type="time"], .field textarea, .field select{
  width:100%; font-size:1em; font-family:inherit;
  padding:10px; border:2px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:2.6em; }
.list{ margin:0; padding:0; list-style:none; }
.list li{
  background:var(--card); border:2px solid var(--line); border-radius:12px;
  padding:10px 12px; margin:0 0 8px; min-height:52px;
  display:flex; align-items:center; gap:10px;
}
.list li .grow{ flex:1; min-width:0; overflow-wrap:anywhere; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  min-height:44px; min-width:44px; padding:6px 14px; border-radius:999px;
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  font-family:inherit; font-size:.95em; font-weight:700;
}
.chip.on{ border-color:var(--brand); background:var(--brand); color:#fff; }
.empty{ color:var(--sub); text-align:center; padding:20px 8px; }
.photo-thumb{ width:64px; height:64px; object-fit:cover; border-radius:10px; background:var(--bg); flex:none; }
.photo-big{ width:100%; max-width:min(90vw,420px); aspect-ratio:1/1; object-fit:contain; border-radius:16px; background:var(--card); border:2px solid var(--line); display:block; margin:0 auto; }

/* ======== でか文字・見せる(全画面) ======== */
.ov{
  position:fixed; inset:0; z-index:300; background:var(--bg); color:var(--ink);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(20px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          calc(128px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
/* 相手に見せる画面は、どのテーマでも白地に黒の字(くろ テーマの変数を明るい色に戻す) */
.ov.show-white{ background:#fff; color:#1a1a1a; --card:#f4f6f5; --ink:#1a1a1a; --sub:#555; --line:#d7e5da; }
.ov.show-black{ background:#000; color:#fff; }
.ov-close{
  position:fixed; min-height:64px; z-index:301;
  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;
  line-height:1.25; padding:8px 12px; word-break:keep-all; overflow-wrap:anywhere;   /* 2行になっても語の途中で折れない */
}
.show-head{ font-size:1.3em; font-weight:800; border:3px solid var(--brand); border-radius:12px; padding:12px; text-align:center; }
.show-block{ margin-top:18px; }
.show-label{ font-size:.9em; color:var(--sub); font-weight:700; overflow-wrap:anywhere; }
.show-value{ font-size:1.9em; font-weight:800; line-height:1.35; background:var(--card); border-radius:10px; padding:10px 12px; overflow-wrap:anywhere; }
.step-text{ font-size:2em; font-weight:800; line-height:1.4; text-align:center; margin:12vh 0 24px; overflow-wrap:anywhere; }
.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;
}

/* ======== せってい ======== */
.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; }
.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; }

/* ======== ナビ(下固定・最大6) ======== */
#navbar{
  flex-shrink:0; display:flex;
  background:var(--card); border-top:2px solid var(--line);
  padding-bottom:max(6px, env(safe-area-inset-bottom));
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
.nav-btn{
  flex:1; min-height:64px; min-width:44px; border:none; background:none;
  font-size:14px; font-weight:700; font-family:inherit; color:var(--sub);
  border-top:4px solid transparent; padding:4px 0; line-height:1.2;
  overflow-wrap:anywhere;   /* 6個並び(72px幅)で en「Medicines」等がはみ出さないよう chrome と同じく固定サイズ */
}
.nav-btn.active{ color:var(--brand); border-top-color:var(--brand); }
.nav-btn.hidden{ display:none; }

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

/* アプリの中の確かめの窓(app.js askBox・Play版だけ・2026-09-29)。重ねた画面・写真の切りとりより上、トーストより下 */
.ov.ask-ov{
  z-index:360; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
          calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.ask-box{ background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:16px; padding:20px 16px 16px; width:min(100%, 460px); max-height:100%; overflow-y:auto; }
.ask-msg{ font-size:1.15em; font-weight:700; line-height:1.55; margin:0 0 18px; word-break:keep-all; overflow-wrap:anywhere; white-space:pre-wrap; }   /* 分かち書きの空白で折る(語の途中で切らない) */
.ask-row{ display:flex; flex-wrap:wrap; gap:10px; }
.ask-row .btn{ flex:1 1 7em; min-height:56px; font-size:1.1em; }

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

/* ======== このアプリ固有(準備ノート) ======== */
.sec-h.first{ margin-top:0; }
.add-card{ border-color:var(--brand); }
.lbl-inline{ font-weight:700; margin-right:8px; }
/* .field の外に置く1行入力(表紙の1行など)にも同じ見た目を与える */
.row > input[type="text"]{
  flex:1 1 auto; min-width:0; font-size:1em; font-family:inherit;
  padding:10px; border:2px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink);
}
.btn.small{ min-height:44px; min-width:44px; padding:0 10px; font-size:.9em; }
.list li .ctl{ display:flex; flex-direction:column; gap:6px; flex:none; }
.list li .num{ font-weight:800; color:var(--brand); min-width:1.4em; text-align:center; flex:none; }
.list li.in-sheet{ border-color:var(--brand); }
/* 「言えなかった」を押した行と「言えた こと」の行: 全体を薄く(opacity)すると字が 4.5:1 を切るので、
   地を背景色・点線の枠・字を --sub にして「脇に置いた」ことを見せる(字は どのテーマでも 4.5:1 以上) */
.list li.kept{ background:var(--bg); border-style:dashed; color:var(--sub); }
.list li.kept .num{ color:var(--sub); }
.item-title{ font-weight:700; overflow-wrap:anywhere; }
.done-list li{ color:var(--sub); }
.show-detail{ font-size:1.2em; line-height:1.5; padding:6px 12px 0; overflow-wrap:anywhere; }
.ov-body{ max-width:680px; margin:0 auto; overflow-wrap:anywhere; }
/* 1枚: 見せる数・相手に見せる・窓口のあと のあいだの余白 */
#ichimai-show{ margin:14px 0 10px; }
#ichimai-after{ margin:0 0 14px; }
/* 1枚: 見せる範囲の区切り(N行目のあと) */
.list li.sheet-end{
  background:none; border:none; border-top:2px dashed var(--brand); border-radius:0;
  min-height:0; padding:4px 4px 0; margin:2px 0 10px;
  color:var(--ink); font-weight:700; font-size:.9em; justify-content:center; text-align:center;
}
/* 1枚: 幅が狭いか文字が「とても大きい」ときは、▲▼なおす を文字の下に横1列で置く(文字の欄を広く取る) */
@media (max-width:400px){
  #ichimai-list .list li{ flex-wrap:wrap; }
  #ichimai-list .list li .ctl{ flex-direction:row; flex-wrap:wrap; width:100%; }
  #ichimai-list .list li .ctl .btn{ flex:1 1 auto; }
}
body.fs2 #ichimai-list .list li{ flex-wrap:wrap; }
body.fs2 #ichimai-list .list li .ctl{ flex-direction:row; flex-wrap:wrap; width:100%; }
body.fs2 #ichimai-list .list li .ctl .btn{ flex:1 1 auto; }
.card.tappable .item-title{ color:var(--brand); }

/* ======== 文字用の緑と、緑の上の文字色(点検 junbi-22・A/B。ひとつずつ・そよぎ と同じ変数名) ========
   ・--brand-ink = 文字を載せる緑(ヘッダーの地・主ボタン・選んだチップ・見せる画面の とじる)と、
     緑を文字色に使う所(下ナビの選択中・リンク・1枚の番号・窓口の名前)。明るい3テーマは濃い色にして 4.5:1 以上
     (みどり・しろ #237a52 / みずいろ #1f6f8f)。くろ は --brand のまま(字のほうを --on-brand の濃い色にする)
   ・--on-brand = 緑の上の文字色。既定は白・くろ は緑が明るい(#43c08a)ので濃い緑の字(7.2:1)
   ・--hd-btn-bg = ヘッダーのボタン(× とじる)の地
   ・枠・線・飾り(カードの枠・下ナビの選択中の線・区切り線など)は --brand のまま。4テーマの考え方は変えない
   ・見せる画面(.ov.show-white)は白地に黒のまま。とじる だけがこの色を使う */
:root{ --brand-ink:#237a52; --on-brand:#fff; --hd-btn-bg:rgba(0,0,0,.28); }
body[data-theme="aqua"]{ --brand-ink:#1f6f8f; }
body[data-theme="white"]{ --brand-ink:#237a52; }
body[data-theme="dark"]{ --brand-ink:var(--brand); --on-brand:#10231a; --hd-btn-bg:rgba(255,255,255,.35); }
header#hd{ background:var(--brand-ink); }
header#hd, .lang-label{ color:var(--on-brand); }
.hd-btn{ background:var(--hd-btn-bg); color:var(--on-brand); }
.btn.primary, .big-btn.primary, .chip.on{ border-color:var(--brand-ink); background:var(--brand-ink); color:var(--on-brand); }
.ov-close, .call-btn{ background:var(--brand-ink); color:var(--on-brand); }
.nav-btn.active, .credit a, .list li .num, .card.tappable .item-title{ color:var(--brand-ink); }
/* 空の欄の「れい: …」: ブラウザの既定の灰色(#757575)は しろ 4.36・くろ 3.18 で足りないので、説明の字と同じ --sub(4.5:1 以上) */
input::placeholder, textarea::placeholder{ color:var(--sub); opacity:1; }

/* ======== 写真の取り込みとトリミング(photo.js) ======== */
.photo-ov{
  position:fixed; inset:0; z-index:350; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; overflow-y:auto;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.photo-ov-title{ font-size:1.18em; font-weight:700; margin:0 0 6px; text-align:center; }
.photo-ov-hint{ color:var(--sub); font-size:.92em; text-align:center; margin:0 0 14px; max-width:22em; }
.photo-crop-canvas{
  width:min(80vw,300px); height:min(80vw,300px); max-width:300px; max-height:300px;
  border-radius:12px; border:2px solid var(--brand); background:#000; touch-action:none; display:block;
}
.photo-dpad{ display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:6px; margin:14px 0 6px; justify-content:center; }
.photo-nudge{ min-width:52px; min-height:52px; border:2px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; font-size:1.2em; font-family:inherit; }
.photo-nudge.spacer{ border:none; background:none; }
.photo-zoom-row{ display:flex; align-items:center; gap:10px; width:100%; max-width:340px; margin:8px 0 2px; }
.photo-zoom-row input[type="range"]{ flex:1; min-height:44px; accent-color:var(--brand); }
.photo-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%; max-width:420px; margin-top:12px; }
.photo-file{ display:none; }

/* はじめての つかいかた(app.js openGuide・2026-09-30)。🔴この節はファイルの最後に置く(patch_guide.js がここから最後までを写す)。
   ほかの重ねた画面より上・確かめの窓より下。ボタンは下に固定した帯(地の色つき=長いページでも本文が透けない) */
.ov.guide-ov{ z-index:350; padding-bottom:calc(128px + env(safe-area-inset-bottom)); }
.guide-box{ width:min(100%, 560px); margin:0 auto; }
.guide-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.guide-title{ margin:0; font-weight:800; color:var(--brand-ink, var(--brand)); }
.guide-step{ margin:0; color:var(--sub); font-weight:700; white-space:nowrap; unicode-bidi:isolate; }   /* 向きは app.js が dir で決める(ar で「8 / 1」にしない) */
.guide-lang{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:12px 0 0; }
.guide-lang select{ min-height:44px; font-size:1em; font-family:inherit; border:2px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); padding:2px 8px; }
.guide-h{ font-size:1.35em; line-height:1.45; margin:16px 0 12px; word-break:keep-all; overflow-wrap:anywhere; }
.guide-p{ font-size:1.1em; line-height:1.85; margin:0; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
.guide-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.guide-dot{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.guide-dot.on{ background:var(--brand); }
.guide-row{
  position:fixed; z-index:351; display:flex; gap:10px; left:0; right:0; bottom:0;
  padding:10px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:var(--bg); border-top:1px solid var(--line);
}
.guide-row .btn{ flex:1 1 0; min-width:0; min-height:64px; font-size:1.15em; }