/* v60-base.css — 共通の面・見出し・ボタン・カード・出現アニメの基底クラス(2026-09-04)
 *
 * 発注者却下(「デザイン、アニメーション、全てにおいて失格」「ダサすぎる」「背景もおかしい」)を
 * 受けた市場再設計(research/design-brief.md、以下「指示書」)の共通基盤。design.css の
 * v60 トークン(--navy-900 等)の上に、指示書 §3〜§8 の部品を積む。各ページレーンは
 * design.css → v60-base.css → 自分のCSS の順に読み込み、このファイルのクラスを組み合わせて使う。
 * 既存の design.css の部品(.btn/.card/.chip 等)は変えない・壊さない。名前空間を "v60-" に
 * 分けているので既存クラスと衝突しない。
 *
 * ── 文字色と地色(重要: 他レーンへの申し送り)────────────────────────────
 * ui-readability-contract.test.js の自動コントラスト検査は「セレクタ文字列を静的に見て
 * 祖先の背景を推測する」ため、`.v60-surface-navy` を素直に子孫セレクタの起点にしても
 * (例: 自分のページで `.sk-hero .sk-lead { color:#fff }` と書いても)、背景は
 * `.v60-surface-navy` という別の名前のクラスに付いているため検査側は祖先の地色を
 * 解決できず、「地色不明」→ 既定の明るい面と比較して誤って白地に白と判定する。
 * 対策は2つ:
 *   (a) 白文字は `.v60-surface-navy { color:#fff }` からの継承に任せ、子孫に
 *       あらためて color 宣言を書かない(宣言が無いプロパティは検査対象にならない)。
 *   (b) 金・半透明白などの差し色だけ、自分のページの実際のラッパー要素に
 *       `.v60-surface-navy` と自分のクラスを両方付け、色の宣言は
 *       `.自分のクラス .子要素 { color: ... }`(自分のクラスが祖先になる書き方)で
 *       自分のCSSファイル内に書く。背景宣言も自分のクラス側(または複合セレクタ
 *       `.自分のクラス.v60-surface-navy`)に書けば、検査側が同じセレクタ文字列から
 *       祖先の地色をたどれる。
 * 面は3種類だけ(指示書§7): 白 .v60-surface-paper / 生成り .v60-surface-cream /
 * 単色紺 .v60-surface-navy。テクスチャ・方眼・ドットは使わない。
 */

/* ── 書体と共通ヘッダーの統一(2026-09-04 納品前検査で是正)──────────────
 * (1) 書体: design.css の body は system font のトークン var(--font) を使う。自分の
 *     CSS で font-family / --font を宣言していない画面(QAテスト・出題・結果)は和文が
 *     Yu Gothic UI 等に落ち、--font-sans(自前配信の "Davide Sans JP")を使うホーム・
 *     肌診断・埋め込み案内と書体が割れていた(実測 2026-09-04: results.html の可視和文
 *     693字/738字が system font、/qa/ は 122字、quiz.html は 338字)。v60-base.css を
 *     読む画面だけ --font を --font-sans に差し替え、5画面を1書体に揃える
 *     (肌診断が skin.css で既にやっている方法と同じ。design.css の :root は触らない)。
 * (2) ヘッダー: design.css 1124行付近の :where(clinical-learning ほか) .app-header は
 *     下線 3px 紺+地色 rgba(255,255,255,.97)+影で、ホーム/埋め込み案内の 1px 罫+
 *     不透明白と見え方が割れていた(質問チャットでは 3% の透過で下の本文が透けて見える)。
 *     :where() は詳細度 0 なので、後から読むこの 1px 罫が勝つ(design.css 側の宣言は
 *     clinical-learning-theme.test.js が固定しているため残す)。肌診断は skin.css の
 *     body[data-skin-stage] .app-header(詳細度が上・後読み)が優先されるので影響しない。 */
