/* 실시간 글 알림(티드립 2026): 왼쪽 아래에서 밀려 나오는 카드. 티드립 레이아웃 색(--td-*)을 쓰고, 없으면 기본색 */
.td-ndc {
  position: fixed; left: 20px; bottom: 24px; z-index: 900;
  display: flex; align-items: stretch; width: min(360px, calc(100vw - 32px)); overflow: hidden;
  border: 1px solid var(--td-line, #E4E7E4); border-radius: 16px; background: var(--td-surface, #fff); color: var(--td-text, #141A16);
  box-shadow: 0 18px 40px -16px rgba(20, 26, 22, .38), 0 2px 6px rgba(20, 26, 22, .06);
  font-family: var(--td-font, 'Pretendard Variable', Pretendard, sans-serif); letter-spacing: var(--td-tracking, -0.01em);
  transform: translateX(calc(-100% - 40px)); opacity: 0; transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.td-ndc.is-on { transform: none; opacity: 1; }
.td-ndc__link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 14px 4px 17px 14px; color: inherit !important; text-decoration: none !important; }
.td-ndc__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--td-brand-soft, #E6F4EC); color: var(--td-brand-text, #00753A); }
.td-ndc__icon svg { width: 20px; height: 20px; }
.td-ndc__body { display: grid; gap: 3px; min-width: 0; }
.td-ndc__body small { display: flex; align-items: center; gap: 6px; color: var(--td-brand-text, #00753A); font-size: 12px; font-weight: 800; }
.td-ndc__live { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--td-brand, #008741); animation: td-ndc-pulse 1.6s infinite; }
.td-ndc__body b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.4; word-break: break-all; }
.td-ndc__body em { overflow: hidden; color: var(--td-text-3, #7A827C); font-size: 12px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.td-ndc__link:hover b { color: var(--td-brand-text, #00753A); }
.td-ndc__close { display: grid; place-items: center; align-self: flex-start; flex: none; width: 32px; height: 32px; margin: 8px 8px 0 0; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--td-text-3, #7A827C); cursor: pointer; }
.td-ndc__close svg { width: 16px; height: 16px; }
.td-ndc__close:hover { background: var(--td-surface-3, #EEF0EE); color: var(--td-text, #141A16); }
.td-ndc__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--td-brand, #008741); transform-origin: left; animation: td-ndc-bar 8s linear forwards; }
.td-ndc:hover .td-ndc__bar, .td-ndc:focus-within .td-ndc__bar { animation-play-state: paused; }
@keyframes td-ndc-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes td-ndc-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 135, 65, .5); } 70% { box-shadow: 0 0 0 6px rgba(0, 135, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 135, 65, 0); } }
/* 휴대폰: 하단 탭·맨 위로 단추 위, 화면 폭에 맞춰 */
@media (max-width: 1023px) {
  .td-ndc { left: 12px; right: 12px; width: auto; bottom: calc(var(--td-tabbar-h, 60px) + env(safe-area-inset-bottom) + 68px); transform: translateY(24px); }
  .td-ndc.is-read-page { bottom: calc(58px + env(safe-area-inset-bottom) + 68px); }
  .td-ndc.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .td-ndc { transition: opacity .2s; transform: none; } .td-ndc__live { animation: none; } }
@media print { .td-ndc { display: none; } }