/* ---------------------------
   Base Reset + Variables
----------------------------*/
:root{
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --link: #2563eb;
  --link-visited: #7c3aed;
  --border: #e5e7eb;
  --card: #ffffff;
  --accent: #10b981;
  --danger: #ef4444;
  --warn: #f59e0b;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --maxw: 920px;
}
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #0b0f14;
    --text: #e5e7eb;
    --muted: #9aa4b2;
    --link: #60a5fa;
    --link-visited: #c084fc;
    --border: #222b36;
    --card: #0f151c;
    --accent: #34d399;
    --danger: #f87171;
    --warn: #fbbf24;
    --shadow: 0 8px 28px rgba(0,0,0,.35);
  }
}

/* Reset */
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Sans",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a:visited{color:var(--link-visited)}
button,input,select,textarea{font:inherit}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* Layout */
.container{max-width:var(--maxw);margin:0 auto;padding:24px}
header,footer{border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(0,0,0,.02),transparent)}
header .container,footer .container{display:flex;align-items:center;gap:16px;justify-content:space-between}
header h1{font-size:22px;margin:0}
footer{border-top:1px solid var(--border);border-bottom:none}
footer small{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}

/* Cards */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
  transition:transform .08s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card h2{margin:.2em 0 .4em;font-size:18px}
.muted{color:var(--muted)}
hr{border:none;border-top:1px solid var(--border);margin:24px 0}

/* Nav */
nav a{display:inline-block;padding:8px 10px;border-radius:10px;border:1px solid transparent}
nav a:hover{background:rgba(99,102,241,.08);text-decoration:none}
nav a.active{border-color:var(--border);background:rgba(0,0,0,.03)}

/* Typography */
h1,h2,h3{line-height:1.3}
h1{font-size:28px;margin:.6em 0}
h2{font-size:22px;margin:1.2em 0 .4em}
h3{font-size:18px;margin:1.1em 0 .3em}
p{margin:.6em 0}
ul,ol{padding-left:1.3rem;margin:.5em 0}
strong{font-weight:700}
.badge{display:inline-block;padding:.2em .55em;border:1px solid var(--border);border-radius:999px;font-size:.85em;background:var(--card);color:var(--muted)}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0 18px;font-size:.95rem}
th,td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
thead th{text-align:left;background:linear-gradient(180deg,rgba(0,0,0,.03),transparent)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);box-shadow:var(--shadow);text-decoration:none;
}
.btn:hover{filter:brightness(1.04);text-decoration:none}
.btn.primary{background:var(--accent);color:#04210f;border-color:transparent}
.btn.warn{background:var(--warn);color:#2b1a00;border-color:transparent}
.btn.danger{background:var(--danger);color:#2b0b0b;border-color:transparent}

/* Forms */
input[type="text"],input[type="email"],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text)
}
textarea{min-height:120px;resize:vertical}
label{display:block;margin:.6em 0 .2em}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* Code blocks */
pre{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;overflow:auto}
code{background:rgba(125,125,125,.08);padding:.15em .35em;border-radius:8px}

/* Utilities */
.center{text-align:center}
.right{text-align:right}
.max{max-width:var(--maxw)}
.spacer{height:24px}

/* Focus */
:focus-visible{outline:3px solid #60a5fa;outline-offset:2px;border-radius:10px}

/* Print */
@media print{
  header,nav,footer{display:none}
  .container{max-width:100%;padding:0}
  a{text-decoration:underline}
}