:root {
  --bg: #0f0f13;
  --bg2: #17171f;
  --bg3: #1e1e2a;
  --border: #2a2a3a;
  --accent: #7c5cf0;
  --text: #e8e8ee;
  --text2: #9a9ab0;
  --r: 10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #f8fafc; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI","Hiragino Sans",sans-serif;
  font-size: 14px; line-height: 1.6;
  max-width: 1200px; margin: 0 auto; padding: 20px;
  min-height: 100vh; overflow-x: hidden;
}
header {
  background: #ffffff; border: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 20px; border-radius: var(--r);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
header h1 { font-size: 1.25em; font-weight: 700; color: #0f172a; }
header h1 em { color: var(--accent); font-style: normal; }
header small { font-size: 0.78em; color: var(--text2); }
.layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: auto 1fr;
  height: calc(100vh - 100px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
}
.panel-json {
  grid-column: 1; grid-row: 1;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--bg3);
}
.panel-json textarea {
  flex: 1; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); padding: 8px;
  min-height: 80px; resize: vertical;
}
.panel-json textarea:focus { border-color: var(--accent); outline: none; }
.panel-json textarea::placeholder { color: var(--text2); }
.panel-tags { grid-column: 1; grid-row: 2; overflow: auto; padding: 12px; background: var(--bg2); }
.panel-out {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border); background: var(--bg2);
}
.tag-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.out-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; justify-content: space-between; }
.out-body { flex: 1; overflow: auto; padding: 12px; }
.out-block label { display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 4px; color: var(--text2); }
.out-block textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r); padding: 8px; font-family: monospace; font-size: 13px; resize: vertical; background: var(--bg3); color: var(--text); }
.out-block textarea:focus { border-color: var(--accent); outline: none; }
@media (max-width: 680px) {
  body { padding: 10px; }
 .layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; height: auto; }
 .panel-out { grid-column: 1; grid-row: 3; min-height: 320px; border-left: none; border-top: 1px solid var(--border); }
 .panel-tags { grid-row: 2; max-height: 55vh; }
}

/* --- ヘッダー明るい色修正 (2026-10-10) --- */
header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 20px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}
header h1 {
    color: #0f172a !important;
    font-size: 1.25em !important;
    font-weight: 700 !important;
}
header small {
    color: #64748b !important;
}

/* 白ヘッダー固定（2026-11-03 統合版） */
header,
.header,
#common-nav-container,
#common-nav-container header,
#common-nav-container nav {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
header h1 { color:#0f172a !important; }
header small { color:#64748b !important; }

/* =====================================================================
 * 白ヘッダー固定 ＆ 文字色可視化 (2026-11-03)
 * ===================================================================== */
header, .header, .site-header, #common-nav-container, #common-nav-container header, #common-nav-container nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}
header h1, header h2, .header h1, #common-nav-container h1 {
    color: #0f172a !important;
}
header a, .header a, #common-nav-container a {
    color: #334155 !important;
}
header a:hover, #common-nav-container a:hover {
    color: #0284c7 !important;
    background: #f1f5f9 !important;
}
header small, header span {
    color: #64748b !important;
}