/* ==========================================================================
   MemoPod 화면 다듬기 (2026-10-28)
   style.css 위에 덮어쓴다. 구조·id·기능은 그대로 두고 색·글꼴·간격·모서리만 정리한다.
   방향: 차분한 무채색(off-black) 바탕 + 강조색 하나(코발트), 네온·광채·과한 그라데이션 제거.
   ========================================================================== */

:root {
  --bg-dark: #0c0d10;
  --bg-surface: #121318;
  --bg-surface-elevated: #191b21;
  --bg-card: #14161b;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(122, 146, 255, 0.38);
  --border-glow: rgba(122, 146, 255, 0.22);

  --primary: #7a92ff;
  --primary-ink: #0c0d10;
  --primary-glow: rgba(122, 146, 255, 0.16);
  --primary-soft: rgba(122, 146, 255, 0.12);
  --accent-cyan: #7a92ff;
  --accent-emerald: #4fbf8f;
  --accent-amber: #e0a84a;
  --accent-rose: #e5707b;

  --text-primary: #eceef2;
  --text-secondary: #a3a7b1;
  --text-muted: #6f737d;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { -webkit-font-smoothing: antialiased; }

body {
  background: var(--bg-dark) !important;
  background-image: none !important;
  letter-spacing: -0.006em;
}

/* 장식 배경(오로라·잡음·격자)은 끈다 */
.aur, .grain, .grid-bg { display: none !important; }

::selection { background: rgba(122, 146, 255, 0.35); }

/* ---------- 상단 바 ---------- */
.memo-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  padding: 0 24px !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
  background: rgba(12, 13, 16, 0.84) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
}

