/*
 * Web の頁の見た目。Studio のデザインシステム（docs/spec/17-design-system.md）を Web の大きさに写したもの。
 * 紙とインク（暗い設定では夜帳とクリーム）、罫線とドットで組み、箱と角丸は使わない。色・大きさ・余白は下のトークン
 * だけから取る。文字の大きさは Studio の段（9.5/11/12.5/16/27px）を、役割を変えずに約 1.5 倍にしている。
 * 管理の Worker も同じファイルを組み込み、管理の頁だけの部品（admin/src/admin.css）を後ろに繋いで使う。
 */
:root {
  color-scheme: light dark;
  /* 紙とインク（Studio の symbolTokens.css と同じ値） */
  --bg: #f5f3e6;
  --bg-2: #eeecdb;
  --ink: #26251f;
  --ink-soft: #6b695c;
  --ink-faint: #a5a38b;
  --state-ok: #3fb39c;
  --state-record: #d95f45;
  --hover-fill: color-mix(in srgb, var(--ink) 7%, transparent);
  /* 書体は二つ。等幅はラテン文字と数字だけに使う（和文は本文書体で組む）。 */
  --font-user: "IBM Plex Sans", "MUSA Web Sans JP", "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, "MUSA Web Sans JP", monospace;
  /* 大きさ: ラベルと操作語・文と値・名前・題・製品名 */
  --fs-label: 14px;
  --fs-text: 16px;
  --fs-name: 18px;
  --fs-title: 24px;
  --fs-mark: 40px;
  --lh-tight: 1.3;
  --lh-text: 1.75;
  --lh-read: 1.9;
  --track-mark: .18em;
  /* 余白は 4/8/12/16/24/32px の段だけ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --bar-h: 56px;
  --control-h: 40px;
  --control-h-sm: 32px;
  --check: 16px;
  --dot: 8px;
  --field-w: 400px;
  --page-w: 688px;
  --motion-touch: 80ms;
  --motion-settle: 140ms;
  --ease-ink: cubic-bezier(.2, 0, 0, 1);
  --ease-drain: cubic-bezier(.4, 0, .6, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2b2724;
    --bg-2: #322d29;
    --ink: #e6dcc8;
    --ink-soft: #a89f8c;
    --ink-faint: #6e675a;
    --state-ok: #4ec9b1;
    --state-record: #e0654a;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-touch: 0ms;
    --motion-settle: 0ms;
  }
}

/* ── 土台 ─────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-text)/var(--lh-text) var(--font-user);
}

body.wide {
  --page-w: 1208px;
}

/* 文中のリンクだけが下線を持つ（薄い 1px の線）。 */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--ink);
}

:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: 2px;
}

/* ── 頁の枠: 上の帯・中身・下の行。中身の幅は一つで、帯と行の罫は端まで引く。 ── */

.bar,
main,
.foot {
  width: 100%;
  padding-inline: max(var(--space-4), calc((100% - var(--page-w)) / 2));
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--bar-h);
  border-bottom: 1px solid var(--ink);
}

main {
  flex: 1 0 auto;
  padding-bottom: var(--space-8);
}

.foot {
  padding-block: var(--space-4) var(--space-8);
  border-top: 1px solid var(--ink);
  color: var(--ink-soft);
  font-size: var(--fs-label);
}

/* 押せる語（製品名・帯の操作）: 通常は文字だけ、触れると薄い背景色。左右の余白は背景のためのもので、端の語は文字を端に揃える。 */
.mark,
.nav a,
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-settle) var(--ease-drain), color var(--motion-settle) var(--ease-drain);
}

.mark:hover,
.nav a:hover,
.link-button:hover {
  background: var(--hover-fill);
  color: var(--ink);
  transition-duration: var(--motion-touch);
  transition-timing-function: var(--ease-ink);
}

.mark {
  margin-left: calc(var(--space-2) * -1);
  color: var(--ink);
  font: 700 var(--fs-label)/1 var(--font-mono);
  letter-spacing: var(--track-mark);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-right: calc(var(--space-2) * -1);
}

.nav form {
  margin: 0;
}

.nav a,
.nav span,
.link-button {
  color: var(--ink-soft);
  font: 400 var(--fs-label)/1 var(--font-user);
}

.nav span {
  padding: 0 var(--space-2);
}

/* ── 文字 ──────────────────────────────────────────────── */

h1 {
  margin: var(--space-8) 0 var(--space-4);
  font: 700 var(--fs-title)/var(--lh-tight) var(--font-user);
}

h2 {
  margin: var(--space-8) 0 var(--space-2);
  font: 700 var(--fs-name)/var(--lh-tight) var(--font-user);
}

h3 {
  margin: var(--space-6) 0 var(--space-2);
  font: 700 var(--fs-text)/var(--lh-tight) var(--font-user);
}

p {
  margin: var(--space-2) 0;
}

ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-6);
}

li::marker {
  color: var(--ink-soft);
}

