:root{
  --fg:#1e2328; --muted:#6b7280; --line:#e3e6ea; --bg:#f6f7f9;
  --accent:#2b6cb0; --accent-d:#245a95; --danger:#c0392b; --ok:#2f855a;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  line-height:1.6; font-size:15px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px; margin:0 auto; padding:16px}

/* ヘッダー */
.site-head{background:#fff; border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px}
.site-head .brand{font-weight:700; font-size:18px; color:var(--fg)}
.site-head nav a{margin-left:14px; font-size:14px}

/* ボタン */
.btn{
  display:inline-block; padding:9px 16px; border-radius:var(--radius);
  background:var(--accent); color:#fff; border:0; cursor:pointer;
  font-size:15px; text-align:center;
}
.btn:hover{background:var(--accent-d); text-decoration:none}
.btn.sub{background:#fff; color:var(--accent); border:1px solid var(--accent)}
.btn.ghost{background:#fff; color:var(--fg); border:1px solid var(--line)}
.btn.danger{background:var(--danger)}
.btn.sm{padding:5px 10px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* カード＆グリッド */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.card .thumb{aspect-ratio:1/1; background:#eef1f4; display:flex; align-items:center; justify-content:center; color:#aab2bd; font-size:13px}
.card .thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:10px 12px}
.card .name{font-weight:600; font-size:14px; margin:0 0 4px}
.card .price{font-weight:700}
.card .soldout{color:var(--danger); font-size:13px; font-weight:600}

/* 管理テーブル */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px}
table.list{width:100%; border-collapse:collapse; font-size:14px}
table.list th,table.list td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
table.list th{background:#fafbfc; font-weight:600; white-space:nowrap}
table.list td.num,table.list th.num{text-align:right; white-space:nowrap}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600}
.tag.on{background:#e6f4ec; color:var(--ok)}
.tag.off{background:#f0f1f3; color:var(--muted)}
.tag.low{background:#fdecea; color:var(--danger)}

/* フォーム */
label.field{display:block; margin:0 0 12px}
label.field > span{display:block; font-size:13px; color:var(--muted); margin-bottom:4px}
input[type=text],input[type=number],input[type=password],input[type=email],textarea,select{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:15px; font-family:inherit;
}
textarea{min-height:90px; resize:vertical}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > *{flex:1 1 160px}

/* お知らせ */
.flash{padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px}
.flash.ok{background:#e6f4ec; color:var(--ok); border:1px solid #b7e0c6}
.flash.err{background:#fdecea; color:var(--danger); border:1px solid #f3c1bb}
.muted{color:var(--muted)}
h1{font-size:22px; margin:4px 0 16px}
h2{font-size:17px; margin:0 0 12px}

/* ログイン */
.login-box{max-width:360px; margin:8vh auto}

@media(max-width:600px){
  .site-head .wrap{flex-wrap:wrap}
  table.list{font-size:13px}
  table.list th,table.list td{padding:6px 6px}
  .hide-sp{display:none}
}