:root{
  --bg:#ffffff; --bg-alpha:0.88; --text:#0f1115; --muted:#6b7280; --border:#e5e7eb; --ring:#93c5fd;
  --container:1040px; --pad:14px; --rad:12px; --shadow:0 6px 24px rgba(0,0,0,.06);
}
html,body{font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif}
h1,h2,h3{font-weight:700}
header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,var(--bg-alpha));border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.03)}
/* 上段は空でも段差が出ないよう薄く余白 */
.hd_upper{max-width:var(--container);margin:0 auto;padding:6px 16px;min-height:10px}

/* 下段：ナビ＋ツールバーを一行に整列 */
.hd_bottom{max-width:var(--container);margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 16px 12px}
.hd_bottom nav{flex:1}
.hd_bottom nav ul{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.hd_bottom nav a{position:relative;display:inline-flex;align-items:center;padding:8px 8px;border-radius:10px;
  font-weight:600;letter-spacing:.01em;color:var(--text);text-decoration:none;transition:opacity .2s ease}
.hd_bottom nav a::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;opacity:.55;transition:transform .22s ease}
.hd_bottom nav a:hover::after,.hd_bottom nav a:focus-visible::after{transform:scaleX(1)}
.hd_bottom nav a:hover{opacity:.9}
/* show underline for active route */
.hd_bottom nav a.active::after{transform:scaleX(1)}

/* ツールバー：/blog と Compose を控えめなボタンに */
.toolbar{display:flex;align-items:center;gap:10px;font-size:14px}
.toolbar strong a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--rad);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03);text-decoration:none}
.toolbar strong a:hover{box-shadow:var(--shadow)}
#composeLink{padding:8px 10px;border-radius:var(--rad);background:#111;color:#fff;text-decoration:none}
#composeLink:hover{filter:brightness(.95)}

/* アクセシビリティ（タブ移動時の可視リング） */
a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:10px}

/* レスポンシブ：幅が狭い時は間隔を詰めて /blog を隠す */
/* Two-line balanced nav on medium screens: 5 + 4 (centered) */
@media (max-width:900px){
  .hd_bottom nav ul{flex-wrap:wrap;justify-content:center;column-gap:16px;row-gap:6px}
  .hd_bottom nav ul li{flex:0 0 20%;display:flex;justify-content:center}
}

@media (max-width:640px){
  .hd_bottom{gap:4px;padding:8px 12px}
  .hd_bottom nav ul{gap:14px}
  .toolbar strong{display:none}
}

/* 任意：ダークモード対応 *//*
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0e13; --bg-alpha:.82; --text:#e9edf5; --muted:#a3acb8; --border:#212733; --ring:#60a5fa}
  header{background:rgba(11,14,19,var(--bg-alpha));border-bottom:1px solid var(--border);box-shadow:none}
  .toolbar strong a{background:#11151c;border-color:var(--border)}
  #composeLink{background:#e5e7eb;color:#0b0e13}
  /* Cards and panels feel grounded (no ghostly float) *//*
  .card{background:#11151c;border-color:#1b2130;box-shadow:none}
}*/

/* Content helpers */
main section img{max-width: calc(100% - 2rem);}
/* Centered content container */
.center{max-width:1000px;margin:0 auto;padding:1rem}
/* Center hero image on top page */
main section.center > img{display:block;margin:0 auto}

/* Footer */
.ft_bottom{display:grid}
.ft_bottom p{justify-self:center}

/* Components & utilities */
.card{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px;margin:12px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.muted{color:#666;font-size:12px}
.post h1,.post h2,.post h3{margin-top:1.2em}
.post h1{font-size: 2rem;}
.toolbar{display:flex;gap:8px;align-items:center}
button,input,textarea,select{font:inherit;padding:8px 10px;border:1px solid #ddd;border-radius:10px;background:#fff}
textarea{width:100%;height:240px}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:880px){.grid{grid-template-columns:1fr 1fr}}

/* Fine-tuning */
li p{color:gray;font-size:.6rem;margin-top:0}

/* Blog tags */
.tag{display:inline-block;margin-right:6px;margin-bottom:4px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted)}

/* Forms */
.form{display:grid;gap:12px}
.form label{display:block}
.form label > input:not([type="checkbox"]):not([type="radio"]),
.form label > textarea,
.form label > select{width:100%;margin-top:6px}
.form--2col{grid-template-columns:1fr}
@media (min-width:760px){.form--2col{grid-template-columns:1fr}}
.form .span-2{grid-column:1/-1}

/* Badges */
.badge{display:inline-block;border-radius:8px;padding:2px 6px;font-size:11px;line-height:1;color:#fff;margin-left:8px}
.badge-required{background:#dc2626}
.badge-optional{background:#2563eb}
.is-invalid{border-color:#dc2626 !important; outline-color:#dc2626 !important}
.label-invalid{color:#b91c1c}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);text-decoration:none;cursor:pointer;transition:background .15s ease, color .15s ease, border-color .15s ease}
.btn:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.btn-primary{background:#111;color:#fff;border-color:#111}
.btn-primary:hover{background:#2563eb;border-color:#2563eb}
.btn-google{background:#fff;border-color:#ddd}
.btn-google:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.btn-google svg{width:18px;height:18px}
.icon{display:inline-block;vertical-align:middle}
.icon-google{width:18px;height:18px}

/* Label badges via attribute (reduce markup noise) */
.label-badge{position:relative;padding-right:72px}
.label-badge[data-badge]:after{position:absolute;right:0;top:0;transform:translateY(0);content:"";display:inline-block;border-radius:8px;padding:2px 6px;font-size:11px;line-height:1;color:#fff}
.label-badge[data-badge="required"]:after{content:"必須";background:#dc2626}
.label-badge[data-badge="optional"]:after{content:"任意";background:#2563eb}