:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --radius:18px;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height:1.5;
}

/* 重要：日本語の「1文字縦折り」を防ぐ */
body, input, button, select, textarea{
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:100%;
  max-width: 1120px;           /* ← ここで全体の基準幅を広げる */
  margin: 0 auto;
  padding: 22px 18px 40px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: 20px 20px;
  box-shadow: 0 10px 30px rgba(17,24,39,0.06);
}

/* ヘッダ */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brand h1{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:0.02em;
}

/* 上部リンク（管理トップのメニューなど） */
.links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
}

.links a{
  display:inline-block;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--primary);
  font-size:14px;
  line-height:1;
  white-space:nowrap;          /* ← 重要：リンクが縦に崩れるのを防ぐ */
}

.links a:hover{
  background:rgba(37,99,235,0.06);
  text-decoration:none;
}

/* ボタン類 */
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}

.btn:hover{ background:var(--primary2); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }

.btnGhost{
  display:inline-block;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}

.btnGhost:hover{
  background:rgba(17,24,39,0.03);
}

/* 入力 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
  color:var(--text);
}

textarea{ min-height:90px; }

/* アラート */
.alert{
  margin-top:12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

.alert.ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.alert.error{
  border-color:#fecaca;
  background:#fef2f2;
}

/* テーブル */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  background:#fff;
}

th, td{
  border:1px solid var(--border);
  padding:10px 10px;
  font-size:14px;
  vertical-align:top;
}

th{
  background:#f6f6f6;
  text-align:left;
  font-weight:700;
}

/* 受注一覧などの「箱」 */
.box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-top:12px;
  background:#fff;
}

/* 画面が狭い時だけ最適化 */
@media (max-width: 640px){
  .container{
    padding: 16px 12px 30px;
  }
  .card{
    padding: 14px 14px;
    border-radius: 16px;
  }
  .brand h1{
    font-size:18px;
  }
  .links a{
    padding:8px 10px;
    font-size:13px;
  }
  th, td{
    font-size:13px;
    padding:8px 8px;
  }
}