/* 最小プレースホルダCSS（フロント担当がモックv2.4のCSSを流用して置き換える）。
   紺ヘッダー配色 #1F395E はモックと同一。 */
:root { --navy: #1F395E; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Hiragino Sans", "Meiryo", sans-serif; color: #222; }
.app-header {
  background: var(--navy); color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
}
.app-header__version { font-size: 12px; opacity: .8; margin-left: 8px; }
.app-header__user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.app-header__link { color: #cdd8ea; text-decoration: none; }
.app-header__logout { background: transparent; color: #fff; border: 1px solid #ffffff66; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.app-main { padding: 16px; max-width: 1200px; margin: 0 auto; }
.login-wrap { max-width: 360px; margin: 48px auto; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.login-form input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.login-form button { background: var(--navy); color: #fff; border: 0; border-radius: 4px; padding: 10px; cursor: pointer; }
.login-error { color: #b00020; background: #fdecef; padding: 8px 12px; border-radius: 4px; }

/* ── v1.1 スマホ対応（max-width:640px・PC>640pxは不変） ── */
@media (max-width: 640px) {
  .app-header {
    flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
    padding: 10px 12px;
  }
  .app-header__title { font-size: 15px; }
  .app-header__version { display: none; }   /* 版表記は省略 */
  .app-header__user { flex-wrap: wrap; gap: 8px 12px; font-size: 13px; width: 100%; }
  .app-header__logout { margin-left: auto; }
  .app-main { padding: 12px; }
  .login-wrap { margin: 32px auto; padding: 0 16px; }
  .login-form input { width: 100%; }
}