/* 素の要素の見た目（リセットと文字・入力欄） */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.7 var(--font);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
  }
  a { color: var(--accent); }
  code { font-family: var(--mono); font-size: .95em; }
  h1, h2, h3 { line-height: 1.35; }
  button { font: inherit; color: inherit; }
  [hidden] { display: none !important; }

  input[type="text"], input[type="password"], input[type="email"], input[type="search"],
  input[type="datetime-local"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid var(--field-border);
    border-radius: 10px;
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
    font-size: 16px; /* iOS のズーム防止 */
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .04);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  input:hover, select:hover, textarea:hover { border-color: var(--field-border-hover); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); border-style: dashed; color: var(--muted); box-shadow: none; }
  ::placeholder { color: var(--faint); opacity: 1; }
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); /* 薄い色では白地で見えず、キーボードで今どこか分からない */
    outline-offset: 2px;
  }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
  textarea { resize: vertical; } /* 横に広げると枠からはみ出す */
  @media (min-width: 960px) {
    input[type="text"], input[type="password"], input[type="email"], input[type="search"],
    input[type="datetime-local"], input[type="date"], input[type="time"], input[type="number"], input[type="url"], select { min-height: 44px; }
  }

  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  svg.i {
    width: 22px;
    height: 22px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .muted { color: var(--muted); }
  .small { font-size: 14px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}