/* 共通デザインシステム（DESIGN_TRENDS_INPUT.md 準拠）
   戦略的ミニマリズム・フルイドタイポ・WCAG AA・余白・単一フォント */
:root {
  --app-bg: #fafafa;
  --app-text: #1a1a1a;
  --app-muted: #52525b;
  --app-primary: #2563eb;
  --app-primary-hover: #1d4ed8;
  --app-surface: #f4f4f5;
  --app-border: #e4e4e7;
  --app-error: #dc2626;
  --app-radius: 8px;
  --app-font: system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--app-font);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: var(--app-text);
  background: var(--app-bg);
  margin: 0;
  padding: 1.5rem 1rem;
  min-height: 100vh;
}
.app { max-width: 42rem; margin: 0 auto; }
.app-title { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; margin: 0 0 0.25rem; }
.app-desc { color: var(--app-muted); margin: 0 0 1.5rem; font-size: 0.9375rem; line-height: 1.5; }
.field { margin-bottom: 1rem; }
.label { display: block; font-weight: 500; margin-bottom: 0.375rem; font-size: 1rem; }
.input, .textarea {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5;
  border: 1px solid var(--app-border); border-radius: var(--app-radius);
  font-family: inherit; background: #fff;
}
.input:focus, .textarea:focus {
  outline: none; border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.btn {
  display: inline-block; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: var(--app-primary); border: none; border-radius: var(--app-radius);
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.btn:hover { background: var(--app-primary-hover); }
.btn:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.result-box {
  margin-top: 1.5rem; padding: 1rem; background: var(--app-surface); border-radius: var(--app-radius);
  white-space: pre-wrap; line-height: 1.6; font-size: 1rem;
}
.result-box.error { color: var(--app-error); }
.nav-tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--app-border); }
.nav-tabs .nav-link {
  padding: 0.75rem 1rem; background: none; border: none; font-size: 1rem; font-weight: 500;
  color: var(--app-muted); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--app-text); }
.nav-tabs .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); }
.panel { display: none; }
.panel.active { display: block; }
.result-box h3 { font-size: 1.125rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.result-box h3:first-child { margin-top: 0; }
.result-box p { margin: 0 0 0.5rem; }
.foot-note { margin-top: 1rem; font-size: 0.875rem; color: var(--app-muted); }