/* サイト全体の見た目。色はロゴ（images/logo.png）の青 #3EADE3 と墨 #343131 から取り、
   面の重ね方と角の丸み（パネル 12px、ボタンと入力欄 6px の 2 段階だけ）は plusmateAI に合わせる。 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  --background: #eef1f5;       /* 地 */
  --surface: #e3e8ef;          /* 一段沈んだ面 */
  --panel: #ffffff;            /* パネル */
  --ink: #343131;              /* ロゴの墨 */
  --line: #cdd4de;             /* 区切り線 */
  --line-soft: #dde2ea;        /* タイルの枠 */
  --quiet: #737d8c;            /* 補助の文字 */
  --brand: #3eade3;            /* ロゴの青。面と線に使う */
  --brand-ink: #14709f;        /* 白地の上で読める青。文字に使う */
  --brand-wash: #e9f5fc;
  --alarm: #c0392b;
  --alarm-wash: #fbeeec;
  --done: #1d7a5f;
  --radius-panel: 12px;
  --radius-control: 6px;
  --sans: 'IBM Plex Sans JP', 'Hiragino Sans', 'Yu Gothic', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.7;
  color: var(--ink); background: var(--background); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(62, 173, 227, .25); }
a { color: var(--brand-ink); text-underline-offset: 3px; }
[hidden] { display: none !important; }

/* ---- 入力欄とボタン ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; color: var(--quiet); }
input, select { font: inherit; font-size: 15px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-control); height: 44px; padding: 0 12px; width: 100%; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible { border-color: var(--brand); }

.button { font: inherit; font-weight: 600; font-size: 14.5px; letter-spacing: .02em; cursor: pointer;
  height: 44px; padding: 0 20px; border-radius: var(--radius-control);
  border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: background .15s; }
.button:hover { background: #4a4646; }
.button:disabled { background: var(--surface); border-color: var(--surface); color: var(--quiet); cursor: not-allowed; }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.button.quiet:hover { background: var(--surface); }
.button.small { height: 34px; padding: 0 14px; font-size: 13px; }

.notice { font-size: 13.5px; border-radius: var(--radius-control); padding: 8px 12px; margin: 0; }
.notice:empty { display: none; }
.notice.problem { color: var(--alarm); background: var(--alarm-wash); border: 1px solid rgba(192, 57, 43, .3); }
.notice.done { color: var(--done); background: #eaf6f1; border: 1px solid rgba(29, 122, 95, .3); }

/* ---- ログイン後の枠 ---- */
.topbar { display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 clamp(16px, 3vw, 32px);
  background: var(--panel); border-bottom: 1px solid var(--line-soft); }
/* ロゴの画像は周りに余白を持っているので、その分だけ大きく置いて外へはみ出させる */
.topbar .brand img { height: 50px; display: block; margin: 0 -6px 0 -16px; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { font-size: 14px; font-weight: 500; color: var(--quiet); text-decoration: none;
  padding: 6px 12px; border-radius: var(--radius-control); }
.topbar nav a:hover { color: var(--ink); background: var(--background); }
.topbar nav a.here { color: var(--ink); background: var(--surface); }
.topbar .who { font-size: 13px; color: var(--quiet); }
@media (max-width: 640px) { .topbar .who { display: none; } .topbar { gap: 12px; } }

.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-panel); }
.empty { color: var(--quiet); text-align: center; padding: 56px 20px; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--quiet);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.number, th.number { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.number { font-family: var(--sans); }

/* 物理量の記号。量を表す文字（E、G）は斜体、‡ は E の上付き。Δ は立体のまま */
.quantity { white-space: nowrap; font-family: "STIX Two Text", "Times New Roman", "Nimbus Roman", serif; font-size: 1.06em; }
.quantity i { font-style: italic; }
.quantity sup { font-size: .72em; line-height: 0; vertical-align: super; margin-left: .04em; }