/* ie4.me blog styles */
:root{
  --bg:#ffffff; --fg:#1a1a1a; --muted:#6b7280; --line:#e5e7eb;
  --accent:#2563eb; --accent-weak:#eff6ff; --code-bg:#f6f8fa;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.75; font-size:16px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header / footer */
.site-header{border-bottom:1px solid var(--line); padding:22px 0}
.site-header .wrap{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.site-title{font-size:22px; font-weight:700; color:var(--fg)}
.site-title:hover{text-decoration:none; color:var(--accent)}
.site-tagline{color:var(--muted); font-size:13px}
main.wrap{padding-top:32px; padding-bottom:48px; min-height:60vh}
.site-footer{border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding:24px 0}
.site-footer a{color:var(--muted)}

/* post list */
.post-list{list-style:none; margin:0; padding:0}
.post-item{padding:18px 0; border-bottom:1px solid var(--line)}
.post-item-title{margin:4px 0 0; font-size:20px; line-height:1.4}
.post-meta{color:var(--muted); font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.tag{background:var(--accent-weak); color:var(--accent); border-radius:10px; padding:1px 9px; font-size:12px}
.pager{display:flex; justify-content:space-between; align-items:center; margin-top:28px; color:var(--muted)}
.empty-state{color:var(--muted); text-align:center; padding:48px 0}

/* single post */
.post-header{margin-bottom:28px}
.post-title{font-size:30px; line-height:1.3; margin:8px 0 12px}
.draft-badge{display:inline-block; background:#fef3c7; color:#92400e; font-size:12px; padding:2px 10px; border-radius:10px; margin:0 0 6px}
.post-nav{margin-top:40px; padding-top:20px; border-top:1px solid var(--line)}

/* rendered markdown */
.post-body{font-size:16.5px}
.post-body h1,.post-body h2,.post-body h3,.post-body h4{line-height:1.35; margin:1.6em 0 .6em; font-weight:700}
.post-body h1{font-size:26px} .post-body h2{font-size:22px; border-bottom:1px solid var(--line); padding-bottom:.3em}
.post-body h3{font-size:19px} .post-body h4{font-size:17px}
.post-body p{margin:1em 0}
.post-body img{max-width:100%; height:auto; border-radius:6px}
.post-body a{text-decoration:underline}
.post-body ul,.post-body ol{padding-left:1.6em; margin:1em 0}
.post-body li{margin:.3em 0}
.post-body blockquote{margin:1.2em 0; padding:.4em 1em; border-left:4px solid var(--line); color:var(--muted)}
.post-body pre{background:var(--code-bg); padding:14px 16px; border-radius:8px; overflow-x:auto; font-size:14px; line-height:1.6}
.post-body code{background:var(--code-bg); padding:.15em .4em; border-radius:4px; font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.post-body pre code{background:none; padding:0}
.post-body table{border-collapse:collapse; width:100%; margin:1.2em 0; font-size:14.5px; display:block; overflow-x:auto}
.post-body th,.post-body td{border:1px solid var(--line); padding:8px 12px; text-align:left}
.post-body th{background:var(--code-bg)}
.post-body hr{border:none; border-top:1px solid var(--line); margin:2em 0}

/* ===== admin ===== */
.admin-body{background:#f3f4f6}
.admin-shell{display:flex; min-height:100vh}
.admin-sidebar{width:260px; background:#111827; color:#d1d5db; display:flex; flex-direction:column; padding:16px 14px; position:sticky; top:0; height:100vh; overflow-y:auto}
.admin-brand{font-weight:700; font-size:18px; margin-bottom:16px; color:#fff}
.admin-brand a{color:#fff} .admin-brand span{color:#9ca3af; font-size:12px; font-weight:400}
.btn{display:inline-block; border:none; border-radius:7px; padding:8px 14px; font-size:14px; cursor:pointer; text-align:center}
.btn-new{background:#374151; color:#fff; margin-bottom:14px}
.btn-new:hover{background:#4b5563; text-decoration:none}
.admin-postlist{display:flex; flex-direction:column; gap:2px; flex:1}
.admin-postlink{display:block; padding:8px 10px; border-radius:6px; color:#d1d5db}
.admin-postlink:hover{background:#1f2937; text-decoration:none}
.admin-postlink.active{background:#2563eb; color:#fff}
.apl-title{display:block; font-size:14px}
.apl-meta{display:block; font-size:11px; color:#9ca3af}
.admin-postlink.active .apl-meta{color:#dbeafe}
.admin-empty{color:#6b7280; font-size:13px}
.admin-sidefoot{margin-top:14px; padding-top:12px; border-top:1px solid #374151; font-size:13px}
.admin-sidefoot a{color:#9ca3af}

.admin-main{flex:1; display:flex; flex-direction:column; min-width:0}
.editor-form{display:flex; flex-direction:column; flex:1; min-height:100vh}
.editor-toolbar{background:#fff; border-bottom:1px solid var(--line); padding:14px 20px; display:flex; flex-direction:column; gap:10px}
.ef-title{font-size:20px; font-weight:700; border:none; outline:none; width:100%; padding:4px 0}
.ef-fields{display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px}
.ef-fields input[type=text],.ef-fields input[type=date]{border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:13px}
.ef-fields input[name=slug]{width:150px} .ef-fields input[name=tags]{width:150px}
.ef-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end}
.save-status{font-size:13px; color:var(--muted)}
.save-status.ok{color:#16a34a} .save-status.err{color:#dc2626} .save-status.saving{color:var(--accent)}
.btn-save{background:var(--accent); color:#fff}
.btn-view{background:#e5e7eb; color:#111}
.btn-view:hover{text-decoration:none}
.btn-delete{background:#fee2e2; color:#b91c1c}

.editor-panes{display:flex; flex:1; min-height:0}
.pane{flex:1; min-width:0; overflow:auto}
.pane-edit{border-right:1px solid var(--line)}
#md-input{width:100%; height:100%; min-height:60vh; border:none; outline:none; resize:none;
  padding:20px; font-size:15px; line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pane-preview{background:#fff; padding:20px}
.pane-preview #preview{max-width:var(--maxw); margin:0 auto}
.editor-hint{margin:0; padding:8px 20px; background:#fff; border-top:1px solid var(--line); color:var(--muted); font-size:12px}

/* login */
.admin-login-body{background:#f3f4f6; display:flex; min-height:100vh; align-items:center; justify-content:center}
.admin-login{background:#fff; padding:32px; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.08); width:320px; text-align:center}
.admin-login h1{font-size:20px; margin:0 0 18px}
.admin-login input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; margin-bottom:12px}
.admin-login button{width:100%; padding:10px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer}
.login-error{color:#dc2626; font-size:13px; margin:0 0 10px}
.login-ip{color:var(--muted); font-size:12px; margin:14px 0 0}

@media(max-width:760px){
  .editor-panes{flex-direction:column}
  .pane-edit{border-right:none; border-bottom:1px solid var(--line)}
  .admin-sidebar{display:none}
}