/* ===== showcase.css : /servers一覧・詳細、コメント欄専用 ===== */

/* SHOWCASE / SERVER RANKING */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .showcase-grid { grid-template-columns: 1fr; } }
.showcase-card { display: block; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.15s, box-shadow 0.15s; }
.showcase-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.showcase-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface2); }
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; }
.rank-badge { position: absolute; top: 0.6rem; left: 0.6rem; background: rgba(15,23,42,0.75); color: #fff; font-weight: 700; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 20px; }
.showcase-card-body { padding: 1rem 1.1rem; }
.showcase-card-body h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }
.showcase-author { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.4rem; }
.showcase-tagline { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; line-height: 1.6; }
.showcase-votes { font-size: 0.8rem; font-weight: 700; color: var(--accent); margin-top: 0.6rem; }
.category-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.category-badge { display: inline-block; padding: 0.15rem 0.55rem; background: var(--accent-dim); color: var(--accent); border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; max-width: 900px; margin: 0 auto 1.5rem; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-delete { position: absolute; bottom: 0.4rem; right: 0.4rem; padding: 0.25rem 0.6rem; background: rgba(220,38,38,0.9); color: #fff; border: none; border-radius: 6px; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.video-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; max-width: 640px; margin: 0 auto 0.6rem; padding: 0.6rem 0.9rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-family: 'Share Tech Mono', monospace; }
.video-embeds { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; margin: 0 auto 1.5rem; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* COMMENTS */
.comment-list { max-width: 640px; margin: 0 auto 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.comment-item { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.comment-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; }
.comment-meta form { margin-left: auto; }
.comment-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.comment-edited-badge { color: var(--muted); font-size: 0.72rem; }
.comment-edit-btn { border: none; background: none; color: var(--accent); font-size: 0.75rem; cursor: pointer; padding: 0; font-family: inherit; }
.comment-delete-btn { border: none; background: none; color: #b91c1c; font-size: 0.75rem; cursor: pointer; padding: 0; }
.comment-body { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.7; }
.comment-form { max-width: 640px; }
.comment-edit-form { margin-top: 0.6rem; }
.comment-edit-form textarea {
  width: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.85rem; resize: vertical;
}
/* SHOWCASE DETAIL: sidebar (address/players/votes/links/categories) + main body */
.showcase-page-layout { display: flex; gap: 2rem; align-items: flex-start; max-width: 1000px; margin: 0 auto 1rem 0; }
section.block.showcase-detail-block { max-width: 1200px; }
.showcase-sidebar { width: 300px; flex-shrink: 0; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.showcase-main { flex: 1; min-width: 0; }
.showcase-main .rich-content { max-width: none; margin: 0; }
.showcase-detail-thumb { margin-bottom: 1.5rem; }
.showcase-detail-thumb img { width: 100%; max-width: 100%; border-radius: var(--radius); display: block; border: 2px solid var(--border); }
@media (max-width: 800px) {
  .showcase-page-layout { flex-direction: column; align-items: stretch; }
  .showcase-sidebar { width: 100%; }
}

.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-section:last-child { margin-bottom: 0; }
.sidebar-section-title { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.sidebar-section .addr-card { max-width: none; margin-bottom: 0.6rem; padding: 0.65rem 0.5rem; }
.sidebar-section .addr-card:last-child { margin-bottom: 0; }
.sidebar-players { font-size: 1.2rem; font-weight: 700; color: var(--accent); font-family: 'Share Tech Mono', monospace; }
.sidebar-vote-count { font-size: 1.2rem; font-weight: 700; color: var(--accent); margin-bottom: 0.75rem; }
.sidebar-site-list { list-style: none; }
.sidebar-site-list li { margin-bottom: 0.4rem; font-size: 0.8rem; }
.sidebar-site-list li:last-child { margin-bottom: 0; }
.sidebar-site-list a { color: var(--accent); font-weight: 700; word-break: break-all; text-decoration: none; }
.sidebar-site-list a:hover { text-decoration: underline; }
.sidebar-section .category-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* EXTERNAL SITE LINKS */
.external-site-list { list-style: none; max-width: 720px; margin: 0 auto 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.external-site-list li { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.9rem; }
.external-site-list a { color: var(--accent); font-weight: 700; font-size: 0.85rem; word-break: break-all; text-decoration: none; }
.external-site-list a:hover { text-decoration: underline; }
/* サーバー紹介一覧のカードグリッド */
body.dark-home .showcase-grid { max-width: 1180px; }
body.dark-home .showcase-card { background: var(--dh-surface); border: 1px solid var(--dh-line); color: var(--dh-ink); box-shadow: none; }
body.dark-home .showcase-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
body.dark-home .showcase-thumb { background: var(--dh-surface2); }
body.dark-home .showcase-thumb-placeholder { color: var(--dh-ink-soft); }
body.dark-home .showcase-card-body h3 { color: var(--dh-ink); }
body.dark-home .showcase-tagline { color: var(--dh-ink-soft); }
body.dark-home .showcase-votes { color: var(--dh-green-light); }
body.dark-home .category-badge { background: var(--dh-blurple-dim); color: var(--dh-blurple-light); }

/* サーバー紹介詳細：サイドバー＋本文 */
body.dark-home .showcase-sidebar { background: var(--dh-surface); border: 1px solid var(--dh-line); }
body.dark-home .sidebar-section-title { color: var(--dh-blurple-light); }
body.dark-home .sidebar-players, body.dark-home .sidebar-vote-count { color: var(--dh-green-light); }
body.dark-home .sidebar-site-list a { color: var(--dh-blurple-light); }
body.dark-home .showcase-detail-thumb img { border: 1px solid var(--dh-line); }
/* コメント欄 */
body.dark-home .comment-item { background: var(--dh-surface); border: 1px solid var(--dh-line); }
body.dark-home .comment-meta { color: var(--dh-ink-soft); }
body.dark-home .comment-body { color: var(--dh-ink); }
body.dark-home .comment-form textarea { background: var(--dh-surface2); border: 1px solid var(--dh-line); color: var(--dh-ink); }

/* ジャンル絞り込み・タグ・サーバーごとのお知らせ欄 */
.genre-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.2rem; }
.genre-chip { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-decoration: none; border: 1px solid rgba(128,128,128,.35); color: inherit; }
.genre-chip.on { background: var(--dh-blurple-dim, var(--accent-dim)); border-color: var(--dh-blurple-light, var(--accent)); color: var(--dh-blurple-light, var(--accent)); }
.genre-chip a { color: inherit; text-decoration: none; margin-left: 0.2rem; }
.tag-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.tag-badge { display: inline-block; font-size: 0.7rem; color: var(--muted); text-decoration: none; padding: 0.1rem 0.45rem; border-radius: 6px; border: 1px solid rgba(128,128,128,.3); }
a.tag-badge:hover { color: var(--dh-blurple-light, var(--accent)); border-color: currentColor; }
.notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.notice-list li { font-size: 0.82rem; line-height: 1.6; word-break: break-word; }
.notice-date { display: inline-block; margin-right: 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.notice-list-edit li { display: flex; gap: 0.5rem; align-items: center; }
.notice-list-edit .notice-text { flex: 1; }
.notice-list-edit form { margin: 0; }

/* 外部Webサイト: リンク先ごとのブランド表示（YouTubeへ ↗ など） */
.ext-links li { margin-bottom: 0.5rem; }
.ext-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,0.1)); text-decoration: none; font-weight: 700; --brand: #7983f5; border-left: 4px solid var(--brand); }
.ext-link:hover { text-decoration: none; filter: brightness(1.12); }
.ext-link .ext-badge { flex: none; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 800; }
.ext-link .ext-text { display: flex; flex-direction: column; line-height: 1.3; }
.ext-link .ext-host { font-weight: 400; font-size: 0.7rem; opacity: 0.7; word-break: break-all; }
.ext-link.ext-plain { opacity: 0.7; border-left-color: #888; font-weight: 400; word-break: break-all; }
.ext-x { --brand: #111; } .ext-youtube { --brand: #ff0033; } .ext-discord { --brand: #5865f2; } .ext-line { --brand: #06c755; }
.ext-tiktok { --brand: #fe2c55; } .ext-instagram { --brand: #d6249f; } .ext-twitch { --brand: #9146ff; } .ext-niconico { --brand: #555; } .ext-github { --brand: #30363d; }
.ext-x .ext-badge, .ext-github .ext-badge { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }