/* ═══════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── IVORY THEME (Claude-style warm cream) ── */
  --bg:        #f5f1e8;   /* 메인 아이보리 배경 */
  --bg2:       #faf7f0;   /* 카드/패널 밝은 크림 */
  --bg3:       #efe9dc;   /* 약간 진한 크림 (호버/구분) */
  --border:    #e4dccb;   /* 연한 따뜻한 보더 */
  --border2:   #d9cfb8;   /* 진한 따뜻한 보더 */
  --text:      #2b2820;   /* 본문: 따뜻한 다크 그레이 */
  --text2:     #6b6457;   /* 보조 텍스트 */
  --text3:     #938a78;   /* 흐린 텍스트 */
  --text4:     #c4b9a3;   /* 가장 흐린 텍스트/플레이스홀더 */
  --gold:      #c9962a;   /* 따뜻한 골드 (강조) */
  --green:     #2f9e6f;   /* 차분한 그린 */
  --red:       #c4462f;   /* 차분한 레드 */
  --blue:      #2f6db5;   /* 차분한 블루 */
  --panel:     #faf7f0;   /* 패널 표면 */
  --panel-2:   #f2ece0;   /* 패널 대체 표면 */
  --font-mono: 'JetBrains Mono', 'Share Tech Mono', 'Courier New', monospace;  /* 기술 수치/좌표 전용 */
  --font-ui:   'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  --accent:    var(--gold); /* overridden per-mode */

  /* ── 전문 툴급 디자인 토큰 (그림자/라운드/간격 스케일) ── */
  --radius-sm: 6px;
  --radius:    9px;
  --radius-lg: 14px;
  --shadow-1:  0 1px 2px rgba(43,40,32,.06), 0 1px 3px rgba(43,40,32,.08);
  --shadow-2:  0 2px 4px rgba(43,40,32,.06), 0 4px 12px rgba(43,40,32,.10);
  --shadow-3:  0 8px 24px rgba(43,40,32,.14), 0 2px 8px rgba(43,40,32,.10);
  --ring:      0 0 0 3px rgba(27,117,187,.18);  /* 포커스 링 (브랜드 블루) */
  --ease:      cubic-bezier(.4, 0, .2, 1);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);                 /* ★ 전문 툴 톤 — 본문은 산세리프 */
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* 기술 수치/좌표/코드형 라벨에만 모노스페이스 — 유틸 클래스 */
.mono, .coord, .tech-num { font-family: var(--font-mono); }

/* ── [마스터 요청] 전체 버튼/입력 글자체 통일(Pretendard) + 또렷한 톤 ──
   모든 버튼·입력·셀렉트가 새 폰트를 상속하도록 강제. 한글 가독성·자간 최적화. */
button, input, select, textarea, .btn, .btn-icon, .cad-tool,
.fls-ctrl, .pin-action, .hub-card, .settings-btn {
  font-family: var(--font-ui);
  letter-spacing: -0.01em;          /* Pretendard 한글 최적 자간 */
}
button { font-weight: 600; }        /* 버튼 글자 또렷하게 */

/* ── Scrollbar (전문 툴 느낌의 얇고 차분한 스크롤바) ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text4); }

/* ── Utility ── */
.hidden { display: none !important; }
.active  { display: flex !important; }

/* ═══════════════════════════════════════════════════════
   SCREENS
══════════════════════════════════════════════════════ */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
}
.screen.active { display: flex; }
#screen-home   { flex-direction: column; }
#screen-app    { flex-direction: column; }

/* ═══════════════════════════════════════════════════════
   HOME
══════════════════════════════════════════════════════ */
.home-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, #fbf8f1 0%, var(--bg) 70%);
  pointer-events: none;
}
.home-content {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 1; gap: 40px; padding: 40px 20px;
}
.home-brand { text-align: center; }
.home-badge {
  font-size: 10px; letter-spacing: 6px;
  color: var(--gold); text-transform: uppercase; margin-bottom: 14px;
}
.home-title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700; color: #1f1d17;
  letter-spacing: -1px; line-height: 1.15;
  font-family: var(--font-ui);
}
.home-sub {
  margin-top: 10px; color: var(--text3);
  font-size: 11px; letter-spacing: 4px;
}
.home-footer {
  color: var(--text4); font-size: 9px; letter-spacing: 3px;
}

