/* MAK.IT App Shell — 글로벌 컴포넌트 (사이드바 + chatbot widget + user menu)
   D1 토큰 100% 사용 (tokens.css 선행 로드 필요) */

/* =============================================================
   0. Global Sidebar (모든 로그인 페이지 공용 — js/core/ui.js가 렌더링)
   페이지별 CSS에 흩어져 있던 중복 정의를 이 한 곳으로 통합.
   ============================================================= */
.sidebar {
  width: 260px;
  background: var(--mk-color-sidebar-bg);
  border-right: 1px solid var(--mk-color-sidebar-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  color: var(--mk-color-sidebar-text);
}
.sidebar-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--mk-color-sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.sidebar .logo-text {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--mk-color-brand-500);
  border-radius: var(--mk-radius-md);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mk-color-text-on-brand);
  letter-spacing: -0.02em;
}
.sidebar-toggle {
  background: none;
  border: none;
  color: var(--mk-color-sidebar-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--mk-radius-sm);
  transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
              color var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.sidebar-toggle:hover {
  background: var(--mk-color-sidebar-bg-hover);
  color: var(--mk-color-sidebar-text-strong);
}
.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.nav-section { margin-bottom: 1.25rem; }
.nav-section-title {
  padding: 0.5rem 0.75rem 0.375rem;
  font-size: 0.6875rem;
  color: var(--mk-color-sidebar-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  margin: 0.125rem 0;
  border-radius: var(--mk-radius-md);
  color: var(--mk-color-sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
              color var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.nav-item:hover {
  background: var(--mk-color-sidebar-bg-hover);
  color: var(--mk-color-sidebar-text-strong);
}
.nav-item.active {
  background: var(--mk-color-sidebar-bg-active);
  color: var(--mk-color-sidebar-text-strong);
}
.nav-item svg { color: currentColor; opacity: 0.75; flex: none; }

.nav-dropdown { margin: 0.125rem 0; }
.nav-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--mk-radius-md);
  cursor: pointer;
  color: var(--mk-color-sidebar-text);
  font-size: 0.875rem;
  transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.nav-dropdown-header:hover { background: var(--mk-color-sidebar-bg-hover); }
.nav-dropdown-header svg {
  flex: none;
  transition: transform var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.nav-dropdown.expanded .nav-dropdown-header svg { transform: rotate(90deg); }

.nav-dropdown-items {
  display: none;
  padding-left: 0.5rem;
  margin-top: 0.125rem;
}
.nav-dropdown.expanded .nav-dropdown-items { display: block; }
.nav-dropdown-item {
  display: block;
  padding: 0.4375rem 0.75rem;
  margin: 0.0625rem 0;
  border-radius: var(--mk-radius-sm);
  color: var(--mk-color-sidebar-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
              color var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.nav-dropdown-item:hover {
  background: var(--mk-color-sidebar-bg-hover);
  color: var(--mk-color-sidebar-text-strong);
}
.nav-dropdown-item.active {
  background: var(--mk-color-sidebar-bg-active);
  color: var(--mk-color-sidebar-text-strong);
}

.go-to-web {
  flex: none;
  border-top: 1px solid var(--mk-color-sidebar-border);
  padding: 0.75rem;
  border-radius: 0;
}
.go-to-web:hover { background: var(--mk-color-sidebar-bg-hover); border-radius: 0; }

/* =============================================================
   1. User Menu (우상단 프로필 드롭다운)
   ============================================================= */
.mk-user-menu {
    position: fixed;
    top: var(--mk-space-4, 16px);
    right: var(--mk-space-4, 16px);
    z-index: var(--mk-z-sticky, 1100);
    font-family: var(--mk-font-sans, sans-serif);
}

.mk-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-2, 8px);
    padding: 6px 10px 6px 6px;
    background: var(--mk-color-bg, #ffffff);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-pill, 9999px);
    cursor: pointer;
    box-shadow: var(--mk-shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    color: var(--mk-color-text, #1a1a1a);
    font: inherit;
    font-size: var(--mk-font-size-sm, 0.875rem);
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
                border-color var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-user-trigger:hover {
    background: var(--mk-color-bg-subtle, #fafafa);
    border-color: var(--mk-color-border-strong, #d4d4d4);
}
.mk-user-trigger:focus-visible {
    outline: 2px solid var(--mk-color-brand-500);
    outline-offset: 2px;
}

.mk-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand, #ffffff);
    border-radius: 50%;
    font-size: 11px;
    font-weight: var(--mk-font-weight-semibold, 600);
    letter-spacing: 0.02em;
    flex: none;
}
.mk-user-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.mk-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--mk-font-weight-medium, 500);
}

.mk-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    padding: var(--mk-space-2, 8px);
    background: var(--mk-color-bg, #ffffff);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-lg, 14px);
    box-shadow: var(--mk-shadow-md, 0 10px 30px -8px rgb(0 0 0 / 0.15));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--mk-motion-duration-base) var(--mk-motion-ease-emphasized),
                transform var(--mk-motion-duration-base) var(--mk-motion-ease-emphasized),
                visibility 0s var(--mk-motion-duration-base);
}
.mk-user-dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    animation: mk-slideUp var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate);
}

.mk-user-info {
    display: flex;
    align-items: center;
    gap: var(--mk-space-3, 12px);
    padding: var(--mk-space-3, 12px);
}
.mk-user-info-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mk-user-info-text strong {
    color: var(--mk-color-text, #1a1a1a);
    font-size: var(--mk-font-size-sm, 0.875rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mk-user-info-text small {
    color: var(--mk-color-text-muted, #737373);
    font-size: var(--mk-font-size-xs, 0.75rem);
    margin-top: 2px;
}
.mk-user-role {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    background: var(--mk-color-info-bg, #dce1f9);
    color: var(--mk-color-info-text, #334bfa);
    font-size: 10px;
    font-weight: var(--mk-font-weight-semibold, 600);
    border-radius: var(--mk-radius-pill, 9999px);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: max-content;
}

.mk-user-divider {
    margin: var(--mk-space-1, 4px) 0;
    border: 0;
    border-top: 1px solid var(--mk-color-border, #e6e6e6);
}

.mk-user-item {
    display: flex;
    align-items: center;
    gap: var(--mk-space-2, 8px);
    width: 100%;
    padding: 10px var(--mk-space-3, 12px);
    background: transparent;
    color: var(--mk-color-text, #1a1a1a);
    border: none;
    border-radius: var(--mk-radius-md, 10px);
    font: inherit;
    font-size: var(--mk-font-size-sm, 0.875rem);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-user-item:hover {
    background: var(--mk-color-bg-muted, #f2f2f2);
}
.mk-user-item:focus-visible {
    outline: 2px solid var(--mk-color-brand-500);
    outline-offset: -1px;
}
.mk-user-item-danger {
    color: var(--mk-color-error-text, #991b1b);
}
.mk-user-item-danger:hover {
    background: var(--mk-color-error-bg, #fee2e2);
}

@media (max-width: 639px) {
    .mk-user-menu {
        top: var(--mk-space-2, 8px);
        right: var(--mk-space-2, 8px);
    }
    .mk-user-name { display: none; }
    .mk-user-trigger { padding: 4px; }
}

/* =============================================================
   2. AI 어시스턴트 (Sarvis) — 우측 대형 도킹 패널
   FAB(닫힘 상태의 진입점)은 우하단에 유지하고, 패널은 화면 우측 전체 높이를
   차지하는 도킹 패널로 연다. 데스크톱에서는 본문(body)을 함께 압축해
   "옆에 나란히 떠 있는" 느낌을 준다 — sarvis-chat.js의 openPanel()/closePanel()
   이 <body>에 mk-chat-open 클래스를 토글해서 제어.
   ============================================================= */
.mk-chat-widget {
    position: fixed;
    bottom: var(--mk-space-4, 16px);
    right: var(--mk-space-4, 16px);
    z-index: var(--mk-z-sticky, 1100);
    font-family: var(--mk-font-sans, sans-serif);
}

.mk-chat-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--mk-shadow-md);
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
                transform var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
                opacity var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-fab:hover {
    background: var(--mk-color-brand-600);
    transform: translateY(-2px);
}
.mk-chat-fab:active {
    transform: translateY(0);
}
.mk-chat-fab:focus-visible {
    outline: 2px solid var(--mk-color-brand-500);
    outline-offset: 3px;
}
.mk-chat-fab[aria-expanded="true"] {
    background: var(--mk-color-brand-700);
}
/* 패널이 열려있을 때 FAB는 패널 뒤에 가려지므로 숨김 */
body.mk-chat-open .mk-chat-fab { opacity: 0; visibility: hidden; pointer-events: none; }

.mk-chat-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--mk-color-error-text);
    color: var(--mk-color-text-on-brand);
    border-radius: 9px;
    border: 2px solid var(--mk-color-bg);
    font-size: 10px;
    font-weight: var(--mk-font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mk-chat-panel {
    position: fixed;
    inset: 0 0 0 auto;
    right: 0;
    width: min(460px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--mk-color-bg);
    border-left: 1px solid var(--mk-color-border);
    box-shadow: var(--mk-shadow-lg);
    overflow: hidden;
    z-index: var(--mk-z-modal);
    transform: translateX(100%);
    transition: transform var(--mk-motion-duration-slow) var(--mk-motion-ease-emphasized);
}
.mk-chat-panel--open {
    transform: translateX(0);
}
/* 데스크톱: 패널이 열리면 본문을 옆으로 밀어 뒷페이지가 계속 보이게 함 */
@media (min-width: 900px) {
    body {
        transition: margin-right var(--mk-motion-duration-slow) var(--mk-motion-ease-emphasized);
    }
    body.mk-chat-open {
        margin-right: 460px;
    }
}

.mk-chat-panel-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mk-space-3, 12px);
    padding: var(--mk-space-4, 16px) var(--mk-space-5, 20px);
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand);
}
.mk-chat-panel-title {
    display: flex;
    align-items: center;
    gap: var(--mk-space-3, 12px);
    min-width: 0;
}
.mk-chat-panel-title strong {
    display: block;
    font-size: var(--mk-font-size-lg, 1.125rem);
    font-weight: var(--mk-font-weight-semibold, 600);
}
.mk-chat-panel-title .mk-ai-name-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand);
    border-radius: var(--mk-radius-md);
    font-size: var(--mk-font-size-sm, 0.875rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.mk-chat-panel-title small {
    display: block;
    font-size: var(--mk-font-size-xs, 0.75rem);
    opacity: 0.85;
    margin-top: 2px;
}
.mk-chat-panel-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: var(--mk-font-weight-bold, 700);
    flex: none;
}
.mk-chat-panel-actions {
    display: flex;
    gap: 4px;
    flex: none;
}
.mk-chat-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #ffffff;
    border: none;
    border-radius: var(--mk-radius-sm, 6px);
    cursor: pointer;
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}
.mk-chat-icon-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -1px;
}

.mk-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--mk-space-4, 16px);
    background: var(--mk-color-bg-subtle, #fafafa);
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-3, 12px);
}

.mk-chat-empty {
    text-align: center;
    color: var(--mk-color-text-muted, #737373);
    padding: var(--mk-space-8, 32px) var(--mk-space-4, 16px);
}
.mk-chat-empty p {
    margin: 0 0 8px;
    font-size: var(--mk-font-size-sm, 0.875rem);
}
.mk-chat-empty p strong {
    color: var(--mk-color-text, #1a1a1a);
}
.mk-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: var(--mk-space-4, 16px);
}
.mk-chat-suggestion {
    padding: 6px 12px;
    background: var(--mk-color-bg, #ffffff);
    color: var(--mk-color-brand-500);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-pill, 9999px);
    font: inherit;
    font-size: var(--mk-font-size-xs, 0.75rem);
    cursor: pointer;
    transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-suggestion:hover {
    background: var(--mk-color-brand-50);
    border-color: var(--mk-color-brand-500);
}

.mk-chat-msg {
    display: flex;
    align-items: flex-end;
    gap: var(--mk-space-2, 8px);
    max-width: 100%;
}
.mk-chat-msg-user {
    justify-content: flex-end;
}
.mk-chat-msg-bot {
    justify-content: flex-start;
}
.mk-chat-msg-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand, #ffffff);
    border-radius: 50%;
    font-size: 10px;
    font-weight: var(--mk-font-weight-bold, 700);
}
.mk-chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: var(--mk-radius-lg, 14px);
    font-size: var(--mk-font-size-sm, 0.875rem);
    line-height: var(--mk-line-height-snug, 1.375);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.mk-chat-msg-user .mk-chat-bubble {
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand, #ffffff);
    border-bottom-right-radius: var(--mk-radius-sm, 6px);
}
.mk-chat-msg-bot .mk-chat-bubble {
    background: var(--mk-color-bg, #ffffff);
    color: var(--mk-color-text, #1a1a1a);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-bottom-left-radius: var(--mk-radius-sm, 6px);
}

.mk-chat-form {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--mk-space-3, 12px);
    background: var(--mk-color-bg, #ffffff);
    border-top: 1px solid var(--mk-color-border, #e6e6e6);
}
.mk-chat-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--mk-color-bg-muted, #f2f2f2);
    border: 1px solid transparent;
    border-radius: var(--mk-radius-pill, 9999px);
    font: inherit;
    font-size: var(--mk-font-size-sm, 0.875rem);
    color: var(--mk-color-text, #1a1a1a);
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
                border-color var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-input::placeholder {
    color: var(--mk-color-text-faint, #a3a3a3);
}
.mk-chat-input:hover {
    background: var(--mk-color-bg-subtle, #fafafa);
}
.mk-chat-input:focus {
    outline: none;
    background: var(--mk-color-bg, #ffffff);
    border-color: var(--mk-color-brand-500);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.mk-chat-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.mk-chat-send {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand, #ffffff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard),
                transform var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-send:hover {
    background: var(--mk-color-brand-600);
}
.mk-chat-send:active {
    transform: scale(0.96);
}
.mk-chat-send:focus-visible {
    outline: 2px solid var(--mk-color-brand-500);
    outline-offset: 2px;
}

/* 모바일: width: min(460px, 100vw)가 이미 풀스크린으로 자동 대응 — FAB 위치만 조정 */
@media (max-width: 639px) {
    .mk-chat-widget {
        bottom: var(--mk-space-2, 8px);
        right: var(--mk-space-2, 8px);
    }
}

/* prefers-reduced-motion 존중 */
@media (prefers-reduced-motion: reduce) {
    .mk-chat-fab, .mk-chat-fab:hover, .mk-chat-send:active { transform: none; }
}

/* =============================================================
   3. Chatbot Markdown rendering (.mk-md-content)
   ============================================================= */
.mk-md-content p { margin: 0 0 6px; }
.mk-md-content p:last-child { margin-bottom: 0; }
.mk-md-content strong { font-weight: var(--mk-font-weight-semibold, 600); }
.mk-md-content em { font-style: italic; }
.mk-md-content a.mk-md-link {
    color: var(--mk-color-text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mk-md-content code.mk-md-code {
    padding: 2px 6px;
    font-family: var(--mk-font-mono);
    font-size: 0.875em;
    background: var(--mk-color-bg-muted, #f2f2f2);
    border-radius: var(--mk-radius-xs, 4px);
}
.mk-md-content pre.mk-md-pre {
    margin: 8px 0;
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--mk-color-bg-muted, #f2f2f2);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-sm, 6px);
}
.mk-md-content pre.mk-md-pre code {
    padding: 0;
    background: transparent;
    font-family: var(--mk-font-mono);
    font-size: 0.85em;
}
.mk-md-content ul.mk-md-list {
    margin: 6px 0 6px 18px;
    padding: 0;
    list-style: disc;
}
.mk-md-content ul.mk-md-list li {
    margin: 2px 0;
}

/* =============================================================
   4. Chatbot feedback (thumbs up/down)
   ============================================================= */
.mk-chat-msg-body { display: flex; flex-direction: column; max-width: 78%; }
.mk-chat-msg-body .mk-chat-bubble { max-width: 100%; }
.mk-chat-feedback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 4px;
}
.mk-chat-fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: var(--mk-color-text-muted, #737373);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-sm, 6px);
    cursor: pointer;
    transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-chat-fb-btn:hover:not(:disabled) {
    color: var(--mk-color-brand-500);
    border-color: var(--mk-color-brand-500);
    background: var(--mk-color-brand-50);
}
.mk-chat-fb-btn:disabled { cursor: default; opacity: 0.5; }
.mk-chat-fb-btn--active {
    color: var(--mk-color-brand-500) !important;
    background: var(--mk-color-brand-50) !important;
    border-color: var(--mk-color-brand-500) !important;
    opacity: 1 !important;
}
.mk-chat-fb-btn[data-helpful="false"].mk-chat-fb-btn--active {
    color: var(--mk-color-error-text, #991b1b) !important;
    background: var(--mk-color-error-bg, #fee2e2) !important;
    border-color: var(--mk-color-error-text, #991b1b) !important;
}
.mk-chat-fb-status {
    font-size: 11px;
    color: var(--mk-color-text-muted, #737373);
    margin-left: 4px;
}

/* =============================================================
   5. Dashboard activity chart
   ============================================================= */
.activity-section {
    margin-top: var(--mk-space-6, 24px);
    padding: var(--mk-space-5, 20px);
    background: var(--mk-color-bg, #ffffff);
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-lg, 14px);
    box-shadow: var(--mk-shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
}
.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mk-space-4, 16px);
    gap: var(--mk-space-3, 12px);
    flex-wrap: wrap;
}
.activity-title {
    margin: 0;
    font-size: var(--mk-font-size-lg, 1.125rem);
    font-weight: var(--mk-font-weight-semibold, 600);
    color: var(--mk-color-text, #1a1a1a);
}
.activity-link {
    color: var(--mk-color-text-link);
    text-decoration: none;
    font-size: var(--mk-font-size-sm, 0.875rem);
    font-weight: var(--mk-font-weight-medium, 500);
}
.activity-link:hover { text-decoration: underline; }
.activity-chart-wrap { position: relative; height: 200px; }

/* =============================================================
   6. Notification Bell (우상단, user menu 옆)
   ============================================================= */
.mk-notif-bell {
    /* deprecated — floating bell 제거. 호환을 위해 룰만 남김. */
    display: none !important;
}
.mk-notif-panel--floating {
    position: fixed !important;
    top: 56px; right: 16px;
    z-index: var(--mk-z-sticky, 1100);
}
.mk-notif-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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: 50%;
    cursor: pointer;
    box-shadow: var(--mk-shadow-xs);
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-notif-trigger:hover { background: var(--mk-color-bg-subtle); }
.mk-notif-trigger:focus-visible { outline: 2px solid var(--mk-color-brand-500); outline-offset: 2px; }
.mk-notif-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--mk-color-error-text); color: #fff;
    border-radius: 9px; border: 2px solid var(--mk-color-bg);
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    animation: mk-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.mk-notif-panel {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    width: 360px; max-width: calc(100vw - 32px);
    max-height: 480px; overflow: hidden;
    background: var(--mk-color-bg);
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--mk-motion-duration-base) var(--mk-motion-ease-standard),
                transform var(--mk-motion-duration-base) var(--mk-motion-ease-standard),
                visibility 0s var(--mk-motion-duration-base);
    display: flex; flex-direction: column;
}
.mk-notif-panel--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    animation: mk-slideUp var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate);
}
.mk-notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mk-space-3) var(--mk-space-4);
    border-bottom: 1px solid var(--mk-color-border);
    color: var(--mk-color-text);
}
.mk-link-btn {
    background: none; border: none; color: var(--mk-color-brand-500);
    font: inherit; font-size: var(--mk-font-size-sm);
    cursor: pointer; padding: 4px 8px; border-radius: var(--mk-radius-sm);
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-link-btn:hover { background: var(--mk-color-brand-50); }
.mk-notif-list { flex: 1; overflow-y: auto; padding: var(--mk-space-2); }
.mk-notif-empty { padding: var(--mk-space-8); text-align: center; color: var(--mk-color-text-muted); font-size: var(--mk-font-size-sm); }
.mk-notif-item {
    display: flex; gap: var(--mk-space-3); padding: var(--mk-space-3); margin-bottom: 4px;
    border-radius: var(--mk-radius-md);
    text-decoration: none; color: inherit;
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-notif-item:hover { background: var(--mk-color-bg-muted); }
.mk-notif-item--unread { background: var(--mk-color-brand-50); }
.mk-notif-type { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--mk-color-text-muted); }
.mk-notif-type-INFO { background: var(--mk-color-brand-500); }
.mk-notif-type-SUCCESS { background: var(--mk-color-success-text); }
.mk-notif-type-WARN { background: var(--mk-color-warn-text); }
.mk-notif-type-ERROR { background: var(--mk-color-error-text); }
.mk-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-notif-body strong { font-size: var(--mk-font-size-sm); color: var(--mk-color-text); }
.mk-notif-body small { font-size: var(--mk-font-size-xs); color: var(--mk-color-text-muted); }
.mk-notif-body time { font-size: 10px; color: var(--mk-color-text-faint); margin-top: 2px; }

@media (max-width: 768px) {
    .mk-notif-bell { right: calc(var(--mk-space-2, 8px) + 60px); top: var(--mk-space-2, 8px); }
}

/* =============================================================
   7. Command Palette (Cmd+K / Ctrl+K / "/")
   ============================================================= */
.mk-cmdk { position: fixed; inset: 0; z-index: var(--mk-z-modal); pointer-events: none; opacity: 0; transition: opacity var(--mk-motion-duration-base) var(--mk-motion-ease-standard); }
.mk-cmdk--open { opacity: 1; pointer-events: auto; }
.mk-cmdk-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.45); }
.mk-cmdk-modal {
    position: relative;
    margin: 80px auto 0;
    max-width: 560px;
    background: var(--mk-color-bg);
    border-radius: var(--mk-radius-lg);
    box-shadow: var(--mk-shadow-lg);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform var(--mk-motion-duration-base) var(--mk-motion-ease-emphasized);
}
.mk-cmdk--open .mk-cmdk-modal {
    transform: translateY(0);
    animation: mk-slideUp var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate);
}
.mk-cmdk-input {
    width: 100%; padding: 14px 18px;
    background: transparent;
    border: none; border-bottom: 1px solid var(--mk-color-border);
    font: inherit; font-size: var(--mk-font-size-lg);
    color: var(--mk-color-text);
    outline: none;
}
.mk-cmdk-input::placeholder { color: var(--mk-color-text-faint); }
.mk-cmdk-list { list-style: none; margin: 0; padding: var(--mk-space-2); max-height: 360px; overflow-y: auto; }
.mk-cmdk-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-radius: var(--mk-radius-md);
    cursor: pointer; transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-cmdk-item--active, .mk-cmdk-item:hover { background: var(--mk-color-bg-muted); }
.mk-cmdk-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mk-font-size-sm); color: var(--mk-color-text); }
.mk-cmdk-icon { display: inline-flex; flex: none; color: var(--mk-color-text-muted); }
.mk-cmdk-hint { font-size: var(--mk-font-size-xs); color: var(--mk-color-text-muted); font-family: var(--mk-font-mono); }
.mk-cmdk-empty { padding: var(--mk-space-8); text-align: center; color: var(--mk-color-text-muted); font-size: var(--mk-font-size-sm); }
.mk-cmdk-footer {
    padding: var(--mk-space-2) var(--mk-space-4);
    background: var(--mk-color-bg-subtle);
    border-top: 1px solid var(--mk-color-border);
    font-size: var(--mk-font-size-xs);
    color: var(--mk-color-text-muted);
}
.mk-cmdk-footer kbd {
    display: inline-block; padding: 2px 6px;
    background: var(--mk-color-bg-muted); color: var(--mk-color-text);
    border: 1px solid var(--mk-color-border);
    border-radius: 3px;
    font-family: var(--mk-font-mono); font-size: 10px; margin: 0 2px;
}

/* =============================================================
   8. Global Modal (modal.js)
   ============================================================= */
.mk-modal-root {
    position: fixed; inset: 0; z-index: var(--mk-z-modal, 1300);
    pointer-events: none; opacity: 0;
    transition: opacity var(--mk-motion-duration-base) var(--mk-motion-ease-standard);
}
.mk-modal-root--open { opacity: 1; pointer-events: auto; }
.mk-modal-backdrop { position: absolute; inset: 0; background: rgba(15,15,15,0.45); }
.mk-modal-dialog {
    position: relative;
    margin: 60px auto;
    max-width: 560px;
    width: calc(100% - 32px);
    background: var(--mk-color-bg, #ffffff);
    border-radius: var(--mk-radius-lg, 14px);
    box-shadow: var(--mk-shadow-lg, 0 25px 50px -12px rgb(0 0 0 / 0.25));
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform var(--mk-motion-duration-base) var(--mk-motion-ease-emphasized);
}
.mk-modal-root--open .mk-modal-dialog {
    transform: translateY(0);
    animation: mk-fadeIn var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate);
}
.mk-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mk-space-4, 16px) var(--mk-space-5, 20px);
    border-bottom: 1px solid var(--mk-color-border, #e6e6e6);
}
.mk-modal-title { margin: 0; font-size: var(--mk-font-size-lg, 1.125rem); font-weight: var(--mk-font-weight-semibold, 600); color: var(--mk-color-text); }
.mk-modal-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent; color: var(--mk-color-text-muted, #737373);
    border: none; border-radius: var(--mk-radius-sm, 6px);
    cursor: pointer;
}
.mk-modal-close:hover { background: var(--mk-color-bg-muted, #f2f2f2); color: var(--mk-color-text); }
.mk-modal-body {
    padding: var(--mk-space-5, 20px);
    max-height: 60vh; overflow-y: auto;
    color: var(--mk-color-text);
}
.mk-modal-body p { margin: 0 0 var(--mk-space-3, 12px); line-height: var(--mk-line-height-normal, 1.6); }
.mk-modal-body p:last-child { margin-bottom: 0; }
.mk-modal-body label {
    display: block; margin-bottom: 4px;
    font-size: var(--mk-font-size-sm); font-weight: 500;
    color: var(--mk-color-text);
}
.mk-modal-body .mk-modal-input,
.mk-modal-body input[type="text"],
.mk-modal-body input[type="email"],
.mk-modal-body input[type="password"],
.mk-modal-body input[type="datetime-local"],
.mk-modal-body input[type="date"],
.mk-modal-body select,
.mk-modal-body textarea {
    width: 100%; padding: 10px 12px;
    background: var(--mk-color-bg);
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-md, 10px);
    font: inherit; font-size: var(--mk-font-size-base);
    color: var(--mk-color-text);
    margin-bottom: var(--mk-space-3, 12px);
    box-sizing: border-box;
}
.mk-modal-body input:focus,
.mk-modal-body select:focus,
.mk-modal-body textarea:focus {
    outline: none;
    border-color: var(--mk-color-brand-500);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.mk-modal-body textarea { min-height: 80px; resize: vertical; }
.mk-modal-actions {
    display: flex; justify-content: flex-end; gap: var(--mk-space-2, 8px);
    padding: var(--mk-space-3, 12px) var(--mk-space-5, 20px);
    background: var(--mk-color-bg-subtle, #fafafa);
    border-top: 1px solid var(--mk-color-border, #e6e6e6);
}
.mk-modal-btn {
    padding: 8px 16px;
    border: 1px solid var(--mk-color-border, #e6e6e6);
    border-radius: var(--mk-radius-md, 10px);
    font: inherit; font-size: var(--mk-font-size-sm);
    cursor: pointer; font-weight: 500;
    transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}
.mk-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mk-modal-btn--secondary { background: var(--mk-color-bg, #fff); color: var(--mk-color-text); }
.mk-modal-btn--secondary:hover:not(:disabled) { background: var(--mk-color-bg-muted, #f2f2f2); }
.mk-modal-btn--primary {
    background: var(--mk-color-brand-500); color: var(--mk-color-text-on-brand, #fff);
    border-color: var(--mk-color-brand-500);
}
.mk-modal-btn--primary:hover:not(:disabled) { background: var(--mk-color-brand-600); }
.mk-modal-btn--danger {
    background: var(--mk-color-error-text, #991b1b); color: #fff;
    border-color: var(--mk-color-error-text);
}
.mk-modal-btn--danger:hover:not(:disabled) { background: #7f1d1d; }

/* ============================
   Skeleton loading screens (D7)
   ============================ */
.mk-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--mk-color-bg-muted) 0%,
    var(--mk-color-bg-subtle) 50%,
    var(--mk-color-bg-muted) 100%
  );
  background-size: 200% 100%;
  animation: mk-skeletonShimmer 1.4s var(--mk-motion-ease-standard) infinite;
  border-radius: var(--mk-radius-sm);
  min-height: 1em;
}

@keyframes mk-skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Variants */
.mk-skeleton--text { height: 1em; }
.mk-skeleton--text.mk-skeleton--heading { height: 1.5em; }
.mk-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.mk-skeleton--avatar-sm { width: 28px; height: 28px; border-radius: 50%; }
.mk-skeleton--button { height: 40px; width: 100px; border-radius: var(--mk-radius-md); }
.mk-skeleton--card { width: 100%; height: 120px; border-radius: var(--mk-radius-lg); }
.mk-skeleton--image { width: 100%; aspect-ratio: 16/9; border-radius: var(--mk-radius-md); }
.mk-skeleton--rounded { border-radius: var(--mk-radius-pill); }

/* Width helpers */
.mk-skeleton--w-25 { width: 25%; }
.mk-skeleton--w-50 { width: 50%; }
.mk-skeleton--w-75 { width: 75%; }
.mk-skeleton--w-100 { width: 100%; }

/* Container utilities */
.mk-skeleton-stack > * + * { margin-top: var(--mk-space-2); }

/* Respect prefers-reduced-motion (global override in tokens.css will suppress animation) */
@media (prefers-reduced-motion: reduce) {
  .mk-skeleton {
    animation: none;
    opacity: 0.6;
  }
}

/* ========================================================================
   PWA Install Button (D5)
   ======================================================================== */
.mk-pwa-install {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--mk-color-brand-500);
    color: var(--mk-color-text-on-brand, #ffffff);
    border: 1px solid var(--mk-color-brand-500);
    border-radius: var(--mk-radius-md, 10px);
    font: inherit;
    font-size: var(--mk-font-size-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}

.mk-pwa-install:hover:not(:disabled) {
    background: var(--mk-color-brand-600);
    border-color: var(--mk-color-brand-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.mk-pwa-install:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

.mk-pwa-install:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .mk-pwa-install {
        background: var(--mk-color-brand-500);
        color: #ffffff;
    }

    .mk-pwa-install:hover:not(:disabled) {
        background: var(--mk-color-brand-600);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
}

/* Responsive: hide on very small screens */
@media (max-width: 480px) {
    .mk-pwa-install {
        padding: 6px 12px;
        font-size: var(--mk-font-size-xs, 0.75rem);
    }
}

/* ========================================================================
   D6 Motion & Animation System (R14b)
   ======================================================================== */

/* Keyframe animations with mk- prefix */
@keyframes mk-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mk-slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mk-slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes mk-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Animation utility classes */
.mk-anim-fade-in {
  animation: mk-fadeIn var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate) forwards;
}

.mk-anim-slide-up {
  animation: mk-slideUp var(--mk-motion-duration-base) var(--mk-motion-ease-decelerate) forwards;
}

.mk-anim-slide-down {
  animation: mk-slideDown var(--mk-motion-duration-base) var(--mk-motion-ease-accelerate) forwards;
}

.mk-anim-pulse {
  animation: mk-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Transition utility classes */
.mk-transition-smooth {
  transition: all var(--mk-motion-duration-base) var(--mk-motion-ease-standard);
}

.mk-transition-fast {
  transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}

/* ========================================================================
   Language Picker (i18n, R16a)
   ======================================================================== */
.mk-lang-picker {
  position: fixed;
  top: var(--mk-space-4, 16px);
  right: calc(var(--mk-space-4, 16px) + 60px);
  z-index: var(--mk-z-sticky, 1100);
}

.mk-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--mk-color-bg, #ffffff);
  color: var(--mk-color-text, #1a1a1a);
  border: 1px solid var(--mk-color-border, #e6e6e6);
  border-radius: var(--mk-radius-md, 10px);
  font-size: var(--mk-font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}

.mk-lang-toggle:hover {
  background: var(--mk-color-bg-muted, #f2f2f2);
  border-color: var(--mk-color-text-muted, #737373);
}

.mk-lang-toggle:focus-visible {
  outline: 2px solid var(--mk-color-brand-500);
  outline-offset: 2px;
}

.mk-lang-label {
  min-width: 70px;
  text-align: center;
}

.mk-lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 140px;
  background: var(--mk-color-bg, #ffffff);
  border: 1px solid var(--mk-color-border, #e6e6e6);
  border-radius: var(--mk-radius-md, 10px);
  box-shadow: var(--mk-shadow-md, 0 10px 15px -3px rgb(0 0 0 / 0.1));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
  pointer-events: none;
}

.mk-lang-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mk-lang-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  color: var(--mk-color-text, #1a1a1a);
  border: none;
  cursor: pointer;
  font-size: var(--mk-font-size-sm, 0.875rem);
  transition: background var(--mk-motion-duration-fast) var(--mk-motion-ease-standard);
}

.mk-lang-option:hover {
  background: var(--mk-color-bg-muted, #f2f2f2);
}

.mk-lang-option[data-active] {
  background: var(--mk-color-brand-50);
  color: var(--mk-color-brand-500);
  font-weight: 600;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .mk-lang-toggle {
    background: var(--mk-color-bg, #1a1a1a);
    color: var(--mk-color-text, #ffffff);
    border-color: var(--mk-color-border, #333333);
  }

  .mk-lang-toggle:hover {
    background: var(--mk-color-bg-muted, #2a2a2a);
    border-color: var(--mk-color-text-muted, #999999);
  }

  .mk-lang-dropdown {
    background: var(--mk-color-bg, #1a1a1a);
    border-color: var(--mk-color-border, #333333);
  }

  .mk-lang-option {
    color: var(--mk-color-text, #ffffff);
  }

  .mk-lang-option:hover {
    background: var(--mk-color-bg-muted, #2a2a2a);
  }

  .mk-lang-option[data-active] {
    background: var(--mk-color-brand-900, #1e3a8a);
    color: var(--mk-color-brand-300, #93c5fd);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .mk-lang-picker {
    top: var(--mk-space-2, 8px);
    right: var(--mk-space-2, 8px);
  }

  .mk-lang-toggle {
    padding: 6px 10px;
    font-size: var(--mk-font-size-xs, 0.75rem);
  }

  .mk-lang-label {
    display: none;
  }
}

/* =============================
   D8 Utility Classes (R21 BATCH 2)
   ============================= */

/* Analytics / Status card base */
.mk-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mk-space-3);
}

.mk-stat-card-item {
  padding: var(--mk-space-3);
  background: var(--mk-color-bg-subtle);
  border-radius: var(--mk-radius-md);
  text-align: center;
}

.mk-stat-label {
  font-size: var(--mk-font-size-sm);
  color: var(--mk-color-text-muted);
  margin-bottom: var(--mk-space-1);
}

.mk-stat-value {
  font-size: var(--mk-font-size-2xl);
  font-weight: var(--mk-font-weight-semibold);
}

/* Loading placeholder cell */
.mk-loading-cell {
  text-align: center;
  padding: var(--mk-space-5);
}

/* Standard input padding */
.mk-input-base {
  padding: var(--mk-space-2) var(--mk-space-3);
}

/* Bordered separator helper */
.mk-section-divider {
  margin-top: var(--mk-space-4);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-color-border);
}

/* =============================================================
   3. Unified Top Nav (intro 통일) — .top-nav 와 .navbar 공용
   ============================================================= */
.top-nav .top-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.nav-logo .logo-text {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--mk-color-brand-500);
  border-radius: var(--mk-radius-md);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mk-color-text-on-brand);
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}
.nav-link {
  text-decoration: none;
  color: var(--mk-color-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color var(--mk-motion-duration-base, 200ms) var(--mk-motion-ease-standard, ease);
}
.nav-link:hover,
.nav-link.active { color: var(--mk-color-brand-500); }
.nav-link-cta {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--mk-color-brand-500);
  color: var(--mk-color-brand-500);
  border-radius: var(--mk-radius-md, 10px);
  transition: background var(--mk-motion-duration-base, 200ms) var(--mk-motion-ease-standard, ease),
              color var(--mk-motion-duration-base, 200ms) var(--mk-motion-ease-standard, ease);
}
.nav-link-cta:hover { background: var(--mk-color-brand-500); color: #fff; }

/* ===== Settings menu in top nav (⚙️ 설정 버튼) ===== */
.nav-settings-wrap { position: relative; display: inline-flex; }
.nav-alert-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    background: transparent;
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-md, 10px);
    color: var(--mk-color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    font: inherit;
    margin-right: 4px;
}
.nav-alert-btn .mk-notif-badge {
    top: -4px; right: -4px;
}
.nav-alert-btn:hover {
    color: var(--mk-color-brand-500);
    border-color: var(--mk-color-brand-500);
    background: var(--mk-color-bg-subtle);
}
.nav-alert-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}
.nav-settings-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: transparent;
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-md, 10px);
    color: var(--mk-color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
}
.nav-settings-btn-label { line-height: 1; }
.nav-settings-btn:hover,
.nav-settings-btn[aria-expanded="true"] {
    color: var(--mk-color-brand-500);
    border-color: var(--mk-color-brand-500);
    background: var(--mk-color-bg-subtle);
}
.nav-settings-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.18);
}
.nav-settings-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100;
    min-width: 220px; padding: 12px;
    background: var(--mk-color-bg);
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-lg, 16px);
    box-shadow: var(--mk-shadow-lg, 0 12px 28px rgba(0,0,0,0.12));
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-settings-panel--open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-settings-section { display: flex; flex-direction: column; gap: 6px; }
.nav-settings-label {
    font-size: var(--mk-font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--mk-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.nav-settings-options { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-settings-opt {
    flex: 1 1 auto;
    padding: 6px 10px;
    font: inherit; font-size: var(--mk-font-size-sm, 0.875rem);
    color: var(--mk-color-text);
    background: var(--mk-color-bg-subtle);
    border: 1px solid var(--mk-color-border);
    border-radius: var(--mk-radius-sm, 8px);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.nav-settings-opt:hover { border-color: var(--mk-color-brand-500); color: var(--mk-color-brand-500); }
.nav-settings-opt.is-active {
    color: #fff;
    background: var(--mk-color-brand-500);
    border-color: var(--mk-color-brand-500);
}
.nav-settings-divider {
    height: 1px; background: var(--mk-color-border);
    margin: 10px 0;
}
/* 알림 종(navAlertBtn)이 app-shell-extras.js에 의해 이 슬롯 안으로 옮겨져 렌더링된다. */
.nav-settings-alert-row { display: flex; align-items: center; justify-content: space-between; }
.nav-settings-alert-row .nav-alert-btn { margin-right: 0; }
@media (max-width: 600px) {
    .nav-settings-panel { right: -8px; min-width: 200px; }
}

@media (max-width: 767px) {
  .top-nav .top-nav-container { gap: 0.75rem; }
  .nav-links { gap: 1rem; }
  .nav-links .nav-link:not(.nav-link-cta) { display: none; }
  .nav-link-cta { padding: 0.4375rem 0.75rem; font-size: 0.875rem; }
}

/* Base .top-nav (sourced into app-shell so all pages can use the unified nav) */
.top-nav {
  background: var(--mk-color-bg);
  border-bottom: 1px solid var(--mk-color-border);
  padding: 0.75rem 0;
}
.top-nav .top-nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .top-nav .top-nav-container { padding: 0 1rem; }
}

/* User menu — 인라인 모드 (nav-links 내부) */
.mk-user-menu.mk-user-menu--inline {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}
.mk-user-menu.mk-user-menu--inline .mk-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
}
.mk-user-menu.mk-user-menu--inline { position: relative; }