/* 서버 글 페이지(portal/article.html 틀: 소식·업데이트·리더보드·가이드) 전용. 공통 머리말·사이드바·카드(.prose.card)·알약(.pill)은 style.css */
.article { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.article .page-title { align-self: center; text-align: center; overflow-wrap: anywhere; }
.article [lang="en"]:not(html) { opacity: .92; }
.page-lead { text-align: center; font-size: 18px; line-height: 1.6; margin: -4px 0 0; color: #fff; text-shadow: 0 2px 0 #0d5aa8; }
.page-lead span[lang="en"] { display: block; font-size: .88em; }
.page-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-tabs .pill { margin: 0; }
.page-tabs .pill.on { --bg: var(--yellow); --sh: var(--yellow-d); }
.crumbs { font-size: 14px; color: #ffffffd0; }
.crumbs a { color: #fff; }

/* 소식 */
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item h2 { font-size: 22px; margin-top: 6px; }
.news-item h3[lang="en"] { color: var(--sub); font-size: 17px; margin-top: 10px; }
.news-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.news-top time { color: var(--sub); }
.news-tag { border-radius: 999px; padding: 1px 10px; background: #e3f2ff; color: var(--blue-d); }
.news-tag.update { background: #fff4d6; color: #8a6400; }
.news-top a { color: var(--blue-d); text-decoration: none; }
.news-top a:hover { text-decoration: underline; }

/* 가이드 */
.guide-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 14px; }
.guide-langs a { color: #fff; opacity: .85; }
.guide-langs a.on { opacity: 1; font-weight: bold; text-decoration: none; border-bottom: 2px solid var(--yellow); }
.guide-top { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: start; }
.guide-top.no-shot { grid-template-columns: minmax(0, 1fr); }
.guide-cover { display: block; width: 100%; max-width: 480px; height: auto; aspect-ratio: 2 / 1; margin: 0 auto 18px; border-radius: 20px; border: 4px solid #fff; box-shadow: var(--card-sh); background: #fff; }
.guide-shot { aspect-ratio: 4 / 3; border-radius: 16px; display: grid; place-items: center; font-size: 72px; box-shadow: inset 0 -6px 0 #0002; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.guide-card { display: block; color: inherit; text-decoration: none; transition: transform .12s; }
.guide-card:hover { transform: translateY(-3px); }
.guide-card h2 { font-size: 22px; }
.guide-card p { font-size: 15px; }
.faq dt { color: var(--ink); margin-top: 10px; }
.faq dd { margin: 2px 0 0; color: #3d434e; }

/* 리더보드 */
.lb h2 a { color: inherit; text-decoration: none; }
.lb-tabs, .lb-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lb-tabs .pill, .lb-modes .pill { margin: 0; }
.lb-tabs .pill.on, .lb-modes .pill.on { --bg: var(--yellow); --sh: var(--yellow-d); }
.lb-list { list-style: none; padding: 0; margin: 0; }
.lb-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #0001; }
.lb-list li.lb-msg { display: block; text-align: center; color: var(--sub); border: 0; }
.lb-no { text-align: center; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-variant-numeric: tabular-nums; }
.lb-note { font-size: 14px; color: var(--sub); margin-top: 10px; }

@media (max-width: 640px) {
  .article { gap: 14px; }
  .page-lead { font-size: 16px; }
  .guide-top { grid-template-columns: minmax(0, 1fr); }
  .guide-shot { font-size: 56px; max-height: 180px; aspect-ratio: auto; height: 160px; }
  .news-item h2 { font-size: 20px; }
}