/* static/honkago-ui.css */
:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#f4f4f5;
  --muted-fg:#6b7280;
  --border:#e5e7eb;
  --primary:#111827;
  --primary-fg:#ffffff;
  --radius:12px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.45;
}

a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}

.container{max-width:920px;margin:0 auto;padding:0 16px;}
.content-narrow{max-width:680px;}

.site-header{
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky; top:0; z-index:10;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:56px;}
.brand{font-weight:800;letter-spacing:.2px;}
.navlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.site-main{padding:24px 0 56px;}
.site-footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted-fg);font-size:13px;}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}

h1{font-size:24px;margin:0 0 16px;}
h2{font-size:18px;margin:0 0 12px;}
h3{font-size:16px;margin:0 0 8px;}

.muted,.text-muted-foreground{color:var(--muted-fg);font-size:14px;}

.box, .card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
  padding:16px;
}

.alert{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--muted);
  font-size:14px;
}
.alert-warn{background:#fef3c7;border-color:#fcd34d;}
.alert-info{background:#dbeafe;border-color:#93c5fd;}
.alert-muted{background:var(--muted);}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:14px;
  background:#fff;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:#9ca3af;
  box-shadow:0 0 0 3px rgba(156,163,175,.25);
}

.btn, button, input[type="submit"]{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  background:var(--primary);
  color:var(--primary-fg);
  cursor:pointer;
}
.btn:hover, button:hover, input[type="submit"]:hover{opacity:.92;}
.btn:disabled, button:disabled{opacity:.55;cursor:not-allowed;}
.btn.outline, .btn.secondary{
  background:#fff;
  color:var(--fg);
  border-color:var(--border);
}
.btn.outline:hover{background:var(--muted);}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px;}
.btn.lg{padding:12px 16px;font-size:16px;border-radius:12px;}
.btn.block{width:100%;}

.row{display:flex;gap:10px;align-items:center;}
.row.wrap{flex-wrap:wrap;}
.row.between{justify-content:space-between;}
.stack-2>*+*{margin-top:8px;}
.stack-3>*+*{margin-top:12px;}
.stack-4>*+*{margin-top:16px;}

table{width:100%;border-collapse:collapse;}
th, td{padding:12px 12px;border-top:1px solid var(--border);vertical-align:top;}
thead th{background:var(--muted);border-top:none;font-size:13px;color:var(--muted-fg);text-align:left;}
tr:hover td{background:rgba(244,244,245,.6);}

.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;background:var(--muted);}
.badge.blue{background:#dbeafe;color:#1e3a8a;}

.auth-shell{max-width:420px;margin:48px auto;}

.prose p{margin:0 0 12px;}
.prose ul, .prose ol{margin:0 0 12px 20px;}
.prose h2{margin-top:18px;}
.prose h3{margin-top:14px;}

/* --- Honkago header/nav --- */
.hk-nav {
  border-bottom: 1px solid #eee;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
}

.hk-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hk-nav__brand {
  font-weight: 700;
  text-decoration: none;
}

.hk-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons (safe: class限定。既存 .btn には触らない) */
.hk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.hk-btn:hover { opacity: 0.9; }

.hk-btn--outline {
  background: #fff;
  color: #111;
  border-color: #ddd;
}

/* Auth pages helper (login/signup/forgot/reset) */
.auth-shell {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px;
}

.box {
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  padding: 18px 18px;
}

/* lightweight stacks/rows */
.stack-2 > * + * { margin-top: 8px; }
.stack-4 > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

/* alerts (if not already provided) */
.alert { border:1px solid #eee; border-radius:12px; padding:10px 12px; background:#fafafa; }
.alert-warn { border-color:#f2c0c0; background:#fff5f5; }