/* =========================================================================
   マカセルAI補助金 ― 画面の配置と、デジタル庁デザインシステム（dads.css）の補い
   色・文字・余白は dads.css のデザイントークン（--color-* など）だけを使う
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
h1, h2, h3 { color: var(--color-neutral-solid-gray-900); letter-spacing: 0.02em; }
h1 { font-size: calc(28 / 16 * 1rem); line-height: 1.5; margin: 0 0 calc(24 / 16 * 1rem); }
h2 { font-size: calc(22 / 16 * 1rem); line-height: 1.5; margin: 0 0 calc(16 / 16 * 1rem); }
h3 { font-size: calc(18 / 16 * 1rem); line-height: 1.6; margin: 0 0 calc(8 / 16 * 1rem); }
@media (min-width: 48rem) {
  h1 { font-size: calc(32 / 16 * 1rem); }
  h2 { font-size: calc(24 / 16 * 1rem); }
  h3 { font-size: calc(20 / 16 * 1rem); }
}
p { margin: 0 0 calc(16 / 16 * 1rem); }
code { font-family: var(--font-family-mono); font-size: calc(14 / 16 * 1rem); word-break: break-all; }
.muted { color: var(--color-neutral-solid-gray-600); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: calc(16 / 16 * 1rem); top: calc(8 / 16 * 1rem); z-index: 100; background: var(--color-neutral-white); padding: calc(8 / 16 * 1rem); }

/* ---------- ヘッダー ---------- */
.mk-header {
  display: flex; align-items: center; gap: calc(16 / 16 * 1rem);
  min-height: calc(64 / 16 * 1rem);
  padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-bottom: 1px solid var(--color-neutral-solid-gray-420);
  background: var(--color-neutral-white);
}
@media (min-width: 48rem) { .mk-header { padding: calc(8 / 16 * 1rem) calc(32 / 16 * 1rem); } }
.mk-logo { display: inline-flex; align-items: baseline; gap: calc(8 / 16 * 1rem); color: var(--color-neutral-solid-gray-900); font-weight: bold; font-size: calc(20 / 16 * 1rem); text-decoration: none; }
.mk-logo:any-link { color: var(--color-neutral-solid-gray-900); text-decoration: none; }
.mk-logo small { font-size: calc(14 / 16 * 1rem); font-weight: normal; color: var(--color-neutral-solid-gray-600); }
.mk-private { margin-left: calc(4 / 16 * 1rem); }
.mk-header-right { margin-left: auto; display: flex; align-items: center; gap: calc(16 / 16 * 1rem); font-size: calc(14 / 16 * 1rem); }
.mk-menu-btn { display: inline-flex; }
@media (min-width: 64rem) { .mk-menu-btn { display: none; } }
.mk-user { color: var(--color-neutral-solid-gray-800); }
@media (max-width: 47.99rem) { .mk-user { display: none; } }

/* ---------- 全体の配置（左にメニュー、右に本文） ---------- */
.mk-shell { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 4rem); }
@media (min-width: 64rem) { .mk-shell { grid-template-columns: calc(256 / 16 * 1rem) 1fr; } }
.mk-sidenav {
  display: none;
  border-right: 1px solid var(--color-neutral-solid-gray-200);
  background: var(--color-neutral-white);
  padding: calc(24 / 16 * 1rem) calc(8 / 16 * 1rem);
}
.mk-sidenav[data-open] { display: block; border-bottom: 1px solid var(--color-neutral-solid-gray-200); }
@media (min-width: 64rem) { .mk-sidenav { display: block; } }
.mk-sidenav-label { margin: 0 calc(16 / 16 * 1rem) calc(8 / 16 * 1rem); font-size: calc(14 / 16 * 1rem); font-weight: bold; color: var(--color-neutral-solid-gray-600); }
.mk-sidenav .dads-menu-list { margin: 0; padding: 0; list-style: none; }
.mk-version { margin: calc(16 / 16 * 1rem); font-size: calc(12 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }
.mk-main { min-width: 0; padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem) calc(64 / 16 * 1rem); }
@media (min-width: 48rem) { .mk-main { padding: calc(40 / 16 * 1rem) calc(40 / 16 * 1rem) calc(80 / 16 * 1rem); } }
.mk-main > * { max-width: calc(1040 / 16 * 1rem); }
.mk-footer { border-top: 1px solid var(--color-neutral-solid-gray-200); padding: calc(24 / 16 * 1rem) calc(16 / 16 * 1rem); font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); background: var(--color-neutral-solid-gray-50); }

