/*
 * ツール共通の CSS (static/tools/*.html から <link rel="stylesheet" href="/tools/tool.css"> で読み込む)
 * 使い方と部品の一覧は HOWTO.md の「JavaScript ツール」。雛形は scripts/tool-template.html
 *
 * ツールは記事の iframe の中で動き、iframe の高さは中身に合わせて自動で変わる。
 * そのため 100vh など画面の高さを基準にした指定は使わない (高さが決まらなくなる)
 */

/* 土台 */
body {
  margin: 0;
  padding: 8px;
  font-family: sans-serif;
  color: #333;
  line-height: 1.6;
}
img, canvas, svg, video { max-width: 100%; height: auto; }

/* 全体を包む白いカード */
.tool-card {
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.tool-card h2 {
  margin: 0 0 20px;
  text-align: center;
  font-size: 20px;
  color: #1d2d35;
}

/* 入力: <div class="field"><label>…</label><input>…</div> の形で並べる */
.field { margin-bottom: 16px; }
.tool-card label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 600;
  font-size: 15px;
}
.tool-card input[type="text"],
.tool-card input[type="number"],
.tool-card input[type="date"],
.tool-card select,
.tool-card textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background-color: #fff;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tool-card input:focus,
.tool-card select:focus,
.tool-card textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* 横に並べる (狭い画面では縦一列になる): <div class="row"><div class="field">…</div><div class="field">…</div></div> */
.row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.row > * { flex: 1 1 200px; }

/* ボタン: 主な操作は青、補助的な操作は class="secondary" */
.tool-card button {
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  padding: 14px;
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
  font-family: inherit;
  transition: transform 0.2s, box-shadow 0.3s;
}
.tool-card button:hover {
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
  transform: translateY(-2px);
}
.tool-card button.secondary {
  width: auto;
  padding: 8px 16px;
  background: #f8f9fa;
  color: #333;
  border: 1px solid #dcdcdc;
  font-size: 14px;
  font-weight: normal;
}
.tool-card button.secondary:hover { box-shadow: none; transform: none; background: #e9ecef; }

/* 結果の欄 */
.result {
  margin-top: 20px;
  padding: 16px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  text-align: center;
}
.result .value {
  display: block;
  margin-top: 4px;
  font-size: 32px;
  font-weight: bold;
  color: #007bff;
}

/* 表 */
.tool-card table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 14px; }
.tool-card th, .tool-card td { padding: 8px; border-bottom: 1px solid #e9ecef; text-align: left; }
.tool-card th { background-color: #f8f9fa; color: #555; }

/* 補足の文 (小さめの灰色) とエラー (赤) */
.note { margin-top: 12px; font-size: 13px; color: #777; }
.error { margin-top: 12px; font-size: 14px; color: #dc3545; }
.error:empty { display: none; }