/* ミルキーラベンダー。端末がダークモードでも常に明るい表示（docs/architecture.md「ネイルサロン化とデザインの変更」1）。
   文字は背景に対して4.5:1以上（tests/layout_check.py で検査）。--accent は文字を載せる面に、--muted は文字に使わない
   横スクロールは構造で防ぐ（docs/architecture.md 7章）
   - grid の列は minmax(0, 1fr) 系、flex と grid の子は min-width: 0
   - body は overflow-wrap: anywhere。white-space: nowrap は最大幅の決まった数字と、数字と単位のまとまり（.nb）だけ
   - 固定配置は left: 0; right: 0（100vw は使わない）
   泣き別れ（最終行が1〜2文字）は、body の word-break: auto-phrase と text-wrap: pretty で画面の文全体を防ぐ（下の body） */

:root {
  --bg: #F7F6FB; --surface: #FFFFFF; --ink: #34323F; --ink2: #5E5B6E; --muted: #86839A;
  --line: #E9E7F2; --line2: #DAD7E7; --track: #E6E3F0; --on-ink: #FFFFFF;
  --accent: #8D7CC8; --accent-strong: #7462B8; --accent-ink: #6655A6; --accent-soft: #F0EDFA; --focus: #7462B8;
  --dot-on: #6F6A85; --dot-gain: #8D7CC8; --dot-off: #8A84A3;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --gutter: 16px;
  --radius: 18px;
  color-scheme: only light;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 泣き別れを、画面の文全体で防ぐ（docs/architecture.md「2026-10-10 の変更」5。tests/layout_check.py で検査）。
   auto-phrase で句の途中では折り返さず、pretty で最後の行が句1つだけになるのを避ける。どちらも子に継承する。
   - Chromium の pretty は、最後の行が「語1つ」のときだけ直す。auto-phrase がないと日本語は1文字が1語なので、
     2文字の最終行は残る（Safari・Firefox には auto-phrase がない）
   - 見出し（h2）と上げ幅の見出しは、下で balance に上書きする */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.8;
  overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.container { max-width: calc(1000px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

/* 数字と単位のまとまり（年96万円、12か月、2回目など）の途中で改行しない。
   まとまりの決め方は calc.js の keepParts。HTMLでは手で包み、view の文言は sim.js が包む。
   包み忘れは tests/layout_check.py が検出する */
.nb { white-space: nowrap; }

/* ファーストビューの見出しとサブコピー、各セクションの見出し（h2）の、行の終わり（<br> の前と最後）の句。
   3文字以上で包み、句の途中で折り返さないので、1〜2文字だけが次の行に落ちない
   （docs/architecture.md「2026-10-10 の変更」2。tests/layout_check.py で検査）。
   - nowrap ではなく inline-block にして、画面より長いときは句の中で折り返す（横スクロールを出さない）
   - keep-all は使わない。親の word-break: auto-phrase と重なると句の手前で折り返せず、句の途中で切れる（Chromium 148）
   - リード（.lead）は包まない。text-wrap: pretty が句の手前の1文字を次の行へ引っぱり、句の途中で切れる（同）
   - 見出し以外の文（FAQの問い、つなぎの一文、ラベル、本文など）も包まない。句の手前に1〜2文字の行ができる。
     body の word-break: auto-phrase と text-wrap: pretty で防ぐ（同4・5） */
.phrase { display: inline-block; }

/* ---------- 共通の部品 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 28px;
  border: 1px solid var(--accent-strong); border-radius: 999px;
  background: var(--accent-strong); color: var(--on-ink);
  font: inherit; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent-ink); background: var(--accent-ink); }
.btn-lg { min-height: 56px; padding-inline: 36px; font-size: 17px; }
.text-link { color: var(--accent-ink); font-weight: 600; }

.card { --pad: 24px; padding: var(--pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.section--surface .card { background: var(--bg); border-color: transparent; }
.cards { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cards > * { min-width: 0; }
.card h3 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.card h3 + p { margin-top: 8px; color: var(--ink2); }
@media (max-width: 420px) { .card { --pad: 20px; } }

.source { margin-top: 16px; font-size: 12px; color: var(--ink2); }
.sub-block { margin-top: clamp(48px, 8vw, 72px); }
.sub-title { font-size: 19px; font-weight: 700; line-height: 1.5; }
.sub-title + * { margin-top: 16px; }
.bridge { margin-top: 24px; font-size: clamp(17px, 2.6vw, 20px); font-weight: 600; }

/* ---------- セクション ---------- */
.section { padding-block: clamp(72px, 12vw, 128px); }
.section--surface { background: var(--surface); }
.section-head { max-width: 46rem; }
.section h2 {
  font-size: clamp(26px, 6vw, 40px); line-height: 1.4; font-weight: 700; letter-spacing: .01em;
  text-wrap: balance;
}
.lead { margin-top: 18px; color: var(--ink2); font-size: clamp(16px, 2.2vw, 18px); }
.section-body { margin-top: clamp(36px, 6vw, 56px); }

/* 1. ファーストビュー */
.hero { background: linear-gradient(to bottom, var(--surface), var(--accent-soft)); padding-block: clamp(88px, 16vw, 168px) clamp(72px, 12vw, 136px); }
.eyebrow { font-size: 14px; letter-spacing: .08em; color: var(--ink2); }
.hero h1 {
  margin-top: 18px;
  font-size: clamp(30px, 8vw, 60px); line-height: 1.3; font-weight: 700; letter-spacing: .005em;
}
.hero-reasons { list-style: none; padding: 0; margin-top: clamp(28px, 5vw, 40px); display: grid; gap: 8px; color: var(--ink2); }
.hero-reasons li { position: relative; padding-left: 20px; }
.hero-reasons li::before { content: ""; position: absolute; left: 2px; top: calc(.9em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.hero-sub { margin-top: clamp(28px, 5vw, 40px); font-size: clamp(18px, 3.4vw, 23px); font-weight: 600; line-height: 1.6; }
.hero .btn { margin-top: 36px; }
/* 装飾画像（docs/architecture.md「装飾画像の配置」2・5・6）。幅1039以下は文の下（ボタンの下）、幅1040以上は左に文・右に画像。
   文の列は文の長さ（auto。いちばん長い行が折り返さない幅）、画像は残りの幅。列を割合で分けると、幅1040〜1280で文の列が
   見出しの行より狭くなり、見出しの行が折り返す。2列のときは見出しを50px（幅1039以下は最大60px）にして、画像の幅を空ける。
   1040より狭い幅で2列にすると、画像が約400pxより小さくなる */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; }
.hero-grid > * { min-width: 0; }
.hero-img { display: block; width: 420px; max-width: 100%; height: auto; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .hero h1 { font-size: 50px; }
  .hero-img { width: 560px; }
}

/* 2. HPBだけだと起きること */
.points { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.points > li { min-width: 0; }

.flow { margin-top: 12px; }
.flow-main, .flow-branch { list-style: none; padding: 0; }
.flow-main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.flow-main li { position: relative; max-width: 100%; padding: 12px 20px; border: 1px solid var(--line2); border-radius: 12px; font-weight: 600; }
.flow-main li + li { margin-top: 28px; }
.flow-main li + li::before,
.flow-branch::before { content: ""; position: absolute; left: 28px; top: -29px; height: 28px; border-left: 1px solid var(--line2); }
.flow-main small { display: block; font-size: 13px; font-weight: 400; color: var(--ink2); }
.flow-branch { position: relative; margin-top: 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.flow-branch li { min-width: 0; padding: 16px 20px; border-radius: 12px; }
.flow-branch .is-on { border: 1.5px solid var(--ink); }
.flow-branch .is-off { border: 1.5px dashed var(--dot-off); }
.flow-branch b { display: block; }
.flow-branch li > span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink2); }

/* 4. 解決策 */
.steps { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); counter-reset: step; }
.steps > li { min-width: 0; counter-increment: step; }
.steps > li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px;
  border-radius: 50%; background: var(--accent-strong); color: var(--on-ink); font-size: 14px; font-weight: 700;
}

/* 6. MEO */
.factors dt { font-size: 17px; font-weight: 700; line-height: 1.5; }
.factors dd { margin-top: 8px; color: var(--ink2); }
.checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 4px; top: calc(.9em - 7px); width: 7px; height: 12px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* 8. 進め方 */
.flow-list { padding-left: 1.4em; display: grid; gap: 8px; }
.flow-list li { padding-left: 4px; }

/* 9. FAQ */
.faq { display: grid; gap: 12px; }
.faq details { --pad: 24px; background: var(--bg); border-radius: var(--radius); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 20px var(--pad); font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border: solid var(--ink2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(-135deg); }
/* 答えは summary のあとに並ぶ要素（段落、リスト、出典）。下の余白は最後の要素に付ける */
.faq details > :not(summary) { padding-inline: var(--pad); color: var(--ink2); }
.faq details > :not(summary) + * { margin-top: 12px; }
.faq details > :last-child { padding-bottom: 22px; }
.faq details ul { padding-left: calc(var(--pad) + 1.2em); display: grid; gap: 6px; }
@media (max-width: 420px) { .faq details { --pad: 20px; } }

/* 10. 相談と会社情報 */
.contact-cta { max-width: 46rem; margin-inline: auto; text-align: center; }
.contact-img { display: block; width: clamp(112px, 10vw, 128px); max-width: 100%; height: auto; margin: 0 auto 20px; }
.contact-cta .cta-btn { justify-content: center; margin-top: 32px; }
.company { max-width: 46rem; margin: clamp(56px, 10vw, 96px) auto 0; }
.rows-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding-block: 14px; border-top: 1px solid var(--line); }
.rows-dl > div:first-child { border-top: 0; padding-top: 0; }
.rows-dl dt { font-size: 14px; color: var(--ink2); }
.rows-dl dd { font-weight: 600; }
@media (min-width: 600px) { .rows-dl > div { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); } }
.cta-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cta-btn > * { min-width: 0; }

.site-foot { padding-block: 32px 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.foot-inner > * { min-width: 0; }
.site-foot a { color: inherit; }

/* ---------- 3. シミュレーター ---------- */
.sim-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sim-grid > * { min-width: 0; }
/* PCも左に結果、右に入力。HTMLの順番（結果→入力）と見た目を、すべての幅で一致させる */
@media (min-width: 900px) {
  .sim-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
  .inputs { position: sticky; top: 12px; }
}
.panel { --pad: 24px; padding: var(--pad); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
@media (max-width: 420px) { .panel { --pad: 18px; } }

/* 結果 */
.chip { display: inline-block; padding: 1px 10px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; color: var(--ink2); }
.sim-empty { margin-top: 20px; font-weight: 600; }
.r-lead { margin-top: 14px; color: var(--ink2); }
.r-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; }
.r-hero > * { min-width: 0; }
.r-num, .r-unit { flex: none; }
.r-num { font-size: clamp(64px, 17vw, 104px); line-height: 1; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-unit { margin-left: -6px; font-size: clamp(28px, 7vw, 40px); font-weight: 700; white-space: nowrap; }
.r-tail { font-size: clamp(18px, 4.4vw, 24px); font-weight: 600; line-height: 1.5; }
.r-note { margin-top: 8px; font-size: 12px; color: var(--ink2); }

.field { position: relative; margin-top: 20px; }
.field canvas { display: block; width: 100%; }
.legend { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink2); }
.legend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.legend b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-on, .k-gain, .k-off { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.k-on { background: var(--dot-on); }
.k-gain { background: var(--dot-gain); }
.k-off { border: 1.5px solid var(--dot-off); }
.legend .unitnote { display: block; width: 100%; font-size: 12px; }

.rows { margin-top: 22px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line); }
.row > * { min-width: 0; }
.rk { font-size: 13px; color: var(--ink2); }
.rk small { display: block; margin-top: 1px; font-size: 12px; }
.rv { font-size: clamp(24px, 6vw, 30px); line-height: 1.25; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv.is-hint { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink2); white-space: normal; }
.rnote { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--ink2); }

/* 増える売上の行は、パネルの左右いっぱいに敷く。
   値（つまみを動かす前は案内文）がラベルの横に収まらない幅では、値を次の行の右端へ送る。
   列に分けると、値の列が先に幅を取り、ラベルの列を押しつぶす（幅320で3行。docs/architecture.md「2026-10-10 の変更」4） */
.row.gain { display: flex; flex-wrap: wrap; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); padding-bottom: 18px; background: var(--accent-soft); border-bottom: 0; }
.row.gain .rv { margin-left: auto; }
.row.gain .rnote { flex-basis: 100%; }
.row.gain .rv:not(.is-hint) { color: var(--accent-ink); font-size: clamp(28px, 7vw, 36px); }

