/*
 * Talk it の公開サイト（法務ページ、将来のLP）共通スタイル。依存なし・ビルド不要。
 *
 * 色・角丸・書体・余白はアプリと同じ値を使う。実体は tokens.css（src/constants/theme.ts
 * からの生成物）にあり、ここでは var(--color-*) 等を参照するだけ ＝ 値を直書きしない。
 * tokens.css を先に読み込むこと（各HTMLの <link> の順序）。
 */

:root {
  /* サイト固有。本文の版面幅はアプリの画面幅と無関係なので、トークンには置かない */
  --max-width: 46rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--color-background);
  color: var(--color-text);
  /*
   * 法務ページは webfont を当てずシステムフォントで出す（見出しも含む）。
   * LP で丸ゴシックにするときは、そのページで fonts-display.css / fonts-body.css を
   * <link> して var(--font-display) / var(--font-body) を当てる（ADR-013 参照）。
   */
  font-family: var(--font-fallback);
  /* 行間だけは web の読み物向けに広く取る（アプリの Typography.body より緩い） */
  line-height: 1.8;
  font-size: var(--text-body);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

header.site a.home {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
}

/* 言語切替。JS が無い環境では data-show-lang="en" が残るので英語だけが出る（切替も効かない） */
.langs {
  display: flex;
  gap: 0.25rem;
}

.langs button {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.langs button[aria-pressed='true'] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-body-medium);
}

/*
 * 見出しの寸法は web 側で持つ。アプリの Typography.title は 20px 固定だが、長文を読ませる
 * ページでは見出し階層が3段必要で、寸法をそのまま流用できないため。
 * 書体は本文と同じくシステムフォント（法務ページに webfont は当てない — ADR-013）。
 */
h1 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

ul,
ol {
  padding-left: 1.4rem;
}

li {
  margin: 0.35rem 0;
}

a {
  color: var(--color-accent);
}

.updated {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

/* 横に長い表は表だけを横スクロールさせる（本文は折り返す） */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

table {
  width: 100%;
  /* 最小幅を持たせないと、狭い画面で列が潰れて1文字ずつ折り返す（.table-scroll も効かない） */
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--color-surface);
  white-space: nowrap;
}

footer.site {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

footer.site a {
  margin-right: 1rem;
}

/* JS が言語を決めたら、選ばれていない方を隠す */
html[data-show-lang='ja'] [data-lang='en'],
html[data-show-lang='en'] [data-lang='ja'] {
  display: none;
}

/* ===== LP（トップページ） ============================================
 * LP だけ webfont（丸ゴシック）を当てる。.lp のスコープに閉じてあるので、
 * 法務ページには影響しない（あちらは fonts-*.css を読み込んでもいない）。
 */

/*
 * マスコットの symbol 置き場。描画はせず <use> の参照先としてだけ存在する。
 * display:none ではなく寸法0で隠す（display:none だと参照の解決が壊れる実装があるため）。
 */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lp {
  font-family: var(--font-body);
}

.lp h1,
.lp h2,
.lp h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}

.hero {
  text-align: center;
  padding: 1rem 0 3rem;
}

.hero-art {
  /* viewBox が 192:182 なのでほぼ正方形。幅で決めて高さは比率に任せる */
  width: min(220px, 55vw);
  aspect-ratio: 192 / 182;
  margin: 0 auto 1.5rem;
  display: block;
}

.hero h1 {
  /* 端末幅で伸縮させる（見出しの寸法はサイト固有 — ADR-013） */
  font-size: clamp(1.9rem, 7vw, 2.75rem);
  line-height: 1.35;
  margin: 0 0 1rem;
}

.badge {
  display: inline-block;
  /* 淡いアクセント面 + 通常テキスト色。accent の上に白文字を置くとコントラストが足りない */
  background: var(--color-accent-surface);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}

.lead {
  color: var(--color-text-muted);
  max-width: 32rem;
  margin: 0 auto 2rem;
}

/*
 * CTA。--color-accent と --color-on-accent の比は 3.77:1 で、WCAG AA の通常文字
 * (4.5:1) には届かない。太字 18.66px 以上は「大きい文字」扱いで閾値が 3:1 になるため、
 * 20px の太字で満たしている。**このサイズを下げるなら配色ごと見直すこと**（ADR-013 の未決）。
 */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--min-tap-target);
  padding: 0.7rem 2rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-full);
  font-size: 1.25rem;
  font-weight: var(--weight-display);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.how h2,
.closing h2 {
  text-align: center;
  font-size: 1.4rem;
  margin: 0 0 1.5rem;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 0;
}

.step-num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-accent-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}

.step h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.step p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.closing {
  text-align: center;
  margin-top: 4rem;
  padding: 2.5rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.closing p {
  color: var(--color-text-muted);
  margin: 0 0 1.75rem;
}