/* MAK.IT common UI — loading spinner, toast, error states, noscript banner.
   Additive only. Does not override design styles in page-specific CSS.

   D1 갱신 (2026-04-24): hardcoded 색상을 디자인 토큰(tokens.css)으로 교체.
   tokens.css가 먼저 로드되어야 함.
*/

/* ----- Loading spinner ----- */
.is-loading { position: relative; opacity: 0.6; pointer-events: none; }
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid var(--mk-color-border, #e5e7eb);
  border-top-color: var(--mk-color-text, #111827);
  border-radius: 50%;
  animation: makit-spin 1s linear infinite;
}
@keyframes makit-spin { to { transform: rotate(360deg); } }

/* ----- Toast ----- */
.toast {
  position: fixed;
  bottom: var(--mk-space-6, 24px);
  right: var(--mk-space-6, 24px);
  padding: var(--mk-space-3, 12px) var(--mk-space-5, 20px);
  background: var(--mk-color-text, #1f2937);
  color: var(--mk-color-text-on-brand, #fff);
  border-radius: var(--mk-radius-md, 8px);
  box-shadow: var(--mk-shadow-md, 0 10px 30px rgba(0, 0, 0, 0.2));
  z-index: var(--mk-z-toast, 9999);
  font-family: var(--mk-font-sans, inherit);
  font-size: var(--mk-font-size-sm, 0.9rem);
  max-width: calc(100vw - 48px);
  animation: makit-toast-in var(--mk-duration-base, 0.2s) var(--mk-easing-emphasized, ease-out);
}
.toast-error   { background: var(--mk-color-error-text, #dc2626); }
.toast-success { background: var(--mk-color-success-text, #10b981); }
.toast-warn    { background: var(--mk-color-warn-text, #d97706); }
.toast-info    { background: var(--mk-color-info-text, #334bfa); }
.toast-leaving { animation: makit-toast-out var(--mk-duration-base, 0.2s) var(--mk-easing-standard, ease-in) forwards; }

@keyframes makit-toast-in  { from { transform: translateY(20px); opacity: 0; } }
@keyframes makit-toast-out { to   { transform: translateY(20px); opacity: 0; } }

/* ----- Error state ----- */
.error-state {
  padding: var(--mk-space-8, 2rem);
  text-align: center;
  color: var(--mk-color-text-muted, #6b7280);
}
.error-state small {
  display: block;
  margin-top: var(--mk-space-2, 0.5rem);
  opacity: 0.7;
  color: var(--mk-color-text-faint, #a3a3a3);
}

/* ----- noscript banner ----- */
.makit-noscript {
  padding: var(--mk-space-3, 12px) var(--mk-space-5, 20px);
  background: var(--mk-color-warn-bg, #fef3c7);
  color: var(--mk-color-warn-text, #92400e);
  border-bottom: 1px solid var(--mk-color-border, #fde68a);
  text-align: center;
  font-family: var(--mk-font-sans, inherit);
  font-size: var(--mk-font-size-sm, 0.9rem);
}

/* ----- Responsive (모바일 우선 — sm 미만) ----- */
@media (max-width: 639px) {
  .toast {
    left: var(--mk-space-4, 16px);
    right: var(--mk-space-4, 16px);
    bottom: var(--mk-space-4, 16px);
  }
}

/* ----- Site-wide mobile sidebar (off-canvas).
   Applies to all pages that use `.sidebar` + `.sidebar-toggle` shell.
   `!important`은 페이지별 CSS의 width/position 오버라이드를 안전하게 무력화하기 위함. */
.mk-sidebar-overlay {
  position: fixed;
  inset: 60px 0 0 0;
  background: var(--mk-color-bg-overlay, rgba(0,0,0,0.5));
  z-index: calc(var(--mk-z-modal, 1300) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mk-motion-duration-base, 0.2s) var(--mk-motion-ease-standard, ease);
}
.mk-sidebar-overlay.is-visible { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) {
  .mk-sidebar-overlay { display: none; }
}

@media (max-width: 767px) {
  .sidebar {
    position: fixed !important;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 280px !important;
    max-width: 85vw;
    z-index: var(--mk-z-modal, 1300);
    transform: translateX(-100%);
    transition: transform var(--mk-motion-duration-base, 0.2s) var(--mk-motion-ease-standard, ease);
    box-shadow: var(--mk-shadow-lg, 0 25px 50px -12px rgba(0,0,0,0.4));
    overflow-y: auto;
  }
  .sidebar.is-open { transform: translateX(0); }
}

/* 모바일 전용 사이드바 열기 버튼 — .sidebar-toggle은 사이드바 안에 있어 닫힌 상태에서
   화면 밖에 있으므로, 항상 뷰포트 안에 떠 있는 별도 트리거가 필요함. */
.mk-mobile-nav-toggle {
  display: none;
}
@media (max-width: 767px) {
  .mk-mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--mk-space-2, 8px);
    left: var(--mk-space-2, 8px);
    width: 40px;
    height: 40px;
    background: var(--mk-color-bg, #fff);
    color: var(--mk-color-text, #1a1a1a);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-md, 10px);
    box-shadow: var(--mk-shadow-xs);
    z-index: var(--mk-z-sticky, 1100);
    cursor: pointer;
  }
  .mk-mobile-nav-toggle[aria-expanded="true"] {
    color: var(--mk-color-brand-500);
    border-color: var(--mk-color-brand-500);
  }
}