/* ZERO-Planner v2.6 — Friendly Game Tokens
   블루프린트의 친근한 게임 톤. 둥근 카드 + 컬러풀 + 이모지 친화.
   "옷장에서 옷 고르듯" 부담 없는 UI.
*/
:root {
  /* base palette — 라이트 모드 게임화 */
  --bg:           #F8F9FA;        /* 페이지 배경 (블루프린트 기본) */
  --bg-soft:      #F1F3F5;
  --surface:      #FFFFFF;        /* 카드 배경 */
  --surface-2:    #F8F9FA;
  --line:         #E5E7EB;
  --line-soft:    #F1F3F5;

  /* navy spot (브랜드 메인) */
  --navy-50:      #EBF5FB;
  --navy-100:     #D6EAF8;
  --navy-500:     #2E86C1;
  --navy-700:     #1A5276;
  --navy-800:     #154360;
  --brand:        #1B4F72;        /* primary */
  --brand-soft:   #2E86C1;

  /* text */
  --ink:          #111827;        /* 본문 (gray-900) */
  --ink-2:        #4B5563;        /* 보조 (gray-600) */
  --ink-3:        #9CA3AF;        /* 약함 (gray-400) */
  --ink-4:        #D1D5DB;        /* 매우 약함 */

  /* signals — 게임 색상 */
  --killer-bg:    #FEE2E2;        /* KILLER ITEM 배경 (적색 박스) */
  --killer-text:  #991B1B;        /* KILLER 텍스트 */
  --killer:       #DC2626;        /* KILLER 강조 */
  --killer-hover: #B91C1C;
  --warning:      #F59E0B;        /* 노랑 경고 */
  --warning-bg:   #FEF3C7;
  --warning-text: #92400E;
  --success:      #10B981;        /* 초록 완료 */
  --success-bg:   #D1FAE5;
  --success-text: #065F46;
  --info:         #3B82F6;
  --info-bg:      #DBEAFE;

  /* gold (premium 왕관 표시) */
  --gold-50:      #FFFBEB;
  --gold-100:     #FEF3C7;
  --gold-500:     #F59E0B;
  --gold-600:     #D97706;
  --gold-700:     #B45309;

  /* type */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* radius — 친근하게 둥글게 */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;        /* 기본 카드 = rounded-2xl */
  --r-xl:   20px;
  --r-full: 999px;

  /* shadow — soft shadow */
  --sh-card:    0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --sh-card-h:  0 4px 6px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.08);
  --sh-killer:  0 4px 24px rgba(220, 38, 38, 0.15);
  --sh-killer-h: 0 4px 32px rgba(220, 38, 38, 0.30);

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

/* === primitives === */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* === card (블루프린트 스타일) === */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  border: 1px solid var(--line);
}
.card-soft {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.card-killer {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 2px solid var(--killer);
  box-shadow: var(--sh-killer);
  animation: pulse-killer 2s ease-in-out infinite;
  overflow: hidden;
}
@keyframes pulse-killer {
  0%, 100% { box-shadow: var(--sh-killer); }
  50%      { box-shadow: var(--sh-killer-h); }
}

/* === pill / chip / badge === */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-soft);
  color: var(--ink-2);
}
.pill-killer { background: var(--killer-bg); color: var(--killer-text); }
.pill-warn   { background: var(--warning-bg); color: var(--warning-text); }
.pill-success{ background: var(--success-bg); color: var(--success-text); }
.pill-info   { background: var(--info-bg); color: #1E40AF; }
.pill-brand  { background: var(--navy-50); color: var(--brand); }

/* premium 왕관 배지 (캡컷 스타일) */
.premium-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #FBBF24, #D97706);
  border-radius: 4px;
  font-size: 11px;
  color: #fff;
}

/* === button === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--sans);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27,79,114,.25);
}
.btn-primary:hover { background: var(--navy-800); transform: translateY(-1px); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }
.btn-danger {
  background: var(--killer);
  color: #fff;
}
.btn-danger:hover { background: var(--killer-hover); }
.btn-success {
  background: var(--success);
  color: #fff;
}

/* === D-Day badge (큰 강조) === */
.dday-big {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.5px;
}
.dday-killer { color: var(--killer); }

/* === progress === */
.progress {
  height: 8px;
  background: var(--bg-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width .4s ease;
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%, transparent 75%);
  background-size: 1rem 1rem;
}

