/* J-POP LIVE — jpop-j.com */
:root { --ink: #21143e; --violet: #7027d8; --pink: #ec3d9d; --sky: #26bee8; --paper: #fffaff; }
* { box-sizing: border-box; }
body { margin: 0; background: #f7f0ff; color: var(--ink); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; line-height: 1.8; }
a { color: var(--violet); }
.thread-header { padding: 30px 18px; text-align: center; color: white; background: var(--violet); box-shadow: 0 5px 18px rgba(112,39,216,.22); }
.thread-header a { color: white; opacity: .86; font-size: .82rem; text-decoration: none; }
.thread-header h1 { max-width: 920px; margin: 12px auto 0; font-size: clamp(1.25rem, 4vw, 2rem); line-height: 1.48; letter-spacing: .03em; }
.thread-body { max-width: 900px; margin: 28px auto; padding: 0 14px; }
.post-container { position: relative; margin: 0 0 13px; padding: 18px 20px; background: rgba(255,255,255,.88); border: 1px solid #eadcff; border-radius: 14px; box-shadow: 0 8px 20px rgba(93,44,150,.09); overflow: hidden; }
.post-container::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--pink); content: ""; }
.id-line { margin: 0 0 8px; color: #826aab; font-size: .8rem; }
.user-name { color: var(--pink); font-weight: bold; }
.post-content { margin: 0; white-space: pre-wrap; word-break: break-word; }
.anker { color: var(--pink); text-decoration: none; font-weight: bold; }
.thread-footer { max-width: 900px; margin: 0 auto; padding: 10px 14px 38px; }
.related-articles { margin: 18px 0; padding: 18px; background: white; border-radius: 14px; box-shadow: 0 8px 20px rgba(93,44,150,.09); }
.related-label { margin-bottom: 8px; color: var(--violet); font-weight: bold; }
.related-list { margin: 0; padding: 0; list-style: none; }
.related-list li + li { border-top: 1px solid #f0e8fa; }
.related-list a { display: block; padding: 10px 2px; text-decoration: none; }
.thread-nav { display: flex; gap: 12px; margin: 20px 0; }
.nav-card { flex: 1; min-width: 0; padding: 14px; color: var(--ink); background: white; border: 1px solid #eadcff; border-radius: 12px; text-decoration: none; }
.nav-card:hover { color: white; background: var(--violet); }
.nav-direction { color: var(--pink); font-size: .76rem; }
.nav-card:hover .nav-direction { color: white; }
.nav-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .thread-header { padding: 24px 12px; } .thread-body { margin: 16px auto; padding: 0 8px; } .post-container { padding: 14px; border-radius: 10px; } .thread-nav { gap: 6px; } .nav-card { padding: 10px; } }