/* ═══════════════════════════════════════════════════════
   BRAND LOGO  ── 회사 로고/워드마크 (이미지 또는 텍스트 폴백)
══════════════════════════════════════════════════════ */
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  line-height: 1;
}
.brand-logo:empty { display: none; }
/* 로고는 흰 배경 PNG이므로 다크 UI에서 가독성 위해 흰 라운드 박스 위에 배치 */
.brand-logo--img {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(43,40,32,0.102);
}
.brand-logo-img {
  display: block;
  width: auto;
  object-fit: contain;
}
/* 텍스트 워드마크 (로고 이미지 없거나 로드 실패 시) */
.brand-logo--text {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.brand-logo--text .brand-wm-1 { color: var(--accent); }            /* SEA = 블루 */
.brand-logo--text .brand-wm-2 { color: #2b2820; margin-left: .28em; font-weight: 600; }
.brand-logo--text .brand-wm-3 { color: var(--red); font-weight: 800; } /* STAR = 레드 */

/* — 홈 화면: 큰 워드마크/로고, 배지 위 — */
.brand-logo-home {
  margin: 0 auto 18px;
  min-height: 40px;
}
.brand-logo-home.brand-logo--img { padding: 12px 20px; }
.brand-logo-home .brand-logo-img { height: 56px; max-width: none; width: auto; }
.brand-logo-home.brand-logo--text { font-size: clamp(22px, 3.6vw, 32px); }

/* — 상단바: 컴팩트 로고, 좌측 — */
.brand-logo-top {
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--border2);
  height: 28px;
}
.brand-logo-top.brand-logo--img { padding: 5px 12px; border-radius: 7px; }
/* [마스터 요청] 상단 로고 — 높이만 지정하고 max-width 제거 → 원본 가로세로비 정확 유지 */
.brand-logo-top .brand-logo-img { height: 38px; max-width: none; width: auto; }
.brand-logo-top.brand-logo--text { font-size: 26px; font-weight: 800; }

/* — 파노라마 오버레이: 미세 워터마크 로고 — */
.brand-logo-pano {
  opacity: .85;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
.brand-logo-pano.brand-logo--img { padding: 4px 8px; border-radius: 5px; opacity: .9; }
.brand-logo-pano .brand-logo-img { height: 18px; max-width: 130px; }
.brand-logo-pano.brand-logo--text { font-size: 12px; }
.brand-logo-pano.brand-logo--text .brand-wm-2 { color: #3a352b; }

/* ═══════════════════════════════════════════════════════
   PROJECT HUB  ── 첫 화면: 프로젝트 선택 대시보드
══════════════════════════════════════════════════════ */
#screen-projects { flex-direction: column; }
.hub-authbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #efe9dc 0%, var(--bg2) 100%);
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 1px 0 rgba(43,40,32,0.051), 0 4px 16px rgba(0,0,0,.25);
  position: relative; z-index: 5;
}
.hub-authbar-spacer { flex: 1; }
.hub-content {
  position: relative;
  flex: 1; overflow-y: auto;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 36px 24px 24px;
}
.hub-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.hub-badge {
  font-size: 10px; letter-spacing: 5px; color: var(--accent);
  text-transform: uppercase; margin-bottom: 8px;
}
.hub-title {
  font-family: var(--font-ui); font-weight: 800; color: #1f1d17;
  font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.5px; line-height: 1.1;
}
.hub-sub {
  margin-top: 8px; color: var(--text2);
  font-size: 12px; letter-spacing: .5px; max-width: 640px; line-height: 1.6;
}
.hub-btn-new {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  color: #fff; background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff 0%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.hub-btn-new:hover { transform: translateY(-1px); filter: brightness(1.08); }
.hub-btn-new.hidden { display: none; }
.hub-btn-new-plus { font-size: 17px; line-height: 1; font-weight: 400; }

/* 카드 그리드 */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.hub-card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border2); border-radius: 14px;
  overflow: hidden; cursor: pointer;
  transition: border-color .18s, transform .15s, box-shadow .2s;
  outline: none;
}
.hub-card:hover, .hub-card:focus-visible {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.hub-card-thumb {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(135deg, #faf7f0, #f2ece0);
  border-bottom: 1px solid var(--border2);
}
.hub-card-thumb-ico { font-size: 38px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.hub-card-thumb { position: relative; overflow: hidden; }
/* 블루프린트 격자 배경 */
.hub-thumb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 35%, transparent 85%);
}
/* 스캔 라인 (천천히 위→아래 흐름) */
.hub-thumb-scan {
  position: absolute; left: 0; right: 0; height: 26px; top: -26px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  animation: hubScan 4.5s linear infinite;
  pointer-events: none;
}
@keyframes hubScan { 0% { top: -26px; } 100% { top: 110px; } }
/* 선박 아이콘 — CAD/3D 블루프린트 스타일 (그라데이션 입체 선체) */
.hub-thumb-ship {
  position: relative; z-index: 1;
  width: 86px; height: auto;
  filter: drop-shadow(0 3px 7px rgba(13,91,168,.45)) drop-shadow(0 1px 2px rgba(0,0,0,.35));
  transition: transform .4s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.hub-card:hover .hub-thumb-ship {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(31,127,214,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
/* 치수선이 hover 시 살짝 또렷해지는 테크니컬 도면 효과 */
.hub-card:hover .hub-thumb-ship .ship-dim { opacity: .7; transition: opacity .4s ease; }
/* 도면 코드 라벨 */
.hub-thumb-code {
  position: absolute; bottom: 7px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  background: rgba(8,13,24,.55); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 1px 6px; border-radius: 4px;
}
.hub-card-body { padding: 14px 16px 16px; }
.hub-card-name {
  font-family: var(--font-ui); font-weight: 700; color: #2b2820;
  font-size: 15px; line-height: 1.3; margin-bottom: 8px;
  word-break: keep-all;
}
.hub-card-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 10px; letter-spacing: 1px; color: var(--text2); text-transform: uppercase;
}
.hub-card-decks { color: var(--accent); }
.hub-card-date::before { content: "·"; margin-right: 8px; color: var(--text3); }
.hub-card-actions {
  position: absolute; top: 10px; right: 10px;
  opacity: 0; transition: opacity .15s;
}
.hub-card:hover .hub-card-actions, .hub-card:focus-within .hub-card-actions { opacity: 1; }
.hub-card-act {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(8,13,24,.7); border: 1px solid var(--border2);
  color: var(--text); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.hub-card-del:hover { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.5); color: var(--red); }
/* 배포(Publish) 버튼 — 미배포=중립, 배포됨=골드 강조 */
.hub-card-pub:hover { background: rgba(201,150,42,.18); border-color: rgba(201,150,42,.55); color: var(--gold); }
.hub-card-pub.is-pub { background: rgba(201,150,42,.22); border-color: rgba(201,150,42,.6); color: var(--gold); }
.hub-card-act.busy { opacity: .5; pointer-events: none; }
/* 배포됨 배지 (카드 이름 옆) */
.hub-pub-badge {
  display: inline-block; vertical-align: middle; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--gold);
  background: rgba(201,150,42,.14); border: 1px solid rgba(201,150,42,.4);
  border-radius: 999px; padding: 1px 8px; line-height: 1.5;
}

/* + 새 프로젝트 카드 */
.hub-card-add {
  align-items: center; justify-content: center;
  min-height: 188px; gap: 8px;
  background: transparent; border-style: dashed; border-color: var(--border2);
}
.hub-card-add:hover, .hub-card-add:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.hub-card-add-plus { font-size: 40px; font-weight: 200; color: var(--accent); line-height: 1; }
.hub-card-add-label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text2); }

/* 빈 상태 */
.hub-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 70px 20px; text-align: center; color: var(--text2);
}
.hub-empty.hidden { display: none; }
.hub-empty-icon { font-size: 46px; margin-bottom: 16px; opacity: .8; }
.hub-empty-text { font-family: var(--font-ui); font-weight: 700; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.hub-empty-hint { font-size: 12px; color: var(--text3); }
.hub-footer { text-align: center; padding: 8px 0 18px; }

/* Mode cards */
.mode-cards {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.mode-card {
  position: relative;
  width: 220px; padding: 28px 24px;
  border-radius: 12px; cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
  outline: none;
}
/* 관리자 전용 잠금 배지 (디자이너 카드, 미인증 시 표시) */
.card-lock {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.4);
  border-radius: 7px;
}
.card-lock svg { width: 14px; height: 14px; }
.mode-card.designer:not(.locked) .card-lock { display: none; }
.mode-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mode-card.designer {
  background: linear-gradient(135deg, #f2ece0, #efe9dc);
  border: 1px solid #e4dccb;
}
.mode-card.viewer {
  background: linear-gradient(135deg, var(--accent), #2f9e6f);
  border: 1px solid #065f46;
}
.mode-card.designer:hover, .mode-card.designer:focus-visible {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,158,11,.12);
}
.mode-card.viewer:hover, .mode-card.viewer:focus-visible {
  border-color: var(--green); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16,185,129,.12);
}
/* 카드 상단 액센트 바 (전문 폴리시) */
.mode-card::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
  border-radius: 0 0 3px 3px; opacity: 0; transition: opacity .2s;
}
.mode-card.designer::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.mode-card.viewer::before   { background: linear-gradient(90deg, transparent, var(--green), transparent); }
.mode-card:hover::before, .mode-card:focus-visible::before { opacity: 1; }
.card-icon  { font-size: 32px; margin-bottom: 12px; }
.card-badge { font-size: 10px; letter-spacing: 3px; margin-bottom: 8px; }
.mode-card.designer .card-badge { color: var(--gold); }
.mode-card.viewer   .card-badge { color: var(--green); }
.card-title { color: #2b2820; font-size: 15px; font-weight: 600; margin-bottom: 8px; font-family: var(--font-ui); }
.card-desc  { color: var(--text2); font-size: 11px; line-height: 1.8; font-family: var(--font-ui); }

/* ═══════════════════════════════════════════════════════
   APP — TOPBAR
══════════════════════════════════════════════════════ */
.topbar {
  /* [마스터 요청] 타이틀 2배에 맞춰 상단바 높이 확대 */
  height: 68px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: linear-gradient(180deg, #efe9dc 0%, var(--bg2) 100%);
  border-bottom: 1px solid transparent; /* accent set by JS */
  box-shadow: 0 1px 0 rgba(43,40,32,0.051), 0 4px 16px rgba(0,0,0,.3);
  position: relative; z-index: 5;
}
.btn-icon {
  background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: 18px; padding: 6px 8px;
  line-height: 1; border-radius: 6px;
  transition: color .15s, background .15s;
}
.btn-icon:hover { color: var(--text); background: rgba(43,40,32,0.102); }
.topbar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold);
  flex-shrink: 0;
}
.mode-label {
  /* [마스터 요청] 상단 타이틀 2배 확대 + 진하게(가시성) */
  font-size: 20px; letter-spacing: 3px; color: var(--gold);
  font-weight: 800;
}
.topbar-sep { color: var(--border2); }
.file-name-label {
  /* [마스터 요청] 도면명 2배 확대 + 본문색(진하게)으로 가시성 확보 */
  color: var(--text); font-size: 18px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px;
}
.pdf-pagination {
  display: flex; align-items: center; gap: 3px; margin-left: 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px; padding: 3px;
}
.pdf-pagination.hidden { display: none; }
.btn-page {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent; border: none;
  color: var(--gold); border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-page svg { width: 15px; height: 15px; }
.btn-page:hover:not(:disabled) { background: rgba(245,158,11,.14); }
.btn-page:disabled { opacity: .25; cursor: default; }
.page-jump { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; }
.page-jump-input {
  width: 34px; text-align: center;
  background: var(--bg); border: 1px solid var(--border2);
  color: var(--text); border-radius: 5px;
  padding: 3px 2px; font-size: 11px; font-family: var(--font-mono);
  outline: none; transition: border-color .15s;
}
.page-jump-input:focus { border-color: var(--gold); }
.page-total { color: var(--text2); font-size: 11px; font-family: var(--font-mono); }
.page-info { color: var(--text2); font-size: 10px; }
.pin-count-badge {
  margin-left: auto;
  background: rgba(245,158,11,.1); color: var(--gold);
  font-size: 10px; padding: 2px 10px; border-radius: 10px;
  border: 1px solid rgba(245,158,11,.2);
}
.pin-count-badge.hidden { display: none; }

/* ═══════════════════════════════════════════════════════
   ADMIN GATE — 설계자 모드 관리자 인증 모달
═══════════════════════════════════════════════════════ */
.admin-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.admin-gate.on { opacity: 1; pointer-events: auto; }
.admin-gate.hidden { display: none; }
.admin-gate-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(3px);
}
.admin-gate-card {
  position: relative;
  width: min(380px, 90vw);
  padding: 30px 28px 24px;
  background: linear-gradient(135deg, #f2ece0, #efe9dc);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateY(8px) scale(.98);
  transition: transform .2s ease;
  text-align: center;
}
.admin-gate.on .admin-gate-card { transform: translateY(0) scale(1); }
.admin-gate-ico {
  width: 48px; height: 48px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.4);
  border-radius: 12px;
}
.admin-gate-ico svg { width: 24px; height: 24px; }
.admin-gate-title {
  color: #2b2820; font-size: 18px; font-weight: 700;
  font-family: var(--font-ui); margin: 0 0 8px;
}
.admin-gate-sub {
  color: var(--text2); font-size: 11.5px; line-height: 1.7;
  font-family: var(--font-ui); margin: 0 0 18px;
}
.admin-gate-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  background: rgba(2,6,23,.6);
  border: 1px solid rgba(107,100,87,.3);
  border-radius: 8px;
  color: #2b2820; font-size: 14px; letter-spacing: 2px;
  font-family: var(--font-ui);
  text-align: center; outline: none;
  transition: border-color .15s;
}
.admin-gate-input:focus { border-color: var(--gold); }
.admin-gate-error {
  color: #f87171; font-size: 11px; font-family: var(--font-ui);
  margin-top: 10px;
}
.admin-gate-error.hidden { display: none; }
.admin-gate-actions {
  display: flex; gap: 10px; margin-top: 18px;
}
.admin-gate-btn {
  flex: 1; padding: 10px 0;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; letter-spacing: 1px;
  font-family: var(--font-ui);
  transition: background .15s, border-color .15s, transform .1s;
}
.admin-gate-btn.ghost {
  background: transparent; border: 1px solid rgba(107,100,87,.3); color: var(--text2);
}
.admin-gate-btn.ghost:hover { border-color: #6b6457; color: #fff; }
.admin-gate-btn.primary {
  background: rgba(245,158,11,.15); border: 1px solid var(--gold); color: var(--gold);
}
.admin-gate-btn.primary:hover { background: rgba(245,158,11,.28); transform: translateY(-1px); }
.admin-gate-btn:active { transform: translateY(0); }
.admin-gate-card.wide { width: min(480px, 92vw); }
.admin-gate-btn.full { width: 100%; flex: none; margin-top: 4px; }

/* ── topbar 설정/전환 버튼 ── */
.btn-settings, .btn-exit-edit, .btn-enter-edit {
  display: flex; align-items: center; gap: 6px; margin-left: 8px;
  /* [마스터 요청] 우상단 버튼 가시성 — 패딩/글자 키우고 굵게 */
  padding: 9px 15px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; letter-spacing: .5px; font-family: var(--font-ui);
  transition: background .15s, border-color .15s, transform .1s;
}
.btn-settings { background: rgba(107,100,87,.16); border: 1px solid var(--border); color: #2b2820; }
.btn-settings:hover { background: rgba(107,100,87,.22); border-color: #6b6457; color: #fff; transform: translateY(-1px); }
.btn-settings svg { width: 14px; height: 14px; }
.btn-exit-edit { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.4); color: #10b981; }
.btn-exit-edit:hover { background: rgba(16,185,129,.24); transform: translateY(-1px); }
.btn-exit-edit svg { width: 13px; height: 13px; }
/* 설계자 모드 전환(뷰어→설계자) — 골드 강조 */
.btn-enter-edit { background: rgba(201,150,42,.14); border: 1px solid rgba(201,150,42,.5); color: var(--gold); font-weight: 600; }
.btn-enter-edit:hover { background: rgba(201,150,42,.26); transform: translateY(-1px); }
.btn-enter-edit svg { width: 13px; height: 13px; }
.btn-exit-edit.hidden, .btn-settings.hidden, .btn-enter-edit.hidden { display: none; }

/* ── 설정 패널 ── */
.settings-ico {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  color: #3a352b; background: rgba(107,100,87,.12);
  border: 1px solid var(--border); border-radius: 12px;
}
.settings-ico svg { width: 24px; height: 24px; }
.settings-block.hidden { display: none; }
.settings-user {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px; margin-bottom: 14px;
  background: rgba(2,6,23,.5); border: 1px solid var(--border); border-radius: 10px;
}
.settings-user .user-avatar { width: 42px; height: 42px; }
.settings-email { color: var(--text2); font-size: 10.5px; font-family: var(--font-ui); margin-top: 2px; word-break: break-all; }
.settings-actions { margin-bottom: 10px; }
.settings-actions.hidden { display: none; }
.settings-note {
  padding: 11px 13px; margin-bottom: 12px; text-align: left;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3);
  border-radius: 8px; color: #fcd34d; font-size: 11px; line-height: 1.6; font-family: var(--font-ui);
}
.settings-note.hidden { display: none; }
.btn-signout.full { width: 100%; justify-content: center; margin-top: 6px; }

/* ── 홈 인증 바 (구글 로그인 / 사용자 배지) ── */
.home-authbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: flex-end; align-items: center;
  padding: 14px 18px; gap: 12px;
}
.auth-signed-out, .auth-signed-in {
  display: flex; align-items: center; gap: 12px;
}
.auth-signed-out.hidden, .auth-signed-in.hidden { display: none; }
.auth-hint { color: var(--text2); font-size: 11px; font-family: var(--font-ui); }
.google-signin-btn { min-height: 32px; }
.user-badge {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px;
  background: rgba(15,23,42,.6); border: 1px solid var(--border);
  border-radius: 999px;
}
.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #6b6457; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-name { color: #2b2820; font-size: 12px; font-weight: 600; font-family: var(--font-ui); }
.user-role { font-size: 9.5px; letter-spacing: .5px; font-family: var(--font-ui); }
.user-role.role-super { color: var(--gold); }
.user-role.role-designer { color: #38bdf8; }
.user-role.role-viewer { color: var(--text2); }
.btn-manage, .btn-signout {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  font-size: 11px; letter-spacing: .5px; font-family: var(--font-ui);
  transition: background .15s, border-color .15s, transform .1s;
}
.btn-manage { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: var(--gold); }
.btn-manage:hover { background: rgba(245,158,11,.24); transform: translateY(-1px); }
.btn-manage svg { width: 13px; height: 13px; }
.btn-manage.hidden { display: none; }
.btn-signout { background: transparent; border: 1px solid var(--border); color: var(--text2); }
.btn-signout:hover { border-color: #6b6457; color: #fff; }
.login-gate-signin { display: flex; justify-content: center; margin: 6px 0 4px; min-height: 40px; }

/* ── 데모 진입 버튼 (구글 로그인 없이 바로 체험) ── */
.btn-demo {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px; font-family: var(--font-ui);
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.btn-demo svg { width: 13px; height: 13px; }
.btn-demo-designer {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000 30%));
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #fff 10%);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-demo-designer:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-demo-viewer {
  background: rgba(15,23,42,.6); border: 1px solid var(--border); color: var(--text2);
}
.btn-demo-viewer:hover { border-color: #6b6457; color: #fff; transform: translateY(-1px); }
.btn-demo.wide { width: 100%; padding: 11px 14px; font-size: 13px; }

/* 로그인 게이트 내 '또는' 구분선 + 데모 영역 */
.login-gate-demo { margin: 4px 0 2px; }
.login-gate-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--text2); font-size: 10.5px; font-family: var(--font-ui); letter-spacing: 1px; }
.login-gate-or::before, .login-gate-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* 데모 모드 안내 배지 (화면 우하단 고정) */
.demo-mode-badge {
  position: fixed; right: 16px; bottom: 16px; z-index: 9000;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(15,23,42,.92); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  color: #2b2820; font-size: 11.5px; font-family: var(--font-ui); letter-spacing: .3px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); backdrop-filter: blur(6px);
  pointer-events: none;
}
.demo-mode-badge .demo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: demo-pulse 1.8s infinite;
}
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── 디자이너 지정 관리 목록 ── */
.designer-add { display: flex; gap: 8px; margin-bottom: 6px; }
.designer-add .admin-gate-input { text-align: left; letter-spacing: 0; flex: 1; }
.designer-add .admin-gate-btn { flex: 0 0 auto; width: auto; padding: 10px 16px; }
.designers-list { max-height: 240px; overflow-y: auto; margin: 8px 0; text-align: left; }
.designers-loading, .designers-empty { color: var(--text2); font-size: 11px; font-family: var(--font-ui); padding: 12px 4px; text-align: center; }
.designer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 6px;
  background: rgba(2,6,23,.5); border: 1px solid var(--border); border-radius: 8px;
}
.designer-email { color: #2b2820; font-size: 12px; font-family: var(--font-ui); word-break: break-all; }
.designer-del {
  flex: 0 0 auto; width: 24px; height: 24px; margin-left: 8px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4);
  color: #f87171; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.designer-del:hover { background: rgba(239,68,68,.25); }

/* ── 프로젝트 / 데크 사이드바 ── */
.sidebar-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidebar-section-title { color: #3a352b; font-size: 12px; font-weight: 600; font-family: var(--font-ui); }
.btn-mini {
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-size: 10.5px; letter-spacing: .5px; font-family: var(--font-ui);
  background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.4); color: #38bdf8;
  transition: background .15s, transform .1s;
}
.btn-mini:hover { background: rgba(56,189,248,.24); transform: translateY(-1px); }
.btn-mini.danger { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: #f87171; }
.btn-mini.danger:hover { background: rgba(239,68,68,.22); }
.project-select {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  background: #fffdf8; border: 1px solid var(--border2); border-radius: 8px;
  color: #2b2820; font-size: 12px; font-family: var(--font-ui); cursor: pointer; outline: none;
}
.project-select:focus { border-color: #38bdf8; }
.project-actions { margin-top: 8px; }
.project-actions.hidden, .decks-block.hidden { display: none; }
.decks-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.decks-list { display: flex; flex-direction: column; gap: 6px; }
.decks-empty { color: var(--text2); font-size: 10.5px; font-family: var(--font-ui); padding: 6px 2px; }
.decks-empty.hidden { display: none; }
.deck-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(2,6,23,.5); border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}
.deck-row.active { border-color: #38bdf8; background: rgba(56,189,248,.1); }
.deck-lvl { flex: 0 0 auto; font-size: 9.5px; padding: 2px 6px; border-radius: 5px; background: rgba(56,189,248,.18); color: #38bdf8; font-family: var(--font-mono); }
.deck-name { flex: 1; color: #2b2820; font-size: 12px; font-family: var(--font-ui); cursor: pointer; }
.deck-del {
  flex: 0 0 auto; width: 22px; height: 22px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35);
  color: #f87171; border-radius: 5px; cursor: pointer; font-size: 11px;
}
.deck-del:hover { background: rgba(239,68,68,.25); }
.deck-hasdoc { margin-right: 4px; color: #0891b2; }
.deck-nodoc  { margin-right: 4px; color: rgba(43,40,32,.4); }
/* ── 구역 트리 구조(프로젝트 > 구역 > 도면) ── */
.deck-tree-guide { flex: 0 0 auto; color: rgba(56,189,248,.55); font-family: var(--font-mono); font-size: 12px; user-select: none; }
.deck-tree-guide.sub { color: rgba(56,189,248,.4); margin-right: 2px; }
.deck-doc-sub { padding: 3px 0 5px 18px; }
.deck-doc-line { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #0e7490; font-family: var(--font-ui); }
.deck-doc-line i { font-size: 10px; }
.deck-doc-line.empty { color: rgba(43,40,32,.5); font-style: italic; }
/* 도면 등록 시 구역 미선택이면 구역 블록 강조 깜빡임 */
@keyframes zoneReqFlash { 0%,100%{ box-shadow: 0 0 0 0 rgba(56,189,248,0); } 30%,70%{ box-shadow: 0 0 0 3px rgba(56,189,248,.5); } }
.decks-block.zone-required-flash { animation: zoneReqFlash 1.6s ease; border-radius: 10px; }
/* #1: 프로젝트 전환 드롭다운 제거 → 현재 프로젝트명 표시 박스 */
.project-current {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  background: #fffdf8; border: 1px solid var(--border2); border-radius: 8px;
  color: #2b2820; font-size: 13px; font-weight: 700; font-family: var(--font-ui);
}
#upload-zone-hint { margin: 8px 2px 0; font-size: 10.5px; }

/* ═══════════════════════════════════════════════════════
   APP — BODY
══════════════════════════════════════════════════════ */
.app-body {
  flex: 1; display: flex; overflow: hidden;
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar-section {
  padding: 10px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar-section.pin-list-wrap {
  flex: 1; overflow-y: auto; border-bottom: none;
  padding: 8px;
}

/* ── [마스터 요청] 체크보드 모드 UI (시작번호 입력 + 진입/토글 버튼) ── */
.checkboard-start-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.checkboard-start-label {
  font-size: 12px; font-weight: 600; color: var(--text);
  font-family: var(--font-ui); white-space: nowrap;
}
.checkboard-start-input {
  width: 72px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: #ffffff;
  color: var(--text); font-size: 14px; font-weight: 700; text-align: center;
  font-family: var(--font-mono); box-sizing: border-box;
  transition: border-color .14s, box-shadow .14s;
}
.checkboard-start-input:focus {
  outline: none; border-color: var(--blue, #2f6db5);
  box-shadow: 0 0 0 3px rgba(47,109,181,.18);
}
.btn-checkboard-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  border: 1px solid #c8d4e4; color: #1f3a5c;
  font-size: 13.5px; font-weight: 700; font-family: var(--font-ui);
  box-shadow: 0 1px 2px rgba(31,58,92,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .14s, border-color .14s, transform .1s, box-shadow .14s;
}
.btn-checkboard-toggle svg { width: 16px; height: 16px; }
.btn-checkboard-toggle:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e3ecf7 100%);
  border-color: #9fb6d4; transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(31,58,92,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-checkboard-toggle.active {
  background: linear-gradient(180deg, #2f6db5 0%, #245a9c 100%);
  border-color: #1f4e8a; color: #ffffff;
  box-shadow: 0 2px 8px rgba(47,109,181,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
/* ★ [항목3] 포인트 목록 아이콘 토글 — 평소 접힘(화면 안 가림), 헤더 누르면 펼침 */
.sidebar-section.pin-list-wrap.collapsed {
  flex: none; overflow: visible;
}
.pin-list-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 8px; padding: 8px 4px; cursor: pointer;
  background: transparent; border: none; color: inherit;
  font-family: var(--font-ui); text-align: left;
  -webkit-tap-highlight-color: rgba(91,170,255,.3); touch-action: manipulation;
}
.pin-list-head:hover { color: var(--gold); }
.pin-list-title { display: flex; align-items: center; gap: 6px; }
.pin-list-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--gold); color: #1a1206; font-size: 10px; font-weight: 700;
}
.pin-list-chevron { width: 16px; height: 16px; flex: none; transition: transform .22s; }
.pin-list-wrap.collapsed .pin-list-chevron { transform: rotate(-90deg); }
.pin-list-body {
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; transition: max-height .26s ease, opacity .2s ease;
  max-height: 60vh; opacity: 1;
}
.pin-list-wrap.collapsed .pin-list-body {
  max-height: 0; opacity: 0; pointer-events: none;
}
.pin-list-close {
  align-self: flex-end; padding: 5px 12px; margin-bottom: 2px;
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text2);
  border-radius: 6px; cursor: pointer; font-size: 11px; font-family: var(--font-ui);
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(91,170,255,.3);
}
.pin-list-close:hover { border-color: var(--gold); color: var(--gold); }

/* Upload / action buttons */
.btn-upload {
  width: 100%; padding: 9px 0;
  background: var(--bg3);
  border: 1px dashed rgba(245,158,11,.5);
  color: var(--gold);
  border-radius: 6px; cursor: pointer;
  font-size: 11px; letter-spacing: 1px;
  font-family: var(--font-ui);
  transition: background .15s, border-color .15s;
}
.btn-upload:hover { background: var(--border); border-color: var(--gold); }
.btn-upload.secondary {
  border-color: var(--border2); color: var(--text2);
}
.btn-upload.secondary:hover { border-color: var(--text2); }

/* Place pin button */
.btn-place {
  width: 100%; padding: 9px 0;
  background: var(--bg3);
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 6px; cursor: pointer;
  font-size: 11px; letter-spacing: 1px; font-weight: 700;
  font-family: var(--font-ui);
  transition: all .15s;
}
.btn-place.active {
  background: var(--gold); color: #000;
}
.btn-place:hover:not(.active) { background: rgba(245,158,11,.1); }
.place-hint {
  color: var(--gold); font-size: 9px; text-align: center;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Pin form */
.pin-form { display: flex; flex-direction: column; gap: 8px; }
.btn-file {
  width: 100%; padding: 8px 0;
  background: var(--bg);
  border: 1px dashed rgba(245,158,11,.5);
  color: var(--gold); border-radius: 4px;
  cursor: pointer; font-size: 10px;
  font-family: var(--font-ui);
  transition: background .15s, border-color .15s;
}
.btn-file:hover { background: rgba(245,158,11,.08); border-color: var(--gold); }
.pin-file-info {
  color: var(--green); font-size: 9px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.form-divider {
  text-align: center; color: var(--text4);
  font-size: 9px; letter-spacing: 1px;
}
.pin-upload-status {
  font-size: 9px; text-align: center;
  color: var(--green); line-height: 1.6; word-break: break-all;
}
.pin-upload-status.error { color: var(--red); }
.pin-saved-msg {
  color: var(--green); font-size: 10px;
  text-align: center; line-height: 1.6; word-break: break-all;
}
.form-label { color: var(--gold); font-size: 10px; letter-spacing: 1px; }
.form-field { display: flex; flex-direction: column; gap: 3px; }
.form-field label { color: var(--text3); font-size: 9px; }
.form-field input {
  width: 100%; padding: 5px 8px;
  background: var(--bg); border: 1px solid var(--border2);
  color: var(--text); border-radius: 4px;
  font-size: 10px; font-family: var(--font-ui);
  outline: none; transition: border-color .15s;
}
.form-field input:focus { border-color: var(--gold); }
.form-actions { display: flex; gap: 6px; }
.btn-primary {
  flex: 1; padding: 7px 0;
  background: var(--gold); border: none;
  color: #000; border-radius: 4px;
  cursor: pointer; font-size: 11px; font-weight: 700;
  font-family: var(--font-ui); transition: opacity .15s;
}
.btn-primary:disabled { background: var(--border2); color: var(--text3); cursor: default; opacity: 1; }
.btn-primary:not(:disabled):hover { opacity: .85; }

/* ══════════════════════════════════════════
   컴팩트 핀 폼 (아이콘 + 주소창)
══════════════════════════════════════════ */
.pin-form.compact { gap: 7px; }
.pin-form.compact .pf-head {
  display: flex; align-items: center; justify-content: space-between;
}
.pin-form.compact .pf-title {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--accent); text-transform: none;
}
.pin-form.compact .pf-title svg { width: 14px; height: 14px; }
.pf-close {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--border2); background: transparent;
  color: var(--text2); cursor: pointer; font-size: 12px; line-height: 1;
  transition: all .15s;
}
.pf-close:hover { background: rgba(239,68,68,.12); border-color: #ef4444; color: #ef4444; }

/* 주소창 (위치명) */
.pf-addr {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 9px; padding: 7px 10px; transition: border-color .15s, box-shadow .15s;
}
.pf-addr:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.pf-addr-ico { width: 15px; height: 15px; color: var(--text2); flex: none; }
.pf-addr input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #3a352b; font-size: 12.5px; padding: 0;
}
.pf-addr input::placeholder { color: var(--text2); }

/* 아이콘 툴바 */
.pf-tools {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.pf-tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px; border: 1px solid var(--border2); border-radius: 9px;
  background: var(--bg3); color: var(--text2); cursor: pointer;
  font-size: 9.5px; font-weight: 600; transition: all .15s;
}
.pf-tool svg { width: 17px; height: 17px; }
.pf-tool:hover { border-color: var(--accent); color: #3a352b; background: color-mix(in srgb, var(--accent) 8%, var(--bg3)); }
.pf-tool.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg3)); }

/* ── [마스터 요청] RICOH THETA 360 전용 버튼: 파란 강조(일반 사진버튼과 구분) ── */
.pf-tool-theta {
  border-color: #2f6df0;
  color: #1f4fc4;
  background: linear-gradient(180deg, #eef4ff 0%, #e2ecff 100%);
}
.pf-tool-theta svg { color: #2f6df0; }
.pf-tool-theta:hover {
  border-color: #1f4fc4;
  color: #16399a;
  background: linear-gradient(180deg, #e2ecff 0%, #d3e2ff 100%);
}

/* ── [마스터 요청] 핀(호스팟)별 아이콘 선택 그리드 ── */
.pf-icon-section { margin: 2px 0 4px; }
.pf-icon-label {
  font-size: 10.5px; font-weight: 700; color: var(--text2);
  margin: 0 0 5px 1px; letter-spacing: .2px;
}
.pf-icon-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
.pf-icon-chip {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 6px; cursor: pointer;
  border: 1px solid var(--border2); border-radius: 9px;
  background: var(--bg3); color: var(--text2); transition: all .15s;
}
.pf-icon-chip svg { width: 19px; height: 19px; display: block; }
.pf-icon-chip:hover {
  border-color: var(--accent); color: #3a352b;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg3));
}
.pf-icon-chip.active {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg3));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 접이식 필드 */
.pf-collapse { display: block; }
.pf-collapse.hidden { display: none; }
.pf-collapse input,
.pf-collapse textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; color: #3a352b; font-size: 12px; padding: 7px 9px;
  outline: none; font-family: inherit; box-sizing: border-box;
}
.pf-collapse input:focus, .pf-collapse textarea:focus { border-color: var(--accent); }
.pf-collapse textarea { resize: vertical; }

/* 저장 버튼 (즉시 저장) */
.pf-save {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 0; margin-top: 2px;
  background: var(--accent); border: none; border-radius: 10px;
  color: #051018; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: opacity .15s, transform .08s;
}
.pf-save svg { width: 17px; height: 17px; }
.pf-save:disabled { background: var(--border2); color: var(--text3); cursor: default; }
.pf-save:not(:disabled):hover { opacity: .9; }
.pf-save:not(:disabled):active { transform: scale(.985); }

/* ══════════════════════════════════════════
   동기화 상태 배지 (topbar)
══════════════════════════════════════════ */
.sync-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border2); background: var(--bg3);
  color: var(--text2); cursor: pointer; font-size: 11px; font-weight: 600;
  font-family: var(--font-ui); transition: all .2s;
}
.sync-badge .sync-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none;
}
.sync-badge.online  { border-color: rgba(34,197,94,.4);  color: #4ade80; }
.sync-badge.online  .sync-dot { background: #22c55e; }
.sync-badge.offline { border-color: rgba(107,100,87,.4); color: #6b6457; }
.sync-badge.offline .sync-dot { background: #6b6457; animation: none; }
.sync-badge.pending { border-color: rgba(245,158,11,.5); color: #fbbf24; }
.sync-badge.pending .sync-dot { background: #f59e0b; animation: syncpulse 1.1s ease-in-out infinite; }
@keyframes syncpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.btn-ghost {
  padding: 7px 12px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); border-radius: 4px;
  cursor: pointer; font-size: 11px;
  font-family: var(--font-ui); transition: border-color .15s;
}
.btn-ghost:hover { border-color: var(--text2); }

/* Deploy button */
.btn-deploy {
  width: 100%; padding: 10px 0;
  background: linear-gradient(135deg, #2f9e6f, #3bb583);
  border: none; color: #fff;
  border-radius: 6px; cursor: pointer;
  font-size: 11px; letter-spacing: 1px; font-weight: 700;
  font-family: var(--font-ui);
  transition: opacity .15s, transform .1s;
}
.btn-deploy:hover { opacity: .9; transform: translateY(-1px); }
.btn-deploy:disabled { opacity: .5; cursor: wait; transform: none; }
.deploy-status {
  font-size: 9px; text-align: center; line-height: 1.6;
  color: var(--green); word-break: break-all;
}
.deploy-status.error { color: var(--red); }
.viewer-load-status {
  font-size: 10px; text-align: center; color: var(--text2);
  padding: 4px 0; line-height: 1.6;
}

/* Pin list */
.pin-list { display: flex; flex-direction: column; gap: 4px; }
.pin-item {
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all .15s;
}
.pin-item:hover, .pin-item.active { border-color: rgba(245,158,11,.4); }
.pin-item.active { background: rgba(245,158,11,.06); }
.pin-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #000; flex-shrink: 0;
}
.pin-info { flex: 1; min-width: 0; }
.pin-name {
  color: var(--text); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-coords { color: var(--text3); font-size: 9px; margin-top: 1px; font-family: var(--font-mono); }
/* 포인트 액션(수정/삭제) — hover 시 노출 */
.pin-acts { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity .14s; }
.pin-item:hover .pin-acts, .pin-item.active .pin-acts { opacity: 1; }
.pin-act {
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  background: rgba(8,13,24,.5); border: 1px solid var(--border2);
  color: var(--text2); display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s, border-color .14s;
  pointer-events: auto;          /* ★ 항상 클릭 가능 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(91,170,255,.4);
}
.pin-act svg { width: 14px; height: 14px; }
/* ★ [항목3] 터치 기기(hover 없음): 수정/삭제 버튼 항상 노출 + 터치타깃 확대 */
@media (hover: none) {
  .pin-acts { opacity: 1 !important; }
  .pin-act { width: 34px; height: 34px; }
  .pin-act svg { width: 17px; height: 17px; }
}
.pin-edit:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg3)); border-color: var(--accent); color: var(--accent); }
.pin-del:hover { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.55); color: var(--red); }
.pin-arrow { color: var(--gold); font-size: 14px; }
.pin-empty {
  color: var(--text4); font-size: 10px;
  text-align: center; margin-top: 24px; line-height: 2.2;
}

/* ─── MAP AREA ─── */
.map-area {
  flex: 1; position: relative;
  background: #ece5d6; overflow: hidden;
}
.drop-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.drop-icon { font-size: 3.5rem; opacity: .15; }
.drop-text { color: var(--text4); font-size: 12px; letter-spacing: 2px; }
.drop-sub  { color: #efe9dc; font-size: 10px; }

.state-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner.gold { border-top-color: var(--gold); }
.error-msg { color: var(--red); font-size: 12px; }

/* Map viewport — 블루프린트 그리드 배경 (전문 CAD/도면 뷰 느낌) */
.map-viewport {
  position: absolute; inset: 0;
  overflow: hidden; cursor: grab;
  background-color: #ece5d6;
  background-image:
    linear-gradient(rgba(120,110,90,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,110,90,.10) 1px, transparent 1px),
    linear-gradient(rgba(120,110,90,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,110,90,.05) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 40%, rgba(255,253,248,.6) 0%, transparent 75%);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
}
.map-viewport:active { cursor: grabbing; }
/* ISO 3D 뷰 — 원근 투영 + 도면 부양감(엔지니어링 아이소메트릭) */
.map-viewport {
  perspective: 2600px;
  perspective-origin: 50% 42%;
}
.map-viewport.iso-active {
  background-image:
    linear-gradient(rgba(91,170,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,170,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(91,170,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,170,255,.04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 45%, rgba(27,117,187,.30) 0%, transparent 72%);
}
.map-transform {
  position: absolute;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.map-viewport.iso-active .map-transform {
  filter: drop-shadow(0 60px 60px rgba(0,0,0,.6));
}
.map-viewport.iso-active .pdf-canvas,
.map-viewport.iso-active .map-image {
  box-shadow: 0 0 0 1px rgba(91,170,255,.4), 0 40px 80px rgba(0,0,0,.55);
}
.pdf-canvas  { display: block; }
.map-image   { display: block; max-width: none; user-select: none; }

/* Pins layer (마커 스타일은 파일 하단 ENHANCED PIN MARKER 섹션 참조) */
.pins-layer { position: absolute; inset: 0; pointer-events: none; }
.pin-marker { pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* ★ 핀 머리 주변 보이지 않는 터치 패드(권장 44px 터치 타깃) — 작은 핀도 손가락으로 쉽게 탭 */
.pin-marker::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 44px; height: 44px; transform: translate(-50%, -22px);
  pointer-events: auto; z-index: -1;
}

/* Pending pin */
.pending-pin {
  position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(245,158,11,.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse 1s ease-in-out infinite;
  z-index: 21;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:.5; transform:translate(-50%,-50%) scale(1.8); }
}

/* Crosshair overlay */
.crosshair-overlay {
  position: absolute; inset: 0;
  border: 2px solid rgba(245,158,11,.4);
  pointer-events: none; z-index: 30;
}
.crosshair-msg {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold); color: #000;
  padding: 4px 16px; border-radius: 4px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   360° PANORAMA OVERLAY
══════════════════════════════════════════════════════ */
.pano-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: #000;
  display: flex; flex-direction: column;
}
.pano-overlay.hidden { display: none !important; }

.pano-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, transparent 100%);
}
.pano-brand { display: flex; align-items: center; gap: 10px; }
.pano-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.pano-location {
  /* [마스터 요청] 검은 배경 글자 → 진한 흰색 + 크게 */
  color: #ffffff; font-size: 15px; font-weight: 700;
  font-family: var(--font-mono); letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.btn-pano-close {
  display: inline-flex; align-items: center; gap: 7px;
  /* [마스터 요청] 사진 내 버튼 대비 개선 — 투명배경(0.136) → 진한 반투명 흰테두리 */
  background: rgba(20,24,34,0.82); border: 1px solid rgba(255,255,255,0.45);
  color: #ffffff; padding: 8px 15px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 700; font-family: var(--font-ui);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  transition: background .15s, transform .12s, border-color .15s;
}
.btn-pano-close svg { width: 17px; height: 17px; }
.btn-pano-close:hover { background: rgba(220,38,38,0.85); border-color: #fff; transform: translateY(-1px); }
.btn-pano-close:active { transform: translateY(0); }

.pano-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: var(--text2); font-size: 12px; font-family: var(--font-ui);
}
.pano-state.hidden { display: none !important; }
.pano-error-msg  { color: var(--gold); font-size: 13px; }
.pano-error-url  { color: var(--text3); font-size: 10px; max-width: 400px; text-align: center; word-break: break-all; }
.pano-error-hint { color: var(--text4); font-size: 10px; margin-top: 4px; }

.pano-canvas {
  display: block;
  width: 100%; height: 100%;
  cursor: grab; position: absolute; inset: 0;
}
.pano-canvas.hidden { display: none !important; }
.pano-canvas:active { cursor: grabbing; }

/* ── 레이더 미니맵 (도면 위 위치 + 시야 부채꼴) ── */
.pano-radar {
  position: absolute; left: 18px; bottom: 18px; z-index: 12;
  width: 188px;
  background: rgba(10,16,32,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.pano-radar.hidden { display: none !important; }
.pano-radar-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 6px; }
.pano-radar-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; }
.pano-radar-page { font-family: var(--font-mono); font-size: 10px; color: rgba(43,40,32,.55); }
.pano-radar-stage {
  position: relative; width: 100%; border-radius: 6px; overflow: hidden;
  background: #efe9dc; line-height: 0;
}
.pano-radar-map { width: 100%; display: block; opacity: .9; }
.pano-radar-pins { position: absolute; inset: 0; }
.pano-radar-pin {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: rgba(107,100,87,.85);
  border: 1px solid rgba(15,23,42,.8); cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.pano-radar-pin:hover { transform: scale(1.4); background: #fff; }
.pano-radar-pin.current { background: var(--gold); width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
/* 시야 부채꼴 — 현재 핀 중심으로 회전 */
.pano-radar-cone { position: absolute; width: 0; height: 0; pointer-events: none; }
.pano-radar-fan {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  /* 위쪽(12시)을 향해 펼쳐지는 부채꼴. 컨테이너 회전으로 방향 제어 */
  background: conic-gradient(from -35deg, rgba(245,158,11,.42), rgba(245,158,11,.05) 70deg, transparent 70deg);
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.pano-radar-dot {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(245,158,11,.9);
}

/* ── 핀 간 이동 (이전/다음) ── */
.pano-nav {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 12;
  background: rgba(10,16,32,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(43,40,32,0.17); border-radius: 999px;
  padding: 6px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.pano-nav.hidden { display: none !important; }
.btn-pano-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  /* [대비수정] 360뷰어 좌우 네비 — 어두운 오버레이 위 흰 아이콘 */
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.30);
  color: #f1f3f8; cursor: pointer; transition: background .12s, transform .12s;
}
.btn-pano-nav svg { width: 18px; height: 18px; }
.btn-pano-nav:hover:not(:disabled) { background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.5); transform: translateY(-1px); }
.btn-pano-nav:disabled { opacity: .3; cursor: default; }
.pano-nav-label { font-family: var(--font-mono); font-size: 12px; color: rgba(43,40,32,.85); min-width: 44px; text-align: center; }

/* 레이더와 nav가 겹치지 않도록 hint는 nav 위로 살짝 */
.pano-overlay:has(#pano-nav:not(.hidden)) .pano-hint { bottom: 64px; }

.pano-hint {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: rgba(10,16,32,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(43,40,32,0.136);
  border-radius: 8px;
  padding: 7px 18px; color: rgba(43,40,32,.7); font-size: 11px;
  font-family: var(--font-ui);
  display: flex; gap: 20px; white-space: nowrap;
  z-index: 11;
}
.pano-hint span { display: inline-flex; align-items: center; gap: 6px; }
.pano-hint svg { opacity: .65; }
.pano-hint.hidden { display: none !important; }

/* 파노라마 컨트롤 바 — 전문 플로팅 툴바 */
.pano-controls {
  position: absolute; bottom: 56px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; z-index: 12;
  background: rgba(10,16,32,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(43,40,32,0.17);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(43,40,32,0.102);
}
.pano-controls.hidden { display: none !important; }
.pano-ctrl-sep {
  width: 1px; height: 22px; margin: 0 4px;
  background: rgba(43,40,32,0.17);
}
.btn-pano-ctrl {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  /* [마스터 요청·버그수정] 검은 배경 컨트롤바에 검은 글자(43,40,32) → 진한 흰색으로 가시성 확보 */
  color: #f1f3f8; border-radius: 8px;
  padding: 8px 13px; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: var(--font-ui);
  transition: background .16s, color .16s, transform .12s;
  white-space: nowrap;
}
.btn-pano-ctrl.icon-only { padding: 8px; }
.btn-pano-ctrl svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn-pano-ctrl:hover {
  background: rgba(43,40,32,0.17); color: #fff;
  transform: translateY(-1px);
}
.btn-pano-ctrl:active { transform: translateY(0); }
.btn-pano-ctrl.on {
  background: var(--gold); color: #f3ecd9; border-color: var(--gold);
  box-shadow: 0 0 14px rgba(245,158,11,.45);
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   FLOATING NAV TOOLBAR (전문 도면 뷰어 스타일)
══════════════════════════════════════════════════════ */
.nav-toolbar {
  /* ezPDF 상단 통합 툴바(#pdf-toolbar)로 대체 — 떠다니는 캡슐 숨김 */
  display: none !important;
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 30;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: rgba(13, 20, 37, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(43,40,32,0.068);
}
.nav-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none; border-radius: 9px;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.nav-btn svg { width: 20px; height: 20px; }
.nav-btn:hover { background: rgba(43,40,32,0.119); color: var(--text); }
.nav-btn:active { transform: scale(.92); }
.nav-btn.accent { color: var(--accent); }
.nav-btn.active {
  color: #5baaff;
  background: rgba(91,170,255,.15);
  box-shadow: inset 0 0 0 1px rgba(91,170,255,.5), 0 0 14px rgba(91,170,255,.25);
}
.nav-btn-iso.active svg { filter: drop-shadow(0 0 4px rgba(91,170,255,.7)); }
.zoom-level {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .5px;
  color: var(--text); text-align: center;
  padding: 3px 4px; min-width: 44px;
  border-radius: 6px; cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.zoom-level:hover { background: rgba(43,40,32,0.119); color: var(--accent); }
.nav-sep {
  width: 60%; height: 1px;
  background: var(--border2);
  margin: 4px 0;
}

/* 회전 컨트롤 그룹 (nav-toolbar 내부, 세로 흐름) */
.rotate-group {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  width: 100%;
}
.rotate-group.hidden { display: none; }
.rotate-level {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .5px;
  color: var(--text); text-align: center;
  padding: 3px 4px; min-width: 44px;
  border-radius: 6px; cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.rotate-level:hover { background: rgba(43,40,32,0.119); color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   PDF 썸네일 스트립 (멀티페이지 도면 탐색 — 전문 뷰어 UX)
══════════════════════════════════════════════════════ */
.pdf-thumb-strip {
  position: absolute;
  left: 14px; top: 14px; bottom: 14px;
  z-index: 28;
  /* [마스터 요청] PDF 썸네일 2배 확대 (96 → 192) */
  width: 192px;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  overflow-y: auto;
  background: rgba(13, 20, 37, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(43,40,32,0.068);
  scrollbar-width: thin;
}
.pdf-thumb-strip.hidden { display: none; }
.pdf-thumb-strip::-webkit-scrollbar { width: 6px; }
.pdf-thumb-strip::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.pdf-thumb-item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* [마스터 요청] 썸네일 항목 2배 (56 → 112) */
  width: 100%; min-height: 112px;
  padding: 6px;
  background: rgba(43,40,32,0.051);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.pdf-thumb-item:hover { background: rgba(43,40,32,0.119); border-color: var(--border2); }
.pdf-thumb-item:active { transform: scale(.96); }
.pdf-thumb-item.active {
  border-color: var(--gold, #f59e0b);
  background: rgba(245,158,11,.10);
  box-shadow: 0 0 0 1px rgba(245,158,11,.25);
}
.pdf-thumb-canvas {
  /* [마스터 요청] 썸네일 캔버스 2배 (110 → 220) */
  max-width: 100%; max-height: 220px;
  display: block;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pdf-thumb-no {
  position: absolute;
  right: 6px; bottom: 6px;
  font-family: var(--font-ui);
  /* [마스터 요청] 페이지 번호도 2배 + 진한 흰색(검은배경 가시성) */
  font-size: 14px; line-height: 1; font-weight: 700;
  color: #ffffff;
  background: rgba(0,0,0,.78);
  padding: 3px 7px; border-radius: 5px;
  pointer-events: none;
}
.pdf-thumb-item.active .pdf-thumb-no {
  background: var(--gold, #f59e0b); color: #f3ecd9; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   ENHANCED PIN MARKER (전문 핀 아이콘)
══════════════════════════════════════════════════════ */
.pin-marker {
  position: absolute;
  /* 바늘형 핀: SVG tip(18,62) viewBox 높이 64 기준 → 박스 하단보다 2/64≈3% 위.
     translate(-50%,-100%) 후 바늘 끝(tip)을 좌표에 정확히 고정 */
  transform: translate(-50%, calc(-100% + 2px));
  transform-origin: 50% 100%;
  cursor: pointer;
  pointer-events: all;
  z-index: 10;
  transition: filter .18s, z-index 0s;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45));
}
.pin-marker:hover { z-index: 20; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.pin-pin {
  position: relative;
  width: 21px; height: 37px;     /* 바늘형(36x64 비율) — 더 길고 날카롭게 */
  transform-origin: 50% 100%;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pin-marker:hover .pin-pin { transform: scale(1.22); }
.pin-marker.focused .pin-pin { transform: scale(1.28); }
.pin-pin svg { width: 21px; height: 37px; display: block; overflow: visible; }
.pin-empty-page { font-size: 12.5px; color: rgba(43,40,32,.55); padding: 14px 6px; margin: 0; line-height: 1.6; text-align: center; }
.pin-pin-fill {
  fill: var(--accent);
  stroke: #fff; stroke-width: 1.3;
  paint-order: stroke;
}
.pin-marker.focused .pin-pin-fill { fill: #fff; stroke: var(--accent); }
.pin-pin-num {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-weight: 800; font-size: 9px;
  color: #fff;
  line-height: 1; pointer-events: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.pin-marker.focused .pin-pin-num { color: var(--bg); text-shadow: none; }

/* ── 핀 액션 아이콘 바 (디자이너: 선택 시 표시) ── */
.pin-actions {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(6px) scale(.92);
  display: flex; gap: 3px; padding: 3px;
  background: rgba(13,20,37,.97);
  border: 1px solid var(--border2);
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .16s, transform .16s;
  z-index: 30;
}
.pin-marker.focused .pin-actions {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.pin-marker.focused .pin-marker-label { display: none; } /* 액션바와 겹침 방지 */
.pin-act {
  width: 32px; height: 32px; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px;
  /* [마스터 요청] 검은 액션바 내 버튼 대비 강화 — 흰색 글자(진하게)+밝은 반투명 배경 */
  color: #ffffff; background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.40); transition: all .13s;
  pointer-events: auto;          /* ★ 부모(.pins-layer pe:none) 상속 방지 — 항상 클릭 가능 */
  -webkit-tap-highlight-color: rgba(91,170,255,.4);
  touch-action: manipulation;    /* 더블탭 줌 지연 제거 → 즉각 반응 */
}
/* ★ 터치 기기(hover 없음): 핀을 한 번 탭하면 focused → 액션바가 확실히 클릭 가능 */
@media (hover: none) {
  .pin-marker.focused .pin-actions { opacity: 1; pointer-events: auto; }
  .pin-act { width: 34px; height: 34px; font-size: 13px; } /* 손가락 터치 타깃 확대 */
}
.pin-act:hover { transform: translateY(-1px); }
.pin-act-view:hover { color: #fff; background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
.pin-act-move:hover { color: #fff; background: rgba(59,130,246,.4); border-color: #3b82f6; }
.pin-act-edit:hover { color: #fff; background: rgba(245,158,11,.4); border-color: #f59e0b; }
.pin-act-del:hover  { color: #fff; background: rgba(239,68,68,.4); border-color: #ef4444; }
/* hover 시 라벨 말풍선 */
.pin-marker-label {
  position: absolute;
  bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: rgba(13,20,37,.95);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 7px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.pin-marker:hover .pin-marker-label,
.pin-marker.focused .pin-marker-label {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* 미디어 보유 핀 펄스 링 */
.pin-pulse {
  position: absolute;
  left: 50%; top: 8px;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #10b981;   /* 사진 있는 핀(에메랄드) 전용 펄스 — 영역(골드)과 구분 */
  opacity: .55;
  animation: pinPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes pinPulse {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: .55; }
  70%  { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}
.pin-marker.drop .pin-pin { animation: pinDrop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pinDrop {
  0%   { transform: scale(.2) translateY(-30px); opacity: 0; }
  60%  { transform: scale(1.15) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════
   PIN NOTE & ATTACHMENTS (노트 · 첨부 문서)
══════════════════════════════════════════════════════ */
.pin-note-input {
  width: 100%; padding: 7px 9px;
  background: var(--bg); border: 1px solid var(--border2);
  color: var(--text); border-radius: 5px;
  font-size: 11px; line-height: 1.55; font-family: var(--font-ui);
  outline: none; resize: vertical; min-height: 54px;
  transition: border-color .15s;
}
.pin-note-input:focus { border-color: var(--gold); }
.pin-note-input::placeholder { color: var(--text3); }

.pin-doc-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pin-doc-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 5px; font-size: 10px;
}
.pin-doc-badge {
  flex-shrink: 0; width: 30px; text-align: center;
  font-size: 8px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 0; border-radius: 3px;
  color: #0a0f1a;
}
.pin-doc-meta { flex: 1; min-width: 0; }
.pin-doc-name {
  color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 10px;
}
.pin-doc-size { color: var(--text3); font-size: 8px; margin-top: 1px; }
.pin-doc-status { color: var(--green); font-size: 8px; }
.pin-doc-status.uploading { color: var(--gold); }
.pin-doc-status.error { color: var(--red); }
.pin-doc-remove {
  flex-shrink: 0; background: none; border: none;
  color: var(--text2); cursor: pointer; font-size: 13px;
  padding: 0 2px; line-height: 1; transition: color .15s;
}
.pin-doc-remove:hover { color: var(--red); }

/* ─── 뷰어 노트/첨부 패널 (파노라마 오버레이 내) ── */
.pano-info-panel {
  position: absolute; top: 62px; right: 16px;
  width: 300px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 200px); overflow-y: auto;
  background: rgba(10,16,32,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(43,40,32,0.17);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 12px 44px rgba(0,0,0,.5);
  z-index: 13; color: var(--text);
}
.pano-info-panel.hidden { display: none !important; }
.pano-info-title {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: 11px; letter-spacing: 2px; color: var(--gold);
  margin-bottom: 10px; font-family: var(--font-ui);
}
.pano-info-close {
  background: none; border: none; color: var(--text2);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.pano-info-close:hover { color: #fff; }
.pano-note-text {
  font-size: 12px; line-height: 1.65; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  padding: 8px 10px; background: rgba(43,40,32,0.068);
  border-radius: 8px; border-left: 3px solid var(--gold);
  margin-bottom: 12px; font-family: var(--font-ui);
}
.pano-attach-head {
  font-size: 9px; letter-spacing: 1.5px; color: var(--text2);
  margin-bottom: 6px; font-family: var(--font-ui);
}
.pano-attach-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 5px;
  background: rgba(43,40,32,0.068);
  border: 1px solid rgba(43,40,32,0.119);
  border-radius: 8px; cursor: pointer;
  transition: background .14s, transform .1s;
}
.pano-attach-item:hover { background: rgba(43,40,32,0.17); transform: translateX(2px); }
.pano-attach-name { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-attach-dl { flex-shrink: 0; color: var(--green); }
.pano-attach-dl svg { width: 16px; height: 16px; }

/* 핀 리스트 노트/첨부 표시 아이콘 */
.pin-meta-icons { display: inline-flex; gap: 5px; margin-left: 5px; opacity: .85; }
.pin-meta-icons svg { width: 11px; height: 11px; vertical-align: middle; }

/* ═══════════════════════════════════════════════════════
   이슈/필드노트 협업 — 뱃지 + 파노라마 패널
══════════════════════════════════════════════════════ */
/* 핀 리스트 미해결 이슈 뱃지 */
.pin-issue-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 800; font-family: var(--font-mono); line-height: 1;
  vertical-align: middle; box-shadow: 0 1px 4px rgba(239,68,68,.5);
}
/* 도면 마커 위 이슈 카운트 */
.pin-marker-issue {
  position: absolute; top: -4px; right: -5px; z-index: 4;
  min-width: 12px; height: 12px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 8px; font-weight: 800; font-family: var(--font-mono); line-height: 1;
  border: 1.5px solid #efe9dc; box-shadow: 0 1px 4px rgba(239,68,68,.6);
}

/* 파노라마 헤더 액션 묶음 */
.pano-header-actions { display: flex; align-items: center; gap: 10px; }
/* ISO 4-꼭지점 뷰 전환 그룹 */
.pano-iso-views {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(15,23,42,.55); border: 1px solid var(--border);
}
.pano-iso-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--accent); font-family: var(--font-mono); margin-right: 4px;
}
.pano-iso-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; cursor: pointer; border: 1px solid rgba(255,255,255,.22);
  /* [대비수정] 어두운 헤더 위 버튼 → 밝은 글자/심볼(흰색) + 약한 밝은 배경 */
  background: rgba(255,255,255,.10); color: #eef2f8;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
}
.pano-iso-btn .iso-corner { font-size: 13px; line-height: 1; }
.pano-iso-btn:hover { background: rgba(56,189,248,.35); color: #ffffff; transform: translateY(-1px); }
.pano-iso-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-pano-notes {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  /* [대비수정] 어두운 배경 → 흰 글자/아이콘 */
  background: rgba(15,23,42,.7); border: 1px solid rgba(255,255,255,.22); color: #eef2f8;
  font-size: 12px; font-family: var(--font-ui); font-weight: 600;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn-pano-notes:hover { background: rgba(30,41,59,.95); color: #ffffff; border-color: var(--accent); transform: translateY(-1px); }
.btn-pano-notes svg { width: 15px; height: 15px; }
.pano-notes-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; font-family: var(--font-mono);
}
.pano-notes-count.hidden { display: none; }

/* 우측 슬라이드 패널 */
.pano-notes-panel {
  position: fixed; top: 0; right: 0; z-index: 60;
  width: 380px; max-width: 92vw; height: 100vh;
  display: flex; flex-direction: column;
  background: rgba(11,18,32,.97); backdrop-filter: blur(10px);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .22s ease;
}
.pano-notes-panel.on { transform: translateX(0); }
.pano-notes-panel.hidden { display: none; }
.pnp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
}
.pnp-title { margin: 0; font-size: 15px; font-weight: 700; color: #2b2820; font-family: var(--font-ui); }
.pnp-pin-label { display: block; margin-top: 3px; font-size: 11.5px; color: var(--accent); font-family: var(--font-mono); }
.pnp-close { background: transparent; border: 0; color: var(--text2); cursor: pointer; padding: 4px; border-radius: 6px; }
.pnp-close:hover { color: #fff; background: rgba(43,40,32,0.136); }
.pnp-close svg { width: 18px; height: 18px; }

.pnp-filter { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.pnp-fbtn {
  flex: 1; padding: 6px 4px; border-radius: 7px; cursor: pointer;
  background: rgba(43,40,32,0.068); border: 1px solid transparent; color: var(--text2);
  font-size: 11px; font-family: var(--font-ui); transition: all .12s;
}
.pnp-fbtn:hover { color: #fff; }
.pnp-fbtn.active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: #fff; }

.pnp-list { flex: 1; overflow-y: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.pnp-loading { text-align: center; color: var(--text2); font-size: 12px; padding: 20px; font-family: var(--font-ui); }
.pnp-item {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 9px;
  padding: 10px 12px; background: rgba(43,40,32,0.043);
}
.pnp-item.st-open { border-left-color: #ef4444; }
.pnp-item.st-progress { border-left-color: #f59e0b; }
.pnp-item.st-done { border-left-color: #10b981; opacity: .82; }
.pnp-item-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.pnp-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; font-family: var(--font-mono);
}
.pnp-badge.st-open { background: rgba(239,68,68,.18); color: #fca5a5; }
.pnp-badge.st-progress { background: rgba(245,158,11,.18); color: #fcd34d; }
.pnp-badge.st-done { background: rgba(16,185,129,.18); color: #6ee7b7; }
.pnp-author { font-size: 11.5px; color: #3a352b; font-weight: 600; }
.pnp-assignee-tag { font-size: 10.5px; color: var(--accent); font-family: var(--font-mono); }
.pnp-time { margin-left: auto; font-size: 10px; color: var(--text2); font-family: var(--font-mono); }
.pnp-body { font-size: 13px; color: #2b2820; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pnp-status-actions { display: flex; gap: 5px; margin-top: 9px; align-items: center; }
.pnp-st-btn {
  padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 10.5px; font-family: var(--font-ui);
  background: rgba(43,40,32,0.085); border: 1px solid var(--border); color: var(--text2); transition: all .12s;
}
.pnp-st-btn:hover { color: #fff; }
.pnp-st-btn.active.open { background: rgba(239,68,68,.22); border-color: #ef4444; color: #fca5a5; }
.pnp-st-btn.active.progress { background: rgba(245,158,11,.22); border-color: #f59e0b; color: #fcd34d; }
.pnp-st-btn.active.done { background: rgba(16,185,129,.22); border-color: #10b981; color: #6ee7b7; }
.pnp-del { margin-left: auto; padding: 4px 8px; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text2); font-size: 11px; }
.pnp-del:hover { border-color: #ef4444; color: #ef4444; }

.pnp-empty { padding: 30px 18px; text-align: center; color: var(--text2); }
.pnp-empty.hidden { display: none; }
.pnp-empty-ico { font-size: 30px; margin-bottom: 8px; }
.pnp-empty p { margin: 3px 0; font-size: 12.5px; }
.pnp-empty-hint { font-size: 11px !important; opacity: .7; }

.pnp-form { padding: 12px 18px 16px; border-top: 1px solid var(--border); background: rgba(43,40,32,.04); }
.pnp-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px;
  padding: 9px 11px; border-radius: 8px; background: #fffdf8;
  border: 1px solid var(--border); color: #2b2820; font-size: 13px; font-family: var(--font-ui);
}
.pnp-input:focus { outline: none; border-color: var(--accent); }
.pnp-form-row { display: flex; gap: 7px; margin-top: 8px; }
.pnp-assignee { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 7px; background: rgba(43,40,32,0.05); border: 1px solid var(--border); color: #2b2820; font-size: 12px; font-family: var(--font-ui); }
.pnp-assignee:focus { outline: none; border-color: var(--accent); }
.pnp-status-sel { padding: 7px 8px; border-radius: 7px; background: rgba(43,40,32,0.05); border: 1px solid var(--border); color: #2b2820; font-size: 12px; font-family: var(--font-ui); }
.pnp-submit {
  padding: 7px 16px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  background: var(--accent); border: 0; color: #fff; font-size: 12.5px; font-weight: 700; font-family: var(--font-ui);
  transition: filter .12s;
}
.pnp-submit:hover { filter: brightness(1.1); }
.pnp-submit:disabled { opacity: .6; cursor: default; }
.pnp-author-row { margin-top: 8px; }
.pnp-author-row.hidden { display: none; }
.pnp-author { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 7px; background: rgba(43,40,32,0.05); border: 1px solid var(--border); color: #2b2820; font-size: 12px; font-family: var(--font-ui); }
.pnp-author:focus { outline: none; border-color: var(--accent); }

@media (max-width: 640px) {
  .pano-notes-panel { width: 100vw; max-width: 100vw; }
  .btn-pano-notes span:not(.pano-notes-count) { display: none; }
  .pano-iso-label { display: none; }
  .pano-iso-views { padding: 3px 5px; gap: 2px; }
  .pano-iso-btn { width: 30px; height: 30px; }
}

/* ═══════════════════════════════════════════════════════
   ALL-PINS — topbar 버튼 + 전체 핀 드로어
══════════════════════════════════════════════════════ */
.btn-allpins {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.35);
  color: var(--accent);
  border-radius: 8px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-allpins.hidden { display: none; }
.btn-allpins svg { width: 15px; height: 15px; }
.btn-allpins:hover { background: rgba(245,158,11,.20); box-shadow: 0 0 0 3px rgba(245,158,11,.10); }
.btn-allpins:active { transform: scale(.95); }

.allpins-drawer { position: fixed; inset: 0; z-index: 90; }
.allpins-drawer.hidden { display: none; }
.allpins-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,8,16,.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s;
}
.allpins-drawer.on .allpins-backdrop { opacity: 1; }
.allpins-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 90vw;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #efe9dc, var(--bg2));
  border-left: 1px solid var(--border2);
  box-shadow: -12px 0 40px rgba(0,0,0,.5);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.allpins-drawer.on .allpins-panel { transform: translateX(0); }

.allpins-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border2);
}
.allpins-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent);
  font-family: var(--font-ui); font-size: 15px; font-weight: 800;
  letter-spacing: .3px;
}
.allpins-title span:nth-child(2) { color: var(--text); }
.allpins-count {
  font-family: var(--font-ui); font-size: 11px;
  background: rgba(245,158,11,.15); color: var(--accent);
  padding: 2px 8px; border-radius: 20px;
}
.btn-allpins-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text2);
  border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.btn-allpins-close svg { width: 17px; height: 17px; }
.btn-allpins-close:hover { background: rgba(43,40,32,0.102); color: var(--text); }

.allpins-tools {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.allpins-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 36px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 9px;
}
.allpins-search svg { width: 15px; height: 15px; color: var(--text2); flex: none; }
.allpins-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-ui); font-size: 13px;
}
.allpins-search input::placeholder { color: var(--text2); }
.allpins-sort { display: flex; gap: 6px; }
.allpins-sort-btn {
  flex: 1; height: 30px;
  background: var(--bg); border: 1px solid var(--border2);
  color: var(--text2); border-radius: 8px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.allpins-sort-btn:hover { color: var(--text); border-color: var(--text3); }
.allpins-sort-btn.active {
  background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: var(--accent);
}

.allpins-list {
  flex: 1; overflow-y: auto;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
  scrollbar-width: thin;
}
.allpins-list::-webkit-scrollbar { width: 7px; }
.allpins-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.allpins-empty { padding: 40px 16px; text-align: center; color: var(--text2); font-size: 13px; }
.allpins-empty.hidden { display: none; }

.allpins-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; width: 100%;
  background: rgba(43,40,32,0.043);
  border: 1px solid var(--border2);
  border-radius: 11px; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
}
.allpins-item:hover { background: rgba(43,40,32,0.102); border-color: var(--text3); }
.allpins-item:active { transform: scale(.985); }
.allpins-item.active { border-color: var(--accent); background: rgba(245,158,11,.08); }

.allpins-thumb {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3) center/cover no-repeat;
  border: 1px solid var(--border2);
  overflow: hidden;
}
.allpins-thumb.pano  { box-shadow: inset 0 0 0 1px rgba(96,165,250,.3); }
.allpins-thumb.video { box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
.allpins-thumb.doc   { box-shadow: inset 0 0 0 1px rgba(96,165,250,.25); }
.allpins-thumb-ico { font-size: 18px; line-height: 1; }
.allpins-thumb.has-img .allpins-thumb-ico { display: none; }
.allpins-thumb-no {
  position: absolute; left: 3px; top: 3px;
  font-family: var(--font-mono); font-size: 9px; line-height: 1;
  color: #fff; background: rgba(0,0,0,.6);
  padding: 2px 4px; border-radius: 5px;
}
.allpins-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.allpins-name {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.allpins-sub { display: flex; align-items: center; gap: 6px; }
.allpins-kind {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 20px;
  background: rgba(43,40,32,0.102); color: var(--text2);
}
.allpins-kind.pano  { background: rgba(96,165,250,.14); color: #93c5fd; }
.allpins-kind.video { background: rgba(248,113,113,.14); color: #fca5a5; }
.allpins-kind.doc   { background: rgba(96,165,250,.12); color: #93c5fd; }
.allpins-kind.note  { background: rgba(245,158,11,.14); color: var(--accent); }
.allpins-page {
  font-family: var(--font-ui); font-size: 10px;
  color: var(--text2); border: 1px solid var(--border2);
  padding: 1px 6px; border-radius: 5px;
}
.allpins-go {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); border-radius: 8px;
  transition: color .15s, background .15s;
}
.allpins-go svg { width: 16px; height: 16px; }
.allpins-item:hover .allpins-go { color: var(--accent); background: rgba(245,158,11,.1); }

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .sidebar { width: 200px; }
  .home-title { font-size: 26px; }
  .nav-toolbar { right: 10px; bottom: 10px; }
  .nav-btn { width: 36px; height: 36px; }
  .pano-info-panel { width: calc(100vw - 24px); right: 12px; top: 58px; }
  .allpins-panel { width: 100vw; max-width: 100vw; }
  .btn-allpins span { display: none; }
  .btn-allpins { padding: 0 8px; }
}

/* ══════════ 타임랩스 비교 (시점 전/후 토글) ══════════ */
.pano-timeline {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 8px; z-index: 13;
  max-width: min(86vw, 760px);
  background: rgba(10,16,32,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(43,40,32,0.204); border-radius: 14px;
  padding: 8px 10px; box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.pano-timeline.hidden { display: none !important; }
.tl-arrow {
  flex: 0 0 auto; width: 34px; border: 1px solid rgba(255,255,255,0.28);
  /* [대비수정] 타임라인(어두운 배경) 위 화살표 → 흰색 */
  background: rgba(255,255,255,0.10); border-radius: 9px; color: #f1f3f8;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: .15s;
}
.tl-arrow svg { width: 16px; height: 16px; }
.tl-arrow:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(43,40,32,.9); }
.tl-ico { font-size: 13px; }
.tl-title { font-weight: 700; letter-spacing: .3px; color: var(--accent); }
.tl-current { font-family: var(--font-mono); color: rgba(43,40,32,.7); }
.tl-compare-btn {
  margin-left: auto; font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; color: #fff;
  background: color-mix(in srgb, var(--accent) 78%, #000 0%);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #fff 0%);
  transition: .15s;
}
.tl-compare-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.tl-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.tl-chips::-webkit-scrollbar { height: 5px; }
.tl-chips::-webkit-scrollbar-thumb { background: rgba(43,40,32,0.34); border-radius: 3px; }
.tl-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 5px 11px; border-radius: 9px; cursor: pointer;
  background: rgba(43,40,32,0.085); border: 1px solid rgba(43,40,32,0.204);
  color: #3a352b; font-size: 12px; transition: .15s; white-space: nowrap; position: relative;
}
.tl-chip:hover { background: rgba(43,40,32,0.17); }
.tl-chip.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.tl-chip-label { font-weight: 600; }
.tl-chip-date { font-family: var(--font-mono); font-size: 10px; color: rgba(43,40,32,.55); }
.tl-chip-tag {
  position: absolute; top: -6px; right: -4px; font-size: 9px; font-weight: 700;
  background: #2f9e6f; color: #ffffff; padding: 1px 5px; border-radius: 999px;
}

/* ══════════ 전/후 분할 비교 오버레이 ══════════ */
.pano-compare {
  position: absolute; inset: 0; z-index: 30; overflow: hidden;
  background: #efe9dc; user-select: none; touch-action: none;
}
.pano-compare.hidden { display: none !important; }
.cmp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cmp-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.cmp-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: var(--accent); cursor: ew-resize; z-index: 5;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.cmp-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #04111f;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: ew-resize;
}
.cmp-label {
  position: absolute; top: 14px; padding: 5px 12px; border-radius: 999px; z-index: 6;
  font-size: 12px; font-weight: 700; color: #fff; background: rgba(10,16,32,.8);
  border: 1px solid rgba(43,40,32,0.272); backdrop-filter: blur(6px);
}
.cmp-label-a { left: 14px; }
.cmp-label-b { right: 14px; }
.cmp-close {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700;
  color: #fff; background: rgba(220,38,38,.85); border: 1px solid rgba(43,40,32,0.306);
  backdrop-filter: blur(6px); transition: .15s;
}
.cmp-close:hover { background: rgba(220,38,38,1); transform: translateX(-50%) translateY(-1px); }

@media (max-width: 640px) {
  .pano-timeline { max-width: 94vw; bottom: 70px; }
  .tl-compare-btn { font-size: 10px; padding: 2px 7px; }
}

/* ══════════ 영역(Zone) 하이라이트 ══════════ */
.zones-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* SVG 도형 오버레이 — 도면 전체를 덮고 % 좌표(viewBox 0~100)로 그림 */
.zones-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.zone-shape {
  pointer-events: auto; cursor: pointer;
  fill: color-mix(in srgb, var(--zc, #f59e0b) 14%, transparent);
  stroke: var(--zc, #f59e0b); stroke-width: 0.5; vector-effect: non-scaling-stroke;
  transition: fill .15s;
}
.zone-shape { stroke-width: 2px; }   /* non-scaling: 화면상 2px 고정 */
.zone-shape:hover, .zone-shape.active {
  fill: color-mix(in srgb, var(--zc, #f59e0b) 30%, transparent);
  stroke-width: 3px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
/* 그리기 미리보기 */
.zone-draft-svg .zd-shape { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.zone-draft-svg .zd-line { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.zone-draft-svg .zd-dot { fill: var(--accent); }
.zone-draft-svg .zd-dot.first { fill: #fff; stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
/* 라벨 박스 — 도형 위 좌상단(테두리 없음, SVG가 도형 담당) */
.zone-box {
  position: absolute; pointer-events: none; cursor: pointer;
  border: none; background: transparent;
}
.zone-box-label, .zone-box-del { pointer-events: auto; }
.zone-box.active .zone-box-label { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.4); }
/* 영역 지정 도구 바 */
.zone-tools-label { font-size: 11px; font-weight: 700; color: rgba(43,40,32,.6); margin: 10px 0 6px; letter-spacing: .02em; }
/* 영역 지정 도구 드롭다운(details/summary) - 데스크탑은 항상 펼침 느낌 */
.zone-tools-wrap { margin: 8px 0 0; }
.zone-tools-wrap > summary.zone-tools-label {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; user-select: none;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(43,40,32,.06); border: 1px solid rgba(43,40,32,.12);
}
.zone-tools-wrap > summary.zone-tools-label::-webkit-details-marker { display: none; }
.zone-tools-wrap .ztl-text { display: inline-flex; align-items: center; gap: 6px; }
.zone-tools-wrap .ztl-ico { color: var(--accent); font-size: 11px; }
.zone-tools-wrap .ztl-chevron { font-size: 10px; transition: transform .2s; color: rgba(43,40,32,.5); }
.zone-tools-wrap[open] .ztl-chevron { transform: rotate(180deg); }
.zone-tools-wrap[open] .zone-tools { margin-top: 7px; }
.zone-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.zone-tool {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px; border-radius: 9px; cursor: pointer;
  font-size: 11px; font-weight: 700; color: #3a352b;
  background: rgba(43,40,32,0.085); border: 1px solid rgba(43,40,32,0.204); transition: .15s;
}
.zone-tool svg { width: 20px; height: 20px; }
.zone-tool:hover { background: rgba(43,40,32,0.17); border-color: var(--accent); color: #fff; }
.zone-tool.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--accent) inset;
}
.zone-item-shape { display: inline-flex; align-items: center; color: rgba(43,40,32,.6); }
.zone-item-shape svg { width: 13px; height: 13px; }
.zone-box-label {
  position: absolute; top: -1px; left: -1px;
  background: var(--zc, #f59e0b); color: #efe9dc; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px 0 6px 0; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: none;
}
.zone-box-cnt {
  display: inline-block; background: rgba(11,18,32,.75); color: #fff;
  border-radius: 999px; padding: 0 5px; font-size: 10px; margin-left: 3px;
}
.zone-box-del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border-radius: 5px; border: none; cursor: pointer; font-size: 11px; font-weight: 800;
  background: rgba(220,38,38,.9); color: #fff; display: none; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.zone-box:hover .zone-box-del { display: flex; }
.zone-draft {
  position: absolute; z-index: 4; pointer-events: none;
  border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 4px;
}
.zone-draft.hidden { display: none; }
.pin-marker.zone-dim { opacity: .28; filter: grayscale(.5); transition: opacity .15s; }
.pin-marker.zone-hot { z-index: 9; transition: transform .15s; }
.pin-marker.zone-hot .pin-pin { filter: drop-shadow(0 0 8px var(--accent)); }
.btn-zone {
  width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #2b2820;
  background: rgba(43,40,32,0.085); border: 1px dashed rgba(43,40,32,0.425); transition: .15s;
}
.btn-zone:hover { background: rgba(43,40,32,0.17); border-color: var(--accent); color: #fff; }
.btn-zone.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-style: solid; border-color: var(--accent); color: #fff;
}
.zone-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.zone-count {
  font-family: var(--font-mono); font-size: 11px; color: #efe9dc; font-weight: 800;
  background: var(--accent); border-radius: 999px; padding: 1px 8px;
}
.zone-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.zone-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(43,40,32,0.068); border: 1px solid rgba(43,40,32,0.136); transition: .15s;
}
.zone-item:hover, .zone-item.active {
  background: rgba(43,40,32,0.153); border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.zone-item-color { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.zone-item-label { flex: 1 1 auto; font-size: 13px; color: #2b2820; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-item-page { font-family: var(--font-mono); font-size: 10px; color: rgba(43,40,32,.5); }
.zone-item-cnt { font-size: 11px; color: rgba(43,40,32,.7); white-space: nowrap; }
.zone-empty { font-size: 12px; color: rgba(43,40,32,.5); padding: 8px 2px; margin: 0; line-height: 1.5; }

/* ── Zone icon (SVG) alignment ───────────────────────────── */
.btn-zone {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-zone svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-zone span { line-height: 1; }
.zone-list-title { display: inline-flex; align-items: center; gap: 6px; }
.zone-list-title svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
.zone-box-del svg { width: 13px; height: 13px; display: block; }
.zone-item-cnt { display: inline-flex; align-items: center; gap: 3px; }
.zone-item-cnt svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .75; }

/* ════════════════════════════════════════════════
   PRO POLISH v3 — 플로팅 포인트 편집 패널 · 토스트 · 사이드바 정제
   (도면 등록 후 기본 작업 패널이 항상 유지되도록 폼을 도면 위 부동 패널로 분리)
   ════════════════════════════════════════════════ */

/* 사이드바 섹션 헤더(포인트 목록) */
.pin-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pin-list-title { display: inline-flex; align-items: center; gap: 6px; color: #3a352b; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.pin-list-title svg { width: 14px; height: 14px; opacity: .8; }

/* 섹션 타이틀 라벨 통일감 */
.zone-tools-label, .zone-list-title, .pin-list-title {
  font-family: var(--font-ui);
}

/* ── 플로팅 포인트 편집 패널 ── */
.pin-form-float {
  position: absolute;
  top: 16px; right: 16px;
  width: 312px; max-width: calc(100% - 32px);
  z-index: 60;
  background: linear-gradient(165deg, rgba(13,20,37,.97), rgba(10,16,32,.98));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border2));
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 1px 0 rgba(43,40,32,0.068);
  padding: 14px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.pin-form-float::before {
  /* 상단 액센트 라인 */
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px; opacity: .85;
}
.pin-form-float.pf-in { animation: pfPop .28s cubic-bezier(.2,.9,.25,1.2); }
@keyframes pfPop {
  0%   { opacity: 0; transform: translateY(-8px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 편집 헤더의 좌표/모드 표시 */
.pin-form.compact .pf-head { padding-bottom: 9px; margin-bottom: 1px; border-bottom: 1px solid var(--border2); }
.pin-form.compact .pf-title { letter-spacing: .3px; font-size: 12.5px; font-weight: 700; color: #2b2820; }

/* ── 진지한 사이드바 정제: 섹션 구분/여백/타이포 ── */
.sidebar {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
}
.sidebar-section { padding: 12px 12px; gap: 8px; }
.sidebar-section.pin-list-wrap { padding: 10px 12px; }

/* 업로드/배치/배포 버튼 — 더 묵직하고 전문적으로 */
.btn-upload, .btn-place, .btn-deploy {
  border-radius: 8px;
  letter-spacing: .8px;
  text-transform: uppercase;
  transition: background .16s, border-color .16s, box-shadow .16s, transform .1s;
}
.btn-place {
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
}
.btn-place:hover:not(.active) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent), 0 6px 16px rgba(0,0,0,.3);
}
.btn-place.active { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }

/* 핀 아이템 — 카드형 정제 */
.pin-item {
  padding: 9px 10px; border-radius: 9px;
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border2);
}
.pin-item:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pin-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.pin-num {
  width: 24px; height: 24px;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 10px;
}
.pin-name { font-weight: 600; }

/* 영역/구역 도구 — 정렬 정제 */
.zone-tools-label { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--text2); margin-top: 4px; }

/* 드래그 가능한 마커 표시 */
.pin-marker.draggable .pin-pin { cursor: grab; }
.pin-marker.draggable.moving { z-index: 200; }
.pin-marker.draggable.moving .pin-pin { cursor: grabbing; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); transform: scale(1.12); }
.pin-marker.draggable.moving .pin-marker-label { opacity: .5; }

/* ── 토스트 ── */
.wm-toast-host {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.wm-toast {
  background: linear-gradient(165deg, rgba(13,20,37,.98), rgba(10,16,32,.99));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border2));
  /* [대비수정] 어두운 배경 → 흰 글자(이전엔 #2b2820 검정이라 안 보임) */
  color: #f4f6fb; font-size: 12.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .26s, transform .26s;
  max-width: 78vw; text-align: center;
}
.wm-toast.on { opacity: 1; transform: translateY(0) scale(1); }

/* 모바일: 플로팅 폼을 하단 시트 형태로 */
@media (max-width: 720px) {
  .pin-form-float {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    /* ★ 모바일: 내용이 길거나 키보드가 올라와도 잘리지 않게 — 시트 높이 제한 + 내부 스크롤 */
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -14px 44px rgba(0,0,0,.4);
  }
  /* 시트 드래그 핸들 */
  .pin-form-float::after {
    content: ""; position: sticky; top: 0; display: block;
    width: 42px; height: 5px; margin: -2px auto 8px;
    border-radius: 99px; background: rgba(107,100,87,.32);
  }
  .pin-form-float.pf-in { animation: pfSheet .3s cubic-bezier(.2,.9,.25,1); }
  @keyframes pfSheet { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
}

/* ── 자동 저장 표시기 (버튼 없이 즉시 저장) ── */
.autosave-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  font-family: var(--font-ui);
  border: 1px solid var(--border2); background: rgba(8,13,24,.5);
  color: var(--text2); white-space: nowrap;
}
.autosave-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex: none; }
.autosave-indicator.saving { color: #93c5fd; border-color: rgba(59,130,246,.4); }
.autosave-indicator.saving .autosave-dot { background: #3b82f6; animation: asPulse 1s ease-in-out infinite; }
.autosave-indicator.saved { color: var(--green); border-color: rgba(16,185,129,.35); }
.autosave-indicator.saved .autosave-dot { background: var(--green); box-shadow: 0 0 6px rgba(16,185,129,.6); }
.autosave-indicator.error { color: var(--red); border-color: rgba(248,113,113,.45); }
.autosave-indicator.error .autosave-dot { background: var(--red); }
.autosave-indicator.offline { color: var(--gold); border-color: rgba(245,158,11,.4); }
.autosave-indicator.offline .autosave-dot { background: var(--gold); }
@keyframes asPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ════════════════════════════════════════════════════════════
   SIGN-IN GATE — SECMS 스타일 설계자 로그인 (구글 로그인 모방)
════════════════════════════════════════════════════════════ */
.signin-gate {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .22s ease;
}
.signin-gate.on { opacity: 1; }
.signin-gate.hidden { display: none; }
.signin-gate-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(15,23,42,.86), rgba(8,12,24,.94));
  backdrop-filter: blur(6px);
}
.signin-gate-card {
  position: relative; width: min(380px, 94vw);
  background: linear-gradient(180deg, #faf7f0 0%, #f2ece0 100%);
  border: 1px solid rgba(56,189,248,.16);
  border-radius: 20px; padding: 30px 28px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(43,40,32,0.034) inset;
  transform: translateY(10px) scale(.985); transition: transform .24s cubic-bezier(.2,.9,.3,1.2);
  text-align: center;
}
.signin-gate.on .signin-gate-card { transform: translateY(0) scale(1); }
.signin-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.signin-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(56,189,248,.05));
  border: 1px solid rgba(56,189,248,.3);
  display: flex; align-items: center; justify-content: center;
}
.signin-brand-mark svg { width: 22px; height: 22px; }
.signin-brand-name { color: #3a352b; font-size: 14px; letter-spacing: .04em; }
.signin-brand-name b { color: #38bdf8; font-weight: 700; }
.signin-title { color: #2b2820; font-size: 19px; font-weight: 700; margin: 4px 0 6px; }
.signin-sub { margin: 0 0 18px; font-size: 13px; }
.signin-request-link { color: #38bdf8; cursor: default; }
.signin-gsi { display: flex; justify-content: center; margin-bottom: 8px; }
.signin-gsi:empty { display: none; }

.signin-google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #4a4438; border: none; border-radius: 11px;
  padding: 11px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s;
}
.signin-google-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.32); }
.signin-google-btn.hidden { display: none; }
.signin-google-btn .g-logo { width: 19px; height: 19px; }

.signin-learn-btn {
  width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #f2ece0; color: #3a352b; border: 1px solid rgba(107,100,87,.18); border-radius: 11px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.signin-learn-btn:hover { background: #212c47; }
.signin-learn-btn svg { width: 16px; height: 16px; opacity: .8; }
.signin-learn-btn .arr { margin-left: 2px; opacity: .85; }

.signin-error {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  color: #fca5a5; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25);
}
.signin-error.hidden { display: none; }

.signin-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 2px 14px;
  color: #7a7264; font-size: 11px; letter-spacing: .14em; font-weight: 600;
}
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: rgba(107,100,87,.14); }

.signin-invite-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, #2f9e6f, #3bb583); color: #fff; border: none; border-radius: 11px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(16,185,129,.32); transition: transform .12s, box-shadow .12s;
}
.signin-invite-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(16,185,129,.4); }
.signin-invite-btn svg { width: 17px; height: 17px; }

.signin-footer {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 18px 0 4px; color: #6b6457; font-size: 12px;
}
.signin-footer svg { width: 15px; height: 15px; }
.signin-admin-mail { color: #3a352b; }
.signin-cancel {
  margin-top: 12px; background: none; border: none; color: #7a7264; font-size: 13px;
  cursor: pointer; padding: 6px 12px; transition: color .15s;
}
.signin-cancel:hover { color: #3a352b; }

/* ════════════════════════════════════════════════════════════
   ACCESS GATE — 권한 없음 / 사용 신청(Request Access) — Genspark 모방
════════════════════════════════════════════════════════════ */
.access-gate {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .22s ease; overflow-y: auto;
}
.access-gate.on { opacity: 1; }
.access-gate.hidden { display: none; }
.access-gate-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(130% 130% at 50% 0%, rgba(11,17,32,.9), rgba(5,8,16,.97));
  backdrop-filter: blur(7px);
}
.access-gate-card {
  position: relative; width: min(360px, 94vw);
  margin: auto;
  background: linear-gradient(180deg, #f2ece0 0%, #faf7f0 100%);
  border: 1px solid rgba(56,189,248,.12);
  border-radius: 18px; padding: 28px 26px 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  transform: translateY(12px) scale(.98); transition: transform .24s cubic-bezier(.2,.9,.3,1.2);
  text-align: center;
}
.access-gate.on .access-gate-card { transform: translateY(0) scale(1); }
.access-gate-lock { display: flex; justify-content: center; margin-bottom: 8px; }
.access-gate-lock svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 10px rgba(245,158,11,.3)); }
.access-gate-title { color: #6b6457; font-size: 20px; font-weight: 700; margin: 6px 0 8px; letter-spacing: .01em; }
.access-gate-email { color: #38bdf8; font-size: 14px; font-weight: 600; margin-bottom: 6px; word-break: break-all; }
.access-gate-sub { color: #2b2820; font-size: 13px; margin: 0 0 20px; opacity: .9; }

.access-form { text-align: left; }
.access-field { display: block; margin-bottom: 14px; }
.access-label { display: block; color: #2b2820; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.access-label .req { color: #ef4444; font-style: normal; margin-left: 2px; }
.access-input {
  width: 100%; box-sizing: border-box;
  background: #fff; color: #4a4438; border: 1px solid rgba(43,40,32,0.17); border-radius: 9px;
  padding: 11px 13px; font-size: 14px; outline: none; transition: box-shadow .15s, border-color .15s;
  display: flex; align-items: center; gap: 8px;
}
.access-input::placeholder { color: #7a7264; }
.access-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,.22); }
.access-input.readonly { background: #efe9dc; cursor: not-allowed; }
.access-mail-ico { width: 17px; height: 17px; flex: none; }
.access-readonly-text { color: #6b7280; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.access-error, .access-success {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
}
.access-error { color: #fca5a5; background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); }
.access-success { color: #86efac; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.28); }
.access-error.hidden, .access-success.hidden { display: none; }

.access-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, #efe9dc, #e4dccb); color: #3a352b;
  border: 1px solid rgba(107,100,87,.2); border-radius: 11px;
  padding: 13px 14px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  margin-top: 4px; transition: background .15s, transform .12s;
}
.access-submit:hover { background: linear-gradient(135deg, #e4dccb, #d9cfb8); transform: translateY(-1px); }
.access-submit:disabled, .access-submit.loading { opacity: .6; cursor: progress; }
.access-submit svg { width: 18px; height: 18px; }
.access-cancel {
  width: 100%; margin-top: 12px; background: none; border: none; color: #6b6457;
  font-size: 13.5px; cursor: pointer; padding: 6px; transition: color .15s;
}
.access-cancel:hover { color: #2b2820; }

/* ══════════════════════════════════════════════════════════════
   CAD INSPECTOR  ── 우측 슬라이드 상세 패널 (3D/CAD 스타일)
   구역(ZONE)·포인트(POINT)의 좌표·치수·연결정보를 표시
══════════════════════════════════════════════════════════════ */
.inspector {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 86vw; z-index: 40;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(13,20,37,.97), rgba(8,13,24,.99));
  border-left: 1px solid color-mix(in srgb, var(--accent) 38%, #efe9dc);
  box-shadow: -18px 0 48px rgba(0,0,0,.55),
              inset 1px 0 0 color-mix(in srgb, var(--accent) 22%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  transform: translateX(108%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.inspector::before {
  /* CAD 격자 텍스처 오버레이 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 100%);
}
.inspector.hidden { display: none; }
.inspector.on { transform: translateX(0); }

.inspector-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 13px; flex: 0 0 auto;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, #11182b);
  background: linear-gradient(180deg, rgba(43,40,32,0.068), transparent);
}
.inspector-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.inspector-kind {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px;
  padding: 4px 8px; border-radius: 5px; text-transform: uppercase;
  font-family: "SF Mono", ui-monospace, monospace;
}
.inspector-kind.kind-zone {
  color: #fde68a; background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.4);
}
.inspector-kind.kind-pin {
  color: #7dd3fc; background: rgba(56,189,248,.14);
  border: 1px solid rgba(56,189,248,.42);
}
.inspector-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: #2b2820;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inspector-close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; font-size: 18px; line-height: 1;
  color: #6b6457; background: rgba(43,40,32,0.068);
  border: 1px solid rgba(43,40,32,0.136); transition: all .15s;
}
.inspector-close:hover { color: #fff; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.5); }

.inspector-body {
  position: relative; z-index: 1;
  flex: 1 1 auto; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}

/* 상단 형태/페이지 배지 행 */
.insp-swatch-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 9px;
  background: linear-gradient(150deg, rgba(43,40,32,0.085), rgba(43,40,32,0.034));
  border: 1px solid rgba(43,40,32,0.119);
}
.insp-swatch {
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(0,0,0,.3), 0 0 10px currentColor;
}
.insp-pin-ico {
  width: 22px; height: 22px; flex: 0 0 auto; color: #7a7264;
  display: grid; place-items: center;
}
.insp-pin-ico svg { width: 20px; height: 20px; }
.insp-pin-ico.ok { color: #38bdf8; filter: drop-shadow(0 0 6px rgba(56,189,248,.6)); }
.insp-shape-name {
  flex: 1; font-size: 12.5px; font-weight: 600; color: #3a352b;
  font-family: "SF Mono", ui-monospace, monospace; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.insp-page-badge {
  flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 1px;
  color: #93c5fd; padding: 3px 7px; border-radius: 5px;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.32);
  font-family: "SF Mono", ui-monospace, monospace;
}

/* 섹션 */
.insp-section {
  border: 1px solid rgba(43,40,32,0.102); border-radius: 9px;
  background: rgba(43,40,32,0.031); overflow: hidden;
}
.insp-section-h {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 85%, #fff);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  border-bottom: 1px solid rgba(43,40,32,0.085);
}
.insp-unit { font-size: 9px; font-weight: 500; letter-spacing: .5px; color: #7a7264; text-transform: none; }
.insp-count {
  margin-left: auto; font-size: 10px; font-weight: 800; color: #efe9dc;
  background: color-mix(in srgb, var(--accent) 90%, #fff); border-radius: 20px;
  min-width: 18px; height: 16px; padding: 0 6px; display: grid; place-items: center;
}

/* 좌표·치수 그리드 (CAD 데이터 그리드 느낌) */
.insp-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(43,40,32,0.085); padding: 1px;
}
.insp-metric {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--bg2);
  font-family: "SF Mono", ui-monospace, monospace;
}
.insp-metric.wide { grid-column: 1 / -1; }
.m-k { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #7a7264; text-transform: uppercase; }
.m-v { font-size: 12.5px; font-weight: 600; color: #2b2820; text-align: right; }

/* 연결 포인트 리스트 */
.insp-pinlist { display: flex; flex-direction: column; padding: 6px; gap: 4px; }
.insp-pinrow {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  background: rgba(43,40,32,0.043); border: 1px solid rgba(43,40,32,0.085);
  color: #3a352b; transition: all .14s;
}
.insp-pinrow:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateX(2px);
}
.insp-pinrow-no {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  color: #efe9dc; background: color-mix(in srgb, var(--accent) 88%, #fff);
}
.insp-pinrow-label { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-pinrow-tag {
  flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  color: #7dd3fc; padding: 2px 6px; border-radius: 4px;
  background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.32);
}
.insp-pinrow svg { width: 14px; height: 14px; flex: 0 0 auto; color: #7a7264; }
.insp-empty { padding: 14px 12px; font-size: 12px; color: #7a7264; text-align: center; }

.insp-note {
  padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: #3a352b;
  white-space: pre-wrap; word-break: break-word;
}

/* 첨부 자료 */
.insp-docs { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.insp-doc {
  font-size: 12px; color: #3a352b; padding: 6px 9px; border-radius: 6px;
  background: rgba(43,40,32,0.051); border: 1px solid rgba(43,40,32,0.102);
}

/* 액션 버튼 행 */
.insp-actions {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px;
  padding-top: 4px;
}
.insp-btn {
  flex: 1 1 auto; min-width: 88px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s;
  border: 1px solid transparent;
}
.insp-btn.primary {
  color: #efe9dc; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.insp-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.insp-btn.ghost {
  color: #3a352b; background: rgba(43,40,32,0.068); border-color: rgba(43,40,32,0.17);
}
.insp-btn.ghost:hover { background: rgba(43,40,32,0.136); border-color: rgba(43,40,32,0.34); color: #fff; }
.insp-btn.danger {
  color: #fca5a5; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.32);
}
.insp-btn.danger:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.55); color: #fff; }

/* 구역 리스트 항목 화살표 */
.zone-item-arrow {
  width: 15px; height: 15px; flex: 0 0 auto; color: #7a7264;
  transition: transform .15s, color .15s;
}
.zone-item:hover .zone-item-arrow { color: var(--accent); transform: translateX(2px); }

@media (max-width: 720px) {
  .inspector { width: 100%; max-width: 100%; border-left: none; }
}

/* ══════════════════════════════════════════════════════════════
   ADMIN 모달 — 탭 + 사용신청 데이터그리드 (CABLE 관리 그리드 스타일)
══════════════════════════════════════════════════════════════ */
.admin-gate-card.wide { max-width: 760px; width: 94vw; }

.adm-tabs {
  display: flex; gap: 4px; margin: 4px 0 16px;
  border-bottom: 1px solid rgba(43,40,32,0.136);
}
.adm-tab {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: #6b6457; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .15s;
}
.adm-tab:hover { color: #3a352b; }
.adm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.adm-tab i { font-size: 12px; }
.adm-req-badge {
  font-size: 10px; font-weight: 800; color: #fff; background: #ef4444;
  border-radius: 20px; min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-grid; place-items: center;
}

.adm-panel.hidden { display: none; }

/* 그리드 레이아웃: 좌측 필터 레일 + 메인 표 */
.adm-grid {
  display: grid; grid-template-columns: 168px 1fr; gap: 0;
  border: 1px solid rgba(43,40,32,0.136); border-radius: 10px; overflow: hidden;
  background: var(--bg2); min-height: 320px;
}
.adm-filter-rail {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  background: linear-gradient(180deg, rgba(43,40,32,0.043), transparent);
  border-right: 1px solid rgba(43,40,32,0.119);
}
.adm-filter-h {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #7a7264; padding: 4px 10px 8px;
}
.adm-filter-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  color: #6b6457; background: none; border: none; cursor: pointer; transition: all .14s;
}
.adm-filter-item:hover { background: rgba(43,40,32,0.068); color: #2b2820; }
.adm-filter-item.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #fff;
}
.adm-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.adm-dot.pending { background: #f59e0b; }
.adm-dot.approved { background: #22c55e; }
.adm-dot.rejected { background: #ef4444; }
.adm-dot.all { background: #7a7264; }
.adm-filter-cnt {
  margin-left: auto; font-size: 10.5px; font-weight: 800; color: #3a352b;
  background: rgba(43,40,32,0.119); border-radius: 20px; min-width: 20px;
  padding: 1px 6px; text-align: center;
}

.adm-grid-main { display: flex; flex-direction: column; min-width: 0; }
.adm-grid-head, .adm-req-row {
  display: grid;
  grid-template-columns: 1.7fr 1.3fr 1fr .9fr 80px;
  align-items: center; gap: 8px;
}
.adm-grid-head {
  padding: 10px 14px; font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: #7a7264;
  background: rgba(43,40,32,0.051); border-bottom: 1px solid rgba(43,40,32,0.119);
}
.adm-req-list { flex: 1; overflow-y: auto; max-height: 360px; }
.adm-req-row {
  padding: 10px 14px; font-size: 12.5px; color: #3a352b;
  border-bottom: 1px solid rgba(43,40,32,0.068); transition: background .12s;
}
.adm-req-row:hover { background: rgba(43,40,32,0.051); }
.adm-req-row .adm-col-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.adm-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #efe9dc;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
}
.adm-name-block { display: flex; flex-direction: column; min-width: 0; }
.adm-name { font-weight: 700; color: #2b2820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-email { font-size: 11px; color: #7a7264; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-col-company { display: flex; flex-direction: column; min-width: 0; }
.adm-company { font-weight: 600; color: #2b2820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-country { font-size: 11px; color: #7a7264; }
.adm-col-contact { font-family: "SF Mono", ui-monospace, monospace; font-size: 11.5px; color: #3a352b; }
.adm-badge {
  font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.adm-badge.pending { color: #fbbf24; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.35); }
.adm-badge.approved { color: #4ade80; background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.35); }
.adm-badge.rejected { color: #f87171; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.35); }
.adm-col-act { display: flex; gap: 6px; justify-content: flex-end; }
.adm-act-btn {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 12px; transition: all .14s; border: 1px solid transparent;
}
.adm-act-btn.approve { color: #4ade80; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
.adm-act-btn.approve:hover { background: rgba(34,197,94,.25); color: #fff; }
.adm-act-btn.reject { color: #f87171; background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.adm-act-btn.reject:hover { background: rgba(239,68,68,.25); color: #fff; }
.adm-req-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 50px 20px; color: #7a7264; font-size: 13px;
}
.adm-req-empty i { font-size: 30px; opacity: .5; }

@media (max-width: 640px) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-filter-rail { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(43,40,32,0.119); }
  .adm-filter-h { width: 100%; }
  .adm-grid-head { display: none; }
  .adm-req-row { grid-template-columns: 1fr auto; gap: 6px; }
  .adm-col-company, .adm-col-contact { grid-column: 1 / -1; padding-left: 39px; }
}

/* ══════════════════════════════════════════════════════════════
   COMPACT OPERATIONS — CABLE 관리 프로그램풍 조밀 운영 메뉴
   (사이드바/버튼/섹션을 더 컴팩트하게 — 전역 오버라이드, 파일 끝)
══════════════════════════════════════════════════════════════ */
.sidebar { width: 224px; }
.sidebar-section { padding: 9px 10px; gap: 5px; }
.sidebar-section.pin-list-wrap { padding: 7px 9px; }
.sidebar-section-head { margin-bottom: 5px; }
.sidebar-section-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #6b6457;
}
.btn-mini {
  padding: 3px 9px; font-size: 10.5px; border-radius: 6px;
}
/* 액션 버튼 컴팩트화 + 아이콘+텍스트 일관 */
.btn-upload, .btn-place, .btn-deploy {
  padding: 8px 10px !important; font-size: 11.5px !important;
  letter-spacing: .3px !important; border-radius: 7px !important;
  font-family: var(--font-ui) !important; font-weight: 700 !important;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-export-json, .btn-import-json { font-size: 11px !important; }
/* 영역 도구 컴팩트 */
.zone-tools { gap: 5px; }
.zone-tool { padding: 7px 4px; border-radius: 7px; font-size: 10px; }
.zone-tool svg { width: 17px; height: 17px; }
.zone-tools-label { font-size: 9.5px; letter-spacing: .6px; color: #7a7264; text-transform: uppercase; margin-top: 2px; }

/* 데크 목록 / 영역 목록 / 핀 목록 — 행 높이 조밀하게 */
.decks-list { gap: 3px; }
.deck-item, .zone-item, .pin-item {
  padding: 6px 9px !important; border-radius: 7px !important;
  font-size: 12px !important;
}
.zone-list, .pin-list { gap: 3px; }

/* 상단 헤더 — 컴팩트 운영 툴바 느낌 (높이/버튼 축소) */
.btn-settings, .btn-allpins, .btn-exit-edit {
  padding: 6px 10px !important; font-size: 11.5px !important; border-radius: 7px !important;
}
.btn-page { width: 26px; height: 26px; }

/* 프로젝트 선택 드롭다운 컴팩트 */
.project-select { padding: 7px 9px; font-size: 12px; border-radius: 7px; }

/* 핀 폼 플로팅 패널 — 살짝 컴팩트 */
.pin-form-float { font-size: 12.5px; }

/* ════════════════ 디자이너 사이드바 — 초슬림/심플 재구성 ════════════════ */
/* 사용자 요청: "리스트나 등록 메뉴들 더작게 심플하게 구성해" */
.sidebar { width: 212px; }
.sidebar-section { padding: 7px 9px !important; gap: 4px !important; }
.sidebar-section.pin-list-wrap { padding: 6px 8px !important; }
.sidebar-section-head { margin-bottom: 4px !important; }
.sidebar-section-title { font-size: 10px !important; letter-spacing: .3px !important; }

/* 등록/액션 버튼 — 더 낮고 단정하게 */
.btn-upload, .btn-place, .btn-deploy {
  padding: 7px 9px !important; font-size: 11px !important;
  border-radius: 6px !important; border-width: 1px !important;
}
.btn-upload { border-style: solid !important; }   /* 점선 → 실선(심플) */
.btn-mini { padding: 2px 8px !important; font-size: 10px !important; border-radius: 5px !important; }

/* 영역 도구 — 아이콘 위주 컴팩트 */
.zone-tools { gap: 4px !important; }
.zone-tool { padding: 6px 3px !important; font-size: 9.5px !important; border-radius: 6px !important; gap: 3px; }
.zone-tool svg { width: 16px !important; height: 16px !important; }
.zone-tools-label { font-size: 9px !important; margin-top: 1px !important; }

/* 목록(데크/영역/핀) — 행 더 조밀 + 군더더기 제거 */
.deck-item, .zone-item, .pin-item {
  padding: 5px 8px !important; border-radius: 6px !important; font-size: 11.5px !important;
}
.decks-list, .zone-list, .pin-list { gap: 2px !important; }
.pin-list-head, .zone-list-head { margin-bottom: 3px !important; }
.pin-list-title, .zone-list-title { font-size: 10px !important; }
.pin-list-title svg, .zone-list-title svg { width: 13px !important; height: 13px !important; }
.pin-empty, .decks-empty { font-size: 10px !important; padding: 8px 4px !important; }
.project-select { padding: 6px 8px !important; font-size: 11.5px !important; border-radius: 6px !important; }

/* 핀 항목 액션 아이콘 — 작고 깔끔하게 */
.pin-item .pin-actions button, .pin-actions .pin-act {
  width: 22px !important; height: 22px !important; border-radius: 5px !important;
}
.pin-item .pin-actions svg, .pin-actions svg { width: 13px !important; height: 13px !important; }

@media (max-width: 720px) {
  .sidebar { width: 180px; }
}

/* ════════════════════════════════════════════════════════════
   📱 모바일 하단 네비 + 바텀시트 사이드바 (메뉴가 콘텐츠 안 가림)
   딥리서치: bottom navigation(NN/G) · bottom sheet · 44px 터치 타깃
════════════════════════════════════════════════════════════ */
.mobile-nav { display: none; }
.sidebar-backdrop { display: none; }

/* ★ 상단 빠른 도구 아이콘 (데스크톱: 좌측 사이드바 핵심 기능을 상단에서 바로) */
.topbar-quick { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
/* [마스터 요청] 상단 빠른도구 — 밝은 크림 상단바에 맞춘 CAD급 입체 버튼 */
.tq-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #ece5d7 100%);
  border: 1px solid #cdc3ad;
  color: #3a352b; border-radius: 9px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(43,40,32,.14), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .14s, color .14s, border-color .14s, transform .08s, box-shadow .14s;
  -webkit-tap-highlight-color: rgba(201,150,42,.3); touch-action: manipulation;
}
.tq-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.tq-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f3eada 100%);
  color: var(--gold, #c9962a); border-color: var(--gold, #c9962a);
  box-shadow: 0 2px 8px rgba(201,150,42,.3), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.tq-btn.active {
  background: linear-gradient(180deg, #f7d98a 0%, #e9b84e 100%);
  color: #3a2c08; border-color: var(--gold, #c9962a);
  box-shadow: 0 0 0 1px rgba(201,150,42,.5), 0 2px 8px rgba(201,150,42,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
body.role-viewer .tq-btn.designer-only { display: none; }
/* 🔴 [마스터 규칙·권한] 뷰어는 도면 등록/편집 관련 UI를 전부 숨긴다(보기 전용).
   CSS 1차 방어 + _loadDrawing 권한 가드 2차 방어 = 이중 차단 */
body.role-viewer .designer-only,
body.role-viewer #btn-upload-drawing,
body.role-viewer #mnav-upload,
body.role-viewer #tq-upload,
body.role-viewer #section-upload,
body.role-viewer #drop-tap-cta,
body.role-viewer #section-checkboard,
body.role-viewer #btn-checkboard-toggle,
body.role-viewer #btn-checkboard-enter { display: none !important; }
/* 모바일에선 상단 빠른도구 숨김 → 하단 nav 사용 */
@media (max-width: 760px) { .topbar-quick { display: none; } }

@media (max-width: 760px) {
  /* 1) 하단 네비게이션 바 — 항상 화면 하단 고정, 콘텐츠 위가 아닌 별도 영역 */
  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    display: flex; align-items: stretch; justify-content: space-around;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(180deg, #faf7f0 0%, #f1ebdf 100%);
    border-top: 1px solid var(--border2);
    box-shadow: 0 -4px 18px rgba(43,40,32,.14);
  }
  .mnav-btn {
    flex: 1 1 0; min-width: 44px; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px;
    background: transparent; border: none; cursor: pointer;
    color: #6b6457; font-family: var(--font-ui); font-size: 10px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-btn svg { width: 22px; height: 22px; }
  .mnav-btn:active { color: var(--accent, #f59e0b); transform: scale(.94); }
  .mnav-btn.active { color: var(--accent, #f59e0b); }
  /* 중앙 포인트 추가 = 강조 FAB */
  .mnav-fab { position: relative; }
  .mnav-fab svg {
    width: 30px; height: 30px; padding: 9px; box-sizing: content-box;
    margin-top: -22px; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
    box-shadow: 0 6px 16px rgba(217,119,6,.45); border: 3px solid #faf7f0;
  }
  .mnav-fab span { margin-top: -2px; color: #d97706; }
  /* 뷰어 모드에선 designer-only 버튼 숨김 */
  body.role-viewer .mnav-btn.designer-only { display: none; }

  /* 2) 사이드바 → 바텀시트(아래에서 위로 슬라이드, 기본 숨김) */
  .sidebar {
    position: fixed; left: 0; right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    top: auto; width: 100% !important;
    max-height: 64vh; height: auto;
    border-right: none; border-top: 1px solid var(--border2);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 44px rgba(0,0,0,.4);
    transform: translateY(calc(100% + 70px));
    transition: transform .28s cubic-bezier(.2,.9,.25,1);
    z-index: 145; overflow-y: auto;
    padding-bottom: 14px;
  }
  /* 시트 핸들(드래그 그립) */
  .sidebar::before {
    content: ""; display: block; position: sticky; top: 0;
    width: 42px; height: 5px; margin: 9px auto 4px;
    border-radius: 99px; background: rgba(107,100,87,.35);
  }
  body.sidebar-open .sidebar { transform: translateY(0); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 142;
    background: rgba(8,12,20,.42); backdrop-filter: blur(1px);
  }

  /* 3) 맵 영역이 풀스크린(사이드바가 자리 차지 안 함) + 하단 네비 높이만큼 패딩 */
  .app-body { display: block; height: 100%; }
  .map-area {
    width: 100%; height: 100%;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  /* 4) 터치 타깃 ≥44px — 핵심 버튼들 */
  .btn-upload, .btn-place, .btn-deploy, .btn-mini { min-height: 44px; }
  .pf-tool { min-width: 48px; min-height: 48px; }
  .tb-btn { min-width: 40px; min-height: 40px; }
  .pin-row { min-height: 48px; }

  /* 5) 핀 폼 시트는 하단 네비 위로 올림 */
  .pin-form-float { bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }

  /* 6) 빈 화면 탭 등록 CTA 강조 */
  .drop-tap-cta { display: inline-flex !important; }
}

/* 탭하여 등록 CTA — 기본은 데스크톱에서도 보이되 부드럽게 */
.drop-tap-cta {
  display: none; margin-top: 16px;
  align-items: center; justify-content: center; gap: 6px;
  padding: 12px 22px; min-height: 44px;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  border-radius: 12px; font-family: var(--font-ui);
  font-size: 14px; font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(217,119,6,.4);
}
@media (min-width: 761px) {
  /* 데스크톱에서도 클릭 등록 가능하게 표시(드래그앤드롭 보조) */
  .drop-tap-cta { display: inline-flex; }
}

/* ════════════════ 활동 로그 패널(슈퍼관리자) ════════════════ */
.log-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.log-search {
  flex: 1 1 200px; min-width: 160px; padding: 8px 11px; font-size: 12.5px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.log-search:focus { outline: none; border-color: var(--gold); }
.log-action-filter {
  padding: 8px 10px; font-size: 12px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer;
}
.log-flex { flex: 1 1 auto; }
.log-total { font-size: 12px; color: var(--text2); font-family: var(--font-mono); }
.admin-gate-btn.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #f87171; }
.admin-gate-btn.danger:hover { background: rgba(239,68,68,.22); }

.log-grid-head, .log-row {
  display: grid; grid-template-columns: 158px 1.4fr 1fr 1.3fr 34px;
  align-items: center; gap: 8px; padding: 8px 10px;
}
.log-grid-head {
  font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase;
  letter-spacing: .4px; border-bottom: 1px solid var(--border);
}
.log-list { max-height: 52vh; overflow-y: auto; }
.log-row {
  font-size: 12.5px; border-bottom: 1px solid rgba(107,100,87,.1);
  transition: background .12s;
}
.log-row:hover { background: rgba(107,100,87,.06); }
.log-col-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--text2); }
.log-col-actor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.log-actor-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-role-badge {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 2px 6px;
  border-radius: 5px; letter-spacing: .3px; flex: 0 0 auto;
}
.log-role-badge.super    { background: rgba(245,158,11,.18); color: #fbbf24; }
.log-role-badge.designer { background: rgba(56,189,248,.18); color: #38bdf8; }
.log-role-badge.viewer   { background: rgba(16,185,129,.16); color: #34d399; }
.log-role-badge.guest    { background: rgba(107,100,87,.16); color: #6b6457; }
.log-action-badge {
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: rgba(107,100,87,.12); color: var(--text);
}
.log-col-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); font-size: 11.5px; }
.log-del-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--text2); cursor: pointer; transition: all .12s;
}
.log-del-btn:hover { background: rgba(239,68,68,.16); color: #f87171; }
.log-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 12px; color: var(--text2); font-size: 13px;
}
.log-empty i { font-size: 22px; opacity: .5; }
.log-more-wrap { text-align: center; padding: 10px 0 2px; }

/* ════════════════ FLS 포인트 클라우드 듀얼 뷰어 ════════════════ */
/* 360 파노라마와 나란히: with-fls 일 때 360 캔버스를 왼쪽 절반으로 */
.pano-overlay.with-fls .pano-canvas { width: 60% !important; left: 0; }
.fls-pane {
  position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
  background: linear-gradient(160deg, #faf7f0 0%, #efe9dc 100%);
  border-left: 1px solid rgba(91,170,255,.25);
  display: flex; flex-direction: column; z-index: 20;
  box-shadow: -16px 0 40px rgba(0,0,0,.5);
  transition: width .26s cubic-bezier(.22,.61,.36,1);
}
.fls-pane.hidden { display: none !important; }
.fls-pane.fls-collapsed { width: 46px; }
.fls-pane.fls-collapsed .fls-head-title span:not(.fls-fmt-badge),
.fls-pane.fls-collapsed .fls-stage,
.fls-pane.fls-collapsed #btn-fls-reset { display: none; }
.fls-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid rgba(91,170,255,.18);
  background: rgba(8,18,32,.7); color: #3a4a5e; flex: 0 0 auto;
}
.fls-head-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.fls-head-title svg { color: var(--gold, #c9a227); }
.fls-fmt-badge { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(91,170,255,.18); color: #8ec5ff; font-weight: 600; }
.fls-head-actions { display: flex; gap: 6px; align-items: center; }
/* ── [마스터 요청] CAD/3D 검토 툴바 (AutoCAD/Navisworks풍 SEASTAR 오리지널) ── */
.cad-toolbar {
  display: flex; gap: 2px; padding: 2px;
  background: linear-gradient(180deg, #11243b, #0a1828);
  border: 1px solid rgba(91,170,255,.28); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cad-tool {
  width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: #6fa8df; cursor: pointer; transition: all .15s ease;
}
.cad-tool svg { width: 17px; height: 17px; }
.cad-tool:hover { background: rgba(91,170,255,.16); color: #aed4ff; }
.cad-tool.active {
  background: linear-gradient(180deg, #2f6df0, #1f57c4);
  color: #fff; border-color: #6fa8df;
  box-shadow: 0 1px 4px rgba(47,109,240,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.fls-ctrl {
  border: 1px solid rgba(91,170,255,.3); background: rgba(91,170,255,.08);
  color: #3a4a5e; border-radius: 7px; padding: 4px 9px; font-size: 11px;
  cursor: pointer; transition: background .15s;
}
.fls-ctrl:hover { background: rgba(91,170,255,.2); }
.fls-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fls-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.fls-canvas:active { cursor: grabbing; }
.fls-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 24px;
  text-align: center; color: #6b6457; pointer-events: none;
}
.fls-state.hidden { display: none !important; }
.fls-empty-t { font-size: 13px; font-weight: 600; color: #3a4a5e; margin: 0; }
.fls-empty-h { font-size: 11.5px; line-height: 1.5; color: #7a7264; margin: 0; max-width: 280px; }
.fls-empty-sub { font-size: 10.5px; color: #8a8475; margin: 2px 0 0; max-width: 260px; }
.fls-progress { width: 160px; height: 4px; border-radius: 3px; background: rgba(91,170,255,.15); overflow: hidden; }
.fls-progress i { display: block; height: 100%; width: 40%; background: var(--gold, #c9a227); animation: flsbar 1.1s ease-in-out infinite; }
@keyframes flsbar { 0%{margin-left:-40%} 100%{margin-left:100%} }
.fls-stats {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px;
  background: rgba(8,18,32,.78); border: 1px solid rgba(91,170,255,.25);
  border-radius: 7px; font-size: 11px; color: #8ec5ff; pointer-events: none;
}
.fls-stats.hidden { display: none !important; }
.fls-measure-label {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 10px;
  background: rgba(28,22,4,.85); border: 1px solid rgba(255,213,74,.45);
  border-radius: 7px; font-size: 12px; color: #ffd54a; font-weight: 600;
  pointer-events: none; letter-spacing: .2px;
}
.fls-measure-label.hidden { display: none !important; }
/* 모바일: 세로 분할 */
@media (max-width: 820px) {
  .pano-overlay.with-fls .pano-canvas { width: 100% !important; height: 55% !important; }
  .fls-pane { width: 100%; height: 45%; top: auto; bottom: 0; border-left: none; border-top: 1px solid rgba(91,170,255,.25); }
  .fls-pane.fls-collapsed { width: 100%; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   ezPDF 스타일 도구 툴바 (상단 가로 일렬) + 좌측 도킹 썸네일
═══════════════════════════════════════════════════════════ */
.pdf-toolbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  height: 50px; padding: 0 12px;
  /* CAD 리본 느낌: 위쪽 밝고 아래쪽 약간 그늘 + 하단 골드 라인 */
  background: linear-gradient(180deg, #fdfaf3 0%, #efe7d8 100%);
  border-bottom: 2px solid #d8cdb5;
  box-shadow: 0 3px 12px rgba(43,40,32,.16), inset 0 1px 0 rgba(255,255,255,.7);
  position: relative; z-index: 4;
  overflow-x: auto; scrollbar-width: none;
}
.pdf-toolbar::-webkit-scrollbar { height: 0; }
.pdf-toolbar.hidden { display: none !important; }

/* ── [마스터 요청] CAD급(ZWCAD/ABViewer) 입체 버튼 — 미세 그라데이션·내부 하이라이트·또렷한 음영 ── */
.tb-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; min-width: 34px; padding: 0 8px;
  background: linear-gradient(180deg, #ffffff 0%, #ece5d7 100%);
  border: 1px solid #cdc3ad;
  border-radius: 7px;
  color: #2b2820; cursor: pointer;
  box-shadow: 0 1px 2px rgba(43,40,32,.12), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .14s, border-color .14s, color .14s, transform .08s, box-shadow .14s;
}
.tb-btn svg { width: 19px; height: 19px; display: block; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.tb-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f3eada 100%);
  border-color: var(--gold);
  box-shadow: 0 2px 7px rgba(201,150,42,.28), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.tb-btn:active {
  transform: translateY(0) scale(.97);
  background: linear-gradient(180deg, #e8e0d0 0%, #ddd3bf 100%);
  box-shadow: inset 0 2px 4px rgba(43,40,32,.22);
}
.tb-btn:disabled { opacity: .32; cursor: default; pointer-events: none; box-shadow: none; }
.tb-btn.active {
  background: linear-gradient(180deg, #f7d98a 0%, #e9b84e 100%);
  border-color: var(--gold);
  color: #3a2c08;
  box-shadow: 0 0 0 1px rgba(201,150,42,.5), 0 2px 8px rgba(201,150,42,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.tb-btn-wide { padding: 0 11px; }
.tb-label { font-size: 11px; font-weight: 600; font-family: var(--font-ui); letter-spacing: .3px; }
.tb-btn-accent {
  background: linear-gradient(180deg, #f7d98a 0%, #e9b84e 100%);
  border-color: var(--gold);
  color: #3a2c08; font-weight: 700;
  box-shadow: 0 2px 7px rgba(201,150,42,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.tb-btn-accent:hover { background: linear-gradient(180deg, #ffe6a0 0%, #f0c25e 100%); transform: translateY(-1px); }

.tb-sep { flex-shrink: 0; width: 2px; height: 24px; margin: 0 5px;
  background: linear-gradient(180deg, transparent, #c9bda3 35%, #c9bda3 65%, transparent);
  box-shadow: 1px 0 0 rgba(255,255,255,.6); }
.tb-flex { flex: 1; min-width: 8px; }

.tb-page {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px;
}
.tb-page-input {
  width: 38px; height: 28px;
  text-align: center;
  background: #fffdf8;
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono); font-size: 13px;
  outline: none;
}
.tb-page-input:focus { border-color: var(--gold); }
.tb-page-total { font-size: 12px; color: var(--text2); font-family: var(--font-mono); }

.tb-zoom-level {
  flex-shrink: 0;
  min-width: 52px; height: 30px; padding: 0 8px;
  background: #fffdf8;
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: 12.5px;
  transition: border-color .14s, background .14s;
}
.tb-zoom-level:hover { border-color: var(--gold); background: rgba(245,158,11,.08); }

/* 좌측 도킹 썸네일 패널 (ezPDF 스타일) — docked 시 떠있는 캡슐이 아닌 사이드바형 */
.pdf-thumb-strip.docked {
  left: 0; top: 0; bottom: 0;
  /* [마스터 요청] 도킹 썸네일도 2배 (132 → 240) */
  width: 240px;
  border-radius: 0;
  border-top: none; border-bottom: none; border-left: none;
  border-right: 1px solid var(--border2);
  background: rgba(250, 247, 240, .98);
  backdrop-filter: blur(8px);
  box-shadow: 2px 0 16px rgba(43,40,32,.14);
}
.pdf-thumb-strip.docked .pdf-thumb-canvas { max-height: 300px; }

@media (max-width: 720px) {
  .tb-label { display: none; }
  .tb-btn-wide { padding: 0 7px; }
  .pdf-thumb-strip.docked { width: 92px; }
}

/* ═══════════════════════════════════════════════════════════
   PIN GRID PANEL — 오른쪽 엑셀형 포인트 리스트 (아이보리 테마)
   ─────────────────────────────────────────────────────────── */
.pin-grid-panel{
  position:absolute; top:14px; right:14px; bottom:14px;
  width:340px; max-width:42vw;
  display:flex; flex-direction:column;
  background:var(--panel,#faf7f0);
  border:1px solid var(--border,#e4dccb);
  border-radius:14px;
  box-shadow:0 10px 34px rgba(60,48,20,.16), 0 2px 8px rgba(60,48,20,.08);
  z-index:46; overflow:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.pin-grid-panel.hidden{ display:none; }
.pin-grid-panel.collapsed{ transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; }

.pin-grid-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:11px 13px;
  background:var(--panel-2,#f2ece0);
  border-bottom:1px solid var(--border,#e4dccb);
}
.pin-grid-head-left{ display:flex; align-items:center; gap:7px; min-width:0; }
.pin-grid-head-left > i{ color:var(--gold,#c9962a); font-size:14px; }
.pin-grid-title{ font-weight:700; font-size:13.5px; color:var(--text,#2b2820); white-space:nowrap; }
.pin-grid-page-badge{
  font-size:11px; font-weight:700; color:#fff; background:var(--blue,#2f6db5);
  padding:2px 7px; border-radius:999px; line-height:1.5;
}
.pin-grid-count{
  font-size:11px; font-weight:700; color:var(--text2,#6b6457);
  background:var(--bg3,#efe9dc); padding:2px 8px; border-radius:999px;
}
.pin-grid-head-acts{ display:flex; gap:4px; }
.pin-grid-iconbtn{
  width:28px; height:28px; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:8px;
  color:var(--text2,#6b6457); cursor:pointer; transition:all .15s;
}
.pin-grid-iconbtn:hover{ background:var(--bg3,#efe9dc); color:var(--text,#2b2820); border-color:var(--border,#e4dccb); }

.pin-grid-search-wrap{
  position:relative; padding:9px 11px; border-bottom:1px solid var(--border,#e4dccb);
}
.pin-grid-search-wrap > i{
  position:absolute; left:21px; top:50%; transform:translateY(-50%);
  color:var(--text3,#938a78); font-size:12px; pointer-events:none;
}
.pin-grid-search{
  width:100%; box-sizing:border-box; padding:7px 10px 7px 30px;
  background:var(--bg,#f5f1e8); border:1px solid var(--border,#e4dccb);
  border-radius:8px; color:var(--text,#2b2820); font-size:12.5px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.pin-grid-search:focus{ border-color:var(--gold,#c9962a); box-shadow:0 0 0 3px rgba(201,150,42,.16); }
.pin-grid-search::placeholder{ color:var(--text3,#938a78); }

.pin-grid-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; }
.pin-grid-scroll::-webkit-scrollbar{ width:8px; }
.pin-grid-scroll::-webkit-scrollbar-thumb{ background:var(--border2,#d9cfb8); border-radius:8px; }

.pin-grid-table{ width:100%; border-collapse:collapse; font-size:12px; }
.pin-grid-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--panel-2,#f2ece0); color:var(--text2,#6b6457);
  font-weight:700; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  text-align:left; padding:8px 8px; border-bottom:1.5px solid var(--border2,#d9cfb8);
  white-space:nowrap;
}
.pin-grid-table th.pgt-no{ width:34px; text-align:center; }
.pin-grid-table th.pgt-page{ width:30px; text-align:center; }
.pin-grid-table th.pgt-360{ width:46px; text-align:center; }
.pin-grid-table td{
  padding:0; border-bottom:1px solid var(--border,#e4dccb);
  color:var(--text,#2b2820); vertical-align:middle;
}
.pin-grid-row{ cursor:pointer; transition:background .12s; }
.pin-grid-row > td{ padding:8px 8px; }
.pin-grid-row:hover{ background:var(--bg3,#efe9dc); }
.pin-grid-row.active{ background:rgba(201,150,42,.14); box-shadow:inset 3px 0 0 var(--gold,#c9962a); }
.pin-grid-row td.pgt-no{ text-align:center; font-weight:700; color:var(--gold,#c9962a); }
.pin-grid-row td.pgt-page{ text-align:center; color:var(--text2,#6b6457); font-weight:600; }
.pin-grid-name-cell{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pin-grid-name-txt{
  font-weight:600; color:var(--text,#2b2820);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
.pin-grid-name-tags{ display:flex; gap:5px; align-items:center; }
.pin-grid-tag{ font-size:9.5px; color:var(--text3,#938a78); }
.pin-grid-tag.has{ color:var(--green,#2f9e6f); }
.pin-grid-row td.pgt-coord{ color:var(--text2,#6b6457); font-variant-numeric:tabular-nums; font-size:11px; white-space:nowrap; }
.pin-grid-row td.pgt-360{ text-align:center; }
.pin-grid-go{
  width:26px; height:26px; display:inline-grid; place-items:center;
  background:var(--blue,#2f6db5); color:#fff; border:none; border-radius:7px;
  cursor:pointer; font-size:11px; transition:transform .12s, filter .15s;
}
.pin-grid-go:hover{ transform:scale(1.1); filter:brightness(1.08); }
.pin-grid-go.no-content{ background:var(--bg3,#efe9dc); color:var(--text3,#938a78); cursor:default; }
.pin-grid-go.no-content:hover{ transform:none; }

.pin-grid-empty{ padding:26px 16px; text-align:center; color:var(--text3,#938a78); font-size:12.5px; line-height:1.6; }

/* 접힌 상태에서 다시 열기 버튼 (오른쪽 모서리 탭) */
.pin-grid-reopen{
  position:absolute; top:16px; right:14px; z-index:45;
  height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:7px;
  background:var(--gold,#c9962a); color:#fff; border:none; border-radius:12px;
  box-shadow:0 6px 18px rgba(201,150,42,.36); cursor:pointer;
  font-size:13px; font-weight:700; font-family:var(--font-ui);
  transition:transform .15s, filter .15s;
  -webkit-tap-highlight-color:rgba(255,255,255,.3); touch-action:manipulation;
}
.pin-grid-reopen-label{ white-space:nowrap; }
.pin-grid-reopen.hidden{ display:none; }
.pin-grid-reopen:hover{ transform:scale(1.05); filter:brightness(1.06); }

/* 데스크톱(마우스) 중간 폭에서만 우측 축소 패널 — 터치 기기는 아래 바텀시트가 적용됨 */
@media (hover: hover) and (pointer: fine) and (max-width: 860px) and (min-width: 641px){
  .pin-grid-panel{ width:300px; max-width:62vw; top:10px; right:10px; bottom:10px; }
}

/* ════════════════════════════════════════════
   모바일/태블릿 포인트 리스트 — 바텀시트(드롭다운형)
   · 좁은 화면(≤640px) 또는 모든 터치 기기(pointer: coarse)에 적용
   · 큰 갤럭시/폴더블/태블릿(폭 853px 등)도 터치면 화면을 가리지 않도록 전환
   · 도면 상단은 항상 보이도록 높이 제한(둥근 모서리 + 드래그 핸들)
   · 닫힘은 translateY(아래로) 로 — 데스크톱 translateX 오버라이드
════════════════════════════════════════════ */
@media (max-width: 640px), (pointer: coarse){
  .pin-grid-panel{
    position:fixed;
    left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:100%;
    height:min(56vh, 460px);
    border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    border-top:1px solid var(--border,#e4dccb);
    box-shadow:0 -10px 30px rgba(60,48,20,.22);
    /* 하단 탭바(약 64px) 위로 띄워 겹침 방지 */
    margin-bottom:calc(env(safe-area-inset-bottom, 0px) + 64px);
    z-index:60;
    transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
  }
  /* 드래그 핸들 (시트 상단 그립) */
  .pin-grid-panel::before{
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:999px; background:var(--border2,#d9cfb8);
    z-index:3; pointer-events:none;
  }
  /* 닫힘 = 아래로 슬라이드 (가로 이동 오버라이드) */
  .pin-grid-panel.collapsed{ transform:translateY(calc(100% + 80px)); opacity:0; pointer-events:none; }

  .pin-grid-head{ padding:15px 14px 10px; }
  .pin-grid-title{ font-size:14px; }
  /* 헤더 토글 버튼 = 시트 닫기(아래로) 의미로 아이콘 회전 */
  #pin-grid-toggle i{ transform:rotate(90deg); }
  .pin-grid-iconbtn{ width:34px; height:34px; font-size:15px; }
  .pin-grid-search-wrap{ padding:8px 14px; }
  .pin-grid-search{ font-size:15px; padding:10px 12px 10px 32px; }  /* iOS 줌 방지 위해 ≥15px */
  .pin-grid-search-wrap > i{ left:24px; }
  .pin-grid-table{ font-size:13px; }
  .pin-grid-row > td{ padding:11px 8px; }     /* 터치 타깃 확대 */
  .pin-grid-go{ width:30px; height:30px; font-size:12px; }
  .pin-grid-name-txt{ max-width:42vw; }
  /* 좌표 컬럼은 좁은 화면에서 숨겨 깨짐 방지 */
  .pin-grid-table th.pgt-coord, .pin-grid-row td.pgt-coord{ display:none; }

  /* 다시 열기 탭(FAB) — 하단 탭바 위 우측 */
  .pin-grid-reopen{
    top:auto; right:14px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 76px);
    width:46px; height:46px; border-radius:14px; z-index:59;
  }
}

/* ── 드래그 앤 드롭 업로드 시각 피드백 ── */
.map-area.drop-active{ outline:3px dashed var(--gold,#c9962a); outline-offset:-12px; background:rgba(201,150,42,.05); }
.drop-hint.dragover{
  border-color:var(--gold,#c9962a)!important;
  background:rgba(201,150,42,.12)!important;
  transform:scale(1.03);
  box-shadow:0 8px 28px rgba(201,150,42,.25);
}
.drop-hint.dragover .drop-icon{ transform:scale(1.15); }
.drop-hint{ transition:transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.drop-hint .drop-icon{ transition:transform .18s; }

/* ═══════════════════════════════════════════════════════════
   티어드롭 핀 (pin-marker-teardrop) — 진짜 핀(물방울) + 중앙 번호.
   검은 라벨창/공모양 제거. 핀 머리 안에 번호만 작게.
   ─────────────────────────────────────────────────────────── */
.pin-marker-teardrop .pin-marker-label{ display:none !important; }  /* 검은색 라벨 창 완전 제거 */
.pin-marker-teardrop .pin-pin svg{ width:30px; height:40px; }
.pin-marker-teardrop .pin-pin{ filter:none; transform-origin:50% 100%; }
.pin-marker-teardrop:hover .pin-pin{ transform:scale(1.18); }
.pin-marker-teardrop.focused .pin-pin{ transform:scale(1.25); }
.pin-marker-teardrop .pin-pulse{
  width:26px; height:26px; left:50%; top:18px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(126,217,87,.55) 0%, rgba(126,217,87,0) 70%);
}
/* 미해결 이슈 뱃지를 핀 우상단에 */
.pin-marker-teardrop .pin-marker-issue{ top:-4px; right:0; }

/* ═══════════════════════════════════════════
   핀 작업 전용 팝업 (디자이너)
═══════════════════════════════════════════ */
.pin-action-pop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.pin-action-pop.hidden { display: none; }
.pin-action-backdrop { position: absolute; inset: 0; background: rgba(8,12,22,.5); backdrop-filter: blur(2px); }
.pin-action-card {
  position: relative; width: min(340px, 92vw);
  background: #fff; border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.08);
}
.pap-head { display: flex; align-items: center; gap: 8px; }
.pap-no {
  flex: 0 0 auto; min-width: 30px; height: 26px; padding: 0 8px;
  display: grid; place-items: center; border-radius: 8px;
  background: #1d4ed8; color: #fff; font-weight: 800; font-size: 13px;
}
.pap-title { flex: 1; margin: 0; font-size: 16px; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pap-close { flex: 0 0 auto; width: 28px; height: 28px; border: none; background: rgba(0,0,0,.06); border-radius: 8px; font-size: 18px; cursor: pointer; color: #334155; }
.pap-close:hover { background: rgba(0,0,0,.12); }
.pap-meta { margin: 8px 0 14px; font-size: 12px; color: #64748b; }
.pap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pap-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px; border-radius: 11px; border: 1px solid rgba(0,0,0,.1);
  background: #f8fafc; color: #0f172a; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .13s;
}
.pap-btn i { font-size: 14px; }
.pap-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.pap-view { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.pap-view.dim { opacity: .5; }
.pap-move { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.pap-edit { background: #fefce8; border-color: #fde68a; color: #a16207; }
.pap-del { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.pap-hint { margin: 12px 0 0; font-size: 11px; color: #94a3b8; line-height: 1.5; }
.pin-marker.edit-unlocked .pin-pin { animation: papWiggle .6s ease-in-out infinite; }
@keyframes papWiggle { 0%,100% { transform: rotate(-6deg) scale(1.15); } 50% { transform: rotate(6deg) scale(1.15); } }

/* ═══════════════════════════════════════════
   회사 이메일 가입/로그인 (User Details)
═══════════════════════════════════════════ */
.signin-company-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px; margin-top: 6px;
  border-radius: 10px; border: 1px solid #38bdf8;
  background: rgba(56,189,248,.1); color: #38bdf8; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .14s;
}
.signin-company-btn svg { width: 18px; height: 18px; }
.signin-company-btn:hover { background: rgba(56,189,248,.2); }

.company-gate { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; }
.company-gate.hidden { display: none; }
.company-gate-backdrop { position: absolute; inset: 0; background: rgba(8,12,22,.62); backdrop-filter: blur(3px); }
.company-gate-card {
  position: relative; width: min(420px, 94vw); max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 26px 26px 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.company-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #0f172a; }
.company-sub { margin: 0 0 18px; font-size: 13px; color: #64748b; }
.company-tabs { display: flex; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 11px; margin-bottom: 18px; }
.company-tab { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 8px; font-size: 14px; font-weight: 700; color: #64748b; cursor: pointer; transition: all .14s; }
.company-tab.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.company-panel.hidden { display: none; }
.company-step.hidden { display: none; }
.company-field { display: block; margin-bottom: 14px; }
.company-label { display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px; }
.company-input {
  width: 100%; padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 10px;
  font-size: 14px; color: #0f172a; box-sizing: border-box; transition: border .14s;
}
.company-input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.company-code-input { letter-spacing: 8px; font-size: 20px; font-weight: 800; text-align: center; }
.company-note { margin: -6px 0 14px; font-size: 11.5px; color: #0891b2; line-height: 1.5; }
.company-primary-btn {
  width: 100%; padding: 12px; border: none; border-radius: 11px;
  background: #1d4ed8; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .14s; margin-top: 4px;
}
.company-primary-btn:hover { background: #1e40af; }
.company-primary-btn:disabled { opacity: .6; cursor: default; }
.company-link-btn { display: inline-block; background: none; border: none; color: #1d4ed8; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 0; margin-bottom: 8px; text-decoration: underline; }
.company-verified-line { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; }
.company-verified-email { flex: 1; font-size: 13px; font-weight: 700; color: #15803d; overflow: hidden; text-overflow: ellipsis; }
.company-change-btn { background: none; border: none; color: #64748b; font-size: 12px; cursor: pointer; text-decoration: underline; flex: 0 0 auto; }
.company-devcode { margin: -4px 0 14px; padding: 10px 12px; background: #fffbeb; border: 1px dashed #fbbf24; border-radius: 9px; font-size: 12.5px; color: #92400e; line-height: 1.5; }
.company-devcode.hidden { display: none; }
.company-error { margin: 10px 0 0; padding: 10px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; font-size: 12.5px; color: #dc2626; }
.company-error.hidden { display: none; }
.company-footer-note { margin: 16px 0 6px; font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.5; }
.company-cancel { display: block; width: 100%; padding: 9px; background: none; border: none; color: #64748b; font-size: 13px; cursor: pointer; }

/* ═══ 관리자: 회사 도메인 / 가입 사용자 패널 ═══ */
.adm-domain-intro { font-size: 12px; color: #475569; line-height: 1.6; margin: 0 0 14px; padding: 10px 12px; background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25); border-radius: 10px; }
.adm-domain-intro b { color: #0891b2; }
.domain-add { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.domain-add #domain-project-select { flex: 1 1 180px; min-width: 0; }
.domain-add #domain-input { flex: 1 1 140px; min-width: 0; }
.domains-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.domain-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border2, rgba(255,255,255,.1)); border-radius: 9px; }
.domain-name { font-weight: 800; font-size: 14px; color: #38bdf8; flex: 0 0 auto; }
.domain-scope { flex: 1; font-size: 12px; color: #94a3b8; }
.members-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.member-grid-head, .member-row { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.4fr 36px; gap: 8px; align-items: center; padding: 8px 10px; }
.member-grid-head { font-size: 11px; font-weight: 700; color: #94a3b8; border-bottom: 1px solid var(--border2, rgba(255,255,255,.1)); text-transform: uppercase; }
.members-list { max-height: 360px; overflow-y: auto; }
.member-row { font-size: 12.5px; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,.05); }
.member-row .mem-col-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.member-row .mem-col-company { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; }
.member-row .mem-col-login { color: #94a3b8; font-size: 11.5px; }
.members-subtitle { font-size: 12px; font-weight: 700; color: #94a3b8; margin-right: auto; }

/* ── 사전 등록(초대) 관리 UI ── */
.invite-block {
  margin-bottom: 16px; padding: 12px 13px;
  background: rgba(56,189,248,.06); border: 1px solid rgba(56,189,248,.2);
  border-radius: 12px;
}
.invite-intro { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.invite-intro b { color: #38bdf8; font-size: 13px; }
.invite-intro span { color: #94a3b8; font-size: 11.5px; line-height: 1.5; }
.invite-intro span b { color: #cbd5e1; }
.invite-add { display: flex; gap: 7px; align-items: center; }
.invite-add .admin-gate-input { flex: 1; min-height: 40px; }
.invite-add .invite-role { flex: 0 0 auto; width: 92px; }
.invites-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.invites-empty { color: #94a3b8; font-size: 12px; padding: 8px 4px; }
.invite-row {
  display: grid; grid-template-columns: 1fr auto auto 28px; gap: 8px; align-items: center;
  padding: 7px 10px; background: rgba(2,6,23,.35); border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px; font-size: 12.5px;
}
.invite-row.used { opacity: .62; }
.invite-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; font-weight: 600; }
.invite-role-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.invite-role-badge.role-designer { background: rgba(56,189,248,.18); color: #38bdf8; }
.invite-role-badge.role-viewer { background: rgba(16,185,129,.16); color: #34d399; }
.invite-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.invite-status.pending { background: rgba(245,158,11,.16); color: #fbbf24; }
.invite-status.used { background: rgba(107,114,128,.22); color: #cbd5e1; }

/* 가입폼: 사전등록 안내 배지 */
.company-invited-badge {
  margin: 4px 0 8px; padding: 9px 12px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
  border-radius: 9px; color: #34d399; font-size: 12px; font-weight: 600; line-height: 1.45;
}
.company-invited-badge.hidden { display: none; }

/* ═══════════════════════════════════════════
   PDF 주석(ezPDF) 레이어 + 툴바
═══════════════════════════════════════════ */
.anno-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 3; overflow: visible; pointer-events: none;
}
.anno-text-layer {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.anno-text-box {
  position: absolute; transform: translate(-2px, -2px);
  max-width: 220px; padding: 5px 8px; padding-right: 20px;
  background: rgba(255,255,255,.96); color: #1f2937;
  border: 2px solid #ff3b30; border-radius: 6px;
  font-size: 12.5px; line-height: 1.35; font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  white-space: pre-wrap; word-break: break-word; pointer-events: none;
}
.anno-text-content { display: block; }
.anno-text-del {
  position: absolute; top: -9px; right: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: #ef4444; color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.anno-text-del:hover { background: #dc2626; }

/* 주석 도구 그룹 */
.tb-anno-group { display: inline-flex; align-items: center; gap: 2px; }
.tb-anno-group.hidden { display: none; }
.tb-btn.tb-anno.active {
  background: var(--accent, #2563eb); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.tb-anno-color {
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--border2, #334155);
  border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0;
  margin: 0 2px;
}
.tb-anno-color::-webkit-color-swatch-wrapper { padding: 2px; }
.tb-anno-color::-webkit-color-swatch { border: none; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════
   관리자 패널 — 기능/메뉴 관장 · AI 설정 · 코드맵 대시보드
   ════════════════════════════════════════════════════════════ */
.admin-gate-card.wide { max-width: 760px; width: min(760px, 94vw); }

/* 기능 온오프 목록 */
.feat-scope-line { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.feat-scope-label { font-size: 12px; color: #b8b0a2; white-space: nowrap; }
.features-list { display: flex; flex-direction: column; gap: 8px; max-height: 48vh; overflow-y: auto; padding-right: 2px; }
.feature-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .15s, background .15s;
}
.feature-row:hover { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.05); }
.feature-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-meta b { font-size: 14px; color: #f3eee4; }
.feature-meta span { font-size: 12px; color: #9d958863; color: #9d9588; }
/* iOS 스타일 토글 스위치 */
.feature-toggle { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 26px; flex: 0 0 auto;
  background: #4a463e; border-radius: 14px; cursor: pointer; transition: background .18s; outline: none; }
.feature-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.feature-toggle:checked { background: linear-gradient(135deg, #f59e0b, #d97706); }
.feature-toggle:checked::after { transform: translateX(20px); }

.features-save-note { margin-top: 12px; font-size: 12.5px; padding: 8px 12px; border-radius: 9px; }
.features-save-note.hidden { display: none; }
.features-save-note.ok { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.features-save-note.err { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }

/* AI 설정 모달 */
.ai-status-line { font-size: 13px; padding: 9px 13px; border-radius: 10px; margin-bottom: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ai-status-line.on { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.ai-status-line.off { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #fca5a5; }
.ai-key-note { margin: 12px 0; padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px dashed rgba(245,158,11,.35); font-size: 12px; color: #b8b0a2; display: flex; flex-direction: column; gap: 7px; }
.ai-key-note b { color: #f3eee4; font-size: 12.5px; }
.ai-key-note code { display: block; padding: 8px 11px; background: #15130f; border-radius: 7px; color: #fbbf24; font-family: ui-monospace, monospace; font-size: 12px; user-select: all; word-break: break-all; }

/* 코드맵 대시보드 */
.codemap-search-line { margin: 4px 0 12px; }
.codemap-tree { display: flex; flex-direction: column; gap: 16px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.codemap-group-h { font-size: 13px; font-weight: 700; color: #fbbf24; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(245,158,11,.2); }
.codemap-file { padding: 10px 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); margin-bottom: 7px; }
.codemap-file-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.codemap-file-h code { font-family: ui-monospace, monospace; font-size: 12.5px; color: #93c5fd; background: rgba(59,130,246,.1); padding: 2px 7px; border-radius: 5px; }
.codemap-badge { font-size: 10.5px; padding: 1px 8px; border-radius: 20px; background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.codemap-file-desc { font-size: 12.5px; color: #d4cdbf; line-height: 1.5; }
.codemap-file-detail { font-size: 11.5px; color: #9d9588; line-height: 1.5; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,.06); }
.invites-empty { text-align: center; color: #9d9588; font-size: 13px; padding: 24px 0; }

/* ── 기능 OFF 시 해당 메뉴/버튼 숨김 (최상위 관리자 토글 반영) ── */
body.feat-off-annotations #tb-anno-group { display: none !important; }
body.feat-off-zones #zone-tools,
body.feat-off-zones .zone-tools-label,
body.feat-off-zones #zone-list,
body.feat-off-zones .zone-list-head { display: none !important; }
body.feat-off-fls3d #btn-pin-fls,
body.feat-off-fls3d #fls-pane { display: none !important; }
body.feat-off-timelapse #btn-tl-compare { display: none !important; }
body.feat-off-export #section-export { display: none !important; }
/* pin360 OFF: 360 업로드 핀 도구 숨김 (뷰어 자체는 유지) */
body.feat-off-pin360 #btn-pin-file { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   ★ PRO POLISH v2 — 전문 엔지니어링 툴급 마감 (2026-06-16)
   · 본문 산세리프 전환 보강 / 통일된 포커스 링 / 입력·버튼 품질 향상
   · 기존 규칙을 덮지 않고 '보강'만 — 파일 끝에 위치해 우선순위 확보
══════════════════════════════════════════════════════════════ */

/* 1) 접근성+전문성 통일 포커스 링 (키보드 탐색) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* 2) 입력 필드 — 전문 툴 표준(부드러운 배경/보더/포커스 전환) */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], textarea, select {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: #fff;
}
::placeholder { color: var(--text4); opacity: 1; }

/* 3) 버튼 공통 — 라운드/트랜지션/누름 피드백 통일 (개별 색은 기존 유지) */
button { font-family: var(--font-ui); }
.btn-ghost, .btn-deploy, .pf-save, .btn-settings, .btn-exit-edit,
.btn-manage, .btn-signout, .btn-demo {
  border-radius: var(--radius-sm);
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease), transform .1s var(--ease), opacity .16s var(--ease);
}
.btn-ghost:active, .btn-deploy:active, .pf-save:active, .btn-settings:active,
.btn-manage:active, .btn-signout:active, .btn-demo:active { transform: translateY(0) scale(.98); }
.btn-ghost { border-radius: var(--radius-sm); }
.btn-ghost:hover { background: var(--bg2); border-color: var(--text3); }
.btn-deploy { border-radius: var(--radius); box-shadow: var(--shadow-1); }
.btn-deploy:hover { box-shadow: var(--shadow-2); }

/* 4) 카드/패널 그림자 — 평면적이던 표면에 깊이감 부여 */
.hub-card, .mode-card { box-shadow: var(--shadow-1); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.hub-card:hover, .mode-card:hover { box-shadow: var(--shadow-2); }

/* 5) 본문성 과도한 자간 정상화 (라벨/뱃지 제외) */
.card-desc, .hub-sub, .home-sub, .auth-hint, .designers-loading,
.designers-empty, .decks-empty, .settings-email, .designer-email,
.pin-note-input { letter-spacing: 0; }

/* 6) 토스트/프롬프트 — 전문 톤(그림자/라운드) */
.prompt-toast, .toast { box-shadow: var(--shadow-3) !important; }

/* 7) 스크롤 영역 부드럽게 */
.hub-content, .pf-collapse, .designers-list, .zone-list, #zone-list,
.decks-list, .log-table-wrap { scroll-behavior: smooth; }

/* ════════════════════════════════════════════════════════════════
   MOBILE POLISH v3 — 글자/틀 깨짐 정리 · 아이콘 정렬 · 카드 그리드
   (실기기 스크린샷 기반: 상단 인증바 줄바꿈/배지 깨짐/카드 배치 보정)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* ── 상단 인증바: 패딩·간격 압축, 한 줄 유지 ── */
  .hub-authbar, .home-authbar {
    gap: 8px; padding: 9px 12px;
  }
  .brand-logo-top.brand-logo--text { font-size: 15px; }
  .brand-logo-top.brand-logo--img { padding: 5px 10px; }
  .brand-logo-img { max-height: 26px; }

  /* 로그인 전 안내문은 모바일에서 숨겨 버튼 줄바꿈 방지 */
  .auth-signed-out .auth-hint { display: none; }
  .auth-signed-out { gap: 7px; flex-wrap: nowrap; }
  .btn-demo { padding: 7px 11px; font-size: 11px; }

  /* ── 사용자 배지: 이름/역할 한 줄 고정, 말줄임 ── */
  .auth-signed-in { gap: 7px; flex-wrap: nowrap; min-width: 0; }
  .user-badge { padding: 4px 9px 4px 5px; gap: 7px; min-width: 0; }
  .user-avatar { width: 24px; height: 24px; flex-shrink: 0; }
  .user-meta { min-width: 0; }
  .user-name {
    font-size: 11.5px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 92px;
  }
  .user-role { font-size: 9px; white-space: nowrap; }

  /* ── 버튼: 줄바꿈 절대 금지 + 아이콘 정렬 ── */
  .btn-manage, .btn-signout {
    padding: 7px 11px; font-size: 11px; white-space: nowrap; flex-shrink: 0;
  }
  .btn-manage span, .btn-signout span { white-space: nowrap; }
  /* 디자이너 관리는 모바일에서 아이콘만(라벨 숨김) */
  .btn-manage { gap: 0; }
  .btn-manage svg { width: 15px; height: 15px; }

  /* ── 헤더 영역 ── */
  .hub-content { padding: 20px 14px 18px; }
  .hub-head { margin-bottom: 18px; gap: 12px; align-items: flex-start; }
  .hub-title { font-size: 22px; }
  .hub-sub { font-size: 11.5px; line-height: 1.55; }
  .hub-badge { letter-spacing: 4px; }
  .hub-btn-new { width: 100%; justify-content: center; padding: 12px 18px; }

  /* ── 카드 그리드: 단일 열, 균형 잡힌 간격 ── */
  .hub-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hub-card-thumb { height: 96px; }
  .hub-thumb-ship { width: 66px; }
  .hub-card-body { padding: 12px 14px 14px; }
  .hub-card-name { font-size: 14.5px; margin-bottom: 6px; }
  /* 모바일은 hover 가 없으므로 카드 액션(삭제 등)을 항상 노출 */
  .hub-card-actions { opacity: 1; }
  .hub-card:active { transform: scale(.99); }
}

/* 아주 좁은 화면(≤380px): 디자이너 관리 라벨 텍스트 숨김(아이콘만) */
@media (max-width: 380px) {
  /* 버튼 전체 font-size:0 → 인라인 텍스트 사라짐, svg 는 width/height 로 유지 */
  .btn-manage { width: 36px; padding: 7px 0; justify-content: center; font-size: 0; }
  .btn-manage svg { width: 16px; height: 16px; }
  .user-name { max-width: 72px; }
}

/* ════════════════════════════════════════════
   체크보드 모드 토글 버튼 (디자이너 도구 패널 내)
════════════════════════════════════════════ */
.btn-checkboard-toggle{
  margin-top:8px; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; border-radius:var(--radius,9px);
  background:rgba(47,109,181,.10);
  border:1px solid rgba(47,109,181,.45);
  color:var(--blue,#2f6db5); font-size:12.5px; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.btn-checkboard-toggle:hover{ background:rgba(47,109,181,.18); border-color:rgba(47,109,181,.7); }
.btn-checkboard-toggle:active{ transform:translateY(1px); }
.btn-checkboard-toggle.active{
  background:var(--blue,#2f6db5); color:#fff; border-color:var(--blue,#2f6db5);
  box-shadow:0 3px 10px rgba(47,109,181,.3);
}
.btn-checkboard-toggle svg{ flex-shrink:0; }

/* 체크보드 모드일 때 상단 모드 표시 강조(파랑) */
body.mode-checkboard .mode-label{ color:var(--blue,#2f6db5)!important; }

/* ════════════════════════════════════════════
   설정 패널 — 핀 기본 색상 선택 (기본 그린)
════════════════════════════════════════════ */
.settings-pincolor-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:10px 12px;
  background:var(--bg3,#efe9dc); border:1px solid var(--border,#e4dccb); border-radius:10px;
}
.settings-pincolor-label{ font-size:12.5px; font-weight:700; color:var(--text,#2b2820); white-space:nowrap; }
.settings-pincolor-swatches{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.pincolor-sw{
  width:26px; height:26px; border-radius:50%; border:2px solid; cursor:pointer;
  display:grid; place-items:center; color:#fff; font-size:11px;
  box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .12s, box-shadow .15s;
  padding:0;
}
.pincolor-sw:hover{ transform:scale(1.12); }
.pincolor-sw.active{ box-shadow:0 0 0 3px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.25); transform:scale(1.08); }

/* ══════════════════════════════════════════
   구역 페이저 (전체 도면 + 구역 crop-view 탭)
   ══════════════════════════════════════════ */
.zone-pager{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  z-index:42; display:flex; gap:6px; align-items:center;
  max-width:calc(100% - 40px); overflow-x:auto; overflow-y:hidden;
  padding:6px 8px; border-radius:12px;
  background:rgba(20,28,38,.86); backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08);
  scrollbar-width:thin;
}
.zone-pager.hidden{ display:none; }
.zone-pager::-webkit-scrollbar{ height:5px; }
.zone-pager::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:3px; }
.zpager-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:9px; cursor:pointer;
  font-size:.82rem; font-weight:600; line-height:1; white-space:nowrap;
  color:#cdd6e3; background:rgba(255,255,255,.06);
  border:1px solid transparent; transition:background .14s, color .14s, border-color .14s;
}
.zpager-tab:hover{ background:rgba(255,255,255,.13); color:#fff; }
.zpager-tab.active{ background:#2f6db5; color:#fff; border-color:#5b96d6; box-shadow:0 2px 8px rgba(47,109,181,.4); }
.zpager-tab svg{ width:15px; height:15px; }
.zpager-dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(255,255,255,.3); }
.zpager-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.zpager-cnt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font-size:.68rem; font-weight:700; background:rgba(255,255,255,.22); color:#fff;
}

/* 구역 페이지 진입 시: 구역 밖 핀/구역 흐리게 (상세작업 집중) */
body.zone-view-active .pin-marker.zone-dim{ opacity:.22; filter:grayscale(.5); pointer-events:none; }
body.zone-view-active .zone-shape.zone-dim{ opacity:.12; }

@media (max-width:640px), (pointer:coarse){
  .zone-pager{ top:8px; max-width:calc(100% - 16px); padding:5px 6px; gap:5px; }
  .zpager-tab{ padding:8px 11px; font-size:.8rem; }
  .zpager-name{ max-width:90px; }
}

/* [마스터 규칙] 구역 미등록 시 도면 업로드 버튼 잠금 표시 */
.btn-upload.upload-locked{
  opacity:.62; cursor:not-allowed;
  background:repeating-linear-gradient(45deg, rgba(120,130,145,.18), rgba(120,130,145,.18) 8px, rgba(120,130,145,.08) 8px, rgba(120,130,145,.08) 16px);
  border:1px dashed rgba(150,160,175,.55); color:#7a8696;
}
.btn-upload.upload-locked:hover{ filter:none; transform:none; }

/* ── Firebase 연결 모달: 안내 가이드 ── */
.fb-guide { margin: 8px 0 12px; border: 1px solid var(--border2, rgba(0,0,0,.12)); border-radius: 8px; background: rgba(0,0,0,.02); }
.fb-guide > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 700; color: #1d4ed8; list-style: none; }
.fb-guide > summary::-webkit-details-marker { display: none; }
.fb-guide[open] > summary { border-bottom: 1px solid var(--border2, rgba(0,0,0,.12)); }
.fb-guide-list { margin: 0; padding: 10px 12px 12px 28px; font-size: 12.5px; color: #475569; line-height: 1.7; }
.fb-guide-list li { margin: 3px 0; }
.fb-guide-list code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
#fb-paste { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; min-height: 110px; }

/* ════════════════════════════════════════════════════════════
   [마스터 요청] 대비 보정 — "검은 바탕 검은 글씨" → "검은 바탕 흰 글씨"
   라이트(아이보리) 테마로 전환되며 일부 패널/배지가 예전 다크 배경을
   유지해 텍스트가 묻히던 문제를 일괄 교정. (다크 배경은 그대로 유지하고
   그 위 텍스트만 흰색 계열로 강제)
   ──────────────────────────────────────────────────────────── */

/* ── 1) 사용자 인증 배지(다크 pill) 안의 이름/아바타 ── */
.user-badge .user-name,
.hub-auth-bar .user-name,
#user-name, #hub-user-name { color: #f3f5f9 !important; }

/* ── 2) 360 노트(필드노트) 패널: 다크 배경 위 제목/본문 ── */
.pano-notes-panel .pnp-title { color: #f3f5f9 !important; }

/* ── 3) 타임랩스 타임라인(다크 배경) 위 텍스트 ── */
.pano-timeline .tl-head,
.pano-timeline .tl-ico,
.pano-timeline .tl-current { color: rgba(243,245,249,.92) !important; }

/* ── 4) FLS / CAD 검토 패널 헤더(다크 네이비) 위 제목·버튼 ── */
.fls-head { color: #e8eefb !important; }
.fls-head .fls-head-title,
.fls-head .fls-head-title span:not(.fls-fmt-badge),
#btn-fls-reset, #btn-fls-collapse { color: #e8eefb !important; }
.fls-ctrl { color: #cfe0f5 !important; }
/* 파노라마 시점 안내 문구(다크 캔버스 위) */
.pano-overlay .pano-hint,
.pano-overlay .pano-hint span { color: rgba(243,245,249,.85) !important; }

/* ── 5) 데모 모드 안내 배지(다크 pill) 위 글씨 → 흰색 ── */
.demo-mode-badge { color: #f3f5f9 !important; }

/* ── 6) 관리자 필터 칩: 비활성(밝은 배경)=다크 글씨, 활성(컬러 배경)=흰색 ── */
.adm-filter-item { color: var(--text2) !important; }
.adm-filter-item.active { color: #ffffff !important; }

/* ── 7) 흐린 라벨(거의 안 보이던) 대비 살짝 강화 ── */
.feat-scope-label { color: var(--text3) !important; }

/* (참고) #btn-deploy, #hub-btn-demo-designer, #login-gate-demo 등은 실제로
   컬러/다크 배경 위 흰 글씨라 정상입니다. 감사 도구가 숨김 상태에서
   부모 배경으로 오탐한 케이스이므로 색을 바꾸지 않습니다. */

/* [오프라인 작업지시서 ❼] 네트워크 상태 배지 */
.net-badge{position:fixed;top:8px;right:8px;display:none;align-items:center;gap:6px;
  background:var(--red);color:#fff;padding:6px 12px;border-radius:20px;
  font:700 11px var(--font-ui);z-index:9999;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.net-badge.show{display:flex}
.net-badge.syncing{background:var(--blue)}
.net-q{background:rgba(0,0,0,.25);color:#fff;padding:2px 8px;border-radius:10px;
  font:700 11px var(--font-mono)}