:root { --font: var(--font-sans); }
.app-header {
  border-bottom: 1px solid var(--line-1);
  background: var(--paper);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* (3) SP のヘッダーCTA が画面外へはみ出さないようにする。390px では
 *     文字ロゴ(約112px)+「機能一覧」(約56px)+左右余白 40px+隙間 24px で
 *     CTA に残るのは約 158px しかなく、「肌・プラン診断を始める」(自前書体で
 *     実測 175px)や「部位から料金を見る」(実測 151px+左位置 251px=402px)が
 *     右端で切れていた(2026-09-04 実測、肌診断は是正前から発生)。
 *     480px 以下では文字リンクを畳み(戻り先は文字ロゴ自身が持つ)、
 *     767px 以下では CTA を縮められるようにして切れをなくす。 */
@media (max-width: 480px) {
  .app-header .hd-nav-link { display: none; }
  /* (4) 2026-09-04 夕方(v61): 480px 以下で画面名(.hd-title)を読み上げ専用にしていた
   *     (直下のヒーロー見出しが画面名を出す前提)が、発注者却下でヒーロー面を全画面から
   *     外したため、ヘッダーの画面名が唯一の見出しになった。表示に戻す。潰れの原因だった
   *     ヘッダー CTA も v61 で外している(cta を渡さない)ので幅は足りる。 */
  /* (5) 2026-09-14(v79、レーンRS/R-04): 機能間の行き先(.hd-nav-link-cross)は狭い画面でも
   *     必ず出す(参考にした 5/5 社は SP でも相談・予約の入口が常に見える。ゴリラクリニックの
   *     固定ヘッダー CTA・エミナルの固定バーと同じ考え方)。ただし 1 行には入らない:
   *     375 幅の内側は 335px で、文字ロゴ(ダビデ 128px / ジュエル 192px)+隙間 12px+
   *     画面名(13px×7字 91px+左余白 12px+罫 1px)= ジュエルで 308px しか残らず、
   *     2 文字の行き先すら並べると画面名が省略される(実測)。そこで 480px 以下では
   *     「機能一覧」(href="/" は文字ロゴと同じ行き先で二重)だけを畳み、行き先は
   *     2 段目の全幅 1 本にする。画面名は 1 段目にそのまま残るので省略は起きない。 */
  .app-header .hd-nav-link.hd-nav-link-cross {
    display: inline-flex;
    /* 文字ロゴ・画面名の後ろ(= 2 段目)に回す */
    order: 3;
    flex: 1 0 100%;
    min-height: 44px;
    padding-block: 4px;
    border-top: 1px solid var(--line-1);
    border-bottom: 0;
  }
  .app-header .hd-nav-link.hd-nav-link-cross::after {
    margin-left: 6px;
    content: "›";
    font-weight: 700;
  }
  .app-header .app-header-inner { flex-wrap: wrap; row-gap: 0; }
  /* 2 段になった分だけヘッダーの高さが変わる。差し込み前の場所取り(#app-header:empty)と
   * 追従する小物(.sk-speech-guide の top)が同じ数字を見ているので、ここで 1 か所だけ直す。 */
  :root { --header-height: 89px; }
}
/* 2026-09-14(v80、RS 残件「320px で --header-height と実寸が食い違う」): 320px では
 * 院名(.hd-brand-word 16px)が長い院で 1 段目に画面名が並ばず、ヘッダーが 3 段=実測
 * ジュエル 105.3px(/skin/)・111.8px(/faq/)になって 89px と 16〜23px ずれていた
 * (ダビデは院名が短く 2 段=89px で一致)。院名を 1 段だけ小さくして 2 段に収め、
 * 宣言した高さと実寸をそろえる(375px 以上は 1 文字も変えない)。 */
@media (max-width: 374px) {
  .app-header .hd-brand-word { font-size: 14px; }
  /* 院名を小さくしても 320px では残り 280px に対して 280.3px(院名 168.3+隙間 12+画面名
   * 91+左余白 8+罫 1)と 0.3px 足りずに折り返していた。画面名の基準幅を 0 にして
   * 「1 段目の残りぶんだけ伸びる」枠にすると、院名や画面名の長さに関係なく 2 段に収まる
   * (収まらない字数のときだけ .hd-title-text の省略記号が働く。design.css:430)。 */
  .app-header .hd-title { flex: 1 1 0; padding-left: 8px; }
}
@media (max-width: 767px) {
  .app-header .btn.hd-cta,
  .app-header .v60-btn {
    min-width: 0;
    /* 文字ロゴ(約112px)+左右余白 40px の残りが上限。320px 幅の実機でも
       ヘッダーの外へ出ない(はみ出す代わりに末尾を…で省略する)。 */
    max-width: min(calc(100vw - 168px), 260px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* ── 面(全幅・角丸0)──────────────────────────────────────────────── */
.v60-surface-navy,
.v60-surface-cream,
.v60-surface-paper {
  position: relative;
  width: 100%;
  border-radius: 0;
}
/* 地色・文字色は @media screen に閉じる(紙では design.css の既定どおり白地黒文字に
 * 戻す)。@media print 側で同じセレクタへ再度 background/color を書くと、素の
 * セレクタ文字列だけを見る静的コントラスト検査が「この面の本当の地色は何か」を
 * 後勝ちの値(print側の白)で誤って上書き学習し、この面の下で使う金文字(--gold-line)や
 * 白文字が「白地に白/薄い金」と誤判定される(実際は画面では紺地に正しく乗っている)。
 * @media screen に包んで print 側には何も書かないことで、地色の宣言を1箇所に保つ。 */
@media screen {
  .v60-surface-navy {
    /* 単色紺 + 柔らかいハイライト1つだけ(指示書§7-3)。曲線・粒のテクスチャ画像は使わない。 */
    background:
      radial-gradient(900px 480px at 18% 0%, rgba(255, 255, 255, .06), transparent 70%),
      var(--navy-900);
    color: #ffffff;
  }
  .v60-surface-cream { background: var(--cream); color: var(--ink); }
  .v60-surface-paper { background: var(--paper); color: var(--ink); }
}
/* design.css の `h1, h2, h3 { color: var(--text) }`(要素セレクタ、304行付近)は、
 * 見出し要素に「直接マッチする」ため、.v60-surface-navy から継承するはずだった白文字
 * (継承は無指定のときだけ働く)より必ず勝ち、紺面の見出しが濃紺で沈んで読めなくなる
 * (C レーンが実際に踏み、ページ側で個別に color:inherit を書いて回避していた)。
 * ここで一度だけ、紺面配下の見出し・リード・段落の文字色を明示して解決する。
 * (:is() は本ファイル冒頭の注意どおり、単純比較のCSS解析に誤読されるおそれがある
 * ため使わず、素の子孫セレクタを列挙する。) */
.v60-surface-navy h1,
.v60-surface-navy h2,
.v60-surface-navy h3,
.v60-surface-navy .v60-display,
.v60-surface-navy .v60-h2,
.v60-surface-navy .v60-h3 { color: var(--text-on-dark, #ffffff); }
.v60-surface-navy p,
.v60-surface-navy .v60-lead { color: rgba(255, 255, 255, .86); }

/* 紺の面の下辺だけ金の細線(指示書§7-7: 金は見出し脇の罫と、この1本だけ)。 */
.v60-surface-navy.v60-rule-bottom::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
  content: "";
}

/* ── 横幅(--page-max と揃える。ヘッダーとずれないため独自の max-width は持たない)──
 * 各ページは body に `--page-max: var(--container)` を設定してから使う。
 * (design.css の .container をそのまま使ってもよい。こちらは "v60-" 名前で
 * 揃えたいレーン向けの別名。どちらも同じ --page-max を参照するので値は必ず揃う。) */
.v60-shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}
@media (min-width: 640px) {
  .v60-shell { padding-inline: var(--gutter); }
}

/* セクション上下 padding(指示書§3-3: PC120 / SP72)。面(.v60-surface-*)に直接付ける。 */
.v60-section-y { padding-block: var(--section-y-sp); }
@media (min-width: 640px) {
  .v60-section-y { padding-block: var(--section-y); }
}

/* ── ラベル(金、字間広め)────────────────────────────────────────────── */
.v60-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}
.v60-eyebrow::before { display: inline-block; width: 40px; height: 1px; background: currentColor; content: ""; }
/* 色は面ごとの子孫セレクタでだけ決める(祖先セレクタを .v60-surface-* と揃えて、
 * 静的コントラスト検査が地色を解けるようにする)。--gold-text は白地5.0:1/生成り地4.65:1、
 * --gold-line は紺地6.6:1。単独の .v60-eyebrow に既定色を持たせると、検査は
 * どの面の上か分からず一般的な明るい面(--surface-3 #e9eef8 上で 4.32:1)と比べて
 * 不合格になるため、既定色は持たない。 */
.v60-surface-navy .v60-eyebrow { color: var(--gold-line); }
.v60-surface-cream .v60-eyebrow, .v60-surface-paper .v60-eyebrow { color: var(--gold-text); }

/* 金の細罫(見出し脇・64px×1px)。 */
.v60-gold-rule { display: block; width: 64px; height: 1px; margin: 12px 0; background: var(--gold-line); }
.v60-surface-cream .v60-gold-rule,
.v60-surface-paper .v60-gold-rule { background: var(--gold-text); }

/* ── 見出し(明朝、指示書§3-2の寸法)──────────────────────────────────── */
.v60-display, .v60-h2, .v60-h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  text-wrap: balance;
  /* v72(2026-09-07): 和文の見出しを文節で折り返す(対応ブラウザのみ。balance が「医療脱|毛」のように語の途中で切っていた) */
  word-break: auto-phrase;
}
.v60-display { font-size: 34px; line-height: 1.2; letter-spacing: -.01em; }
.v60-h2 { font-size: 26px; line-height: 1.35; letter-spacing: .005em; }
.v60-h3 { font-size: 19px; line-height: 1.45; }
@media (min-width: 640px) {
  .v60-display { font-size: 56px; line-height: 1.15; letter-spacing: -.02em; }
  .v60-h2 { font-size: 36px; line-height: 1.3; letter-spacing: .01em; }
  .v60-h3 { font-size: 22px; line-height: 1.4; }
}

/* ── リード・本文・注記 ───────────────────────────────────────────── */
.v60-lead { margin: 16px 0 0; font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: .02em; }
@media (min-width: 640px) { .v60-lead { font-size: 18px; } }
.v60-body { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 400; line-height: 1.8; letter-spacing: .02em; }
@media (min-width: 640px) { .v60-body { font-size: 16px; } }
.v60-small { margin: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: .02em; color: var(--ink-2); }
.v60-surface-navy .v60-small { color: rgba(255, 255, 255, .66); }
/* 数字(問題数・スコア)。指示書§3-2 num: 48〜96px、tabular-nums。 */
.v60-num { font-family: var(--font-sans); font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; color: var(--gold-text); }
.v60-surface-navy .v60-num { color: var(--gold-line); }
@media (min-width: 640px) { .v60-num { font-size: 64px; } }

/* ── ボタン(指示書§3-5。ピル、56px/44px、矢印は→のホバーで4px右へ)────────── */
.v60-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  min-width: 240px;
  padding: 0 32px;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
.v60-btn::after { content: ""; }
.v60-btn.v60-btn-arrow::after { content: "\2192"; margin-left: 2px; }
.v60-btn:active { transform: scale(.98); }
.v60-btn:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 3px; }

.v60-btn--primary { background: var(--navy-700); color: #ffffff; }
@media (hover: hover) { .v60-btn--primary:hover { background: var(--navy-900); box-shadow: var(--shadow-float); } }

.v60-btn--primary-on-dark { background: #ffffff; color: var(--navy-700); }
@media (hover: hover) { .v60-btn--primary-on-dark:hover { background: var(--gold-soft); } }
.v60-surface-navy .v60-btn--primary-on-dark:focus-visible { outline-color: #ffffff; }

.v60-btn--secondary { border-color: var(--line-1); background: transparent; color: var(--navy-700); }
@media (hover: hover) { .v60-btn--secondary:hover { border-color: var(--navy-700); background: var(--navy-100); } }

/* on-dark: 紺の面(.v60-surface-navy、地 #10203f)の上でだけ使う輪郭ボタン。背景が
 * transparent のため祖先の地色を静的に解けないが、白文字は明端 #10203f に対し 16.15:1。 */
.v60-btn--secondary-on-dark { border-color: var(--line-on-dark); background: transparent; color: #ffffff; }
@media (hover: hover) { .v60-btn--secondary-on-dark:hover { border-color: #ffffff; background: rgba(255, 255, 255, .10); } }
.v60-surface-navy .v60-btn--secondary-on-dark:focus-visible { outline-color: #ffffff; }

.v60-btn--sm { min-height: 44px; min-width: 0; padding: 0 22px; font-size: 14px; }

.v60-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--navy-100);
  color: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.v60-chip.is-active, .v60-chip[aria-pressed="true"] { background: var(--navy-700); color: #ffffff; }
@media (hover: hover) { .v60-chip:hover { background: var(--navy-500); color: #ffffff; } }

/* ── カード(角丸12、1px罫、影なし、画像はホバーで1.04倍)───────────────── */
.v60-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  background: var(--paper);
}
.v60-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.v60-card-media img, .v60-card-media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v60-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
@media (min-width: 640px) { .v60-card-body { padding: 32px; } }
.v60-card-link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  color: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.v60-card-link::after { margin-left: 8px; content: "\2192"; }

/* ── 出現(即表示。2026-09-15 発注者「なぞのアニメーション…意味が分からない」)─────
 * 旧: html.js:not(.reduce-motion) のときだけ opacity:0/translateY(28px) で隠し、
 * motion.js の IntersectionObserver が画面内に入ったら .is-in を付けて見せていた。
 * data-fixed-cta の可視判定と同じ IntersectionObserver を共用しているため motion.js
 * 自体は変更せず(.is-in の付与は続く=無害)、CSS側の初期非表示だけを外し常時表示にする。 */
[data-reveal], [data-reveal-group] > * {
  transition: opacity var(--dur-reveal) var(--ease-reveal);
}
[data-reveal].is-in, [data-reveal-group] > *.is-in { opacity: 1; }

/* ── 固定バー / 浮遊CTA(指示書§6)──────────────────────────────────────
 * SP: 画面下 64px の白バー。PC: 右下に浮くピル1個。data-fixed-cta を付けた要素へ
 * 使う(見た目のクラスは自由。位置だけこのユーティリティが決める)。 */
/* 隠れている間は opacity:0 だけでなく visibility:hidden にする(2026-09-04 検査)。
 * opacity:0 のままだと、まだ画面に出していない固定CTAに Tab で入れてしまい、
 * 読み上げにも残る(見えないボタンに焦点が飛ぶ)。visibility は 0s で、
 * 消えるときだけ透過が終わってから切り替える(--dur-hover の遅延)。
 * 出すときは .is-visible 側で遅延を 0 に戻す。 */
[data-fixed-cta] {
  position: fixed;
  z-index: 60;
  transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out), visibility 0s linear var(--dur-hover);
}
.v60-fixed-bar[data-fixed-cta].is-visible,
.v60-fixed-fab[data-fixed-cta].is-visible { transition-delay: 0s; visibility: visible; pointer-events: auto; }
.v60-fixed-bar[data-fixed-cta] {
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px max(var(--gutter-sp), env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--gutter-sp), env(safe-area-inset-left, 0px));
  background: var(--paper);
  border-top: 1px solid var(--line-1);
  box-shadow: var(--shadow-bar);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}
.v60-fixed-bar[data-fixed-cta].is-visible { opacity: 1; transform: translateY(0); }
.v60-fixed-fab[data-fixed-cta] {
  right: 32px;
  bottom: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
}
.v60-fixed-fab[data-fixed-cta] .v60-btn { box-shadow: var(--shadow-float); }
.v60-fixed-fab[data-fixed-cta].is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .v60-fixed-fab[data-fixed-cta] { display: none; } }
@media (min-width: 768px) { .v60-fixed-bar[data-fixed-cta] { display: none; } }

/* ── 吹き出し(マスコットの発話、指示書§8)────────────────────────────── */
.v60-bubble {
  position: relative;
  max-width: 220px;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: var(--shadow-float);
}
.v60-bubble::after {
  position: absolute;
  bottom: -7px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  content: "";
  transform: rotate(45deg);
}
/* 吹き出しは常に白地の小さな箱(祖先の面が紺でも白のまま)。上の
 * `.v60-surface-navy p { color: rgba(255,255,255,.86) }` は詳細度(0,1,1)が
 * `.v60-bubble` 単体(0,1,0)より高く、紺面に置いた吹き出しの文字を白へ上書きして
 * 「白地に白」にしてしまう。吹き出し自身より詳細度を上げて先勝ちさせる。
 * background も同じ値(#fff)で再宣言する: 静的コントラスト検査は「このルール自身に
 * 地色が無いとき」だけ祖先(.v60-surface-navy、紺)を地色とみなすため、再宣言が無いと
 * 実際は白地の吹き出しを紺地として誤って検査してしまう(見た目には無関係、検査対策)。 */
.v60-surface-navy .v60-bubble { background: #ffffff; color: var(--ink); }

/* ── マスコット枠(下辺またぎ、影.18、登場+息)────────────────────────── */
.v60-mascot {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  /* 2026-09-04: 配布マスコット素材(1024x1024 RGBA)は上下に31px(約3%)の透明余白を
     持つため、bottom center のままだと足が面の下辺から3%浮く。center 103% で
     画像全体を3%分下へずらし、足を下辺へ合わせる(実測値の共有を受けて修正)。 */
  background-position: center 103%;
  background-size: contain;
  filter: drop-shadow(0 8px 16px rgba(11, 23, 48, .18));
}
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 登場ポップ(v60-mascot-in)
 * と無限の呼吸(v60-breathe)、登場せり上がり(v60-rise)を削除。最後の消費先(skin.css の
 * .sk-start.v62-card、catalog.css の .ec-intro)を除去し終えたので keyframes 本体も削除
 * (404.html は不変対象のためこの class 名を残すが、対応する keyframes が無いため無害)。
 * マスコット・見出しは最初から静止した絵として表示する。 */

/* ── フッター(全画面共通、コーディネーター裁定 2026-09-04)───────────────
 * 最暗面(--navy-950)+ 明朝の文字ロゴ + 4機能への文字リンク + 画面固有の注意1行 +
 * コピーライト。トップ/404 は script 禁止のため静的HTMLで組む前提の部品。
 * 各画面はこの構造をそのまま複製し、リンク先と注意文だけ差し替える:
 *   <footer class="v60-footer">
 *     <p class="v60-footer-brand">ダビデクリニック</p>
 *     <ul class="v60-footer-nav"><li><a href="...">…</a></li>…</ul>
 *     <p class="(画面固有クラス)">(画面固有の注意文)</p>
 *     <p class="v60-footer-copy">© ダビデクリニック</p>
 *   </footer>
 * 文字色はすべて `.v60-footer 子孫` の形(v60-footer が背景を持つ)で書き、静的
 * コントラスト検査が祖先の地色をたどれるようにする(単独クラスに color を
 * 書かない。冒頭のコメントの規約と同じ)。 */
.v60-footer {
  width: 100%;
  padding: 64px var(--gutter-sp) 40px;
  background: var(--navy-950);
  text-align: center;
}
@media (min-width: 640px) { .v60-footer { padding: 64px var(--gutter) 40px; } }
.v60-footer .v60-footer-brand {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: .01em;
}
.v60-footer .v60-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.v60-footer .v60-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.v60-footer .v60-footer-nav a:hover, .v60-footer .v60-footer-nav a:focus-visible { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.v60-footer .v60-footer-note {
  max-width: 640px;
  margin: 0 auto 20px;
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
  line-height: 1.8;
}
.v60-footer .v60-footer-copy {
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ── 動きの軽減 / 印刷 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* v63(2026-09-05): 完全停止ではなく opacity のフェードだけ残す(ループ・移動は止める)。
   * 「何も動かない=壊れている」と受け取られたため(brief-v63 §0)。[data-reveal] は
   * transform を含まない transition(opacity のみ)に絞り、transform 自体は即時 none にする。
   * それ以外(マスコット・固定CTA・ボタン・カード画像など、opacity を伴わない純粋な
   * transform/色の効果)は従来どおり完全停止のままでよい(失うものが無い)。
   * design.css 999行の全体 reduce ブロック(*{transition-duration/animation-duration:.01ms})
   * は変えない(司令塔裁定: 結果としてほぼ即時表示になってもそれで良い)。 */
  .v60-mascot, [data-fixed-cta], .v60-btn, .v60-chip, .v60-card-media img, .v60-card-media > *, .v60-card-link::after, .v60-btn.v60-btn-arrow::after {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal], [data-reveal-group] > * {
    transition: opacity 300ms var(--ease-out) !important;
    animation: none !important;
    transform: none !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1; }
  [data-fixed-cta] { opacity: 1; transform: none; }
}
/* ── v61: ヘッダーの英字ラベルを全画面で出さない(2026-09-04 夕方 納品前検査 R1)──
 * components.js の contextCode が作る .hd-mark(「FAQ」「QA」「SK」)は、画面名の
 * 左に置かれた英字の四角。brief-v61 §1-2 は「英字ラベル全般」を消す対象にしている。
 * 直前の版は /skin/ だけが skin.css で個別に隠しており、faq/qa/quiz/results の4画面に
 * 26px の「FAQ」「QA」が残って画面ごとにヘッダーの形が違っていた(実測)。
 * DOM(components.js の class: 'hd-mark' と contextCode)は market-design-system の
 * 契約なので残し、表示だけを共通側で一本化して止める。 */
.app-header .hd-mark { display: none; }

/* ── v61 最小フッター(2026-09-04 夕方、発注者「無駄しかない」への対応)───────
 * ナビ付きの大フッター(.v60-footer)は却下されたので、全画面を 1〜2 行の小さな
 * 注記+© に統一する。リンクは置かない(戻る手段はヘッダーの院名とブラウザ)。 */
.v61-foot {
  box-sizing: border-box;
  margin: 40px auto 0;
  padding: 0 var(--page-gutter, var(--gutter-sp)) calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: var(--page-max, var(--container));
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
/* 罫線は内容の幅(.container の内側)に合わせる。padding は .container と同じ値。 */
.v61-foot::before {
  display: block;
  margin: 0 0 14px;
  border-top: 1px solid var(--line-1);
  content: "";
}
.v61-foot p { margin: 0; }
.v61-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.v61-foot a:hover, .v61-foot a:focus-visible { color: var(--ink); }
@media print { .v61-foot { border-top: 0; color: #000; } }

/* ── v62 背景・画像・動き(2026-09-04 夜)────────────────────────────────
 * v61(道具化・白地・装飾ゼロ)を本番で見た発注者: 「アニメーションどこ、背景がなさ過ぎて
 * みずらい　画像が少ない」。構成は v61 のまま、背景の帯・白カードの影・挿絵の器・
 * 出現/hover/押下の動きを共通部品として足す。文字を置く帯ではない(純粋な背景)。 */
/* v63(2026-09-05夜)差し替え口: この2行(--v63-bg-band / --v63-bg-page の値)だけを
 * 書き換えれば背景画像を入れ替えられる。リーダーが public/assets/images/v63/
 * bg-band.webp(2400×800目安)・bg-page.webp(1600×1600目安、淡い)を置いたら、
 * ここの値を url("../images/v63/bg-band.webp") 等に差し替えるだけでよい。
 * 届くまでは承認済みの v50 素材(帯)/無地(ページ地)にフォールバックする。 */
:root {
  /* var() のフォールバックを必ず持たせる: 404.html は v50-visual.css を読み込まないため
     (--v50-mascot-worried と同じ理由)、--v50-bg-hero が未定義になる。フォールバックが
     無いと --v63-bg-band 全体が invalid になり、404 だけ帯の画像が消える(実測で発覚)。 */
  /* v65(2026-09-05 夜、発注者「もっと明るい、見やすい、わかりやすいにして」): 帯を明るい生成りの絹+金の光
     (Dezgo FLUX.1、1920×640)に差し替え。紺の絹(v63.1)は scratchpad に退避。 */
  --v63-bg-band: url("../images/v63/bg-band.webp");
  /* v63.1: ページ全体の紙目。生成画像ではなく SVG の feTurbulence(継ぎ目なし・1.1KB)。金茶の粒を
     最大 7.5% の透明度で cream の上に散らすだけなので本文の可読性は変わらない。 */
  --v63-bg-page: url("../images/v63/bg-page.svg");
  /* 生成画像(QA 分野アイコン・空表示・肌診断の挿絵)の有効化スイッチ。ファイルを
     public/assets/images/v63/ に置いたら 1 にする(0 の間は <img> を作らず 404 も出さない)。 */
  --v63-images: 1;
}
html {
  /* ページ全体の淡い地。--v63-bg-page が届くまでは none なので cream 単色のまま。 */
  background: var(--v63-bg-page) center top / 1600px auto repeat, var(--cream);
}
body {
  position: relative;
  background: transparent;
  --v62-band: 272px;
}
body::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: var(--v62-band);
  /* v65: 帯は明るい絹。上に白の薄いベール(濃紺の文字の下地を L>230 に保つ)。ベールは箱と同寸
     (100% 100%)なので v63-band-drift では動かず、絹の層だけが流れる。v63.1 の紺スクリムは撤去。
     下端は擬似要素ごとマスクで透明にし、ページ地(cream+紙目)がそのまま透けて継ぎ目を作らない
     (不透明な cream で塗ると紙目の有無が線として見えた: 2026-09-05 実測 L 243.8→241.2 の段差)。 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .22) 100%) center / 100% 100% no-repeat,
    var(--cream) var(--v63-bg-band) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  content: "";
}
@media (max-width: 767px) { body { --v62-band: 200px; } }
/* 帯にかぶせる最初のブロック。負のマージンは置かない(2026-09-05 判定: -72px は固定ヘッダーの
   下に潜り込み、案内役の頭が切れた)。各ページ自身の上余白(24〜40px)でヘッダーから離し、
   ブロックの高さで帯の下辺をまたぐ。 */
.v62-lift { position: relative; z-index: 1; }
/* 白カード+柔らかい影。 */
.v62-card {
  background: #ffffff;
  border: 1px solid var(--line-1);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(11, 23, 48, .10), 0 1px 2px rgba(11, 23, 48, .05);
}
/* v63(2026-09-05): 6px 浮く+影を強める、260ms(発注者「動きが見えない」への対応)。 */
.v62-card--hover { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.v62-card--hover:hover, .v62-card--hover:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(11, 23, 48, .16), 0 2px 4px rgba(11, 23, 48, .06);
}
/* 挿絵の器。 */
.v62-art { display: block; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; background: #f7f0e6; }
.v62-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): hover の寄り(1.04倍)を削除。 */
.v62-art--sm { flex: 0 0 auto; width: 96px; aspect-ratio: 1; border-radius: 10px; }
.v62-art--md { flex: 0 0 auto; width: 240px; }
/* 立ち絵の器。--size で大きさ。 */
.v62-mascot { display: inline-block; width: var(--size, 96px); height: var(--size, 96px); flex: 0 0 auto; }
.v62-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 2026-09-15: 登場ポップ(v60-mascot-in)と無限の浮遊(v63-idle)を削除(発注者
 * 「なぞのアニメーション…意味が分からない」)。マスコットは最初から静止して見せる。 */
/* 押下。 */
.v62-press { transition: transform 120ms var(--ease-out); }
.v62-press:active { transform: scale(.98); }
/* 進捗・割合のバー。<span class="v62-bar"><i style="width:40%"></i></span> */
.v62-bar { display: block; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--navy-100); }
.v62-bar > i { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: var(--navy-700); transition: width 600ms var(--ease-out); }
/* v72(2026-09-07): 進捗バーの金のシマー(2.4s 無限ループ)は削除。常に光が走る棒は「読み込み中」に見え、
   設問に答えている最中に落ち着かないという指摘に当たる。伸びる動き(sk-progress-grow)だけ残す。 */
@media (prefers-reduced-motion: reduce) {
  .v62-card--hover, .v62-press, .v62-bar > i { transition: none !important; }
  .v62-card--hover:hover { transform: none; }
  .v62-mascot { animation: none !important; }
}
@media print { body::before { display: none; } html { background: #fff; } .v62-card { box-shadow: none; } }

/* 2026-09-05(v62 独立検査役の是正、司令塔許可 2026-09-05): [data-reveal]/[data-reveal-group]
 * の初期非表示(上の html.js:not(.reduce-motion) 規則、306-310行目)は
 * @media (prefers-reduced-motion: reduce) では解除される(476-483行目)のに、
 * @media print では解除されていなかった。JS有効・reduced-motionでない既定状態で
 * 画面外にあった要素を印刷すると opacity:0 のまま紙面が空白になる実測不具合
 * (/qa/results.html は42行中30行、/skin/ 結果画面は9要素中2要素、/embed/ は3要素中1要素が
 * 印刷時に消えていた)。.qa-print-sheet は data-reveal を持たない独立マークアップなので
 * 対象外・無関係(受験結果の印刷はそのまま安全)。opacity のみだと
 * transition が生きていて印刷時にも遷移途中の値(実測 opacity:0.95 等)になったため
 * transition/animation も止める。 */
@media print {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

@media print {
  /* 紙面の地色・文字色は design.css の既定(白地黒文字)に任せる。
   * .v60-surface-* の地色/文字色宣言は上で @media screen に閉じてあるので、
   * ここで打ち消す宣言をあらためて書く必要が無い(書くと静的コントラスト検査を
   * 誤らせる理由は上のコメントのとおり)。 */
  .v60-mascot, [data-fixed-cta], .v60-btn { display: none !important; }
  /* .v60-footer は紺地+白文字が既定(装飾)。紙では地色を落とすと白文字が読めなくなる
   * ため、ロゴ・ナビ・コピーライトごと省き、画面固有の注意文(各ページが差し込む
   * 独自クラスの <p>、例: .home-note)だけを黒文字で残す。 */
  .v60-footer { padding: 16px 0 0; background: none; text-align: left; }
  .v60-footer-brand, .v60-footer-nav, .v60-footer-copy { display: none; }
}

/* ── v63(2026-09-05夜): 見て分かる動き・帯のドリフト・光の帯・主CTAのリング ────────────
 * 発注者逐語:「すすめて、アニメーションがない...gptの画像生成などでuiや背景を制作して
 * ください」。文は増やさず、動きと画像だけで豊かにする(brief-v63 §0)。
 * トップ/404 はスクリプト禁止(静的HTML)のため、共通の動きは html.js ゲートではなく
 * prefers-reduced-motion のメディアクエリだけで発火させ、JS の有無に関わらず全8画面で動く。 */
/* 2026-09-15: v63-idle・v63-rise-lg・v63-band-drift・v63-cta-ring と、帯の常時ドリフト
 * (body::before、24s 無限ループ)を削除(発注者「なぞのアニメーション…意味が分からない」)。
 * 帯そのもの(v63-bg-band の静止画像・金の細線)は残す。動きだけを取り除く。 */

/* 主ボタンに hover の光の走り(斜めの白ハイライトが700msで通過)。各セレクタの既存の
 * transition(色・枠線・影など、design.css/v60-base.css 本来の宣言)を必ず引き継いだ
 * うえで background-position を足す(丸ごと上書きすると既存のホバー演出が壊れるため)。 */
@media (hover: hover) {
  .v60-btn, .btn.lg, button.v62-press {
    background-image: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .35) 48%, rgba(255, 255, 255, .35) 54%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 140% 0;
  }
  .v60-btn:hover, .btn.lg:hover, button.v62-press:hover { background-position: -60% 0; }
  /* .v60-btn 本来の transition(205-224行目)に background-position を足して丸ごと再宣言。 */
  .v60-btn {
    transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
      border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
      background-position 700ms var(--ease-out);
  }
  /* .btn.lg 本来の transition(design.css 522行目、.btn 由来)に background-position を足す。 */
  .btn.lg { transition: transform .12s var(--ease), box-shadow .15s, background .15s, border-color .15s, background-position 700ms var(--ease-out); }
  button.v62-press { transition: transform 120ms var(--ease-out), background-position 700ms var(--ease-out); }
}

/* 2026-09-15: 主CTAの登場リング(v63-cta-ring)、ヘッダー院名・画面名・最小フッターの
 * 登場せり上がり(v60-rise)を削除(発注者「なぞのアニメーション…意味が分からない」)。 */

/* ── v66(2026-09-05 深夜)の常時アイドル浮遊・登場ポップ・ケンバーンズは 2026-09-15 に削除
 * (発注者「なぞのアニメーション…意味が分からない」)。挿絵は最初から静止して表示する。
 * v66-pop・v66-float は skin.css 側(sk-qart/sk-qart-cap/sk-facts>li/sk-result-art)の
 * 置き換えも完了し、消費先がゼロになったため @keyframes 本体も削除。高級感の金の細線だけ残す。 */
.v62-card { border-top: 2px solid var(--gold-line); }