/* 서버 응답 전에도 선택한 메뉴의 제목과 카드 윤곽을 즉시 표시한다. */
html.ws-skeleton-active #shell > .main > .page,
html.ws-skeleton-active #shell > .main > .page * { visibility: hidden !important; }
.ws-page-skeleton { position: fixed; z-index: 30; overflow: hidden; background: var(--bg, var(--surface)); }
.ws-page-skeleton .page-head { margin: 0; }
.ws-sk-body { padding: 4px 36px 36px; display: flex; flex-direction: column; gap: 20px; }
.ws-sk { display: block; border-radius: 7px; background: var(--surface-3, #e7e8eb); animation: wsSkeletonPulse 1.5s ease-in-out infinite; }
.ws-sk-line { width: 75%; height: 12px; margin: 6px 0 12px; }
.ws-sk-line.short { width: 45%; height: 9px; }
.ws-sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.ws-sk-panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--surface); }
.ws-sk-row { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ws-sk-row > div { flex: 1; min-width: 0; }
.ws-sk-panel > .ws-sk-row { padding: 18px 0; border: 0; }
.ws-sk-search { height: 40px; }
.ws-sk-hero { height: 135px; }
.ws-sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ws-sk-stat { height: 110px; }
.ws-sk-tile { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; }
.ws-sk-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.ws-sk-tabs { display: flex; gap: 10px; }
.ws-sk-tabs > i { width: 80px; height: 30px; border-radius: 30px; }
.ws-sk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.ws-sk-week > i { height: 66px; }
.ws-sk-chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; min-height: 500px; }
.ws-sk-conversation { display: flex; flex-direction: column; }
.ws-sk-composer { height: 62px; margin-top: auto; }
.ws-sk-calendar { display: grid; grid-template-columns: repeat(7, 1fr); }
.ws-sk-calendar > div { height: 105px; border-radius: 0; padding: 14px; }
@keyframes wsSkeletonPulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ws-sk { animation: none; } }
@media (max-width: 768px) {
  .ws-sk-body { padding: 4px 16px 24px; gap: 14px; }
  .ws-sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-sk-columns, .ws-sk-chat { grid-template-columns: 1fr; }
  .ws-sk-chat > :last-child { display: none; }
  .ws-sk-calendar > div { padding: 8px; height: 85px; }
}