/* ---------- 区切りの箱（カード） ---------- */
.card {
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  background: var(--color-neutral-white);
  padding: calc(24 / 16 * 1rem);
  margin: 0 0 calc(24 / 16 * 1rem);
}
@media (min-width: 48rem) { .card { padding: calc(32 / 16 * 1rem); } }
.card > :last-child { margin-bottom: 0; }

/* ---------- お知らせ（通知バナー）の間隔 ---------- */
.dads-notification-banner { margin: 0 0 calc(24 / 16 * 1rem); }
.dads-notification-banner__body p:last-child { margin-bottom: 0; }

/* ---------- ボタンの並び ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 / 16 * 1rem); margin: calc(8 / 16 * 1rem) 0 0; }
form.actions { margin-top: calc(16 / 16 * 1rem); }
.inline-form { display: inline-block; margin: calc(4 / 16 * 1rem) calc(4 / 16 * 1rem) calc(4 / 16 * 1rem) 0; }
a.dads-button { text-decoration: none; }

/* ---------- 入力欄（dads-input-text・textarea・select と同じ見た目に、既存のフォームを合わせる） ---------- */
.form-grid { display: grid; gap: calc(24 / 16 * 1rem); }
.form-grid label:not(.dads-checkbox) { display: block; font-weight: bold; font-size: calc(17 / 16 * 1rem); color: var(--color-neutral-solid-gray-800); margin-bottom: calc(8 / 16 * 1rem); }
.form-grid .hint { margin-top: calc(8 / 16 * 1rem); font-size: calc(16 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }
:is(.form-grid, .actions) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=datetime-local], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--color-neutral-solid-gray-600);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
}
:is(.form-grid, .actions) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=search], input[type=date], input[type=datetime-local]) { height: 3rem; line-height: 1; }
:is(.form-grid, .actions) select {
  height: 3rem; line-height: 1; appearance: none; padding-right: calc(40 / 16 * 1rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 17L3 8L4 7L12 15L20 7L21 8L12 17Z' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right calc(16 / 16 * 1rem) center;
}
.actions select { width: auto; min-width: calc(200 / 16 * 1rem); }
:is(.form-grid, .actions) textarea { line-height: 1.7; min-height: calc(120 / 16 * 1rem); }
textarea.tall { min-height: calc(240 / 16 * 1rem); }
:is(.form-grid, .actions) :is(input, select, textarea):read-only:not(select) { border-style: dashed; }
:is(.form-grid, .actions) :is(input, select, textarea):disabled { border-color: var(--color-neutral-solid-gray-300); background-color: var(--color-neutral-solid-gray-50); color: var(--color-neutral-solid-gray-420); }
@media (hover: hover) { :is(.form-grid, .actions) :is(input, select, textarea):not(:read-only):hover { border-color: var(--color-neutral-black); } }
:is(.form-grid, .actions) :is(input, select, textarea):focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}
.form-grid input[type=checkbox], .actions input[type=checkbox] { width: calc(24 / 16 * 1rem); height: calc(24 / 16 * 1rem); accent-color: var(--color-key-900); vertical-align: -0.35em; margin: 0 calc(8 / 16 * 1rem) 0 0; }
.form-grid label:has(input[type=checkbox]), .actions label:has(input[type=checkbox]) { font-weight: normal; font-size: calc(16 / 16 * 1rem); }
.grid { display: grid; gap: calc(24 / 16 * 1rem); }
@media (min-width: 48rem) { .grid { grid-template-columns: 1fr 1fr; } }
details summary { cursor: pointer; color: var(--color-primitive-blue-1000); text-decoration: underline; text-underline-offset: calc(3 / 16 * 1rem); margin: calc(8 / 16 * 1rem) 0; }

