/* =====================================================================
   blog.css — ブログ / お知らせ / エディタ
   （style.css のトークンを利用）
   ===================================================================== */

.blog-main{max-width:880px;margin:0 auto;padding:clamp(40px,8vw,72px) var(--pad) 80px;min-height:70vh}

.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.blog-head .section-note{margin-top:10px}

/* ---------- 管理バー ---------- */
.admin-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-who{font-size:11px;color:var(--accent);letter-spacing:.06em}
.mini-btn{
  font-family:inherit;font-size:12.5px;letter-spacing:.06em;cursor:pointer;
  padding:8px 16px;border-radius:8px;border:1px solid transparent;
  background:var(--accent);color:#1a1410;transition:all .2s var(--ease);
}
.mini-btn:hover{background:var(--accent-soft);box-shadow:var(--glow-accent)}
.mini-btn--ghost{background:rgba(255,255,255,.03);color:var(--ink-2);border-color:var(--rule-2)}
.mini-btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--ink);box-shadow:none;border-color:var(--accent)}
.mini-btn--danger{background:transparent;color:#9A8BFF;border-color:rgba(154,139,255,.45)}
.mini-btn--danger:hover{background:rgba(154,139,255,.14);color:#fff;border-color:#9A8BFF;box-shadow:none}

/* ---------- セットアップ案内 ---------- */
.setup-notice{
  border:1px dashed var(--rule-2);border-radius:var(--radius);padding:28px 30px;
  background:var(--glass-2);margin-bottom:30px;
}
.setup-notice h2{font-family:'Noto Serif JP',serif;font-weight:500;font-size:19px;margin-bottom:12px;color:var(--ink)}
.setup-notice p{color:var(--ink-2);font-size:14px;line-height:1.9;margin-bottom:12px}
.setup-notice ol{margin:0 0 12px 1.2em;color:var(--ink-2);font-size:14px;line-height:1.95}
.setup-notice code{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent);background:rgba(110,123,240,.08);padding:1px 6px;border-radius:5px}
.setup-foot{font-size:11.5px;color:var(--ink-3)}

/* ---------- 一覧 ---------- */
.blog-list{display:grid;gap:16px}
.blog-loading,.blog-empty{padding:40px 0;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.9}
.blog-empty a{color:var(--accent)}

.post-card{position:relative;border:1px solid var(--rule);border-radius:var(--radius);background:var(--glass-2);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.post-card:hover{border-color:var(--rule-2);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.post-card.is-draft{border-style:dashed;opacity:.85}
.post-card-link{display:block;padding:22px 24px;text-decoration:none;color:inherit}
.post-card-meta{font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:8px}
.post-card-title{font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(17px,2.6vw,21px);letter-spacing:.03em;line-height:1.5;color:var(--ink);margin-bottom:8px}
.post-card-excerpt{color:var(--ink-2);font-size:13.5px;line-height:1.85}
.post-card-more{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.08em;color:var(--accent)}
.draft-tag{color:var(--accent);border:1px solid rgba(110,123,240,.4);border-radius:5px;padding:0 6px;font-size:10px;margin-left:6px}

.admin-actions{display:flex;gap:8px;padding:0 24px 18px}
.admin-actions--post{padding:0 0 22px}

/* ---------- 単一記事 ---------- */
.blog-post{max-width:760px;margin:0 auto}
.post-back{display:inline-block;font-size:12.5px;letter-spacing:.08em;color:var(--ink-3);text-decoration:none;margin-bottom:26px;transition:color .2s}
.post-back:hover{color:var(--accent)}
.post-header{border-bottom:1px solid var(--rule);padding-bottom:24px;margin-bottom:30px}
.post-meta{font-size:12px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.post-title{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(24px,5vw,40px);line-height:1.35;letter-spacing:.03em;color:var(--ink)}

/* ---------- Markdown 本文タイポ ---------- */
.md{color:var(--ink-2);font-size:16px;line-height:1.95;letter-spacing:.01em}
.md > *:first-child{margin-top:0}
.md h2{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(20px,3.4vw,27px);color:var(--ink);letter-spacing:.03em;line-height:1.5;margin:1.8em 0 .7em;padding-bottom:.3em;position:relative}
.md h2::after{content:'';position:absolute;left:0;bottom:0;width:46px;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.md h3{font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(17px,2.6vw,21px);color:var(--ink);letter-spacing:.03em;margin:1.5em 0 .6em}
.md h4{font-weight:700;font-size:16px;color:var(--ink);margin:1.3em 0 .5em}
.md p{margin:0 0 1.2em}
.md a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.md a:hover{color:var(--accent-soft)}
.md strong{color:var(--ink);font-weight:700}
.md em{color:var(--ink);font-style:italic}
.md ul,.md ol{margin:0 0 1.2em 1.4em;padding:0}
.md li{margin:.35em 0}
.md blockquote{border-left:3px solid var(--accent);background:rgba(110,123,240,.07);padding:.6em 1.1em;margin:0 0 1.2em;border-radius:0 8px 8px 0;color:var(--ink-2)}
.md blockquote p:last-child{margin-bottom:0}
.md code{font-family:'JetBrains Mono',monospace;font-size:.88em;background:rgba(110,123,240,.10);color:var(--accent);padding:1px 6px;border-radius:5px}
.md pre{background:#0E0C0A;border:1px solid var(--rule);border-radius:10px;padding:16px 18px;overflow-x:auto;margin:0 0 1.3em}
.md pre code{background:none;color:var(--ink-2);padding:0;font-size:13px;line-height:1.7}
.md img{border-radius:10px;border:1px solid var(--rule);margin:0 0 1.3em}
.md hr{border:none;height:1px;background:var(--rule-2);margin:2em 0}

/* ---------- モーダル（ログイン） ---------- */
.modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:5vw;
  background:rgba(6,5,4,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .2s ease}
.modal[hidden]{display:none}
.modal-card{position:relative;width:min(420px,100%);background:var(--bg-2);border:1px solid var(--rule-2);border-radius:16px;padding:32px 30px}
.modal-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);font-size:18px;cursor:pointer;transition:.2s}
.modal-close:hover{border-color:var(--accent);color:var(--ink);transform:rotate(90deg)}
.modal-title{font-family:'Noto Serif JP',serif;font-weight:500;font-size:21px;margin-bottom:8px}
.modal-note{color:var(--ink-3);font-size:13px;line-height:1.8;margin-bottom:22px}

.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field > span{font-size:12px;letter-spacing:.08em;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:rgba(255,255,255,.04);
  border:1px solid var(--rule-2);border-radius:9px;padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,123,240,.16)}
/* キーボードフォーカスは明確な桜のアウトラインで示す（a11y） */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,
.editor-title-input:focus-visible,.editor-textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field--inline{display:flex;align-items:center;gap:10px}
.field--inline > span{white-space:nowrap}
.field--inline select{width:auto}
.field.check{flex-direction:row}
.field.check input{width:auto}
.form .btn{width:100%;justify-content:center;cursor:pointer}
.form-err{color:#9A8BFF;font-size:12.5px;line-height:1.7}

/* ---------- エディタ ---------- */
.editor-modal{position:fixed;inset:0;z-index:9100;background:rgba(6,5,4,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(10px,2.5vw,28px);overflow:auto}
.editor-modal[hidden]{display:none}
.editor-card{max-width:1100px;margin:0 auto;background:var(--bg-2);border:1px solid var(--rule-2);border-radius:16px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;min-height:calc(100vh - 56px)}
.editor-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.editor-heading{font-family:'Noto Serif JP',serif;font-weight:500;font-size:20px}
.editor-top-actions{display:flex;gap:10px}
.editor-controls{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.editor-title-input{
  font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(18px,3vw,24px);color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--rule);padding:8px 2px;margin-bottom:18px;width:100%;
}
.editor-title-input:focus{outline:none;border-color:var(--accent)}
.editor-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}
.editor-pane{display:flex;flex-direction:column;min-height:340px}
.pane-label{font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px}
.editor-textarea{
  flex:1;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.8;color:var(--ink);
  background:#0E0C0A;border:1px solid var(--rule-2);border-radius:10px;padding:16px;resize:vertical;min-height:340px;
}
.editor-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,123,240,.16)}
.editor-preview{flex:1;overflow:auto;background:rgba(255,255,255,.02);border:1px solid var(--rule);border-radius:10px;padding:18px 20px;min-height:340px}

/* ---------- トースト ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:9999;
  padding:12px 22px;border-radius:10px;font-size:13.5px;letter-spacing:.04em;color:#1a1410;
  background:var(--accent);box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#7E5566;color:#FFF1F4}

/* ---------- レスポンシブ ---------- */
@media (max-width:760px){
  .editor-split{grid-template-columns:1fr}
  .editor-pane{min-height:0}
  .editor-textarea{min-height:200px}
  .editor-preview{min-height:160px}
  .blog-head{flex-direction:column;align-items:flex-start}
}