/* base.css — 全ページ共通スタイル
   ここに定義されたトークンとクラスだけを使う。ツール側で色や字送りを新規に定義しない。 */

:root{
  --paper:#F7F8F7;      /* 背景 */
  --card:#FFFFFF;       /* 入力欄・カード */
  --ink:#1A1F1C;        /* 本文 */
  --ink-2:#5A655E;      /* 補足 */
  --line:#D9E0DB;       /* 罫線 */
  --accent:#2F5D62;     /* 見出し・リンク・強調 */
  --alert:#BF3B24;      /* エラー・警告 */
  --ok:#3A7D44;         /* 成功 */
  --radius:3px;
  --gap:12px;

  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --measure:44rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141815;
    --card:#1B211D;
    --ink:#E7ECE8;
    --ink-2:#9FACA4;
    --line:#2E3833;
    --accent:#8FBDBB;
    --alert:#E8735A;
    --ok:#7CC189;
  }
}

/* --- リセット --- */

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
}

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

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* --- ヘッダ / フッタ --- */

.site-header{
  height:48px;
  display:flex;
  align-items:center;
  padding:0 var(--gap);
  border-bottom:1px solid var(--line);
  background:var(--card);
}
.site-header a{
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
}

.site-footer{
  margin-top:48px;
  padding:20px var(--gap) 40px;
  border-top:1px solid var(--line);
  color:var(--ink-2);
  font-size:14px;
}
.site-footer p{ margin:0 0 6px; max-width:var(--measure); }

/* --- ページ --- */

.page{
  max-width:var(--measure);
  margin:0 auto;
  padding:20px var(--gap) 0;
}

h1{
  margin:0 0 16px;
  font-size:24px;
  line-height:1.5;
  color:var(--accent);
}

h2{
  margin:32px 0 12px;
  font-size:19px;
  line-height:1.6;
  color:var(--accent);
}

h3{
  margin:24px 0 8px;
  font-size:16px;
  line-height:1.6;
}

p{ margin:0 0 1em }

/* --- ツール本体 --- */

.tool{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field > label{
  font-size:14px;
  color:var(--ink-2);
}

textarea, input[type="text"], select{
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  color:var(--ink);
  font-family:inherit;
  font-size:16px;   /* iOS の自動ズーム防止。16px 未満にしない */
  line-height:1.7;
}

textarea{
  min-height:8em;
  resize:vertical;
}

.mono{ font-family:var(--mono) }

/* ボタン。主要な操作は1ページに1つだけ .btn-primary を使う */

button, .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  cursor:pointer;
}
button:hover, .btn:hover{ border-color:var(--accent) }

.btn-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--paper);
  font-weight:700;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* --- 結果表示 --- */

.result{
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  white-space:pre-wrap;
  word-break:break-word;
}

.note{ color:var(--ink-2); font-size:14px }
.error{ color:var(--alert) }
.ok{ color:var(--ok) }

.mark-lost{
  background:var(--alert);
  color:var(--paper);
  border-radius:2px;
}

/* --- 解説記事 / 関連 --- */

.article{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.article ul, .article ol{ margin:0 0 1em; padding-left:1.4em }
.article li{ margin-bottom:.3em }
.article code{
  font-family:var(--mono);
  font-size:.92em;
  padding:1px 4px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--card);
}
.article table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1em;
  font-size:15px;
}
.article th, .article td{
  border:1px solid var(--line);
  padding:6px 8px;
  text-align:left;
  vertical-align:top;
}

.related{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.related h2{ margin-top:0; font-size:16px }

.tool-list{
  list-style:none;
  margin:0 0 1em;
  padding:0;
}
.tool-list li{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.tool-list a{ font-weight:700; text-decoration:none }
.tool-list a:hover{ text-decoration:underline }
.tool-list .note{ display:block; margin:2px 0 0 }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}