/* ベースカラー */
:root {
  --base-bg:     #f7f9fc;     /* ページ背景 */
  --panel-bg:    #ffffff;     /* コンテンツ背景 */
  --accent:      #3b6ca8;     /* ボタン等のメイン色：落ち着いた青 */
  --accent-dark: #2e5685;
  --accent-light:#5a84b8;
  --text-main:   #333333;
  --border:      #d0d5dd;
}


/* コンテナ */
.container {
  background: var(--panel-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 共通ボタン */
.btn {
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}
.btn:hover {
  background: var(--accent-dark);
}

/* テーブル */
table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--border);
}
th, td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: center;
}
th {
  background: var(--accent-light);
  color: #fff;
}

body { font-family: system-ui, sans-serif; margin: 0; background: white; }
header { background: #222; color: #fff; padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center; }
header a { color: #fff; margin-left: 1rem; text-decoration: none; }
.flash { color: red; margin: 1rem; }
main { padding: 1rem; }

form label { display:block; margin:0.5rem 0; }
button { padding:0.4rem 0.8rem; border:none; background:#333; color:#fff; border-radius:4px; cursor:pointer; }
button:hover { background:#555; }

.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(600px,1fr)); gap:1rem; }
.card { background:#fff; border-radius:6px; padding:0.5rem; box-shadow:0 2px 5px rgba(0,0,0,.1); }
.card .images { display:flex; gap:4px; margin-bottom:0.5rem; }
.card img { width:50%; object-fit:contain; }

.preview img { max-width:45%; margin:0 5px; border:1px solid #ccc; }
.zoom-controls { margin-top:0.5rem; }
/* === ログインページ専用 === */
.login-body {
    /* 画面いっぱいに伸ばして Flex で中央寄せ */
    display: flex;
    justify-content: center;  /* 横方向センター */
    align-items: center;      /* 縦方向センター */
    min-height: 100vh;
}

.login-container {
    width: 320px;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    text-align: center;
}

.login-container h1 {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    color: #333;
}

.input-text {
    width: 100%;
    padding: 0.7rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.btn {
    width: 100%;
    padding: 0.7rem;
    background: #5563DE;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.btn:hover {
    background: #3340b3;
}

.flash {
    color: red;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}