[hidden], .hidden {
  display: none !important;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  height: 100%;
  margin: 0;
  background: var(--color-neutral-solid-gray-50);
  overflow: hidden;
}

main {
  height: 100dvh;
  padding: 0.5rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

output {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  /* 新着が下、上方向にqueue */
  gap: .5rem;
  border: none;
  /* outputのブラウザデフォルトを上書き */
}
output article {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .625rem .875rem;
  border-radius: .375rem;
  min-width: 14rem;
  max-width: 22rem;
  background: #1c1c1c;
  color: #f5f5f5;
  font-size: .875rem;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  /* enter前: 右にずれて透明 */
  translate: 1.5rem 0;
  transition: opacity .2s ease, translate .2s ease;
  pointer-events: none;
}
output article.show {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
output article.hide {
  opacity: 0;
  translate: 1.5rem 0;
  transition-duration: .15s;
  pointer-events: none;
}
output article span { /* icon */
  font-weight: 700;
  font-size: .8125rem;
  flex-shrink: 0;
  padding: 0 .125rem;
  opacity: .7;
}
article.info { background: var(--color-neutral-solid-gray-300); }
article.success { background: var(--color-semantic-success-1); }
article.warning { background: var(--color-semantic-warning-yellow-2); }

#main_overlay_focus {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height:0;
}


/* ───── debug select: キャラ一覧 ───── */

#main_div_section-1_section-1_select {
  width: 100%;
}

/* ───── fieldset-3 専門分野 select/input ───── */

#modal [id$="_td-1_select"],
#modal [id$="_td-1_input"] {
  max-width: 5rem;
}

/* ───── dialog ───── */

dialog {
  width: 100%;
  max-width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  box-sizing: border-box;
}

@media (width >= 45rem) {
  dialog {
    max-width: 45rem;
  }
}

/* ───── レスポンシブ ───── */

@media (width >= 40rem) {
  main {
    padding: 1rem;
    gap: 0.75rem;
  }
  main>header {
    gap: 1rem;
    margin-bottom: 1rem;
  }
  main>header h1 {
    font-size: 1.25rem;
  }
  td {
    padding: 0.375rem;
  }
  td>time {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
  }
  td>article {
    font-size: 0.7rem;
    padding: 1px 4px;
  }
}