/* ミライ事務ツールズ：すべてのクラスは mtl- で始め、テーマのCSSと衝突させない。
 * テーマが input / label に display:block や大きな余白を当てるため、フォーム部品はすべて上書きする。 */

/* ---------- 基本 ---------- */
.mtl-app, .mtl-index { color: #1f2933; line-height: 1.7; font-size: 16px; }
.mtl-app *, .mtl-index * { box-sizing: border-box; }
.mtl-app :focus-visible, .mtl-index a:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }

/* テーマの label 既定（block・余白）を打ち消す */
.mtl-app label { display: inline; margin: 0; padding: 0; font-weight: 400; cursor: pointer; }
.mtl-app .mtl-label { display: block; font-weight: 700; margin: 0 0 6px; cursor: default; font-size: 16px; color: #1f2933; }

/* ---------- 入力欄 ---------- */
.mtl-app .mtl-input, .mtl-app .mtl-select {
  display: block; width: 100%; max-width: 100%; margin: 0; font: inherit; font-size: 16px; color: #111;
  background: #fff; border: 1px solid #7a8794; border-radius: 6px; padding: 10px 12px; min-height: 44px;
}
.mtl-app textarea.mtl-input { min-height: 150px; resize: vertical; line-height: 1.6; }
.mtl-app .mtl-input:focus, .mtl-app .mtl-select:focus { border-color: #1d5f99; box-shadow: 0 0 0 3px rgba(29, 95, 153, .25); outline: none; }
.mtl-app .mtl-input[readonly] { background: #f7f9fc; }
.mtl-app .mtl-input-short { max-width: 24em; }
.mtl-count, .mtl-small { font-size: 13px; color: #4a5561; margin: 6px 0 0; line-height: 1.5; }
.mtl-intro { font-size: 16px; color: #33414f; margin: 0 0 16px; padding: 12px 14px; background: #eef4fb; border-radius: 8px; }

.mtl-field { margin: 0 0 16px; }
.mtl-grid { display: grid; gap: 16px; margin-bottom: 16px; }

/* ---------- 選択肢（ラジオ・チェック）：文字ごと押せる行 ---------- */
.mtl-app input[type="radio"], .mtl-app input[type="checkbox"] {
  display: inline-block; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; padding: 0;
  accent-color: #1d5f99; cursor: pointer; vertical-align: middle;
}
.mtl-app .mtl-choice {
  display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 6px 0; padding: 10px 14px;
  background: #fff; border: 1px solid #c5d0dc; border-radius: 8px; cursor: pointer; color: #1f2933;
}
.mtl-app .mtl-choice > span { flex: 1 1 auto; font-size: 16px; line-height: 1.5; }
.mtl-app .mtl-choice:hover { border-color: #1d5f99; background: #f4f8fd; }
.mtl-app .mtl-choice:has(input:checked) { border-color: #1d5f99; background: #e6f0fa; box-shadow: inset 4px 0 0 #1d5f99; }
.mtl-app .mtl-choice:has(input:focus-visible) { outline: 3px solid #f0a000; outline-offset: 2px; }
.mtl-app .mtl-inline { display: block; margin: 0; }
.mtl-app .mtl-inline:not(:has(.mtl-choice)) { display: flex; align-items: center; gap: 12px; min-height: 44px; }

.mtl-fieldset { border: 1px solid #cfd8e3; border-radius: 8px; padding: 14px 16px 10px; margin: 0 0 16px; background: #fbfcfe; min-width: 0; }
.mtl-fieldset legend { font-weight: 700; padding: 0 6px; font-size: 16px; }
.mtl-fieldset .mtl-field { margin-bottom: 8px; }
.mtl-app .mtl-field > .mtl-label { margin-bottom: 8px; }

/* 旧来の並び（チップ） */
.mtl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mtl-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c5d0dc; border-radius: 999px; padding: 6px 14px; background: #fff; min-height: 44px; }

/* ---------- ボタン ---------- */
.mtl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
.mtl-app .mtl-btn, .mtl-index .mtl-btn {
  display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 16px; font-weight: 700;
  line-height: 1.3; min-height: 46px; padding: 10px 20px; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 2px solid #1d5f99; background: #fff; color: #1d5f99; margin: 0;
}
.mtl-app .mtl-btn-main, .mtl-index .mtl-btn-main { background: #1d5f99; color: #fff; }
.mtl-app .mtl-btn-main:hover { background: #164c7c; border-color: #164c7c; }
.mtl-app .mtl-btn:hover { background: #eef4fb; }
.mtl-app .mtl-btn-sub { background: #eef4fb; min-height: 40px; font-size: 15px; border-color: #8fb3d9; }
.mtl-app .mtl-btn:focus-visible { outline: 3px solid #f0a000; outline-offset: 2px; }

/* ---------- 結果 ---------- */
.mtl-panel { background: #f7f9fc; border: 1px solid #cfd8e3; border-radius: 10px; padding: 18px; }
.mtl-results { margin-top: 10px; }
.mtl-h3 { font-size: 20px; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #1d5f99; color: #1d5f99; }
.mtl-h4 { font-size: 17px; margin: 14px 0 6px; }
.mtl-summary { font-weight: 700; margin: 8px 0; font-size: 16px; }
.mtl-result {
  font-size: 20px; font-weight: 700; background: #fff; border: 1px solid #b9cde3; border-left: 6px solid #1d5f99;
  border-radius: 8px; padding: 14px 16px; margin: 10px 0; overflow-wrap: anywhere; color: #0f3d66;
}
.mtl-block { margin: 12px 0 16px; }
.mtl-list { margin: 4px 0 8px 1.2em; padding: 0; overflow-wrap: anywhere; }
.mtl-empty { color: #4a5561; margin: 4px 0; }
.mtl-details { margin: 8px 0; }
.mtl-details summary { cursor: pointer; font-weight: 700; min-height: 36px; line-height: 36px; }

.mtl-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; background: #fff; font-size: 16px; border-radius: 8px; overflow: hidden; }
.mtl-table th, .mtl-table td { border: 1px solid #d5dde7; padding: 10px 12px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mtl-table th { background: #eef4fb; font-weight: 700; width: 45%; }
.mtl-table td { font-variant-numeric: tabular-nums; text-align: right; }
.mtl-table-days { display: block; max-height: 360px; overflow: auto; }
.mtl-table-days th, .mtl-table-days td { text-align: left; }
.mtl-table-days .mtl-off td { color: #5a4a00; background: #fff8e1; }
.mtl-table-days .mtl-biz td { background: #fff; }

.mtl-msg { border-radius: 8px; padding: 12px 14px; margin: 12px 0; font-size: 15px; line-height: 1.6; }
.mtl-msg-error { background: #fdeaea; border: 1px solid #c0392b; color: #7a1a10; font-weight: 700; }
.mtl-msg-note { background: #f2f6fa; border: 1px solid #cfd8e3; color: #2c3a48; }
.mtl-msg-status { background: #eaf6ea; border: 1px solid #2e7d32; color: #1b4d1e; }

.mtl-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mtl-pane { min-width: 0; }
.mtl-pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid #cfd8e3; border-radius: 8px; padding: 12px; max-height: 320px; overflow: auto; font: inherit; font-size: 15px; margin: 0; }
.mtl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mtl-offscreen { position: fixed; left: -9999px; top: 0; }
[hidden] { display: none !important; }

/* ---------- 一覧・案内 ---------- */
.mtl-index .mtl-cards { display: grid; gap: 14px; margin: 16px 0; }
.mtl-index .mtl-card { border: 1px solid #cfd8e3; border-radius: 10px; padding: 16px 18px; background: #fff; }
.mtl-index .mtl-card h2 { font-size: 19px; margin: 0 0 6px; }
.mtl-index .mtl-card p { margin: 4px 0; }
.mtl-index .mtl-card .mtl-btn { margin-top: 10px; }
.mtl-index .mtl-kicker { font-weight: 700; color: #1d5f99; margin: 0; }
.mtl-cta { border: 2px solid #1d5f99; border-radius: 10px; padding: 14px 16px; background: #f2f7fc; margin: 18px 0; }
.mtl-cta p { margin: 4px 0; }
.mtl-cta .mtl-btn { margin-top: 6px; }

@media (min-width: 720px) {
  .mtl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtl-pair { grid-template-columns: 1fr 1fr; }
  .mtl-index .mtl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .mtl-app .mtl-actions .mtl-btn { flex: 1 1 100%; }
  .mtl-app .mtl-input-short { max-width: 100%; }
  .mtl-app .mtl-choice { min-height: 52px; }
  .mtl-app .mtl-table th { width: 50%; }
}