/* 患者説明用アプリ(入口) — わかばテーマ(HP風ランディング)
 * 色・影・角丸の値は design/tokens.css だけが持つ(tokens.css を先に読み込む)。
 * 解説と採用理由は docs/design-tokens.md。
 * ★文字サイズ倍率 --fs(標準1 / 大1.2 / 特大1.44)は tokens.css で定義し、
 *   apps/questionnaire と同一値を維持する(各アプリの JS が documentElement に上書きする)。
 */
/* トークンをこのファイルのローカル名で受ける層。値はここに書かない。
   ★セレクタに .rt-sample を含めるのは必須。カスタムプロパティは「宣言した要素」で
     値が確定するため、:root だけだと評価用サンプル(青)の差し替えが伝わらない。 */
:root, .rt-sample {
  --ink: var(--rt-ink);
  --ink-soft: var(--rt-ink-soft);
  --heading: var(--rt-heading);
  --primary: var(--rt-primary);      /* 進むボタン: 深い若葉グリーン */
  --primary-dark: var(--rt-primary-dark);
  --accent: var(--rt-accent);
  --card: var(--rt-card);
  --line: var(--rt-line);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* hidden属性を確実に効かせる(.qr-error-note等のdisplay指定がUAスタイルを上書きするのを防ぐ) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  color: var(--ink);
  font-size: calc(17px * var(--fs));
  line-height: 1.9;
  background: var(--rt-stage-hero);
  transition: background-color 1.2s ease;
}
/* スクロール位置・画面で body 背景がふわっと変わる */
body[data-bg="hero"]     { background: var(--rt-stage-hero); }
body[data-bg="benefit"]  { background: var(--rt-stage-benefit); }
body[data-bg="sample"]   { background: var(--rt-stage-sample); }
body[data-bg="cta"]      { background: var(--rt-stage-cta); }
body[data-bg="consent"]  { background: var(--rt-stage-consent); }

