:root {
  --ink: #12161b;
  --ink-soft: #4d555e;
  --ink-faint: #7b848e;
  --line: #e2e6ea;
  --surface: #ffffff;
  --canvas: #f6f7f9;
  --accent: #b4530f;
  --accent-soft: #fdf3e9;
  --accent-ink: #8a3f0a;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(18, 22, 27, 0.06), 0 8px 24px rgba(18, 22, 27, 0.06);
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Noto Sans JP", Meiryo,
    system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
}

p {
  margin: 0;
}

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

a:hover {
  text-decoration: underline;
}

img,
canvas {
  max-width: 100%;
  display: block;
}

.draft-banner {
  background: #2a2f36;
  color: #f2f4f6;
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 20px;
  text-align: center;
}

/* 警告ではなく案内として読ませたいので、暗いバーではなく淡い帯にしている。 */
.notice-banner {
  background: var(--accent-soft);
  border-bottom: 1px solid #f0ddc8;
  color: var(--accent-ink);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 7px 20px;
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.brand-mark {
  color: var(--accent);
  flex: none;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 16px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

a.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-ink);
}

.btn-secondary {
  background: var(--accent-soft);
  border-color: #f0d9c2;
  color: var(--accent-ink);
}

.btn-secondary:hover:not(:disabled) {
  background: #fbe9d8;
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-soft);
}

.btn-ghost:hover:not(:disabled) {
  border-color: #c9d0d7;
  color: var(--ink);
}

.btn-disabled {
  background: #e9ecef;
  color: var(--ink-faint);
  cursor: not-allowed;
}

.btn-icon {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-soft);
  font-size: 16px;
  padding: 8px 12px;
}

.btn-danger:hover:not(:disabled) {
  background: #fdeceb;
  border-color: #f3c6c2;
  color: #a3241b;
}