/* packages/design/components.css — 공용 부품: 카드(오목)·패널(볼록)·버튼(볼록, 눌림 오목)·칩(평평)·로딩 점.
   입체는 이 세 가지만 쓴다. 서비스 전용 변형은 각 서비스 CSS에서 덧쓴다. base.css 다음에 읽는다. */
/* 카드 · 오목 */
.card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow:
    inset 5px 5px 18px var(--shadow-inset-wide),
    inset 1px 1px 4px var(--shadow-inset-edge),
    inset -4px -4px 10px var(--highlight-pressed);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.card-head { display: flex; align-items: center; gap: 8px 12px; padding: 0; }
.card-head > h2 { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head > .meta { line-height: 24px; flex: 1 1 140px; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.card-head > .toggle { margin-inline-start: auto; }

/* 패널 · 볼록 */
.panel {
  background: var(--panel);
  border-radius: var(--radius-panel);
  padding: 16px;
  box-shadow: 2px 4px 10px var(--shadow-raised), -2px -2px 6px var(--highlight-panel);
}

/* 버튼 · 볼록, 눌림 · 오목 */
.toggle { display: flex; gap: 8px; }
.btn, .info-btn {
  font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink);
  background: var(--button); border: 0; border-radius: var(--radius-button); padding: 8px 14px; cursor: pointer;
  box-shadow: 1px 2px 6px var(--shadow-raised), -2px -2px 5px var(--highlight-button);
}
.btn:hover, .info-btn:hover { box-shadow: 5px 8px 14px var(--shadow-hover), -3px -3px 8px var(--highlight-hover); }
/* 선택·눌림은 트렌디브 Tab처럼 음각 그림자와 RED 글자로 나타낸다(밑줄은 쓰지 않는다). 그림자가 안 그려지는 환경에서도 글자 색이 바뀌고, 필터는 "선택: …" 문구로도 상태를 전한다. */
.btn[aria-pressed="true"], .btn[aria-current="page"], .calendar-label[data-selected="true"], .info-btn:active, .info-btn[aria-expanded="true"] {
  background-color: var(--button); color: var(--accent);
  box-shadow: inset 4px 4px 9px var(--shadow-inset-wide), inset 1px 1px 2px var(--shadow-inset-edge), inset -2px -2px 5px var(--highlight-pressed);
}
a.btn { display: inline-block; text-decoration: none; }
.btn:focus-visible, .info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip {
  display: inline-block; font-size: 12px; line-height: 15px; font-weight: 600; background: var(--chip); color: var(--chip-ink);
  border: 1px solid var(--chip-line); border-radius: var(--radius-chip); padding: 2px 8px; margin: 0;
}

.loading-dots { display: flex; align-items: center; gap: 6px; height: 20px; }
.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: loading-bounce 1.4s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes loading-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .loading-dots span { animation: none; }
}