/* ---------- 表 ---------- */
.mk-table-scroll { overflow-x: auto; }
.mk-table-scroll .dads-table__table { min-width: 100%; }

/* ---------- 項目と内容の一覧 ---------- */
.kv { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.kv dt { font-weight: bold; color: var(--color-neutral-solid-gray-900); padding-top: calc(12 / 16 * 1rem); }
.kv dd { margin: 0; padding-bottom: calc(12 / 16 * 1rem); border-bottom: 1px solid var(--color-neutral-solid-gray-200); white-space: pre-wrap; }
@media (min-width: 48rem) {
  .kv { grid-template-columns: calc(220 / 16 * 1rem) 1fr; }
  .kv dt, .kv dd { padding: calc(12 / 16 * 1rem) 0; border-bottom: 1px solid var(--color-neutral-solid-gray-200); }
}

/* ---------- 申請書の章 ---------- */
.sec { border: 1px solid var(--color-neutral-solid-gray-420); border-radius: calc(8 / 16 * 1rem); padding: calc(20 / 16 * 1rem) calc(24 / 16 * 1rem); margin: 0 0 calc(24 / 16 * 1rem); background: var(--color-neutral-white); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 / 16 * 1rem); flex-wrap: wrap; }
.sec-head h2, .sec-head h3 { margin: 0; }
.sec-guide { color: var(--color-neutral-solid-gray-600); margin: calc(4 / 16 * 1rem) 0 calc(12 / 16 * 1rem); }
.sec-body { white-space: pre-wrap; background: var(--color-neutral-solid-gray-50); padding: calc(16 / 16 * 1rem); border-radius: calc(8 / 16 * 1rem); min-height: calc(48 / 16 * 1rem); }
.sec-meta { font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); margin-top: calc(8 / 16 * 1rem); }
.comment { border-left: calc(4 / 16 * 1rem) solid var(--color-key-900); background: var(--color-primitive-blue-50); padding: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem); margin: calc(12 / 16 * 1rem) 0; border-radius: 0 calc(8 / 16 * 1rem) calc(8 / 16 * 1rem) 0; }
.comment .who { font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }

/* ---------- 数字の一覧（統計） ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(180 / 16 * 1rem), 1fr)); gap: calc(16 / 16 * 1rem); margin: 0 0 calc(24 / 16 * 1rem); }
.stat { border: 1px solid var(--color-neutral-solid-gray-420); border-radius: calc(8 / 16 * 1rem); padding: calc(16 / 16 * 1rem) calc(20 / 16 * 1rem); }
.stat b { display: block; font-size: calc(32 / 16 * 1rem); line-height: 1.4; color: var(--color-neutral-solid-gray-900); }

/* ---------- そのほか ---------- */
.plain-list { margin: 0; padding-left: calc(24 / 16 * 1rem); }
.plain-list li { margin: calc(8 / 16 * 1rem) 0; }
.code-box { font-family: var(--font-family-mono); font-size: calc(20 / 16 * 1rem); letter-spacing: .12em; background: var(--color-neutral-solid-gray-50); border: 1px dashed var(--color-neutral-solid-gray-600); padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem); border-radius: calc(8 / 16 * 1rem); word-break: break-all; margin: 0 0 calc(16 / 16 * 1rem); }
.dads-chip-label { vertical-align: middle; }

/* ---------- ログイン前の画面 ---------- */
.mk-auth { max-width: calc(560 / 16 * 1rem); margin: 0 auto; padding: calc(40 / 16 * 1rem) calc(16 / 16 * 1rem) calc(64 / 16 * 1rem); }
.mk-auth .card { margin-top: calc(24 / 16 * 1rem); }
.mk-auth-link { margin-top: calc(24 / 16 * 1rem); }

