:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.inquiry-shell {
  width: min(960px, calc(100% - 40px));
  margin: 40px auto;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px #17203314;
}
form { display: grid; gap: 14px; margin: 20px 0; }
label, fieldset { display: grid; gap: 7px; }
input, select, button { width: 100%; max-width: 100%; font: inherit; padding: 11px 12px; border: 1px solid #cbd3e1; border-radius: 8px; }
button { cursor: pointer; border: 0; color: #fff; background: #185adb; }
button:hover { background: #124bbd; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #185adb;
  outline-offset: 2px;
}
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.toolbar { display: flex; justify-content: flex-end; }
.message-list { display: grid; gap: 12px; }
.message-list article { padding: 16px; border: 1px solid #dce2ec; border-radius: 10px; }
.message-list button { margin-right: 8px; }
footer { padding: 24px; color: #556070; text-align: center; }
footer a { color: inherit; }
.hint { color: #556070; font-size: .92rem; }
@media (max-width: 640px) {
  .inquiry-shell {
    width: calc(100% - 32px);
    margin: 16px auto;
    padding: 20px;
  }
  h1 {
    font-size: 32px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}