:root{
  --bg:#f6f7fb;
  --paper:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --shadow2:0 6px 18px rgba(17,24,39,.06);
  --radius:16px;
  --radius2:14px;
  --link:#2563eb;
  --linkH:#1d4ed8;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body.op{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  line-height:1.75;
}

/* header */
.op-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.op-header__inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.op-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.op-brand__logo{ display:block; text-decoration:none; color:inherit; }
.op-logo{ border-radius:12px; display:block; }
.op-brand__meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.op-site{ font-weight:800; letter-spacing:.02em; line-height:1.15; font-size:1.1rem; }
.op-page{ color:var(--muted); font-size:.92rem; display:flex; flex-wrap:wrap; gap:10px; }
.op-canonical{ color:var(--muted); text-decoration:none; }
.op-canonical:hover{ text-decoration:underline; }

.op-actions{ display:flex; align-items:center; gap:10px; }
.op-menuBtn{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:18px;
}

.op-nav{
  max-width:1200px;
  margin:0 auto;
  padding:8px 14px 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.op-nav__item{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  color:var(--link);
  font-size:.92rem;
}
.op-nav__item:hover{
  color:var(--linkH);
  text-decoration:none;
  box-shadow:var(--shadow2);
}

/* contents layout (A): left=LeftBar, right=body */
.op-contents{
  max-width:1200px;
  margin:14px auto;
  padding:0 14px;
  display:grid;
  /* RightBar width: about 2/3 of previous (340px -> ~227px) */
  grid-template-columns: 228px 1fr 228px;
  gap:14px;
  align-items:start;
}
.op-contents--noLeft{ grid-template-columns: 1fr 228px; }
.op-contents--noRight{ grid-template-columns: 228px 1fr; }
.op-contents--noLeft.op-contents--noRight{ grid-template-columns: 1fr; }
.op-left,.op-body,.op-right{ min-width:0; }

.op-paper {
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:3px 20px;
}


/* op-paper first content alignment */
.op-paper > :first-child { margin-top:0; }
.op-paper > :first-child > :first-child { margin-top:0; }
.op-paper h1:first-child,
.op-paper h2:first-child,
.op-paper h3:first-child,
.op-paper h4:first-child,
.op-paper h5:first-child,
.op-paper h6:first-child { margin-top:0; }
.op-paper .contents > :first-child { margin-top:0; }
.op-paper .contents > :first-child > :first-child { margin-top:0; }
.op-paper > :first-child{ margin-top:0; }


/* cards */
.op-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.op-card--sticky{ position:sticky; top:120px; }
.op-card__head{
  padding:10px 12px;
  font-weight:800;
  background:#f9fafb;
  border-bottom:1px solid var(--border);
}
.op-card__body{ padding:12px 12px; }

/* LeftBar (and legacy RightBar) content tweaks */
#leftbar h2,#leftbar h3,#leftbar h4,
#rightbar h2,#rightbar h3,#rightbar h4{ margin:.6em 0 .4em; line-height:1.3; }
#leftbar ul,#rightbar ul{ margin:.4em 0 .6em 1.2em; padding:0; }
#leftbar li,#rightbar li{ margin:.15em 0; }


/* Hide heading anchor links (†) */
h1 a.anchor,h2 a.anchor,h3 a.anchor,h4 a.anchor,h5 a.anchor,h6 a.anchor,
h1 a.anchor_super,h2 a.anchor_super,h3 a.anchor_super,h4 a.anchor_super,h5 a.anchor_super,h6 a.anchor_super{ display:none; }

/* body content basics */
#body a{ color:var(--link); text-decoration:none; }
#body a:hover{ color:var(--linkH); text-decoration:underline; }
#body h2{
  margin:1.2em 0 .6em;
  font-size:1.25rem;
  padding-left:12px;
  border-left:6px solid #7c3aed;
}
#body h3{
  margin:1.1em 0 .5em;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
#body table{ margin:1em 0; border-collapse:collapse; width:100%; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
#body th,#body td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; text-align:left; }
#body th{ background:#f3f4f6; }
#body tr:last-child td{ border-bottom:0; }
#body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace; background:#f3f4f6; padding:.15em .35em; border-radius:6px; }
#body pre{ background:#0b1220; color:#e5e7eb; padding:14px 16px; border-radius:12px; overflow:auto; box-shadow:0 10px 26px rgba(0,0,0,.14); }
#body pre code{ background:transparent; padding:0; }

/* default footer/toolbar area keep but slightly modernize */
#toolbar{
  max-width:1200px;
  margin:10px auto 0;
  padding:0 14px;
}
#lastmodified, #related, #footer{
  max-width:1200px;
  margin:0 auto;
  padding-top:    0px;
  padding-bottom: 0px;
  padding-left:  14px;
  padding-right: 14px;
  color:var(--muted);
}

/* Drawer */
.op-drawer{ display:none; }
body.op-drawerOpen .op-drawer{ display:block; }
.op-drawer__backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.22);
  z-index:80;
}
.op-drawer__panel{
  position:fixed;
  top:0; right:0;
  width:min(86vw, 360px);
  height:100vh;
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:81;
  display:flex;
  flex-direction:column;
}
.op-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  background:#f9fafb;
}
.op-drawer__title{ font-weight:800; }
.op-drawer__close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:18px;
}
.op-drawer__body{
  padding:12px;
  overflow:auto;
}

/* Hide menubar if any other skin outputs it (safety) */
#menubar{ display:none !important; }

@media (max-width: 860px){
  .op-contents{ grid-template-columns: 1fr; }
  .op-card--sticky{ position:static; }
  /* On small screens, show rightbar above body naturally */
}


/* Editor (edit) */
.op-edit select,
.op-edit input[type="password"],
.op-edit input[type="text"],
.op-edit input[type="url"],
.op-edit textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}

.op-edit .edit_form,
.edit_form.op-edit{
  width:100%;
}

.op-edit form._plugin_edit_edit_form{
  margin:0;
}

.op-edit select{
  width:min(560px, 100%);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.op-edit input[type="submit"],
.op-edit input[type="button"],
.op-edit button{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--link);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.op-edit input[type="submit"]:hover,
.op-edit button:hover{
  box-shadow:var(--shadow2);
  color:var(--linkH);
}

.op-edit textarea[name="msg"]{
  width:100% !important;
  min-height: clamp(420px, 62vh, 860px);
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fbfbfd;
  line-height:1.6;
  font-size:14px;
  resize:vertical;
}

.op-edit .op-edit-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid var(--border);
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
}
.op-edit .op-edit-actions__left,
.op-edit .op-edit-actions__right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Checkbox labels (add_top / notimestamp) */
.op-edit .op-edit-actions__right label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--muted);
  font-size:.92rem;
}
.op-edit .op-edit-actions__right input[type="checkbox"]{
  width:18px;
  height:18px;
}

@media (max-width: 840px){
  .op-contents{ grid-template-columns: 1fr; }
  .op-card--sticky{ position:static; }
  .op-edit textarea[name="msg"]{ min-height: clamp(380px, 58vh, 760px); }
  .op-edit .op-edit-actions{ gap:8px; }
  .op-edit input[type="submit"]{ padding:10px 12px; }
}


/* heading visual alignment tweak */
.op-paper h1,
.op-paper h2 {
  line-height: 1.2;
}

.op-paper h2 {
  font-size: 1.15em;
}