/* ---------- スマートフォン幅のヘッダー ---------- */
.mk-header .dads-button, .mk-logo, .dads-chip-label { white-space: nowrap; }
.mk-only-mobile { display: none; }
@media (max-width: 47.99rem) {
  .mk-header { gap: calc(8 / 16 * 1rem); padding: calc(8 / 16 * 1rem) calc(12 / 16 * 1rem); }
  .mk-logo { font-size: calc(17 / 16 * 1rem); }
  .mk-private { font-size: calc(12 / 16 * 1rem); }
  .mk-header-right { display: none; }
  .mk-only-mobile { display: block; margin: calc(16 / 16 * 1rem); }
}

/* ---------- v0.2.1：本文の幅・ボタン列とお知らせの間隔・表の行の揃え ---------- */
.mk-main > * { max-width: calc(1280 / 16 * 1rem); }
.mk-main > .actions, .mk-main > form.actions { margin: 0 0 calc(24 / 16 * 1rem); }
.dads-table__table :where(td, th) { vertical-align: top; }
.dads-table__table td .dads-chip-label { margin-top: calc(-2 / 16 * 1rem); }
.mk-nowrap { white-space: nowrap; }

/* ---------- v0.2.3：表のボタン、スマホでの表（カード型）、余白 ---------- */
.dads-table__table .dads-button { white-space: nowrap; }
.dads-table__table td .inline-form { display: inline-block; }
.card h3 { margin-top: calc(32 / 16 * 1rem); }
.card > h3:first-child, .sec h3 { margin-top: 0; }
.mk-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 / 16 * 1rem); margin: 0 0 calc(12 / 16 * 1rem); }
@media (max-width: 74.99rem) {
  .mk-table-scroll { overflow-x: visible; }
  .mk-table-scroll .dads-table__table, .mk-table-scroll .dads-table__table tbody, .mk-table-scroll .dads-table__table tr, .mk-table-scroll .dads-table__table td { display: block; width: 100%; }
  .mk-table-scroll .dads-table__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mk-table-scroll .dads-table__table tr { border-bottom: 1px solid var(--color-neutral-solid-gray-420); padding: calc(12 / 16 * 1rem) 0; }
  .mk-table-scroll .dads-table__table td { border: 0 !important; padding: calc(4 / 16 * 1rem) 0 !important; white-space: normal; }
  .mk-table-scroll .dads-table__table td[data-label]::before { content: attr(data-label); display: block; font-size: calc(14 / 16 * 1rem); font-weight: bold; color: var(--color-neutral-solid-gray-600); }
  .mk-table-scroll .dads-table__table td:empty { display: none; }
  .mk-table-scroll .dads-table__table thead tr { border: 0; padding: 0; } /* 隠した見出し行の線が、ボタンに触れないように */
}

/* ---------- v0.2.4：ボタンと枠線が重ならないための共通の余白 ---------- */
.mk-break { overflow-wrap: anywhere; word-break: normal; }
.mk-cell-actions .inline-form { display: block; margin: 0 0 calc(8 / 16 * 1rem); }
.mk-cell-actions .inline-form:last-child { margin-bottom: 0; }
.actions { margin-bottom: calc(16 / 16 * 1rem); }
.card > .actions:last-child, .card > form:last-child, .sec > :last-child, .card > :last-child { margin-bottom: 0; }
.actions + .dads-notification-banner, .actions + .card, .dads-notification-banner + .actions { margin-top: calc(24 / 16 * 1rem); }
.sec form + .inline-form, .sec .form-grid + .inline-form { margin-top: calc(12 / 16 * 1rem); }
.dads-table__table td .inline-form { margin: calc(4 / 16 * 1rem) calc(8 / 16 * 1rem) calc(4 / 16 * 1rem) 0; }
.dads-table__table td { padding-top: calc(16 / 16 * 1rem); padding-bottom: calc(16 / 16 * 1rem); }
.mk-row form { margin: 0; }
details > form { margin-top: calc(12 / 16 * 1rem); }

