/* ================================================
   admin_partner — 보조 스타일 (design-system.css 기반)
   탑탭 + 회사 정보 + 읽기 전용 배너
   ================================================ */

/* design-system.css는 import 순서로 먼저 로드되어 토큰 사용 가능 */

/* ★★ 2026-08-25 (마스터: "상단에 메뉴와 컨텐츠영역의 차이가 없어 이상한데.
   회색이나 뭔가 눈에 잘보이게, 그리고 선택된 메뉴부분도 눈에 잘보이게")
   종전엔 상단바가 흰색(--card #ffffff), 본문이 #f5f7fa 라 **거의 같은 색**이었고
   경계선(--border #e6e8eb)도 옅어서 어디까지가 메뉴인지 구분이 안 됐다.
   선택 탭도 글씨색+2px 밑줄뿐이라 눈에 안 들어왔다.
   → 상단바를 **짙은 남회색**으로 깔아 본문(밝은 회색)과 확실히 가른다.
     선택 탭은 **배경을 채우고 밑줄을 3px 밝은 파랑**으로 준다. */
#ptn-topbar {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center;
  height: var(--header-h);
  background: #1f2937;                 /* 본문 #f5f7fa 와 확실히 대비 */
  border-bottom: 1px solid #0f1620;
  box-shadow: 0 2px 8px rgba(15, 22, 32, .28);
  padding: 0 var(--space-5);
  gap: var(--space-5);
}

.ptn-brand {
  display: flex; align-items: center; gap: var(--space-2);
  padding-right: var(--space-5);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.ptn-brand-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.ptn-brand-name { font-weight: 700; font-size: 14px; line-height: 1.2; color: #fff; }
.ptn-brand-role {
  font-size: 10.5px;
  background: var(--primary);
  color: white;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 2px;
  display: inline-block;
}

.ptn-tabs { display: flex; flex: 1; height: 100%; overflow-x: auto; }
.ptn-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--space-4);
  height: 100%;
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: color .12s, background-color .12s, border-color .12s;
  white-space: nowrap;
}
.ptn-tab i { font-size: 14px; }
.ptn-tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
/* ★ 선택된 메뉴 — 배경을 채우고 밑줄을 굵게. 글씨색만으로는 안 보인다. */
.ptn-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border-bottom-color: #4d9fff;
  font-weight: 700;
}

.ptn-topbar-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.ptn-company-info { text-align: right; }
.ptn-company-name { font-weight: 600; font-size: 13px; color: #fff; }
.ptn-company-meta { font-size: 11px; color: rgba(255,255,255,.62); margin-top: 1px; }
.ptn-logout {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .72);
}
.ptn-logout:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* 읽기 전용 배너 — 항상 보이는 권한 표시 */
.ptn-readonly-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--space-5);
  background: #fef3c7;
  color: #92400e;
  font-size: 12.5px;
  border-bottom: 1px solid #fde68a;
}
.ptn-readonly-banner i { font-size: 14px; }

/* 사이트 카드 (대시보드용 — admin_partner.html 목업 참고) */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}
.site-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.site-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.site-card.offline { opacity: .85; }
.site-card-header { padding: var(--space-4) var(--space-5) var(--space-3); }
.site-name { font-weight: 700; font-size: 15px; }
.site-addr { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.site-stats { display: flex; gap: var(--space-5); padding: 0 var(--space-5) var(--space-4); }
.site-stat-item { text-align: center; }
.site-stat-val { font-size: 18px; font-weight: 700; line-height: 1; }
.site-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.site-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--space-5);
  background: #f9fafb;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted);
}

/* admin_partner는 사이드바를 사용하지 않음 — main을 grid가 아닌 일반 컨테이너로 */
body.partner #app { display: block; }
body.partner #main { padding: var(--space-6); max-width: 1400px; margin: 0 auto; }

/* ─── 모바일 대응 ─── */
@media (max-width: 768px) {
  /* 상단탭: 가로 넘침 방지 — 스크롤 격리 */
  #ptn-topbar {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: var(--space-3);
    padding: 0 var(--space-3);
  }
  .ptn-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ptn-tabs::-webkit-scrollbar { display: none; }
  .ptn-tab { padding: 0 10px; font-size: 12px; }
  .ptn-tab span { display: none; } /* 아이콘만 표시 */
  .ptn-company-info { display: none; }
  body.partner #main { padding: var(--space-3); }
}

@media (max-width: 480px) {
  .ptn-brand-name { display: none; }
  .ptn-brand-role { display: none; }
}