/* 記事(一覧・読む・書く・管理者) */
/* 記事タブでは、ゲーム用の絞り込みを隠す */
body[data-view="articles"] .tag-filter,
body[data-view="articles"] .toolbar-right { display: none; }

.article-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--screen);
  border: 2px solid var(--cab-edge);
  border-radius: 10px;
}
.article-admin[hidden] { display: none; }
.ad-who { margin-right: auto; font-size: 0.85rem; color: var(--neon-green); }
.ad-btn {
  padding: 7px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.ad-btn:hover { border-color: var(--neon-pink); }
.ad-btn:disabled { opacity: 0.55; cursor: default; }
.ad-btn.primary { color: #fff; background: var(--neon-pink); border-color: var(--cab-edge); }
.ad-btn.danger { color: #ff8a8a; border-color: #7a2c35; }
.ad-btn.small { padding: 3px 10px; font-size: 0.75rem; }

/* ---- 一覧 ---- */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}
.article-list[hidden] { display: none; }
.ar-card {
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-left: 5px solid var(--neon-pink);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.ar-card:hover { transform: translateY(-1px); border-color: var(--neon-pink); }
.ar-card:focus-visible { outline: 3px solid var(--neon-yellow); outline-offset: 1px; }
.ar-card.is-draft { opacity: 0.8; border-left-color: #8fa0b8; border-style: dashed; }
.ar-card-title { margin: 0 0 4px; font-size: 1.02rem; line-height: 1.35; color: var(--text); }
.ar-card-meta { margin: 0 0 6px; font-size: 0.74rem; color: var(--text-muted); }
.ar-card-summary {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ar-draft {
  padding: 0 7px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #1d1240;
  background: #ffd23f;
  border-radius: 4px;
  vertical-align: middle;
}
.ar-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--text-muted); }

/* ---- 読む ---- */
.ar-dialog {
  width: min(780px, 100%);
  max-height: min(92vh, 900px);
  overflow-y: auto;
  padding: 22px 24px 16px;
}
.ar-kicker { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; }
.ar-h1 { margin: 0 0 6px; padding-right: 24px; font-size: 1.55rem; line-height: 1.35; }
.ar-meta { margin: 0 0 16px; font-size: 0.8rem; color: var(--text-muted); }
.ar-body { font-size: 0.97rem; line-height: 1.9; color: var(--text); overflow-wrap: anywhere; }
.ar-body h2, .ar-body h3, .ar-body h4 { margin: 1.6em 0 0.5em; line-height: 1.4; }
.ar-body h2 { font-size: 1.3rem; padding-bottom: 4px; border-bottom: 2px solid var(--border); }
.ar-body h3 { font-size: 1.12rem; }
.ar-body h4 { font-size: 1rem; }
.ar-body p { margin: 0 0 1em; }
.ar-body ul, .ar-body ol { margin: 0 0 1em; padding-left: 1.6em; }
.ar-body li { margin: 0.2em 0; }
.ar-body a { color: var(--accent); font-weight: 700; }
.ar-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ar-body blockquote { margin: 0 0 1em; padding: 6px 14px; color: var(--text-muted); background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; }
.ar-body code { padding: 1px 6px; font-family: ui-monospace, Consolas, monospace; font-size: 0.88em; background: var(--screen); color: var(--neon-green); border-radius: 4px; }
.ar-body pre { margin: 0 0 1em; padding: 12px 14px; overflow-x: auto; background: var(--screen); border: 1px solid var(--cab-edge); border-radius: 8px; line-height: 1.6; }
.ar-body pre code { padding: 0; background: none; }
.ar-body hr { margin: 1.6em 0; border: none; border-top: 2px dashed var(--border); }
.ar-gamelink { white-space: nowrap; }
.ar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---- 管理者ログイン・管理 ---- */
.ad-dialog { width: min(480px, 100%); }
.ad-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.ad-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.ad-input {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
}
.ad-input:focus { outline: none; border-color: var(--neon-pink); }
.ad-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ad-error { min-height: 1.2em; margin: 0; font-size: 0.82rem; color: #ff8a8a; }
.ad-ok { margin: 0; font-size: 0.85rem; line-height: 1.7; color: var(--neon-green); }
.ad-ok code { padding: 1px 6px; background: var(--screen); border-radius: 4px; user-select: all; }
.ad-h { margin: 16px 0 2px; padding-top: 12px; font-size: 0.95rem; border-top: 1px solid var(--border); }
.ad-note { margin: 0 0 4px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }
.ad-list { margin: 8px 0 0; padding: 0; list-style: none; }
.ad-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.ad-item small { color: var(--text-muted); }
.ad-you { padding: 0 7px; font-size: 0.68rem; font-weight: 700; color: #1d1240; background: var(--neon-yellow); border-radius: 4px; }
.ad-pw-row { display: flex; gap: 8px; }
.ad-pw-row .ad-input { flex: 1 1 auto; }

/* ---- 書く ---- */
.ed-dialog { width: min(1120px, 100%); }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ed-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-tool { padding: 3px 10px; font-size: 0.76rem; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.ed-tool:hover { border-color: var(--neon-pink); }
.ed-body { min-height: 340px; flex: 1 1 auto; resize: vertical; font-family: ui-monospace, Consolas, "Yu Gothic UI", monospace; line-height: 1.7; }
.ed-preview-label { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.ed-preview { flex: 1 1 auto; min-height: 340px; max-height: 60vh; overflow-y: auto; padding: 10px 14px; background: var(--bg); border: 2px dashed var(--border); border-radius: 8px; }
.ed-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ed-pub { font-size: 0.88rem; font-weight: 700; }
.ed-pub small { font-weight: 400; color: var(--text-muted); }

@media (max-width: 800px) {
  .ed-grid { grid-template-columns: 1fr; }
  .ed-preview-col { display: none; }
  .ar-dialog { padding: 18px 14px 12px; }
  .ar-h1 { font-size: 1.3rem; }
}

/* ---- コメント ---- */
.cm { margin-top: 18px; padding-top: 12px; border-top: 2px dashed var(--border); }
.cm-h { margin: 0 0 8px; font-size: 1rem; }
.cm-count { color: var(--text-muted); font-weight: 400; font-size: 0.9rem; }
.cm-list { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cm-item { padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.cm-empty { font-size: 0.85rem; color: var(--text-muted); }
.cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 0.78rem; color: var(--text-muted); }
.cm-meta .ad-btn { margin-left: auto; }
.cm-name { color: var(--text); font-size: 0.86rem; overflow-wrap: anywhere; }
.cm-admin { padding: 0 7px; font-size: 0.66rem; font-weight: 700; color: #1d1240; background: var(--neon-yellow); border-radius: 4px; }
.cm-body { margin: 0; font-size: 0.92rem; line-height: 1.7; overflow-wrap: anywhere; }
.cm-form { display: flex; flex-direction: column; gap: 8px; }
.cm-form textarea { resize: vertical; min-height: 70px; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-len { color: var(--text-muted); }