/*
  ZIPBORO Admin Center
  위치: /volume2/nvme/web/zipboro/assets/css/zipboro.admin.css
*/

:root{
  --za-navy:#071426;
  --za-navy2:#0b1b33;
  --za-blue:#2563eb;
  --za-green:#16a34a;
  --za-red:#ef4444;
  --za-orange:#f97316;
  --za-purple:#7c3aed;
  --za-cyan:#0891b2;
  --za-ink:#0f172a;
  --za-muted:#64748b;
  --za-line:#e5edf5;
  --za-bg:#f6f9fd;
  --za-card:#fff;
  --za-shadow:0 16px 38px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  background:var(--za-bg);
  color:var(--za-ink);
}
button,input,select{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}

.za-app{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
}

.za-sidebar{
  background:linear-gradient(180deg,var(--za-navy),var(--za-navy2));
  color:#fff;
  padding:22px 14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}

.za-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 24px;
  font-weight:950;
  font-size:22px;
}
.za-brand span{
  display:block;
  font-size:13px;
  opacity:.75;
  font-weight:800;
}

.za-menu{
  display:grid;
  gap:8px;
}
.za-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:12px;
  color:rgba(255,255,255,.82);
  font-weight:850;
}
.za-menu a.active,
.za-menu a:hover{
  background:#2563eb;
  color:#fff;
}
.za-menu small{
  margin-left:auto;
  min-width:24px;
  text-align:center;
  background:#ef4444;
  color:#fff;
  border-radius:999px;
  padding:2px 6px;
  font-size:11px;
}

.za-main{
  min-width:0;
}
.za-topbar{
  height:72px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--za-line);
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:20;
}
.za-topbar h1{
  margin:0;
  font-size:24px;
}
.za-search{
  margin-left:auto;
  width:430px;
  position:relative;
}
.za-search input{
  width:100%;
  border:1px solid var(--za-line);
  border-radius:999px;
  padding:12px 44px 12px 18px;
  background:#fff;
}
.za-search button{
  position:absolute;
  right:6px;
  top:6px;
  height:34px;
  width:34px;
  border:0;
  border-radius:50%;
  background:var(--za-blue);
  color:#fff;
}
.za-admin-user{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.za-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e2e8f0;
  display:grid;
  place-items:center;
}

.za-page{
  padding:26px 28px 60px;
}