/* === avatar === */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--navy-50);
  color: var(--brand);
  font-weight: 700;
  font-size: 12px;
}
.avatar-brand { background: var(--brand); color: #fff; }
.avatar-soft  { background: var(--bg-soft); color: var(--ink-2); }

/* === topbar (mobile) === */
.topbar-mobile {
  position: sticky; top: 0; z-index: 50;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}

/* === tab bar (bottom mobile only) === */
/* 2026-05-11: desktop에서 fixed-bottom tabbar 숨김 — PC UI 완성도 개선 */
.tabbar { display: none; }
@media (max-width: 768px) {
  .tabbar {
    display: grid;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 64px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 50;
  }
}
.tabbar .tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 10px; font-weight: 600;
  color: var(--ink-3);
  border: none; background: transparent; cursor: pointer;
  text-decoration: none;
}
.tabbar .tab.active { color: var(--brand); }
.tabbar .tab .tab-ico { font-size: 22px; }

/* === sidebar (admin desktop) === */
.side {
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  height: 100vh;
  position: sticky; top: 0;
  padding: 20px 12px;
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.side-item:hover { background: var(--bg-soft); color: var(--ink); }
.side-item.active {
  background: var(--navy-50);
  color: var(--brand);
  font-weight: 700;
}

/* === utilities === */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.acenter { align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.f1 { flex: 1; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-base { font-size: 14px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.font-bold { font-weight: 700; }
.font-semi { font-weight: 600; }
.text-muted { color: var(--ink-2); }
.text-soft  { color: var(--ink-3); }
.text-brand { color: var(--brand); }
.text-killer{ color: var(--killer); }

/* dot indicators */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.done { background: var(--success); }
.dot.doing { background: var(--killer); animation: pulse-dot 1.5s infinite; }
.dot.wait { background: var(--ink-4); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* mobile safe area */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ========= Admin 모바일 반응형 ========= */
@media (max-width: 768px) {
  /* Admin Topbar → 컴팩트 */
  .admin-topbar {
    height: auto !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .admin-topbar nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .admin-topbar nav a { padding: 6px 10px !important; font-size: 12px !important; white-space: nowrap !important; }
  .admin-topbar .live-clock { display: none !important; }
  .admin-topbar .brand-text { font-size: 14px !important; }

  /* Admin Side → 하단 드로어 or 숨김 */
  .admin-side {
    position: fixed !important;
    left: 0;
    bottom: 0;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: 40vh;
    border-right: none !important;
    border-top: 1px solid var(--line);
    z-index: 30;
    transform: translateY(calc(100% - 44px));
    transition: transform 0.25s ease;
    overflow: auto;
    padding: 12px !important;
  }
  .admin-side.open { transform: translateY(0); }
  .admin-side::before {
    content: "⬆ 필터/상태 보기";
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    position: sticky;
    top: 0;
    margin: -12px -12px 10px;
  }
  .admin-side.open::before { content: "⬇ 닫기"; }

  /* Admin 본문 KPI 그리드 → 모바일 2열 */
  .admin-main .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .admin-main .kpi-grid > div { padding: 10px !important; }
  .admin-main .kpi-grid .mono { font-size: 20px !important; }

  /* 테이블형 리스트 → 카드형 변환 */
  .admin-table-header { display: none !important; }
  .admin-table-row {
    display: block !important;
    padding: 12px !important;
    border-top: 1px solid var(--line);
  }
  .admin-table-row > span {
    display: inline-block;
    margin-right: 10px;
    text-align: left !important;
  }

  /* 우측 패널 숨김 → 메인 하단에 배치 */
  .admin-right-panel {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--line);
  }
  .admin-content-row { flex-direction: column !important; }

  /* 헤더 높이 축소 */
  .admin-page-header { padding: 12px 16px !important; }
  .admin-page-header h1 { font-size: 18px !important; }
  .admin-page-header .row { flex-wrap: wrap; gap: 6px !important; }
  .admin-main { padding: 16px !important; }

  /* Desktop 컴포넌트가 viewport 초과 방지 */
  body { overflow-x: hidden; }
}

/* 아주 작은 화면 */
@media (max-width: 480px) {
  .admin-main .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ============ A1 Teams · 테이블 그리드 + 스켈레톤 ============ */
.a1-row {
  display: grid;
  grid-template-columns: 70px 1.5fr 1fr 0.8fr 70px 70px 1fr 110px;
  gap: 12px;
}
.a1-body-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
@keyframes a1pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7;  }
}

/* 태블릿 */
@media (max-width: 960px) {
  .a1-row {
    grid-template-columns: 60px 1.3fr 1fr 60px 60px 90px 90px;
  }
  .a1-row > :nth-child(4),  /* 담당자 숨김 */
  .a1-head > :nth-child(4) { display: none; }
}

/* 모바일: 카드형으로 전환 */
@media (max-width: 640px) {
  .a1-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .a1-head { display: none !important; }
  .a1-body-row {
    padding: 14px !important;
  }
  .a1-body-row > span:nth-child(1) { order: 1; font-size: 11px !important; opacity: 0.7; }
  .a1-body-row > span:nth-child(5) { order: 2; text-align: right !important; font-size: 15px !important; }
  .a1-body-row > span:nth-child(2) { order: 3; grid-column: 1 / -1; font-size: 15px !important; }
  .a1-body-row > span:nth-child(3) { order: 4; grid-column: 1 / -1; }
  .a1-body-row > span:nth-child(4) { display: none; }
  .a1-body-row > span:nth-child(6) { order: 5; }
  .a1-body-row > span:nth-child(7) { order: 6; grid-column: 1 / -1; }
  .a1-body-row > span:nth-child(8) { order: 7; grid-column: 1 / -1; text-align: left !important; opacity: 0.6; }
}

/* KPI 그리드 모바일 튜닝 — auto-fit이 이미 반응형이지만 최소폭 보장 */
@media (max-width: 640px) {
  .admin-main .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .admin-main .kpi-grid .card { padding: 10px !important; }
  .admin-main .kpi-grid .mono { font-size: 22px !important; }
}

/* 검색 input focus */
.admin-main input[type="search"]:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--navy-50);
}

/* ============================================================
   🌙 다크 모드 — html[data-theme="dark"]
   ============================================================ */
html[data-theme="dark"] {
  --bg:           #0F172A;
  --bg-soft:      #1E293B;
  --surface:      #1E293B;
  --surface-2:    #0F172A;
  --line:         #334155;
  --line-soft:    #1E293B;

  --navy-50:      #1E3A52;
  --navy-100:     #254A66;
  --navy-500:     #5FA8D3;
  --navy-700:     #3E82B0;
  --navy-800:     #2F6D98;
  --brand:        #5FA8D3;
  --brand-soft:   #7BB8DD;

  --ink:          #F1F5F9;
  --ink-2:        #CBD5E1;
  --ink-3:        #94A3B8;
  --ink-4:        #475569;

  --killer-bg:    #4C1D24;
  --killer-text:  #FCA5A5;
  --killer:       #F87171;
  --killer-hover: #EF4444;

  --warning:      #FBBF24;
  --warning-bg:   #42302E;
  --warning-text: #FCD34D;

  --success:      #34D399;
  --success-bg:   #1F3D34;
  --success-text: #6EE7B7;

  --info:         #60A5FA;
  --info-bg:      #1E3A5F;

  --sh-card:    0 1px 3px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
  --sh-card-h:  0 4px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.35);
}
html[data-theme="dark"] body { color-scheme: dark; }
html[data-theme="dark"] img[src*="logo-zero-planner"] {
  filter: brightness(1.1);
  mix-blend-mode: screen;
  background: transparent;
}

/* ============================================================
   🔤 폰트 크기 스케일 — html[data-fontsize]
   ============================================================ */
html[data-fontsize="sm"] { font-size: 14px; }
html[data-fontsize="md"] { font-size: 16px; }   /* 기본 */
html[data-fontsize="lg"] { font-size: 18px; }
html[data-fontsize="xl"] { font-size: 20px; }

/* ============================================================
   ⚙️ 환경설정 모달 (ZPPrefs)
   ============================================================ */
#zp-prefs-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  font-family: var(--sans);
}
#zp-prefs-modal.open { display: block; }
.zp-prefs-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.zp-prefs-dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 460px);
  max-height: 90vh; overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
}
.zp-prefs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.zp-prefs-head h2 {
  margin: 0; font-size: 16px; font-weight: 800;
}
.zp-prefs-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; color: var(--ink-3);
  padding: 6px 10px; border-radius: var(--r-sm);
}
.zp-prefs-close:hover { background: var(--bg-soft); color: var(--ink); }
.zp-prefs-body { padding: 8px 20px 12px; }
.zp-prefs-group { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.zp-prefs-group:last-child { border-bottom: none; }
.zp-prefs-label {
  font-size: 13px; font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.zp-prefs-opts {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.zp-prefs-opts button {
  flex: 1; min-width: 72px;
  padding: 10px 12px;
  background: var(--surface); color: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--sans);
}
.zp-prefs-opts button:hover { background: var(--bg-soft); }
.zp-prefs-opts button[aria-pressed="true"] {
  background: var(--brand); color: #fff;
  border-color: var(--brand);
}
.zp-prefs-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.zp-prefs-btn-ghost {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 12px; font-weight: 600;
  text-decoration: none; text-align: center;
  cursor: pointer;
  font-family: var(--sans);
}
.zp-prefs-btn-ghost:hover { background: var(--line); }
.zp-prefs-btn-primary {
  padding: 10px 18px;
  background: var(--brand);
  color: #fff; border: none;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  font-family: var(--sans);
}
.zp-prefs-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.zp-prefs-hint {
  font-size: 11px; color: var(--ink-3);
  margin-top: 8px;
}