/* ════════════════════════════════════════════════════════════
   seastar-family-tokens.css — SEASTAR 패밀리룩(구조패턴) 헬퍼
   ────────────────────────────────────────────────────────────
   마스터 결정: SEcMS의 "구조패턴"(샤프 2px · 고밀도 리스트 · 대문자 헤더 ·
   tabular-nums · 일관 아이콘)만 채택하고 360의 아이보리/골드 브랜드는 유지.
   → 기존 style.css 를 덮어쓰지 않는 ADDITIVE 헬퍼. 컴포넌트가 .fl-* 클래스를 opt-in.
   참조: E:\code-project\SEcMS (config/uiTokens.ts, index.css, CableListTab)
   ════════════════════════════════════════════════════════════ */
:root {
  /* 패밀리 구조 토큰 — SEcMS 기하/밀도 + 360 브랜드색 매핑 */
  --fl-radius:    2px;     /* SEcMS 샤프(2px). 360 데이터 컴포넌트에만 적용 */
  --fl-radius-pill: 999px;
  --fl-accent:    var(--gold, #c9962a);   /* SEcMS amber 자리에 360 골드 */
  --fl-accent-2:  #a87c1f;
  --fl-row-h:     22px;    /* 고밀도 행높이 */
  --fl-cell-py:   6px;
  --fl-cell-px:   8px;
  --fl-ease:      80ms ease;
  --fl-mono:      var(--font-mono, 'JetBrains Mono','Share Tech Mono',monospace);
  --fl-head-fs:   11px;
  --fl-cell-fs:   12px;
}

/* ── 패밀리 데이터 리스트/테이블 (SEcMS 고밀도 그리드 풍, 360 토큰) ── */
.fl-table { width: 100%; border-collapse: collapse; font-size: var(--fl-cell-fs); }
.fl-table thead th {
  text-align: left; white-space: nowrap; user-select: none;
  font-size: var(--fl-head-fs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text2, #6b6457);
  background: var(--bg2, #faf7f0);
  padding: var(--fl-cell-py) var(--fl-cell-px);
  border-bottom: 2px solid var(--fl-accent);
  border-right: 1px solid var(--border, #e4dccb);
}
.fl-table tbody td {
  padding: 4px var(--fl-cell-px);
  border-bottom: 1px solid var(--border, #e4dccb);
  border-right: 1px solid var(--border, #e4dccb);
  color: var(--text, #2b2820); vertical-align: middle;
}
.fl-table tbody tr:nth-child(even) td { background: rgba(43,40,32,.025); }
.fl-table tbody tr:hover td { background: rgba(201,150,42,.10); }
.fl-table tbody tr.is-selected td { background: rgba(201,150,42,.18); }
.fl-num { text-align: right; font-family: var(--fl-mono); font-variant-numeric: tabular-nums; }

/* ── 패밀리 섹션 헤더(대문자 + 골드 언더라인) ── */
.fl-head {
  font-size: var(--fl-head-fs); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text2, #6b6457);
  padding-bottom: 4px; border-bottom: 2px solid var(--fl-accent);
}

/* ── 패밀리 칩/배지(샤프 2px, 골드) ── */
.fl-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  padding: 1px 8px; border-radius: var(--fl-radius);
  color: var(--fl-accent); background: rgba(201,150,42,.12);
  border: 1px solid rgba(201,150,42,.40);
}

/* ── 패밀리 아이콘 규약(전 제품 동일: 24x24, stroke 2, currentColor) ── */
.fl-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.fl-icon svg, svg.fl-icon { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 패밀리 버튼(샤프 2px) — 데이터/툴바 영역 opt-in ── */
.fl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font-size: 12px; font-weight: 700;
  border-radius: var(--fl-radius); cursor: pointer;
  border: 1px solid var(--border2, #d9cfb8); background: var(--bg, #faf7f0);
  color: var(--text, #2b2820); transition: all var(--fl-ease);
}
.fl-btn:hover { border-color: var(--fl-accent); background: rgba(201,150,42,.08); }
.fl-btn.fl-btn-primary { background: var(--fl-accent); border-color: var(--fl-accent-2); color: #fff; }
.fl-btn.fl-btn-primary:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════════════════════
   ★ SEcMS 품질 — 실제 360 버튼/리스트에 직접 적용 (토큰만 만들고 끝 X)
   SEcMS 버튼 언어: 그라데이션 깊이 + 샤프 2px + 인셋 하이라이트 +
   고밀도 패딩 + 골드 액센트 + 80ms. 아이보리/골드 브랜드 유지.
   ════════════════════════════════════════════════════════════ */
/* 1차 액션(설계자모드·새프로젝트·신청·로그인진입): 골드 그라데이션 */
.btn-demo-designer,
.hub-btn-new,
.signin-invite-btn,
.access-submit,
.btn-deploy {
  background: linear-gradient(180deg, #d8a83e 0%, #c08e2a 55%, #b8851f 100%) !important;
  border: 1px solid #8a6515 !important;
  border-radius: 2px !important;
  color: #1a1208 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(43,40,32,.22) !important;
  transition: filter 80ms ease, box-shadow 80ms ease !important;
}
.btn-demo-designer:hover,
.hub-btn-new:hover,
.signin-invite-btn:hover,
.access-submit:hover,
.btn-deploy:hover {
  filter: brightness(1.07) !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 2px 6px rgba(138,101,21,.30) !important;
}
.btn-demo-designer:active,
.hub-btn-new:active,
.btn-deploy:active { filter: brightness(.96) !important; }

/* 2차/고스트(둘러보기·취소·로그아웃): 크림 면 + 골드 보더 hover */
.btn-demo-viewer,
.access-cancel,
.btn-signout {
  background: linear-gradient(180deg, #fffdf8, #f3eddf) !important;
  border: 1px solid var(--border2, #d9cfb8) !important;
  border-radius: 2px !important;
  color: var(--text, #2b2820) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
  transition: all 80ms ease !important;
}
.btn-demo-viewer:hover,
.access-cancel:hover,
.btn-signout:hover {
  border-color: var(--gold, #c9962a) !important;
  color: #8a6515 !important;
  background: linear-gradient(180deg, #fffdf8, #faf4e6) !important;
  transform: none !important;
}

/* 아이콘 액션 버튼(카드 다운로드/삭제/배포): 샤프 2px + 면 정돈 */
.hub-card-act {
  border-radius: 2px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--border2, #d9cfb8) !important;
  color: var(--text2, #6b6457) !important;
  box-shadow: 0 1px 2px rgba(43,40,32,.10) !important;
  transition: all 80ms ease !important;
}
.hub-card-act:hover { border-color: var(--gold, #c9962a) !important; color: #8a6515 !important; }
.hub-card-pub.is-pub { background: linear-gradient(180deg,#d8a83e,#b8851f) !important; border-color:#8a6515 !important; color:#1a1208 !important; }
.hub-card-del:hover { border-color: var(--red,#c4462f) !important; color: var(--red,#c4462f) !important; }

/* 모드 카드(설계자/뷰어 진입): 샤프화 + 골드 강조 보더 */
.mode-card { border-radius: 4px !important; }
.mode-card.designer:not(.locked) { border-color: var(--gold, #c9962a) !important; }

/* ════ SEcMS 품질 — 관리자 리스트 행(디자이너/멤버/도메인/초대/신청/로그) ════
   SEcMS path-item 풍: 흰 면 + 골드 좌측 액센트 3px + 샤프 2px + 고밀도 + hover.
   기존 회색 바("구리") 교체. */
.designer-row, .member-row, .domain-row, .invite-row, .adm-req-row, .log-row {
  background: #ffffff !important;
  border: 1px solid var(--border, #e4dccb) !important;
  border-left: 3px solid var(--gold, #c9962a) !important;
  border-radius: 2px !important;
  padding: 8px 12px !important;
  margin-bottom: 4px !important;
  box-shadow: 0 1px 2px rgba(43,40,32,.05) !important;
  color: var(--text, #2b2820) !important;
  transition: background 80ms ease, border-left-color 80ms ease !important;
}
.designer-row:hover, .member-row:hover, .domain-row:hover,
.invite-row:hover, .adm-req-row:hover, .log-row:hover {
  background: rgba(201,150,42,.07) !important;
  border-left-color: #b8851f !important;
}
.adm-req-row.st-pending { border-left-color: var(--blue, #2f6db5) !important; }
.adm-req-row.st-approved { border-left-color: var(--teal, #2f9e6f) !important; }
.adm-req-row.st-rejected { border-left-color: var(--red, #c4462f) !important; }
/* 행 내 이메일/이름 텍스트 정돈 */
.designer-row .dz-email, .member-row .mem-col-email, .domain-name {
  color: var(--text, #2b2820) !important; font-weight: 600 !important;
}
/* [역할모델] 일반관리자 역할 배지 — 슈퍼(골드)와 구분되는 네이비톤 */
.user-role.role-admin {
  color: #0b3a5b !important; background: rgba(11,58,91,.10) !important;
  border: 1px solid rgba(11,58,91,.35) !important; border-radius: 2px !important;
  padding: 1px 8px !important; font-weight: 800 !important;
}
.user-role.role-super { color: #8a6515 !important; }

/* 관리자 탭 바: 활성 탭 골드 언더라인(SEcMS active) */
#designers-modal [id^=adm-tab-].active { border-bottom: 2px solid var(--gold, #c9962a) !important; color: #8a6515 !important; font-weight: 800 !important; }

/* [마스터 요청] 파노 타이틀 1.3배 확대 (데스크탑 15→20px) */
.pano-location { font-size: 20px !important; }

/* ── 모바일 폴리시: 파노 헤더 위치명이 좁은 폭에서 줄바꿈되지 않도록(말줄임) ── */
@media (max-width: 640px) {
  .pano-location {
    font-size: 16px !important; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 48vw;
  }
  .pano-header { padding: 8px 10px; }
}