.za-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin-bottom:18px;
}
.za-kpi{
  border-radius:20px;
  padding:20px;
  background:#fff;
  box-shadow:var(--za-shadow);
  border:1px solid var(--za-line);
  min-height:128px;
}
.za-kpi b{
  display:block;
  margin-bottom:10px;
  font-size:14px;
  color:#475569;
}
.za-kpi strong{
  display:block;
  font-size:30px;
  letter-spacing:-.04em;
}
.za-kpi span{
  display:block;
  margin-top:8px;
  color:#16a34a;
  font-size:13px;
  font-weight:900;
}
.za-kpi.blue{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff}
.za-kpi.green{background:linear-gradient(135deg,#16a34a,#14b8a6);color:#fff}
.za-kpi.orange{background:linear-gradient(135deg,#f97316,#f59e0b);color:#fff}
.za-kpi.purple{background:linear-gradient(135deg,#7c3aed,#6366f1);color:#fff}
.za-kpi.red{background:linear-gradient(135deg,#ef4444,#ec4899);color:#fff}
.za-kpi.blue b,.za-kpi.green b,.za-kpi.orange b,.za-kpi.purple b,.za-kpi.red b,
.za-kpi.blue span,.za-kpi.green span,.za-kpi.orange span,.za-kpi.purple span,.za-kpi.red span{
  color:rgba(255,255,255,.86);
}

.za-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
  align-items:start;
}
.za-card{
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:20px;
  box-shadow:var(--za-shadow);
  padding:18px;
}
.za-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.za-card-head h2{
  margin:0;
  font-size:20px;
}
.za-card-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
}
.za-card-head .actions{
  display:flex;
  gap:8px;
}
.za-card-head button,
.za-filter-row button,
.za-action{
  border:1px solid var(--za-line);
  background:#fff;
  border-radius:10px;
  padding:9px 12px;
  font-weight:900;
}
.za-action.primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
.za-action.danger{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
}
.za-action.green{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.za-action.orange{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#ea580c;
}

.za-chart-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.za-chart{
  min-height:230px;
}
.za-donut{
  width:158px;
  height:158px;
  border-radius:50%;
  background:conic-gradient(#2563eb 0 42%,#14b8a6 42% 62%,#f59e0b 62% 78%,#ef4444 78% 90%,#cbd5e1 90% 100%);
  margin:8px auto 14px;
  display:grid;
  place-items:center;
}
.za-donut span{
  width:92px;
  height:92px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:950;
}
.za-line-chart,
.za-bar-chart{
  height:160px;
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(37,99,235,.10),transparent),
    repeating-linear-gradient(0deg,#eef2f7 0,#eef2f7 1px,transparent 1px,transparent 38px);
  position:relative;
  overflow:hidden;
}
.za-line-chart svg{
  position:absolute;
  inset:0;
}
.za-bar-chart{
  display:flex;
  align-items:end;
  gap:16px;
  padding:24px;
}
.za-bar-chart i{
  flex:1;
  display:block;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
}

.za-filter-row{
  display:grid;
  grid-template-columns:160px 160px 160px minmax(0,1fr) auto auto;
  gap:10px;
  margin-bottom:14px;
}
.za-filter-row input,
.za-filter-row select{
  border:1px solid var(--za-line);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}

.za-table-wrap{
  overflow:auto;
}
.za-table{
  width:100%;
  border-collapse:collapse;
  min-width:1080px;
}
.za-table th,
.za-table td{
  border-bottom:1px solid var(--za-line);
  padding:13px 10px;
  text-align:left;
  font-size:13px;
  white-space:nowrap;
}
.za-table th{
  color:#475569;
  font-weight:950;
  background:#f8fafc;
}
.za-table tr:hover td{
  background:#f8fbff;
}
.za-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:950;
}
.za-badge.green{background:#ecfdf5;color:#16a34a}
.za-badge.orange{background:#fff7ed;color:#ea580c}
.za-badge.red{background:#fef2f2;color:#dc2626}
.za-badge.blue{background:#eff6ff;color:#2563eb}
.za-badge.purple{background:#f5f3ff;color:#7c3aed}
.za-badge.gray{background:#f1f5f9;color:#475569}
.za-use{
  font-weight:900;
}
.za-slot{
  display:grid;
  gap:4px;
}
.za-slot span{
  display:inline-flex;
  gap:4px;
  align-items:center;
}
.za-mini-actions{
  display:flex;
  gap:6px;
}
.za-mini-actions button,
.za-mini-actions a{
  border:1px solid var(--za-line);
  background:#fff;
  color:#0f172a;
  border-radius:8px;
  padding:6px 9px;
  font-size:12px;
  font-weight:900;
}
.za-mini-actions .primary{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.za-mini-actions .danger{
  background:#fef2f2;
  color:#dc2626;
  border-color:#fecaca;
}

.za-detail-panel{
  position:sticky;
  top:92px;
  display:grid;
  gap:14px;
}
.za-office-photo{
  height:138px;
  border-radius:16px;
  background:linear-gradient(135deg,#dbeafe,#e2e8f0);
}
.za-info-list{
  display:grid;
  gap:9px;
}
.za-info-list div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.za-info-list span{
  color:#64748b;
}
.za-progress-list{
  display:grid;
  gap:14px;
}
.za-progress{
  display:grid;
  gap:6px;
}
.za-progress .top{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:900;
}
.za-progress .bar{
  height:8px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
}
.za-progress .bar i{
  display:block;
  height:100%;
  background:#2563eb;
  border-radius:999px;
}
.za-progress.green .bar i{background:#16a34a}
.za-progress.orange .bar i{background:#f97316}
.za-progress.red .bar i{background:#ef4444}
.za-side-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.za-side-actions button{
  border:1px solid var(--za-line);
  background:#fff;
  border-radius:10px;
  padding:11px;
  font-weight:900;
}
.za-side-actions .primary{background:#2563eb;color:#fff;border-color:#2563eb}
.za-side-actions .danger{background:#ef4444;color:#fff;border-color:#ef4444}

.za-alert-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:18px;
}
.za-alert-card{
  background:#fff;
  border:1px solid var(--za-line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--za-shadow);
}
.za-alert-card h3{
  margin:0 0 12px;
}
.za-alert-card p{
  margin:0 0 12px;
  color:#64748b;
  font-size:13px;
}
.za-alert-card button{
  border:1px solid var(--za-line);
  background:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-weight:900;
}

.za-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.za-form-grid label{
  display:grid;
  gap:8px;
  font-size:13px;
  color:#475569;
  font-weight:900;
}
.za-form-grid input,
.za-form-grid select,
.za-form-grid textarea{
  border:1px solid var(--za-line);
  border-radius:10px;
  padding:11px;
  background:#fff;
}
.za-form-grid .wide{grid-column:1/-1}

@media(max-width:1280px){
  .za-kpi-grid{grid-template-columns:repeat(3,1fr)}
  .za-chart-grid{grid-template-columns:1fr}
  .za-layout{grid-template-columns:1fr}
  .za-detail-panel{position:static}
}
@media(max-width:860px){
  .za-app{grid-template-columns:1fr}
  .za-sidebar{position:static;height:auto}
  .za-menu{grid-template-columns:repeat(2,1fr)}
  .za-topbar{padding:0 16px}
  .za-search{display:none}
  .za-page{padding:18px 16px 50px}
  .za-kpi-grid{grid-template-columns:1fr}
  .za-filter-row{grid-template-columns:1fr}
  .za-alert-grid{grid-template-columns:1fr}
}

/* 운영 설정 페이지 */
.za-settings-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:18px;align-items:start}.za-settings-grid .za-card:nth-child(2){grid-column:1 / -1}.za-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.za-form-grid label{display:grid;gap:7px;color:#475569;font-weight:900;font-size:13px}.za-form-grid input,.za-form-grid select,.za-form-grid textarea{width:100%;border:1px solid var(--za-line);border-radius:12px;background:#fff;padding:12px 13px;color:#0f172a;outline:none}.za-form-grid input:focus,.za-form-grid select:focus,.za-form-grid textarea:focus{border-color:var(--za-blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.za-form-grid .wide{grid-column:1 / -1}.za-button-row{display:flex!important;align-items:center;gap:10px}.za-inline-msg{font-size:13px;font-weight:900;color:#64748b}.za-inline-msg.ok{color:#16a34a}.za-inline-msg.bad{color:#ef4444}.za-side-actions a{display:block;text-align:center;border:1px solid var(--za-line);border-radius:12px;padding:11px 12px;font-weight:900;background:#fff}.za-side-actions .primary,.za-side-actions button.primary{background:var(--za-blue);color:#fff;border-color:var(--za-blue)}
@media(max-width:900px){.za-settings-grid{grid-template-columns:1fr}.za-form-grid{grid-template-columns:1fr}}


/* ZIPBORO admin dropdown/action modal patch */
.za-ai-use-input{width:72px;border:1px solid var(--za-line);border-radius:8px;padding:6px 8px;font-weight:900;text-align:right;background:#fff;color:#0f172a}
.za-ai-limit{font-weight:900;color:#64748b}
.za-ai-plan-note{display:block;margin-top:4px;color:#64748b;font-size:11px}
.za-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.za-modal-backdrop.open{display:flex}
.za-modal-box{width:min(440px,100%);background:#fff;border:1px solid var(--za-line);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25);padding:20px}
.za-modal-box h3{margin:0 0 6px;font-size:20px}
.za-modal-box p{margin:0 0 16px;color:#64748b;font-size:13px;line-height:1.5}
.za-modal-fields{display:grid;gap:12px}
.za-modal-field label{display:block;margin-bottom:6px;font-size:13px;font-weight:950;color:#334155}
.za-modal-field input,.za-modal-field select{width:100%;border:1px solid var(--za-line);border-radius:12px;padding:11px 12px;background:#fff;color:#0f172a}
.za-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.za-modal-actions button{border:1px solid var(--za-line);background:#fff;border-radius:10px;padding:10px 14px;font-weight:950}
.za-modal-actions .primary{background:#2563eb;border-color:#2563eb;color:#fff}