/* 소식 카드 돌리기 (돈체크·월세체크·체키오 랜딩 공통). 원본은 landing-site/shared, npm run build 가 세 사이트로 복사한다. */
@import url('https://cdn.jsdelivr.net/npm/galmuri@2.39.9/dist/galmuri.css');

.news-roll { position: relative; }
.news-roll-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; }
.news-roll-track::-webkit-scrollbar { display: none; }
.news-roll-track .news-card { scroll-snap-align: start; }
.news-roll-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.news-roll-btns { display: flex; gap: 8px; }
.news-roll-btns button { font: inherit; font-size: 18px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.news-roll-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-roll-all { font-weight: 600; color: var(--accent); text-decoration: none; }

/* 카드 (돈체크 소식과 같은 모양) */
.news-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 16px); overflow: hidden; }
.news-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-card-cover { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; aspect-ratio: 4 / 3; padding: 20px; }
.news-card-cover b { font-size: 21px; line-height: 1.35; letter-spacing: -0.02em; }
.news-card-tag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: #1c1c1a; }
.tone-blue { background: var(--accent-bg); color: var(--text); }
.tone-green { background: var(--good-bg); color: var(--text); }
.tone-night { background: #141a33; color: #f5f1e6; font-family: Galmuri11, system-ui, sans-serif; box-shadow: inset 0 0 0 3px #141a33, inset 0 0 0 5px #c9962e; }
.tone-night b { font-family: inherit; font-weight: 400; }
.tone-night .news-card-tag { background: #c9962e; color: #141a33; }
.news-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; flex: 1; }
.news-card-sum { color: var(--text-2); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card time { margin-top: auto; font-size: 12px; color: var(--text-3); }

@media (max-width: 820px) {
  .news-roll-track { grid-auto-columns: calc((100% - 14px) / 2); }
}
@media (max-width: 560px) {
  .news-roll-track { grid-auto-columns: 84%; }
}