.brand-group { gap: 10px !important; flex-shrink: 0; }
.brand-badge-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center;
  font-size: 15px !important;
  font-weight: 800;
  color: var(--primary-ink) !important;
  background: var(--primary) !important;
  box-shadow: none !important;
  border: 0 !important;
}
.brand-name {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.brand-tag {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.view-tabs {
  gap: 2px !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.tab-btn {
  white-space: nowrap !important;
  gap: 7px !important;
  padding: 7px 13px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.tab-btn:hover { color: var(--text-primary) !important; background: rgba(255, 255, 255, 0.04) !important; }
.tab-btn.active {
  color: var(--text-primary) !important;
  background: #23252c !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.tab-btn svg { opacity: 0.8; }
.todo-counter-badge {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.header-actions { gap: 8px !important; flex-wrap: nowrap !important; min-width: 0; }
.header-actions > * { flex-shrink: 0; }

.btn-primary-action,
.btn-header-ghost,
.cmd-k-trigger,
.btn-live-sync,
.identity-badge,
.btn-header-icon {
  height: 36px !important;
  white-space: nowrap !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn-primary-action {
  padding: 0 14px !important;
  background: var(--primary) !important;
  color: var(--primary-ink) !important;
  border: 0 !important;
}
.btn-primary-action:hover { filter: brightness(1.08); }
.btn-header-ghost,
.cmd-k-trigger,
.btn-live-sync,
.identity-badge,
.btn-header-icon {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
.btn-header-ghost { padding: 0 12px !important; display: inline-flex !important; align-items: center; }
.btn-header-ghost:hover,
.cmd-k-trigger:hover,
.btn-live-sync:hover,
.identity-badge:hover,
.btn-header-icon:hover { color: var(--text-primary) !important; border-color: var(--border-strong) !important; background: rgba(255, 255, 255, 0.06) !important; }
.btn-primary-action:active,
.btn-header-ghost:active,
.tab-btn:active { transform: translateY(1px); }
.btn-header-icon { width: 36px !important; padding: 0 !important; display: grid !important; place-items: center; }
.cmd-k-trigger { padding: 0 10px !important; min-width: 0 !important; width: auto !important; }
.kbd-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
.btn-live-sync { padding: 0 12px !important; }
.btn-live-sync.active { color: var(--accent-emerald) !important; border-color: rgba(79, 191, 143, 0.28) !important; background: rgba(79, 191, 143, 0.07) !important; }
.live-pulse-dot { box-shadow: none !important; }
.identity-badge { padding: 0 12px !important; }
.identity-badge.on { color: var(--primary) !important; border-color: var(--border-accent) !important; background: var(--primary-soft) !important; }

/* 좁은 화면: 덜 중요한 글자부터 줄인다 */
@media (max-width: 1360px) {
  .btn-header-ghost { display: none !important; }
}
@media (max-width: 1200px) {
  .live-status-text, .cmd-k-trigger > span:not(.kbd-badge) { display: none !important; }
  .tab-btn > span:not(.todo-counter-badge) { display: none !important; }
  .tab-btn { padding: 7px 10px !important; }
}
@media (max-width: 900px) {
  .identity-badge #identityText { display: none; }
  .memo-header { padding: 0 14px !important; }
}

.privacy-bar {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 7px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}
.privacy-bar b { color: var(--text-secondary); font-weight: 600; }

/* ---------- 빠른 입력 ---------- */
.spotlight-input-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 12px 40px -24px rgba(0, 0, 0, 0.6) !important;
}
.spotlight-input-box:focus-within { border-color: var(--border-accent) !important; box-shadow: 0 0 0 4px var(--primary-glow) !important; }
.spotlight-input { color: var(--text-primary) !important; font-size: 15px !important; }
.spotlight-input::placeholder { color: var(--text-muted) !important; }
.spotlight-type-select,
.btn-spotlight-voice {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.btn-spotlight-submit {
  background: var(--primary) !important;
  color: var(--primary-ink) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}
.os-strip-label { color: var(--text-muted) !important; }
.os-strip-badge {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.os-strip-badge.os-highlight { color: var(--text-primary) !important; border-color: var(--border-strong) !important; }

/* 태그 줄 */
.tag-bar-section { border: 0 !important; background: transparent !important; }
.tag-pill {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.tag-pill:hover { color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
.tag-pill.active { background: var(--text-primary) !important; color: var(--bg-dark) !important; border-color: var(--text-primary) !important; }

/* ---------- 대시보드 ---------- */
.action-hero-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 28px !important;
}
.action-hero-card::before, .action-hero-card::after { display: none !important; }
.action-hero-title {
  font-family: var(--font-main) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.action-hero-subtitle { color: var(--text-muted) !important; font-size: 13.5px !important; }
.btn-refresh-briefing {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.btn-refresh-briefing:hover { color: var(--text-primary) !important; }

.action-metrics-grid { gap: 12px !important; }
.metric-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  padding: 18px 20px !important;
}
.metric-card::before, .metric-card::after { display: none !important; }
.metric-label { color: var(--text-secondary) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
.metric-value {
  font-family: var(--font-main) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
.metric-card.urgent .metric-value { color: var(--accent-rose) !important; }
.metric-card.success .metric-value { color: var(--accent-emerald) !important; }
.metric-desc { color: var(--text-muted) !important; font-size: 12px !important; }
.completion-bar-track { background: rgba(255, 255, 255, 0.06) !important; height: 4px !important; border-radius: 999px !important; }
.completion-bar-fill { background: var(--primary) !important; box-shadow: none !important; border-radius: 999px !important; }

.briefing-insight-box {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

.planner-partner-banner {
  background: transparent !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  padding: 18px 22px !important;
}
.planner-partner-banner::before, .planner-partner-banner::after { display: none !important; }
.partner-pill-tag {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.partner-banner-title { color: var(--text-primary) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.partner-banner-desc { color: var(--text-muted) !important; font-size: 13px !important; }
.btn-partner-transfer {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.actions-toolbar { gap: 12px !important; }
.action-pill {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.action-pill:hover { color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
.action-pill.active { background: var(--text-primary) !important; color: var(--bg-dark) !important; border-color: var(--text-primary) !important; }
.action-search-input {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.action-search-input::placeholder { color: var(--text-muted) !important; }
.action-search-input:focus { border-color: var(--border-accent) !important; outline: none; }
.btn-clean-completed,
.btn-bulk-planner {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.btn-bulk-planner { color: var(--text-primary) !important; border-color: var(--border-strong) !important; }

.top3-focus-section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}

/* ---------- 메모 카드·에디터·서랍 ---------- */
.memo-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.memo-card:hover { border-color: var(--border-strong) !important; transform: translateY(-2px); }
.memo-summary-text { color: var(--text-primary) !important; letter-spacing: -0.015em; }
.memo-tag-item {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
}
.type-pill { border-radius: 6px !important; box-shadow: none !important; }

.editor-pane, .preview-pane {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
}
.editor-toolbar { border-bottom: 1px solid var(--border-subtle) !important; background: transparent !important; }
.tool-btn { border-radius: 8px !important; box-shadow: none !important; }
.editor-textarea { color: var(--text-primary) !important; }

.memo-drawer {
  background: #111216 !important;
  border-left: 1px solid var(--border-strong) !important;
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.8) !important;
}
.drawer-section-title { color: var(--text-muted) !important; letter-spacing: 0 !important; }
.btn-planner-sync {
  background: var(--primary) !important;
  color: var(--primary-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.cmd-palette {
  background: #15161b !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85) !important;
}
.cmd-result-item { border-radius: 10px !important; }

.graph-stats-hud, .graph-hud-controls {
  background: rgba(17, 18, 22, 0.88) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.hud-btn { border-radius: 8px !important; box-shadow: none !important; }

/* 모달 */
.modal-card {
  background: #14151a !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85) !important;
}

.toast-bar {
  background: #1b1d23 !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8) !important;
}

/* 움직임을 줄이고 싶은 사람에게는 이동 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
  .memo-card:hover { transform: none; }
  .btn-primary-action:active, .btn-header-ghost:active, .tab-btn:active { transform: none; }
}

/* ---------- 할 일 카드 ---------- */
.top3-focus-section { padding: 18px 20px !important; }
.top3-title { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.top3-progress-badge {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.top3-empty-slot, .top3-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}
.top3-card { border-style: solid !important; color: var(--text-primary) !important; }
.top3-card-text { color: var(--text-primary) !important; }

.action-items-grid { gap: 8px !important; }
.action-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--ease);
}
.action-card:hover { border-color: var(--border-strong) !important; transform: none !important; }
.action-card.completed { opacity: 0.5; }
.action-card-text { color: var(--text-primary) !important; font-weight: 600 !important; letter-spacing: -0.015em; }
.action-card-meta { color: var(--text-muted) !important; }
.action-card-checkbox {
  border: 1.5px solid var(--border-strong) !important;
  background: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.action-card-checkbox.checked { background: var(--accent-emerald) !important; border-color: var(--accent-emerald) !important; }
.action-note-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  padding: 0 !important;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.action-note-link:hover { color: var(--text-primary) !important; }
.action-btn-sm, .action-btn-focus, .action-btn-sticky, .action-btn-planner, .action-btn-dismiss {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}
.action-btn-sm:hover, .action-btn-focus:hover, .action-btn-sticky:hover, .action-btn-planner:hover { color: var(--text-primary) !important; border-color: var(--border-strong) !important; }
.action-btn-focus.pinned { color: var(--accent-amber) !important; border-color: rgba(224, 168, 74, 0.35) !important; }
.action-btn-dismiss:hover { color: var(--accent-rose) !important; border-color: rgba(229, 112, 123, 0.35) !important; }
.badge-deadline { box-shadow: none !important; border-radius: 6px !important; }
.type-pill { background: rgba(255, 255, 255, 0.05) !important; color: var(--text-secondary) !important; border: 0 !important; }

/* ---------- 휴대폰: 상단 바를 두 줄로 (위: 로고·버튼, 아래: 화면 전환) ---------- */
@media (max-width: 720px) {
  .memo-header {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .memo-header .brand-group { flex: 1 1 auto; min-width: 0; }
  .memo-header .header-actions { order: 2; overflow-x: auto; scrollbar-width: none; }
  .memo-header .header-actions::-webkit-scrollbar { display: none; }
  .memo-header .view-tabs { order: 3; width: 100%; display: flex !important; overflow-x: auto; }
  .memo-header .tab-btn { flex: 1 0 auto; justify-content: center; }
  .memo-header .tab-btn > span:not(.todo-counter-badge) { display: inline !important; }
  .btn-header-ghost, .header-device-sync, .cmd-k-trigger { display: none !important; }
  .btn-primary-action span { display: none; }
  .btn-primary-action { width: 36px !important; padding: 0 !important; justify-content: center; }
  .identity-badge { padding: 0 10px !important; }
  .privacy-bar { font-size: 11.5px; padding: 6px 12px; }
  .action-hero-card { padding: 20px !important; border-radius: 16px !important; }
  .action-hero-title { font-size: 22px !important; }
  .metric-value { font-size: 28px !important; }
  .os-status-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .os-strip-badge { white-space: nowrap !important; flex: 0 0 auto; }
}
.os-strip-label { white-space: nowrap !important; }