/* 上げ幅 */
.lever { padding-block: 22px 18px; }
.lever-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lever-head > * { min-width: 0; }
.lever-title { font-size: 17px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.lever-out { flex: none; font-size: 30px; font-weight: 900; color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lever-sub { margin-top: 4px; font-size: 13px; color: var(--ink2); }

/* スライダー（つまみの揺れは --nudge を動かす。値は変えない） */
@property --nudge { syntax: "<length>"; inherits: true; initial-value: 0px; }
input[type=range] {
  --p: 0%; --fill: var(--dot-on);
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 30px; margin: 6px 0 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fill) var(--p), var(--track) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fill); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
input[type=range]:disabled { opacity: .35; cursor: default; }
.lever input[type=range] { --fill: var(--accent); height: 44px; margin-top: 10px; }
.lever input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
.lever input[type=range]::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -13px; border: 2px solid var(--accent); transform: translateX(var(--nudge)); }
.lever input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; }
.lever input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; }
.lever input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border: 2px solid var(--accent); transform: translateX(var(--nudge)); }
.lever input[type=range].is-nudging { animation: nudge 1.2s ease-in-out 1; }
@keyframes nudge {
  0%, 100% { --nudge: 0px; }
  25% { --nudge: 18px; }
  50% { --nudge: 0px; }
  72% { --nudge: 8px; }
}

