/* ==== セキュリティ実践ラボ 専用スタイル ==== */

:root{
  --bg:#0f1220;
  --panel:#171a2a;
  --card:#1d2135;
  --accent:#7aa2ff;
  --ok:#28c76f;
  --warn:#ff9f43;
  --bad:#ea5455;
  --text:#e8ecff;
  --muted:#98a0c6;
  --code:#0b0e1a;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: 'Segoe UI','Hiragino Kaku Gothic ProN',sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% 0%, #141835, #0b0d1a 60%, #070912);
  line-height: 1.8;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.site-header{
  text-align:center;
  margin-bottom: 1.5rem;
}
.site-header h1{
  margin: .2em 0 .2em;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing:.02em;
}
.site-header p{ color: var(--muted); }

.top-nav ul{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; padding:0; margin: 1rem 0 2rem;
}
.top-nav a{
  display:block; padding:.5rem .75rem; border-radius:999px;
  background: var(--panel); color: var(--text); text-decoration:none;
  border:1px solid #232848;
}
.top-nav a:hover{ border-color: var(--accent); }

main section{
  background: var(--card);
  border:1px solid #232848;
  border-radius: 16px;
  padding: 1.2rem 1rem;
  margin: 1.2rem 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

h2{
  margin-top:0;
  color: var(--accent);
  border-bottom: 1px dashed #2a325a;
  padding-bottom:.4rem;
}
h3{ margin: .6rem 0; }

pre{
  background: var(--code);
  color:#e6f0ff;
  padding: .9rem 1rem;
  border-radius: 10px;
  overflow:auto;
  border: 1px solid #222844;
}
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.copy-btn{
  margin-top:.5rem;
  padding:.4rem .8rem;
  background: #11152b;
  border:1px solid #283059;
  border-radius: 8px;
  color:#cfe1ff;
  cursor:pointer;
}
.copy-btn:hover{ border-color: var(--accent); }

.checklist ul{ margin:.5rem 0 0 1rem; }
.checklist li{ margin:.25rem 0; }

.grid-2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

.card{
  background: #171b2d;
  border:1px solid #2a325a;
  border-radius: 12px;
  padding: 1rem;
}

label{
  display:block; margin:.5rem 0 .2rem; color:#ccd6ff;
}
input[type="text"], input[type="password"], textarea{
  width:100%; padding:.6rem .7rem;
  border-radius: 8px;
  border:1px solid #2a325a;
  background:#0e1122; color:#e8ecff;
}
textarea{ resize: vertical; }

button[type="submit"]{
  margin-top:.6rem;
  background: linear-gradient(180deg, #2a55ff, #3040ff);
  color:#fff; border:0; border-radius: 10px; padding:.6rem 1rem; cursor:pointer;
}
button[type="submit"]:hover{ filter:brightness(1.05); }

.result{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:10px;
  background:#0d1a11; border:1px solid #1f3c2a; color:#c9f6d8;
}

.note{ color:#aeb6e9; font-size:.95em; }

#pwd{ margin-top:.2rem; }
.meter{
  height: 10px; background:#0b0e1a; border-radius:999px; border:1px solid #223;
  margin-top:.5rem;
}
.meter span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #ea5455, #ff9f43, #28c76f);
  border-radius:999px; transition: width .25s ease;
}
.hint{ color:#aab3e1; }

.todo{ list-style:none; padding-left:0; }
.todo li{ margin:.4rem 0; }

.kv{ list-style:none; padding-left:0; }
.kv li{ display:flex; gap:.6rem; margin:.3rem 0; }
.kv b{ min-width: 260px; color:#cfe1ff; font-weight:600; }

details{
  background:#11152b; border: 1px solid #2a325a;
  border-radius:12px; padding:.6rem .8rem; margin:.6rem 0;
}

.site-footer{
  margin-top:2rem; text-align:center; color:#a8b0df;
}

/* 固定TOC */
#toc{
  position: fixed; right: 16px; bottom: 16px;
  width: 220px; max-height: 55vh; overflow:auto;
  background:#0b0e1a; border:1px solid #252b4a; border-radius:14px;
  padding:.6rem .7rem; box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
#toc h2{ margin:0 0 .4rem; border:0; color:#cfe1ff; }
#toc ul{ list-style:none; padding-left:0; margin:0; }
#toc li{ margin:.25rem 0; }
#toc a{
  color:#c5d3ff; text-decoration:none; display:block; padding:.2rem .35rem; border-radius:8px;
}
#toc a:hover{ background:#141938; }
@media (max-width: 1000px){
  #toc{ position: static; width:auto; max-height:none; margin: 0 0 1rem; }
}
/* リンク */
#links a{
  color: var(--accent); text-decoration:none; font-weight:600;
}
#links a:hover{ text-decoration:underline; }
footer a{
  color: var(--muted); text-decoration:none; font-size:.9em;
}
footer a:hover{ color: var(--text); text-decoration:underline; }
footer ul {
  list-style:none; padding:0; margin:1rem 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
footer ul li{
  margin:0; padding:.2rem .4rem;
  background: var(--panel); border-radius:8px;
  border:1px solid #232848;
}