code {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.lead {
  font-size: var(--fs-name);
}

.muted {
  color: var(--ink-soft);
  font-size: var(--fs-label);
}

/* ── 区画 ──────────────────────────────────────────────── */

/* 区画は箱にせず、内部の線（点線）で区切る。 */
.panel {
  margin: 0;
  padding: var(--space-6) 0;
  border-top: 1px dotted var(--ink-faint);
}

.panel > :first-child {
  margin-top: 0;
}

.panel > :last-child {
  margin-bottom: 0;
}

.hero {
  padding: var(--space-8) 0;
}

.hero h1 {
  margin: 0 0 var(--space-4);
  font: 700 var(--fs-mark)/1 var(--font-mono);
  letter-spacing: var(--track-mark);
}

.hero .lead {
  margin: 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px dotted var(--ink-faint);
  list-style: none;
}

.features li {
  padding: var(--space-6) var(--space-4) var(--space-6) 0;
}

.features li + li {
  padding-left: var(--space-4);
  border-left: 1px dotted var(--ink-faint);
}

.features strong {
  display: block;
  line-height: var(--lh-tight);
}

.features p {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-label);
}

/* 事実の行: 左にラベル、右に値。行どうしは内部の線で区切る。 */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  line-height: calc(var(--fs-text) * var(--lh-text));
}

.facts dt,
.facts dd {
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--ink-faint);
}

.facts > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.facts dt {
  padding-right: var(--space-6);
  color: var(--ink-soft);
  font-size: var(--fs-label);
}

.facts dd {
  overflow-wrap: anywhere;
}

/* 知らせ: 左端の帯で示す。 */
.notice {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--ink);
  background: var(--bg-2);
}

.notice.error {
  border-left-color: var(--state-record);
}

/* 状態: 色はドットにだけ出し、語は主インクの太字。 */
.state-ok,
.state-off {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: 700;
}

.state-ok::before,
.state-off::before {
  content: "";
  flex: none;
  align-self: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--state-ok);
}

.state-off::before {
  background: var(--state-record);
}

/* ── 操作 ──────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.actions form {
  margin: 0;
}

/* 主な操作は太字の語を主インクの点線で囲む。ほかの操作は罫の升に入れる。 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  margin: 0;
  padding: 0 var(--space-6);
  border: 1px dotted var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--fs-label)/var(--lh-tight) var(--font-user);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-settle) var(--ease-drain);
}

.button:hover {
  background: var(--hover-fill);
  transition-duration: var(--motion-touch);
  transition-timing-function: var(--ease-ink);
}

.button.secondary {
  border-style: solid;
  border-color: var(--ink-faint);
  font-weight: 400;
}

/* ── 入力 ──────────────────────────────────────────────── */

/* 入力できる欄は罫の升に入れる。触れると副インクの罫、入力中は主インクの点線で囲む。 */
input:is(:not([type]), [type="text"], [type="email"], [type="password"], [type="number"], [type="date"], [type="datetime-local"]),
select {
  min-height: var(--control-h);
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: 400 var(--fs-text)/var(--lh-tight) var(--font-user);
  transition: border-color var(--motion-settle) var(--ease-drain);
}

input:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
  border-color: var(--ink-soft);
  transition-duration: var(--motion-touch);
  transition-timing-function: var(--ease-ink);
}

input:focus,
select:focus {
  outline: 1px dotted var(--ink);
  outline-offset: 2px;
}

input::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

/* ドロップダウンは ▼ を常に出す。 */
select {
  padding-right: var(--space-8);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* チェック: 16px の四角。オンは主インクで塗って紙の色の印、オフは枠だけ。 */
input[type="checkbox"] {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: var(--check);
  height: var(--check);
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color var(--motion-settle) var(--ease-drain);
}

input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid var(--bg);
  border-left: 1.5px solid var(--bg);
  transform: translateY(-1px) rotate(-45deg) scale(0);
}

input[type="checkbox"]:hover:not(:checked) {
  background: var(--hover-fill);
  transition-duration: var(--motion-touch);
  transition-timing-function: var(--ease-ink);
}

input[type="checkbox"]:checked {
  background: var(--ink);
}

input[type="checkbox"]:checked::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

/* 語を添えたチェック。四角を語の一行目の中央に置き、語が折り返しても四角は動かない。 */
label.check {
  display: grid;
  grid-template-columns: var(--check) minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  margin: var(--space-6) 0 0;
  cursor: pointer;
}

label.check input {
  margin-top: calc((var(--fs-text) * var(--lh-text) - var(--check)) / 2);
}

/* 見出しを上に置く欄（ログインの入力）。 */
.fields label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink-soft);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

.fields input {
  width: 100%;
  max-width: var(--field-w);
}

/* ── 文書（使用許諾契約・利用規約・プライバシーポリシー） ───────── */

.document {
  overflow-wrap: anywhere;
}

.document h2 {
  margin-top: var(--space-8);
}

.document p,
.document li {
  line-height: var(--lh-read);
}

.document .preserve {
  white-space: pre-wrap;
}

.document hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px dotted var(--ink-faint);
}

/* ── 狭い画面 ───────────────────────────────────────────── */

@media (max-width: 640px) {
  .actions > * {
    flex: 1 1 auto;
  }

  .actions .button {
    width: 100%;
  }

  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .features li,
  .features li + li {
    padding: var(--space-4) 0;
    border-left: 0;
  }

  .features li + li {
    border-top: 1px dotted var(--ink-faint);
  }
}