/* ===== 固定ヘッダ(52px・画面を取りすぎない) ===== */
.app-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: rgba(255, 249, 240, .92);  /* = --rt-stage-hero の半透明。blur と重ねるため実値で持つ */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* ヘッダは特大時も拡大しない(問診アプリと同方式。狭い画面での折返しを防ぐ) */
.app-bar-title { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.font-toggle {
  border: 1.5px solid var(--rt-line-strong); background: #fff; color: var(--ink);
  border-radius: var(--rt-radius-pill); padding: 6px 14px; font-family: inherit;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.font-toggle b { color: var(--primary); margin-left: 4px; }

/* ===== 画面切替 ===== */
.screen { display: none; }
.screen.active { display: block; }
main.screen.active { padding-top: 52px; }
#view-consent.active, #view-send.active, #view-mailmock.active { padding-top: 52px; }
section { padding: 72px 22px; max-width: 640px; margin: 0 auto; }
.page { max-width: 640px; margin: 0 auto; padding: 30px 22px 80px; }
.page h1 { font-size: calc(21px * var(--fs)); text-align: center; margin: 18px 0 26px; color: var(--heading); }

/* ===== 出現アニメーション ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  body { transition: none; }
}

/* ===== ヒーロー ===== */
/* overflow:hidden が必須。装飾円(blob)の右はみ出しが文書幅を広げると、
   iOS Safari が全体を縮小表示して左寄せになる(カードごとズレる)。body側の
   overflow-x では iOS で効かないため、発生源のここでクリップする。 */
/* 双葉上の余白を詰める(ヘッダ高の約70%分)。下余白は+20px(円を切らずに収めるための按分。次セクションの上余白を-20して合計は不変) */
.hero { text-align: center; padding-top: 48px; padding-bottom: 92px; position: relative; overflow: hidden; }
/* 背景の装飾円。opacity .55 + blur 前提の一点物の色のためトークン化しない */
.hero-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .55; }
.hero-blob.b1 { width: 200px; height: 200px; background: #FFE3C4; top: 30px; left: -60px; }
/* bottom:0 でセクション内に完全に収める(左右のはみ出しはあえて残す=画面端の演出) */
.hero-blob.b2 { width: 150px; height: 150px; background: #DCEFD8; bottom: 0; right: -40px; }
.benefits { padding-top: 52px; } /* heroの+20px分を按分で相殺(見た目の位置は不変) */
.hero-mark { margin-bottom: 12px; }
.hero h1 {
  /* 画面幅に追従して常に3行に収める(最長行14文字 ≈ 100vw×0.8÷14 = 5.7vw)。
     文字サイズ設定(--fs)には連動しない(本文側は--fsで拡大する)。 */
  font-size: clamp(19px, 6.1vw, 36px);
  font-weight: 700; line-height: 1.6;
  margin-bottom: 52px; color: var(--heading); /* 表題と本文の間隔は広め */
  white-space: nowrap; /* 途中折返しを禁止し3行構成を保つ */
}
.hero h1 .accent { color: var(--primary); }
/* 本文は両端揃え(日本語組版)。右端のラグが消え、左右の余白が対称に見える。左右+10pxのゆとり */
.hero p { text-align: justify; text-justify: inter-character; color: var(--ink); margin: 0 10px 1.2em; }
.scroll-cue { margin-top: 40px; color: var(--ink-soft); font-size: calc(14px * var(--fs)); }
.scroll-cue .arrow { display: block; font-size: calc(26px * var(--fs)); animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(8px);} }
@media (prefers-reduced-motion: reduce) { .scroll-cue .arrow { animation: none; } }

/* ===== 特長カード ===== */
.benefits h2, .sample h2, .cta h2 {
  text-align: center; font-size: calc(21px * var(--fs)); font-weight: 700;
  margin-bottom: 34px; color: var(--heading);
}
.benefit-card {
  background: var(--card); border-radius: var(--rt-radius-card); padding: 22px 20px;
  margin-bottom: 18px; box-shadow: var(--rt-shadow-card);
  display: flex; gap: 16px; align-items: flex-start;
}
.benefit-ico {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.benefit-ico svg { width: 30px; height: 30px; }
/* 特長アイコンの丸背景は docs/design-tokens.md §5 で「テーマ非依存の固定色」と決めている
   （インラインSVGのアイコン本体の色と対で成立するため、トークンには載せない） */
.ico-home { background: #E3EDF8; }
.ico-wakaba { background: #EFF7E4; }
.ico-heart { background: #FBE9EC; }
.benefit-card h3 { font-size: calc(17px * var(--fs)); margin-bottom: 4px; }
.benefit-card p {
  font-size: calc(15px * var(--fs)); color: var(--ink-soft); line-height: 1.7;
  text-align: justify; text-justify: inter-character;  /* 地の文は両端揃え(docs §7) */
}

/* ===== サンプル画面(スマホ枠) ===== */
.phone {
  width: min(340px, 88vw); margin: 0 auto;
  border: 10px solid var(--rt-device-frame); border-radius: 38px;
  background: #FFF; overflow: hidden;
  isolation: isolate; /* iOS Safariでスクロール子が角丸クリップを突き抜けるのを防ぐ */
  box-shadow: var(--rt-shadow-device);
}
.phone-notch { height: 22px; background: var(--rt-device-frame); display: flex; justify-content: center; align-items: center; }
.phone-notch::after { content: ""; width: 70px; height: 8px; border-radius: 6px; background: var(--rt-device-notch); }
/* ヘッダは本番の問診アプリと同じ primary。accent(#5FA463)では白文字のコントラストが
   3.0:1 しかなくAA(4.5:1)に届かないうえ、医師アプリの設問プレビューも primary のため。 */
.phone-head {
  background: var(--primary); color: #fff; text-align: center;
  padding: 9px 0; font-size: 16px; font-weight: 700; letter-spacing: .05em;
}
.phone-chat {
  height: 400px; overflow-y: auto; padding: 14px 12px; background: var(--rt-bg-chat);
  border-radius: 0 0 28px 28px; /* 枠の内側半径(38-10)に合わせて下側の角丸を自前で持つ(はみ出し防止) */
}
.pmsg { margin-bottom: 12px; animation: pop .4s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
@media (prefers-reduced-motion: reduce) { .pmsg { animation: none; } }
.pbubble {
  display: inline-block; max-width: 95%; padding: 9px 13px; border-radius: 16px;
  font-size: 17px; line-height: 1.6; text-align: left;
}
.pbubble.app { background: var(--card); border: 1px solid var(--rt-border); border-top-left-radius: 4px; box-shadow: var(--rt-shadow-soft); }
.pmsg.me, .panswer { text-align: right; }
/* 回答バブルは本番と同じ黄(--rt-answer)。「あなたの回答」を示す差し色はこの1色だけ。 */
.pbubble.me { background: var(--rt-answer); color: var(--rt-answer-ink); border-top-right-radius: 4px; box-shadow: var(--rt-shadow-bubble); }
/* 本番の回答エリアを模した選択肢・決定ボタン・スライダー */
.popts { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.popt {
  background: var(--card); border: 1.5px solid var(--rt-border); border-radius: var(--rt-radius-pill);
  padding: 9px 12px; font-size: 17px; text-align: center;
  transition: background .5s, border-color .5s;
}
/* 選択中は本番の .option-btn.selected と同一(黄)。デモが本物と違う色にならないようにする。 */
.popt.selected { background: var(--rt-answer); color: var(--rt-answer-ink); border-color: var(--rt-answer); font-weight: 700; }
.pconfirm {
  background: var(--primary); color: #fff; border: none; border-radius: var(--rt-radius-field);
  padding: 10px 12px; font-size: 17px; font-weight: 700; text-align: center;
  font-family: inherit;
  transition: transform .2s ease, opacity .2s ease;
}
.pconfirm.pressed { transform: scale(.92); opacity: .85; } /* 押下エフェクト(送信ボタンと同様のサイズ変化) */
/* 決定後、回答エリア全体が淡くなってから黄色バブルへ収束する(送信ボタンと同じリズム) */
.popts.fading, .pvas.fading { opacity: .3; transition: opacity .6s ease; }
.pvas { background: #fff; border: 1px solid var(--rt-border); border-radius: var(--rt-radius-field); padding: 12px; margin-top: 8px; }
/* accent-color は1色しか指定できないため、本番のつまみ色(--primary-dark)に合わせる */
.pvas input[type=range] { width: 100%; accent-color: var(--primary-dark); }
.pvas-val { text-align: center; font-weight: 700; font-size: 22px; color: var(--primary); min-height: 1.4em; }
/* 目盛の 0/10 は本番(.vas-scale-numbers)と同じく本文色＋太字 */
.pvas-scale { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink); }
.pvas .pconfirm { display: block; width: 100%; margin-top: 10px; }
.psend {
  display: block; width: 100%; margin-top: 8px;
  background: var(--primary); color: #fff; border: none; border-radius: var(--rt-radius-pill);
  padding: 12px; font-size: 18px; font-weight: 700; text-align: center;
  font-family: inherit;
  transition: transform .2s ease, background .3s ease;
}
.psend.pressed { transform: scale(.96); }
.psend.sent { background: var(--rt-primary-muted); }
.replay-btn {
  display: block; margin: 18px auto 0; background: #fff;
  border: 1.5px solid var(--rt-line-strong); color: var(--ink); border-radius: var(--rt-radius-pill);
  padding: 9px 22px; font-family: inherit; font-size: calc(14px * var(--fs)); cursor: pointer;
}
.sample-note { text-align: center; margin-top: 16px; color: var(--ink-soft); font-size: calc(14px * var(--fs)); }

/* ===== CTA ===== */
.cta { text-align: center; padding-bottom: 100px; }
.cta-lead { text-align: justify; text-justify: inter-character; margin: 0 10px 30px; }

/* ===== ボタン共通 ===== */
.btn {
  display: block; width: 100%; max-width: 420px; margin: 0 auto 14px;
  padding: 17px 10px; border: none; border-radius: var(--rt-radius-pill);
  font-family: inherit; font-size: calc(17px * var(--fs)); font-weight: 700;
  cursor: pointer; transition: transform .15s ease, background .2s ease;
  text-align: center; text-decoration: none; color: inherit;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--rt-shadow-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-gray { background: var(--rt-gray-bg); color: var(--rt-gray-ink); border: 1.5px solid var(--rt-gray-line); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }

/* ===== 体験サンプル(?sample=1) — 評価用フレーム =====
   本編は通常表示のまま。ヘッダ(評価用サンプルアプリ)と案内ストリップのみ
   白+水色・標準ゴシックの別デザインにして、サンプルであることを示す。

   ★配色は tokens.css の .rt-sample スコープでトークンごと差し替える。
     青くしたい要素には .rt-sample を必ず併記すること
     (ヘッダは app.js がサンプル時に付与、ストリップは index.html で付与)。 */
.sample-mode .app-bar {
  background: #fff; border-bottom: 2px solid var(--rt-line);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
               'Hiragino Sans', Meiryo, sans-serif;
}
/* サンプル時は2行になるため、52pxのバーに収まるよう小さめ・行間を詰める */
.sample-mode .app-bar-title { color: var(--heading); letter-spacing: .04em; font-size: 13px; line-height: 1.2; }
.sample-mode .app-bar-title::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; background: var(--accent); margin-right: 8px;
}
/* 評価用フレームからの案内文(サンプル画面内の1行ストリップ) */
.sample-strip {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
               'Hiragino Sans', Meiryo, sans-serif;
  background: var(--rt-primary-light); color: var(--heading); border: 1px solid var(--rt-line);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
  font-size: calc(14px * var(--fs)); line-height: 1.7;
}
/* 届く案内メールの画面(メールアプリ風のリアルな受信画面)。
   ここは「患者さんに実際に届くメール」の再現なので、わかばテーマではなく
   メールアプリ側の配色(Gmail 風のグレー)をそのまま使う。差出人アバターだけ本アプリの緑。 */
.mail-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
               'Hiragino Sans', Meiryo, sans-serif;
  background: #fff; border: 1px solid #E3E7EB; border-radius: 14px;
  padding: 18px 16px 22px; box-shadow: 0 4px 14px rgba(60, 80, 100, .08);
  color: #202124;
}
.mail-subject { font-size: calc(18px * var(--fs)); font-weight: 700; line-height: 1.5; margin-bottom: 14px; }
.mail-sender-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.mail-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--rt-primary); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mail-sender-meta { min-width: 0; }
.mail-sender-name { font-size: calc(14px * var(--fs)); font-weight: 600; line-height: 1.5; }
.mail-time { color: #5f6368; font-weight: 400; font-size: calc(12px * var(--fs)); margin-left: 8px; }
.mail-to { color: #5f6368; font-size: calc(12.5px * var(--fs)); }
.mail-body {
  border-top: 1px solid #EEF1F4; padding-top: 14px;
  font-size: calc(14.5px * var(--fs)); line-height: 1.9;
  white-space: pre-wrap; word-break: break-word;
}
.mail-body a { color: #1a5fb4; text-decoration: underline; word-break: break-all; }

/* ===== 画面遷移の白フェード ===== */
.view-fade {
  position: fixed; inset: 0; background: var(--rt-stage-consent); z-index: 150;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.view-fade.on { opacity: 1; }

/* ===== オーバーレイ/ダイアログ ===== */
.overlay {
  position: fixed; inset: 0; background: var(--rt-scrim-dim); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.overlay[hidden] { display: none; }
.dialog {
  background: var(--card); border-radius: var(--rt-radius-dialog); padding: 30px 24px; max-width: 400px; width: 100%;
  text-align: center; box-shadow: var(--rt-shadow-dialog);
}
.dialog p { margin-bottom: 22px; font-weight: 700; }
.dialog .btn { margin-bottom: 10px; }
.resume-title { font-size: calc(18px * var(--fs)); }
.resume-sub { font-weight: 400 !important; color: var(--ink-soft); font-size: calc(14px * var(--fs)); margin-top: -12px; }

/* ===== エラー通知 ===== */
.notice-area { padding: 90px 22px 40px; max-width: 640px; margin: 0 auto; }
.notice {
  border-radius: var(--rt-radius-card); padding: 22px 20px; text-align: center; line-height: 2;
  background: var(--card); box-shadow: var(--rt-shadow-card);
}
.notice-error { border: 2px solid var(--rt-error-line); color: var(--rt-error-ink); }

/* ===== 同意文書(ページ全体スクロール) ===== */
.consent-body {
  background: var(--card); border-radius: var(--rt-radius-card); padding: 26px 22px;
  box-shadow: var(--rt-shadow-card);
  overflow-wrap: anywhere; /* 長いURL等も折り返す(はみ出し・横スクロール防止) */
}
.consent-body h2, .consent-body h3 { margin: 1.4em 0 .5em; color: var(--heading); font-size: calc(17px * var(--fs)); }
.consent-body p, .consent-body li {
  margin-bottom: 1em; font-size: calc(15.5px * var(--fs));
  text-align: justify; text-justify: inter-character; /* 両端揃え(左寄り解消) */
}
.consent-body ul, .consent-body ol { padding-left: 1.4em; }
.consent-foot { margin-top: 30px; }
.consent-check {
  display: flex; gap: 12px; align-items: flex-start; background: var(--card);
  border: 2px solid var(--line); border-radius: var(--rt-radius-box); padding: 18px 16px; margin-bottom: 22px;
  transition: border-color .4s, background .4s;
}
.consent-check.on { border-color: var(--accent); background: var(--rt-primary-light); }
.consent-check input { width: 24px; height: 24px; margin-top: 4px; accent-color: var(--primary); flex: 0 0 auto; }
.consent-check span { font-size: calc(15.5px * var(--fs)); }

/* ===== メールアドレス登録 ===== */
.doc-text { margin-bottom: 26px; text-align: justify; text-justify: inter-character; }
.doc-text.small { font-size: calc(14px * var(--fs)); color: var(--ink-soft); }
#mail-button { margin-bottom: 26px; } /* 要素間の縦間隔を広めに */
/* 「メールを作成して送信する」押下後に出すQRへの誘導 */
.mail-followup {
  background: var(--rt-primary-light); border: 1.5px solid var(--rt-primary-line); border-radius: var(--rt-radius-field);
  color: var(--primary-dark); text-align: justify; text-justify: inter-character;
  padding: 10px 14px; max-width: 420px; margin: -10px auto 26px;
  font-size: calc(14px * var(--fs)); line-height: 1.8;
}
.info-box {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--rt-radius-box);
  padding: 16px 20px;
  /* ボタン(最大420px)より一回り広くして「注釈」だと分かる形に。中央配置は維持 */
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(500px, calc(100% + 20px));
  margin: 0 0 30px;
  text-align: justify; text-justify: inter-character;  /* 地の文は両端揃え(docs §7) */
  font-size: calc(14.5px * var(--fs)); line-height: 1.9;
}
.info-box b { color: var(--primary-dark); }
.qr-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 420px; margin: 0 auto 24px;
  background: var(--card); border: 1.5px solid var(--rt-line-strong); color: var(--ink);
  border-radius: var(--rt-radius-pill); padding: 13px 10px; font-family: inherit;
  font-size: calc(15px * var(--fs)); cursor: pointer;
}
.qr-toggle[aria-expanded="true"] .qr-caret { transform: rotate(180deg); }
.qr-caret { transition: transform .3s ease; display: inline-block; }
.qr-panel { text-align: center; margin-bottom: 20px; }
.qrcode-box {
  display: inline-block; background: var(--card); padding: 14px; border-radius: var(--rt-radius-card);
  box-shadow: var(--rt-shadow-card);
}
.qrcode-box img, .qrcode-box canvas { display: block; }
.qr-error-note { color: var(--rt-error-ink); display: block; margin-top: 8px; }