/* === Article Header === */
.article-header { padding: 160px 0 80px; background: var(--color-bg); }
.article-header .container { max-width: 900px; }
.article-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.article-date { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--color-gray); letter-spacing: 0.05em; }
.article-category { font-family: var(--font-en); font-size: 11px; font-weight: 600; padding: 6px 16px; letter-spacing: 0.1em; }
.article-category.event { background: var(--color-accent); color: var(--color-black); }
.article-category.news { background: var(--color-black); color: var(--color-white); }
.article-category.release { background: #2104fb; color: var(--color-white); }
.article-title { font-size: clamp(24px, 4vw, 36px); font-weight: 600; color: var(--color-black); line-height: 1.5; }

/* === Article Content === */
.article-content { max-width: 900px; margin: 0 auto; padding: 80px 60px; }
.article-image { width: 100%; max-width: 500px; display: block; margin: 0 auto 48px; }
.article-body { font-size: 15px; line-height: 2.2; color: var(--color-gray); }
.article-body p { margin-bottom: 28px; }
.article-body a { color: var(--color-black); text-decoration: underline; transition: opacity 0.3s var(--transition); }
.article-body a:hover { opacity: 0.6; }

/* === Info Box === */
.info-box { background: var(--color-light-gray); padding: 32px; margin: 32px 0; }
.info-box h3 { font-family: var(--font-en); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 20px; color: var(--color-black); }
.info-box ul { list-style: none; }
.info-box li { margin-bottom: 10px; font-size: 15px; color: var(--color-gray); padding-left: 20px; position: relative; }
.info-box li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--color-accent); }

/* === Track List === */
.track-list { background: var(--color-light-gray); padding: 32px; margin: 32px 0; }
.track-list h3 { font-family: var(--font-en); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 20px; color: var(--color-black); }
.track-list ol { margin-left: 24px; }
.track-list li { margin-bottom: 10px; font-size: 15px; color: var(--color-gray); line-height: 1.8; }

/* === Back Link === */
.back-link { max-width: 900px; margin: 0 auto; padding: 0 60px 100px; }

/* === Article Navigation === */
.article-nav { max-width: 900px; margin: 0 auto; padding: 0 60px 60px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--color-border); padding-top: 40px; }
.article-nav a { font-family: var(--font-en); font-size: 13px; font-weight: 500; color: var(--color-gray); text-decoration: none; transition: color 0.3s var(--transition); display: flex; align-items: center; gap: 8px; }
.article-nav a:hover { color: var(--color-black); }
.article-nav .prev::before { content: '←'; }
.article-nav .next::after { content: '→'; }

/* === Responsive === */
@media (max-width: 768px) {
    .article-header { padding: 120px 0 60px; }
    .article-content { padding: 60px 24px; }
    .back-link { padding: 0 24px 60px; }
    .article-nav { padding: 0 24px 40px; padding-top: 32px; flex-direction: column; align-items: flex-start; }
}