:root{
  --bg:#0b1220;
  --card:#0f1b33;
  --card2:#0c1730;
  --text:#e7eefc;
  --muted:#9fb0d3;

  --primary:#60a5fa;
  --accent:#f59e0b;
  --good:#22c55e;
  --bad:#ef4444;

  --border:rgba(255,255,255,.12);
  --radius:16px;
  --shadow:0 18px 44px rgba(0,0,0,.35);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, sans-serif;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(245,158,11,.16), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
}

a{ color:inherit; text-decoration:none; }
code{ font-family:var(--mono); }

.wrap{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
}

.top{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(11,18,32,.92), rgba(11,18,32,.55));
  border-bottom:1px solid var(--border);
}

.top__row{
  padding:16px 0;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}
.brand__badge{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(245,158,11,.20));
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  font-weight:800;
  letter-spacing:.02em;
}
.brand__text h1{
  margin:0;
  font-size:18px;
  line-height:1.2;
}
.brand__text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
}

.top__nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-size:13px;
}
.chip:hover{ border-color: rgba(96,165,250,.45); }

.card{
  margin:18px 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__head{
  padding:16px 16px 0;
}
.card__head h2{
  margin:0;
  font-size:18px;
}
.card__head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}
.card__body{
  padding:16px;
}

.prose h3{
  margin:14px 0 6px;
  font-size:15px;
}
.prose p{ margin:10px 0; }
.prose ul{ margin:10px 0 0; padding-left:1.2em; }
.prose li{ margin:6px 0; }

.muted{ color:var(--muted); }
.mt8{ margin-top:8px; }
.mt16{ margin-top:16px; }

.btnrow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(96,165,250,.55);
  background: rgba(96,165,250,.14);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{
  border-color: rgba(96,165,250,.9);
  background: rgba(96,165,250,.18);
}
.btn.ghost{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-weight:700;
}
.btn.ghost:hover{ border-color: rgba(245,158,11,.55); }

.code{
  margin:10px 0 0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.25);
  overflow:auto;
  max-height:320px;
}
.code code{
  font-family:var(--mono);
  font-size:12.5px;
  color:#dbeafe;
  white-space:pre;
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .grid2{ grid-template-columns:1fr; }
}

.mini{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:12px;
}
.mini__title{
  font-weight:800;
  font-size:13px;
  color:var(--white2, #dbeafe);
  margin-bottom:8px;
}

.callout{
  margin:14px 0 0;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
}
.callout.warn{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

.alert{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.alert.good{
  border-color: rgba(34,197,94,.5);
  background: rgba(34,197,94,.12);
}
.alert.bad{
  border-color: rgba(239,68,68,.5);
  background: rgba(239,68,68,.12);
}

.import{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px;
}
.import__row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.file{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1;
  min-width:280px;
}
.file input[type="file"]{ display:none; }
.file__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-weight:800;
  cursor:pointer;
}
.file__btn:hover{ border-color: rgba(96,165,250,.55); }
.file__name{
  color:var(--muted);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hint{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12.5px;
}

.tablewrap{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:auto;
  background: rgba(0,0,0,.18);
}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 10px;
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
.table thead th{
  position:sticky;
  top:0;
  background: rgba(15,27,51,.95);
  border-bottom:1px solid rgba(255,255,255,.14);
  z-index:1;
}
.table td{
  color:#eaf2ff;
}
.table tbody tr:hover td{
  background: rgba(96,165,250,.07);
}

.details{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px 12px;
}
.details summary{
  cursor:pointer;
  font-weight:800;
}

.foot{
  margin:26px 0 40px;
  padding:16px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
.foot__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .foot__grid{ grid-template-columns:1fr; }
}
.foot__title{
  font-weight:900;
  margin-bottom:6px;
}
.foot__list{
  margin:0;
  padding-left:1.2em;
  color:var(--muted);
}
.foot__copy{
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}


/* =========================
  Footer (SunStripe / Programming Lab)
  対象HTML:
  <footer class="footer">
    <div class="foot__copy">...</div>
    <nav class="foot__nav"><ul>...</ul></nav>
  </footer>
========================= */

footer{
  margin-top:18px;
  padding:18px 14px;
  border:1px solid rgba(33,115,70,.22);
  border-radius:14px;
  background:
    radial-gradient(900px 200px at 20% 0%, rgba(33,115,70,.18), transparent 65%),
    radial-gradient(700px 200px at 85% 10%, rgba(15,123,108,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
  box-shadow:0 14px 34px rgba(0,0,0,.25);
  color:var(--muted);
}

.foot__copy{
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.foot__copy a{
  color:var(--excelWhite2, #d9ffe9);
  text-decoration:none;
  font-weight:800;
  border-bottom:1px solid rgba(33,115,70,.35);
}

.foot__copy a:hover{
  filter:brightness(1.08);
  border-bottom-color:rgba(33,115,70,.60);
}

.foot__nav{
  margin-top:12px;
}

.foot__nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.foot__nav li{
  margin:0;
}

/* Excel風リンクチップ */
.foot__nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(33,115,70,.26);
  background:
    linear-gradient(180deg, rgba(33,115,70,.18), rgba(0,0,0,.06));
  color:var(--excelWhite, #f3fff8);
  font-size:12px;
  letter-spacing:.02em;
  text-decoration:none;
  transition:transform .12s ease, filter .12s ease, border-color .12s ease;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  white-space:nowrap;
}

.foot__nav a:hover{
  filter:brightness(1.08);
  border-color:rgba(33,115,70,.55);
  transform:translateY(-1px);
}

.foot__nav a:active{
  transform:translateY(0);
}

/* 今いるページが分かるように（任意：bodyにdata-current="/programming/xlsx/"とか付けると便利） */
/*
body[data-current="/programming/xlsx/"] .foot__nav a[href="/programming/xlsx/"]{
  border-color:rgba(33,115,70,.75);
  background:linear-gradient(180deg, rgba(33,115,70,.40), rgba(33,115,70,.18));
  color:var(--excelWhite2, #d9ffe9);
}
*/

/* スマホで詰まりすぎないように */
@media (max-width:560px){
  footer{
    padding:16px 12px;
  }
  .foot__nav a{
    padding:7px 9px;
    font-size:12px;
  }
}