/* v0.3.0 表の見出しは折り返さない（「対象地域」「内容」などが1文字ずつ折れるのを防ぐ） */
.dads-table__col-header { white-space: nowrap; }

/* v0.4.0 未読の件数・合う補助金 */
.mk-count { display: inline-block; min-width: 1.5rem; padding: 0 calc(6 / 16 * 1rem); border-radius: calc(12 / 16 * 1rem); background: var(--color-primitive-red-800, var(--color-semantic-error-1)); color: var(--color-neutral-white); font-size: calc(14 / 16 * 1rem); line-height: 1.5rem; text-align: center; font-weight: bold; }
.mk-reasons { margin: calc(8 / 16 * 1rem) 0 0; padding-left: 1.25em; color: var(--color-neutral-solid-gray-700); font-size: calc(16 / 16 * 1rem); }
.mk-reasons li { margin: 0; }
.mk-match { padding: calc(16 / 16 * 1rem) 0; border-bottom: 1px solid var(--color-neutral-solid-gray-420); }
.mk-match:last-child { border-bottom: 0; }
.mk-match h3 { margin: 0 0 calc(8 / 16 * 1rem); font-size: calc(18 / 16 * 1rem); }
.mk-match-meta { display: flex; flex-wrap: wrap; gap: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem); align-items: center; color: var(--color-neutral-solid-gray-700); }
.mk-match .actions { margin-top: calc(12 / 16 * 1rem); }
.mk-notice { padding: calc(16 / 16 * 1rem) 0; border-bottom: 1px solid var(--color-neutral-solid-gray-420); }
.mk-notice:last-child { border-bottom: 0; }
.mk-notice[data-unread] h3::before { content: "●"; color: var(--color-primitive-blue-900, var(--color-key-900)); margin-right: calc(6 / 16 * 1rem); font-size: calc(12 / 16 * 1rem); vertical-align: middle; }
.mk-notice h3 { margin: 0 0 calc(4 / 16 * 1rem); font-size: calc(17 / 16 * 1rem); }
.mk-notice p { margin: calc(4 / 16 * 1rem) 0 0; white-space: pre-line; }
.mk-month { margin-top: calc(24 / 16 * 1rem); }

/* v0.5.0 数値計画・AIの下書き・セルフチェック */
.mk-plan-scroll { overflow-x: auto; }
.mk-plan { min-width: 40rem; }
.mk-plan th[scope=row] { text-align: left; font-weight: bold; padding: calc(8 / 16 * 1rem); }
.mk-plan td { padding: calc(4 / 16 * 1rem); }
.mk-plan td input { width: 100%; min-width: 6rem; height: 2.75rem; text-align: right; border: 1px solid var(--color-neutral-solid-gray-600); border-radius: calc(8 / 16 * 1rem); padding: 0 calc(8 / 16 * 1rem); font: inherit; }
.mk-plan td input[readonly] { background: var(--color-neutral-solid-gray-50); }
.mk-plan-calc td { text-align: right; padding-right: calc(16 / 16 * 1rem); background: var(--color-neutral-solid-gray-50); }
.mk-plan-calc th { background: var(--color-neutral-solid-gray-50); }
.mk-ai { margin: calc(12 / 16 * 1rem) 0; padding: calc(16 / 16 * 1rem); border: 2px dashed var(--color-key-900); border-radius: calc(8 / 16 * 1rem); }
.mk-ai h4 { margin: 0 0 calc(8 / 16 * 1rem); }
.mk-check { list-style: none; padding: 0; margin: 0; }
.mk-check li { padding: calc(8 / 16 * 1rem) 0; border-bottom: 1px solid var(--color-neutral-solid-gray-420); }
.mk-check li:last-child { border-bottom: 0; }
.mk-ai > p, .mk-ai > ul, .mk-ai > .dads-notification-banner { margin: calc(12 / 16 * 1rem) 0; }