/* 相談ボタン */
.cta { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
.cta > * { min-width: 0; }

/* 入力 */
.notice { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; background: var(--surface); font-size: 13px; color: var(--ink2); }
.notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; }
.notice-actions > * { min-width: 0; }
.optout { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); cursor: pointer; }
.optout input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ri { min-width: 0; }
.ri + .ri { padding-top: 16px; border-top: 1px solid var(--line); }
.ri-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ri-top label { min-width: 0; font-weight: 600; }
.inp { flex: none; display: flex; align-items: baseline; gap: 6px; }
.inp input {
  width: 116px; padding: 7px 10px;
  border: 1px solid var(--muted); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums;
}
.inp span { font-size: 13px; color: var(--ink2); white-space: nowrap; }
.ri-help { margin-top: 2px; font-size: 12px; color: var(--ink2); }

.method { margin-top: 20px; padding-inline: 4px; }
.method summary { font-weight: 600; color: var(--ink2); cursor: pointer; }
.method ul { margin-top: 10px; padding-left: 1.2em; display: grid; gap: 6px; font-size: 13px; color: var(--ink2); }
.sim-foot { margin-top: 12px; padding-inline: 4px; font-size: 12px; color: var(--ink2); }

/* 追従する相談ボタン（docs/architecture.md「追従するLINEボタン」）。ページのどこでも出す。動きは付けない
   - スマホ（幅899以下）: 画面の下に幅いっぱいのバー。左は「相談は無料です」。シミュの区間（シミュが画面に入っていて、結果パネルが
     画面外のとき）では、sim.js が左を主役の金額（押すと結果パネルへ戻る）に入れ替える。右は LINE の相談ボタン。
     数字入力欄などにフォーカスがあるあいだは隠す（キーボードの上に浮いて入力欄を隠すため）。
     バーの高さは中身ではなく --dock-h で決め、同じ値とセーフエリアの分だけ、ページの下（バーのあとに置いたフッター）に余白を
     足す。フッターと最後の文がバーの下に隠れない。バーのないページ（404.html）には足さない。
     中身は --dock-h に収まる大きさにする: 左の金額の側は、ラベル2行と金額1行まで（幅320でラベルが2行。ボタンの左右の余白を
     狭めて左の幅を空けている）
   - PC（幅900以上）: 右下に LINE の相談ボタンだけを浮かせる。シミュの入力欄と重なるあいだは、page.js が隠す（.is-over-inputs） */
.dock { position: fixed; z-index: 10; display: flex; align-items: center; gap: 10px; }
.dock > * { min-width: 0; }
.dock .btn { flex: none; }
.dock-free { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.4; }
.dock-result {
  flex: 1; align-self: stretch; display: grid; align-content: center; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; line-height: 1.2; text-align: left; cursor: pointer;
}
.dock-label { font-size: 12px; color: var(--ink2); }
.dock-value { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 899px) {
  :root { --dock-h: 72px; }
  .dock ~ .site-foot { padding-bottom: calc(48px + var(--dock-h) + env(safe-area-inset-bottom, 0px)); } /* 48px は .site-foot の下の余白 */
  .dock {
    left: 0; right: 0; bottom: 0; min-height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .dock .btn { padding-inline: 14px; }
  body:has(input:not([type=range], [type=checkbox]):focus, textarea:focus, select:focus) .dock { visibility: hidden; }
}
@media (min-width: 900px) {
  .dock { right: 24px; bottom: 24px; }
  .dock-free, .dock-result { display: none; }
  .dock .btn { box-shadow: 0 4px 16px rgba(52, 50, 63, .2); }
  .dock.is-over-inputs { visibility: hidden; }
}